:root {
  color-scheme: light;
  --primary: #ffdd2d;
  --primary-hover: #f4cf00;
  --text: #333333;
  --text-muted: rgba(0, 0, 0, 0.54);
  --background: #f6f7f8;
  --surface: #ffffff;
  --surface-soft: rgba(36, 74, 127, 0.06);
  --surface-strong: #eaecee;
  --border: rgba(0, 16, 36, 0.12);
  --link: #126df7;
  --info: #428bf9;
  --success: #00b92d;
  --warning: #d98200;
  --danger: #d94a4a;
  --sidebar-width: 248px;
  --content-max: 1440px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-card: 0 8px 24px rgba(0, 16, 36, 0.06);
  --focus-ring: 0 0 0 3px rgba(18, 109, 247, 0.25);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-synthesis: none;
}

/* Messages */
.messages-page {
  --messages-blue: #2481cc;
  --messages-line: rgba(60, 60, 67, .16);
  display: grid;
  grid-template-rows: auto auto minmax(590px, 1fr) auto;
  gap: 14px;
  align-content: start;
  min-height: calc(100vh - 112px);
}

.messages-page-header,
.messages-page-header > div,
.message-detail-card > header,
.message-thread-card > header,
.message-link-controls {
  display: flex;
  align-items: center;
}

.messages-page-header {
  justify-content: space-between;
}

.messages-page-header h1,
.message-detail-card h2,
.message-thread-card h2 {
  margin: 0;
  font-weight: 560;
  letter-spacing: -.025em;
}

.messages-page-header > div {
  align-items: baseline;
  gap: 10px;
}

.messages-archive-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted-text, #6d6d72);
  font-size: 13px;
}

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

.messages-segments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(330px, 100%);
  padding: 3px;
  border-radius: 10px;
  background: rgba(118, 118, 128, .12);
}

.messages-segments button {
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  color: #74747a;
  background: transparent;
  font: inherit;
  font-size: 13px;
}

.messages-segments button.is-active {
  color: #1c1c1e;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.messages-segments span {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0 5px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: var(--messages-blue);
  font-size: 11px;
}

.messages-segments span[hidden] {
  display: none;
}

.messages-search {
  display: flex;
  align-items: center;
  gap: 7px;
  width: min(420px, 100%);
  padding: 7px 11px;
  border-radius: 10px;
  color: #85858b;
  background: rgba(118, 118, 128, .12);
}

.messages-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
}

.messages-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 350px) minmax(0, 1fr);
  min-height: 590px;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--messages-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 8px 30px rgba(34, 48, 73, .05);
}

.messages-list {
  overflow-y: auto;
  border-right: 1px solid var(--messages-line);
  background: rgba(247, 247, 249, .72);
}

.message-list-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  width: 100%;
  min-height: 68px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--messages-line);
  text-align: left;
  background: transparent;
}

.message-list-item:hover,
.message-list-item.is-active {
  background: rgba(36, 129, 204, .1);
}

.message-avatar {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(150deg, #5f9fe5, #2476c4);
  font-weight: 500;
}

.message-avatar.is-website {
  background: linear-gradient(150deg, #a98ce3, #7863cb);
}

.message-list-copy,
.message-list-meta {
  display: grid;
  align-content: center;
  min-width: 0;
}

.message-list-copy strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 520;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-list-item.is-unread .message-list-copy strong {
  font-weight: 650;
}

.message-list-copy small {
  overflow: hidden;
  color: #77777c;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-list-meta {
  justify-items: end;
  color: #8e8e93;
  font-size: 10px;
}

.message-list-item.is-unread .message-list-meta time {
  color: var(--messages-blue);
}

.messages-list-empty,
.messages-status {
  margin: 0;
  padding: 20px;
  color: #8e8e93;
  text-align: center;
  font-size: 13px;
}

.messages-status {
  min-height: 18px;
  padding: 0;
}

.messages-status.is-error {
  color: #c73c4e;
}

.messages-detail {
  min-width: 0;
  overflow-y: auto;
  background: linear-gradient(145deg, rgba(239, 244, 249, .78), rgba(248, 248, 249, .88));
}

.messages-empty-state {
  display: grid;
  height: 100%;
  min-height: 420px;
  padding: 32px;
  place-content: center;
  justify-items: center;
  color: #8e8e93;
  text-align: center;
}

.messages-empty-state strong {
  color: #3d3d42;
  font-weight: 560;
}

.messages-empty-state p {
  max-width: 340px;
  margin: 6px 0;
}

.messages-empty-glyph {
  display: grid;
  width: 50px;
  height: 50px;
  margin-bottom: 12px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--messages-blue);
  font-size: 22px;
}

.message-detail-card,
.message-thread-card {
  max-width: 760px;
  margin: 22px auto;
  padding: 0 22px;
}

.message-detail-card > header,
.message-thread-card > header {
  justify-content: space-between;
  margin-bottom: 14px;
}

.message-detail-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.message-detail-card > header small,
.message-thread-card > header small,
.message-bubble > small {
  color: #8e8e93;
}

.message-icon-button {
  display: grid;
  width: 36px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  place-items: center;
  color: #68686d;
  background: rgba(118, 118, 128, .12);
}

.message-facts,
.message-body,
.message-link-panel,
.message-bubble {
  border: 1px solid var(--messages-line);
  border-radius: 14px;
  background: #fff;
}

.message-facts {
  margin: 0;
  overflow: hidden;
}

.message-facts > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  min-height: 42px;
  padding: 10px 14px;
  align-items: center;
  border-bottom: 1px solid var(--messages-line);
}

.message-facts > div:last-child {
  border-bottom: 0;
}

.message-facts dt {
  color: #8e8e93;
  font-size: 12px;
}

.message-facts dd {
  margin: 0;
  font-size: 14px;
}

.message-facts dd span:not(:last-child)::after {
  content: ' · ';
  color: #b0b0b4;
}

.message-body {
  margin: 12px 0;
  padding: 14px;
  white-space: pre-wrap;
}

.message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.message-attachments a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 10px;
  color: var(--messages-blue);
  background: rgba(36, 129, 204, .1);
  text-decoration: none;
}

.message-link-panel {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
}

.message-link-panel strong {
  font-weight: 560;
}

.message-link-panel p {
  margin: 3px 0 0;
  color: #77777c;
  font-size: 12px;
}

.message-link-controls {
  gap: 8px;
}

.message-client-search {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 11px;
  border-radius: 11px;
  color: #85858b;
  background: rgba(118, 118, 128, .1);
}

.message-client-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}

.message-client-results {
  display: grid;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--messages-line);
  border-radius: 13px;
  background: #fff;
}

.message-client-result {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 22px;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 6px 11px;
  border: 0;
  border-bottom: 1px solid var(--messages-line);
  color: #29292d;
  text-align: left;
  background: transparent;
}

.message-client-result:last-child {
  border-bottom: 0;
}

.message-client-result:hover,
.message-client-result.is-selected {
  background: rgba(36, 129, 204, .09);
}

.message-client-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: var(--messages-blue);
  background: rgba(36, 129, 204, .12);
  font-size: 13px;
}

.message-client-check {
  color: var(--messages-blue);
  text-align: center;
}

.message-client-empty {
  margin: 0;
  padding: 18px;
  color: #8e8e93;
  text-align: center;
  font-size: 13px;
}

.message-link-controls {
  justify-content: space-between;
}

.message-link-controls > span {
  min-width: 0;
  overflow: hidden;
  color: #77777c;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-link-controls button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  border: 0;
  border-radius: 10px;
  padding: 0 16px;
  color: #fff;
  background: var(--messages-blue);
}

.message-link-controls button:disabled {
  opacity: .38;
}

.message-link-footnote {
  margin: -3px 0 0;
  color: #8e8e93;
  font-size: 11px;
}

.message-thread-card > header {
  justify-content: flex-start;
  gap: 10px;
}

.message-thread-stream {
  display: grid;
  gap: 10px;
}

.message-bubble {
  width: min(560px, 92%);
  padding: 12px;
}

.message-bubble .message-facts {
  margin-top: 8px;
  border: 0;
  border-radius: 0;
}

.message-bubble p {
  margin: 10px 0 0;
  white-space: pre-wrap;
}

.message-thread-card > footer {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 12px;
  color: #77777c;
  background: rgba(255, 255, 255, .75);
  font-size: 12px;
}

.message-thread-card > footer p {
  margin: 0;
}

@media (max-width: 760px) {
  .messages-page { grid-template-rows: auto auto auto auto; min-height: auto; }
  .messages-page-header > div { display: block; }
  .messages-page-header .page-kicker { margin-bottom: 2px; }
  .messages-toolbar { display: grid; gap: 10px; }
  .messages-segments, .messages-search { width: 100%; max-width: none; }
  .messages-workspace { grid-template-columns: 1fr; min-height: 0; }
  .messages-list { max-height: 330px; border-right: 0; border-bottom: 1px solid var(--messages-line); }
  .messages-detail { min-height: 440px; }
  .message-detail-card, .message-thread-card { margin: 16px auto 78px; padding: 0 12px; }
  .message-facts > div { grid-template-columns: 86px minmax(0, 1fr); }
}

/* Messages v2 */
.messages-page-v2 {
  --messages-blue: #2481cc;
  --messages-green: #2cab54;
  --messages-red: #e34d59;
  --messages-gray: #7d8792;
  --messages-line: rgba(28, 39, 49, .1);
  display: grid;
  min-height: calc(100vh - 112px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
}

.messages-page-v2 .messages-page-header {
  min-height: 62px;
  align-items: center;
}

.messages-page-v2 .messages-page-header > div {
  display: grid;
  gap: 3px;
}

.messages-page-v2 .messages-page-header h1 {
  margin: 0;
  color: #21252a;
  font-size: clamp(29px, 3vw, 36px);
  font-weight: 570;
  letter-spacing: -.038em;
}

.messages-page-v2 .messages-page-header p {
  color: #858b92;
  font-size: 12px;
}

.messages-archive-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid rgba(36, 129, 204, .12);
  border-radius: 12px;
  color: #66717c;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 2px 10px rgba(41, 63, 85, .035);
  cursor: pointer;
  font-size: 11px;
  font-weight: 540;
  transition: 150ms ease;
}

.messages-archive-button:hover,
.messages-archive-button.is-active {
  color: var(--messages-blue);
  background: rgba(36, 129, 204, .09);
}

.messages-archive-button svg {
  width: 18px;
  height: 18px;
}

.messages-archive-count {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  place-items: center;
  color: #fff;
  background: var(--messages-blue);
  font-size: 9px;
  font-weight: 620;
  line-height: 1;
}

.messages-archive-count[hidden] { display: none; }

.messages-page-v2 .messages-workspace {
  display: grid;
  min-height: min(740px, calc(100vh - 192px));
  grid-template-columns: minmax(300px, 350px) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--messages-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 18px 55px rgba(40, 58, 75, .07);
}

.messages-page-v2 { overflow-anchor: none; }

.messages-stage {
  position: relative;
  min-height: 0;
}

.messages-stage > .messages-workspace { width: 100%; }

.messages-sidebar {
  display: grid;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-right: 1px solid var(--messages-line);
  background: rgba(250, 250, 251, .94);
}

.messages-conversation-column {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: minmax(570px, min(740px, calc(100vh - 192px))) max-content;
  background: #f5f7f9;
}

.messages-page-v2 .messages-toolbar {
  display: grid;
  gap: 10px;
  padding: 13px 12px 12px;
  border-bottom: 1px solid var(--messages-line);
  background: rgba(255, 255, 255, .86);
}

.messages-page-v2 .messages-segments {
  width: 100%;
  padding: 3px;
  border-radius: 11px;
  background: rgba(118, 118, 128, .11);
}

.messages-page-v2 .messages-segments button {
  min-height: 31px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 520;
}

.messages-page-v2 .messages-segments span {
  min-width: 17px;
  height: 17px;
  font-size: 9px;
}

.messages-page-v2 .messages-search,
.message-client-picker .message-client-search {
  width: 100%;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #8b9299;
  background: rgba(118, 118, 128, .09);
  transition: 140ms ease;
}

.messages-page-v2 .messages-search:focus-within,
.message-client-picker .message-client-search:focus-within {
  border-color: rgba(36, 129, 204, .22);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(36, 129, 204, .07);
}

.messages-page-v2 .messages-search svg,
.message-client-picker .message-client-search svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.messages-page-v2 .messages-search input,
.message-client-picker .message-client-search input {
  color: #272b30;
  font-size: 12px;
}

.messages-page-v2 .messages-list {
  min-height: 0;
  overflow: auto;
  border: 0;
  background: transparent;
  overscroll-behavior: contain;
}

.messages-page-v2 .message-list-item {
  position: relative;
  z-index: 1;
  min-height: 70px;
  border: 0;
  background: #fff;
  cursor: pointer;
  transition: background 120ms ease;
}

.messages-page-v2 .message-list-item:hover {
  background: #f6f9fc;
}

.messages-page-v2 .message-list-item.is-active {
  background: rgba(36, 129, 204, .12);
}

.messages-page-v2 .message-list-item.is-unread::after {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--messages-blue);
  content: '';
  transform: translateY(-50%);
}

.messages-page-v2 .message-list-item.is-unread .message-list-meta {
  padding-right: 12px;
}

.messages-page-v2 .message-avatar {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  font-size: 13px;
  font-weight: 560;
}

.messages-page-v2 .message-list-copy strong {
  color: #282c31;
  font-size: 13px;
  font-weight: 540;
}

.messages-page-v2 .message-list-copy small {
  color: #81878d;
  font-size: 11px;
}

.messages-page-v2 .message-list-meta {
  gap: 4px;
  font-size: 9px;
}

.messages-list-empty {
  display: grid;
  min-height: 210px;
  align-content: center;
  gap: 4px;
}

.messages-list-empty strong {
  color: #60666d;
  font-size: 12px;
  font-weight: 560;
}

.messages-list-empty span {
  font-size: 10px;
}

.messages-page-v2 .messages-detail {
  min-width: 0;
  overflow-y: auto;
  background:
    radial-gradient(circle at 8% 12%, rgba(36,129,204,.045), transparent 28%),
    radial-gradient(circle at 96% 82%, rgba(120,99,203,.045), transparent 29%),
    #f5f7f9;
  overscroll-behavior: contain;
}

.messages-page-v2 .messages-empty-state {
  min-height: 100%;
}

.messages-page-v2 .messages-empty-glyph {
  width: 54px;
  height: 54px;
  color: var(--messages-blue);
  background: rgba(36, 129, 204, .1);
}

.messages-page-v2 .messages-empty-glyph svg {
  width: 28px;
  height: 28px;
}

.message-detail-card,
.message-thread-card {
  width: min(820px, 100%);
  max-width: none;
  margin: 0 auto;
  padding: 24px clamp(16px, 3.2vw, 34px) 36px;
}

.message-detail-card > header,
.message-thread-card > header {
  min-height: 52px;
  margin-bottom: 16px;
}

.message-detail-person {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.message-detail-person > div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.message-detail-person h2,
.message-thread-card h2 {
  overflow: hidden;
  margin: 0;
  color: #22262a;
  font-size: 20px;
  font-weight: 570;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-detail-person small,
.message-thread-card header small {
  font-size: 10px;
}

.message-detail-actions {
  flex: 0 0 auto;
}

.message-icon-button,
.message-mobile-back {
  display: grid;
  width: 36px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  place-items: center;
  color: #65717c;
  background: rgba(255,255,255,.84);
  box-shadow: inset 0 0 0 1px var(--messages-line);
  cursor: pointer;
}

.message-icon-button:hover,
.message-mobile-back:hover {
  color: var(--messages-blue);
  background: #fff;
}

.message-icon-button.is-destructive {
  color: var(--messages-red);
}

.message-icon-button.has-label {
  display: inline-flex;
  width: auto;
  min-width: 112px;
  padding: 0 12px;
  gap: 7px;
  color: var(--messages-blue);
  font: inherit;
  font-size: 10px;
  font-weight: 570;
  white-space: nowrap;
}

.message-icon-button.has-label svg {
  flex: 0 0 auto;
}

.message-icon-button.is-destructive:hover {
  color: #fff;
  background: var(--messages-red);
  box-shadow: none;
}

.message-icon-button svg,
.message-mobile-back svg {
  width: 20px;
  height: 20px;
}

.message-mobile-back {
  display: none;
}

.message-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(290px, 1.1fr);
  gap: 12px;
}

.message-content-section {
  min-width: 0;
  margin: 0 0 12px;
  padding: 14px;
  border: 1px solid var(--messages-line);
  border-radius: 15px;
  background: rgba(255,255,255,.93);
  box-shadow: 0 5px 18px rgba(42, 62, 82, .035);
}

.message-content-section h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  color: #8a9198;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.message-content-section h3 span {
  display: inline-grid;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  place-items: center;
  border-radius: 9px;
  color: var(--messages-blue);
  background: rgba(36,129,204,.1);
  font-size: 9px;
  letter-spacing: 0;
}

.messages-page-v2 .message-body {
  margin: 0;
  padding: 0;
  border: 0;
  color: #30353a;
  background: transparent;
  font-size: 14px;
  line-height: 1.5;
}

.messages-page-v2 .message-body.is-muted {
  color: #949aa0;
}

.message-translation {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(28,39,49,.09);
}

.message-translation p {
  margin: 0;
  color: #30353a;
  font-size: 14px;
  line-height: 1.5;
}

.message-translation small {
  display: block;
  margin-top: 6px;
  color: #92989e;
  font-size: 9px;
}

.message-translation-menu {
  position: relative;
  width: max-content;
  margin: 12px 0 0 auto;
}

.message-translation-menu summary {
  display: flex;
  min-height: 30px;
  padding: 0 11px;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  color: var(--messages-blue);
  background: rgba(36,129,204,.09);
  cursor: pointer;
  font-size: 10px;
  list-style: none;
}

.message-translation-menu summary::-webkit-details-marker { display: none; }

.message-translation-menu > div {
  position: absolute;
  z-index: 8;
  right: 0;
  top: 36px;
  display: grid;
  min-width: 145px;
  padding: 5px;
  border: 1px solid var(--messages-line);
  border-radius: 12px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 12px 32px rgba(27,42,58,.13);
}

.message-translation-menu button {
  min-height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  color: #353a3f;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 10px;
}

.message-translation-menu button:hover { background: rgba(36,129,204,.08); }

.messages-page-v2 .message-facts {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.messages-page-v2 .message-facts > div {
  min-height: 34px;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(28,39,49,.075);
}

.messages-page-v2 .message-facts > div:first-child { padding-top: 0; }
.messages-page-v2 .message-facts > div:last-child { padding-bottom: 0; border-bottom: 0; }
.messages-page-v2 .message-facts dt { font-size: 10px; }
.messages-page-v2 .message-facts dd { color: #353a3f; font-size: 12px; }

.messages-page-v2 .message-attachments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 9px;
  margin: 0;
}

.messages-page-v2 .message-attachments a {
  display: grid;
  min-width: 0;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  padding: 7px;
  color: #353b41;
  background: #f6f8fa;
}

.message-photo-preview {
  position: relative;
  display: block;
  width: 52px;
  height: 46px;
  overflow: hidden;
  border-radius: 8px;
  background: #e7ebef;
}

.message-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-photo-preview i {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,.08));
}

.messages-page-v2 .message-attachments a > span:last-child {
  display: grid;
  min-width: 0;
  align-content: center;
}

.messages-page-v2 .message-attachments strong {
  overflow: hidden;
  font-size: 10px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-page-v2 .message-attachments small {
  color: #92989e;
  font-size: 9px;
}

.message-connect-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(36,129,204,.13);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(238,247,255,.88));
}

.message-connect-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: var(--messages-blue);
  background: rgba(36,129,204,.1);
}

.message-connect-icon svg {
  width: 23px;
  height: 23px;
}

.message-connect-card strong {
  color: #30353a;
  font-size: 12px;
  font-weight: 570;
}

.message-connect-card p {
  margin-top: 2px;
  color: #80878e;
  font-size: 10px;
}

.message-connect-card > button {
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--messages-blue);
  cursor: pointer;
  font-size: 10px;
  font-weight: 570;
}

.message-thread-card > header {
  justify-content: flex-start;
}

.message-thread-stream {
  gap: 12px;
}

.messages-page-v2 .message-bubble {
  width: min(620px, 92%);
  padding: 14px;
  border-color: rgba(36,129,204,.11);
  box-shadow: 0 5px 18px rgba(42,62,82,.035);
}

.messages-page-v2 .message-bubble p {
  color: #33383d;
  font-size: 13px;
}

.messages-page-v2 .message-bubble.is-outbound {
  margin-left: auto;
  color: #fff;
  border-color: transparent;
  background: var(--messages-blue);
}

.messages-page-v2 .message-bubble.is-outbound p,
.messages-page-v2 .message-bubble.is-outbound .message-translation p {
  color: #fff;
}

.messages-page-v2 .message-bubble.is-outbound small {
  color: rgba(255,255,255,.72);
}

.messages-page-v2 .message-thread-card > footer {
  align-items: center;
  border: 1px solid var(--messages-line);
  background: rgba(255,255,255,.75);
}

.message-client-picker {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  padding: 18px;
  place-items: center;
  opacity: 0;
  transition: opacity 150ms ease;
}

.message-client-picker[hidden] { display: none; }
.message-client-picker.is-open { opacity: 1; }

.message-client-picker-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(18, 25, 32, .42);
  backdrop-filter: blur(8px);
}

.message-client-picker > section {
  position: relative;
  display: grid;
  width: min(470px, 100%);
  max-height: min(680px, calc(100dvh - 36px));
  grid-template-rows: auto auto minmax(150px, 1fr) auto;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 20px;
  background: rgba(249,250,251,.98);
  box-shadow: 0 28px 90px rgba(19,34,48,.22);
  transform: translateY(10px) scale(.985);
  transition: transform 170ms ease;
}

.message-client-picker.is-open > section {
  transform: none;
}

.message-client-picker > section > header,
.message-client-picker > section > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.message-client-picker > section > header small {
  color: #8a9198;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.message-client-picker > section > header h2 {
  margin: 1px 0 0;
  font-size: 20px;
  font-weight: 570;
}

.message-client-picker > section > header > button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: #747b82;
  background: rgba(118,118,128,.1);
  cursor: pointer;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
}

.message-client-picker .message-client-results {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  border-color: var(--messages-line);
}

.message-client-picker .message-client-result {
  cursor: pointer;
}

.message-client-picker > section > footer {
  min-width: 0;
}

.message-client-picker > section > footer > span {
  min-width: 0;
  overflow: hidden;
  color: #7c838a;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-client-picker > section > footer > div {
  display: flex;
  gap: 7px;
}

.message-client-picker > section > footer button {
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 10px;
  color: #5f6871;
  background: rgba(118,118,128,.1);
  cursor: pointer;
  font-size: 10px;
  font-weight: 550;
}

.message-client-picker > section > footer button.is-primary {
  color: #fff;
  background: var(--messages-blue);
}

.message-client-picker > section > footer button:disabled {
  cursor: default;
  opacity: .38;
}

.messages-page-v2 .messages-status {
  min-height: 16px;
  padding: 0 4px;
  text-align: left;
  font-size: 10px;
}

@media (max-width: 980px) {
  .messages-page-v2 .messages-workspace {
    grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
  }
  .message-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .messages-page-v2 {
    min-height: calc(100dvh - 120px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
  }
  .messages-page-v2 .messages-page-header {
    min-height: 48px;
  }
  .messages-page-v2 .messages-page-header h1 { font-size: 28px; }
  .messages-page-v2 .messages-page-header p { display: none; }
  .messages-archive-button {
    min-width: 38px;
    width: 38px;
    padding: 0;
    justify-content: center;
  }
  .messages-archive-button span { display: none; }
  .messages-page-v2 .messages-workspace {
    min-height: 500px;
    grid-template-columns: 1fr;
    overflow: visible;
    border-radius: 17px;
  }
  .messages-conversation-column {
    min-height: 0;
    grid-template-rows: minmax(500px, calc(100dvh - 185px)) max-content;
  }
  .messages-sidebar {
    border-right: 0;
  }
  .messages-page-v2 .messages-detail {
    display: none;
  }
  .messages-page-v2 .messages-conversation-column {
    display: none;
  }
  .messages-page-v2.is-detail-open .messages-sidebar {
    display: none;
  }
  .messages-page-v2.is-detail-open .messages-conversation-column {
    display: grid;
  }
  .messages-page-v2.is-detail-open .messages-detail {
    display: block;
  }
  .messages-page-v2.is-detail-open .messages-workspace {
    height: auto;
  }
  .message-detail-card,
  .message-thread-card {
    padding: 12px 11px 92px;
  }
  .message-detail-card > header,
  .message-thread-card > header {
    position: sticky;
    z-index: 4;
    top: -12px;
    margin: -12px -11px 12px;
    padding: 10px 11px;
    border-bottom: 1px solid var(--messages-line);
    background: rgba(248,249,250,.94);
    backdrop-filter: blur(18px);
  }
  .message-mobile-back {
    display: grid;
    flex: 0 0 auto;
  }
  .message-detail-person {
    flex: 1;
  }
  .message-detail-person .message-avatar {
    display: none;
  }
  .message-detail-actions { gap: 5px; }
  .message-detail-grid { grid-template-columns: 1fr; }
  .message-connect-card {
    grid-template-columns: 36px minmax(0, 1fr);
  }
  .message-connect-card > button {
    grid-column: 1 / -1;
    width: 100%;
  }
  .messages-page-v2 .message-attachments {
    grid-template-columns: 1fr;
  }
  .message-client-picker {
    padding: 0;
    place-items: end center;
  }
  .message-client-picker > section {
    width: 100%;
    max-height: 88dvh;
    border-radius: 21px 21px 0 0;
    transform: translateY(100%);
  }
  .message-client-picker.is-open > section {
    transform: none;
  }
  .message-client-picker > section > footer {
    display: grid;
  }
  .message-client-picker > section > footer > div {
    width: 100%;
  }
  .message-client-picker > section > footer button {
    flex: 1;
  }
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; background: var(--background); color: var(--text); font-size: 15px; line-height: 1.45; }
body.sidebar-open, body.modal-open { overflow: hidden; }
body.pull-refresh-enabled { overscroll-behavior-y: none; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
img { max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 10px; font-size: clamp(30px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.035em; }
h2 { margin-bottom: 8px; font-size: clamp(23px, 3vw, 28px); line-height: 1.2; letter-spacing: -0.025em; }
h3 { margin-bottom: 12px; font-size: 18px; line-height: 1.3; }
p { margin-bottom: 0; color: var(--text-muted); }
code { font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; }

.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface); color: var(--link); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; display: flex; width: var(--sidebar-width); flex-direction: column; border-right: 1px solid var(--border); background: var(--surface); transition: transform 180ms ease-out; }
.sidebar-header { display: flex; min-height: 80px; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.brand-lockup, .mobile-brand { display: flex; align-items: center; min-width: 0; }
.brand-lockup img { display: block; width: 172px; height: auto; object-fit: contain; }
.mobile-brand img { display: block; width: 116px; height: auto; object-fit: contain; }
.sidebar-close { display: none; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px; }
.nav-group + .nav-group { margin-top: 18px; }
.nav-group-label { padding: 0 10px 7px; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.nav-link { display: flex; min-height: 42px; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--radius-sm); color: rgba(0, 0, 0, 0.72); font-weight: 550; transition: background 140ms ease-out, color 140ms ease-out; }
.nav-link:hover { background: var(--surface-soft); color: var(--text); }
.nav-link.is-active { background: var(--primary); color: var(--text); font-weight: 700; }
.nav-link.has-active-child { background: var(--surface-soft); color: var(--text); font-weight: 650; }
.nav-glyph { display: grid; width: 22px; height: 22px; place-items: center; font-size: 17px; line-height: 1; }
.nav-submenu { position: relative; display: grid; gap: 2px; margin: 2px 0 4px 21px; padding-left: 20px; }
.nav-submenu[hidden] { display: none; }
.nav-submenu::before { content: ""; position: absolute; top: 0; bottom: 18px; left: 0; border-left: 1px solid var(--border); }
.nav-sublink { position: relative; display: flex; min-height: 36px; align-items: center; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 12px; font-weight: 600; transition: background 140ms ease-out, color 140ms ease-out; }
.nav-sublink:hover { background: var(--surface-soft); color: var(--text); }
.nav-sublink.is-active { background: rgba(255, 221, 45, 0.34); color: var(--text); font-weight: 700; }
.nav-submenu-marker { position: absolute; top: 50%; left: -20px; width: 12px; border-top: 1px solid var(--border); }
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--border); }
.sidebar-footer small { color: var(--text-muted); font-size: 11px; text-transform: capitalize; }
.connection-status, .topbar-status { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12px; }
.status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--danger); }
.is-success .status-dot { background: var(--success); }
.is-error .status-dot { background: var(--danger); }
.sidebar-overlay { position: fixed; inset: 0; z-index: 35; display: none; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0, 0, 0, 0.34); }

.app-frame { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; top: 0; z-index: 25; display: flex; min-height: 64px; align-items: center; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(18px); }
.pull-to-refresh { --pull-distance: 0px; position: fixed; top: max(6px, env(safe-area-inset-top)); left: 50%; z-index: 55; display: none; min-height: 38px; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border: 1px solid rgba(0, 16, 36, 0.12); border-radius: 999px; opacity: 0; background: rgba(255, 255, 255, 0.96); color: var(--text-muted); box-shadow: 0 8px 24px rgba(0, 16, 36, 0.16); font-size: 11px; font-weight: 700; pointer-events: none; transform: translate(-50%, calc(-58px + var(--pull-distance))); transition: opacity 120ms ease-out, transform 120ms ease-out; backdrop-filter: blur(14px); }
body.pull-refresh-enabled .pull-to-refresh { display: flex; }
.pull-to-refresh.is-visible { opacity: 1; }
.pull-to-refresh.is-ready { color: var(--text); }
.pull-to-refresh-icon { display: grid; width: 24px; height: 24px; place-items: center; flex: 0 0 24px; border-radius: 50%; background: rgba(255, 221, 45, 0.32); color: var(--text); font-size: 15px; transition: transform 150ms ease-out; }
.pull-to-refresh.is-ready .pull-to-refresh-icon { transform: rotate(180deg); }
.pull-to-refresh.is-refreshing .pull-to-refresh-icon { animation: pull-refresh-spin 650ms linear infinite; }
@keyframes pull-refresh-spin { to { transform: rotate(360deg); } }
.menu-toggle, .mobile-brand { display: none; }
.topbar-context { color: var(--text-muted); font-size: 13px; font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.avatar { display: grid; width: 36px; height: 36px; place-items: center; border: 2px solid transparent; border-radius: 50%; background: var(--text); color: #fff; font-size: 13px; font-weight: 800; transition: border-color 140ms ease-out, transform 120ms ease-out; }
.avatar:hover, .avatar.is-active { border-color: var(--primary); transform: translateY(-1px); }
.icon-button { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; font-size: 20px; }
.icon-button:hover { background: var(--surface-soft); }
.icon-button.menu-toggle, .icon-button.sidebar-close { display: none; }
.page-content { width: min(100%, var(--content-max)); margin: 0 auto; padding: 40px clamp(24px, 4vw, 56px) 64px; }
.page-content--wide-table { width: min(100%, 1920px); }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.page-header p { max-width: 640px; font-size: 16px; }
.page-kicker { margin-bottom: 8px; color: var(--text-muted); font-size: 12px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }

.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; font-weight: 650; line-height: 1.2; transition: transform 120ms ease-out, background 140ms ease-out, border-color 140ms ease-out; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:disabled { cursor: not-allowed; opacity: 0.45; transform: none; }
.button-primary { background: var(--primary); color: var(--text); }
.button-primary:hover { background: var(--primary-hover); }
.button-secondary { border-color: var(--border); background: var(--surface); color: var(--text); }
.button-secondary:hover { background: var(--surface-soft); }
.button-ghost { background: transparent; color: var(--link); }
.button-ghost:hover { background: rgba(18, 109, 247, 0.08); }
.button-danger { background: var(--danger); color: #fff; }
.button-danger:hover { background: #c83f3f; }
.button-small { min-height: 40px; padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
.card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }

.empty-workspace { display: flex; min-height: 410px; align-items: center; justify-content: center; flex-direction: column; padding: clamp(32px, 7vw, 72px); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); text-align: center; box-shadow: var(--shadow-card); }
.empty-workspace.compact { min-height: 380px; }
.empty-workspace h2 { margin: 18px 0 8px; }
.empty-workspace p { max-width: 610px; font-size: 16px; }
.blank-workspace { min-height: calc(100vh - 150px); }
.empty-logo { display: grid; width: 112px; height: 112px; place-items: center; overflow: hidden; border-radius: 28px; background: var(--surface); }
.empty-logo img { width: 100%; height: 100%; object-fit: cover; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.badge { display: inline-flex; min-height: 26px; align-items: center; width: fit-content; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-neutral { background: var(--surface-soft); color: rgba(0, 0, 0, 0.66); }
.badge-success { background: rgba(0, 185, 45, 0.12); color: #007a1e; }
.badge-warning { background: rgba(217, 130, 0, 0.13); color: #8a5200; }
.badge-error { background: rgba(217, 74, 74, 0.12); color: #a12f2f; }
.empty-module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.empty-module { display: grid; min-height: 150px; align-content: space-between; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.empty-module > span { color: var(--text-muted); font-size: 13px; font-weight: 650; }
.empty-module strong { font-size: 34px; font-variant-numeric: tabular-nums; }
.empty-module small { color: var(--text-muted); }
.placeholder-glyph { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 50%; background: var(--primary); font-size: 30px; }
.empty-workspace.compact .button { margin-top: 24px; }

.brandbook-header { align-items: center; }
.brandbook-index { position: sticky; top: 76px; z-index: 15; display: flex; gap: 8px; overflow-x: auto; margin: -4px 0 40px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(16px); scrollbar-width: none; }
.brandbook-index::-webkit-scrollbar { display: none; }
.brandbook-index a { flex: 0 0 auto; padding: 8px 11px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 13px; font-weight: 650; }
.brandbook-index a:hover { background: var(--surface-soft); color: var(--text); }
.brand-section { scroll-margin-top: 144px; padding: 0 0 64px; }
.section-heading { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; margin-bottom: 22px; }
.section-heading > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--primary); font-size: 11px; font-weight: 800; }
.section-heading h2 { margin-bottom: 5px; }
.logo-specimen-grid { display: grid; grid-template-columns: minmax(300px, 0.8fr) minmax(320px, 1.2fr); gap: 16px; }
.logo-stage { display: grid; min-height: 440px; place-items: center; overflow: hidden; border-radius: var(--radius-xl); }
.logo-stage-light { border: 1px solid var(--border); background: var(--surface); }
.logo-stage img { width: min(72%, 320px); height: auto; }
.brand-rules { padding: 28px; }
.rule-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.rule-list li { display: grid; grid-template-columns: 26px 1fr; align-items: start; gap: 10px; }
.rule-mark { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; font-weight: 800; }
.rule-mark.is-good { background: rgba(0, 185, 45, 0.12); color: var(--success); }
.rule-mark.is-bad { background: rgba(217, 74, 74, 0.12); color: var(--danger); }
.clear-space-demo { display: grid; gap: 5px; margin-top: 28px; padding: 18px; border: 1px dashed rgba(0, 16, 36, 0.28); border-radius: var(--radius-md); background: var(--surface-soft); }
.clear-space-demo span { color: var(--text-muted); font-size: 12px; }
.color-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.color-token { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.color-token > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px; }
.color-token code { color: var(--text-muted); }
.color-swatch { height: 104px; border-bottom: 1px solid var(--border); }
.swatch-primary { background: #ffdd2d; }
.swatch-text { background: #333; }
.swatch-background { background: #f6f7f8; }
.swatch-surface { background: #fff; }
.swatch-link { background: #126df7; }
.swatch-info { background: #428bf9; }
.swatch-success { background: #00b92d; }
.swatch-danger { background: #d94a4a; }
.usage-note { display: grid; grid-template-columns: 210px 1fr; gap: 18px; margin-top: 14px; padding: 20px; }
.type-specimens { overflow: hidden; }
.type-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: baseline; gap: 24px; padding: 22px 24px; }
.type-row + .type-row { border-top: 1px solid var(--border); }
.type-row > small { color: var(--text-muted); font-size: 12px; }
.type-row h1, .type-row h2, .type-row h3, .type-row p { margin: 0; }
.type-display { font-size: clamp(30px, 5vw, 40px); font-weight: 750; line-height: 1.1; letter-spacing: -0.035em; }
.type-label { font-size: 13px; font-weight: 700; letter-spacing: 0.07em; }
.financial-number, .financial-number-small { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.financial-number { font-size: 30px; font-weight: 700; }
.financial-number-small { font-weight: 700; }
.component-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.component-card { min-height: 300px; padding: 24px; }
.component-stack { display: flex; flex-wrap: wrap; gap: 10px; }
.transaction-action-specimen { grid-column: 1 / -1; }
.transaction-action-specimen > p { margin: -5px 0 18px; }
.transaction-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.transaction-action-grid > div { display: flex; min-height: 94px; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-radius: var(--radius-md); background: var(--surface-soft); }
.transaction-action-grid > div > span { color: var(--text-muted); font-size: 12px; font-weight: 700; }
.badge-row, .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.notice { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 10px; margin-top: 14px; padding: 13px; border-radius: var(--radius-md); }
.notice > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 800; }
.notice-info { background: rgba(66, 139, 249, 0.12); }
.notice-info > span { background: var(--info); color: #fff; }
.notice-success { background: rgba(0, 185, 45, 0.1); }
.notice-success > span { background: var(--success); color: #fff; }
.metric-card { display: grid; min-height: 190px; align-content: space-between; padding: 20px; border-radius: var(--radius-lg); background: var(--surface-soft); }
.metric-card span, .metric-card small { color: var(--text-muted); }
.metric-card strong { font-size: 36px; }
.segmented-control { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: var(--radius-md); background: var(--surface-soft); }
.segmented-control button { min-height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; }
.segmented-control button.is-selected { background: var(--surface); color: var(--text); box-shadow: 0 2px 8px rgba(0, 16, 36, 0.08); font-weight: 700; }
.chip-row { margin-top: 18px; }
.chip { display: inline-flex; min-height: 34px; align-items: center; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font-size: 12px; font-weight: 650; }
.chip.is-active { border-color: var(--primary); background: var(--primary); color: var(--text); }
.form-specimen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 24px; }
.field { display: grid; gap: 7px; }
.field > span { font-size: 13px; font-weight: 650; }
.field input, .field select, .input-with-prefix { width: 100%; min-height: 54px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface-soft); color: var(--text); }
.field input, .field select { padding: 0 14px; }
.field input:focus, .field select:focus { border-color: var(--link); }
.field select:disabled { opacity: 1; }
.input-with-prefix { display: grid; grid-template-columns: 34px 1fr; align-items: center; padding-left: 12px; }
.input-with-prefix span { color: var(--text-muted); }
.input-with-prefix input { min-height: 52px; padding-left: 0; border: 0; background: transparent; }
.field-error input { border-color: var(--danger); background: rgba(217, 74, 74, 0.05); }
.field-error small { color: var(--danger); }
.check-field { display: flex; min-height: 54px; align-items: center; gap: 10px; }
.check-field input { width: 20px; height: 20px; accent-color: var(--primary); }
.data-specimen { overflow: hidden; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border-bottom: 1px solid var(--border); }
.table-toolbar .chip-row { margin-top: 0; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; min-width: 740px; border-collapse: collapse; }
.data-table th, .data-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.data-table th { color: var(--text-muted); font-size: 12px; font-weight: 700; }
.align-right { text-align: right !important; }
.mobile-transaction-card { display: none; }

.transactions-workspace { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.transactions-toolbar { display: flex; min-height: 86px; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.transactions-toolbar h2 { margin-bottom: 3px; font-size: 20px; }
.transactions-toolbar p { font-size: 13px; }
.transactions-toolbar-actions { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: 18px; }
.receipt-auto-match-button { gap: 7px; min-height: 40px; white-space: nowrap; }
.receipt-auto-match-button > span:first-child { font-size: 17px; line-height: 1; }
.rows-per-page-control { display: flex; align-items: center; gap: 9px; color: var(--text-muted); font-size: 12px; font-weight: 650; white-space: nowrap; }
.rows-per-page-control select { width: 70px; height: 40px; padding: 0 28px 0 11px; border: 1px solid transparent; border-radius: 8px; appearance: none; background-color: rgba(180, 183, 200, 0.12); background-image: linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.54) 50%), linear-gradient(135deg, rgba(0, 0, 0, 0.54) 50%, transparent 50%); background-position: calc(100% - 13px) 17px, calc(100% - 9px) 17px; background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; color: var(--text); cursor: pointer; }
.rows-per-page-control select:focus { border-color: var(--link); box-shadow: 0 0 0 2px rgba(18, 109, 247, 0.16); }
.autosave-status { display: flex; min-width: 0; max-width: 440px; align-items: center; justify-content: flex-end; gap: 8px; flex: 1 1 220px; color: #007a1e; font-size: 12px; font-weight: 700; line-height: 1.35; }
.autosave-status > span:first-child { display: grid; width: 22px; height: 22px; place-items: center; flex: 0 0 22px; border-radius: 50%; background: rgba(0, 185, 45, 0.12); }
.autosave-status > span:last-child { min-width: 0; overflow-wrap: anywhere; text-align: right; white-space: normal; }
.autosave-status.is-saving { color: var(--text-muted); }
.autosave-status.is-saving > span:first-child { background: var(--surface-soft); }
.autosave-status.is-error { color: var(--danger); }
.autosave-status.is-error > span:first-child { background: rgba(217, 74, 74, 0.12); }
.autosave-status.is-warning { color: #7a4a00; }
.autosave-status.is-warning > span:first-child { background: rgba(217, 130, 0, 0.12); }
.transactions-filters { display: grid; grid-template-columns: minmax(240px, 1fr) 118px 210px auto; align-items: center; gap: 8px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: #fbfcfd; }
.transaction-search-control input, .transaction-year-control, .transaction-date-control > button { height: 40px; border: 1px solid transparent; border-radius: 10px; background-color: rgba(180, 183, 200, 0.12); color: var(--text); }
.transaction-search-control input { width: 100%; padding: 0 12px 0 36px; background-image: radial-gradient(circle at 15px 17px, transparent 5px, rgba(0, 0, 0, 0.46) 5.5px, rgba(0, 0, 0, 0.46) 7px, transparent 7.5px), linear-gradient(45deg, transparent 47%, rgba(0, 0, 0, 0.46) 48%, rgba(0, 0, 0, 0.46) 58%, transparent 59%); background-position: 0 0, 20px 23px; background-repeat: no-repeat; background-size: 32px 40px, 8px 8px; font-size: 13px; }
.transaction-search-control input::placeholder { color: var(--text-muted); }
.transaction-search-control input:focus, .transaction-search-control input.is-active, .transaction-year-control:focus-within, .transaction-year-control.is-active, .transaction-date-control > button:focus-visible, .transaction-date-control > button.is-active, .transaction-date-control > button[aria-expanded="true"] { border-color: var(--link); box-shadow: 0 0 0 2px rgba(18, 109, 247, 0.14); }
.transaction-year-control { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; overflow: hidden; padding-left: 11px; color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.transaction-year-control select { width: 100%; height: 38px; padding: 0 25px 0 7px; border: 0; outline: 0; appearance: none; background-color: transparent; background-image: linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.54) 50%), linear-gradient(135deg, rgba(0, 0, 0, 0.54) 50%, transparent 50%); background-position: calc(100% - 12px) 17px, calc(100% - 8px) 17px; background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; color: var(--text); cursor: pointer; font-size: 12px; }
.transaction-date-control { position: relative; }
.transaction-date-control > button { display: grid; width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 11px; cursor: pointer; text-align: left; }
.transaction-date-control > button > span:first-child { color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.transaction-date-control > button strong { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.filters-reset-button { min-height: 36px; padding: 7px 9px; border: 0; border-radius: 8px; background: transparent; color: var(--link); cursor: pointer; font-size: 12px; font-weight: 650; white-space: nowrap; }
.filters-reset-button:hover { background: rgba(18, 109, 247, 0.08); }
.date-filter-popover[hidden], .column-filter-popover[hidden], .column-filter-control[hidden], .column-multi-select[hidden], .column-filter-range[hidden], .column-clear-sort[hidden] { display: none; }
.date-filter-popover, .column-filter-popover { position: fixed; z-index: 72; width: min(320px, calc(100vw - 24px)); padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 54px rgba(0, 16, 36, 0.18); }
.date-filter-popover { width: min(336px, calc(100vw - 24px)); }
.filter-popover-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.filter-popover-heading strong { font-size: 14px; }
.filter-popover-heading button { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--surface-soft); color: var(--text-muted); cursor: pointer; font-size: 18px; }
.range-calendar-header { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; gap: 6px; margin-bottom: 8px; }
.range-calendar-header strong { text-align: center; font-size: 13px; }
.range-calendar-header button { display: grid; width: 38px; height: 38px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; font-size: 22px; line-height: 1; }
.range-calendar-header button:hover { background: var(--surface-soft); }
.range-calendar-weekdays, .range-calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.range-calendar-weekdays span { padding: 4px 0 6px; color: var(--text-muted); font-size: 9px; font-weight: 750; text-align: center; text-transform: uppercase; }
.range-calendar-day { position: relative; display: grid; min-width: 0; height: 38px; place-items: center; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); cursor: pointer; font-size: 12px; }
.range-calendar-day:hover { z-index: 1; border-radius: 9px; background: var(--surface-strong); }
.range-calendar-day.is-outside-month { color: rgba(0, 0, 0, 0.3); }
.range-calendar-day.is-in-range { background: rgba(255, 221, 45, 0.27); }
.range-calendar-day.is-range-start, .range-calendar-day.is-range-end { background: var(--primary); color: var(--text); font-weight: 750; }
.range-calendar-day.is-range-start { border-radius: 999px 0 0 999px; }
.range-calendar-day.is-range-end { border-radius: 0 999px 999px 0; }
.range-calendar-day.is-range-start:not(.is-in-range), .range-calendar-day.is-range-start.is-range-end { border-radius: 999px; }
.range-calendar-day.is-today { box-shadow: inset 0 0 0 1px var(--link); }
.range-calendar-selection { min-height: 32px; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--surface-soft); font-size: 11px; line-height: 1.35; }
.column-filter-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.column-filter-control, .column-filter-range label { display: grid; gap: 4px; min-width: 0; }
.column-filter-control > span, .column-filter-range label > span { color: var(--text-muted); font-size: 10px; font-weight: 700; }
.column-filter-control input, .column-filter-range input { width: 100%; height: 38px; min-width: 0; padding: 0 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 12px; }
.filter-popover-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
.filter-popover-actions .button { min-height: 36px; padding: 7px 11px; font-size: 11px; }
.column-filter-popover { width: min(286px, calc(100vw - 24px)); }
.column-sort-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.column-sort-actions button, .column-clear-sort { min-height: 34px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; font-size: 11px; }
.column-sort-actions button:hover, .column-sort-actions button.is-active { border-color: rgba(255, 221, 45, 0.8); background: rgba(255, 221, 45, 0.18); }
.column-clear-sort { width: 100%; margin-top: 6px; border-color: transparent; background: var(--surface-soft); color: var(--link); }
.column-filter-control, .column-multi-select, .column-filter-range { margin-top: 12px; }
.column-multi-select-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.column-multi-select-heading > span { color: var(--text-muted); font-size: 10px; font-weight: 700; }
.column-multi-select-heading > div { display: flex; gap: 2px; }
.column-multi-select-heading button { min-height: 28px; padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--link); cursor: pointer; font-size: 10px; font-weight: 650; }
.column-multi-select-heading button:hover { background: rgba(18, 109, 247, 0.08); }
.column-option-list { display: grid; max-height: 190px; gap: 2px; margin-top: 5px; overflow-y: auto; }
.column-option { display: flex; min-height: 34px; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 7px; cursor: pointer; }
.column-option:hover { background: var(--surface-soft); }
.column-option input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--primary-hover); cursor: pointer; }
.column-option span { min-width: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.transaction-table-viewport { max-width: 100%; overflow: auto; scrollbar-color: rgba(0, 16, 36, 0.22) transparent; }
.page-content--wide-table .transaction-table-viewport { container-type: inline-size; container-name: data-table; }
.transaction-table-viewport:focus-visible { box-shadow: inset var(--focus-ring); }
.transaction-floating-scrollbar[hidden] { display: none; }
.transaction-floating-scrollbar { position: fixed; bottom: 0; z-index: 34; height: 19px; overflow-x: scroll; overflow-y: hidden; border: 1px solid var(--border); border-radius: 9px 9px 0 0; background: rgba(255, 255, 255, 0.96); box-shadow: 0 -5px 16px rgba(0, 16, 36, 0.1); scrollbar-color: rgba(0, 16, 36, 0.42) rgba(0, 16, 36, 0.06); backdrop-filter: blur(14px); }
.transaction-floating-scrollbar:focus-visible { outline: none; box-shadow: 0 -5px 16px rgba(0, 16, 36, 0.1), var(--focus-ring); }
.transaction-floating-scrollbar-spacer { height: 1px; }
.transaction-floating-scrollbar::-webkit-scrollbar { height: 15px; }
.transaction-floating-scrollbar::-webkit-scrollbar-track { border-radius: 999px; background: rgba(0, 16, 36, 0.06); }
.transaction-floating-scrollbar::-webkit-scrollbar-thumb { min-width: 72px; border: 3px solid transparent; border-radius: 999px; background: rgba(0, 16, 36, 0.42); background-clip: padding-box; }
.transaction-floating-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 16, 36, 0.58); }
.transaction-table { width: max-content; min-width: 100%; border-spacing: 0; border-collapse: separate; table-layout: auto; font-size: 13px; }
.transaction-table th, .transaction-table td { min-height: 66px; padding: 9px 10px; border-bottom: 1px solid var(--border); background-clip: padding-box; text-align: left; vertical-align: middle; white-space: nowrap; }
.transaction-table th { position: sticky; top: 0; z-index: 5; background: #f9fafb; color: var(--text-muted); font-size: 11px; font-weight: 750; letter-spacing: 0.035em; text-transform: uppercase; }
.column-menu-button { display: inline-flex; min-height: 30px; align-items: center; justify-content: flex-start; gap: 5px; padding: 4px 5px; border: 0; border-radius: 7px; background: transparent; color: inherit; cursor: pointer; font: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; }
.column-menu-button:hover, .column-menu-button[aria-expanded="true"] { background: rgba(0, 16, 36, 0.055); color: var(--text); }
.column-menu-indicator { display: grid; width: 16px; height: 16px; place-items: center; border-radius: 5px; color: rgba(0, 0, 0, 0.42); font-size: 11px; line-height: 1; }
.column-menu-button.is-filtered .column-menu-indicator { background: var(--primary); color: var(--text); font-size: 15px; }
.column-menu-button.is-sorted .column-menu-indicator { background: rgba(18, 109, 247, 0.1); color: var(--link); font-size: 12px; font-weight: 900; }
.review-column .column-menu-button, .document-column .column-menu-button { justify-content: center; }
.amount-column .column-menu-button { margin-left: auto; justify-content: flex-end; }
.transaction-table tbody tr:last-child td { border-bottom: 0; }
.transaction-row { cursor: pointer; transition: background 140ms ease-out, box-shadow 140ms ease-out; }
.transaction-row:hover td { background-color: rgba(36, 74, 127, 0.035); }
.transaction-row.is-selected td { background-color: rgba(255, 221, 45, 0.16); }
.transaction-row.is-selected { box-shadow: inset 3px 0 0 var(--primary); }
.transaction-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--link); }
.transaction-row.is-pending { cursor: default; }
.transaction-row.needs-mapping:not(.is-selected):not(.is-pending) td { background-color: #fffbed; }
.transaction-row.needs-mapping:not(.is-pending) { box-shadow: inset 3px 0 0 var(--warning); }
.transaction-row.is-pending td, .transaction-row.is-pending:hover td { background-color: #f1f2f4; color: var(--text-muted); }
.transaction-row.is-pending .amount-editor input,
.transaction-row.is-pending .transaction-inline-select:disabled { color: var(--text-muted); }
.transaction-row.is-pending .review-button:disabled,
.transaction-row.is-pending .document-button:disabled,
.transaction-row.is-pending .delete-button:disabled { cursor: not-allowed; filter: grayscale(1); opacity: 0.34; transform: none; }
.selection-column { width: 48px; text-align: center !important; }
.review-column { width: 64px; text-align: center !important; }
.document-column, .delete-column { width: 56px; text-align: center !important; }
.amount-column { text-align: right !important; }
.transaction-id { font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; }
.description-cell { display: block; width: 210px; overflow: hidden; text-overflow: ellipsis; }
.source-category-cell { display: block; width: 150px; overflow: hidden; text-overflow: ellipsis; }
.row-checkbox { position: relative; display: inline-grid; width: 44px; height: 44px; place-items: center; cursor: pointer; }
.row-checkbox input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.row-checkbox > span { display: grid; width: 20px; height: 20px; place-items: center; border: 1.5px solid rgba(0, 16, 36, 0.3); border-radius: 6px; background: var(--surface); transition: background 120ms ease-out, border-color 120ms ease-out; }
.row-checkbox input:checked + span { border-color: var(--primary-hover); background: var(--primary); }
.row-checkbox input:checked + span::after { content: "✓"; color: var(--text); font-size: 13px; font-weight: 900; }
.row-checkbox input:indeterminate + span { border-color: var(--primary-hover); background: var(--primary); }
.row-checkbox input:indeterminate + span::after { content: ""; width: 9px; border-top: 2px solid var(--text); }
.row-checkbox input:disabled + span { border-color: var(--border); background: var(--surface-soft); }
.row-checkbox input:focus-visible + span { box-shadow: var(--focus-ring); }
.review-button { display: inline-grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.review-dot { width: 16px; height: 16px; border: 2px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 16, 36, 0.08); transition: box-shadow 140ms ease-out, transform 120ms ease-out; }
.review-button.is-reviewed .review-dot { background: var(--success); }
.review-button.needs-review .review-dot { background: var(--danger); }
.review-button:hover .review-dot { box-shadow: 0 0 0 4px rgba(0, 16, 36, 0.07); transform: scale(1.08); }
.review-button:active .review-dot { transform: scale(0.96); }
.document-button:hover, .delete-button:hover { filter: brightness(0.95); transform: translateY(-1px); }
.document-button:active, .delete-button:active { transform: translateY(0); }
.document-button, .delete-button { position: relative; display: inline-grid; width: 36px; height: 36px; place-items: center; padding: 0; border-radius: 50%; cursor: pointer; transition: filter 140ms ease-out, transform 120ms ease-out; }
.document-button { border: 1px solid rgba(0, 185, 45, 0.32); background: rgba(0, 185, 45, 0.1); color: #007a1e; }
.document-button.is-neutral { border-color: rgba(0, 16, 36, 0.12); background: var(--surface-soft); color: var(--text-muted); }
.document-button.has-documents { border-color: rgba(0, 16, 36, 0.12); background: var(--surface-soft); color: var(--text); }
.document-plus { font-size: 24px; font-weight: 500; line-height: 1; }
.document-icon { position: relative; width: 16px; height: 20px; border: 2px solid currentColor; border-radius: 2px; }
.document-icon::after { content: ""; position: absolute; top: 6px; left: 3px; width: 7px; height: 2px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.document-count { position: absolute; top: -4px; right: -4px; display: grid; min-width: 19px; height: 19px; place-items: center; padding: 0 4px; border: 2px solid var(--surface); border-radius: 10px; background: #e5e7ea; color: var(--text-muted); font-size: 10px; font-weight: 700; }
.delete-button { border: 1px solid rgba(217, 74, 74, 0.2); background: var(--danger); color: #fff; }
.trash-icon { position: relative; width: 12px; height: 13px; border: 1.5px solid currentColor; border-top: 0; border-radius: 0 0 2.5px 2.5px; background: linear-gradient(currentColor, currentColor) 3px 3px / 1px 6px no-repeat, linear-gradient(currentColor, currentColor) 6.5px 3px / 1px 6px no-repeat; }
.trash-icon::before { content: ""; position: absolute; top: -4px; left: -2.5px; width: 14px; height: 1.5px; border-radius: 999px; background: currentColor; }
.trash-icon::after { content: ""; position: absolute; top: -7px; left: 2px; width: 5px; height: 3px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 2px 2px 0 0; }
.amount-editor, .transaction-inline-select { box-sizing: border-box; height: 40px; min-height: 40px; max-height: 40px; border: 1px solid transparent; border-radius: 8px; background-color: transparent; box-shadow: none; color: var(--text); font-size: 13px; font-weight: 400; line-height: 1.3; transition: border-color 140ms ease-out, background-color 140ms ease-out, box-shadow 140ms ease-out; }
.amount-editor { display: inline-flex; width: 108px; align-items: center; justify-content: flex-end; padding: 0 10px; overflow: hidden; }
.amount-editor input { width: 100%; height: 38px; min-width: 0; min-height: 0; max-height: 38px; padding: 0; border: 0; border-radius: 0; outline: 0; appearance: none; background: transparent; color: var(--text); font-weight: 400; line-height: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.amount-editor input:focus-visible { box-shadow: none; }
.amount-editor.is-negative input { color: #08783e; }
.amount-editor.is-positive input { color: var(--danger); }
.amount-editor.is-zero input { color: var(--text-muted); }
.amount-editor input:read-only { cursor: default; }
.amount-editor input::-webkit-outer-spin-button, .amount-editor input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.transaction-inline-select { min-width: 108px; padding: 0 30px 0 10px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.54) 50%), linear-gradient(135deg, rgba(0, 0, 0, 0.54) 50%, transparent 50%); background-position: calc(100% - 13px) 17px, calc(100% - 9px) 17px; background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; }
.transaction-inline-select[data-field="taxStatus"] { min-width: 128px; }
.transaction-inline-select[data-field="transactionType"] { min-width: 112px; }
.transaction-inline-select[data-field="taxGroup"] { min-width: 140px; }
.transaction-inline-select[data-field="accountHolder"] { min-width: 124px; }
.transaction-inline-select:disabled { padding-right: 10px; background-image: none; color: var(--text); opacity: 1; }
.transaction-row.is-selected .amount-editor, .transaction-row.is-selected .transaction-inline-select, .transaction-mobile-card.is-selected .amount-editor, .transaction-mobile-card.is-selected .transaction-inline-select { border-color: transparent; background-color: rgba(180, 183, 200, 0.08); box-shadow: none; }
.transaction-row.is-selected .amount-editor:focus-within, .transaction-row.is-selected .transaction-inline-select:focus, .transaction-mobile-card.is-selected .amount-editor:focus-within, .transaction-mobile-card.is-selected .transaction-inline-select:focus { border-color: var(--link); box-shadow: 0 0 0 2px rgba(18, 109, 247, 0.16); }

@container data-table (min-width: 1640px) {
  [data-transactions-root] .transaction-table { width: 100%; min-width: 0; table-layout: fixed; }
  [data-transactions-root] .transaction-table th, [data-transactions-root] .transaction-table td { overflow: hidden; padding-right: 6px; padding-left: 6px; text-overflow: ellipsis; }
  [data-transactions-root] .transaction-table th:nth-child(1), [data-transactions-root] .transaction-table td:nth-child(1) { width: 48px; }
  [data-transactions-root] .transaction-table th:nth-child(2), [data-transactions-root] .transaction-table td:nth-child(2) { width: 72px; }
  [data-transactions-root] .transaction-table th:nth-child(3), [data-transactions-root] .transaction-table td:nth-child(3) { width: 56px; }
  [data-transactions-root] .transaction-table th:nth-child(4), [data-transactions-root] .transaction-table td:nth-child(4) { width: 44px; }
  [data-transactions-root] .transaction-table th:nth-child(5), [data-transactions-root] .transaction-table td:nth-child(5) { width: 102px; }
  [data-transactions-root] .transaction-table th:nth-child(6), [data-transactions-root] .transaction-table td:nth-child(6) { width: 108px; }
  [data-transactions-root] .transaction-table th:nth-child(7), [data-transactions-root] .transaction-table td:nth-child(7) { width: 106px; }
  [data-transactions-root] .transaction-table th:nth-child(8), [data-transactions-root] .transaction-table td:nth-child(8) { width: 110px; }
  [data-transactions-root] .transaction-table th:nth-child(9), [data-transactions-root] .transaction-table td:nth-child(9) { width: 116px; }
  [data-transactions-root] .transaction-table th:nth-child(10), [data-transactions-root] .transaction-table td:nth-child(10) { width: 142px; }
  [data-transactions-root] .transaction-table th:nth-child(12), [data-transactions-root] .transaction-table td:nth-child(12) { width: 140px; }
  [data-transactions-root] .transaction-table th:nth-child(13), [data-transactions-root] .transaction-table td:nth-child(13) { width: 160px; }
  [data-transactions-root] .transaction-table th:nth-child(14), [data-transactions-root] .transaction-table td:nth-child(14) { width: 115px; }
  [data-transactions-root] .transaction-table th:nth-child(15), [data-transactions-root] .transaction-table td:nth-child(15) { width: 90px; }
  [data-transactions-root] .transaction-table th:nth-child(16), [data-transactions-root] .transaction-table td:nth-child(16) { width: 44px; }
  [data-transactions-root] .transaction-table .selection-column, [data-transactions-root] .transaction-table .review-column, [data-transactions-root] .transaction-table .document-column, [data-transactions-root] .transaction-table .delete-column { padding-right: 4px; padding-left: 4px; }
  [data-transactions-root] .transaction-table .amount-editor, [data-transactions-root] .transaction-table .transaction-inline-select, [data-transactions-root] .transaction-table .description-cell, [data-transactions-root] .transaction-table .source-category-cell { width: 100%; min-width: 0; }
  [data-transactions-root] .transaction-table .transaction-inline-select { padding-left: 7px; }
  [data-transactions-root] .transaction-table .transaction-inline-select:disabled { padding-right: 7px; }
  [data-transactions-root] .transaction-table .column-menu-button { max-width: 100%; overflow: hidden; }
  [data-transactions-root] .transaction-table .column-menu-button > span:first-child { overflow: hidden; text-overflow: ellipsis; }
}
.transaction-mobile-list { display: none; }
.transaction-mobile-card[hidden] { display: none; }
.transactions-pagination[hidden] { display: none; }
.transactions-pagination { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface); }
.transactions-pagination p { color: var(--text-muted); font-size: 13px; }
.transactions-empty-state { padding: 72px 24px; text-align: center; }
.transactions-empty-state > span { display: grid; width: 56px; height: 56px; place-items: center; margin: 0 auto 16px; border-radius: 50%; background: var(--surface-soft); font-size: 26px; }
.mapping-toolbar-actions { gap: 12px; }
.mapping-filters { grid-template-columns: minmax(240px, 1fr) auto; }
.business-mapping-table th, .business-mapping-table td { height: 62px; min-height: 62px; padding-top: 8px; padding-bottom: 8px; }
.mapping-row.needs-attention td { background-color: #fff0f0; }
.mapping-row.needs-attention { box-shadow: inset 4px 0 0 var(--danger); }
.mapping-category-cell { position: relative; }
.mapping-attention-badge { display: inline-flex; min-height: 20px; align-items: center; margin-left: 7px; padding: 2px 7px; border: 1px solid rgba(217, 74, 74, 0.38); border-radius: 999px; background: rgba(217, 74, 74, 0.12); color: #a42f2f; font-size: 9px; font-weight: 750; letter-spacing: 0.02em; white-space: nowrap; }
.mapping-mobile-card.needs-attention { border-color: rgba(217, 74, 74, 0.48); background: #fff5f5; box-shadow: inset 4px 0 0 var(--danger); }
.mapping-inline-input { height: 40px; min-height: 40px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; outline: 0; background: transparent; color: var(--text); font-size: 13px; transition: border-color 140ms ease-out, background-color 140ms ease-out, box-shadow 140ms ease-out; }
.mapping-inline-input:read-only { cursor: default; }
.mapping-inline-input.mapping-category { width: 310px; }
.mapping-inline-input.mapping-taxGroupPlus, .mapping-inline-input.mapping-taxGroupMinus { width: 220px; }
.mapping-inline-input.mapping-keywords { width: 260px; }
.mapping-inline-select[data-field="typePlus"], .mapping-inline-select[data-field="typeMinus"] { width: 170px; }
.mapping-inline-select[data-field="taxStatus"] { width: 132px; }
.availability-mapping-table .mapping-category { width: 420px; }
.availability-mapping-table th:nth-child(3) .column-menu-button, .availability-mapping-table th:nth-child(4) .column-menu-button { width: 100%; justify-content: center; }
.tax-group-mapping-table th:nth-child(5) .column-menu-button, .tax-group-mapping-table th:nth-child(6) .column-menu-button { width: 100%; justify-content: center; }
.mapping-incomeEnabled-cell, .mapping-expenseEnabled-cell, .mapping-businessEnabled-cell, .mapping-personalEnabled-cell { min-width: 160px; text-align: center !important; }
.mapping-boolean-control { position: relative; display: inline-grid; width: 44px; height: 40px; place-items: center; }
.mapping-boolean-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mapping-boolean-control span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid transparent; border-radius: 50%; color: var(--text-muted); cursor: pointer; font-size: 23px; font-weight: 450; line-height: 1; transition: border-color 140ms ease-out, background-color 140ms ease-out, color 140ms ease-out, transform 120ms ease-out; }
.mapping-boolean-control span::before { content: "×"; transform: translateY(-1px); }
.mapping-boolean-control input:checked + span { color: #078348; }
.mapping-boolean-control input:checked + span::before { content: "✓"; transform: none; }
.mapping-boolean-control span:hover { background: var(--surface-soft); transform: scale(1.04); }
.mapping-row.is-selected .mapping-boolean-control span, .mapping-mobile-card.is-selected .mapping-boolean-control span { border-color: var(--border); background: var(--surface); }
.mapping-boolean-control input:focus-visible + span { border-color: var(--link); box-shadow: 0 0 0 2px rgba(18, 109, 247, 0.16); }
.mapping-row.is-selected .mapping-inline-input, .mapping-mobile-card.is-selected .mapping-inline-input { background: rgba(180, 183, 200, 0.08); }
.mapping-row.is-selected .mapping-inline-input:focus, .mapping-mobile-card.is-selected .mapping-inline-input:focus { border-color: var(--link); box-shadow: 0 0 0 2px rgba(18, 109, 247, 0.16); }
.mapping-mobile-card[hidden] { display: none; }
.clients-table { width: 100%; min-width: 820px; table-layout: fixed; }
.clients-table th, .clients-table td { height: 62px; min-height: 62px; padding-top: 8px; padding-bottom: 8px; }
.clients-table .selection-column { width: 52px; }
.clients-table .client-id-column, .clients-table .client-id-cell { width: 92px; }
.clients-table .delete-column { width: 58px; }
.clients-table th:nth-child(3), .clients-table td:nth-child(3) { width: 27%; }
.clients-table th:nth-child(4), .clients-table td:nth-child(4) { width: 20%; }
.clients-table th:nth-child(5), .clients-table td:nth-child(5) { width: auto; }
.client-id-cell { font-family: "SFMono-Regular", Consolas, monospace; color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.client-inline-input { width: 100%; height: 40px; min-height: 40px; padding: 0 10px; overflow: hidden; border: 1px solid transparent; border-radius: 8px; outline: 0; background: transparent; color: var(--text); font-size: 13px; text-overflow: ellipsis; transition: border-color 140ms ease-out, background-color 140ms ease-out, box-shadow 140ms ease-out; }
.client-inline-input:read-only { cursor: default; }
.client-row.is-selected .client-inline-input, .client-mobile-card.is-selected .client-inline-input { background: rgba(180, 183, 200, 0.08); }
.client-row.is-selected .client-inline-input:focus, .client-mobile-card.is-selected .client-inline-input:focus { border-color: var(--link); box-shadow: 0 0 0 2px rgba(18, 109, 247, 0.16); }
.client-mobile-card[hidden] { display: none; }
.debit-accounts-table th, .debit-accounts-table td,
.credit-accounts-table th, .credit-accounts-table td { height: 62px; min-height: 62px; padding-top: 8px; padding-bottom: 8px; }
.account-inline-input { height: 40px; min-height: 40px; }
.account-account { width: 250px; }
.account-accountId { width: 210px; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; }
.account-accountHolder { width: 170px; }
.account-inline-select[data-field="accountType"] { width: 132px; }
.account-inline-select[data-field="accountCategory"] { width: 126px; }
.account-balance-editor { width: 124px; }
.account-balance-editor input { color: var(--text) !important; }
.account-updatedAt-cell, .debit-accounts-table time, .credit-accounts-table time { min-width: 164px; color: var(--text-muted); font-size: 12px; }
.account-import-column { width: 72px; text-align: center !important; }
.account-import-column .column-menu-button { width: 100%; justify-content: center; }
.account-row.is-selected .account-inline-input, .account-row.is-selected .account-inline-select, .account-row.is-selected .account-balance-editor,
.account-mobile-card.is-selected .account-inline-input, .account-mobile-card.is-selected .account-inline-select, .account-mobile-card.is-selected .account-balance-editor { border-color: transparent; background-color: rgba(180, 183, 200, 0.08); box-shadow: none; }
.account-row.is-selected .account-inline-input:focus, .account-row.is-selected .account-inline-select:focus, .account-row.is-selected .account-balance-editor:focus-within,
.account-mobile-card.is-selected .account-inline-input:focus, .account-mobile-card.is-selected .account-inline-select:focus, .account-mobile-card.is-selected .account-balance-editor:focus-within { border-color: var(--link); box-shadow: 0 0 0 2px rgba(18, 109, 247, 0.16); }
.account-row.is-archived td, .account-row.is-archived:hover td { background-color: #eef0f2; color: var(--text-muted); }
.account-row.is-archived { box-shadow: inset 3px 0 0 #aeb4bc; }
.account-row.is-archived .account-inline-input,
.account-row.is-archived .account-inline-select,
.account-row.is-archived .account-balance-editor input,
.account-mobile-card.is-archived .account-inline-input,
.account-mobile-card.is-archived .account-inline-select,
.account-mobile-card.is-archived .account-balance-editor input { color: var(--text-muted); cursor: default; }
.account-mobile-card.is-archived { border-color: #cfd3d8; background: #eef0f2; color: var(--text-muted); }
.account-archive-button { min-height: 32px; padding: 5px 8px; border-color: rgba(0, 16, 36, 0.12); background: var(--surface-soft); color: var(--text-muted); font-size: 10px; white-space: nowrap; }
.account-archive-button:hover { background: #e5e8eb; color: var(--text); }
.account-archived-label { display: inline-flex; min-height: 25px; align-items: center; justify-content: center; padding: 4px 7px; border: 1px solid #cbd0d6; border-radius: 999px; background: #e1e4e8; color: #666d76; font-size: 9px; font-weight: 750; letter-spacing: 0.035em; text-transform: uppercase; white-space: nowrap; }
.account-import-control { position: relative; display: inline-grid; width: 42px; height: 42px; place-items: center; cursor: pointer; }
.account-import-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.account-import-control span { display: grid; width: 20px; height: 20px; place-items: center; border: 1.5px solid rgba(0, 16, 36, 0.28); border-radius: 6px; background: var(--surface); transition: border-color 120ms ease-out, background 120ms ease-out, transform 120ms ease-out; }
.account-import-control:hover span { transform: scale(1.06); }
.account-import-control input:checked + span { border-color: var(--primary-hover); background: var(--primary); }
.account-import-control input:checked + span::after { content: "✓"; color: var(--text); font-size: 13px; font-weight: 900; }
.account-import-control input:focus-visible + span { box-shadow: var(--focus-ring); }

@container data-table (min-width: 900px) {
  [data-availability-mapping-root] .availability-mapping-table { width: 100%; min-width: 0; table-layout: fixed; }
  [data-availability-mapping-root] .availability-mapping-table th, [data-availability-mapping-root] .availability-mapping-table td { overflow: hidden; padding-right: 6px; padding-left: 6px; text-overflow: ellipsis; }
  [data-availability-mapping-root] .availability-mapping-table th:nth-child(1), [data-availability-mapping-root] .availability-mapping-table td:nth-child(1) { width: 52px; }
  [data-availability-mapping-root] .availability-mapping-table .mapping-category { width: 100%; min-width: 0; }
  [data-availability-mapping-root] .availability-mapping-table .mapping-incomeEnabled-cell, [data-availability-mapping-root] .availability-mapping-table .mapping-expenseEnabled-cell, [data-availability-mapping-root] .availability-mapping-table .mapping-businessEnabled-cell, [data-availability-mapping-root] .availability-mapping-table .mapping-personalEnabled-cell { min-width: 0; }
  [data-availability-mapping-root] .availability-mapping-table .column-menu-button { max-width: 100%; overflow: hidden; }
  [data-availability-mapping-root] .flow-mapping-table th:nth-child(3), [data-availability-mapping-root] .flow-mapping-table td:nth-child(3), [data-availability-mapping-root] .flow-mapping-table th:nth-child(4), [data-availability-mapping-root] .flow-mapping-table td:nth-child(4), [data-availability-mapping-root] .tax-status-mapping-table th:nth-child(3), [data-availability-mapping-root] .tax-status-mapping-table td:nth-child(3), [data-availability-mapping-root] .tax-status-mapping-table th:nth-child(4), [data-availability-mapping-root] .tax-status-mapping-table td:nth-child(4) { width: 160px; }
  [data-availability-mapping-root] .flow-mapping-table th:nth-child(5), [data-availability-mapping-root] .flow-mapping-table td:nth-child(5), [data-availability-mapping-root] .tax-status-mapping-table th:nth-child(5), [data-availability-mapping-root] .tax-status-mapping-table td:nth-child(5) { width: 48px; }
  [data-availability-mapping-root] .tax-group-mapping-table th:nth-child(2), [data-availability-mapping-root] .tax-group-mapping-table td:nth-child(2) { width: 56%; }
  [data-availability-mapping-root] .tax-group-mapping-table th:nth-child(3), [data-availability-mapping-root] .tax-group-mapping-table td:nth-child(3) { width: 36%; }
  [data-availability-mapping-root] .tax-group-mapping-table th:nth-child(4), [data-availability-mapping-root] .tax-group-mapping-table td:nth-child(4) { width: 68px; }
  [data-availability-mapping-root] .tax-group-mapping-table .mapping-flow-dropdown-control { min-width: 0; }
  [data-availability-mapping-root] .availability-mapping-table .selection-column, [data-availability-mapping-root] .availability-mapping-table .delete-column { padding-right: 4px; padding-left: 4px; }
}

@container data-table (min-width: 1320px) {
  [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table { width: 100%; min-width: 0; table-layout: fixed; }
  [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table th, [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table td { overflow: hidden; padding-right: 6px; padding-left: 6px; text-overflow: ellipsis; }
  [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table th:nth-child(1), [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table td:nth-child(1) { width: 52px; }
  [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table th:nth-child(2), [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table td:nth-child(2) { width: 170px; }
  [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table th:nth-child(3), [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table td:nth-child(3) { width: 155px; }
  [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table th:nth-child(4), [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table td:nth-child(4) { width: 110px; }
  [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table th:nth-child(5), [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table td:nth-child(5) { width: 120px; }
  [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table th:nth-child(6), [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table td:nth-child(6) { width: 125px; }
  [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table th:nth-child(7), [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table td:nth-child(7), [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table th:nth-child(8), [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table td:nth-child(8) { width: 118px; }
  [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table th:nth-child(9), [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table td:nth-child(9) { width: 130px; }
  [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table th:nth-child(10), [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table td:nth-child(10) { width: 60px; }
  [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table th:nth-child(11), [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table td:nth-child(11) { width: 82px; }
  [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table .account-inline-input, [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table .account-inline-select, [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table .account-balance-editor { width: 100%; min-width: 0; }
  [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table .account-updatedAt-cell, [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table time { min-width: 0; }
  [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table .column-menu-button { max-width: 100%; overflow: hidden; }
  [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table .selection-column, [data-accounts-workspace-root][data-account-kind="debit"] .debit-accounts-table .delete-column { padding-right: 4px; padding-left: 4px; }
}

@container data-table (min-width: 1480px) {
  [data-business-mapping-root] .business-mapping-table, [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table { width: 100%; min-width: 0; table-layout: fixed; }
  [data-business-mapping-root] .business-mapping-table th, [data-business-mapping-root] .business-mapping-table td, [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table th, [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table td { overflow: hidden; padding-right: 6px; padding-left: 6px; text-overflow: ellipsis; }
  [data-business-mapping-root] .business-mapping-table th:nth-child(1), [data-business-mapping-root] .business-mapping-table td:nth-child(1) { width: 52px; }
  [data-business-mapping-root] .business-mapping-table th:nth-child(2), [data-business-mapping-root] .business-mapping-table td:nth-child(2) { width: 230px; }
  [data-business-mapping-root] .business-mapping-table th:nth-child(3), [data-business-mapping-root] .business-mapping-table td:nth-child(3), [data-business-mapping-root] .business-mapping-table th:nth-child(4), [data-business-mapping-root] .business-mapping-table td:nth-child(4) { width: 130px; }
  [data-business-mapping-root] .business-mapping-table th:nth-child(5), [data-business-mapping-root] .business-mapping-table td:nth-child(5) { width: 120px; }
  [data-business-mapping-root] .business-mapping-table th:nth-child(6), [data-business-mapping-root] .business-mapping-table td:nth-child(6), [data-business-mapping-root] .business-mapping-table th:nth-child(7), [data-business-mapping-root] .business-mapping-table td:nth-child(7) { width: 190px; }
  [data-business-mapping-root] .business-mapping-table th:nth-child(8), [data-business-mapping-root] .business-mapping-table td:nth-child(8) { width: 220px; }
  [data-business-mapping-root] .business-mapping-table th:nth-child(9), [data-business-mapping-root] .business-mapping-table td:nth-child(9) { width: 44px; }
  [data-business-mapping-root] .business-mapping-table .mapping-inline-input, [data-business-mapping-root] .business-mapping-table .mapping-inline-select { width: 100%; min-width: 0; }
  [data-business-mapping-root] .business-mapping-table .mapping-row.needs-attention .mapping-category { width: calc(100% - 92px); }
  [data-business-mapping-root] .business-mapping-table .selection-column, [data-business-mapping-root] .business-mapping-table .delete-column { padding-right: 4px; padding-left: 4px; }
  [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table th:nth-child(1), [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table td:nth-child(1) { width: 52px; }
  [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table th:nth-child(2), [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table td:nth-child(2) { width: 150px; }
  [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table th:nth-child(3), [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table td:nth-child(3) { width: 140px; }
  [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table th:nth-child(4), [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table td:nth-child(4) { width: 100px; }
  [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table th:nth-child(5), [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table td:nth-child(5), [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table th:nth-child(6), [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table td:nth-child(6) { width: 110px; }
  [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table th:nth-child(7), [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table td:nth-child(7), [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table th:nth-child(8), [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table td:nth-child(8), [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table th:nth-child(11), [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table td:nth-child(11), [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table th:nth-child(12), [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table td:nth-child(12) { width: 105px; }
  [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table th:nth-child(9), [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table td:nth-child(9) { width: 120px; }
  [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table th:nth-child(10), [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table td:nth-child(10) { width: 56px; }
  [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table th:nth-child(13), [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table td:nth-child(13) { width: 82px; }
  [data-accounts-workspace-root] .debit-accounts-table .account-inline-input, [data-accounts-workspace-root] .debit-accounts-table .account-inline-select, [data-accounts-workspace-root] .debit-accounts-table .account-balance-editor, [data-accounts-workspace-root] .credit-accounts-table .account-inline-input, [data-accounts-workspace-root] .credit-accounts-table .account-inline-select, [data-accounts-workspace-root] .credit-accounts-table .account-balance-editor { width: 100%; min-width: 0; }
  [data-accounts-workspace-root] .debit-accounts-table .account-updatedAt-cell, [data-accounts-workspace-root] .debit-accounts-table time, [data-accounts-workspace-root] .credit-accounts-table .account-updatedAt-cell, [data-accounts-workspace-root] .credit-accounts-table time { min-width: 0; }
  [data-accounts-workspace-root] .debit-accounts-table .column-menu-button, [data-accounts-workspace-root] .credit-accounts-table .column-menu-button { max-width: 100%; overflow: hidden; }
  [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table .selection-column, [data-accounts-workspace-root][data-account-kind="credit"] .credit-accounts-table .delete-column { padding-right: 4px; padding-left: 4px; }
}
.account-selection-summary { display: grid; grid-template-columns: minmax(120px, 0.7fr) repeat(2, minmax(180px, 1fr)); min-height: 66px; align-items: center; gap: 0; border-top: 1px solid var(--border); background: #fbfcfd; }
.account-selection-summary.credit-selection-summary { grid-template-columns: minmax(110px, 0.65fr) repeat(3, minmax(160px, 1fr)); }
.account-selection-summary > div { display: flex; min-width: 0; align-items: baseline; gap: 8px; padding: 14px 20px; }
.account-selection-summary > div + div { border-left: 1px solid var(--border); }
.account-selection-summary span { color: var(--text-muted); font-size: 12px; font-weight: 650; }
.account-selection-summary strong { min-width: 0; overflow: hidden; font-size: 16px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.account-mobile-list[hidden] { display: none; }
.transaction-modal[hidden] { display: none; }
.transaction-modal { position: fixed; inset: 0; z-index: 80; display: grid; justify-items: end; }
.transaction-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0, 16, 36, 0.34); opacity: 0; cursor: default; transition: opacity 180ms ease-out; }
.transaction-modal-panel { position: relative; width: min(92vw, 520px); height: 100%; overflow-y: auto; padding: 28px; background: var(--surface); box-shadow: -18px 0 54px rgba(0, 16, 36, 0.18); transform: translateX(102%); transition: transform 180ms ease-out; }
.transaction-modal.is-open .transaction-modal-backdrop { opacity: 1; }
.transaction-modal.is-open .transaction-modal-panel { transform: translateX(0); }
.transaction-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.transaction-modal-header h2 { margin: 0; }
.modal-close-button { flex: 0 0 auto; background: var(--surface-soft); }
.transaction-detail-list { overflow: hidden; margin: 18px 0 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-soft); }
.transaction-detail-list > div { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; padding: 11px 12px; border-bottom: 1px solid var(--border); }
.transaction-detail-list > div:last-child { border-bottom: 0; }
.transaction-detail-list dt { color: var(--text-muted); font-size: 11px; font-weight: 700; }
.transaction-detail-list dd { margin: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 650; }
.transaction-detail-list .transaction-comment-row { display: block; padding: 14px 12px; }
.transaction-comment-row dt { margin-bottom: 7px; }
.transaction-comment-form { display: grid; gap: 8px; }
.transaction-comment-form textarea { box-sizing: border-box; width: 100%; min-height: 104px; resize: vertical; padding: 10px 11px; border: 1px solid var(--border); border-radius: 9px; outline: 0; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; line-height: 1.45; }
.transaction-comment-form textarea:focus { border-color: var(--link); box-shadow: var(--focus-ring); }
.transaction-comment-form textarea:read-only { resize: none; background: var(--surface-soft); color: var(--text-muted); }
.transaction-comment-form footer { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 10px; }
.transaction-comment-form footer span { color: var(--text-muted); font-size: 10px; font-weight: 650; }
.transaction-comment-form footer span.is-success { color: var(--success); }
.transaction-comment-form footer span.is-error { color: var(--danger); }
.transaction-detail-list .transaction-allocation-row { display: block; padding: 14px 12px; }
.transaction-allocation-row[hidden] { display: none !important; }
.transaction-allocation-row dt { margin-bottom: 7px; }
.transaction-allocation-summary { padding: 10px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text-muted); font-size: 12px; font-weight: 600; line-height: 1.45; }
.transaction-allocation-summary.is-linked { border-color: rgba(0, 150, 54, 0.24); background: rgba(0, 150, 54, 0.07); color: var(--text); }
.transaction-allocation-summary strong { display: block; margin-bottom: 2px; color: var(--text); font-size: 13px; }
.transaction-allocation-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.transaction-allocation-actions [hidden] { display: none !important; }
.transaction-allocation-status { display: block; min-height: 16px; margin-top: 6px; color: var(--text-muted); font-size: 10px; font-weight: 650; }
.transaction-allocation-status.is-error { color: var(--danger); }
.allocation-link-modal[hidden] { display: none; }
.allocation-link-modal { position: fixed; inset: 0; z-index: 105; display: grid; place-items: center; padding: 16px; }
.allocation-link-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0, 16, 36, 0.56); cursor: default; backdrop-filter: blur(4px); }
.allocation-link-panel { position: relative; display: grid; width: min(680px, 100%); max-height: min(820px, calc(100dvh - 32px)); grid-template-rows: auto auto auto minmax(0, 1fr); overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: 0 28px 90px rgba(0, 16, 36, 0.28); }
.allocation-link-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 19px 21px; border-bottom: 1px solid var(--border); }
.allocation-link-panel > header h2 { margin: 2px 0 0; }
.allocation-link-transaction { padding: 11px 21px; border-bottom: 1px solid var(--border); background: #fbfcfd; color: var(--text-muted); font-size: 12px; font-weight: 650; }
.allocation-link-period-field { padding: 14px 21px 0; }
.allocation-link-period-field select { width: 100%; height: 46px; min-height: 46px; padding: 0 38px 0 12px; border: 1px solid var(--border); border-radius: 10px; appearance: none; background-color: var(--surface-soft); background-image: linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.54) 50%), linear-gradient(135deg, rgba(0, 0, 0, 0.54) 50%, transparent 50%); background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; color: var(--text); }
.allocation-link-panel form { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto auto; overflow: hidden; }
.allocation-link-panel fieldset { min-width: 0; min-height: 0; margin: 0; padding: 14px 21px 0; border: 0; overflow: hidden; }
.allocation-link-panel legend { padding: 0 0 7px; color: var(--text-muted); font-size: 10px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; }
.allocation-link-list { display: grid; max-height: 440px; gap: 7px; overflow-y: auto; padding: 1px 3px 4px 1px; }
.allocation-link-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); cursor: pointer; }
.allocation-link-option:hover { border-color: rgba(18, 109, 247, 0.32); background: rgba(18, 109, 247, 0.035); }
.allocation-link-option:has(input:checked) { border-color: var(--link); background: rgba(18, 109, 247, 0.07); box-shadow: 0 0 0 1px rgba(18, 109, 247, 0.12); }
.allocation-link-option.is-unavailable { cursor: not-allowed; opacity: 0.58; }
.allocation-link-option.is-unavailable:hover { border-color: var(--border); background: var(--surface); }
.allocation-link-option input { width: 17px; height: 17px; accent-color: var(--link); }
.allocation-link-option > span { display: grid; min-width: 0; gap: 2px; }
.allocation-link-option strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.allocation-link-option small { color: var(--text-muted); font-size: 10px; }
.allocation-link-option .allocation-link-match { font-weight: 700; }
.allocation-link-option .allocation-link-match.is-match { color: var(--success); }
.allocation-link-option .allocation-link-match.is-difference { color: #9b6400; }
.allocation-link-option > b { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.allocation-link-empty { padding: 30px 16px; border: 1px dashed var(--border); border-radius: 11px; color: var(--text-muted); font-size: 12px; text-align: center; }
.allocation-link-feedback { min-height: 18px; padding: 4px 21px 0; color: var(--text-muted); font-size: 10px; font-weight: 650; }
.allocation-link-feedback.is-error { color: var(--danger); }
.allocation-link-panel form > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 21px 16px; border-top: 1px solid var(--border); }
.delete-confirmation[hidden] { display: none; }
.delete-confirmation { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px; }
.delete-confirmation-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0, 16, 36, 0.4); opacity: 0; cursor: default; transition: opacity 180ms ease-out; }
.delete-confirmation-panel { position: relative; width: min(100%, 430px); padding: 28px; border-radius: var(--radius-xl); background: var(--surface); box-shadow: 0 24px 80px rgba(0, 16, 36, 0.24); text-align: center; opacity: 0; transform: translateY(12px) scale(0.98); transition: opacity 180ms ease-out, transform 180ms ease-out; }
.delete-confirmation.is-open .delete-confirmation-backdrop, .delete-confirmation.is-open .delete-confirmation-panel { opacity: 1; }
.delete-confirmation.is-open .delete-confirmation-panel { transform: translateY(0) scale(1); }
.delete-confirmation-icon { display: grid; width: 56px; height: 56px; place-items: center; margin: 0 auto 18px; border-radius: 50%; background: rgba(217, 74, 74, 0.12); color: var(--danger); }
.archive-confirmation .delete-confirmation-icon { background: #e8ebee; color: #68717c; }
.archive-icon { position: relative; width: 19px; height: 13px; border: 2px solid currentColor; border-radius: 2px; }
.archive-icon::before { content: ""; position: absolute; top: -6px; left: -3px; width: 21px; height: 4px; border: 2px solid currentColor; border-radius: 2px; background: #e8ebee; }
.archive-icon::after { content: ""; position: absolute; top: 3px; left: 5px; width: 5px; border-top: 2px solid currentColor; }
.delete-confirmation h2 { margin-bottom: 8px; }
.delete-confirmation p strong { color: var(--text); }
.delete-confirmation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.receipt-editor-modal[hidden], .receipt-editor-step[hidden], .receipt-viewer-modal[hidden], [data-receipt-viewer-frame][hidden] { display: none !important; }
.receipt-viewer-modal { position: fixed; inset: 0; z-index: 109; display: grid; place-items: center; padding: 8px; }
.receipt-viewer-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0, 16, 36, 0.58); cursor: default; backdrop-filter: blur(4px); }
.receipt-viewer-panel { position: relative; display: grid; width: min(960px, calc(100vw - 16px)); max-width: 100%; height: min(860px, calc(100dvh - 16px)); max-height: calc(100dvh - 16px); grid-template-rows: auto auto auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: 0 28px 90px rgba(0, 16, 36, 0.3); }
.receipt-viewer-toolbar { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.receipt-viewer-toolbar label { display: flex; min-width: 0; align-items: center; gap: 9px; color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.receipt-viewer-toolbar select { min-width: min(280px, 55vw); height: 36px; padding: 0 34px 0 10px; border: 1px solid var(--border); border-radius: 8px; background-color: var(--surface); color: var(--text); font: inherit; font-size: 11px; text-transform: none; }
.receipt-viewer-toolbar > span { color: var(--text-muted); font-size: 11px; font-weight: 650; }
.receipt-viewer-content { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #202327; }
.receipt-viewer-content iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.receipt-viewer-message { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; color: rgba(255, 255, 255, 0.78); font-size: 12px; text-align: center; }
.receipt-viewer-message[hidden], .receipt-viewer-actions [data-receipt-viewer-open][hidden], .receipt-viewer-actions [data-receipt-viewer-delete][hidden] { display: none !important; }
.receipt-viewer-message.is-error { color: #ffb2b2; }
.receipt-viewer-actions { display: flex; min-height: 68px; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.receipt-viewer-actions > span { flex: 1; }
.receipt-delete-confirmation { z-index: 120; }
.receipt-delete-feedback { min-height: 18px; margin-top: 9px; color: var(--danger); font-size: 11px; font-weight: 650; }
.receipt-editor-modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 8px; }
.receipt-editor-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0, 16, 36, 0.58); cursor: default; backdrop-filter: blur(4px); }
.receipt-editor-panel { position: relative; display: grid; width: min(1120px, calc(100vw - 16px)); max-width: 100%; height: min(920px, calc(100dvh - 16px)); max-height: calc(100dvh - 16px); grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: 0 28px 90px rgba(0, 16, 36, 0.3); }
.receipt-editor-header { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.receipt-editor-header .page-kicker { margin: 0; font-size: 9px; }
.receipt-editor-header h2 { margin: 2px 0 0; font-size: 19px; }
.receipt-transaction-summary { display: grid; grid-template-columns: 0.65fr 0.9fr 0.9fr minmax(180px, 2fr); gap: 1px; margin: 0; border-bottom: 1px solid var(--border); background: var(--border); }
.receipt-transaction-summary[hidden] { display: none; }
.receipt-transaction-summary > div { min-width: 0; padding: 9px 12px; background: #fbfcfd; }
.receipt-transaction-summary dt { color: var(--text-muted); font-size: 9px; font-weight: 750; letter-spacing: 0.03em; text-transform: uppercase; }
.receipt-transaction-summary dd { margin: 2px 0 0; overflow: hidden; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.receipt-editor-body, .receipt-editor-step { min-width: 0; min-height: 0; }
.receipt-editor-step { display: grid; height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.receipt-preview-step { grid-template-rows: auto minmax(120px, 1fr) auto auto auto; }
.receipt-editor-tools { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.receipt-editor-tools > p { margin: 0; color: var(--text-muted); font-size: 11px; }
.receipt-editor-tools > div { display: flex; gap: 5px; }
.receipt-editor-tools .button { min-width: 38px; min-height: 34px; padding: 5px 9px; }
.receipt-image-scroll, .receipt-preview-scroll { position: relative; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; background: #202327; scrollbar-color: rgba(255, 255, 255, 0.42) rgba(255, 255, 255, 0.08); }
.receipt-image-scroll { display: block; padding: 24px; touch-action: none; }
.receipt-canvas-wrap { position: relative; width: 1px; height: 1px; margin: auto; overflow: hidden; background: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28); }
.receipt-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
.receipt-crop-box { position: absolute; z-index: 3; min-width: 80px; min-height: 80px; border: 2px solid var(--primary); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.48), inset 0 0 0 1px rgba(0, 0, 0, 0.28); cursor: move; touch-action: none; }
.receipt-crop-box.is-moving { cursor: grabbing; }
.receipt-crop-box::before, .receipt-crop-box::after { content: ""; position: absolute; pointer-events: none; }
.receipt-crop-box::before { inset: 33.333% 0; border-top: 1px solid rgba(255, 255, 255, 0.72); border-bottom: 1px solid rgba(255, 255, 255, 0.72); }
.receipt-crop-box::after { inset: 0 33.333%; border-right: 1px solid rgba(255, 255, 255, 0.72); border-left: 1px solid rgba(255, 255, 255, 0.72); }
.receipt-crop-box [data-crop-handle] { position: absolute; z-index: 2; width: 40px; height: 40px; border: 0; background: transparent; touch-action: none; }
.receipt-crop-box [data-crop-handle]::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; border: 2px solid #16181b; border-radius: 50%; background: var(--primary); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.36); transform: translate(-50%, -50%); }
.receipt-crop-box [data-crop-handle="nw"] { top: -20px; left: -20px; cursor: nwse-resize; }
.receipt-crop-box [data-crop-handle="n"] { top: -20px; left: calc(50% - 20px); cursor: ns-resize; }
.receipt-crop-box [data-crop-handle="ne"] { top: -20px; right: -20px; cursor: nesw-resize; }
.receipt-crop-box [data-crop-handle="e"] { top: calc(50% - 20px); right: -20px; cursor: ew-resize; }
.receipt-crop-box [data-crop-handle="se"] { right: -20px; bottom: -20px; cursor: nwse-resize; }
.receipt-crop-box [data-crop-handle="s"] { bottom: -20px; left: calc(50% - 20px); cursor: ns-resize; }
.receipt-crop-box [data-crop-handle="sw"] { bottom: -20px; left: -20px; cursor: nesw-resize; }
.receipt-crop-box [data-crop-handle="w"] { top: calc(50% - 20px); left: -20px; cursor: ew-resize; }
.receipt-photo-empty { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; padding: 24px; background: #f6f7f8; text-align: center; }
.receipt-photo-empty[hidden] { display: none; }
.receipt-photo-empty strong { font-size: 18px; }
.receipt-photo-empty p { max-width: 360px; margin: 0 0 8px; color: var(--text-muted); font-size: 13px; }
.receipt-editor-actions { display: flex; min-height: 68px; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.receipt-quality-tools { align-items: center; }
.receipt-quality-tools label { display: grid; min-width: min(440px, 56vw); grid-template-columns: auto minmax(120px, 1fr) 42px; align-items: center; gap: 10px; color: var(--text-muted); font-size: 11px; font-weight: 700; }
.receipt-quality-tools input[type="range"] { width: 100%; accent-color: var(--primary-hover); }
.receipt-quality-tools label strong { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.receipt-quality-tools > p { display: grid; justify-items: end; }
.receipt-quality-tools > p strong { color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
.receipt-quality-tools > p span { font-size: 9px; }
.receipt-quality-tools > p.is-over-target strong, .receipt-quality-tools > p.is-over-target span { color: var(--warning); }
.receipt-preview-scroll { display: grid; place-items: start center; padding: 24px; touch-action: none; }
.receipt-preview-scroll img { display: block; max-width: none; height: auto; background: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28); user-select: none; -webkit-user-drag: none; }
.receipt-match-panel[hidden] { display: none; }
.receipt-match-panel { display: grid; max-height: min(280px, 34dvh); grid-template-rows: auto minmax(0, 1fr); border-top: 1px solid var(--border); background: #fbfcfd; }
.receipt-match-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 14px; border-bottom: 1px solid var(--border); }
.receipt-match-heading strong { font-size: 12px; }
.receipt-match-heading p { margin: 2px 0 0; color: var(--text-muted); font-size: 10px; }
.receipt-match-search { display: flex; flex: 0 0 min(340px, 44vw); gap: 7px; }
.receipt-match-search label { min-width: 0; flex: 1; }
.receipt-match-search input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }
.receipt-match-search input:focus { border-color: var(--link); box-shadow: 0 0 0 2px rgba(18, 109, 247, 0.14); outline: 0; }
.receipt-match-results { min-height: 42px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.receipt-match-results > p { margin: 8px; color: var(--text-muted); font-size: 11px; text-align: center; }
.receipt-match-candidate { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 6px; border-radius: 9px; }
.receipt-match-candidate + .receipt-match-candidate { margin-top: 5px; }
.receipt-match-candidate-main { display: grid; min-width: 0; grid-template-columns: 72px 92px minmax(130px, 1.4fr) minmax(120px, 1fr) auto; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; background: var(--surface); color: var(--text); cursor: pointer; text-align: left; }
.receipt-match-candidate-main:hover { border-color: #cfd4da; }
.receipt-match-candidate.is-selected .receipt-match-candidate-main { border-color: var(--primary-hover); background: rgba(255, 221, 45, 0.12); box-shadow: 0 0 0 2px rgba(255, 221, 45, 0.18); }
.receipt-match-candidate-main strong, .receipt-match-candidate-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt-match-candidate-main strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.receipt-match-candidate-main span { color: var(--text-muted); font-size: 10px; }
.receipt-match-candidate-main .receipt-match-description { color: var(--text); font-size: 11px; }
.receipt-match-candidate-main .receipt-match-score { justify-self: end; padding: 3px 6px; border-radius: 999px; background: var(--surface-soft); font-size: 9px; font-weight: 700; }
.receipt-match-candidate-main .receipt-match-score.is-exact { background: rgba(0, 185, 45, 0.1); color: #08783e; }
.receipt-match-candidate > .button { align-self: center; min-width: 68px; }
.receipt-editor-feedback { min-height: 30px; margin: 0; padding: 6px 14px; border-top: 1px solid var(--border); background: #fbfcfd; color: var(--text-muted); font-size: 11px; }
.receipt-editor-feedback.is-error { color: var(--danger); }
.receipt-editor-feedback.is-success { color: #08783e; }
.receipt-preview-actions .button:nth-child(3) { margin-left: auto; }
.receipt-editor-panel.is-busy::after { content: var(--receipt-busy-label, "Processing…"); position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(255, 255, 255, 0.72); color: var(--text); font-size: 14px; font-weight: 750; backdrop-filter: blur(2px); }
.layout-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.breakpoint-card { min-height: 190px; padding: 20px; }
.breakpoint-card span { color: var(--text-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.breakpoint-card strong { display: block; margin: 12px 0 10px; font-size: 24px; }
.token-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; overflow: hidden; }
.token-table > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; border-bottom: 1px solid var(--border); }
.token-table > div:nth-child(odd) { border-right: 1px solid var(--border); }
.token-table span { color: var(--text-muted); }
.dashboard-money { display: grid; gap: 18px; }
.dashboard-section-index { position: sticky; top: 76px; z-index: 20; display: flex; gap: 6px; overflow-x: auto; margin: -4px 0 2px; padding: 7px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.94); box-shadow: 0 8px 24px rgba(0, 16, 36, 0.07); backdrop-filter: blur(16px); scrollbar-width: none; }
.dashboard-section-index::-webkit-scrollbar { display: none; }
.dashboard-section-index a { min-height: 36px; flex: 0 0 auto; padding: 8px 13px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 12px; font-weight: 700; transition: background 140ms ease-out, color 140ms ease-out; }
.dashboard-section-index a:hover { background: var(--surface-soft); color: var(--text); }
.dashboard-section-index a.is-active { background: var(--primary); color: var(--text); }
.dashboard-overview-section { display: grid; gap: 18px; }
.dashboard-overview-section, .tax-overview, .compliance-calendar { scroll-margin-top: 140px; }
.dashboard-money-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.dashboard-money-header h1 { margin-bottom: 8px; }
.dashboard-money-header p { font-size: 15px; }
.dashboard-fx { display: grid; min-width: 280px; gap: 5px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.dashboard-fx-live { display: flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 10px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.dashboard-fx-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(0, 185, 45, 0.1); }
.dashboard-fx[data-fx-status="unavailable"] .dashboard-fx-live i, .dashboard-fx[data-fx-status="cached"] .dashboard-fx-live i { background: var(--warning); box-shadow: 0 0 0 4px rgba(217, 130, 0, 0.1); }
.dashboard-fx strong { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dashboard-fx strong b { color: var(--text-muted); font-size: 12px; font-weight: 500; }
.dashboard-fx small { color: var(--text-muted); font-size: 10px; }
.dashboard-money-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cashback-overview-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.cashback-overview-card > header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.cashback-overview-card > header h2 { margin: 3px 0 4px; font-size: 24px; }
.cashback-overview-card > header p { font-size: 12px; }
.cashback-total { display: grid; min-width: 210px; gap: 3px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--primary); text-align: right; }
.cashback-total span { color: var(--text-muted); font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.cashback-total strong { font-size: 27px; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.cashback-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.cashback-card-grid > article { display: grid; min-width: 0; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-soft); }
.cashback-card-grid article > header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cashback-card-grid article > header strong { min-width: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cashback-rate { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; background: rgba(18, 109, 247, 0.1); color: var(--link); font-size: 9px; font-weight: 800; }
.cashback-card-grid article > b { font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.cashback-card-grid dl { display: grid; gap: 5px; margin: 0; padding-top: 10px; border-top: 1px solid var(--border); }
.cashback-card-grid dl > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cashback-card-grid dt { color: var(--text-muted); font-size: 9px; }
.cashback-card-grid dd { margin: 0; font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 700; }
.money-balance-card { display: grid; min-width: 0; min-height: 210px; align-content: start; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.money-balance-card.is-total { border-color: rgba(199, 163, 0, 0.28); background: linear-gradient(145deg, #ffe76a 0%, var(--primary) 62%, #f6ce00 100%); }
.money-balance-card > header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 10px; }
.money-balance-card > header > div { display: grid; min-width: 0; gap: 2px; }
.money-balance-card > header span { font-size: 13px; font-weight: 750; }
.money-balance-card > header small { overflow: hidden; color: var(--text-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.money-balance-mark { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.7); font-size: 15px !important; }
.money-balance-usd { display: block; overflow: hidden; margin-top: 23px; font-size: clamp(24px, 2.35vw, 34px); font-variant-numeric: tabular-nums; letter-spacing: -0.045em; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.money-balance-rub { display: block; overflow: hidden; min-height: 19px; margin-top: 5px; color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.money-balance-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: auto 0 0; padding-top: 18px; }
.money-balance-groups > div { min-width: 0; padding-top: 9px; border-top: 1px solid rgba(0, 16, 36, 0.1); }
.money-balance-groups dt { color: var(--text-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.money-balance-groups dd { overflow: hidden; margin: 2px 0 0; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.money-history-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.money-history-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 21px 24px 10px; }
.money-history-header h2 { margin: 3px 0; font-size: 23px; }
.money-history-header p { font-size: 12px; }
.money-history-eyebrow { color: var(--text-muted); font-size: 10px; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; }
.money-history-zoom { display: grid; grid-template-columns: 36px minmax(88px, auto) 36px; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-soft); }
.money-history-zoom button { display: grid; width: 36px; height: 34px; place-items: center; padding: 0; border: 0; background: transparent; color: var(--text); cursor: pointer; font-size: 18px; }
.money-history-zoom button:hover { background: rgba(0, 16, 36, 0.06); }
.money-history-zoom button:disabled { cursor: default; opacity: 0.3; }
.money-history-zoom span { min-width: 88px; padding: 0 8px; text-align: center; font-size: 11px; font-weight: 700; }
.money-history-chart { position: relative; height: 330px; margin: 0 12px; touch-action: pan-y; }
.money-history-chart canvas { display: block; width: 100%; height: 100%; }
.money-history-tooltip { position: absolute; z-index: 2; display: grid; min-width: 134px; gap: 2px; padding: 9px 11px; border: 1px solid rgba(0, 16, 36, 0.12); border-radius: 10px; background: rgba(51, 51, 51, 0.94); color: #fff; box-shadow: 0 8px 24px rgba(0, 16, 36, 0.18); pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); }
.money-history-tooltip[hidden] { display: none; }
.money-history-tooltip time { color: rgba(255, 255, 255, 0.7); font-size: 10px; }
.money-history-tooltip strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.money-history-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 5px; padding: 24px; text-align: center; pointer-events: none; }
.money-history-empty[hidden] { display: none; }
.money-history-empty strong { font-size: 16px; }
.money-history-empty span { max-width: 430px; color: var(--text-muted); font-size: 12px; }
.money-history-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 24px 18px; color: var(--text-muted); font-size: 10px; }
.money-history-footer time { font-variant-numeric: tabular-nums; }
.tax-overview { display: grid; gap: 14px; margin-top: 18px; }
.tax-overview-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 12px; }
.tax-overview-header h2 { margin: 3px 0 4px; }
.tax-overview-header p { font-size: 12px; }
.tax-overview-actions { display: flex; align-items: flex-end; gap: 8px; }
.tax-year-field { display: grid; gap: 3px; }
.tax-year-field > span { color: var(--text-muted); font-size: 9px; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; }
.tax-year-field select { min-width: 96px; height: 40px; padding: 0 32px 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; font-size: 12px; font-weight: 700; }
.tax-warning-list { display: grid; gap: 4px; padding: 10px 13px; border: 1px solid rgba(217, 130, 0, 0.22); border-radius: var(--radius-md); background: rgba(217, 130, 0, 0.07); }
.tax-warning-list[hidden] { display: none; }
.tax-warning-list p { color: #765014; font-size: 11px; }
.tax-summary-grid { display: grid; grid-template-columns: 1.15fr repeat(4, minmax(0, 1fr)); gap: 9px; }
.tax-summary-card { display: grid; min-width: 0; min-height: 120px; align-content: start; padding: 15px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.tax-summary-card.is-total { border-color: rgba(199, 163, 0, 0.3); background: linear-gradient(145deg, #fff2a7 0%, #ffdd2d 100%); }
.tax-summary-card.is-scorp { background: #f9fafb; }
.tax-summary-card > span { color: var(--text-muted); font-size: 10px; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; }
.tax-summary-card strong { display: block; overflow: hidden; margin-top: 15px; font-size: clamp(19px, 1.75vw, 27px); font-variant-numeric: tabular-nums; letter-spacing: -0.035em; text-overflow: ellipsis; white-space: nowrap; }
.tax-summary-card small { margin-top: auto; padding-top: 8px; color: var(--text-muted); font-size: 9px; }
.tax-calculation-card, .tax-activity-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.tax-calculation-card > summary, .tax-activity-card > summary { display: grid; align-items: center; list-style: none; cursor: pointer; }
.tax-calculation-card > summary::-webkit-details-marker, .tax-activity-card > summary::-webkit-details-marker { display: none; }
.tax-calculation-card > summary { grid-template-columns: minmax(0, 1fr) auto; min-height: 62px; gap: 12px; padding: 12px 17px; }
.tax-calculation-card > summary > span:first-child, .tax-activity-card > summary > span:first-child { display: grid; min-width: 0; gap: 2px; }
.tax-calculation-card > summary strong, .tax-activity-card > summary strong { font-size: 12px; }
.tax-calculation-card > summary small, .tax-activity-card > summary small { overflow: hidden; color: var(--text-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.tax-disclosure { display: inline-grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--surface-soft); color: var(--text-muted); transition: transform 160ms ease-out; }
details[open] > summary .tax-disclosure { transform: rotate(180deg); }
.tax-calculation-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--border); }
.tax-calculation-list > div { min-width: 0; padding: 13px 16px; border-right: 1px solid var(--border); }
.tax-calculation-list > div:last-child { border-right: 0; }
.tax-calculation-list dt { color: var(--text-muted); font-size: 9px; font-weight: 700; }
.tax-calculation-list dd { overflow: hidden; margin: 4px 0 0; font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.tax-estimate-note { padding: 9px 16px; border-top: 1px solid var(--border); background: #fbfcfd; font-size: 9px; }
.tax-activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.tax-activity-card > summary { grid-template-columns: minmax(0, 1fr) auto 28px; min-height: 68px; gap: 12px; padding: 12px 15px; }
.tax-activity-total { font-size: 17px !important; font-variant-numeric: tabular-nums; letter-spacing: -0.025em; }
.tax-activity-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.tax-activity-split > section { min-width: 0; }
.tax-activity-split > section + section { border-left: 1px solid var(--border); }
.tax-activity-split header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 12px; background: #fbfcfd; }
.tax-activity-split header span { color: var(--text-muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.tax-activity-split header strong { font-size: 11px; font-variant-numeric: tabular-nums; }
.tax-activity-split dl { margin: 0; }
.tax-activity-split dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 7px 12px; border-top: 1px solid rgba(0, 16, 36, 0.07); }
.tax-activity-split dt { overflow: hidden; color: var(--text-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.tax-activity-split dd { margin: 0; font-size: 9px; font-variant-numeric: tabular-nums; font-weight: 700; }
.tax-settings-modal[hidden] { display: none; }
.tax-settings-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 18px; }
.tax-settings-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0, 16, 36, 0.42); opacity: 0; cursor: default; transition: opacity 180ms ease-out; }
.tax-settings-panel { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(1050px, 96vw); height: min(820px, 94dvh); max-height: min(900px, 94dvh); overflow: hidden; border-radius: var(--radius-xl); background: var(--surface); box-shadow: 0 24px 80px rgba(0, 16, 36, 0.25); opacity: 0; transform: translateY(14px) scale(0.99); transition: opacity 180ms ease-out, transform 180ms ease-out; }
.tax-settings-modal.is-open .tax-settings-backdrop, .tax-settings-modal.is-open .tax-settings-panel { opacity: 1; }
.tax-settings-modal.is-open .tax-settings-panel { transform: translateY(0) scale(1); }
.tax-settings-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 22px 15px; border-bottom: 1px solid var(--border); }
.tax-settings-header h2 { margin: 3px 0 2px; font-size: 23px; }
.tax-settings-header p { font-size: 10px; }
.tax-settings-panel form { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-height: 0; overflow: hidden; }
.tax-deduction-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 22px; }
.tax-deduction-grid .field { gap: 4px; }
.tax-deduction-grid .field > span { font-size: 10px; }
.tax-deduction-grid .input-with-prefix, .tax-deduction-grid .input-with-prefix input { min-height: 42px; }
.tax-filing-status-field { min-height: 44px; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fbfcfd; }
.tax-filing-status-field > span { display: grid; gap: 1px; }
.tax-filing-status-field strong { font-size: 11px; }
.tax-filing-status-field small { color: var(--text-muted); font-size: 9px; }
.tax-bracket-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; min-height: 0; gap: 13px; padding: 0 22px 16px; overflow-y: auto; }
.tax-bracket-section { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.tax-bracket-section > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px; background: #fbfcfd; }
.tax-bracket-section h3 { margin: 0; font-size: 14px; }
.tax-bracket-section header p { margin-top: 2px; font-size: 8px; }
.tax-bracket-table-head, .tax-bracket-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 92px 32px; align-items: center; gap: 5px; }
.tax-bracket-table-head { padding: 7px 10px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.tax-bracket-row { padding: 5px 9px; border-top: 1px solid rgba(0, 16, 36, 0.07); }
.tax-bracket-row label { display: flex; min-width: 0; align-items: center; }
.tax-bracket-row input { width: 100%; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px; background: var(--surface-soft); color: var(--text); font-size: 10px; font-variant-numeric: tabular-nums; }
.tax-bracket-row input:focus { border-color: var(--link); }
.tax-rate-field { position: relative; }
.tax-rate-field input { padding-right: 22px; }
.tax-rate-field span { position: absolute; right: 8px; color: var(--text-muted); font-size: 9px; pointer-events: none; }
.tax-bracket-remove { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(217, 74, 74, 0.08); color: var(--danger); cursor: pointer; font-size: 17px; }
.tax-bracket-remove:hover { background: rgba(217, 74, 74, 0.15); }
.tax-settings-feedback { min-height: 34px; padding: 8px 22px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 10px; }
.tax-settings-feedback.is-error { color: var(--danger); }
.tax-settings-feedback.is-success { color: #08783e; }
.tax-settings-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 11px 22px calc(11px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); }
.compliance-calendar { display: grid; gap: 12px; margin-top: 20px; }
.compliance-calendar-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 10px; }
.compliance-calendar-header h2 { margin: 3px 0 4px; }
.compliance-calendar-header p { font-size: 12px; }
.compliance-calendar-actions { display: flex; align-items: flex-end; gap: 8px; }
.compliance-summary { display: flex; flex-wrap: wrap; gap: 7px; }
.compliance-summary-item { display: inline-flex; min-height: 34px; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.compliance-summary-item strong { min-width: 17px; font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.compliance-summary-item small { color: var(--text-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.compliance-summary-item.is-overdue { border-color: rgba(217, 74, 74, 0.2); background: rgba(217, 74, 74, 0.06); }
.compliance-summary-item.is-due-soon { border-color: rgba(217, 130, 0, 0.22); background: rgba(255, 221, 45, 0.14); }
.compliance-summary-item.is-completed { border-color: rgba(0, 151, 68, 0.18); background: rgba(0, 151, 68, 0.06); }
.compliance-feedback { min-height: 0; margin: 0; color: var(--text-muted); font-size: 10px; }
.compliance-feedback:not(:empty) { min-height: 30px; padding: 7px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.compliance-feedback.is-error { color: var(--danger); }
.compliance-feedback.is-success { color: #08783e; }
.compliance-event-list { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.compliance-event { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr) 112px; min-height: 126px; align-items: center; gap: 16px; padding: 15px 17px; }
.compliance-event + .compliance-event { border-top: 1px solid var(--border); }
.compliance-event::before { content: ""; position: absolute; top: 13px; bottom: 13px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.compliance-event.is-overdue::before { background: var(--danger); }
.compliance-event.is-due_soon::before { background: var(--primary); }
.compliance-event.is-completed { background: rgba(0, 151, 68, 0.025); }
.compliance-event.is-setup_required { background: rgba(255, 221, 45, 0.08); }
.compliance-event.is-information, .compliance-event.is-conditional { background: #fbfcfd; }
.compliance-event-date { display: grid; width: 58px; min-height: 70px; place-content: center; gap: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); text-align: center; }
.compliance-event-date span { color: var(--text-muted); font-size: 8px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.compliance-event-date strong { font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.compliance-event-date small { color: var(--text-muted); font-size: 8px; font-variant-numeric: tabular-nums; }
.compliance-event-body { display: grid; min-width: 0; gap: 4px; }
.compliance-event-meta { display: flex; min-width: 0; align-items: center; gap: 8px; }
.compliance-event-meta span { padding: 3px 6px; border-radius: 999px; background: var(--surface-soft); color: var(--text-muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.compliance-event-meta small { overflow: hidden; color: var(--text-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.compliance-event-body h3 { margin: 1px 0 0; font-size: 13px; }
.compliance-event-body p { max-width: 850px; font-size: 10px; line-height: 1.45; }
.compliance-event-body a { width: fit-content; color: var(--link); font-size: 9px; font-weight: 700; }
.compliance-event-controls { display: grid; justify-items: stretch; gap: 8px; }
.compliance-status-badge { display: block; padding: 5px 7px; border-radius: 999px; background: var(--surface-soft); color: var(--text-muted); font-size: 8px; font-weight: 800; text-align: center; text-transform: uppercase; }
.is-overdue .compliance-status-badge { background: rgba(217, 74, 74, 0.09); color: var(--danger); }
.is-due_soon .compliance-status-badge, .is-setup_required .compliance-status-badge { background: rgba(255, 221, 45, 0.25); color: #725b00; }
.is-completed .compliance-status-badge { background: rgba(0, 151, 68, 0.09); color: #08783e; }
.compliance-complete-button { min-height: 34px; padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; font-size: 9px; font-weight: 750; }
.compliance-complete-button:hover { border-color: rgba(0, 16, 36, 0.24); background: var(--surface-soft); }
.compliance-complete-button:disabled { cursor: wait; opacity: 0.55; }
.is-completed .compliance-complete-button { color: #08783e; }
.compliance-empty { padding: 30px; color: var(--text-muted); font-size: 11px; text-align: center; }
.compliance-notes { display: grid; gap: 3px; padding: 0 3px; }
.compliance-notes[hidden] { display: none; }
.compliance-notes p { color: var(--text-muted); font-size: 9px; }
.compliance-settings-modal[hidden] { display: none; }
.compliance-settings-modal { position: fixed; inset: 0; z-index: 121; display: grid; place-items: center; padding: 18px; }
.compliance-settings-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0, 16, 36, 0.42); opacity: 0; cursor: default; transition: opacity 180ms ease-out; }
.compliance-settings-panel { position: relative; width: min(570px, 94vw); overflow: hidden; border-radius: var(--radius-xl); background: var(--surface); box-shadow: 0 24px 80px rgba(0, 16, 36, 0.25); opacity: 0; transform: translateY(14px) scale(0.99); transition: opacity 180ms ease-out, transform 180ms ease-out; }
.compliance-settings-modal.is-open .compliance-settings-backdrop, .compliance-settings-modal.is-open .compliance-settings-panel { opacity: 1; }
.compliance-settings-modal.is-open .compliance-settings-panel { transform: translateY(0) scale(1); }
.compliance-settings-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 19px 20px 14px; border-bottom: 1px solid var(--border); }
.compliance-settings-header h2 { margin: 3px 0 2px; font-size: 22px; }
.compliance-settings-header p { font-size: 10px; }
.compliance-settings-panel form { display: grid; gap: 9px; padding: 15px 20px 0; }
.compliance-date-field { gap: 5px; padding-bottom: 5px; }
.compliance-date-field input { min-height: 44px; padding: 0 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; }
.compliance-date-field small { color: var(--text-muted); font-size: 9px; }
.compliance-setting-check { min-height: 58px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fbfcfd; }
.compliance-setting-check > span { display: grid; gap: 2px; }
.compliance-setting-check strong { font-size: 11px; }
.compliance-setting-check small { color: var(--text-muted); font-size: 9px; }
.compliance-settings-feedback { min-height: 30px; margin: 0 -20px; padding: 7px 20px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 10px; }
.compliance-settings-feedback.is-error { color: var(--danger); }
.compliance-settings-feedback.is-success { color: #08783e; }
.compliance-settings-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 0 -20px; padding: 11px 20px calc(11px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: rgba(255, 255, 255, 0.96); }
.bottom-nav { display: none; }

@media (max-width: 1180px) {
  .dashboard-money-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cashback-card-grid { grid-template-columns: 1fr; }
  .tax-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tax-summary-card.is-total { grid-column: span 2; }
  .tax-calculation-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tax-calculation-list > div { border-bottom: 1px solid var(--border); }
  .empty-module-grid, .color-grid, .layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  body { padding-bottom: 72px; }
  .dashboard-section-index { top: 68px; }
  .dashboard-money-header { align-items: stretch; flex-direction: column; gap: 16px; }
  .dashboard-fx { width: 100%; min-width: 0; }
  .money-history-header { align-items: flex-start; }
  .money-history-chart { height: 280px; margin: 0 6px; }
  .tax-overview-header { align-items: flex-start; flex-direction: column; }
  .tax-overview-actions { width: 100%; }
  .tax-year-field { flex: 1; }
  .tax-year-field select { width: 100%; min-height: 44px; }
  .tax-overview-actions .button { min-height: 44px; }
  .tax-bracket-sections { grid-template-columns: 1fr; }
  .sidebar { width: min(86vw, 320px); transform: translateX(-102%); box-shadow: 18px 0 44px rgba(0, 16, 36, 0.16); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-overlay { display: block; }
  .icon-button.sidebar-close { display: grid; }
  .app-frame { margin-left: 0; }
  .topbar { min-height: 60px; padding: 0 14px; }
  .mobile-brand { display: flex; }
  .icon-button.menu-toggle { display: grid; }
  .mobile-brand img { width: 116px; height: auto; }
  .topbar-context, .topbar-status span:last-child { display: none; }
  .topbar-actions { gap: 10px; }
  .page-content { padding: 28px 18px 40px; }
  .page-header { align-items: flex-start; flex-direction: column; margin-bottom: 22px; }
  .page-header .button { width: 100%; }
  .empty-workspace { min-height: 390px; padding: 32px 22px; }
  .logo-specimen-grid { grid-template-columns: 1fr; }
  .logo-stage { min-height: 360px; }
  .brandbook-index { top: 70px; margin-bottom: 32px; }
  .brand-section { scroll-margin-top: 130px; }
  .component-grid { grid-template-columns: 1fr; }
  .transaction-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .transactions-toolbar { align-items: flex-start; flex-direction: column; gap: 10px; }
  .transactions-toolbar-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .receipt-auto-match-button { margin-right: auto; }
  .transactions-toolbar-actions .autosave-status { width: 100%; justify-content: flex-end; }
  .mapping-toolbar-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .mapping-toolbar-actions > .button { grid-column: 1 / -1; width: 100%; }
  .transactions-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; }
  .mapping-filters { grid-template-columns: 1fr; }
  .transaction-search-control { grid-column: 1 / -1; }
  .transaction-year-control, .transaction-date-control > button { width: 100%; }
  .transaction-search-control input, .transaction-year-control, .transaction-date-control > button { height: 44px; }
  .transaction-year-control select { height: 42px; background-position: calc(100% - 12px) 19px, calc(100% - 8px) 19px; }
  .range-calendar-header { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .range-calendar-header button, .range-calendar-day, .filter-popover-actions .button { height: 44px; }
  .filter-popover-heading button { width: 44px; height: 44px; }
  .filters-reset-button { grid-column: 1 / -1; justify-self: center; }
  .column-filter-popover { display: none !important; }
  .transaction-table-viewport { display: none; }
  .transaction-floating-scrollbar { display: none !important; }
  .transaction-mobile-list { display: grid; gap: 6px; padding: 6px; background: var(--background); }
  .transaction-mobile-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; transition: border-color 140ms ease-out, box-shadow 140ms ease-out; }
  .transaction-mobile-card.is-selected { border-color: var(--primary-hover); box-shadow: 0 0 0 3px rgba(255, 221, 45, 0.22); }
  .transaction-mobile-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .transaction-mobile-card.is-pending { border-color: #d9dce1; background: #f1f2f4; color: var(--text-muted); cursor: default; }
  .transaction-mobile-card.needs-mapping:not(.is-selected):not(.is-pending) { border-color: rgba(217, 130, 0, 0.45); background: #fffbed; box-shadow: inset 3px 0 0 var(--warning); }
  .transaction-mobile-card.is-pending .transaction-mobile-description,
  .transaction-mobile-card.is-pending .transaction-mobile-meta { background: rgba(255, 255, 255, 0.5); }
  .transaction-mobile-card.is-pending .amount-editor input,
  .transaction-mobile-card.is-pending .transaction-inline-select:disabled { color: var(--text-muted); }
  .transaction-mobile-card.is-pending .review-button:disabled,
  .transaction-mobile-card.is-pending .document-button:disabled,
  .transaction-mobile-card.is-pending .delete-button:disabled { cursor: not-allowed; filter: grayscale(1); opacity: 0.34; transform: none; }
  .mapping-mobile-card { display: grid; grid-template-columns: minmax(0, 1fr); }
  .mapping-mobile-card-header { display: grid; grid-column: 1 / -1; grid-template-columns: 34px minmax(0, 1fr) 32px; align-items: center; gap: 6px; }
  .mapping-mobile-card-header .row-checkbox { width: 34px; height: 34px; }
  .mapping-mobile-card-header .row-checkbox > span { width: 18px; height: 18px; border-radius: 5px; }
  .mapping-mobile-card-header > div { display: grid; min-width: 0; gap: 1px; }
  .mapping-mobile-card-header strong, .mapping-mobile-card-header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mapping-mobile-card-header strong { font-size: 12px; }
  .mapping-mobile-card-header small { color: var(--text-muted); font-size: 9px; }
  .mapping-mobile-card-header .delete-button { width: 32px; height: 32px; }
  .mapping-mobile-fields { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 6px; margin-top: 7px; }
  .mapping-mobile-field { display: grid; min-width: 0; gap: 1px; }
  .mapping-mobile-field:first-child, .mapping-mobile-field:last-child { grid-column: 1 / -1; }
  [data-availability-mapping-root] .mapping-mobile-field:last-child { grid-column: auto; }
  .mapping-mobile-field > span { color: var(--text-muted); font-size: 9px; font-weight: 700; line-height: 1.2; }
  .mapping-mobile-fields .mapping-inline-input, .mapping-mobile-fields .mapping-inline-select { width: 100%; height: 32px; min-width: 0; min-height: 32px; max-height: 32px; padding: 0 7px; font-size: 11px; }
  .mapping-mobile-fields .mapping-inline-select { padding-right: 24px; background-position: calc(100% - 11px) 14px, calc(100% - 7px) 14px; }
  .mapping-mobile-fields .mapping-boolean-control { width: 100%; height: 32px; }
  .mapping-mobile-fields .mapping-boolean-control span { width: 30px; height: 30px; font-size: 20px; }
  .client-mobile-card { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .client-mobile-card-header { display: grid; grid-template-columns: 34px minmax(0, 1fr) 32px; align-items: center; gap: 6px; }
  .client-mobile-card-header .row-checkbox { width: 34px; height: 34px; }
  .client-mobile-card-header .row-checkbox > span { width: 18px; height: 18px; border-radius: 5px; }
  .client-mobile-card-header > div { display: grid; min-width: 0; gap: 1px; }
  .client-mobile-card-header strong, .client-mobile-card-header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .client-mobile-card-header strong { font-size: 12px; }
  .client-mobile-card-header small { color: var(--text-muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; }
  .client-mobile-card-header .delete-button { width: 32px; height: 32px; }
  .client-mobile-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 6px; }
  .client-mobile-field { display: grid; min-width: 0; gap: 1px; }
  .client-mobile-address { grid-column: 1 / -1; }
  .client-mobile-field > span { color: var(--text-muted); font-size: 9px; font-weight: 700; line-height: 1.2; }
  .client-mobile-field .client-inline-input { height: 32px; min-height: 32px; padding: 0 7px; font-size: 11px; }
  .account-mobile-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .account-mobile-card-header { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 6px; }
  .account-mobile-card-header .row-checkbox { width: 34px; height: 34px; }
  .account-mobile-card-header .row-checkbox > span { width: 18px; height: 18px; border-radius: 5px; }
  .account-mobile-card-header > div { display: grid; min-width: 0; gap: 1px; }
  .account-mobile-card-header strong, .account-mobile-card-header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account-mobile-card-header strong { font-size: 12px; }
  .account-mobile-card-header small { color: var(--text-muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; }
  .account-mobile-card-header .account-mobile-balance { color: var(--text); font-size: 16px; font-variant-numeric: tabular-nums; font-weight: 650; }
  .account-mobile-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 8px; margin: 0; padding: 6px 8px; border-radius: 8px; background: var(--surface-soft); }
  .account-mobile-meta > div { min-width: 0; }
  .account-mobile-meta dt { color: var(--text-muted); font-size: 8px; font-weight: 700; line-height: 1.2; }
  .account-mobile-meta dd { overflow: hidden; margin: 1px 0 0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .account-mobile-balance-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .account-mobile-balance-summary > div { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 5px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 7px; }
  .account-mobile-balance-summary span { color: var(--text-muted); font-size: 8px; font-weight: 700; }
  .account-mobile-balance-summary strong { overflow: hidden; font-size: 11px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
  .account-mobile-actions { display: flex; min-width: 0; align-items: center; gap: 4px; }
  .account-mobile-actions > span { margin-left: 4px; color: var(--text-muted); font-size: 9px; font-weight: 700; }
  .account-mobile-actions .account-import-control { width: 32px; height: 32px; }
  .account-mobile-actions .account-import-control span { width: 18px; height: 18px; border-radius: 5px; }
  .account-mobile-actions .button { min-height: 32px; margin-left: auto; padding: 5px 8px; font-size: 10px; }
  .account-mobile-actions .delete-button { width: 32px; height: 32px; }
  .account-mobile-edit-grid { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 6px; padding-top: 2px; }
  .account-mobile-card.is-selected .account-mobile-edit-grid { display: grid; }
  .account-mobile-edit-grid > label { display: grid; min-width: 0; gap: 1px; }
  .account-mobile-edit-grid > label:nth-child(1), .account-mobile-edit-grid > label:nth-child(2), .account-mobile-edit-grid > label:nth-child(5) { grid-column: 1 / -1; }
  .account-mobile-edit-grid > label > span { color: var(--text-muted); font-size: 8px; font-weight: 700; }
  .account-mobile-edit-grid .account-inline-input, .account-mobile-edit-grid .account-inline-select, .account-mobile-edit-grid .account-balance-editor { width: 100%; height: 32px; min-width: 0; min-height: 32px; max-height: 32px; font-size: 10px; }
  .account-mobile-edit-grid .account-inline-input { padding: 0 7px; }
  .account-mobile-edit-grid .account-inline-select { padding: 0 24px 0 7px; background-position: calc(100% - 11px) 14px, calc(100% - 7px) 14px; }
  .account-mobile-edit-grid .account-balance-editor { padding: 0 7px; }
  .account-mobile-edit-grid .account-balance-editor input { height: 30px; max-height: 30px; line-height: 30px; }
  .account-selection-summary, .account-selection-summary.credit-selection-summary { grid-template-columns: 0.72fr repeat(2, 1fr); min-height: 58px; }
  .account-selection-summary.credit-selection-summary { grid-template-columns: 0.68fr repeat(3, 1fr); }
  .account-selection-summary > div { display: grid; gap: 1px; padding: 9px 8px; }
  .account-selection-summary span { font-size: 8px; }
  .account-selection-summary strong { font-size: 12px; }
  .credit-accounts-workspace .account-mobile-balance-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .transaction-mobile-card-header { display: grid; grid-column: 1 / -1; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 6px; }
  .transaction-mobile-card-header .row-checkbox { width: 34px; height: 34px; }
  .transaction-mobile-card-header .row-checkbox > span { width: 18px; height: 18px; border-radius: 5px; }
  .transaction-mobile-card-header > div { display: grid; gap: 2px; }
  .transaction-mobile-card-header strong { font-size: 12px; }
  .transaction-mobile-card-header time { color: var(--text-muted); font-size: 10px; }
  .transaction-mobile-card-header .amount-editor { width: 96px; height: 34px; min-height: 34px; max-height: 34px; padding: 0 5px; }
  .transaction-mobile-card-header .amount-editor input { height: 32px; max-height: 32px; font-size: 16px; font-weight: 550; line-height: 32px; }
  .transaction-mobile-description { display: grid; grid-column: 1; align-content: center; gap: 1px; min-width: 0; margin: 6px 0 0; padding: 6px 8px; border-radius: 8px; background: var(--surface-soft); }
  .transaction-mobile-description strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .transaction-mobile-description span { overflow: hidden; color: var(--text-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .transaction-mobile-card:not(.is-selected) .transaction-mobile-merchant, .transaction-mobile-card:not(.is-selected) .transaction-mobile-account-holder { display: none; }
  .mobile-action-row { display: flex; grid-column: 2; align-items: center; align-self: stretch; gap: 3px; margin-top: 6px; }
  .mobile-action-row .review-button, .mobile-action-row .document-button, .mobile-action-row .delete-button { width: 32px; height: 32px; }
  .mobile-action-row .review-dot { width: 13px; height: 13px; }
  .mobile-action-row .document-plus { font-size: 20px; }
  .mobile-action-row .delete-button { margin-left: auto; }
  .transaction-mobile-edit-grid { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 6px; margin-top: 6px; }
  .transaction-mobile-edit-grid > label { display: grid; gap: 1px; min-width: 0; }
  .transaction-mobile-edit-grid > label > span { color: var(--text-muted); font-size: 9px; font-weight: 700; line-height: 1.2; }
  .transaction-mobile-edit-grid .transaction-inline-select { width: 100%; height: 30px; min-width: 0; min-height: 30px; max-height: 30px; padding: 0 24px 0 7px; background-position: calc(100% - 11px) 13px, calc(100% - 7px) 13px; font-size: 11px; }
  .transaction-mobile-meta { display: grid; grid-column: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; min-width: 0; margin: 6px 0 0; padding: 6px 8px; border-radius: 8px; background: var(--surface-soft); }
  .transaction-mobile-card:not(.is-selected) .transaction-mobile-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .transaction-mobile-meta > div { display: block; min-width: 0; }
  .transaction-mobile-meta dt { color: var(--text-muted); font-size: 9px; font-weight: 700; line-height: 1.2; }
  .transaction-mobile-meta dd { overflow: hidden; margin: 2px 0 0; font-size: 10px; line-height: 1.25; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
  .transaction-mobile-meta .transaction-inline-select { width: 100%; height: 26px; min-width: 0; min-height: 26px; max-height: 26px; padding: 0 20px 0 5px; background-position: calc(100% - 9px) 11px, calc(100% - 5px) 11px; font-size: 9px; }
  .transaction-mobile-meta .badge { min-height: 18px; padding: 2px 5px; font-size: 9px; }
  .mobile-details-button { grid-column: 2; align-self: stretch; min-height: 0; margin-top: 6px; padding: 5px 8px; font-size: 10px; }
  .transactions-pagination { align-items: stretch; flex-direction: column; padding: 14px 12px; text-align: center; }
  .transactions-pagination .button { width: 100%; }
  .bottom-nav { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); min-height: 68px; padding: 6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); border-top: 1px solid var(--border); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(18px); }
  .bottom-nav-item { display: grid; min-height: 54px; place-items: center; align-content: center; gap: 2px; padding: 4px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; }
  .bottom-nav-item > span { font-size: 20px; line-height: 1; }
  .bottom-nav-item small { font-size: 10px; }
  .bottom-nav-item.is-active { background: rgba(255, 221, 45, 0.28); color: var(--text); font-weight: 750; }
}

@media (max-width: 640px) {
  h1 { font-size: 32px; }
  .dashboard-money { gap: 12px; }
  .dashboard-section-index { gap: 4px; margin-top: -8px; padding: 5px; border-radius: 10px; }
  .dashboard-section-index a { min-height: 38px; flex: 1 0 auto; padding: 9px 12px; text-align: center; }
  .dashboard-overview-section { gap: 12px; }
  .dashboard-overview-section, .tax-overview, .compliance-calendar { scroll-margin-top: 126px; }
  .dashboard-money-header h1 { margin-bottom: 5px; }
  .dashboard-money-header p { font-size: 13px; }
  .dashboard-fx { padding: 12px 14px; border-radius: 12px; }
  .dashboard-fx strong { font-size: 17px; }
  .dashboard-money-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .cashback-overview-card > header { align-items: stretch; flex-direction: column; padding: 16px; }
  .cashback-total { min-width: 0; text-align: left; }
  .cashback-card-grid { padding: 8px; }
  .money-balance-card { min-height: 166px; padding: 12px; border-radius: 12px; }
  .money-balance-card.is-total { grid-column: 1 / -1; min-height: 178px; }
  .money-balance-card[data-money-card="debt"] { grid-column: 1 / -1; min-height: 160px; }
  .money-balance-card > header span { font-size: 11px; }
  .money-balance-card > header small { font-size: 8px; }
  .money-balance-mark { width: 26px; height: 26px; }
  .money-balance-usd { margin-top: 15px; font-size: clamp(17px, 5.8vw, 24px); }
  .money-balance-card.is-total .money-balance-usd,
  .money-balance-card[data-money-card="debt"] .money-balance-usd { font-size: clamp(24px, 8vw, 31px); }
  .money-balance-rub { min-height: 16px; margin-top: 3px; font-size: 10px; }
  .money-balance-groups { gap: 5px; padding-top: 12px; }
  .money-balance-groups > div { padding-top: 6px; }
  .money-balance-groups dt { font-size: 8px; }
  .money-balance-groups dd { font-size: 10px; }
  .money-history-card { border-radius: 14px; }
  .money-history-header { display: grid; gap: 12px; padding: 16px 14px 6px; }
  .money-history-header h2 { font-size: 19px; }
  .money-history-header p { font-size: 10px; }
  .money-history-zoom { justify-self: start; }
  .money-history-zoom { grid-template-columns: 44px minmax(88px, auto) 44px; }
  .money-history-zoom button { width: 44px; height: 42px; }
  .money-history-chart { height: 250px; margin: 0; }
  .money-history-footer { align-items: flex-start; flex-direction: column; padding: 8px 14px 14px; }
  .tax-overview { gap: 8px; margin-top: 12px; }
  .tax-overview-header { gap: 11px; margin-top: 8px; }
  .tax-overview-header h2 { font-size: 20px; }
  .tax-overview-header p { font-size: 10px; }
  .tax-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .tax-summary-card { min-height: 104px; padding: 11px; border-radius: 12px; }
  .tax-summary-card.is-total { grid-column: 1 / -1; min-height: 112px; }
  .tax-summary-card.is-scorp { grid-column: auto; background: var(--surface); }
  .tax-summary-card > span { font-size: 8px; }
  .tax-summary-card strong { margin-top: 11px; font-size: 20px; }
  .tax-summary-card.is-total strong { font-size: 27px; }
  .tax-summary-card small { font-size: 8px; }
  .tax-calculation-card, .tax-activity-card { border-radius: 12px; }
  .tax-calculation-card > summary { min-height: 58px; padding: 10px 12px; }
  .tax-calculation-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tax-calculation-list > div { padding: 10px 12px; }
  .tax-calculation-list > div:nth-child(even) { border-right: 0; }
  .tax-calculation-list > div:last-child { grid-column: 1 / -1; }
  .tax-activity-grid { grid-template-columns: 1fr; gap: 6px; }
  .tax-activity-card > summary { min-height: 62px; padding: 10px 12px; }
  .tax-activity-split { grid-template-columns: 1fr; }
  .tax-activity-split > section + section { border-top: 1px solid var(--border); border-left: 0; }
  .tax-settings-modal { padding: 0; place-items: end center; }
  .tax-settings-panel { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; transform: translateY(100%); }
  .tax-settings-modal.is-open .tax-settings-panel { transform: translateY(0); }
  .tax-settings-header { padding: 15px 14px 11px; }
  .tax-settings-header h2 { font-size: 20px; }
  .tax-settings-header .icon-button { width: 44px; height: 44px; }
  .tax-deduction-grid { grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; }
  .tax-deduction-grid .input-with-prefix, .tax-deduction-grid .input-with-prefix input { min-height: 48px; }
  .tax-bracket-sections { gap: 9px; padding: 0 14px 12px; }
  .tax-bracket-section > header { align-items: flex-start; flex-direction: column; }
  .tax-bracket-section > header .button { width: 100%; min-height: 44px; }
  .tax-bracket-table-head { display: none; }
  .tax-bracket-row { grid-template-columns: repeat(3, minmax(0, 1fr)) 44px; gap: 4px; padding: 7px; }
  .tax-bracket-row label { display: grid; gap: 2px; }
  .tax-bracket-row label::before { content: attr(data-mobile-label); color: var(--text-muted); font-size: 8px; font-weight: 700; }
  .tax-bracket-row input { height: 44px; font-size: 10px; }
  .tax-rate-field span { bottom: 12px; }
  .tax-bracket-remove { width: 44px; height: 44px; align-self: end; }
  .tax-settings-feedback { padding: 8px 14px; }
  .tax-settings-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 9px 14px calc(9px + env(safe-area-inset-bottom)); }
  .tax-settings-actions .button { width: 100%; min-height: 46px; }
  .compliance-calendar { gap: 8px; margin-top: 14px; }
  .compliance-calendar-header { display: grid; gap: 11px; margin-top: 8px; }
  .compliance-calendar-header h2 { font-size: 20px; }
  .compliance-calendar-header p { font-size: 10px; }
  .compliance-calendar-actions { display: grid; grid-template-columns: minmax(92px, 0.55fr) minmax(0, 1fr); }
  .compliance-calendar-actions .button { min-height: 44px; }
  .compliance-summary { gap: 5px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; }
  .compliance-summary::-webkit-scrollbar { display: none; }
  .compliance-summary-item { min-height: 31px; flex: 0 0 auto; padding: 5px 8px; }
  .compliance-event-list { display: grid; gap: 6px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .compliance-event { grid-template-columns: 52px minmax(0, 1fr); min-height: 0; gap: 10px; padding: 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); }
  .compliance-event + .compliance-event { border-top: 1px solid var(--border); }
  .compliance-event::before { top: 10px; bottom: 10px; }
  .compliance-event-date { width: 48px; min-height: 60px; border-radius: 10px; }
  .compliance-event-date strong { font-size: 17px; }
  .compliance-event-body { gap: 3px; }
  .compliance-event-body h3 { font-size: 11px; }
  .compliance-event-body p { display: -webkit-box; overflow: hidden; font-size: 9px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .compliance-event-controls { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 8px; }
  .compliance-status-badge { min-width: 92px; }
  .compliance-complete-button, .compliance-event-controls .button { min-width: 104px; min-height: 38px; }
  .compliance-notes p { font-size: 8px; }
  .compliance-settings-modal { padding: 0; place-items: end center; }
  .compliance-settings-panel { width: 100%; max-height: 100dvh; overflow-y: auto; border-radius: 20px 20px 0 0; transform: translateY(100%); }
  .compliance-settings-modal.is-open .compliance-settings-panel { transform: translateY(0); }
  .compliance-settings-header { padding: 15px 14px 11px; }
  .compliance-settings-header h2 { font-size: 20px; }
  .compliance-settings-header .icon-button { width: 44px; height: 44px; }
  .compliance-settings-panel form { gap: 8px; padding: 12px 14px 0; }
  .compliance-date-field input { min-height: 48px; }
  .compliance-setting-check { min-height: 62px; }
  .compliance-settings-feedback, .compliance-settings-actions { margin-right: -14px; margin-left: -14px; }
  .compliance-settings-feedback { padding: 8px 14px; }
  .compliance-settings-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 9px 14px calc(9px + env(safe-area-inset-bottom)); }
  .compliance-settings-actions .button { width: 100%; min-height: 46px; }
  .empty-module-grid, .color-grid, .layout-grid, .form-specimen, .token-table { grid-template-columns: 1fr; }
  .empty-module { min-height: 130px; }
  .usage-note, .type-row { grid-template-columns: 1fr; gap: 8px; }
  .type-row { padding: 18px; }
  .brand-rules, .component-card, .form-specimen { padding: 20px; }
  .color-swatch { height: 90px; }
  .table-wrap { display: none; }
  .mobile-transaction-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 16px; }
  .mobile-transaction-card > div { display: grid; gap: 5px; }
  .mobile-transaction-card small { color: var(--text-muted); }
  .mobile-transaction-card .badge { margin-left: auto; }
  .token-table > div:nth-child(odd) { border-right: 0; }
  .transaction-mobile-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .transaction-action-grid { grid-template-columns: 1fr; }
  .transaction-modal { align-items: end; }
  .transaction-modal-panel { width: 100%; height: min(82vh, 680px); padding: 22px 18px calc(24px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; transform: translateY(102%); }
  .transaction-modal.is-open .transaction-modal-panel { transform: translateY(0); }
  .transaction-detail-list > div { grid-template-columns: 104px minmax(0, 1fr); gap: 10px; }
  .allocation-link-modal { padding: 0; place-items: end center; }
  .allocation-link-panel { width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; }
  .allocation-link-panel > header { padding: 16px; }
  .allocation-link-transaction { padding: 10px 16px; }
  .allocation-link-period-field, .allocation-link-panel fieldset { padding-right: 16px; padding-left: 16px; }
  .allocation-link-list { max-height: none; }
  .allocation-link-panel form > footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
  .allocation-link-panel form > footer .button { width: 100%; }
  .receipt-viewer-modal { padding: 0; }
  .receipt-viewer-panel { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .receipt-viewer-toolbar { min-height: 48px; padding: 6px 8px; }
  .receipt-viewer-toolbar label { flex: 1; }
  .receipt-viewer-toolbar select { min-width: 0; width: 100%; }
  .receipt-viewer-actions { display: grid; min-height: 62px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
  .receipt-viewer-actions > span { display: none; }
  .receipt-viewer-actions .button { width: 100%; min-height: 42px; padding: 8px 10px; font-size: 11px; }
  .receipt-viewer-actions [data-receipt-viewer-open] { grid-column: 1 / -1; }
  .receipt-viewer-actions [data-receipt-viewer-delete] { grid-column: 1 / -1; }
  .receipt-editor-modal { padding: 0; }
  .receipt-editor-panel { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .receipt-editor-header { min-height: 60px; padding: 9px 12px; }
  .receipt-editor-header h2 { font-size: 17px; }
  .receipt-transaction-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .receipt-transaction-summary > div { padding: 7px 9px; }
  .receipt-transaction-summary > div:last-child { grid-column: 1 / -1; }
  .receipt-editor-tools { min-height: 46px; padding: 6px 8px; }
  .receipt-editor-tools > p { max-width: 52%; font-size: 9px; line-height: 1.25; }
  .receipt-editor-tools .button { min-height: 34px; padding: 5px 7px; font-size: 10px; }
  .receipt-image-scroll, .receipt-preview-scroll { padding: 14px; }
  .receipt-editor-actions { min-height: 62px; padding: 8px; }
  .receipt-editor-actions .button { min-height: 42px; padding: 8px 11px; font-size: 11px; }
  .receipt-preview-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receipt-preview-actions .button { width: 100%; }
  .receipt-preview-actions .button:nth-child(3) { margin-left: 0; }
  .receipt-quality-tools { display: grid; gap: 5px; }
  .receipt-quality-tools label { width: 100%; min-width: 0; grid-template-columns: auto minmax(80px, 1fr) 38px; }
  .receipt-quality-tools > p { justify-items: start; }
  .receipt-match-panel { max-height: min(310px, 40dvh); }
  .receipt-match-heading { display: grid; gap: 7px; padding: 7px 8px; }
  .receipt-match-search { width: 100%; flex-basis: auto; }
  .receipt-match-search input { height: 40px; }
  .receipt-match-candidate-main { grid-template-columns: 58px 76px minmax(0, 1fr); gap: 6px; padding: 7px; }
  .receipt-match-candidate-main .receipt-match-account { grid-column: 1 / 3; }
  .receipt-match-candidate-main .receipt-match-score { grid-column: 3; grid-row: 2; }
  .receipt-match-candidate > .button { min-width: 62px; padding-right: 8px; padding-left: 8px; }
  .receipt-editor-feedback { padding: 5px 8px; }
  .delete-confirmation-panel { padding: 24px 20px; }
  .delete-confirmation-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* Invoices · Mo. Times */
.invoice-times { display: grid; gap: 14px; }
.invoice-times-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.invoice-times-header h2 { margin-bottom: 5px; font-size: clamp(28px, 4vw, 38px); }
.invoice-times-header p { max-width: 560px; }
.invoice-times-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.invoice-times-actions .button { white-space: nowrap; }
.time-delete-period-button { color: var(--danger); }
.time-delete-period-button .trash-icon { width: 14px; height: 14px; }
.time-period-picker { position: relative; }
.invoice-times-status { display: flex; min-height: 28px; align-items: center; justify-content: flex-end; gap: 7px; color: #007a1e; font-size: 12px; font-weight: 650; }
.invoice-times-status .status-dot { width: 7px; height: 7px; background: var(--success); }
.invoice-times-status.is-saving { color: var(--text-muted); }
.invoice-times-status.is-saving .status-dot { background: var(--warning); }
.invoice-times-status.is-error { color: var(--danger); }
.invoice-times-status.is-error .status-dot { background: var(--danger); }
.invoice-times-loading, .invoice-times-empty { display: grid; min-height: 360px; place-items: center; align-content: center; gap: 8px; padding: 36px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); text-align: center; box-shadow: var(--shadow-card); }
.invoice-times-loading > span, .invoice-times-empty > span { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; background: rgba(255, 221, 45, 0.35); font-size: 28px; }
.invoice-times-empty h2 { margin: 8px 0 0; }
.invoice-times-empty[hidden], .invoice-times-loading[hidden], .invoice-times-content[hidden] { display: none; }
.invoice-times-content { display: grid; gap: 14px; }
.time-period-overview { display: grid; grid-template-columns: minmax(230px, 0.9fr) minmax(0, 2.1fr); gap: 10px; }
.time-period-total-card, .time-week-card { display: grid; min-height: 142px; align-content: space-between; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.time-period-total-card { border-color: rgba(217, 180, 0, 0.45); background: linear-gradient(135deg, #fff7c8, var(--primary)); }
.time-period-total-card > span, .time-week-card header span { color: var(--text-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.time-period-total-card strong, .time-week-card strong { font-size: clamp(23px, 3vw, 30px); font-variant-numeric: tabular-nums; letter-spacing: -0.035em; }
.time-period-total-card small { color: rgba(0, 0, 0, 0.65); font-size: 17px; font-weight: 700; }
.time-week-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.time-week-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.time-week-card header small { color: var(--text-muted); font-size: 11px; }
.time-week-card p { color: var(--text); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.time-entry-card, .invoice-text-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.time-entry-card > header, .invoice-text-card > header { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.time-entry-card > header h2, .invoice-text-card > header h2 { margin-bottom: 2px; font-size: 20px; }
.time-entry-card > header p { font-size: 12px; }
.time-entry-table-wrap { overflow-x: auto; }
.time-entry-table { width: 100%; border-collapse: collapse; }
.time-entry-table th, .time-entry-table td { height: 62px; padding: 9px 18px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.time-entry-table th { height: 46px; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.time-entry-table tbody tr:last-child td { border-bottom: 0; }
.time-entry-table tbody tr.is-today { background: rgba(255, 221, 45, 0.12); box-shadow: inset 3px 0 0 var(--primary); }
.time-entry-table time { font-size: 13px; font-weight: 650; white-space: nowrap; }
.time-autofill-column { width: 112px; }
.time-autofill-button { display: inline-flex; width: 78px; min-height: 36px; align-items: center; justify-content: center; gap: 5px; padding: 5px 9px; border: 1px solid var(--primary-hover); border-radius: 9px; background: var(--primary); color: var(--text); cursor: pointer; box-shadow: 0 2px 7px rgba(0, 16, 36, 0.07); }
.time-autofill-button:hover { border-color: #d7b900; background: var(--primary-hover); }
.time-autofill-button .time-autofill-icon { color: var(--success); font-size: 17px; font-weight: 950; line-height: 1; }
.time-autofill-button small { color: var(--text); font-size: 11px; font-weight: 850; white-space: nowrap; }
.time-inline-input { width: 112px; height: 38px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; appearance: textfield; background: rgba(180, 183, 200, 0.12); color: var(--text); font-variant-numeric: tabular-nums; }
.time-inline-input::-webkit-inner-spin-button, .time-inline-input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.time-inline-input:hover { border-color: var(--border); }
.time-inline-input:focus { border-color: var(--link); background: var(--surface); }
.time-rate-control { display: inline-grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; width: 112px; height: 38px; padding-left: 9px; border: 1px solid transparent; border-radius: 9px; background: rgba(180, 183, 200, 0.12); }
.time-rate-control > span:first-child { color: var(--text-muted); font-size: 12px; }
.time-rate-control .time-inline-input { width: 100%; padding-left: 0; border: 0; background: transparent; }
.time-rate-control:focus-within { border-color: var(--link); background: var(--surface); box-shadow: var(--focus-ring); }
.time-rate-control .time-inline-input:focus { box-shadow: none; }
.time-day-total { font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.time-entry-mobile-list { display: none; }
.invoice-text-card > header .page-kicker { display: block; margin-bottom: 2px; }
.invoice-text-card pre { min-height: 260px; margin: 0; padding: 24px; overflow: auto; background: #fbfbfc; color: var(--text); font: 500 13px/1.75 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; }
.time-calendar-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 32; width: min(332px, calc(100vw - 28px)); padding: 12px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); box-shadow: 0 18px 54px rgba(0, 16, 36, 0.18); }
.time-calendar-popover[hidden] { display: none; }
.time-calendar-popover > header { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; margin-bottom: 7px; }
.time-calendar-popover > header strong { text-align: center; }
.time-calendar-popover > header .icon-button { width: 38px; height: 38px; }
.time-calendar-weekdays, .time-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.time-calendar-weekdays span { padding: 5px 0; color: var(--text-muted); font-size: 9px; font-weight: 800; text-align: center; }
.time-calendar-grid { gap: 3px; }
.time-calendar-grid button, .time-calendar-spacer { width: 38px; height: 38px; }
.time-calendar-grid button { position: relative; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 11px; }
.time-calendar-grid button:hover { background: var(--surface-soft); color: var(--text); }
.time-calendar-grid button.has-period { color: var(--text); font-weight: 700; }
.time-calendar-grid button.period-color-1 { background: #fff4c7; }
.time-calendar-grid button.period-color-2 { background: #ffe8d8; }
.time-calendar-grid button.period-color-3 { background: #e4f3e5; }
.time-calendar-grid button.period-color-4 { background: #f2e7f5; }
.time-calendar-grid button.period-color-5 { background: #f8e5ea; }
.time-calendar-grid button.is-selected-period { font-weight: 800; }
.time-calendar-grid button.is-today::after { content: ""; position: absolute; right: 50%; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--link); transform: translateX(50%); }
.time-calendar-popover > p { margin-top: 9px; font-size: 10px; text-align: center; }
.time-create-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; }
.time-create-modal[hidden] { display: none; }
.time-dialog-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0, 0, 0, 0.38); opacity: 0; transition: opacity 180ms ease; }
.time-create-panel { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 40px); overflow: auto; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: 0 24px 80px rgba(0, 16, 36, 0.22); opacity: 0; transform: translateY(12px); transition: opacity 180ms ease, transform 180ms ease; }
.time-create-modal.is-open .time-dialog-backdrop, .time-create-modal.is-open .time-create-panel { opacity: 1; }
.time-create-modal.is-open .time-create-panel { transform: translateY(0); }
.time-create-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px 14px; border-bottom: 1px solid var(--border); }
.time-create-panel > header h2 { margin: 0; font-size: 22px; }
.time-create-suggestion { margin: 18px 22px 0; padding: 13px 14px; border-radius: 10px; background: rgba(255, 221, 45, 0.2); font-size: 12px; }
.time-create-panel form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 18px 22px 22px; }
.time-create-panel .field input { min-height: 50px; }
.time-create-feedback { grid-column: 1 / -1; min-height: 20px; color: var(--danger); font-size: 11px; }
.time-dialog-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 8px; }
.time-settings-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; }
.time-settings-modal[hidden] { display: none; }
.time-settings-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0, 0, 0, 0.38); opacity: 0; transition: opacity 180ms ease; }
.time-settings-panel { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 40px); overflow: auto; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: 0 24px 80px rgba(0, 16, 36, 0.22); opacity: 0; transform: translateY(12px); transition: opacity 180ms ease, transform 180ms ease; }
.time-settings-modal.is-open .time-settings-backdrop, .time-settings-modal.is-open .time-settings-panel { opacity: 1; }
.time-settings-modal.is-open .time-settings-panel { transform: translateY(0); }
.time-settings-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px 14px; border-bottom: 1px solid var(--border); }
.time-settings-panel > header h2 { margin: 0; font-size: 22px; }
.time-settings-note { margin: 18px 22px 0; padding: 12px 13px; border-radius: 10px; background: rgba(66, 139, 249, 0.09); font-size: 12px; }
.time-settings-panel form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 18px 22px 22px; }
.time-settings-panel .field input, .time-settings-panel .input-with-prefix { min-height: 48px; }
.time-settings-feedback { grid-column: 1 / -1; min-height: 20px; color: var(--text-muted); font-size: 11px; }
.time-settings-form-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 8px; }
.time-delete-summary { margin: 0 0 18px; padding: 11px 12px; border-radius: 10px; background: var(--surface-soft); font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; text-align: center; }

@media (max-width: 860px) {
  .invoice-times-header { align-items: stretch; flex-direction: column; gap: 14px; }
  .invoice-times-actions { justify-content: flex-start; flex-wrap: wrap; }
  .invoice-times-status { justify-content: flex-start; }
  .time-period-overview { grid-template-columns: 1fr; }
  .time-period-total-card { min-height: 126px; }
}

@media (max-width: 700px) {
  .invoice-times { gap: 8px; }
  .invoice-times-header h2 { font-size: 25px; }
  .invoice-times-header p { font-size: 11px; }
  .invoice-times-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .invoice-times-actions > .button:first-child { grid-column: 1 / -1; }
  .invoice-times-actions .time-delete-period-button { grid-column: 1 / -1; }
  .invoice-times-actions .button, .time-period-picker, .time-period-picker > .button { width: 100%; min-width: 0; }
  .time-calendar-popover { position: fixed; top: 50%; right: 14px; left: 14px; width: auto; transform: translateY(-50%); }
  .time-calendar-grid button, .time-calendar-spacer { width: 100%; height: 40px; }
  .time-week-summary { gap: 6px; }
  .time-period-total-card, .time-week-card { min-height: 108px; padding: 12px; border-radius: 12px; }
  .time-period-total-card strong, .time-week-card strong { font-size: 19px; }
  .time-period-total-card small, .time-week-card p { font-size: 13px; }
  .time-week-card header { display: grid; gap: 1px; }
  .time-week-card header small { font-size: 8px; }
  .time-entry-card, .invoice-text-card { border-radius: 12px; }
  .time-entry-card > header, .invoice-text-card > header { min-height: 62px; padding: 11px 12px; }
  .time-entry-card > header h2, .invoice-text-card > header h2 { font-size: 17px; }
  .time-entry-table-wrap { display: none; }
  .time-entry-mobile-list { display: grid; gap: 6px; padding: 7px; background: var(--background); }
  .time-entry-mobile-card { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
  .time-entry-mobile-card.is-today { border-color: rgba(217, 180, 0, 0.5); background: rgba(255, 221, 45, 0.1); }
  .time-entry-mobile-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .time-entry-mobile-card time { font-size: 11px; font-weight: 750; }
  .time-entry-mobile-card > header strong { font-size: 14px; font-variant-numeric: tabular-nums; }
  .time-entry-mobile-controls { display: grid; grid-template-columns: 70px repeat(2, minmax(0, 1fr)); gap: 6px; }
  .time-entry-mobile-controls > label { display: grid; min-width: 0; gap: 2px; }
  .time-entry-mobile-controls > label > span:first-child { color: var(--text-muted); font-size: 8px; font-weight: 750; }
  .time-entry-mobile-card .time-autofill-button { width: 78px; min-height: 34px; align-self: end; }
  .time-entry-mobile-card .time-inline-input, .time-entry-mobile-card .time-rate-control { width: 100%; height: 34px; min-width: 0; }
  .time-entry-mobile-card .time-rate-control { grid-template-columns: 14px minmax(0, 1fr); padding-left: 7px; }
  .invoice-text-card pre { min-height: 230px; padding: 15px 12px; font-size: 10px; line-height: 1.7; }
  .time-settings-modal { padding: 0; place-items: end center; }
  .time-settings-panel { width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; transform: translateY(100%); }
  .time-settings-panel > header { padding: 15px 14px 11px; }
  .time-settings-panel > header h2 { font-size: 19px; }
  .time-settings-note { margin: 12px 14px 0; font-size: 10px; }
  .time-settings-panel form { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
  .time-settings-feedback, .time-settings-form-actions { grid-column: 1; }
  .time-settings-form-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-settings-form-actions .button { width: 100%; }
  .time-create-modal { padding: 0; place-items: end center; }
  .time-create-panel { width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; transform: translateY(100%); }
  .time-create-panel > header { padding: 15px 14px 11px; }
  .time-create-panel > header h2 { font-size: 19px; }
  .time-create-suggestion { margin: 12px 14px 0; font-size: 10px; }
  .time-create-panel form { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
  .time-create-feedback, .time-dialog-actions { grid-column: 1; }
  .time-dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-dialog-actions .button { width: 100%; }
}

/* Clients, jobs, purchases, payments, and invoices */
.client-crm { position: relative; }
.client-crm-toolbar .page-kicker { margin-bottom: 3px; }
.client-crm-filters { align-items: center; }
.client-crm-table { min-width: 1090px; table-layout: auto; }
.client-crm-table th, .client-crm-table td { height: 58px; min-height: 58px; padding: 7px 10px; font-size: 11px; }
.client-crm-table .selection-column { width: 44px; }
.client-crm-table th:nth-child(2), .client-crm-table td:nth-child(2) { width: 58px; }
.client-crm-table th:nth-child(3), .client-crm-table td:nth-child(3) { min-width: 160px; }
.client-crm-table th:nth-child(4), .client-crm-table td:nth-child(4) { min-width: 118px; }
.client-crm-table th:nth-child(5), .client-crm-table td:nth-child(5) { min-width: 230px; max-width: 340px; }
.client-crm-table th:nth-child(6), .client-crm-table td:nth-child(6) { width: 64px; text-align: center; }
.client-crm-table th:nth-child(7), .client-crm-table td:nth-child(7) { width: 112px; text-align: right; }
.client-lifetime-value { font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.client-address-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-name-link { max-width: 100%; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--text); cursor: pointer; font: inherit; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.client-name-link:hover { color: var(--link); text-decoration: underline; }
.client-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.client-open-button { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; font-size: 20px; }
.client-open-button:hover { border-color: #b9bec4; background: var(--surface-soft); }
.client-status-pill { display: inline-flex; min-height: 24px; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 9px; font-weight: 750; white-space: nowrap; }
.client-status-pill.is-unknown { background: #f0f1f3; color: #65696f; }
.client-status-pill.is-due { background: rgba(217, 74, 74, 0.1); color: var(--danger); }
.client-status-pill.is-clear { background: rgba(0, 185, 45, 0.09); color: #08783e; }
.client-mobile-top { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 5px; }
.client-mobile-top > button:not(.delete-button):not(.client-open-button) { display: grid; min-width: 0; gap: 1px; padding: 0; border: 0; background: transparent; color: var(--text); text-align: left; }
.client-mobile-top strong, .client-mobile-top small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-mobile-top small { color: var(--text-muted); font-size: 8px; }
.client-mobile-top strong { font-size: 13px; }
.client-mobile-meta { display: flex; flex-wrap: wrap; gap: 4px 9px; color: var(--text-muted); font-size: 9px; }
.client-mobile-card > p { margin: 0; overflow: hidden; color: var(--text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

body.has-client-overlay { overflow: hidden; }
.client-drawer[hidden], .client-modal[hidden] { display: none; }
.client-drawer { position: fixed; inset: 0; z-index: 96; }
.client-drawer-backdrop, .client-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0, 16, 36, 0.4); opacity: 0; transition: opacity 180ms ease; backdrop-filter: blur(3px); }
.client-drawer-panel { position: absolute; top: 0; right: 0; display: grid; width: min(720px, calc(100vw - 56px)); height: 100dvh; max-height: 100dvh; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-left: 1px solid var(--border); background: var(--background); box-shadow: -22px 0 70px rgba(0, 16, 36, 0.18); outline: 0; transform: translateX(100%); transition: transform 200ms ease; }
.client-drawer.is-open .client-drawer-backdrop, .client-modal.is-open .client-modal-backdrop { opacity: 1; }
.client-drawer.is-open .client-drawer-panel { transform: translateX(0); }
.client-drawer-header { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--border); background: var(--surface); }
.client-drawer-header h2 { margin: 2px 0 0; font-size: 22px; }
.client-drawer-scroll { display: grid; height: 100%; max-height: 100%; grid-auto-rows: max-content; align-content: start; gap: 10px; min-height: 0; padding: 12px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.client-detail-card { overflow: hidden; padding: 15px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 4px 16px rgba(0, 16, 36, 0.035); }
.client-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.client-section-heading > div { display: grid; gap: 2px; }
.client-section-heading span { color: var(--text-muted); font-size: 8px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.client-section-heading h3 { margin: 0; font-size: 16px; }
.client-field, .client-inline-form label, .client-form-grid label { display: grid; min-width: 0; gap: 5px; color: var(--text-muted); font-size: 9px; font-weight: 750; }
.client-form-grid label > small, .client-work-type-field > small, .client-check-field-help small { color: var(--text-muted); font-size: 8px; font-weight: 500; line-height: 1.35; }
.client-field input, .client-inline-form input, .client-form-grid input, .client-form-grid select, .client-form-grid textarea { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; outline: 0; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; font-weight: 500; }
.client-form-grid textarea { resize: vertical; }
.client-field input:focus, .client-inline-form input:focus, .client-form-grid input:focus, .client-form-grid select:focus, .client-form-grid textarea:focus { border-color: var(--link); box-shadow: var(--focus-ring); }
.client-record-list { display: grid; gap: 5px; }
.client-record { display: flex; min-width: 0; min-height: 48px; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-soft); }
.client-record > div { display: grid; min-width: 0; gap: 2px; }
.client-record strong, .client-record span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-record strong { font-size: 11px; }
.client-record span { color: var(--text-muted); font-size: 9px; }
.client-record.is-archived { opacity: 0.58; }
.client-record .is-restore { color: var(--success); }
.client-record > .client-record-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.client-record-actions .icon-button { width: 34px; height: 34px; color: var(--link); }
.client-record-actions .icon-button svg { width: 18px; height: 18px; }
.client-address-field { position: relative; }
.client-address-suggestions { display: grid; overflow: hidden; margin-top: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-soft); }
.client-address-suggestions[hidden] { display: none; }
.client-address-suggestions button { display: grid; gap: 2px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.client-address-suggestions button:hover, .client-address-suggestions button:focus-visible { background: var(--surface-soft); }
.client-address-suggestions button strong { font-size: 12px; font-weight: 500; }
.client-address-suggestions button span { color: var(--text-muted); font-size: 10px; }
.client-google-maps-attribution { padding: 8px 12px; color: #5e5e5e; font-family: Roboto, sans-serif; font-size: 12px; font-style: normal; font-weight: 400; letter-spacing: normal; white-space: nowrap; }
.client-delete-job { color: var(--danger); }
.client-inline-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(110px, 1fr) auto; align-items: end; gap: 8px; margin-top: 8px; padding: 10px; border: 1px dashed #c7cbd0; border-radius: 11px; }
.client-inline-form[hidden] { display: none; }
.client-inline-form > div { display: flex; gap: 5px; }
.client-check-field { display: flex !important; min-height: 40px; align-items: center; gap: 7px !important; padding: 7px 0; }
.client-check-field input { width: 18px !important; min-height: 18px !important; flex: 0 0 auto; accent-color: var(--primary-hover); }
.client-check-field-help > span { display: grid; gap: 2px; }
.client-check-field-help strong { color: var(--text); font-size: 9px; }
.client-expense-billable-row { min-height: 44px; padding: 9px 10px; border-radius: 9px; background: var(--surface-soft); }
.client-empty-inline, .client-empty-jobs { margin: 0; padding: 15px; border-radius: 10px; background: var(--surface-soft); color: var(--text-muted); font-size: 10px; text-align: center; }
.client-empty-jobs strong { display: block; color: var(--text); font-size: 13px; }
.client-empty-jobs p { margin: 4px 0 0; }
.client-job-list { display: grid; gap: 8px; }
.client-job-card { display: grid; gap: 9px; padding: 13px; border: 1px solid var(--border); border-radius: 13px; background: #fcfcfd; }
.client-job-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.client-job-card > header > div { display: grid; min-width: 0; gap: 2px; }
.client-job-card > header span { color: var(--text-muted); font-size: 9px; font-weight: 700; }
.client-job-card > header h4 { margin: 0; font-size: 14px; }
.client-job-card > header > strong { font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.client-job-card > p { margin: 0; color: var(--text); font-size: 11px; line-height: 1.45; }
.client-job-card address { color: var(--text-muted); font-size: 9px; font-style: normal; }
.client-job-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.client-job-tags span { padding: 4px 7px; border-radius: 999px; background: #eef0f2; color: var(--text-muted); font-size: 8px; font-weight: 750; }
.client-job-tags .is-completed, .client-job-tags .is-paid { background: rgba(0, 185, 45, 0.09); color: #08783e; }
.client-job-tags .is-unpaid, .client-job-tags .is-cancelled { background: rgba(217, 74, 74, 0.09); color: var(--danger); }
.client-job-tags .is-unknown { background: #eceeef; color: #666b70; }
.client-job-card dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 0; }
.client-job-card dl > div { min-width: 0; padding: 7px; border-radius: 8px; background: var(--surface); }
.client-job-card dt { color: var(--text-muted); font-size: 7px; font-weight: 800; text-transform: uppercase; }
.client-job-card dd { overflow: hidden; margin: 2px 0 0; font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.client-job-card details { border-top: 1px solid var(--border); padding-top: 7px; }
.client-job-card summary { cursor: pointer; color: var(--text-muted); font-size: 9px; font-weight: 750; }
.client-job-card ul { display: grid; gap: 4px; margin: 7px 0 0; padding: 0; list-style: none; }
.client-job-card li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 7px; font-size: 9px; }
.client-job-card li small { color: var(--text-muted); }
.client-line-menu { position: relative; border: 0 !important; padding: 0 !important; }
.client-line-menu > summary { display: grid; width: 26px; height: 26px; place-items: center; padding: 0; border-radius: 7px; color: var(--text-muted); cursor: pointer; font-size: 9px; font-weight: 800; letter-spacing: 1px; list-style: none; }
.client-line-menu > summary::-webkit-details-marker { display: none; }
.client-line-menu > summary:hover, .client-line-menu[open] > summary { background: var(--surface-soft); color: var(--text); }
.client-line-menu > div { position: absolute; z-index: 12; top: calc(100% + 3px); right: 0; display: grid; width: 112px; padding: 4px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); box-shadow: 0 10px 28px rgba(0, 16, 36, 0.16); }
.client-line-menu button { min-height: 30px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--text); cursor: pointer; font: inherit; font-size: 9px; font-weight: 650; text-align: left; }
.client-line-menu button:hover { background: var(--surface-soft); }
.client-line-menu button.is-caution { color: var(--danger); }
.client-job-card > footer { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 2px; }

.client-modal { position: fixed; inset: 0; z-index: 102; display: grid; place-items: center; padding: 14px; }
.client-modal-panel { position: relative; width: min(600px, 100%); max-height: calc(100dvh - 28px); overflow: auto; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 28px 90px rgba(0, 16, 36, 0.25); opacity: 0; transform: translateY(12px) scale(0.985); transition: opacity 160ms ease, transform 160ms ease; }
.client-modal.is-open .client-modal-panel { opacity: 1; transform: translateY(0) scale(1); }
.client-modal-panel > header { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 17px; border-bottom: 1px solid var(--border); background: var(--surface); }
.client-modal-panel > header h2 { margin: 2px 0 0; font-size: 20px; }
.client-modal-panel form { padding: 15px 17px 17px; }
.client-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.client-field-wide { grid-column: 1 / -1; }
.client-settings-subheading { display: grid; gap: 2px; margin-top: 8px; }
.client-settings-subheading strong { color: var(--text); font-size: 16px; line-height: 1.2; }
.client-settings-subheading small { color: var(--text-muted); font-size: 10px; font-weight: 500; line-height: 1.35; }
.client-work-type-field { position: relative; display: grid; gap: 5px; color: var(--text-muted); font-size: 9px; font-weight: 750; }
.client-work-type-picker { position: relative; }
.client-work-type-picker summary { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); cursor: pointer; font-size: 11px; font-weight: 550; list-style: none; }
.client-work-type-picker summary::-webkit-details-marker { display: none; }
.client-work-type-picker summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-work-type-picker summary i { color: var(--text-muted); font-style: normal; transition: transform 140ms ease; }
.client-work-type-picker[open] summary { border-color: var(--link); box-shadow: var(--focus-ring); }
.client-work-type-picker[open] summary i { transform: rotate(180deg); }
.client-work-type-picker > .client-work-type-popover { position: absolute; z-index: 8; top: calc(100% + 5px); left: 0; display: grid; width: 100%; max-height: 290px; gap: 5px; padding: 6px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 14px 38px rgba(0, 16, 36, 0.16); }
.client-work-type-search { width: 100% !important; min-height: 36px !important; padding: 7px 9px !important; border: 1px solid var(--border) !important; border-radius: 8px; outline: 0; background: var(--surface); color: var(--text); font: inherit; font-size: 10px; }
.client-work-type-search:focus { border-color: var(--link) !important; box-shadow: var(--focus-ring); }
.client-work-type-options { display: grid; min-height: 0; gap: 2px; overflow-y: auto; }
.client-work-type-options label { display: flex; min-height: 34px; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; color: var(--text); cursor: pointer; font-size: 10px; font-weight: 550; }
.client-work-type-options label:hover { background: var(--surface-soft); }
.client-work-type-options input { width: 16px; min-height: 16px; flex: 0 0 auto; padding: 0; accent-color: var(--primary-hover); }
.client-work-type-empty { margin: 0; padding: 14px 8px; color: var(--text-muted); font-size: 9px; font-weight: 550; text-align: center; }
.client-work-type-empty[hidden] { display: none; }
.client-modal-panel form > footer, .client-form-grid footer { display: flex; justify-content: flex-end; gap: 7px; margin-top: 14px; }
.client-settings-panel { width: min(860px, 100%); }
.client-settings-scroll { display: grid; gap: 20px; padding: 17px; }
.client-settings-scroll section > h3 { margin: 0 0 3px; font-size: 16px; }
.client-settings-scroll section > p { margin: 0 0 10px; font-size: 10px; }
.client-catalog-grid { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.client-catalog-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; padding: 5px; border-bottom: 1px solid var(--border); background: var(--surface-soft); }
.client-catalog-tabs button { display: flex; min-width: 0; min-height: 42px; align-items: center; justify-content: space-between; gap: 7px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: 10px; font-weight: 700; text-align: left; }
.client-catalog-tabs button:hover { background: rgba(255, 255, 255, 0.72); color: var(--text); }
.client-catalog-tabs button.is-selected { background: var(--surface); color: var(--text); box-shadow: 0 1px 5px rgba(0, 16, 36, 0.08); }
.client-catalog-tabs button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-catalog-tabs button b, .client-catalog-view button b { display: inline-grid; min-width: 21px; min-height: 21px; place-items: center; padding: 2px 5px; border-radius: 999px; background: #e9ebee; color: var(--text-muted); font-size: 8px; }
.client-catalog-tabs button.is-selected b { background: rgba(20, 106, 220, 0.1); color: var(--link); }
.client-catalog-manager { display: grid; gap: 11px; padding: 14px; }
.client-catalog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.client-catalog-heading h4 { margin: 0; font-size: 14px; }
.client-catalog-heading p { margin: 3px 0 0 !important; color: var(--text-muted); font-size: 9px !important; }
.client-catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.client-catalog-search { display: flex; min-width: 180px; max-width: 360px; flex: 1; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text-muted); }
.client-catalog-search:focus-within { border-color: var(--link); box-shadow: var(--focus-ring); }
.client-catalog-search input { width: 100%; min-height: 38px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 10px; }
.client-catalog-view { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 3px; border-radius: 9px; background: var(--surface-soft); }
.client-catalog-view button { display: flex; min-height: 32px; align-items: center; gap: 5px; padding: 5px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: 9px; font-weight: 700; }
.client-catalog-view button.is-selected { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0, 16, 36, 0.08); }
.client-catalog-list { position: relative; max-height: 290px; min-height: 94px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.client-catalog-row { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--border); }
.client-catalog-row:last-of-type { border-bottom: 0; }
.client-catalog-row[hidden] { display: none; }
.client-catalog-row > div:first-child { display: flex; min-width: 0; align-items: center; gap: 7px; }
.client-catalog-row strong { overflow: hidden; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.client-catalog-row > div:first-child span { padding: 3px 6px; border-radius: 999px; background: var(--surface-soft); color: var(--text-muted); font-size: 7px; font-weight: 750; text-transform: uppercase; }
.client-catalog-row.is-archived strong { color: var(--text-muted); }
.client-catalog-menu { position: relative; flex: 0 0 auto; }
.client-catalog-menu summary { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 8px; color: var(--text-muted); cursor: pointer; font-size: 11px; font-weight: 800; letter-spacing: 1px; list-style: none; }
.client-catalog-menu summary::-webkit-details-marker { display: none; }
.client-catalog-menu summary:hover, .client-catalog-menu[open] summary { background: var(--surface-soft); color: var(--text); }
.client-catalog-menu > div { position: absolute; z-index: 10; top: calc(100% + 3px); right: 0; display: grid; width: 130px; padding: 4px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); box-shadow: 0 10px 30px rgba(0, 16, 36, 0.16); }
.client-catalog-row:nth-last-child(-n+3) .client-catalog-menu > div { top: auto; bottom: calc(100% + 3px); }
.client-catalog-menu button { min-height: 32px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--text); cursor: pointer; font: inherit; font-size: 9px; font-weight: 650; text-align: left; }
.client-catalog-menu button:hover { background: var(--surface-soft); }
.client-catalog-menu button.is-caution { color: #986300; }
.client-catalog-editor { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; padding: 8px; border: 1px solid rgba(20, 106, 220, 0.3); border-radius: 10px; background: rgba(20, 106, 220, 0.045); }
.client-catalog-editor input { min-width: 0; min-height: 36px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; outline: 0; background: var(--surface); color: var(--text); font: inherit; font-size: 10px; }
.client-catalog-editor input:focus { border-color: var(--link); box-shadow: var(--focus-ring); }
.client-catalog-empty { margin: 0; padding: 32px 15px; color: var(--text-muted); font-size: 10px; text-align: center; }
.client-catalog-empty[hidden] { display: none; }

.client-media-panel { width: min(900px, 100%); }
.client-media-workspace { display: grid; min-height: 410px; gap: 14px; padding: 16px 17px 20px; }
.client-photo-page-card { display: grid; gap: 13px; padding: 15px; border: 1px solid rgba(36, 129, 204, .16); border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,247,255,.92)); box-shadow: 0 9px 28px rgba(36, 88, 132, .07); }
.client-photo-page-heading { display: flex; align-items: center; gap: 11px; }
.client-photo-page-heading > div { display: grid; gap: 1px; min-width: 0; }
.client-photo-page-heading strong { font-size: 14px; font-weight: 580; letter-spacing: -.01em; }
.client-photo-page-heading small { color: var(--text-muted); font-size: 10px; }
.client-photo-page-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 12px; color: #2481cc; background: rgba(36,129,204,.11); }
.client-photo-page-icon svg { width: 22px; height: 22px; }
.client-photo-page-values { display: grid; grid-template-columns: minmax(0, 1fr) 180px; overflow: hidden; border: 1px solid rgba(60,60,67,.12); border-radius: 13px; background: rgba(255,255,255,.88); }
.client-photo-page-values > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 1px 10px; min-width: 0; padding: 10px 12px; }
.client-photo-page-values > div + div { border-left: 1px solid rgba(60,60,67,.12); }
.client-photo-page-values span { color: #8e8e93; font-size: 9px; }
.client-photo-page-values strong { min-width: 0; overflow: hidden; color: #202124; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.client-photo-page-values .client-photo-page-pin { font-size: 15px; letter-spacing: .16em; }
.client-photo-page-values button { grid-area: 1 / 2 / 3 / 3; align-self: center; min-width: 52px; height: 30px; border: 0; border-radius: 9px; color: #2481cc; background: rgba(36,129,204,.1); cursor: pointer; font-size: 9px; font-weight: 560; }
.client-photo-page-values button b { display: none; color: #20a64a; font-size: 14px; font-weight: 500; }
.client-photo-page-values button.is-copied span { display: none; }
.client-photo-page-values button.is-copied b { display: inline; }
.client-photo-page-actions { display: flex; justify-content: flex-end; gap: 8px; }
.client-photo-page-actions button { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; padding: 0 11px; border: 0; border-radius: 10px; color: #2481cc; background: rgba(36,129,204,.09); cursor: pointer; font-size: 9px; font-weight: 550; }
.client-photo-page-actions button.is-destructive { color: #d34850; background: rgba(211,72,80,.08); }
.client-photo-page-card.is-loading { opacity: .62; }
.client-photo-page-card button:disabled { cursor: default; opacity: .45; }
.client-media-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 4px; border-radius: 12px; background: var(--surface-soft); }
.client-media-tabs button { display: flex; min-width: 0; min-height: 40px; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: 10px; font-weight: 650; }
.client-media-tabs button.is-selected { background: var(--surface); color: var(--link); box-shadow: 0 1px 5px rgba(0, 16, 36, 0.09); }
.client-media-tabs b { display: grid; min-width: 20px; min-height: 20px; place-items: center; border-radius: 999px; background: rgba(20, 106, 220, 0.08); font-size: 8px; }
.client-media-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.client-media-toolbar > div { display: grid; gap: 2px; }
.client-media-toolbar strong { font-size: 15px; font-weight: 650; }
.client-media-toolbar small { color: var(--text-muted); font-size: 9px; }
.client-media-upload-button { position: relative; overflow: hidden; cursor: pointer; }
.client-media-upload-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.client-media-progress { display: flex; min-height: 38px; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 10px; background: rgba(20, 106, 220, 0.07); color: var(--link); font-size: 10px; font-weight: 650; }
.client-media-progress[hidden],
.client-media-empty[hidden] { display: none; }
.client-media-message { min-height: 16px; margin: -6px 0 0; color: var(--text-muted); font-size: 9px; }
.client-media-spinner { display: inline-block; width: 17px; height: 17px; flex: 0 0 auto; border: 1.5px solid rgba(20, 106, 220, 0.2); border-top-color: var(--link); border-radius: 50%; animation: client-media-spin 680ms linear infinite; }
@keyframes client-media-spin { to { transform: rotate(360deg); } }
.client-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 10px; }
.client-media-item { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.client-media-item > button { display: grid; width: 100%; gap: 0; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.client-media-item > button:hover .client-media-thumbnail img { transform: scale(1.025); }
.client-media-thumbnail { position: relative; display: grid; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; background: #e9ebef; }
.client-media-thumbnail img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.01); transition: opacity 160ms ease, transform 180ms ease; }
.client-media-thumbnail.is-loaded img { opacity: 1; }
.client-media-thumbnail-loading { position: absolute; inset: 0; display: grid; place-items: center; }
.client-media-thumbnail.is-loaded .client-media-thumbnail-loading { display: none; }
.client-media-video-mark { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #2aabef, #168acd); color: #fff; font-size: 16px; box-shadow: 0 8px 24px rgba(22, 138, 205, 0.25); }
.client-media-item-copy { display: grid; min-width: 0; gap: 2px; padding: 9px 10px 10px; }
.client-media-item-copy strong { overflow: hidden; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.client-media-item-copy small { color: var(--text-muted); font-size: 8px; }
.client-media-empty { display: grid; min-height: 230px; place-items: center; align-content: center; gap: 5px; color: var(--text-muted); text-align: center; }
.client-media-empty > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: rgba(42, 171, 239, 0.11); color: #168acd; font-size: 25px; }
.client-media-empty strong { margin-top: 4px; color: var(--text); font-size: 13px; font-weight: 650; }
.client-media-empty p { margin: 0; font-size: 9px; }
.client-media-viewer { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; padding: 18px; opacity: 0; transition: opacity 160ms ease; }
.client-media-viewer.is-open { opacity: 1; }
.client-media-viewer[hidden] { display: none; }
.client-media-viewer-backdrop { position: absolute; inset: 0; border: 0; background: rgba(8, 16, 28, 0.82); backdrop-filter: blur(12px); }
.client-media-viewer > section { position: relative; display: grid; width: min(1100px, 100%); height: min(820px, calc(100dvh - 36px)); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid rgba(255,255,255,0.15); border-radius: 18px; background: #111820; color: #fff; box-shadow: 0 28px 90px rgba(0,0,0,0.38); }
.client-media-viewer > section > header, .client-media-viewer > section > footer { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: rgba(17, 24, 32, 0.94); }
.client-media-viewer > section > header strong { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.client-media-viewer > section > header .icon-button { color: #fff; }
.client-media-viewer > section > footer { min-height: 50px; color: rgba(255,255,255,0.68); font-size: 10px; }
.client-media-viewer-stage { position: relative; display: grid; min-height: 0; place-items: center; overflow: hidden; background: #080d13; }
.client-media-viewer-content { display: grid; width: 100%; height: 100%; place-items: center; }
.client-media-viewer-content img, .client-media-viewer-content video { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.client-media-viewer-loading { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 9px; color: rgba(255,255,255,0.72); font-size: 10px; }
.client-media-viewer-loading[hidden] { display: none; }
.client-media-viewer-arrow { position: absolute; z-index: 2; top: 50%; display: grid; width: 46px; height: 58px; place-items: center; border: 0; border-radius: 14px; background: rgba(255,255,255,0.11); color: #fff; cursor: pointer; font: inherit; font-size: 34px; font-weight: 300; transform: translateY(-50%); backdrop-filter: blur(8px); }
.client-media-viewer-arrow:hover { background: rgba(255,255,255,0.19); }
.client-media-viewer-arrow.is-previous { left: 14px; }
.client-media-viewer-arrow.is-next { right: 14px; }
.client-media-viewer-error { color: #ff9292; font-size: 11px; }

@media (min-width: 1500px) {
  .client-crm-table { min-width: 100%; }
}

@media (max-width: 700px) {
  .client-crm-toolbar { gap: 8px; }
  .client-crm-toolbar h2 { font-size: 22px; }
  .client-crm-toolbar .mapping-toolbar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 5px; }
  .client-crm-toolbar .rows-per-page-control, .client-crm-toolbar .autosave-status { grid-column: 1 / -1; }
  .client-mobile-card { display: grid; gap: 7px; padding: 9px; }
  .client-mobile-card .client-row-actions { gap: 2px; }
  .client-mobile-card .client-open-button, .client-mobile-card .delete-button { width: 30px; height: 30px; }
  .client-drawer-panel { width: 100%; border-left: 0; }
  .client-drawer-header { min-height: 64px; padding: 10px 12px; }
  .client-drawer-header h2 { font-size: 18px; }
  .client-drawer-scroll { gap: 6px; padding: 6px; }
  .client-detail-card { padding: 11px; border-radius: 12px; }
  .client-inline-form { grid-template-columns: 1fr; }
  .client-inline-form > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-job-card { padding: 10px; }
  .client-job-card > header > strong { font-size: 16px; }
  .client-job-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-job-card > footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-job-card > footer .button { width: 100%; }
  .client-modal { padding: 0; place-items: end center; }
  .client-modal-panel { width: 100%; max-height: 94dvh; border-radius: 20px 20px 0 0; transform: translateY(100%); }
  .client-form-grid { grid-template-columns: 1fr; }
  .client-catalog-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-catalog-toolbar { align-items: stretch; flex-direction: column; }
  .client-catalog-search { width: 100%; max-width: none; }
  .client-catalog-view { align-self: flex-start; }
  .client-catalog-editor { grid-template-columns: minmax(0, 1fr) auto; }
  .client-catalog-editor .button-ghost { grid-column: 1 / -1; }
  .client-field-wide, .client-work-type-field { grid-column: 1; }
  .client-modal-panel form > footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-modal-panel form > footer .button { width: 100%; }
  .client-media-workspace { min-height: 72dvh; }
  .client-photo-page-values { grid-template-columns: 1fr; }
  .client-photo-page-values > div + div { border-top: 1px solid rgba(60,60,67,.12); border-left: 0; }
  .client-photo-page-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .client-photo-page-actions button { justify-content: center; }
  .client-photo-page-actions .is-destructive { grid-column: 1 / -1; }
  .client-media-tabs { grid-template-columns: 1fr; }
  .client-media-toolbar { align-items: stretch; flex-direction: column; }
  .client-media-upload-button { justify-content: center; }
  .client-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-media-viewer { padding: 0; }
  .client-media-viewer > section { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .client-media-viewer-arrow { width: 40px; height: 50px; }
}

/* Authentication and user profile */
.auth-page { background: radial-gradient(circle at 50% -10%, rgba(255, 221, 45, 0.32), transparent 38%), var(--background); }
.auth-shell { display: grid; min-height: 100dvh; place-items: center; padding: 28px 18px; }
.auth-card { width: min(100%, 480px); padding: clamp(26px, 5vw, 42px); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: 0 24px 80px rgba(0, 16, 36, 0.12); }
.auth-brand { display: flex; align-items: center; margin-bottom: 38px; }
.auth-brand img { display: block; width: min(210px, 66vw); height: auto; object-fit: contain; }
.auth-heading { margin-bottom: 24px; }
.auth-heading h1 { margin-bottom: 10px; font-size: clamp(28px, 7vw, 36px); }
.auth-heading p { font-size: 15px; }
.auth-message, .profile-message { margin-bottom: 18px; padding: 13px 15px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; }
.auth-message.is-error, .profile-message.is-error { background: rgba(217, 74, 74, 0.1); color: #9d2929; }
.auth-message.is-success, .profile-message.is-success { background: rgba(0, 185, 45, 0.1); color: #08783e; }
.auth-google-button { width: 100%; }
.auth-google-button.is-disabled { pointer-events: none; opacity: 0.45; }
.google-mark { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #fff; color: #4285f4; font-weight: 900; }
.auth-footnote { margin-top: 16px; font-size: 12px; text-align: center; }
.auth-qr { display: grid; width: min(100%, 292px); margin: 0 auto 18px; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; }
.auth-qr svg { display: block; width: 100%; height: auto; }
.auth-manual-key { margin: 0 0 20px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-soft); }
.auth-manual-key summary { cursor: pointer; color: var(--link); font-size: 13px; font-weight: 650; }
.auth-manual-key p { margin: 10px 0 7px; font-size: 12px; }
.auth-manual-key code { display: block; overflow-wrap: anywhere; margin-top: 10px; color: var(--text); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.auth-manual-key small { display: block; margin-top: 7px; color: var(--text-muted); }
.auth-code-form, .profile-security-form { display: grid; gap: 14px; }
.auth-code-field { display: grid; gap: 7px; }
.auth-code-field > span { font-size: 13px; font-weight: 650; }
.auth-code-field input { width: 100%; min-height: 58px; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-size: 22px; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.16em; }
.auth-code-field input:focus { border-color: var(--link); }
.auth-account { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 13px; border-radius: var(--radius-md); background: var(--surface-soft); }
.auth-account > span { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--text); color: #fff; font-weight: 800; }
.auth-account > div { display: grid; min-width: 0; }
.auth-account small { overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; }
.auth-switch-account { display: block; margin-top: 18px; color: var(--link); font-size: 13px; font-weight: 650; text-align: center; }
.profile-page-header { align-items: center; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: 18px; }
.profile-card { padding: clamp(22px, 3vw, 30px); box-shadow: var(--shadow-card); }
.profile-card-heading, .profile-security-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.profile-card-heading { justify-content: flex-start; }
.profile-card-heading h2, .profile-security-heading h2 { margin-bottom: 3px; }
.profile-large-avatar { display: grid; width: 68px; height: 68px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--text); color: #fff; font-size: 24px; font-weight: 800; }
.profile-readonly-row { display: grid; gap: 4px; padding: 16px; border-radius: var(--radius-md); background: var(--surface-soft); }
.profile-readonly-row span { color: var(--text-muted); font-size: 11px; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; }
.profile-readonly-row strong { overflow-wrap: anywhere; }
.profile-help { margin: 18px 0; font-size: 13px; }
.profile-security-heading .badge { flex: 0 0 auto; }
.profile-security-form { margin-top: 20px; }
.profile-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.profile-disable-button { color: var(--danger); }
.profile-warning { margin-top: 15px; padding: 12px 14px; border-radius: var(--radius-md); background: rgba(217, 130, 0, 0.1); color: #7a4a00; font-size: 12px; }
.profile-setup > p { margin-bottom: 18px; font-size: 13px; }

@media (max-width: 760px) {
  .auth-shell { align-items: start; padding: 0; }
  .auth-card { min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  .auth-brand { margin-bottom: 30px; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-page-header { align-items: stretch; }
  .profile-page-header form .button, .profile-form-actions .button { width: 100%; }
}

/* Allocations */
.allocations-workspace { display: grid; gap: 20px; }
.allocations-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.allocations-header h2 { margin-bottom: 4px; }
.allocations-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.allocations-actions [hidden] { display: none; }
.allocation-period-picker > .button { min-width: 170px; }
.allocation-paste-period:not(:disabled) { box-shadow: 0 0 0 3px rgba(255, 221, 45, 0.22); }
.allocation-delete-period { color: var(--danger); }
.allocations-content { display: grid; gap: 18px; }
.allocation-overview { display: grid; grid-template-columns: minmax(240px, 0.72fr) minmax(0, 2fr); gap: 12px; }
.allocation-total-card, .allocation-group-cards article { display: grid; align-content: center; gap: 4px; min-height: 116px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.allocation-total-card { background: var(--primary); }
.allocation-total-card > span, .allocation-group-cards article > span { color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.allocation-total-card strong { font-size: clamp(28px, 4vw, 38px); font-variant-numeric: tabular-nums; }
.allocation-total-card small, .allocation-group-cards article small { color: var(--text-muted); }
.allocation-group-cards { display: grid; grid-auto-columns: minmax(180px, 1fr); grid-auto-flow: column; gap: 10px; overflow-x: auto; padding-bottom: 2px; }
.allocation-group-cards article strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.allocation-table-card, .allocation-breakdown-card, .allocation-ap-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.allocation-table-card > header, .allocation-breakdown-card > header, .allocation-ap-card > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.allocation-table-card > header h2, .allocation-breakdown-card > header h2, .allocation-ap-card > header h2 { margin-bottom: 3px; font-size: 20px; }
.allocation-table-card > header p { font-size: 12px; }
.allocation-table-wrap { overflow-x: auto; }
.allocation-table { width: 100%; min-width: 1160px; border-collapse: collapse; }
.allocation-table th, .allocation-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.allocation-table th { background: #f9fafb; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.allocation-table td:first-child, .allocation-table th:first-child { padding-left: 16px; }
.allocation-table td:last-child, .allocation-table th:last-child { padding-right: 16px; }
.allocation-table input[type="date"], .allocation-inline-select, .allocation-number-control { height: 42px; border: 1px solid transparent; border-radius: 9px; background: var(--surface-soft); color: var(--text); }
.allocation-table input[type="date"] { width: 142px; padding: 0 9px; }
.allocation-inline-select { width: 100%; min-width: 160px; padding: 0 30px 0 9px; }
.allocation-number-control { display: inline-grid; width: 120px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.allocation-number-control input { width: 100%; min-width: 0; height: 40px; padding: 0 8px; border: 0; background: transparent; color: var(--text); text-align: right; }
.allocation-number-control span { padding-right: 9px; color: var(--text-muted); font-weight: 700; }
.allocation-table input:focus, .allocation-inline-select:focus, .allocation-number-control:focus-within { border-color: var(--link); box-shadow: 0 0 0 2px rgba(18, 109, 247, 0.12); outline: 0; }
.allocation-row-total { font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
.allocation-document-column, .allocation-actions-column { width: 82px; text-align: center !important; }
.allocation-remove-button { min-height: 36px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--link); cursor: pointer; font-size: 11px; font-weight: 700; }
.allocation-remove-button:hover { background: rgba(18, 109, 247, 0.08); }
.allocation-entry-empty { padding: 30px; color: var(--text-muted); text-align: center; }
.allocation-mobile-list { display: none; }
.allocation-lower-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); gap: 18px; }
.allocation-breakdown-card [data-allocation-breakdown], .allocation-ap-card [data-allocation-ap-list] { display: grid; gap: 8px; padding: 14px; }
.allocation-breakdown-card details { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); }
.allocation-breakdown-card summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; cursor: pointer; background: var(--surface-soft); list-style: none; }
.allocation-breakdown-card details > div { display: grid; }
.allocation-breakdown-card details > div > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border); }
.allocation-breakdown-card details span { color: var(--text-muted); }
.allocation-ap-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: var(--radius-md); background: var(--surface-soft); }
.allocation-ap-row span { min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 650; }
.allocation-settings-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.allocation-settings-modal[hidden] { display: none; }
.allocation-settings-panel { position: relative; display: grid; width: min(920px, 96vw); max-height: min(900px, 94dvh); grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; border-radius: var(--radius-xl); background: var(--surface); box-shadow: 0 24px 80px rgba(0, 16, 36, 0.25); }
.allocation-settings-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.allocation-settings-panel > header h2 { margin: 3px 0 0; }
.allocation-settings-note { padding: 12px 24px; border-bottom: 1px solid var(--border); background: #fbfcfd; font-size: 12px; }
.allocation-settings-body { overflow-y: auto; padding: 18px 24px; }
.allocation-category-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 10px; }
.allocation-item-form { display: grid; grid-template-columns: minmax(170px, 0.8fr) minmax(180px, 1.2fr) minmax(180px, 0.7fr) auto auto; align-items: end; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.allocation-item-form .field { min-width: 0; }
.allocation-item-form .field > input, .allocation-item-form .field > select, .allocation-item-form .input-with-prefix { box-sizing: border-box; height: 54px; min-height: 54px; }
.allocation-item-form .field > select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.54) 50%), linear-gradient(135deg, rgba(0, 0, 0, 0.54) 50%, transparent 50%); background-position: calc(100% - 17px) 24px, calc(100% - 12px) 24px; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; }
.allocation-item-form .input-with-prefix { grid-template-columns: minmax(0, 1fr) 34px; padding: 0 8px 0 14px; }
.allocation-item-form .input-with-prefix input { width: 100%; min-width: 0; height: 52px; min-height: 52px; padding: 0; }
.allocation-item-form .input-with-prefix span { text-align: center; }
.allocation-settings-feedback { min-height: 20px; margin-top: 10px; font-size: 12px; }
.allocation-settings-list { display: grid; gap: 10px; margin-top: 14px; }
.allocation-setting-category { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); }
.allocation-setting-category > header, .allocation-setting-category > div > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 13px; }
.allocation-setting-category > header { background: var(--surface-soft); }
.allocation-setting-category > header > div, .allocation-setting-category > div > div > div { display: flex; gap: 4px; }
.allocation-setting-category button { min-height: 30px; padding: 4px 7px; border: 0; border-radius: 6px; background: transparent; color: var(--link); cursor: pointer; font-size: 11px; font-weight: 650; }
.allocation-setting-category button:hover { background: rgba(18, 109, 247, 0.08); }
.allocation-setting-category > div > div + div { border-top: 1px solid var(--border); }
.allocation-setting-category > div > p { padding: 12px 13px; font-size: 12px; }
.allocation-settings-panel > footer { display: flex; justify-content: flex-end; padding: 14px 24px; border-top: 1px solid var(--border); }

@media (max-width: 900px) {
  .allocations-header { align-items: stretch; flex-direction: column; }
  .allocations-actions { justify-content: flex-start; }
  .allocation-overview, .allocation-lower-grid { grid-template-columns: 1fr; }
  .allocation-item-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .allocation-item-form .button { width: 100%; }
}

@media (max-width: 700px) {
  .allocations-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .allocations-actions .button, .allocation-period-picker, .allocation-period-picker > .button { width: 100%; min-width: 0; }
  .allocation-table-wrap { display: none; }
  .allocation-mobile-list { display: grid; gap: 9px; padding: 10px; }
  .allocation-mobile-card { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
  .allocation-mobile-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .allocation-mobile-card > header > div { display: grid; }
  .allocation-mobile-card > header strong { font-size: 19px; }
  .allocation-mobile-card > header span { color: var(--text-muted); font-size: 11px; }
  .allocation-mobile-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .allocation-mobile-fields label { display: grid; min-width: 0; gap: 4px; }
  .allocation-mobile-fields label > span { color: var(--text-muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }
  .allocation-mobile-fields input[type="date"], .allocation-mobile-fields .allocation-inline-select, .allocation-mobile-fields .allocation-number-control { width: 100%; min-width: 0; max-width: 100%; height: 44px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); }
  .allocation-mobile-fields input[type="date"] { padding: 0 8px; }
  .allocation-mobile-card > footer { display: flex; justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 7px; }
  .allocation-settings-modal { padding: 0; place-items: end center; }
  .allocation-settings-panel { width: 100%; max-height: 94dvh; border-radius: 20px 20px 0 0; }
  .allocation-settings-body { padding: 14px; }
  .allocation-category-form, .allocation-item-form { grid-template-columns: 1fr; }
  .allocation-category-form .button, .allocation-item-form .button { width: 100%; }
}

@media (max-width: 360px) {
  .allocation-mobile-fields { grid-template-columns: 1fr; }
}

.transaction-history-icon-button {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 38px;
  color: #168acd;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(60, 60, 67, 0.18);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.transaction-history-icon-button:hover {
  background: #fff;
  border-color: rgba(22, 138, 205, 0.38);
  transform: translateY(-1px);
}

.transaction-history-icon-button.is-active {
  color: #fff;
  background: #168acd;
  border-color: #168acd;
}

.toolbar-archive-icon,
.toolbar-history-icon {
  position: relative;
  width: 19px;
  height: 16px;
  display: block;
}

.toolbar-archive-icon::before {
  content: "";
  position: absolute;
  inset: 4px 1px 0;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.toolbar-archive-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 19px;
  height: 5px;
  border: 1.5px solid currentColor;
  border-radius: 3px 3px 2px 2px;
  box-sizing: border-box;
  box-shadow: inset 0 -1px 0 currentColor;
}

.toolbar-history-icon {
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
}

.toolbar-history-icon::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 3px;
  width: 1.5px;
  height: 6px;
  background: currentColor;
  border-radius: 2px;
}

.toolbar-history-icon::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 5px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}

.mapping-flow-dropdown-control {
  width: 100%;
  min-width: 210px;
}

.mapping-flow-state[hidden],
.mapping-flow-dropdown-popover[hidden] {
  display: none;
}

.mapping-flow-dropdown-trigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

.mapping-row.is-selected .mapping-flow-dropdown-trigger,
.mapping-mobile-card.is-selected .mapping-flow-dropdown-trigger {
  border-color: rgba(22, 138, 205, .28);
  background: rgba(22, 138, 205, .06);
}

.mapping-flow-dropdown-trigger:focus-visible {
  outline: 0;
  border-color: var(--link);
  box-shadow: 0 0 0 3px rgba(22, 138, 205, .14);
}

.mapping-flow-dropdown-trigger:disabled {
  color: var(--text-muted);
  cursor: default;
  opacity: 1;
}

.mapping-flow-dropdown-trigger > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mapping-flow-dropdown-chevron {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.mapping-flow-dropdown-trigger[aria-expanded="true"] .mapping-flow-dropdown-chevron {
  transform: translateY(2px) rotate(225deg);
}

.mapping-flow-dropdown-popover {
  position: fixed;
  z-index: 1500;
  width: min(286px, calc(100vw - 24px));
  max-height: min(370px, calc(100vh - 24px));
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(60, 60, 67, .16);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 34px rgba(24, 35, 45, .18);
}

.mapping-flow-dropdown-heading {
  padding: 5px 8px 7px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.mapping-flow-dropdown-options {
  display: grid;
}

.mapping-flow-dropdown-option {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 9px;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.mapping-flow-dropdown-option:hover,
.mapping-flow-dropdown-option:focus-within {
  background: rgba(22, 138, 205, .08);
}

.mapping-flow-dropdown-option input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--link);
}

.account-catalog-page {
  max-width: 980px;
  margin: 0 auto;
  color: var(--text);
}

.account-catalog-header,
.account-catalog-tools,
.account-directory-row,
.balance-directory-row,
.balance-directory-main,
.account-directory-main,
.account-directory-actions,
.account-kind-switch,
.account-import-settings label,
.account-sheet-panel header,
.account-sheet-panel footer,
.balance-readonly-row {
  display: flex;
  align-items: center;
}

.account-catalog-header { justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.account-catalog-header h2 { margin: 0; font-size: 28px; font-weight: 650; letter-spacing: -0.025em; }
.account-catalog-header p { margin: 3px 0 0; color: var(--text-muted); font-size: 14px; }
.account-round-action { width: 42px; height: 42px; border: 1px solid rgba(60, 60, 67, .18); border-radius: 50%; background: rgba(255,255,255,.9); color: #168acd; font-size: 27px; font-weight: 300; line-height: 1; }
.account-sync-action { font-size: 21px; }
.account-kind-switch { width: min(360px, 100%); margin: 0 auto 16px; padding: 3px; gap: 3px; border-radius: 11px; background: rgba(118,118,128,.12); }
.account-kind-switch a { flex: 1; padding: 7px 16px; border-radius: 8px; color: var(--text-muted); text-align: center; font-size: 14px; font-weight: 560; }
.account-kind-switch a.is-active { color: var(--text); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.account-catalog-tools { justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.account-catalog-search { flex: 1; }
.account-catalog-search input { width: 100%; height: 38px; padding: 0 14px; border: 0; border-radius: 12px; background: rgba(118,118,128,.1); font: inherit; }
.account-text-action { border: 0; background: transparent; color: #168acd; font-size: 14px; }
.account-catalog-status { min-height: 20px; margin: 2px 2px 10px; color: var(--text-muted); font-size: 12px; }
.account-catalog-status.is-error { color: #c7344f; }
.account-directory-group { margin: 0 0 18px; }
.account-directory-group h3 { margin: 0 0 6px 12px; color: var(--text-muted); font-size: 12px; font-weight: 550; text-transform: uppercase; letter-spacing: .045em; }
.account-directory-card { overflow: hidden; border: 1px solid rgba(60,60,67,.1); border-radius: 16px; background: rgba(255,255,255,.92); }
.account-directory-row,
.balance-directory-row { min-height: 62px; border-bottom: 1px solid rgba(60,60,67,.1); }
.account-directory-row:last-child,
.balance-directory-row:last-child { border-bottom: 0; }
.account-directory-row.is-archived { opacity: .58; }
.account-directory-main,
.balance-directory-main { min-width: 0; flex: 1; gap: 11px; padding: 10px 10px 10px 14px; border: 0; background: transparent; color: inherit; text-align: left; }
.account-directory-copy,
.balance-account-identity,
.balance-account-values { min-width: 0; display: grid; gap: 2px; }
.account-directory-copy strong,
.balance-account-identity strong { overflow: hidden; font-size: 16px; font-weight: 520; text-overflow: ellipsis; white-space: nowrap; }
.account-directory-copy small,
.balance-account-identity small,
.balance-account-values small { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.account-import-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #aaaeb4; }
.account-import-dot.is-imported { background: #31c56a; }
.account-directory-actions { gap: 6px; padding-right: 10px; }
.account-info-button { width: 29px; height: 29px; flex: 0 0 29px; border: 1px solid rgba(22,138,205,.46); border-radius: 50%; background: transparent; color: #168acd; font-family: Georgia, serif; font-size: 16px; font-weight: 400; font-style: italic; }
.account-archive-button { min-width: 68px; height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: rgba(199,52,79,.1); color: #c7344f; font-size: 12px; }
.account-archive-button.is-restore { background: rgba(22,138,205,.1); color: #168acd; }
.balance-directory-main { justify-content: space-between; }
.balance-account-identity { flex: 1; }
.balance-account-identity > span { display: flex; align-items: center; gap: 9px; min-width: 0; }
.balance-account-values { justify-items: end; padding-left: 12px; }
.balance-account-values strong { font-size: 17px; font-weight: 470; font-variant-numeric: tabular-nums; }
.balance-account-values .is-positive { color: #218b4b; }
.balance-account-values .is-negative,
.balance-account-values small.has-debt { color: #bd3150; }
.balance-directory-row > .account-info-button { margin-right: 12px; }
.account-catalog-empty { padding: 56px 20px; color: var(--text-muted); text-align: center; }

.account-sheet { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity 160ms ease; }
.account-sheet[hidden],
.account-sheet [hidden] { display: none !important; }
.account-sheet.is-open { opacity: 1; }
.account-sheet-backdrop { position: absolute; inset: 0; border: 0; background: rgba(24,24,27,.34); backdrop-filter: blur(8px); }
.account-sheet-panel { position: relative; z-index: 1; width: min(520px, 100%); max-height: min(760px, 92dvh); overflow: auto; display: grid; gap: 13px; padding: 20px; border: 1px solid rgba(255,255,255,.75); border-radius: 22px; background: rgba(249,249,251,.97); box-shadow: 0 24px 70px rgba(0,0,0,.22); transform: translateY(12px); transition: transform 160ms ease; }
.account-sheet.is-open .account-sheet-panel { transform: translateY(0); }
.account-sheet-panel header { justify-content: space-between; }
.account-sheet-panel header span { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.account-sheet-panel header h2 { margin: 2px 0 0; font-size: 22px; font-weight: 620; }
.account-sheet-panel header > button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(118,118,128,.12); color: var(--text-muted); font-size: 20px; }
.account-sheet-panel > label,
.account-sheet-grid > label { display: grid; gap: 5px; color: var(--text-muted); font-size: 12px; }
.account-sheet-panel input:not([type="checkbox"]),
.account-sheet-panel select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid rgba(60,60,67,.14); border-radius: 11px; background: #fff; color: var(--text); font: inherit; }
.account-sheet-panel input:disabled { color: var(--text-muted); background: rgba(118,118,128,.08); }
.account-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.account-import-settings { overflow: hidden; border-radius: 13px; background: #fff; }
.account-import-settings label { justify-content: space-between; gap: 14px; min-height: 54px; padding: 8px 12px; border-bottom: 1px solid rgba(60,60,67,.1); }
.account-import-settings label:last-child { border-bottom: 0; }
.account-import-settings label > span { display: grid; gap: 2px; }
.account-import-settings strong { font-size: 14px; font-weight: 520; }
.account-import-settings small { color: var(--text-muted); font-size: 11px; }
.account-import-settings input { width: 42px; height: 24px; accent-color: #31c56a; }
.account-sheet-panel footer { justify-content: flex-end; gap: 9px; padding-top: 3px; }
.account-save-button { color: #fff; background: #168acd; border-color: #168acd; }
.account-form-error { margin: 0; color: #c7344f; font-size: 12px; }
.balance-readonly-row { justify-content: space-between; min-height: 42px; padding: 0 12px; border-radius: 11px; background: #fff; }
.balance-import-note { margin: 0; color: var(--text-muted); font-size: 12px; }

@media (max-width: 680px) {
  .account-catalog-page { padding: 4px 0 12px; }
  .account-catalog-header h2 { font-size: 24px; }
  .account-directory-actions { gap: 4px; }
  .account-archive-button { min-width: 58px; padding: 0 7px; font-size: 11px; }
  .balance-account-values strong { font-size: 15px; }
  .balance-account-values small { max-width: 150px; text-align: right; }
  .account-sheet { padding: 0; place-items: end center; }
  .account-sheet-panel { width: 100%; max-height: 94dvh; border-radius: 22px 22px 0 0; }
}

/* Public website maintenance controls */
.site-settings-page { display: grid; gap: 18px; width: min(1040px, 100%); margin: 0 auto; padding: 18px 0 30px; }
.site-settings-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.site-settings-eyebrow { color: #168acd; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.site-settings-header h1 { margin: 5px 0 2px; color: #25292d; font-size: clamp(28px, 4vw, 42px); font-weight: 650; letter-spacing: -.035em; }
.site-settings-header p { max-width: 650px; margin: 0; color: #7c8389; font-size: 12px; line-height: 1.5; }
.site-settings-preview-link { display: inline-flex; min-height: 42px; flex: 0 0 auto; align-items: center; gap: 7px; padding: 0 14px; border: 1px solid rgba(22,138,205,.15); border-radius: 13px; color: #168acd; background: #fff; box-shadow: 0 6px 17px rgba(29,53,73,.06); font-size: 11px; font-weight: 600; text-decoration: none; transition: 130ms ease; }
.site-settings-preview-link:hover { border-color: rgba(22,138,205,.32); transform: translateY(-1px); }
.site-settings-preview-link:active { transform: scale(.96); }
.site-maintenance-card { position: relative; display: grid; min-height: 390px; grid-template-columns: minmax(250px, .78fr) minmax(350px, 1.22fr); overflow: hidden; border: 1px solid rgba(60,60,67,.08); border-radius: 28px; background: #fff; box-shadow: 0 22px 65px rgba(29,50,68,.09); }
.site-maintenance-visual { position: relative; display: grid; min-height: 390px; overflow: hidden; place-items: center; background: linear-gradient(145deg, #ffe035 0%, #ffcf12 64%, #f7b918 100%); }
.site-maintenance-visual::before { position: absolute; top: 34px; left: -35px; width: 210px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.35); box-shadow: 28px 38px 0 -5px rgba(255,255,255,.22), 170px 255px 0 -6px rgba(29,32,35,.08); content: ''; transform: rotate(-6deg); }
.site-maintenance-visual::after { position: absolute; right: -34px; bottom: 35px; width: 220px; height: 38px; border-radius: 60% 20% 55% 30%; background: rgba(34,37,40,.94); content: ''; transform: rotate(-4deg); }
.site-maintenance-visual img { position: relative; z-index: 2; width: min(225px, 68%); aspect-ratio: 1; padding: 22px; border-radius: 42px; background: rgba(255,255,255,.96); box-shadow: 0 25px 55px rgba(59,49,4,.18); object-fit: contain; transform: rotate(-2deg); }
.site-maintenance-sun { position: absolute; top: 38px; right: 42px; width: 22px; height: 22px; border: 6px solid rgba(255,255,255,.55); border-radius: 50%; box-shadow: 0 0 0 9px rgba(255,255,255,.13); }
.site-maintenance-brush { position: absolute; z-index: 3; right: 28px; bottom: 46px; width: 92px; height: 12px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.16); transform: rotate(-4deg); }
.site-maintenance-content { display: grid; align-content: center; gap: 12px; padding: clamp(28px, 5vw, 58px); }
.site-maintenance-title-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.site-maintenance-state { display: inline-flex; min-height: 28px; align-items: center; gap: 7px; padding: 0 10px; border-radius: 14px; color: #247a4a; background: rgba(48,183,94,.1); font-size: 10px; font-weight: 650; }
.site-maintenance-state::before { width: 7px; height: 7px; border-radius: 50%; background: #31b95e; box-shadow: 0 0 0 4px rgba(48,183,94,.11); content: ''; }
.site-maintenance-card.is-enabled .site-maintenance-state { color: #a36800; background: rgba(245,174,30,.13); }
.site-maintenance-card.is-enabled .site-maintenance-state::before { background: #f0a51b; box-shadow: 0 0 0 4px rgba(245,174,30,.13); }
.site-settings-help { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(22,138,205,.2); border-radius: 50%; color: #168acd; background: rgba(22,138,205,.06); cursor: help; font: inherit; font-size: 12px; font-weight: 700; }
.site-settings-help:active { transform: scale(.9); }
.site-maintenance-content h2 { margin: 0; color: #292d31; font-size: clamp(23px, 3.4vw, 34px); font-weight: 640; letter-spacing: -.035em; line-height: 1.08; }
.site-maintenance-content > p { margin: 0; color: #777f86; font-size: 12px; line-height: 1.55; }
.site-maintenance-safe-list { display: grid; gap: 7px; margin: 5px 0 3px; }
.site-maintenance-safe-list span { display: flex; align-items: center; gap: 8px; color: #5f676e; font-size: 10px; }
.site-maintenance-safe-list i { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; color: #258e4f; background: rgba(48,183,94,.1); font-size: 10px; font-style: normal; }
.site-maintenance-action { display: inline-flex; min-height: 52px; width: fit-content; min-width: 250px; align-items: center; justify-content: center; gap: 9px; margin-top: 8px; padding: 0 20px; border: 0; border-radius: 16px; color: #fff; background: linear-gradient(145deg, #369fdb, #168acd); box-shadow: 0 10px 25px rgba(22,138,205,.2); cursor: pointer; font: inherit; font-size: 12px; transition: 130ms ease; }
.site-maintenance-action:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 13px 28px rgba(22,138,205,.25); }
.site-maintenance-action:active:not(:disabled) { transform: scale(.97); box-shadow: inset 0 2px 5px rgba(0,0,0,.14); }
.site-maintenance-action:disabled { cursor: wait; opacity: .55; }
.site-maintenance-action-icon { width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.15); }
.site-maintenance-card.is-enabled .site-maintenance-action { color: #fff; background: linear-gradient(145deg, #34b967, #248f4b); box-shadow: 0 10px 25px rgba(39,156,82,.18); }
.site-maintenance-action.is-working .site-maintenance-action-icon { border-right-color: transparent; animation: website-chat-spin .75s linear infinite; }
.site-maintenance-updated { min-height: 15px; color: #969ca1 !important; font-size: 9px !important; }
.site-maintenance-status { min-height: 18px; color: #278a50 !important; font-size: 10px !important; font-weight: 570; }
.site-maintenance-status.is-error { color: #b5484f !important; }
.site-maintenance-explainer { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); overflow: hidden; border: 1px solid rgba(60,60,67,.08); border-radius: 20px; background: rgba(255,255,255,.84); box-shadow: 0 11px 32px rgba(35,54,70,.05); }
.site-maintenance-explainer article { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 11px; padding: 20px; }
.site-maintenance-explainer article + article { border-left: 1px solid rgba(60,60,67,.07); }
.site-maintenance-explainer article > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 10px; color: #168acd; background: rgba(22,138,205,.09); font-size: 10px; font-weight: 700; }
.site-maintenance-explainer strong { color: #454c52; font-size: 11px; font-weight: 620; }
.site-maintenance-explainer p { margin: 4px 0 0; color: #858c92; font-size: 9px; line-height: 1.45; }
.site-settings-dialog[hidden] { display: none; }
.site-settings-dialog { position: fixed; z-index: 1200; inset: 0; display: grid; padding: 20px; place-items: center; opacity: 0; transition: opacity 150ms ease; }
.site-settings-dialog.is-open { opacity: 1; }
.site-settings-dialog-backdrop { position: absolute; inset: 0; border: 0; background: rgba(25,30,35,.38); backdrop-filter: blur(10px); }
.site-settings-dialog > section { position: relative; display: grid; width: min(440px, 100%); grid-template-columns: 48px minmax(0,1fr); gap: 13px; padding: 22px; border: 1px solid rgba(255,255,255,.75); border-radius: 22px; background: rgba(255,255,255,.97); box-shadow: 0 26px 75px rgba(21,36,49,.27); transform: translateY(10px) scale(.98); transition: 150ms ease; }
.site-settings-dialog.is-open > section { transform: none; }
.site-settings-dialog-mark { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 15px; color: #a66b00; background: rgba(245,174,30,.17); font-size: 20px; font-weight: 750; }
.site-settings-dialog-mark.is-info { color: #168acd; background: rgba(22,138,205,.1); }
.site-settings-dialog h2 { margin: 2px 0 5px; color: #282d32; font-size: 18px; line-height: 1.2; }
.site-settings-dialog p { margin: 0; color: #747c83; font-size: 11px; line-height: 1.5; }
.site-settings-dialog-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 8px; margin-top: 5px; }
.site-settings-dialog-actions button { min-height: 40px; padding: 0 15px; border: 1px solid rgba(60,60,67,.12); border-radius: 12px; color: #606970; background: #f4f5f6; cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; }
.site-settings-dialog-actions button.is-primary { border-color: transparent; color: #fff; background: #168acd; box-shadow: 0 6px 16px rgba(22,138,205,.18); }
.site-settings-dialog-actions button:active { transform: scale(.96); }

@media (max-width: 760px) {
  .site-settings-page { padding: 8px 0 24px; }
  .site-settings-header { align-items: flex-start; flex-direction: column; }
  .site-settings-preview-link { min-height: 38px; }
  .site-maintenance-card { grid-template-columns: 1fr; border-radius: 22px; }
  .site-maintenance-visual { min-height: 205px; }
  .site-maintenance-visual img { width: 132px; padding: 14px; border-radius: 28px; }
  .site-maintenance-content { padding: 24px 20px; }
  .site-maintenance-action { width: 100%; min-width: 0; }
  .site-maintenance-explainer { grid-template-columns: 1fr; }
  .site-maintenance-explainer article + article { border-top: 1px solid rgba(60,60,67,.07); border-left: 0; }
  .site-settings-dialog > section { grid-template-columns: 42px minmax(0,1fr); padding: 18px; }
  .site-settings-dialog-mark { width: 40px; height: 40px; border-radius: 13px; }
}

/* Unified Website Chat inbox */
.message-state-pill { display: inline-block; max-width: 92px; overflow: hidden; color: #6f777e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.message-state-pill.is-connected { color: #24884d; }
.message-state-pill.is-queued { color: #168acd; }
.messages-page-v2 .messages-detail.is-chat-thread { overflow: hidden; }
.website-chat-thread {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto auto minmax(0,1fr) auto;
}
.website-chat-thread > header { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.website-chat-contact-strip { display: flex; flex-wrap: wrap; gap: 7px; margin: -4px 0 16px; }
.website-chat-contact-strip span { padding: 5px 9px; border: 1px solid rgba(60,60,67,.09); border-radius: 999px; color: #747b82; background: rgba(255,255,255,.78); font-size: 9px; }
.website-chat-thread .message-thread-stream {
  min-height: 0;
  padding: 12px 4px 20px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.message-translate-inline { margin-top: 10px; padding: 5px 9px; border: 0; border-radius: 999px; color: #168acd; background: rgba(22,138,205,.09); font: inherit; font-size: 9px; cursor: pointer; }
.website-chat-pending-list { display: grid; gap: 7px; margin: 0 0 12px; padding: 12px; border: 1px solid rgba(237,158,46,.18); border-radius: 15px; background: rgba(255,248,234,.85); }
.website-chat-pending-list h3 { margin: 0 0 3px; color: #a56c1f; font-size: 9px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.website-chat-pending-list > div { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 7px; }
.website-chat-pending-list span { display: grid; gap: 2px; }
.website-chat-pending-list strong { overflow: hidden; font-size: 11px; font-weight: 520; text-overflow: ellipsis; white-space: nowrap; }
.website-chat-pending-list small { color: #8f7a5c; font-size: 8px; }
.website-chat-pending-list button { min-height: 29px; padding: 0 9px; border: 0; border-radius: 9px; color: #93631f; background: rgba(237,158,46,.13); font: inherit; font-size: 9px; cursor: pointer; }
.website-chat-pending-list button:last-child { color: #bd3150; background: rgba(189,49,80,.08); }
.website-chat-composer { position: relative; z-index: 3; display: grid; gap: 10px; margin-top: 10px; padding: 13px; border: 1px solid rgba(36,129,204,.13); border-radius: 17px; background: rgba(255,255,255,.96); box-shadow: 0 -8px 26px rgba(42,62,82,.055), 0 8px 26px rgba(42,62,82,.04); }
.website-chat-language-row { display: grid; grid-template-columns: minmax(0,1fr) 170px; gap: 10px; }
.website-chat-composer label { display: grid; gap: 5px; color: #7f878e; font-size: 9px; font-weight: 560; letter-spacing: .02em; }
.website-chat-composer textarea, .website-chat-composer select { width: 100%; min-height: 42px; padding: 9px 10px; border: 1px solid rgba(60,60,67,.12); border-radius: 11px; color: #30353a; background: #f8f9fa; font: inherit; font-size: 12px; resize: vertical; }
.website-chat-composer textarea:disabled { color: #737a81; background: rgba(118,118,128,.07); }
.website-chat-composer > div:last-child { display: flex; justify-content: flex-end; gap: 8px; }
.website-chat-composer button { min-height: 35px; padding: 0 13px; border: 0; border-radius: 10px; color: #168acd; background: rgba(22,138,205,.1); font: inherit; font-size: 10px; font-weight: 570; cursor: pointer; }
.website-chat-composer button[type="submit"] { color: #fff; background: #168acd; }
.website-chat-composer button:disabled { cursor: default; opacity: .38; }
.website-submission-detail .message-facts dd { overflow-wrap: anywhere; }

/* Operator reply is a normal-flow sibling below the transcript. */
.messages-reply-dock[hidden],
.messages-reply-body[hidden] { display: none !important; }
.messages-reply-dock {
  position: static;
  width: 100%;
  min-width: 0;
  padding: 14px clamp(16px, 3.2vw, 34px) 18px;
  border-top: 1px solid var(--messages-line);
  background: #f5f7f9;
}
.messages-reply-panel {
  overflow: hidden;
  border: 1px solid rgba(36,129,204,.18);
  border-radius: 20px;
  background: rgba(250,252,254,.96);
  box-shadow: 0 9px 28px rgba(30,49,65,.08), 0 2px 8px rgba(30,49,65,.05);
}
.messages-reply-toggle {
  display: grid;
  width: 100%;
  min-height: 58px;
  grid-template-columns: 38px minmax(0,1fr) auto 18px;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  border: 0;
  color: #30363b;
  background: linear-gradient(120deg,rgba(255,255,255,.98),rgba(235,246,254,.96));
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.messages-reply-toggle:active { background: #eef7fd; }
.messages-reply-toggle:disabled { color: #30363b; cursor: default; opacity: 1; }
.messages-reply-toggle:focus-visible { outline: 3px solid rgba(22,138,205,.25); outline-offset: -3px; }
.messages-reply-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  color: #168acd;
  background: rgba(22,138,205,.1);
}
.messages-reply-mark svg { width: 20px; height: 20px; }
.messages-reply-heading { display: grid; min-width: 0; gap: 1px; }
.messages-reply-heading small { color: #818990; font-size: 9px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.messages-reply-heading strong { overflow: hidden; font-size: 12px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.messages-reply-count { display: inline-grid; min-width: 22px; height: 22px; padding: 0 6px; place-items: center; border-radius: 999px; color: #8a5d1c; background: #fff1cb; font-size: 10px; font-weight: 700; }
.messages-reply-count[hidden] { display: none; }
.messages-reply-chevron { width: 9px; height: 9px; border-right: 1.5px solid #7a858e; border-bottom: 1.5px solid #7a858e; transform: translateY(-2px) rotate(45deg); transition: transform 150ms ease; }
.messages-reply-dock.is-expanded .messages-reply-chevron { transform: translateY(2px) rotate(225deg); }
.messages-reply-body { display: grid; gap: 9px; padding: 0 12px 12px; }
.messages-reply-tools { display: grid; gap: 9px; }
.messages-reply-dock .website-chat-composer { margin: 0; box-shadow: none; }
.messages-reply-dock .website-chat-pending-list,
.messages-reply-dock .sms-pending-list { max-height: 150px; margin: 0; }
.messages-reply-dock .sms-client-card { grid-template-columns: 34px minmax(0,1fr) auto; padding: 9px 10px; }
.messages-reply-dock .sms-client-card .message-connect-icon { width: 34px; height: 34px; }
@media (min-width: 681px) {
  .messages-reply-chevron { display: none; }
  .messages-reply-toggle { grid-template-columns: 38px minmax(0,1fr) auto; }
}

@media (max-width: 680px) {
  .website-chat-thread > header { grid-template-columns: auto auto minmax(0, 1fr); }
  .website-chat-thread > header .message-detail-actions { grid-column: 1 / -1; justify-self: end; }
  .website-chat-language-row { grid-template-columns: minmax(0,1fr) 116px; gap: 8px; }
  .website-chat-thread .message-thread-stream { padding-right: 0; }
  .website-chat-composer { gap: 8px; margin-top: 8px; padding: 10px; }
  .website-chat-composer textarea,
  .website-chat-composer select { min-height: 38px; padding: 7px 8px; font-size: 11px; }
  .website-chat-pending-list > div { grid-template-columns: minmax(0,1fr) auto; }
  .website-chat-pending-list > div button:last-child { grid-column: 2; }
  .messages-reply-dock {
    position: static;
    padding: 10px max(8px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .messages-reply-panel { border-radius: 18px; }
  .messages-reply-toggle { min-height: 56px; padding: 7px 11px; }
  .messages-reply-body { padding: 0 8px 8px; }
  .messages-reply-dock .website-chat-language-row { grid-template-columns: minmax(0,1fr); }
  .messages-reply-dock .website-chat-composer { padding: 10px; }
  .messages-reply-dock .website-chat-composer > div:last-child { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .messages-reply-dock .website-chat-composer button { width: 100%; }
  .messages-reply-dock .sms-client-card { grid-template-columns: 34px minmax(0,1fr); }
  .messages-reply-dock .sms-client-card > div:last-child { grid-column: 1 / -1; }
}

/* Website Chat settings */
.website-chat-settings-page { width: min(1120px, 100%); margin: 0 auto; padding: 20px 18px 70px; color: var(--text); }
.website-chat-settings-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.website-chat-settings-header h1 { margin: 3px 0 4px; font-size: clamp(30px, 4vw, 42px); font-weight: 620; letter-spacing: -.035em; }
.website-chat-settings-header p { max-width: 680px; margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.45; }
.website-chat-eyebrow { color: #168acd; font-size: 11px; font-weight: 680; letter-spacing: .12em; text-transform: uppercase; }
.website-chat-refresh { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(60,60,67,.12); border-radius: 13px; background: rgba(255,255,255,.8); color: #168acd; box-shadow: 0 6px 22px rgba(24,45,64,.06); }
.website-chat-refresh svg { width: 20px; height: 20px; }
.website-chat-overview { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.website-chat-overview > article { min-height: 112px; padding: 18px; border: 1px solid rgba(60,60,67,.1); border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 10px 30px rgba(24,45,64,.05); }
.website-chat-overview article small { display: block; margin-bottom: 9px; color: var(--text-muted); font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.website-chat-overview article strong { display: block; font-size: 19px; font-weight: 540; letter-spacing: -.02em; }
.website-chat-overview article p { margin: 6px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.35; }
.website-chat-state-card { position: relative; padding-left: 46px !important; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,246,252,.92)) !important; }
.website-chat-state-dot { position: absolute; top: 22px; left: 18px; width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: #8e8e93; box-shadow: 0 0 0 1px rgba(60,60,67,.14); }
.website-chat-state-card.is-open .website-chat-state-dot { background: #30b75e; box-shadow: 0 0 0 1px rgba(48,183,94,.22), 0 0 13px rgba(48,183,94,.32); }
.website-chat-overview article.is-warning strong { color: #b94743; }
.website-chat-loading, .website-chat-error { grid-column: 1 / -1; min-height: 150px; display: grid; place-items: center; align-content: center; gap: 10px; border-radius: 18px; background: rgba(255,255,255,.72); color: var(--text-muted); }
.website-chat-loading span { width: 24px; height: 24px; border: 2px solid rgba(22,138,205,.18); border-top-color: #168acd; border-radius: 50%; animation: website-chat-spin .8s linear infinite; }
.website-chat-loading p, .website-chat-error p { margin: 0; font-size: 13px; }
.website-chat-error strong { color: #b94743; font-size: 16px; }
@keyframes website-chat-spin { to { transform: rotate(360deg); } }
.website-chat-control-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid rgba(22,138,205,.14); border-radius: 18px; background: linear-gradient(135deg, rgba(241,249,255,.96), rgba(255,255,255,.92)); }
.website-chat-control-card > div:first-child { display: flex; align-items: center; gap: 12px; }
.website-chat-control-icon { display: grid; width: 39px; height: 39px; flex: 0 0 39px; place-items: center; border-radius: 12px; background: rgba(22,138,205,.1); color: #168acd; }
.website-chat-control-icon svg { width: 22px; height: 22px; }
.website-chat-control-card strong { font-size: 14px; font-weight: 600; }
.website-chat-control-card p { margin: 3px 0 0; color: var(--text-muted); font-size: 11px; }
.website-chat-control-actions { display: flex; gap: 7px; }
.website-chat-control-actions button, .website-chat-settings-card footer button { min-height: 36px; padding: 0 14px; border: 1px solid rgba(60,60,67,.12); border-radius: 11px; background: #fff; color: #168acd; font: inherit; font-size: 12px; font-weight: 570; }
.website-chat-control-actions button:first-child { border-color: #168acd; color: #fff; background: #168acd; }
.website-chat-settings-list { display: grid; gap: 10px; }
.website-chat-settings-card { overflow: hidden; border: 1px solid rgba(60,60,67,.1); border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 8px 24px rgba(24,45,64,.045); }
.website-chat-settings-card summary { display: flex; min-height: 66px; align-items: center; justify-content: space-between; padding: 11px 18px; cursor: pointer; list-style: none; }
.website-chat-settings-card summary::-webkit-details-marker { display: none; }
.website-chat-settings-card summary span:first-child { display: grid; gap: 2px; }
.website-chat-settings-card summary small { color: var(--text-muted); font-size: 9px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.website-chat-settings-card summary strong { font-size: 15px; font-weight: 560; }
.website-chat-chevron { width: 8px; height: 8px; border-right: 1.4px solid #8e8e93; border-bottom: 1.4px solid #8e8e93; transform: rotate(45deg); transition: transform 160ms ease; }
.website-chat-settings-card[open] .website-chat-chevron { transform: rotate(225deg); }
.website-chat-settings-card form { border-top: 1px solid rgba(60,60,67,.08); }
.website-chat-settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0 18px; }
.website-chat-setting-toggle, .website-chat-setting-field { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(60,60,67,.07); }
.website-chat-setting-toggle:nth-last-child(-n+2), .website-chat-setting-field:nth-last-child(-n+2) { border-bottom: 0; }
.website-chat-setting-toggle:nth-child(odd), .website-chat-setting-field:nth-child(odd) { padding-right: 18px; border-right: 1px solid rgba(60,60,67,.07); }
.website-chat-setting-toggle:nth-child(even), .website-chat-setting-field:nth-child(even) { padding-left: 18px; }
.website-chat-setting-toggle strong, .website-chat-setting-field > span { color: #55565b; font-size: 12px; font-weight: 500; }
.website-chat-setting-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.website-chat-setting-toggle i { position: relative; width: 43px; height: 25px; flex: 0 0 43px; border-radius: 14px; background: #d1d1d6; transition: background 160ms ease; }
.website-chat-setting-toggle i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform 160ms ease; }
.website-chat-setting-toggle input:checked + i { background: #31c56a; }
.website-chat-setting-toggle input:checked + i::after { transform: translateX(18px); }
.website-chat-setting-field { align-items: flex-start; flex-direction: column; justify-content: center; padding-top: 10px; padding-bottom: 10px; }
.website-chat-setting-field input, .website-chat-setting-field textarea { width: 100%; min-height: 37px; padding: 8px 10px; border: 1px solid rgba(60,60,67,.12); border-radius: 10px; color: var(--text); background: #f8f8fa; font: inherit; font-size: 12px; }
.website-chat-setting-field textarea { min-height: 80px; resize: vertical; line-height: 1.4; }
.website-chat-setting-field.is-complex { grid-column: 1 / -1; padding-left: 0 !important; padding-right: 0 !important; border-right: 0 !important; }
.website-chat-setting-field.is-complex textarea { min-height: 180px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.website-chat-setting-field .is-invalid { border-color: #c7344f; box-shadow: 0 0 0 3px rgba(199,52,79,.1); }
.website-chat-settings-card footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-top: 1px solid rgba(60,60,67,.08); background: rgba(248,248,250,.76); }
.website-chat-settings-card footer span { color: var(--text-muted); font-size: 10px; }
.website-chat-settings-card footer button { border-color: #168acd; color: #fff; background: #168acd; }
.website-chat-settings-status { min-height: 20px; margin: 12px 4px 0; color: #23804b; font-size: 12px; }
.website-chat-settings-status.is-error { color: #c7344f; }

@media (max-width: 900px) {
  .website-chat-overview { grid-template-columns: repeat(2, 1fr); }
  .website-chat-state-card { grid-column: 1 / -1; }
  .website-chat-control-card { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 680px) {
  .website-chat-settings-page { padding: 5px 10px 96px; }
  .website-chat-settings-header { margin-bottom: 16px; }
  .website-chat-settings-header h1 { font-size: 29px; }
  .website-chat-settings-header p { font-size: 12px; }
  .website-chat-overview { grid-template-columns: 1fr 1fr; gap: 7px; }
  .website-chat-overview > article { min-height: 96px; padding: 14px; }
  .website-chat-state-card { padding-left: 40px !important; }
  .website-chat-state-dot { left: 14px; top: 18px; }
  .website-chat-control-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .website-chat-control-actions button:last-child { grid-column: 1 / -1; }
  .website-chat-settings-fields { grid-template-columns: 1fr; }
  .website-chat-setting-toggle, .website-chat-setting-field { padding-left: 0 !important; padding-right: 0 !important; border-right: 0 !important; }
  .website-chat-setting-toggle:nth-last-child(-n+2), .website-chat-setting-field:nth-last-child(-n+2) { border-bottom: 1px solid rgba(60,60,67,.07); }
  .website-chat-settings-fields > :last-child { border-bottom: 0; }
}

/* Human-focused Website Chat controls */
.website-chat-control-card {
  align-items: flex-start;
  padding: 18px;
}
.website-chat-control-card > div:first-child { min-width: 220px; }
.website-chat-control-actions {
  display: grid;
  width: min(840px, 100%);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.website-chat-control-actions button,
.website-chat-control-actions button:first-child {
  position: relative;
  display: grid;
  min-height: 68px;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(60,60,67,.12);
  border-radius: 15px;
  color: #3a424a;
  text-align: left;
  background: rgba(255,255,255,.9);
  box-shadow: 0 3px 12px rgba(28,48,68,.04);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.website-chat-control-actions button:hover { border-color: rgba(22,138,205,.27); box-shadow: 0 7px 18px rgba(28,48,68,.08); }
.website-chat-control-actions button:active { transform: scale(.965); box-shadow: inset 0 2px 6px rgba(0,0,0,.12); }
.website-chat-control-actions button:disabled { cursor: wait; opacity: .7; }
.website-chat-control-actions button > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.website-chat-control-actions button strong { overflow: hidden; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.website-chat-control-actions button small { overflow: hidden; color: #838a91; font-size: 9px; font-weight: 480; text-overflow: ellipsis; white-space: nowrap; }
.website-chat-control-action-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: #168acd; background: rgba(22,138,205,.09); }
.website-chat-control-action-icon svg { width: 20px; height: 20px; }
.website-chat-control-actions button > i { display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid rgba(60,60,67,.13); border-radius: 50%; }
.website-chat-control-actions button > i::before { color: transparent; content: '✓'; font-size: 11px; font-style: normal; }
.website-chat-control-actions button[data-chat-override="OPEN"].is-active { border-color: #2ca85a; color: #fff; background: linear-gradient(145deg, #35bd69, #259b50); box-shadow: 0 8px 20px rgba(43,172,89,.2); }
.website-chat-control-actions button[data-chat-override="CLOSE"].is-active { border-color: #5e6871; color: #fff; background: linear-gradient(145deg, #68747e, #505a63); box-shadow: 0 8px 20px rgba(70,83,94,.18); }
.website-chat-control-actions button[data-chat-scheduled-until].is-active { border-color: #8068ce; color: #fff; background: linear-gradient(145deg, #9079db, #735bc0); box-shadow: 0 8px 20px rgba(115,91,192,.2); }
.website-chat-control-actions button[data-chat-schedule].is-active { border-color: #168acd; color: #fff; background: linear-gradient(145deg, #339edb, #168acd); box-shadow: 0 8px 20px rgba(22,138,205,.21); }
.website-chat-control-actions button.is-active small { color: rgba(255,255,255,.78); }
.website-chat-control-actions button.is-active .website-chat-control-action-icon { color: #fff; background: rgba(255,255,255,.16); }
.website-chat-control-actions button.is-active > i { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.18); }
.website-chat-control-actions button.is-active > i::before { color: #fff; }
.website-chat-control-actions button.is-working .website-chat-control-action-icon svg { animation: website-chat-spin .8s linear infinite; }

.website-chat-settings-card.is-human summary {
  min-height: 78px;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 16px;
}
.website-chat-section-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 13px; color: #168acd; background: rgba(22,138,205,.09); }
.website-chat-section-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.website-chat-section-copy { display: grid; min-width: 0; flex: 1; gap: 2px; }
.website-chat-section-copy small { color: #168acd !important; }
.website-chat-section-copy strong { color: #272c31; font-size: 15px !important; font-weight: 610 !important; }
.website-chat-section-copy em { overflow: hidden; color: #858b91; font-size: 10px; font-style: normal; font-weight: 430; text-overflow: ellipsis; white-space: nowrap; }
.website-chat-settings-human { display: grid; gap: 12px; padding: 14px; background: #f5f7f9; }
.website-chat-human-group { overflow: hidden; border: 1px solid rgba(60,60,67,.09); border-radius: 15px; background: #fff; box-shadow: 0 5px 18px rgba(32,52,72,.035); }
.website-chat-human-group > header { padding: 13px 14px 10px; border-bottom: 1px solid rgba(60,60,67,.07); }
.website-chat-human-group > header h3 { margin: 0; color: #282d32; font-size: 13px; font-weight: 620; }
.website-chat-human-group > header p { margin: 3px 0 0; color: #8a9096; font-size: 10px; line-height: 1.35; }
.website-chat-human-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.website-chat-human-row,
.website-chat-human-field { min-height: 68px; padding: 11px 14px; border-right: 1px solid rgba(60,60,67,.07); border-bottom: 1px solid rgba(60,60,67,.07); }
.website-chat-human-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.website-chat-human-field { display: grid; align-content: center; gap: 7px; }
.website-chat-human-field.is-wide { grid-column: 1 / -1; }
.website-chat-human-grid > :nth-child(even) { border-right: 0; }
.website-chat-human-grid > :nth-last-child(-n+2) { border-bottom: 0; }
.website-chat-field-heading { display: grid; min-width: 0; gap: 2px; }
.website-chat-field-heading > span { display: flex; align-items: center; gap: 6px; }
.website-chat-field-heading strong { color: #4b5259; font-size: 11px; font-weight: 570; }
.website-chat-field-heading small { color: #92989e; font-size: 9px; line-height: 1.3; }
.website-chat-help-button { display: inline-grid; width: 18px; height: 18px; flex: 0 0 18px; padding: 0; place-items: center; border: 1px solid rgba(22,138,205,.25); border-radius: 50%; color: #168acd; background: rgba(22,138,205,.06); cursor: help; font: inherit; font-size: 10px; font-weight: 650; transition: 120ms ease; }
.website-chat-help-button:hover { color: #fff; background: #168acd; }
.website-chat-help-button:active { transform: scale(.9); }
.website-chat-human-field input,
.website-chat-human-field select,
.website-chat-human-field textarea,
.website-chat-time-range input { width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid rgba(60,60,67,.12); border-radius: 10px; outline: 0; color: #2e3439; background: #f7f8fa; font: inherit; font-size: 11px; transition: 140ms ease; }
.website-chat-human-field textarea { min-height: 78px; line-height: 1.42; resize: vertical; }
.website-chat-human-field input:focus,
.website-chat-human-field select:focus,
.website-chat-human-field textarea:focus,
.website-chat-time-range input:focus { border-color: rgba(22,138,205,.45); background: #fff; box-shadow: 0 0 0 3px rgba(22,138,205,.08); }
.website-chat-input-wrap { display: flex; align-items: center; gap: 7px; }
.website-chat-input-wrap em { color: #8b9197; font-size: 9px; font-style: normal; white-space: nowrap; }
.website-chat-switch { position: relative; display: inline-flex; width: 52px; min-height: 44px; flex: 0 0 52px; align-items: center; justify-content: center; cursor: pointer; }
.website-chat-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.website-chat-switch i { position: relative; width: 44px; height: 26px; border-radius: 14px; background: #d2d5d8; transition: 160ms ease; }
.website-chat-switch i::after { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.18); content: ''; transition: transform 160ms ease; }
.website-chat-switch input:checked + i { background: #31bb67; }
.website-chat-switch input:checked + i::after { transform: translateX(18px); }
.website-chat-switch input:focus-visible + i { box-shadow: 0 0 0 3px rgba(22,138,205,.16); }
.website-chat-switch input:disabled + i { opacity: .5; }
.website-chat-checkbox-row { cursor: pointer; }
.website-chat-checkbox { position: relative; display: inline-grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; cursor: pointer; }
.website-chat-checkbox input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.website-chat-checkbox i { display: grid; width: 24px; height: 24px; place-items: center; border: 1.5px solid #c7cbd0; border-radius: 7px; color: transparent; background: #fff; font-size: 14px; font-style: normal; font-weight: 700; transition: 140ms ease; }
.website-chat-checkbox input:checked + i { border-color: #168acd; color: #fff; background: #168acd; box-shadow: 0 4px 10px rgba(22,138,205,.2); }
.website-chat-checkbox input:focus-visible + i { box-shadow: 0 0 0 3px rgba(22,138,205,.16); }
.website-chat-checkbox input:disabled + i { cursor: not-allowed; opacity: .5; }
.website-chat-readonly { max-width: 55%; padding: 6px 9px; border-radius: 9px; color: #667078; background: #f2f4f6; font-size: 10px; text-align: right; }
.website-chat-readonly.is-good { color: #207a47; background: rgba(48,183,94,.1); }
.website-chat-readonly.is-warning { color: #b34b4b; background: rgba(199,52,79,.08); }
.website-chat-human-group.is-days > .website-chat-human-grid,
.website-chat-human-group.is-stacked > .website-chat-human-grid { grid-template-columns: 1fr; gap: 9px; padding: 10px; background: #f8f9fa; }
.website-chat-day,
.website-chat-special-date,
.website-chat-flow-card,
.website-chat-question-card,
.website-chat-wait-card { border: 1px solid rgba(60,60,67,.09); border-radius: 13px; background: #fff; }
.website-chat-day > header,
.website-chat-special-date > header,
.website-chat-question-card > header,
.website-chat-wait-card > header { padding: 0 12px; }
.website-chat-day > header .website-chat-human-row,
.website-chat-question-card > header .website-chat-human-row,
.website-chat-wait-card > header .website-chat-human-row { width: 100%; min-height: 55px; padding: 8px 0; border: 0; }
.website-chat-day.is-closed { background: rgba(247,247,249,.8); }
.website-chat-day-closed,
.website-chat-quiet-empty { margin: 0; padding: 10px 13px 13px; color: #979ca1; font-size: 10px; }
.website-chat-time-list { display: grid; gap: 7px; padding: 0 12px 12px; }
.website-chat-time-range { display: grid; grid-template-columns: 1fr auto 1fr 30px; align-items: end; gap: 7px; }
.website-chat-time-range label { display: grid; gap: 3px; color: #8c9298; font-size: 9px; }
.website-chat-time-range > span { padding-bottom: 10px; color: #a0a5aa; }
.website-chat-time-range > button,
.website-chat-special-date > header button { min-height: 30px; border: 0; border-radius: 9px; color: #b5484f; background: rgba(199,52,79,.07); cursor: pointer; }
.website-chat-add-button { justify-self: start; min-height: 32px; padding: 0 11px; border: 1px solid rgba(22,138,205,.18); border-radius: 10px; color: #168acd; background: rgba(22,138,205,.06); cursor: pointer; font: inherit; font-size: 10px; font-weight: 560; }
.website-chat-add-button.is-prominent { margin: 1px 0 0; }
.website-chat-special-date > header { display: flex; min-height: 43px; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(60,60,67,.07); }
.website-chat-special-date > header strong { font-size: 11px; }
.website-chat-flow-card { overflow: hidden; margin-bottom: 10px; }
.website-chat-flow-card > header { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(60,60,67,.08); }
.website-chat-flow-card > header > div h3 { margin: 0; font-size: 13px; }
.website-chat-flow-card > header > div p { margin: 2px 0 0; color: #92979c; font-size: 9px; }
.website-chat-flow-card > header .website-chat-human-row { min-height: auto; padding: 0; border: 0; }
.website-chat-flow-card > header .website-chat-field-heading { display: none; }
.website-chat-flow-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: #168acd; background: rgba(22,138,205,.09); font-size: 10px; font-weight: 680; }
.website-chat-question-list { border-top: 1px solid rgba(60,60,67,.08); }
.website-chat-question-list > summary { min-height: 44px !important; padding: 8px 14px !important; color: #555e65; font-size: 11px; }
.website-chat-question-list > summary span { display: inline-grid; min-width: 20px; height: 20px; margin-left: 6px; place-items: center; border-radius: 10px; color: #168acd; background: rgba(22,138,205,.1); }
.website-chat-question-list > div { display: grid; gap: 8px; padding: 0 10px 10px; }
.website-chat-question-card { overflow: hidden; }
.website-chat-wait-card { overflow: hidden; }
.website-chat-settings-card footer { gap: 12px; padding: 13px 16px; }
.website-chat-settings-card footer span i { display: inline-grid; width: 17px; height: 17px; margin-right: 4px; place-items: center; border-radius: 50%; color: #278a50; background: rgba(48,183,94,.1); font-style: normal; }
.website-chat-settings-card footer button { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; padding: 0 15px; border: 0; border-radius: 12px; box-shadow: 0 6px 15px rgba(22,138,205,.16); cursor: pointer; transition: 120ms ease; }
.website-chat-settings-card footer button svg { width: 18px; height: 18px; }
.website-chat-settings-card footer button:active { transform: scale(.96); box-shadow: inset 0 2px 5px rgba(0,0,0,.14); }
.website-chat-settings-card footer button.is-saving svg { animation: website-chat-spin .8s linear infinite; }
.website-chat-help[hidden] { display: none; }
.website-chat-help { position: fixed; z-index: 1000; inset: 0; display: grid; padding: 20px; place-items: center; opacity: 0; transition: opacity 160ms ease; }
.website-chat-help.is-open { opacity: 1; }
.website-chat-help-backdrop { position: absolute; inset: 0; border: 0; background: rgba(22,28,34,.34); backdrop-filter: blur(8px); }
.website-chat-help > section { position: relative; display: grid; width: min(390px, 100%); grid-template-columns: 46px minmax(0,1fr); gap: 12px; padding: 20px; border: 1px solid rgba(255,255,255,.75); border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: 0 24px 70px rgba(20,36,50,.24); transform: translateY(8px) scale(.98); transition: 160ms ease; }
.website-chat-help.is-open > section { transform: none; }
.website-chat-help-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg,#35a2df,#168acd); font-size: 20px; font-weight: 700; }
.website-chat-help h2 { margin: 2px 0 5px; color: #272c31; font-size: 17px; }
.website-chat-help p { margin: 0; color: #737b82; font-size: 12px; line-height: 1.5; }
.website-chat-help-close { grid-column: 1 / -1; min-height: 40px; border: 0; border-radius: 12px; color: #fff; background: #168acd; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.website-chat-scheduled-actions { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 8px; }
.website-chat-scheduled-actions .website-chat-help-close { grid-column: auto; color: #5f6870; background: #eef1f4; }
.website-chat-scheduled-actions .website-chat-help-close.is-primary { color: #fff; background: #168acd; }
.website-chat-scheduled-actions button:active { transform: scale(.97); }

/* Messages: clearer state, navigation, and useful empty space */
.messages-page-v2 .messages-segments { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 3px; padding: 4px; }
.messages-page-v2 .messages-segments button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: #6f777e; transition: 120ms ease; }
.messages-page-v2 .messages-segments button svg { width: 16px; height: 16px; }
.messages-page-v2 .messages-segments button b { font: inherit; font-weight: 570; }
.messages-page-v2 .messages-segments button:hover { color: #168acd; background: rgba(255,255,255,.55); }
.messages-page-v2 .messages-segments button:active { transform: scale(.95); }
.messages-page-v2 .messages-segments button.is-active { color: #fff; background: linear-gradient(145deg,#349fdd,#168acd); box-shadow: 0 4px 10px rgba(22,138,205,.2); }
.messages-page-v2 .messages-segments button.is-active span { color: #168acd; background: #fff; }
.messages-archive-button { min-height: 40px; border-color: rgba(22,138,205,.18); color: #4d5963; background: #fff; box-shadow: 0 5px 16px rgba(35,55,74,.07); }
.messages-archive-button:hover { color: #168acd; transform: translateY(-1px); }
.messages-archive-button:active { transform: scale(.95); box-shadow: inset 0 2px 5px rgba(0,0,0,.11); }
.messages-archive-button.is-active { color: #fff; background: #5e6871; }
.messages-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.messages-notification-controls { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 9px; color: #717981; font-size: 12px; }
.messages-notification-controls > button { min-height: 44px; padding: 0 14px; border: 1px solid rgba(22,138,205,.18); border-radius: 12px; color: #168acd; background: #fff; cursor: pointer; font: inherit; font-weight: 620; }
.messages-notification-controls > span { min-width: 190px; }
.messages-notification-controls > label { grid-column: 1 / -1; justify-self: end; display: inline-flex; min-height: 28px; align-items: center; gap: 6px; cursor: pointer; }
.messages-notification-controls input { width: 18px; height: 18px; }
.messages-notification-controls > label + label { margin-left: 8px; }
.messages-new-sms-button { display: inline-flex; min-height: 44px; align-items: center; gap: 7px; padding: 0 14px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(145deg,#349fdd,#168acd); box-shadow: 0 6px 16px rgba(22,138,205,.2); cursor: pointer; font: inherit; font-size: 12px; font-weight: 620; }
.messages-new-sms-button svg { width: 17px; height: 17px; }
.messages-new-sms-button:active { transform: scale(.96); }
.messages-page-v2 .message-list-item { border-bottom: 1px solid rgba(60,60,67,.07); }
.messages-page-v2 .message-list-item.is-active { background: linear-gradient(90deg, rgba(22,138,205,.18), rgba(22,138,205,.07)); box-shadow: inset 3px 0 #168acd; }
.messages-list-footer { display: flex; min-height: 92px; align-items: center; justify-content: center; gap: 9px; padding: 18px; color: #8b9298; text-align: left; }
.messages-list-footer img,
.messages-list-empty img { width: 34px; height: 34px; object-fit: contain; opacity: .58; filter: grayscale(.25); }
.messages-list-footer span { display: grid; gap: 2px; }
.messages-list-footer strong { color: #697178; font-size: 10px; font-weight: 590; }
.messages-list-footer small { font-size: 8px; }
.messages-list-empty img { justify-self: center; margin-bottom: 5px; }
.messages-page-v2 .messages-empty-state { gap: 8px; padding: 36px; }
.messages-empty-fox { position: relative; display: grid; width: 92px; height: 92px; margin-bottom: 4px; place-items: center; border: 1px solid rgba(22,138,205,.1); border-radius: 29px; background: linear-gradient(145deg,rgba(255,255,255,.95),rgba(230,241,250,.94)); box-shadow: 0 16px 38px rgba(28,61,88,.11); }
.messages-empty-fox::before,
.messages-empty-fox::after { position: absolute; border-radius: 50%; background: rgba(22,138,205,.16); content: ''; }
.messages-empty-fox::before { top: 10px; right: -8px; width: 16px; height: 16px; box-shadow: -92px 50px 0 -4px rgba(120,99,203,.18); }
.messages-empty-fox::after { right: 11px; bottom: -11px; width: 8px; height: 8px; }
.messages-empty-fox img { width: 64px; height: 64px; object-fit: contain; }
.messages-empty-kicker { color: #168acd; font-size: 9px; font-weight: 680; letter-spacing: .12em; text-transform: uppercase; }
.messages-page-v2 .messages-empty-state > strong { color: #2c3136; font-size: 20px; font-weight: 620; }
.messages-page-v2 .messages-empty-state > p { margin: 0 0 8px; color: #81888f; font-size: 11px; line-height: 1.5; }
.messages-empty-guide { display: grid; width: min(470px,100%); grid-template-columns: repeat(3,minmax(0,1fr)); overflow: hidden; border: 1px solid rgba(60,60,67,.08); border-radius: 14px; background: rgba(255,255,255,.72); }
.messages-empty-guide > span { display: grid; grid-template-columns: 9px minmax(0,1fr); gap: 2px 6px; padding: 11px; text-align: left; }
.messages-empty-guide > span + span { border-left: 1px solid rgba(60,60,67,.07); }
.messages-empty-guide i { width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; background: #168acd; }
.messages-empty-guide i.is-website { background: #8068ce; }
.messages-empty-guide i.is-client { background: #31a960; }
.messages-empty-guide b { color: #50585f; font-size: 10px; font-weight: 600; }
.messages-empty-guide small { grid-column: 2; color: #92979c; font-size: 8px; }

.messages-page-v2 :is(button, input, select, textarea),
.message-client-picker :is(button, input) { font-size: max(12px, 1em); }
.messages-page-v2 :is(.messages-segments button, .message-list-item, .message-icon-button, .message-mobile-back),
.message-client-picker :is(button, input) { min-height: 44px; }
.message-client-result > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; text-align: left; }
.message-client-result > span:nth-child(2) strong { overflow: hidden; color: #30363b; font-size: 12px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.message-client-result > span:nth-child(2) small { overflow: hidden; color: #899198; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.message-client-result:disabled { cursor: not-allowed; opacity: .5; }

.new-sms-picker > section { max-height: min(760px, calc(100dvh - 40px)); }
.new-sms-picker [data-new-sms-choose] { display: grid; min-height: 0; grid-template-rows: auto minmax(0,1fr); overflow: hidden; }
.new-sms-picker [data-new-sms-choose][hidden], .new-sms-consent[hidden] { display: none; }
.new-sms-consent { display: grid; gap: 13px; padding: 14px 16px 16px; overflow: auto; }
.new-sms-back { justify-self: start; min-height: 34px !important; padding: 0; border: 0; color: #168acd; background: transparent; cursor: pointer; font: inherit; font-size: 11px; }
.new-sms-client { display: flex; align-items: center; gap: 10px; padding: 11px; border-radius: 13px; background: rgba(22,138,205,.07); }
.new-sms-client > span:last-child { display: grid; gap: 2px; }
.new-sms-client strong { color: #30363b; font-size: 13px; }
.new-sms-client small { color: #7c858d; font-size: 11px; }
.new-sms-disclosure { padding: 13px; border: 1px solid rgba(244,180,0,.24); border-radius: 13px; background: rgba(255,221,45,.12); }
.new-sms-disclosure strong { color: #3b3f43; font-size: 12px; }
.new-sms-disclosure p { margin: 5px 0 0; color: #6d747a; font-size: 10px; line-height: 1.5; }
.new-sms-confirm { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: start; gap: 8px; color: #3e454b; font-size: 11px; line-height: 1.45; }
.new-sms-confirm input { width: 19px; height: 19px; }
.new-sms-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.new-sms-consent > label:not(.new-sms-confirm), .new-sms-fields label { display: grid; gap: 5px; color: #707980; font-size: 10px; }
.new-sms-consent :is(input, select) { width: 100%; min-height: 44px; padding: 0 11px; border: 1px solid rgba(60,60,67,.12); border-radius: 11px; color: #2f353a; background: #fff; font: inherit; font-size: 12px; }
.new-sms-consent footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
.new-sms-consent footer button { min-height: 42px; padding: 0 14px; border: 0; border-radius: 11px; color: #68717a; background: #eef1f4; cursor: pointer; font: inherit; font-size: 11px; font-weight: 620; }
.new-sms-consent footer button.is-primary { color: #fff; background: #168acd; }
.new-sms-consent footer button:disabled { cursor: not-allowed; opacity: .4; }
.messages-page-v2 .message-thread-stream :is(p, small),
.messages-page-v2 .message-detail-card :is(p, dt, dd) { font-size: max(12px, 1em); line-height: 1.5; }
.messages-page-v2 .website-chat-composer textarea,
.messages-page-v2 .website-chat-composer select { min-height: 44px; font-size: 16px; line-height: 1.4; }
.messages-page-v2 .website-chat-composer button { min-height: 44px; font-size: 12px; }

@media (max-width: 900px) {
  .website-chat-control-card { display: grid; }
  .website-chat-control-actions { width: 100%; }
}
@media (max-width: 680px) {
  .website-chat-control-card { padding: 14px; }
  .website-chat-control-actions { grid-template-columns: 1fr 1fr; }
  .website-chat-control-actions button:last-child { grid-column: 1 / -1; }
  .website-chat-control-actions button { min-height: 68px; grid-template-columns: 30px minmax(0,1fr); gap: 6px; padding: 8px; }
  .website-chat-control-actions button > i { position: absolute; top: 7px; right: 7px; width: 16px; height: 16px; }
  .website-chat-control-actions button strong { overflow: visible; padding-right: 12px; font-size: 10.5px; line-height: 1.12; text-overflow: clip; white-space: nowrap; }
  .website-chat-control-actions button small { overflow: visible; font-size: 8px; line-height: 1.15; text-overflow: clip; white-space: normal; }
  .website-chat-control-action-icon { width: 30px; height: 30px; }
  .website-chat-human-grid { grid-template-columns: 1fr; }
  .website-chat-human-row,
  .website-chat-human-field,
  .website-chat-human-grid > :nth-child(even),
  .website-chat-human-grid > :nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid rgba(60,60,67,.07); }
  .website-chat-human-grid > :last-child { border-bottom: 0; }
  .website-chat-settings-card.is-human summary { min-height: 72px; padding: 10px 12px; }
  .website-chat-section-copy em { max-width: 235px; }
  .website-chat-settings-human { padding: 9px; }
  .website-chat-settings-card footer { align-items: stretch; flex-direction: column; }
  .website-chat-settings-card footer button { justify-content: center; }
  .website-chat-time-range { grid-template-columns: 1fr auto 1fr 30px; }
  .website-chat-flow-card > header { grid-template-columns: 34px minmax(0,1fr) auto; }
  .messages-archive-button { width: auto; min-width: 40px; padding: 0 11px; }
  .messages-archive-button span { display: inline; }
  .messages-page-v2 .messages-page-header { align-items: stretch; }
  .messages-header-actions { align-items: stretch; flex-direction: column-reverse; }
  .messages-notification-controls { grid-template-columns: 1fr; }
  .messages-notification-controls > span { min-width: 0; }
  .messages-notification-controls > label { grid-column: 1; justify-self: start; }
  .messages-notification-controls > label + label { margin-left: 0; }
  .messages-new-sms-button { justify-content: center; }
  .new-sms-fields { grid-template-columns: 1fr; }
  .messages-page-v2 .messages-workspace { height: auto; min-height: min(570px, calc(100dvh - 185px)); }
  .messages-page-v2.is-detail-open .messages-workspace { height: auto; min-height: 500px; overflow: visible; }
  .messages-page-v2.is-detail-open .messages-detail.is-chat-thread { height: 100%; }
  .messages-page-v2 .messages-sidebar { min-height: min(570px, calc(100dvh - 185px)); }
  .messages-page-v2 .messages-empty-state { min-height: min(570px, calc(100dvh - 185px)); padding: 24px 18px 92px; }
  .messages-empty-guide { grid-template-columns: 1fr; }
  .messages-empty-guide > span + span { border-top: 1px solid rgba(60,60,67,.07); border-left: 0; }
}

/* SMS parity: server-owned threads, permission states and durable Safe Sending */
.messages-page-v2 .message-avatar.is-sms { color: #166fae; background: #dceeff; }
.messages-page-v2 .message-list-copy em {
  overflow: hidden;
  color: #9aa1a8;
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messages-page-v2 .message-list-meta b {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--messages-blue);
  font-size: 9px;
}
.sms-thread {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
}
.sms-thread > header {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}
.sms-thread .message-thread-stream {
  min-height: 0;
  padding: 12px 4px 20px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.sms-thread-controls { display: grid; min-width: 0; max-width: 100%; gap: 9px; padding-top: 8px; }
.sms-client-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid rgba(36,129,204,.13);
  border-radius: 15px;
  background: linear-gradient(135deg,rgba(255,255,255,.97),rgba(238,247,255,.91));
}
.sms-client-card > div:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.sms-client-card strong { overflow-wrap: anywhere; color: #30353a; font-size: 12px; font-weight: 590; }
.sms-client-card p { margin: 0; color: #80878e; font-size: 10px; line-height: 1.4; }
.sms-client-card > div:last-child { display: flex; gap: 6px; }
.sms-client-card button,
.sms-pending-actions button {
  min-height: 44px;
  padding: 0 13px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: var(--messages-blue);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
}
.sms-client-card button.is-secondary { color: #66717b; background: rgba(118,118,128,.1); }
.sms-permission-callout {
  padding: 11px 13px;
  border: 1px solid rgba(205,137,44,.2);
  border-radius: 14px;
  background: #fff8e9;
}
.sms-permission-callout strong { color: #8a5d1c; font-size: 12px; }
.sms-permission-callout p { margin: 3px 0 0; color: #8f7b5f; font-size: 10px; line-height: 1.45; }
.sms-permission-callout.is-info { border-color: rgba(22,138,205,.22); background: rgba(22,138,205,.07); }
.sms-permission-callout.is-info strong { color: #166fae; }
.sms-permission-callout.is-info p { color: #61798b; }
.sms-pending-list {
  display: grid;
  max-height: 146px;
  gap: 7px;
  padding: 11px;
  overflow-y: auto;
  border: 1px solid rgba(237,158,46,.2);
  border-radius: 15px;
  background: rgba(255,248,234,.9);
  scrollbar-gutter: stable;
}
.sms-pending-list h3 { margin: 0 0 2px; color: #98631d; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.sms-pending-list > article { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px; border-radius: 11px; background: rgba(255,255,255,.76); }
.sms-pending-list > article.is-policy-held { border: 1px solid rgba(205,137,44,.2); background: rgba(255,248,234,.96); }
.sms-pending-list > article.is-policy-held > div:first-child > span { color: #8a5d1c; font-weight: 650; }
.sms-pending-list > article > div:first-child { display: grid; min-width: 0; gap: 2px; }
.sms-pending-list strong { overflow-wrap: anywhere; color: #3b4146; font-size: 11px; font-weight: 560; }
.sms-pending-list span,
.sms-pending-list small { color: #88755a; font-size: 9px; }
.sms-pending-actions { display: flex; gap: 6px; }
.sms-pending-actions button { min-height: 38px; color: #ad2f49; background: rgba(190,48,78,.09); }
.sms-pending-actions button:last-child { color: #fff; background: #168acd; }
.sms-delivery { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 9px; font-size: 9px; }
.sms-delivery::before { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #9aa1a8; content: ''; }
.sms-delivery.is-delivered::before { background: #2cab54; }
.sms-delivery.is-failed::before,
.sms-delivery.is-undelivered::before { background: #e34d59; }
.sms-delivery.is-pending::before,
.sms-delivery.is-accepted::before,
.sms-delivery.is-queued::before,
.sms-delivery.is-sending::before,
.sms-delivery.is-sent::before { background: #d69027; }
.sms-delivery.is-canceled::before,
.sms-delivery.is-unknown::before { background: #8d969e; }
.message-bubble.is-outbound .sms-delivery { color: rgba(255,255,255,.82); }
.sms-safe-error { overflow-wrap: anywhere; }
.message-bubble:not(.is-outbound) .sms-safe-error { color: #bd3150; }
.sms-composer textarea { max-height: 132px; }
.sms-composer,
.sms-composer .website-chat-language-row,
.sms-composer label { min-width: 0; max-width: 100%; }
.sms-thread :is(button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(22,138,205,.24);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .sms-thread > header { grid-template-columns: auto auto minmax(0,1fr); }
  .sms-thread > header .message-detail-actions { grid-column: 1 / -1; justify-self: end; }
  .sms-thread .message-thread-stream { padding-right: 0; }
  .sms-client-card { grid-template-columns: 36px minmax(0,1fr); }
  .sms-client-card > div:last-child { grid-column: 1 / -1; }
  .sms-client-card button { flex: 1; }
  .sms-pending-list > article { grid-template-columns: 1fr; }
  .sms-pending-actions { justify-content: stretch; }
  .sms-pending-actions button { flex: 1; }
}

@media (max-width: 480px) {
  .sms-thread > header .message-detail-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-self: stretch;
  }
  .sms-thread > header .message-detail-actions .has-label { flex: 1 1 118px; }
  .sms-composer .website-chat-language-row { grid-template-columns: minmax(0,1fr); }
  .sms-composer > div:last-child { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sms-composer button { width: 100%; padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .sms-thread *,
  .messages-page-v2 .message-list-item { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}