:root {
    --color-brand-50: #fff7f2;
    --color-brand-100: #ffe7d7;
    --color-brand-200: #ffd0ae;
    --color-brand-300: #ffb07a;
    --color-brand-400: #fc9150;
    --color-brand-500: #f7782b;
    --color-brand-600: #e86214;
    --color-brand-700: #c44c0f;
    --color-brand-800: #9d3d12;
    --color-brand-900: #7f3412;
    --color-ink: #0f172a;
    --color-muted: #64748b;
    --color-surface: #ffffff;
    --color-border: rgba(249, 115, 22, 0.22);
}

body.theme-orange {
    color: var(--color-ink);
}

.btn-theme {
    background: linear-gradient(135deg, var(--color-brand-500), var(--color-brand-700));
}

.btn-theme:hover {
    background: linear-gradient(135deg, var(--color-brand-600), var(--color-brand-800));
}

.input-theme {
    background: rgba(255, 255, 255, 0.92);
    border-color: var(--color-border);
    color: var(--color-ink);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

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

.input-theme:focus {
    border-color: var(--color-brand-400);
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12);
}

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

.bg-theme-soft {
    background-color: var(--color-brand-50);
}

.border-theme {
    border-color: var(--color-border);
}

.overflow-x-auto,
.overflow-auto {
    position: relative;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
    scrollbar-color: rgba(203, 213, 225, 0.95) rgba(241, 245, 249, 0.95);
}

.overflow-x-auto:hover,
.overflow-x-auto:focus-within,
.overflow-auto:hover,
.overflow-auto:focus-within {
    scrollbar-color: rgba(100, 116, 139, 0.95) rgba(226, 232, 240, 0.98);
}

.overflow-x-auto::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar {
    width: 11px;
    height: 11px;
    background: rgba(241, 245, 249, 0.65);
}

.overflow-x-auto::-webkit-scrollbar-thumb,
.overflow-auto::-webkit-scrollbar-thumb {
    background: rgba(203, 213, 225, 0.95);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color 0.18s ease;
}

.overflow-x-auto::-webkit-scrollbar-track,
.overflow-auto::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.92);
    border-radius: 999px;
}

.overflow-x-auto:hover::-webkit-scrollbar-thumb,
.overflow-x-auto:focus-within::-webkit-scrollbar-thumb,
.overflow-auto:hover::-webkit-scrollbar-thumb,
.overflow-auto:focus-within::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.95);
}

.overflow-x-auto:hover::-webkit-scrollbar-track,
.overflow-x-auto:focus-within::-webkit-scrollbar-track,
.overflow-auto:hover::-webkit-scrollbar-track,
.overflow-auto:focus-within::-webkit-scrollbar-track {
    background: rgba(226, 232, 240, 0.98);
}