:root {
    --ui-accent: #9a6b3f;
    --ui-surface: #fffdf9;
    --ui-line: rgba(91, 67, 45, 0.2);
}

.ui-spinner {
    display: none;
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ui-spin 650ms linear infinite;
}

[aria-busy="true"] .ui-spinner,
.is-loading > .ui-spinner {
    display: inline-block;
}

[aria-busy="true"] .ui-button-label {
    opacity: 0.86;
}

button[aria-busy="true"]:not(:has(.ui-spinner))::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.55em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -0.15em;
    animation: ui-spin 650ms linear infinite;
}

.ui-skeleton {
    position: relative;
    overflow: hidden;
    color: transparent !important;
    border-color: transparent !important;
    background: #eee7df !important;
    user-select: none;
}

.ui-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 15%, rgba(255,255,255,0.72) 45%, transparent 75%);
    transform: translateX(-100%);
    animation: ui-shimmer 1.15s ease-in-out infinite;
}

.network-status {
    position: fixed;
    z-index: 11000;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    max-width: 480px;
    margin-inline: auto;
    padding: 11px 15px;
    border: 1px solid rgba(116, 69, 51, 0.22);
    border-radius: 12px;
    background: rgba(69, 52, 43, 0.95);
    color: #fff;
    font: 700 0.875rem/1.35 Lato, system-ui, sans-serif;
    text-align: center;
    box-shadow: 0 10px 30px rgba(38, 27, 19, 0.2);
}

.network-status[hidden] { display: none; }

button, a, input, select, textarea { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ui-accent) 70%, white);
    outline-offset: 3px;
}

@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-shimmer { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
    .ui-spinner { animation-duration: 1.2s; }
    .ui-skeleton::after { animation: none; }
    *, *::before, *::after { scroll-behavior: auto !important; }
}