:root {
    --rb-brand: #4f46e5;
    --rb-brand-strong: #4338ca;
    --rb-brand-soft: #eef2ff;
    --rb-brand-accent: #7c3aed;
    --rb-border: rgba(148, 163, 184, 0.28);
    --rb-border-strong: rgba(100, 116, 139, 0.36);
    --rb-surface: rgba(255, 255, 255, 0.88);
    --rb-surface-strong: #ffffff;
    --rb-surface-soft: #f8fafc;
    --rb-text-main: #0f172a;
    --rb-text-muted: #64748b;
    --rb-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
    --rb-shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.06);
    --rb-radius-xl: 1rem;
    --rb-radius-2xl: 1.25rem;
    --rb-radius-3xl: 1.5rem;
    --rb-safe-bottom: env(safe-area-inset-bottom, 0px);
}

body.app-shell {
    color: var(--rb-text-main);
    background:
        radial-gradient(circle at 15% -20%, rgba(79, 70, 229, 0.11), transparent 48%),
        radial-gradient(circle at 90% 0%, rgba(124, 58, 237, 0.1), transparent 38%),
        linear-gradient(180deg, #f8fafc 0%, #eef2ff 42%, #f8fafc 100%);
}

.rb-glass-nav {
    background: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.rb-brand-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--rb-brand), var(--rb-brand-accent));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.28);
}

.rb-brand-text {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: linear-gradient(90deg, var(--rb-brand), var(--rb-brand-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.rb-surface {
    background: var(--rb-surface);
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius-2xl);
    box-shadow: var(--rb-shadow-soft);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.rb-surface-strong {
    background: var(--rb-surface-strong);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: var(--rb-radius-2xl);
    box-shadow: var(--rb-shadow-soft);
}

.rb-chip {
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 0.75rem;
    line-height: 1.2;
    font-weight: 600;
    padding: 0.42rem 0.82rem;
    transition: all 0.18s ease;
}

.rb-chip:hover {
    color: var(--rb-brand);
    border-color: rgba(99, 102, 241, 0.45);
    background: #eef2ff;
}

.rb-chip.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--rb-brand), var(--rb-brand-accent));
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.28);
}

.rb-soft-button {
    border-radius: 0.8rem;
    border: 1px solid rgba(203, 213, 225, 0.8);
    background: #fff;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    transition: all 0.2s ease;
}

.rb-soft-button:hover {
    color: var(--rb-brand);
    border-color: rgba(99, 102, 241, 0.42);
    background: #eef2ff;
}

.rb-soft-button.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--rb-brand), var(--rb-brand-accent));
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.24);
}

.rb-primary-button {
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    transition: all 0.2s ease;
}

.rb-primary-button:hover {
    background: #1e293b;
}

.rb-nav-links {
    gap: 0.55rem;
}

.rb-nav-link {
    border-radius: 999px;
    padding: 0.42rem 0.82rem;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 600;
    transition: all 0.2s ease;
}

.rb-nav-link:hover {
    color: var(--rb-brand);
    background: rgba(238, 242, 255, 0.95);
}

.rb-nav-link-active {
    color: #4f46e5;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.14), rgba(124, 58, 237, 0.16));
    box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.28);
}

.rb-logout-button {
    border-radius: 999px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    background: rgba(255, 255, 255, 0.68);
    color: #64748b;
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 600;
    padding: 0.4rem 0.76rem;
    transition: all 0.2s ease;
}

.rb-logout-button:hover {
    color: #334155;
    background: rgba(248, 250, 252, 0.94);
    border-color: rgba(148, 163, 184, 0.84);
}

.rb-mobile-tabbar {
    background: rgba(255, 255, 255, 0.9);
    border-top: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding-bottom: calc(0.45rem + var(--rb-safe-bottom));
}

.rb-mobile-tabitem {
    min-height: 2.5rem;
    min-width: 2.5rem;
}

.rb-reader-toolbar-scroll {
    scrollbar-width: none;
}

.rb-reader-toolbar-scroll::-webkit-scrollbar {
    display: none;
}

@media (max-width: 767px) {
    .rb-mobile-touch {
        min-height: 2.5rem;
        min-width: 2.5rem;
    }
}