:root {
  --brand-bg: #f6f3ee;
  --brand-surface: #ffffff;
  --brand-surface-alt: #f0ebe4;
  --brand-border: rgba(24, 24, 27, 0.10);
  --brand-text-muted: #6b7280;
  --brand-accent: #6d5dfc;
  --brand-accent-hover: #5d4df0;
  --brand-action-success: #059669;
  --brand-action-success-hover: #047857;
  --brand-action-success-text: #ffffff;
  --brand-action-warning: #d97706;
  --brand-action-warning-hover: #b45309;
  --brand-action-warning-text: #ffffff;
  --brand-action-danger: #dc2626;
  --brand-action-danger-hover: #b91c1c;
  --brand-action-danger-text: #ffffff;
  --brand-status-success: #047857;
  --brand-status-success-bg: color-mix(in srgb, var(--brand-status-success) 11%, var(--brand-surface) 89%);
  --brand-status-success-border: color-mix(in srgb, var(--brand-status-success) 34%, transparent);
  --brand-status-warning: #92400e;
  --brand-status-warning-bg: color-mix(in srgb, var(--brand-action-warning) 13%, var(--brand-surface) 87%);
  --brand-status-warning-border: color-mix(in srgb, var(--brand-action-warning) 42%, transparent);
  --brand-status-error: #be123c;
  --brand-status-error-bg: color-mix(in srgb, var(--brand-status-error) 10%, var(--brand-surface) 90%);
  --brand-status-error-border: color-mix(in srgb, var(--brand-status-error) 34%, transparent);
  --brand-status-accent: #4c1d95;
  --brand-status-accent-bg: color-mix(in srgb, var(--brand-accent) 11%, var(--brand-surface) 89%);
  --brand-status-accent-border: color-mix(in srgb, var(--brand-accent) 34%, transparent);
  --brand-text: #111111;
}

body.brand-shell {
  background: var(--brand-bg);
  color: var(--brand-text);
}

.brand-header {
  border-color: var(--brand-border);
  background: color-mix(in srgb, var(--brand-surface) 86%, white 14%);
}

.brand-logo-frame {
  border-color: var(--brand-border);
  background: color-mix(in srgb, var(--brand-surface-alt) 88%, white 12%);
}

.brand-panel {
  border: 1px solid var(--brand-border);
  background: var(--brand-surface);
  color: var(--brand-text);
}

.brand-panel-alt {
  border: 1px solid var(--brand-border);
  background: color-mix(in srgb, var(--brand-surface-alt) 88%, var(--brand-surface) 12%);
  color: var(--brand-text);
}

.brand-muted {
  color: var(--brand-text-muted);
}

.brand-pill {
  border: 1px solid var(--brand-border);
  background: var(--brand-surface-alt);
  color: var(--brand-text);
}

.brand-input {
  box-sizing: border-box;
  border: 1px solid var(--brand-border);
  background: var(--brand-surface);
  color: var(--brand-text);
  max-width: 100%;
  min-width: 0;
}

.brand-input::placeholder {
  color: var(--brand-text-muted);
}

.brand-button-primary {
  background: var(--brand-accent);
  color: #ffffff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-accent) 28%, transparent);
}

.brand-button-primary:hover {
  background: var(--brand-accent-hover);
}

.brand-button-secondary {
  border: 1px solid var(--brand-border);
  background: color-mix(in srgb, var(--brand-surface) 92%, var(--brand-surface-alt) 8%);
  color: var(--brand-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.brand-button-secondary:hover {
  background: color-mix(in srgb, var(--brand-surface-alt) 88%, var(--brand-surface) 12%);
}

.brand-button-danger {
  background: var(--brand-action-danger);
  color: var(--brand-action-danger-text);
}

.brand-button-danger:hover {
  background: var(--brand-action-danger-hover);
}

.brand-button-warning {
  background: var(--brand-action-warning);
  color: var(--brand-action-warning-text);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-action-warning) 24%, transparent);
}

.brand-button-warning:hover {
  background: var(--brand-action-warning-hover);
}

.brand-button-success {
  background: var(--brand-action-success);
  color: var(--brand-action-success-text);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-action-success) 24%, transparent);
}

.brand-button-success:hover {
  background: var(--brand-action-success-hover);
}

.brand-button-info {
  background: #0284c7;
  color: #ffffff;
}

.brand-button-info:hover {
  background: #0369a1;
}

.brand-danger-zone {
  border: 1px solid rgba(190, 24, 93, 0.20);
  background: rgba(190, 24, 93, 0.05);
}

.brand-danger-panel {
  border: 1px solid rgba(190, 24, 93, 0.22);
  background: rgba(255, 255, 255, 0.65);
}

.brand-title {
  color: var(--brand-text);
}

/*.brand-title {*/
/*  color: #111111;*/
/*}*/

.brand-link-muted {
  color: var(--brand-text-muted);
}

.brand-link-muted:hover {
  color: var(--brand-text);
}

.brand-heading {
  color: var(--brand-text);
}

.brand-feedback {
  border: 1px solid var(--brand-border);
  background: var(--brand-surface-alt);
  color: var(--brand-text);
}

.brand-feedback-success {
  border-color: var(--brand-status-success-border);
  background: var(--brand-status-success-bg);
  color: var(--brand-status-success);
}

.brand-feedback-error {
  border-color: var(--brand-status-error-border);
  background: var(--brand-status-error-bg);
  color: var(--brand-status-error);
}

.brand-feedback-warning {
  border-color: var(--brand-status-warning-border);
  background: var(--brand-status-warning-bg);
  color: var(--brand-status-warning);
}

.brand-rank-badge {
  display: inline-flex;
  min-width: 52px;
  justify-content: center;
  border-radius: 9999px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.brand-rank-badge-gold {
  border: 1px solid rgba(250, 204, 21, 0.35);
  background: rgba(250, 204, 21, 0.14);
  color: #854d0e;
}

.brand-rank-badge-silver {
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.12);
  color: #475569;
}

.brand-rank-badge-bronze {
  border: 1px solid rgba(217, 119, 6, 0.30);
  background: rgba(217, 119, 6, 0.12);
  color: #92400e;
}

.brand-rank-badge-neutral {
  border: 1px solid var(--brand-border);
  background: var(--brand-surface-alt);
  color: var(--brand-text-muted);
}

.brand-table-row-top1 {
  background: rgba(250, 204, 21, 0.10);
}

.brand-table-row-top2 {
  background: rgba(148, 163, 184, 0.08);
}

.brand-table-row-top3 {
  background: rgba(217, 119, 6, 0.08);
}

.brand-table-row-default:hover,
.brand-table-row-top1:hover,
.brand-table-row-top2:hover,
.brand-table-row-top3:hover {
  background-image: linear-gradient(rgba(17, 24, 39, 0.03), rgba(17, 24, 39, 0.03));
}

.brand-strong {
  color: var(--brand-text);
}

.brand-alert {
  border: 1px solid var(--brand-border);
  background: var(--brand-surface-alt);
  color: var(--brand-text);
}

.brand-status-pill {
  align-items: center;
  border: 1px solid var(--brand-border);
  border-radius: 9999px;
  display: inline-flex;
  justify-content: center;
}

.brand-chip-success,
.brand-alert-success,
.brand-status-success {
  border-color: var(--brand-status-success-border);
  background: var(--brand-status-success-bg);
  color: var(--brand-status-success);
}

.brand-chip-warning,
.brand-alert-warning,
.brand-status-warning {
  border-color: var(--brand-status-warning-border);
  background: var(--brand-status-warning-bg);
  color: var(--brand-status-warning);
}

.brand-chip-danger,
.brand-alert-error,
.brand-status-error {
  border-color: var(--brand-status-error-border);
  background: var(--brand-status-error-bg);
  color: var(--brand-status-error);
}

.brand-chip-accent,
.brand-status-accent {
  border-color: var(--brand-status-accent-border);
  background: var(--brand-status-accent-bg);
  color: var(--brand-status-accent);
}

.brand-action-panel {
  border: 1px solid var(--brand-border);
  background: var(--brand-surface);
  color: var(--brand-text);
}

.brand-action-panel-success {
  border-color: var(--brand-status-success-border);
  background: var(--brand-status-success-bg);
  color: var(--brand-status-success);
}

.brand-action-panel-warning {
  border-color: var(--brand-status-warning-border);
  background: var(--brand-status-warning-bg);
  color: var(--brand-status-warning);
}

.brand-action-panel-error {
  border-color: var(--brand-status-error-border);
  background: var(--brand-status-error-bg);
  color: var(--brand-status-error);
}

.brand-action-input-warning {
  border-color: var(--brand-status-warning-border);
  background: var(--brand-surface);
  color: var(--brand-text);
}

.brand-status-text-error {
  color: var(--brand-status-error);
}

.assistant-busy-button {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
    justify-content: center;
}

.assistant-busy-spinner {
    animation: assistant-busy-spin 700ms linear infinite;
    border: 0.125rem solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    display: inline-block;
    height: 1rem;
    width: 1rem;
}

.pwa-pull-refresh-indicator {
    align-items: center;
    background: color-mix(in srgb, var(--brand-surface) 94%, var(--brand-surface-alt) 6%);
    border: 1px solid var(--brand-border);
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.16);
    color: var(--brand-text);
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 600;
    gap: 0.5rem;
    left: 50%;
    opacity: 0;
    padding: 0.55rem 0.85rem;
    pointer-events: none;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
    transform: translate(-50%, calc(-100% + var(--pwa-pull-offset, 0px)));
    transition: opacity 140ms ease, transform 140ms ease;
    z-index: 80;
}

.pwa-pull-refresh-indicator.is-visible {
    opacity: 1;
}

.pwa-pull-refresh-mark {
    border: 0.125rem solid currentColor;
    border-radius: 999px;
    border-right-color: transparent;
    height: 1rem;
    width: 1rem;
}

.pwa-pull-refresh-indicator.is-ready .pwa-pull-refresh-mark {
    background: var(--brand-action-success);
    border-color: var(--brand-action-success);
}

.pwa-pull-refresh-indicator.is-refreshing .pwa-pull-refresh-mark {
    animation: assistant-busy-spin 700ms linear infinite;
}

@keyframes assistant-busy-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .assistant-busy-spinner {
        animation: none;
    }

    .pwa-pull-refresh-indicator,
    .pwa-pull-refresh-indicator.is-refreshing .pwa-pull-refresh-mark {
        animation: none;
        transition: none;
    }
}

/* Responsive shell drawer navigation */
.shell-menu-summary {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0.75rem;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    height: 2.75rem;
    justify-content: center;
    list-style: none;
    padding: 0;
    width: 2.75rem;
}

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

.shell-menu-summary::marker {
    content: "";
}

.shell-menu-summary:hover,
.shell-menu-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

.shell-menu-lines {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.shell-menu-lines span {
    background: currentColor;
    border-radius: 999px;
    display: block;
    height: 0.125rem;
    width: 1.875rem;
}

.shell-menu-overlay {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(3px);
    border: 0;
    bottom: 0;
    cursor: default;
    display: none;
    left: 0;
    padding: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 40;
}

.shell-menu-drawer {
    bottom: 0;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: transform 180ms ease;
    width: min(24rem, 92vw);
    z-index: 50;
}

.shell-menu[open] .shell-menu-overlay {
    display: block;
}

.shell-menu[open] .shell-menu-drawer {
    transform: translateX(0);
}

.shell-menu-close {
    background: transparent;
    border: 0;
    border-radius: 0.75rem;
    color: inherit;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    padding: 0.25rem 0.65rem;
}

.whitespace-pre-wrap {
    white-space: pre-wrap;
}