.sh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25rem;
    height: 2.25rem;
    padding-inline: .875rem;
    border: 1px solid transparent;
    border-radius: var(--sh-radius-md);
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    transition: background-color var(--sh-duration) var(--sh-ease),
                color var(--sh-duration) var(--sh-ease),
                border-color var(--sh-duration) var(--sh-ease),
                box-shadow var(--sh-duration) var(--sh-ease);
}

.sh-btn > svg,
.sh-btn > i[data-lucide] > svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    pointer-events: none;
}

.sh-btn:focus-visible {
    outline: none;
    border-color: var(--primary, #788768);
    box-shadow: 0 0 0 3px var(--ring);
}

.sh-btn:disabled,
.sh-btn[aria-disabled="true"] {
    opacity: .5;
    pointer-events: none;
}

.sh-btn-default {
    background: var(--primary, #788768);
    color: var(--primary-foreground);
    box-shadow: var(--sh-shadow-xs);
}
.sh-btn-default:hover { background: var(--primary-hover); }

.sh-btn-secondary {
    background: var(--sh-secondary);
    color: var(--sh-secondary-foreground);
}
.sh-btn-secondary:hover { background: var(--border); }

.sh-btn-outline {
    background: var(--background);
    color: var(--foreground);
    border-color: var(--border);
    box-shadow: var(--sh-shadow-xs);
}
.sh-btn-outline:hover {
    background: var(--accent);
    color: var(--accent-foreground);
}

.sh-btn-ghost {
    background: transparent;
    color: var(--foreground);
}
.sh-btn-ghost:hover {
    background: var(--accent);
    color: var(--accent-foreground);
}

.sh-btn-destructive {
    background: var(--destructive);
    color: var(--destructive-foreground);
    box-shadow: var(--sh-shadow-xs);
}
.sh-btn-destructive:hover { filter: brightness(.92); }
.sh-btn-destructive:focus-visible { box-shadow: 0 0 0 3px rgb(220 38 38 / .30); }

.sh-btn-link {
    background: transparent;
    color: var(--primary-text,#788768);
    text-underline-offset: 4px;
    height: auto;
    padding: 0;
}
.sh-btn-link:hover { text-decoration: underline; }

.sh-btn-sm { height: 2rem; padding-inline: .75rem; font-size: .8125rem; border-radius: var(--sh-radius-sm); gap: .375rem; }
.sh-btn-lg { height: 2.625rem; padding-inline: 1.25rem; font-size: .9375rem; }
.sh-btn-icon { width: 2.25rem; padding-inline: 0; }
.sh-btn-icon.sh-btn-sm { width: 2rem; }
.sh-btn-icon.sh-btn-lg { width: 2.625rem; }
.sh-btn-pill { border-radius: 9999px; }
.sh-btn-block { width: 100%; }

.sh-btn-group {
    display: inline-flex;
    align-items: center;
}
.sh-btn-group > .sh-btn { border-radius: 0; }
.sh-btn-group > .sh-btn:first-child { border-start-start-radius: var(--sh-radius-md); border-end-start-radius: var(--sh-radius-md); }
.sh-btn-group > .sh-btn:last-child { border-start-end-radius: var(--sh-radius-md); border-end-end-radius: var(--sh-radius-md); }
.sh-btn-group > .sh-btn + .sh-btn { margin-inline-start: -1px; }
.sh-btn-group > .sh-btn:hover,
.sh-btn-group > .sh-btn:focus-visible { position: relative; z-index: 1; }

.sh-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--sh-radius-xl);
    padding-block: 1.5rem;
    box-shadow: var(--sh-shadow-sm);
}

.sh-card-hover { transition: box-shadow var(--sh-duration) var(--sh-ease), border-color var(--sh-duration) var(--sh-ease); }
.sh-card-hover:hover { box-shadow: var(--sh-shadow-md); border-color: var(--border-strong); }

.sh-card-header {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: .375rem;
    padding-inline: 1.5rem;
}
.sh-card-header.sh-has-action {
    grid-template-columns: 1fr auto;
}
.sh-card-action { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

.sh-card-title { font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.sh-card-desc { font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); }
.sh-card-content { padding-inline: 1.5rem; }
.sh-card-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-inline: 1.5rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--border);
}
.sh-card-compact { gap: 1rem; padding-block: 1rem; }
.sh-card-compact .sh-card-header,
.sh-card-compact .sh-card-content,
.sh-card-compact .sh-card-footer { padding-inline: 1rem; }

.sh-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    width: fit-content;
    white-space: nowrap;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1;
    padding: .25rem .5rem;
    border: 1px solid transparent;
    border-radius: var(--sh-radius-sm);
}
.sh-badge > svg,
.sh-badge > i[data-lucide] > svg { width: .75rem; height: .75rem; pointer-events: none; }

.sh-badge-default { background: var(--primary, #788768); color: var(--primary-foreground); }
.sh-badge-secondary { background: var(--sh-secondary); color: var(--sh-secondary-foreground); }
.sh-badge-outline { color: var(--foreground); border-color: var(--border); }
.sh-badge-destructive { background: var(--destructive-muted); color: var(--destructive); border-color: var(--destructive-border); }
.sh-badge-success { background: var(--success-muted); color: var(--success); border-color: var(--success-border); }
.sh-badge-warning { background: var(--warning-muted); color: var(--warning); border-color: var(--warning-border); }
.sh-badge-info { background: var(--info-muted); color: var(--info); border-color: var(--info-border); }
.sh-badge-muted { background: var(--muted); color: var(--muted-foreground); }
.sh-badge-pill { border-radius: 9999px; padding-inline: .625rem; }

.sh-badge-dot::before {
    content: "";
    width: .375rem;
    height: .375rem;
    border-radius: 9999px;
    background: currentColor;
    flex-shrink: 0;
}

.sh-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1;
    color: var(--foreground);
    user-select: none;
}
.sh-label[data-required]::after,
.sh-label.sh-required::after {
    content: "*";
    color: var(--destructive);
    font-weight: 700;
}

.sh-input,
.sh-textarea,
.sh-select {
    display: block;
    width: 100%;
    min-width: 0;
    font: inherit;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--foreground);
    background: var(--background);
    border: 1px solid var(--input);
    border-radius: var(--sh-radius-md);
    padding: .5rem .75rem;
    box-shadow: var(--sh-shadow-xs);
    transition: border-color var(--sh-duration) var(--sh-ease), box-shadow var(--sh-duration) var(--sh-ease);
}

.sh-input { height: 2.25rem; padding-block: 0; }
.sh-textarea { min-height: 5rem; resize: vertical; }

.sh-select {
    height: 2.25rem;
    padding-block: 0;
    padding-inline-end: 2rem;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left .625rem center;
    background-size: 1rem;
}
[dir="ltr"] .sh-select { background-position: right .625rem center; }

.sh-input::placeholder,
.sh-textarea::placeholder { color: var(--muted-foreground); }

.sh-input:focus-visible,
.sh-textarea:focus-visible,
.sh-select:focus-visible {
    outline: none;
    border-color: var(--primary, #788768);
    box-shadow: 0 0 0 3px var(--ring);
}

.sh-input:disabled,
.sh-textarea:disabled,
.sh-select:disabled {
    opacity: .55;
    cursor: not-allowed;
    background: var(--muted);
}

.sh-input[aria-invalid="true"],
.sh-textarea[aria-invalid="true"],
.sh-select[aria-invalid="true"],
.sh-invalid {
    border-color: var(--destructive);
}
.sh-input[aria-invalid="true"]:focus-visible,
.sh-textarea[aria-invalid="true"]:focus-visible,
.sh-select[aria-invalid="true"]:focus-visible {
    box-shadow: 0 0 0 3px rgb(220 38 38 / .25);
}

.sh-input-group {
    position: relative;
    display: flex;
    align-items: center;
}
.sh-input-group > .sh-input-icon {
    position: absolute;
    inset-inline-start: .625rem;
    width: 1rem;
    height: 1rem;
    color: var(--muted-foreground);
    pointer-events: none;
    display: flex;
}
.sh-input-group > .sh-input-icon svg { width: 1rem; height: 1rem; }
.sh-input-group > .sh-input { padding-inline-start: 2.125rem; }
.sh-input-group > .sh-input-affix {
    position: absolute;
    inset-inline-end: .375rem;
    display: flex;
    align-items: center;
    gap: .25rem;
}

.sh-field { display: flex; flex-direction: column; gap: .5rem; }
.sh-field-hint { font-size: .8125rem; line-height: 1.5; color: var(--muted-foreground); }
.sh-field-error { font-size: .8125rem; line-height: 1.5; color: var(--destructive); font-weight: 500; }

.sh-checkbox,
.sh-radio {
    appearance: none;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin: 0;
    border: 1px solid var(--border-strong);
    background: var(--background);
    box-shadow: var(--sh-shadow-xs);
    cursor: pointer;
    transition: background-color var(--sh-duration) var(--sh-ease), border-color var(--sh-duration) var(--sh-ease);
    background-repeat: no-repeat;
    background-position: center;
    background-size: .75rem;
}
.sh-checkbox { border-radius: var(--sh-radius-xs); }
.sh-radio { border-radius: 9999px; }

.sh-checkbox:checked,
.sh-radio:checked {
    background-color: var(--primary, #788768);
    border-color: var(--primary, #788768);
}
.sh-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.sh-radio:checked { background-image: radial-gradient(circle, #fff 0 30%, transparent 32%); background-size: 100%; }

.sh-checkbox:focus-visible,
.sh-radio:focus-visible {
    outline: none;
    border-color: var(--primary, #788768);
    box-shadow: 0 0 0 3px var(--ring);
}
.sh-checkbox:disabled,
.sh-radio:disabled { opacity: .5; cursor: not-allowed; }

.sh-switch {
    appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 2.25rem;
    height: 1.25rem;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 9999px;
    background: var(--border-strong);
    cursor: pointer;
    transition: background-color var(--sh-duration) var(--sh-ease);
}
.sh-switch::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: .125rem;
    width: .875rem;
    height: .875rem;
    border-radius: 9999px;
    background: #fff;
    box-shadow: var(--sh-shadow-xs);
    transform: translateY(-50%);
    transition: inset-inline-start var(--sh-duration) var(--sh-ease);
}
.sh-switch:checked { background: var(--primary, #788768); }
.sh-switch:checked::after { inset-inline-start: calc(100% - 1rem); }
.sh-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.sh-switch:disabled { opacity: .5; cursor: not-allowed; }

.sh-tabs { display: flex; flex-direction: column; gap: 1rem; }

.sh-tabs-list {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: .25rem;
    width: fit-content;
    max-width: 100%;
    padding: .25rem;
    background: var(--muted);
    border-radius: var(--sh-radius-lg);
    overflow-x: auto;
    scrollbar-width: none;
}
.sh-tabs-list::-webkit-scrollbar { display: none; }

.sh-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    flex-shrink: 0;
    height: 1.875rem;
    padding-inline: .75rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--muted-foreground);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--sh-radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--sh-duration) var(--sh-ease), background-color var(--sh-duration) var(--sh-ease);
}
.sh-tab > svg, .sh-tab > i[data-lucide] > svg { width: .875rem; height: .875rem; }
.sh-tab:hover { color: var(--foreground); }
.sh-tab[aria-selected="true"],
.sh-tab.sh-active {
    background: var(--background);
    color: var(--foreground);
    border-color: var(--border);
    box-shadow: var(--sh-shadow-xs);
}
.sh-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

.sh-tabs-underline { background: transparent; padding: 0; gap: 0; border-radius: 0; border-block-end: 1px solid var(--border); width: 100%; }
.sh-tabs-underline .sh-tab { height: 2.375rem; border-radius: 0; box-shadow: none; border: 0; }
.sh-tabs-underline .sh-tab[aria-selected="true"],
.sh-tabs-underline .sh-tab.sh-active {
    background: transparent;
    color: var(--primary-text,#788768);
    box-shadow: inset 0 -2px 0 0 var(--primary, #788768);
}

.sh-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--sh-radius-lg);
    background: var(--card);
}
.sh-table { width: 100%; border-collapse: collapse; font-size: .875rem; caption-side: bottom; }
.sh-table thead tr { border-block-end: 1px solid var(--border); }
.sh-table th {
    height: 2.75rem;
    padding-inline: .75rem;
    text-align: start;
    font-weight: 500;
    color: var(--muted-foreground);
    white-space: nowrap;
    background: var(--card);
}
.sh-table td { padding: .75rem; vertical-align: middle; color: var(--foreground); }
.sh-table tbody tr { border-block-end: 1px solid var(--border); transition: background-color var(--sh-duration) var(--sh-ease); }
.sh-table tbody tr:last-child { border-block-end: 0; }
.sh-table tbody tr:hover { background: var(--muted); }
.sh-table tbody tr[data-state="selected"] { background: var(--accent); }
.sh-table tfoot { border-block-start: 1px solid var(--border); background: var(--muted); font-weight: 500; }
.sh-table caption { padding-block: .75rem; font-size: .8125rem; color: var(--muted-foreground); }
.sh-table-num { font-variant-numeric: tabular-nums; }

.sh-alert {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: .75rem;
    padding: .875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--sh-radius-lg);
    background: var(--card);
    color: var(--foreground);
    font-size: .875rem;
    line-height: 1.6;
}
.sh-alert > svg,
.sh-alert > i[data-lucide] > svg { width: 1rem; height: 1rem; margin-block-start: .1875rem; }
.sh-alert-title { font-weight: 600; line-height: 1.5; }
.sh-alert-desc { color: var(--muted-foreground); }
.sh-alert-destructive { border-color: var(--destructive-border); color: var(--destructive); }
.sh-alert-destructive .sh-alert-desc { color: var(--destructive); opacity: .85; }
.sh-alert-success { border-color: var(--success-border); color: var(--success); }
.sh-alert-success .sh-alert-desc { color: var(--success); opacity: .85; }
.sh-alert-warning { border-color: var(--warning-border); color: var(--warning); }
.sh-alert-warning .sh-alert-desc { color: var(--warning); opacity: .85; }
.sh-alert-info { border-color: var(--info-border); color: var(--info); }
.sh-alert-info .sh-alert-desc { color: var(--info); opacity: .85; }

.sh-separator { border: 0; background: var(--border); flex-shrink: 0; }
.sh-separator-h { width: 100%; height: 1px; margin-block: 1rem; }
.sh-separator-v { width: 1px; align-self: stretch; margin-inline: .75rem; }

.sh-skeleton {
    background: var(--muted);
    border-radius: var(--sh-radius-md);
    animation: sh-pulse 1.6s var(--sh-ease) infinite;
}
@keyframes sh-pulse { 50% { opacity: .5; } }

.sh-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: .8125rem;
    font-weight: 600;
    user-select: none;
}
.sh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sh-avatar-sm { width: 1.75rem; height: 1.75rem; font-size: .6875rem; }
.sh-avatar-lg { width: 3rem; height: 3rem; font-size: 1rem; }
.sh-avatar-group { display: inline-flex; }
.sh-avatar-group > .sh-avatar + .sh-avatar { margin-inline-start: -.5rem; }
.sh-avatar-group > .sh-avatar { box-shadow: 0 0 0 2px var(--card); }

.sh-progress {
    position: relative;
    width: 100%;
    height: .5rem;
    background: var(--muted);
    border-radius: 9999px;
    overflow: hidden;
}
.sh-progress-bar {
    height: 100%;
    background: var(--primary, #788768);
    border-radius: 9999px;
    transition: width 400ms var(--sh-ease);
}

.sh-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgb(0 0 0 / .55);
    backdrop-filter: blur(2px);
    animation: sh-fade-in var(--sh-duration) var(--sh-ease);
}

.sh-dialog {
    position: fixed;
    z-index: 61;
    top: 50%;
    inset-inline-start: 50%;
    translate: 50% -50%;
    width: calc(100% - 2rem);
    max-width: 32rem;
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--sh-radius-xl);
    padding: 1.5rem;
    box-shadow: var(--sh-shadow-xl);
    animation: sh-zoom-in var(--sh-duration) var(--sh-ease);
}
[dir="ltr"] .sh-dialog { translate: -50% -50%; }
.sh-dialog-header { display: flex; flex-direction: column; gap: .375rem; }
.sh-dialog-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.sh-dialog-desc { font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); }
.sh-dialog-footer { display: flex; justify-content: flex-start; gap: .5rem; flex-wrap: wrap; }
.sh-dialog-close {
    position: absolute;
    inset-inline-end: 1rem;
    top: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: var(--sh-radius-sm);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
}
.sh-dialog-close:hover { background: var(--accent); color: var(--accent-foreground); }

.sh-menu {
    min-width: 11rem;
    padding: .25rem;
    background: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--sh-radius-lg);
    box-shadow: var(--sh-shadow-lg);
    animation: sh-zoom-in var(--sh-duration) var(--sh-ease);
}
.sh-menu-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .375rem .5rem;
    font-size: .8125rem;
    color: var(--popover-foreground);
    background: transparent;
    border: 0;
    border-radius: var(--sh-radius-sm);
    cursor: pointer;
    text-align: start;
    text-decoration: none;
    transition: background-color var(--sh-duration) var(--sh-ease);
}
.sh-menu-item > svg, .sh-menu-item > i[data-lucide] > svg { width: .875rem; height: .875rem; color: var(--muted-foreground); }
.sh-menu-item:hover { background: var(--accent); color: var(--accent-foreground); }
.sh-menu-item-destructive { color: var(--destructive); }
.sh-menu-item-destructive > svg, .sh-menu-item-destructive > i[data-lucide] > svg { color: var(--destructive); }
.sh-menu-item-destructive:hover { background: var(--destructive-muted); color: var(--destructive); }
.sh-menu-label { padding: .375rem .5rem; font-size: .75rem; font-weight: 600; color: var(--muted-foreground); }
.sh-menu-sep { height: 1px; margin: .25rem -.25rem; background: var(--border); }
.sh-menu-shortcut { margin-inline-start: auto; font-size: .6875rem; color: var(--muted-foreground); letter-spacing: .05em; }

.sh-tooltip {
    padding: .3125rem .5rem;
    font-size: .75rem;
    line-height: 1.4;
    background: var(--foreground);
    color: var(--background);
    border-radius: var(--sh-radius-sm);
    box-shadow: var(--sh-shadow-md);
    max-width: 16rem;
}

.sh-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: .3125rem;
    font-family: inherit;
    font-size: .6875rem;
    font-weight: 500;
    color: var(--muted-foreground);
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--sh-radius-xs);
}

.sh-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem; font-size: .8125rem; color: var(--muted-foreground); }
.sh-breadcrumb a { color: inherit; text-decoration: none; transition: color var(--sh-duration) var(--sh-ease); }
.sh-breadcrumb a:hover { color: var(--foreground); }
.sh-breadcrumb-sep { display: inline-flex; opacity: .6; }
.sh-breadcrumb-sep svg { width: .875rem; height: .875rem; }
.sh-breadcrumb [aria-current="page"] { color: var(--foreground); font-weight: 500; }

.sh-pagination { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }

.sh-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 3rem 1.5rem;
    text-align: center;
}
.sh-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: var(--muted);
    color: var(--muted-foreground);
}
.sh-empty-icon svg { width: 1.25rem; height: 1.25rem; }
.sh-empty-title { font-size: .9375rem; font-weight: 600; color: var(--foreground); }
.sh-empty-desc { font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); max-width: 28rem; }

.sh-stat {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--sh-radius-xl);
    box-shadow: var(--sh-shadow-xs);
}
.sh-stat-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.sh-stat-label { font-size: .8125rem; font-weight: 500; color: var(--muted-foreground); }
.sh-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--sh-radius-md);
    background: var(--muted);
    color: var(--muted-foreground);
}
.sh-stat-icon svg { width: 1rem; height: 1rem; }
.sh-stat-value { font-size: 1.625rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--foreground); }
.sh-stat-delta { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 500; }
.sh-stat-delta svg { width: .75rem; height: .75rem; }
.sh-stat-up { color: var(--success); }
.sh-stat-down { color: var(--destructive); }
.sh-stat-flat { color: var(--muted-foreground); }

.sh-grid { display: grid; gap: 1rem; }
.sh-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sh-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sh-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sh-muted { color: var(--muted-foreground); }
.sh-h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.sh-h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; }
.sh-lead { font-size: .9375rem; line-height: 1.7; color: var(--muted-foreground); }
.sh-small { font-size: .8125rem; line-height: 1.5; }

@keyframes sh-fade-in { from { opacity: 0; } }
@keyframes sh-zoom-in { from { opacity: 0; scale: .97; } }

@media (max-width: 900px) {
    .sh-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sh-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .sh-grid-2, .sh-grid-3, .sh-grid-4 { grid-template-columns: minmax(0, 1fr); }
    .sh-card { padding-block: 1.25rem; gap: 1.25rem; }
    .sh-card-header, .sh-card-content, .sh-card-footer { padding-inline: 1.25rem; }
    .sh-dialog { max-width: none; }
}