:root {
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'Fira Code', monospace;
    --color-bg: 9 9 11;
    --color-surface: 24 24 27;
    --color-surface-2: 39 39 42;
    --color-border: 63 63 70;
    --color-text: 244 244 245;
    --color-text-secondary: 161 161 170;
    --color-text-muted: 113 113 122;
    --color-accent: 99 102 241;
    --color-accent-soft: 129 140 248;
    --color-accent-strong: 79 70 229;
    --color-success: 16 185 129;
    --color-warning: 245 158 11;
    --color-danger: 239 68 68;
    --color-danger-soft: 248 113 113;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    min-height: 100%;
}

.is-hidden {
    display: none;
}

body.app-body {
    background: rgb(var(--color-bg));
    color: rgb(var(--color-text));
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}


.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-family: var(--font-mono);
}
.badge-small {
    font-size: 0.6875rem;
}
.badge-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: rgb(var(--color-danger));
}
.badge-default {
    background: rgb(var(--color-surface-2));
    color: rgb(var(--color-text-secondary));
    border: 1px solid rgb(var(--color-border));
}
.badge-success {
    background: rgb(var(--color-success) / 0.1);
    color: rgb(var(--color-success));
    border: 1px solid rgb(var(--color-success) / 0.2);
}
.badge-warning {
    background: rgb(var(--color-warning) / 0.1);
    color: rgb(var(--color-warning));
    border: 1px solid rgb(var(--color-warning) / 0.2);
}
.badge-error {
    background: rgb(var(--color-danger) / 0.1);
    color: rgb(var(--color-danger-soft));
    border: 1px solid rgb(var(--color-danger) / 0.2);
}
.badge-processing,
.badge-accent {
    background: rgb(var(--color-accent) / 0.1);
    color: rgb(var(--color-accent-soft));
    border: 1px solid rgb(var(--color-accent) / 0.2);
}
::-webkit-scrollbar-thumb {
    background: rgb(var(--color-border));
    border-radius: 3px;
}

.tech-card {
    background: rgb(var(--color-surface));
    border: 1px solid rgb(var(--color-surface-2));
    border-radius: 0.75rem;
}

.icon-shell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-shell--surface {
    background: rgb(var(--color-surface));
    border: 1px solid rgb(var(--color-surface-2));
}

.icon-shell--muted {
    background: rgb(var(--color-surface-2));
    border: 1px solid rgb(var(--color-border));
}

.page-icon-card {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.5rem;
}

.page-icon-card i {
    font-size: 1.375rem;
    color: rgb(var(--color-success));
}

.page-icon {
    font-size: 1.5rem;
    color: rgb(var(--color-accent-soft));
}

.page-shell {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    max-width: 56rem;
    margin: 0 auto;
    width: 100%;
    flex: 1;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-header-main {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.page-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: rgb(var(--color-text));
    letter-spacing: -0.025em;
}

.page-subtitle {
    font-size: 0.8125rem;
    color: rgb(var(--color-text-secondary));
    margin-top: 0.125rem;
}

.nav-bar {
    background: rgb(var(--color-bg) / 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgb(var(--color-surface-2));
    padding: 0.875rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-brand-icon {
    font-size: 1.25rem;
    color: rgb(var(--color-accent));
}

.nav-brand-text {
    font-weight: 600;
    color: rgb(var(--color-text));
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: rgb(var(--color-text-secondary));
    text-decoration: none;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.2s;
}

.back-btn:hover {
    color: rgb(var(--color-text));
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-family: inherit;
}

.btn-primary {
    background: rgb(var(--color-accent-strong));
    color: rgb(var(--color-text));
    border: 1px solid rgb(var(--color-accent) / 0.5);
    box-shadow: 0 10px 26px -14px rgb(var(--color-accent-strong) / 0.6);
}

.btn-primary:hover:not(:disabled) {
    background: rgb(var(--color-accent));
}

.btn-outline {
    background: transparent;
    color: rgb(var(--color-text));
    border: 1px solid rgb(var(--color-border));
}

.btn-outline:hover:not(:disabled) {
    background: rgb(var(--color-surface-2));
}

.btn-ghost {
    background: transparent;
    color: rgb(var(--color-text-secondary));
    border: 1px solid rgb(var(--color-surface-2));
}

.btn-ghost:hover:not(:disabled) {
    background: rgb(var(--color-surface-2));
    color: rgb(var(--color-text));
}

.btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.status-badge {
    min-width: 0;
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}