html[data-mobile-theme="dark"] {
  --d-bg: var(--kz-bg);
  --d-surface: var(--kz-surface);
  --d-elevated: var(--kz-elevated);
  --d-border: var(--kz-border);
  --d-text: var(--kz-text);
  --d-muted: var(--kz-muted);
  --d-accent: var(--kz-accent);
  --d-accent-ink: var(--kz-accent-ink);
  --d-success: var(--kz-success);
  --d-danger: var(--kz-danger);
  --d-warning: var(--kz-accent);
  --d-shadow: var(--kz-shadow);
  --d-soft-shadow: var(--kz-soft-shadow);
}

html[data-mobile-theme="light"] {
  --d-bg: var(--kz-bg);
  --d-surface: var(--kz-surface);
  --d-elevated: var(--kz-elevated);
  --d-border: var(--kz-border);
  --d-text: var(--kz-text);
  --d-muted: var(--kz-muted);
  --d-accent: var(--kz-accent);
  --d-accent-ink: var(--kz-accent-ink);
  --d-success: var(--kz-success);
  --d-danger: var(--kz-danger);
  --d-warning: var(--kz-accent);
  --d-shadow: var(--kz-shadow);
  --d-soft-shadow: var(--kz-soft-shadow);
}

@media (min-width: 761px) {
  html[data-mobile-theme="dark"] { color-scheme: dark; }
  html[data-mobile-theme="light"] { color-scheme: light; }

  html,
  body {
    background: var(--d-bg) !important;
  }

  body,
  body:has(#loginView:not(.hidden)),
  body:not(:has(#loginView:not(.hidden))) {
    color: var(--d-text) !important;
    background: var(--d-bg) !important;
    background-image: none !important;
    font-family: "IBM Plex Sans", Arial, sans-serif;
  }

  h1,
  h2,
  h3,
  .client-card h3,
  .catalog-product-copy h3,
  .agenda-activation-copy h3,
  .form-section-head h3,
  #novoClienteForm h3,
  #novaChaveForm h3 {
    color: var(--d-text) !important;
    font-family: "Sora", "IBM Plex Sans", Arial, sans-serif !important;
    letter-spacing: 0;
  }

  p,
  .help,
  .muted,
  .meta,
  .section-head p:not(.section-kicker),
  .subsection-head p,
  .form-section-head p,
  .client-module-copy span,
  .catalog-product-description,
  .catalog-total span,
  .agenda-activation-copy p,
  .agenda-toolbar > strong,
  .agenda-client-history-empty {
    color: var(--d-muted) !important;
  }

  .section-kicker,
  #loginView .entry-eyebrow,
  #clienteView .client-home-copy .eyebrow {
    color: var(--d-accent) !important;
  }

  body:not(:has(#loginView:not(.hidden))) > header {
    min-height: 66px;
    padding: 10px 22px;
    border-bottom: 1px solid color-mix(in srgb, var(--d-border) 88%, transparent);
    background: color-mix(in srgb, var(--d-bg) 94%, transparent);
    box-shadow: 0 14px 36px var(--d-soft-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  body:not(:has(#loginView:not(.hidden))) > header .brand {
    gap: 11px;
  }

  body:not(:has(#loginView:not(.hidden))) > header .brand-mark,
  #loginView .entry-brand-mark,
  #loginView .kaio-monogram {
    border-radius: 8px;
    background: var(--d-elevated) !important;
    box-shadow: none !important;
  }

  body:not(:has(#loginView:not(.hidden))) > header h1,
  #loginView .entry-brand-name strong {
    color: var(--d-text) !important;
  }

  body:not(:has(#loginView:not(.hidden))) > header .brand span,
  #loginView .entry-brand-name span {
    color: var(--d-muted) !important;
  }

  body:not(:has(#loginView:not(.hidden))) #userLabel,
  #loginView .entry-access-label {
    min-height: 34px;
    border: 1px solid var(--d-border) !important;
    background: var(--d-surface) !important;
    color: var(--d-muted) !important;
    box-shadow: none !important;
  }

  #loginView .entry-access-label::before {
    background: var(--d-success) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--d-success) 15%, transparent) !important;
  }

  .mobile-theme-toggle {
    min-height: 34px;
    padding: 0 12px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--d-border) !important;
    border-radius: 8px !important;
    background: var(--d-surface) !important;
    color: var(--d-text) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .mobile-theme-label {
    display: inline !important;
    color: inherit;
  }

  .mobile-theme-icon {
    font-size: 15px;
    line-height: 1;
  }

  body:not(:has(#loginView:not(.hidden))) #installAppHeaderBtn,
  body:not(:has(#loginView:not(.hidden))) #logoutBtn {
    min-height: 34px;
    border: 1px solid var(--d-border) !important;
    border-radius: 8px !important;
    background: var(--d-surface) !important;
    color: var(--d-text) !important;
    box-shadow: none !important;
  }

  body:not(:has(#loginView:not(.hidden))) #installAppHeaderBtn:hover,
  body:not(:has(#loginView:not(.hidden))) #logoutBtn:hover,
  .mobile-theme-toggle:hover {
    border-color: color-mix(in srgb, var(--d-accent) 55%, var(--d-border)) !important;
    background: var(--d-elevated) !important;
    color: var(--d-text) !important;
  }

  body:not(:has(#loginView:not(.hidden))) > main {
    width: min(1220px, calc(100% - 48px));
    padding: 26px 0 72px;
  }

  #loginView.entry-shell {
    min-height: 100svh;
    color: var(--d-text) !important;
    background: var(--d-bg) !important;
  }

  #loginView .entry-topbar {
    border-bottom: 1px solid var(--d-border) !important;
    background: color-mix(in srgb, var(--d-bg) 94%, transparent) !important;
    box-shadow: 0 14px 32px var(--d-soft-shadow);
  }

  #loginView .entry-topbar-inner {
    min-height: 70px;
  }

  #loginView .entry-main {
    min-height: calc(100svh - 128px);
    align-items: center;
  }

  #loginView .entry-neural {
    opacity: 0.24;
  }

  #loginView .entry-copy {
    color: var(--d-text) !important;
  }

  #loginView .entry-copy::after {
    -webkit-text-stroke-color: color-mix(in srgb, var(--d-accent) 12%, transparent) !important;
  }

  #loginView .entry-copy h1 {
    color: var(--d-text) !important;
  }

  #loginView .entry-tagline,
  #loginView .entry-intro,
  #loginView .entry-page-footer span,
  #loginView .entry-flow small,
  #loginView .login-card .help,
  #loginView .access-invite p,
  #loginView .entry-trust {
    color: var(--d-muted) !important;
  }

  #loginView .entry-flow li,
  #loginView .login-card,
  #loginView .access-invite {
    border: 1px solid var(--d-border) !important;
    border-radius: 8px !important;
    background: var(--d-surface) !important;
    color: var(--d-text) !important;
    box-shadow: 0 18px 42px var(--d-soft-shadow) !important;
  }

  #loginView .entry-flow li:not(:first-child) {
    border-left-color: var(--d-border) !important;
  }

  #loginView .entry-flow span,
  #loginView .login-kicker {
    color: var(--d-accent) !important;
  }

  #loginView .trial-whatsapp-btn {
    border: 1px solid color-mix(in srgb, var(--d-accent) 58%, var(--d-border)) !important;
    border-radius: 8px !important;
    background: var(--d-surface) !important;
    color: var(--d-text) !important;
    box-shadow: inset 0 -3px 0 var(--d-accent) !important;
  }

  #loginView .login-card input,
  #loginView .login-card select,
  body:not(:has(#loginView:not(.hidden))) input,
  body:not(:has(#loginView:not(.hidden))) select,
  body:not(:has(#loginView:not(.hidden))) textarea {
    border: 1px solid var(--d-border) !important;
    border-radius: 8px !important;
    background: var(--d-elevated) !important;
    color: var(--d-text) !important;
    box-shadow: none !important;
    outline: none;
  }

  #loginView .login-card input:focus,
  #loginView .login-card select:focus,
  body:not(:has(#loginView:not(.hidden))) input:focus,
  body:not(:has(#loginView:not(.hidden))) select:focus,
  body:not(:has(#loginView:not(.hidden))) textarea:focus {
    border-color: var(--d-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--d-accent) 18%, transparent) !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: color-mix(in srgb, var(--d-muted) 72%, transparent) !important;
  }

  .agenda-day-picks input,
  .catalog-dropzone input,
  .catalog-file-button input {
    width: 1px !important;
    min-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .checkbox-line input,
  .agenda-check input,
  .catalog-active-check input,
  .feature-toggle-card input {
    width: auto !important;
    min-width: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
  }

  body:not(:has(#loginView:not(.hidden))) label,
  #loginView .login-card label {
    color: var(--d-text) !important;
  }

  body:not(:has(#loginView:not(.hidden))) button:not(.feature-toggle-card) {
    border-radius: 8px !important;
    background: var(--d-text) !important;
    color: var(--d-bg) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #loginView .login-card #loginBtn {
    border-radius: 8px !important;
    background: var(--d-text) !important;
    color: var(--d-bg) !important;
    box-shadow: inset 0 -3px 0 var(--d-accent) !important;
    transform: none !important;
  }

  body:not(:has(#loginView:not(.hidden))) button:not(.feature-toggle-card):hover {
    background: color-mix(in srgb, var(--d-text) 86%, var(--d-accent)) !important;
    color: var(--d-bg) !important;
    transform: none !important;
  }

  #loginView .login-card #loginBtn:hover {
    background: color-mix(in srgb, var(--d-accent) 88%, var(--d-text)) !important;
    color: var(--d-accent-ink) !important;
    transform: none !important;
  }

  body:not(:has(#loginView:not(.hidden))) button.secondary,
  #loginView button.secondary,
  .catalog-report-actions a {
    border: 1px solid var(--d-border) !important;
    background: var(--d-surface) !important;
    color: var(--d-text) !important;
    box-shadow: none !important;
  }

  body:not(:has(#loginView:not(.hidden))) button.secondary:hover,
  #loginView button.secondary:hover,
  .catalog-report-actions a:hover {
    border-color: color-mix(in srgb, var(--d-accent) 48%, var(--d-border)) !important;
    background: var(--d-elevated) !important;
  }

  body:not(:has(#loginView:not(.hidden))) button.danger {
    background: var(--d-danger) !important;
    color: #FFFFFF !important;
  }

  body:not(:has(#loginView:not(.hidden))) button.warning {
    background: var(--d-text) !important;
    color: var(--d-bg) !important;
    box-shadow: inset 0 -3px 0 var(--d-warning) !important;
  }

  button:disabled {
    opacity: 0.58;
  }

  #adminView > nav,
  #clienteView > nav,
  .catalog-view-switch,
  .agenda-workspace-tabs,
  .agenda-view-switch {
    border: 1px solid var(--d-border) !important;
    border-radius: 8px !important;
    background: var(--d-surface) !important;
    box-shadow: none !important;
  }

  #adminView > nav,
  #clienteView > nav {
    top: 82px;
  }

  #adminView > nav {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch;
    gap: 6px;
    overflow: visible;
  }

  #adminView > nav button {
    min-width: 0;
    min-height: 54px;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;
    gap: 8px;
    padding: 8px 11px !important;
    text-align: left;
    white-space: normal !important;
    line-height: 1.18;
  }

  #adminView > nav button .nav-label {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  #clienteView > nav {
    top: auto !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(164px, 1fr)) !important;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 32px;
    overflow: visible;
  }

  #adminView > nav button,
  #clienteView > nav button,
  .catalog-view-switch button,
  .agenda-workspace-tabs button,
  .agenda-view-switch button {
    background: transparent !important;
    color: var(--d-muted) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #clienteView > nav button {
    min-width: 0;
    min-height: 54px;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    justify-content: stretch;
    column-gap: 8px;
    row-gap: 2px;
    padding: 8px 11px !important;
    text-align: left;
    white-space: normal !important;
    overflow: visible;
    line-height: 1.18;
  }

  #clienteView > nav button .nav-step {
    grid-row: 1 / span 2;
  }

  #clienteView > nav button .nav-label {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  #clienteView > nav button .module-access-state {
    grid-column: 2;
    width: auto;
    margin-left: 0;
    text-align: left;
    line-height: 1.1;
  }

  .nav-step,
  .quick-action-step,
  .form-section-number,
  .agenda-step-number,
  .qr-steps span {
    background: color-mix(in srgb, var(--d-accent) 18%, transparent) !important;
    color: var(--d-accent) !important;
  }

  #adminView > .panel,
  #clienteView > .panel,
  #clienteView > form.panel {
    background: transparent !important;
  }

  .section-head {
    margin-bottom: 22px;
  }

  .section-head h2 {
    font-size: 30px;
  }

  .section-head p:not(.section-kicker) {
    max-width: 690px;
    font-size: 14px;
  }

  .subsection-head {
    border-top: 1px solid var(--d-border) !important;
  }

  #adminView .metric,
  #clienteView .metric,
  .client-card,
  #novoClienteForm,
  #novaChaveForm,
  .form-section,
  .notice,
  .banner,
  .chat-shell,
  .qr-guide,
  .qr-stage,
  .catalog-product-card,
  .catalog-sale-card,
  .catalog-empty,
  .catalog-import-guide,
  .catalog-dropzone,
  .feature-toggle-card,
  .feature-details,
  .feature-details-collapsible,
  .catalog-report-kpi,
  .agenda-activation,
  .agenda-calendar-week,
  .agenda-calendar-month,
  .agenda-clients-summary > div,
  .agenda-client-card,
  .agenda-resource-item,
  .agenda-client-history {
    border: 1px solid var(--d-border) !important;
    border-radius: 8px !important;
    background: var(--d-surface) !important;
    color: var(--d-text) !important;
    box-shadow: none !important;
  }

  #adminView .metric,
  #clienteView .metric {
    min-height: 112px;
  }

  #adminView .metric::before,
  #clienteView .metric::before {
    background: var(--d-accent) !important;
  }

  #adminView .metric strong,
  #clienteView .metric strong {
    color: var(--d-text) !important;
  }

  .client-card.wants-continuation {
    border-color: color-mix(in srgb, var(--d-accent) 45%, var(--d-border)) !important;
    background: color-mix(in srgb, var(--d-accent) 10%, var(--d-surface)) !important;
  }

  .client-card .actions,
  .client-module-controls,
  .catalog-import-report,
  .form-section-head,
  .agenda-toolbar {
    border-color: var(--d-border) !important;
  }

  .client-card .status,
  .status,
  .catalog-product-meta span,
  .catalog-sale-status,
  .catalog-total,
  .continuation-badge,
  .token-meter {
    border: 1px solid var(--d-border) !important;
    background: var(--d-elevated) !important;
    color: var(--d-text) !important;
  }

  .client-ai-status,
  .client-schema-status {
    border: 1px solid var(--d-border) !important;
    background: var(--d-elevated) !important;
    color: var(--d-text) !important;
  }

  .client-ai-status strong,
  .client-schema-status strong {
    color: var(--d-text) !important;
  }

  .client-ai-status span,
  .client-schema-status span {
    color: var(--d-muted) !important;
  }

  .client-ai-status.is-online,
  .client-schema-status.is-online {
    border-color: color-mix(in srgb, var(--d-success) 44%, var(--d-border)) !important;
    background: color-mix(in srgb, var(--d-success) 10%, var(--d-elevated)) !important;
  }

  .feature-toggle-card strong,
  .feature-details-collapsible summary {
    color: var(--kz-text) !important;
  }

  .feature-toggle-card small {
    color: var(--kz-muted) !important;
  }

  .feature-toggle-card.is-active {
    border-color: var(--kz-text) !important;
    background: var(--kz-surface) !important;
    box-shadow: inset 3px 0 0 var(--kz-accent) !important;
  }

  .feature-details,
  .feature-details-collapsible[open] summary {
    border-color: var(--d-border) !important;
  }

  .feature-details {
    background: var(--d-elevated) !important;
  }

  .client-ai-status.is-pending,
  .client-schema-status.is-pending {
    border-color: color-mix(in srgb, var(--d-accent) 48%, var(--d-border)) !important;
    background: color-mix(in srgb, var(--d-accent) 11%, var(--d-elevated)) !important;
  }

  .client-ai-status.is-offline,
  .client-ai-status.is-error,
  .client-schema-status.is-offline,
  .client-schema-status.is-error {
    border-color: color-mix(in srgb, var(--d-danger) 45%, var(--d-border)) !important;
    background: color-mix(in srgb, var(--d-danger) 10%, var(--d-elevated)) !important;
  }

  .catalog-product-pending-chip {
    border-color: color-mix(in srgb, var(--d-accent) 46%, var(--d-border)) !important;
    background: color-mix(in srgb, var(--d-accent) 14%, var(--d-elevated)) !important;
    color: var(--d-accent) !important;
  }

  #clienteView .client-command-kpis .catalog-sales-kpi,
  #clienteView .client-dashboard-metrics-slot,
  #clienteView .client-activity-card {
    border: 1px solid var(--d-border) !important;
    background: var(--d-surface) !important;
    color: var(--d-text) !important;
    box-shadow: none !important;
  }

  #clienteView .client-command-kpis .catalog-sales-kpi strong {
    color: var(--d-text) !important;
  }

  #clienteView .client-command-kpis .catalog-sales-kpi span,
  #clienteView .client-activity-copy span,
  #clienteView .client-activity-time {
    color: var(--d-muted) !important;
  }

  #clienteView .client-dashboard-metrics-slot {
    grid-column: span 2;
  }

  #clienteView .client-dashboard-metrics-slot .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #clienteView .client-dashboard-metrics-slot .metric {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #clienteView .client-dashboard-metrics-slot .metric::before {
    display: none !important;
  }

  #clienteView .client-dashboard-metrics-slot .metric strong {
    margin: 0 0 6px !important;
    font-size: 22px !important;
  }

  #clienteView .client-activity-row {
    border-color: var(--d-border) !important;
  }

  #clienteView .client-command-actions {
    padding: 0 !important;
    border: 0 !important;
  }

  .token-meter-fill,
  .token-meter-bar > span {
    background: var(--d-accent) !important;
  }

  #clienteView .client-home {
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.72fr);
    border: 1px solid var(--d-border) !important;
    border-radius: 8px !important;
    background: var(--d-surface) !important;
    color: var(--d-text) !important;
    box-shadow: none !important;
  }

  #clienteView .client-home-copy {
    background: var(--d-surface) !important;
    color: var(--d-text) !important;
  }

  #clienteView .client-home-copy h2 {
    color: var(--d-text) !important;
  }

  #clienteView .client-home-copy p:not(.eyebrow) {
    color: var(--d-muted) !important;
  }

  #clienteView .home-primary-actions .secondary,
  #clienteView .quick-actions button {
    border: 1px solid var(--d-border) !important;
    background: var(--d-elevated) !important;
    color: var(--d-text) !important;
  }

  #clienteView .quick-actions {
    border-left: 1px solid var(--d-border) !important;
  }

  #clienteView .quick-action.is-primary {
    border-color: color-mix(in srgb, var(--d-accent) 62%, var(--d-border)) !important;
    background: var(--d-elevated) !important;
    color: var(--d-text) !important;
    box-shadow: inset 3px 0 0 var(--d-accent) !important;
  }

  #clienteView .quick-action.is-primary strong,
  #clienteView .quick-action.is-primary small,
  #clienteView .quick-action.is-primary .quick-action-step,
  #clienteView .quick-action.is-primary::after {
    color: var(--d-text) !important;
  }

  #clienteView .quick-action strong,
  #clienteView .quick-mini-action {
    color: var(--d-text) !important;
  }

  #clienteView .quick-action small,
  #clienteView .quick-action::after {
    color: var(--d-muted) !important;
  }

  .field-actions button {
    min-height: 36px;
  }

  #clientConfig .form-savebar,
  .form-savebar {
    border-top: 1px solid var(--d-border) !important;
    background: color-mix(in srgb, var(--d-bg) 94%, transparent) !important;
  }

  .blocked-row,
  .checkbox-line,
  .agenda-check,
  .catalog-active-check {
    border: 1px solid var(--d-border) !important;
    border-radius: 8px !important;
    background: var(--d-elevated) !important;
    color: var(--d-text) !important;
  }

  .catalog-toolbar,
  .catalog-connection-state,
  .catalog-sales-summary,
  .catalog-photo-field,
  .catalog-photo-preview,
  .catalog-product-image,
  .agenda-day-picks span,
  .agenda-client-alert,
  .agenda-advanced-modal details,
  .agenda-client-history-item,
  .msg,
  #clientTeste .chat,
  #qrBox {
    border: 1px solid var(--d-border) !important;
    border-radius: 8px !important;
    background: var(--d-elevated) !important;
    color: var(--d-text) !important;
    box-shadow: none !important;
  }

  .catalog-toolbar {
    background: transparent !important;
    border: 0 !important;
  }

  .catalog-file-button {
    border: 1px solid color-mix(in srgb, var(--d-accent) 58%, var(--d-border)) !important;
    background: var(--d-surface) !important;
    color: var(--d-text) !important;
    box-shadow: inset 0 -3px 0 var(--d-accent) !important;
  }

  .catalog-product-price {
    color: var(--d-text) !important;
  }

  .catalog-sale-card-head,
  .catalog-sale-info,
  .catalog-sale-items li,
  .catalog-report-error,
  .agenda-day,
  .agenda-month-cell,
  .agenda-client-card,
  .agenda-resource-item,
  .agenda-hours-row {
    border-color: var(--d-border) !important;
  }

  .agenda-calendar-week,
  .agenda-calendar-month {
    background: var(--d-surface) !important;
  }

  .agenda-day,
  .agenda-month-cell {
    background: var(--d-surface) !important;
  }

  .agenda-day.is-today,
  .agenda-month-cell.is-today {
    background: color-mix(in srgb, var(--d-accent) 10%, var(--d-surface)) !important;
  }

  .agenda-day-head,
  .agenda-month-day-number,
  .agenda-event strong,
  .agenda-client-card strong,
  .agenda-resource-item strong,
  .agenda-client-history h3 {
    color: var(--d-text) !important;
  }

  .agenda-event,
  .agenda-month-event {
    border: 1px solid color-mix(in srgb, var(--d-accent) 46%, var(--d-border)) !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--d-accent) 12%, var(--d-surface)) !important;
    color: var(--d-text) !important;
  }

  .agenda-day-picks input:checked + span {
    border-color: var(--d-accent) !important;
    background: color-mix(in srgb, var(--d-accent) 16%, var(--d-elevated)) !important;
    color: var(--d-accent) !important;
    box-shadow: inset 0 0 0 1px var(--d-accent) !important;
  }

  .agenda-advanced-modal summary {
    color: var(--d-text) !important;
  }

  .qr-steps li,
  #log,
  .agenda-client-history-item span,
  .agenda-resource-item span,
  .agenda-client-card span,
  .agenda-event span {
    color: var(--d-muted) !important;
  }

  .msg.user {
    background: color-mix(in srgb, var(--d-accent) 17%, var(--d-surface)) !important;
  }

  .msg:not(.user) {
    background: var(--d-elevated) !important;
  }

  table,
  #chavesLista table {
    border: 1px solid var(--d-border) !important;
    background: var(--d-surface) !important;
    color: var(--d-text) !important;
  }

  th,
  td,
  #chavesLista th,
  #chavesLista td {
    border-color: var(--d-border) !important;
    color: var(--d-text) !important;
  }

  th,
  #chavesLista th {
    background: var(--d-elevated) !important;
    color: var(--d-muted) !important;
  }

  .notice.error,
  .error {
    color: var(--d-danger) !important;
  }

  .success {
    color: var(--d-text) !important;
  }

  .catalog-connected-button,
  .module-enabled {
    background: var(--d-text) !important;
    color: var(--d-bg) !important;
    box-shadow: inset 0 -3px 0 var(--d-accent) !important;
  }

  .mobile-collapse-toggle,
  .mobile-card-menu-button,
  .mobile-details-toggle {
    display: none !important;
  }

  .mobile-details,
  .mobile-details-content {
    display: contents !important;
  }

  .mobile-secondary-action {
    display: inline-flex !important;
  }

  body:not(:has(#loginView:not(.hidden))) #clienteView .quick-actions button:not(.is-primary) {
    border: 1px solid var(--d-border) !important;
    background: var(--d-elevated) !important;
    color: var(--d-text) !important;
  }

  body:not(:has(#loginView:not(.hidden))) #clienteView .quick-actions button:not(.is-primary):hover {
    border-color: color-mix(in srgb, var(--d-accent) 48%, var(--d-border)) !important;
    background: color-mix(in srgb, var(--d-accent) 8%, var(--d-elevated)) !important;
  }

  body:not(:has(#loginView:not(.hidden))) #clienteView .quick-action.is-primary {
    border-color: color-mix(in srgb, var(--d-accent) 62%, var(--d-border)) !important;
    background: var(--d-elevated) !important;
    color: var(--d-text) !important;
    box-shadow: inset 3px 0 0 var(--d-accent) !important;
  }

  body:not(:has(#loginView:not(.hidden))) #adminView > nav button,
  body:not(:has(#loginView:not(.hidden))) #clienteView > nav button,
  body:not(:has(#loginView:not(.hidden))) .catalog-view-switch button,
  body:not(:has(#loginView:not(.hidden))) .agenda-workspace-tabs button,
  body:not(:has(#loginView:not(.hidden))) .agenda-view-switch button {
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--d-muted) !important;
    box-shadow: none !important;
  }

  body:not(:has(#loginView:not(.hidden))) #adminView > nav button:hover,
  body:not(:has(#loginView:not(.hidden))) #clienteView > nav button:hover,
  body:not(:has(#loginView:not(.hidden))) .catalog-view-switch button:hover,
  body:not(:has(#loginView:not(.hidden))) .agenda-workspace-tabs button:hover,
  body:not(:has(#loginView:not(.hidden))) .agenda-view-switch button:hover {
    border-color: var(--d-border) !important;
    background: var(--d-elevated) !important;
    color: var(--d-text) !important;
  }

  body:not(:has(#loginView:not(.hidden))) button:disabled,
  body:not(:has(#loginView:not(.hidden))) button[disabled] {
    border: 1px solid var(--d-border) !important;
    background: var(--d-elevated) !important;
    color: var(--d-muted) !important;
    box-shadow: none !important;
    opacity: 0.72 !important;
    cursor: not-allowed !important;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  body:not(:has(#loginView:not(.hidden))) > main {
    width: min(100% - 32px, 960px);
  }

  #clienteView > nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #clienteView > nav button {
    min-height: 48px;
  }

  #clienteView .client-home,
  .admin-client-layout,
  #clientQr .qr-layout,
  .catalog-form-grid,
  .agenda-client-modal-grid {
    grid-template-columns: 1fr !important;
  }

  #clienteView .quick-actions {
    border-left: 0 !important;
    border-top: 1px solid var(--d-border) !important;
  }
}