* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--font-body)/1.45 var(--font-sans); }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: var(--weight-heading); }
h1 { letter-spacing: -.025em; font-size: clamp(1.5rem, 3vw, 1.75rem); line-height: 1.2; }
h2 { font-size: 1rem; }
h3 { font-size: .9375rem; }
strong { font-weight: var(--weight-heading); }
small, .muted { color: var(--text-muted); }
.shell { max-width: var(--content-width); margin: auto; padding: var(--space-6) var(--space-4) calc(7rem + env(safe-area-inset-bottom)); }
.stack { display: grid; gap: var(--space-4); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grid { display: grid; gap: var(--space-4); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); padding: var(--control-padding); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: var(--surface); cursor: pointer; text-decoration: none; }
.button.primary { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.button:hover { background: var(--surface-muted); border-color: var(--control-border); }
.button.primary:hover { background: var(--accent); border-color: var(--accent); filter: brightness(.94); }
.button.icon-button { background: transparent; }
.button.icon-button:hover { background: var(--surface-muted); border-color: transparent; }
.button:disabled { opacity: .6; cursor: wait; }
.badge { display: inline-block; padding: .1875rem .4375rem; border-radius: .25rem; background: var(--surface-muted); font-size: var(--font-small); }
.badge.success { background: var(--success-bg); color: var(--success-text); }
.badge.warning { background: var(--warning-bg); color: var(--warning-text); }
.badge.info { background: var(--selected); color: var(--accent); }
.status-badge { font-size: .6875rem; font-weight: 600; white-space: nowrap; }
.field { display: grid; gap: .375rem; }
input, select { min-height: var(--control-height); width: 100%; padding: var(--control-padding); font-size: var(--font-control); color: var(--text); background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radius-sm); }
input[aria-invalid="true"] { border-color: var(--error-text); }
.error { color: var(--error-text); }
.nav { position: fixed; z-index: var(--layer-nav); bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; gap: var(--space-2); background: var(--surface); border-top: 1px solid var(--border); padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom)); }
.nav a, .nav button { display: grid; gap: var(--space-1); justify-items: center; min-width: 80px; min-height: 48px; border: 0; background: transparent; color: var(--text-muted); text-decoration: none; font: inherit; font-size: .875rem; cursor: pointer; }
.nav a[aria-current] { color: var(--accent); font-weight: 650; }
.nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
dialog { font-size: var(--font-body); width: 100%; max-width: none; max-height: calc(100dvh - 2rem); margin: auto 0 0; padding: var(--space-6) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom)); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--overlay-shadow); }
dialog::backdrop { background: var(--scrim); }
.sheet-actions { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.sheet-actions .button { justify-content: flex-start; }
body:has(dialog[open]) { overflow: hidden; }
@media (min-width: 40rem) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .shell { padding: var(--space-12) var(--space-8); padding-left: 15rem; }
  .nav { width: 12rem; right: auto; top: 0; flex-direction: column; justify-content: flex-start; border-top: 0; border-right: 1px solid var(--border); padding: var(--space-8) var(--space-4); }
  .nav a, .nav button { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); }
  dialog { max-width: 30rem; margin: auto; border-radius: var(--radius-lg); }
}
@media (prefers-reduced-motion: no-preference) {
  .button { transition: background-color var(--duration), border-color var(--duration), color var(--duration), filter var(--duration); }
  dialog {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity var(--duration-dialog) var(--ease-out),
      transform var(--duration-dialog) var(--ease-out),
      display var(--duration-dialog) allow-discrete,
      overlay var(--duration-dialog) allow-discrete;
  }
  dialog[open] { opacity: 1; transform: none; }
  dialog::backdrop {
    opacity: 0;
    transition: opacity var(--duration-dialog) var(--ease-out),
      display var(--duration-dialog) allow-discrete,
      overlay var(--duration-dialog) allow-discrete;
  }
  dialog[open]::backdrop { opacity: 1; }
  @starting-style {
    dialog[open] { opacity: 0; transform: translateY(1.5rem); }
    dialog[open]::backdrop { opacity: 0; }
  }
}
@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
  dialog { transform: translateY(.5rem); }
  dialog[open] { transform: none; }
  @starting-style { dialog[open] { transform: translateY(.5rem); } }
}
@media print { .nav, .theme-control { display: none; } .shell { padding: 0; } }

.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.icon-button { width: var(--control-height); height: var(--control-height); padding: 0; border-color: transparent; flex-shrink: 0; }
.avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; background: var(--surface-muted); color: var(--text-muted); border: 1px solid transparent; border-radius: 50%; font-weight: var(--weight-medium); flex-shrink: 0; aspect-ratio: 1; overflow: hidden; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
.avatar-small { width: 32px; height: 32px; }
.avatar img { display: block; min-width: 0; min-height: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
/* Shared controls: preserve native keyboard behavior and reserve icon space. */
select:not([multiple]) { appearance: none; padding-right: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position: right .75rem center; background-size: 16px; background-repeat: no-repeat; }
@media (forced-colors: active) { select:not([multiple]) { appearance: auto; background-image: none; } }
details:not(.action-menu):not(.lead-menu):not(.account-menu) > summary { list-style: none; display: flex; align-items: center; gap: .5rem; cursor: pointer; }
details:not(.action-menu):not(.lead-menu):not(.account-menu) > summary::-webkit-details-marker { display: none; }
details:not(.action-menu):not(.lead-menu):not(.account-menu) > summary::after { content: ''; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: auto; flex-shrink: 0; transition: transform var(--duration); }
details[open]:not(.action-menu):not(.lead-menu):not(.account-menu) > summary::after { transform: rotate(225deg); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.dialog-header h2 { margin: 0; font-size: 1.125rem; }
.dialog-body { margin: 1rem 0; }
.dialog-footer { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: .5rem; padding-top: 1rem; margin-top: .75rem; border-top: 1px solid var(--border); }
.error, .errorlist, [data-error], [role=alert].error { color: var(--error-text); }
.advanced-fields > summary { position: relative; flex-wrap: wrap; padding-right: 1.5rem; }
.advanced-fields > summary small { flex-basis: 100%; }
.advanced-fields > summary::after { position: absolute; right: .25rem; top: .8rem; }
.dialog-footer .primary { order: 2; }
button.text-link { border: 0; background: transparent; padding: .25rem 0; color: var(--accent); text-align: left; cursor: pointer; min-height: var(--control-height); }
@media (prefers-reduced-motion: reduce) { details > summary::after { transition: none !important; } }

.section-tabs{display:flex;align-items:stretch;gap:1rem;overflow-x:auto;border-bottom:1px solid var(--border);margin-bottom:1rem;scrollbar-width:thin}
.section-tabs>a{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;flex-shrink:0;padding:.75rem .125rem;border-bottom:2px solid transparent;text-decoration:none;color:var(--text-muted);font-weight:600;min-height:var(--control-height)}
.section-tabs>a[aria-current]{border-color:var(--accent);color:var(--accent)}.section-tabs>a:hover{color:var(--text)}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:.75rem}.section-heading>h2,.section-heading>h3{margin:0}.form-single{grid-template-columns:minmax(0,1fr)!important}.field:has(input[type=checkbox]){align-self:end}
.confirming .confirmation-view{width:100%;max-width:none;margin:0;padding:0;display:flex;flex-direction:column;min-height:0;max-height:inherit}.confirming{max-width:30rem!important;overflow:hidden}.confirming .confirmation-view>:is(.dialog-header,.dialog-body,.dialog-footer){padding:var(--space-4)!important;margin:0!important}.confirming .confirmation-view>.dialog-body{overflow-y:auto;min-height:0;text-align:left}.confirming .confirmation-view>:is(.dialog-header,.dialog-footer){flex-shrink:0}