:root {
    --color-bg-start: #e0c3fc;
    --color-bg-end: #8ec5fc;
    --color-glass: rgba(255, 255, 255, 0.25);
    --color-glass-border: rgba(255, 255, 255, 0.4);
    --color-text: #2d3748;
    --color-primary: #667eea;
    --color-danger: #fc8181;
    --font-family: 'Inter', sans-serif;
    --border-radius: 16px;
    --transition-speed: 0.3s;
}

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

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

body.tablet-bg {
    font-family: var(--font-family);
    color: var(--color-text);
    background: linear-gradient(135deg, var(--color-bg-start) 0%, var(--color-bg-end) 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.font-scale-normal { font-size: 16px; }
body.font-scale-large { font-size: 20px; }
body.font-scale-xlarge { font-size: 24px; }

body.density-reduced * {
    line-height: 1.8 !important;
    letter-spacing: 0.05em !important;
}

.gradient-title {
    background: linear-gradient(90deg, #4c51bf, #6b46c1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
    font-weight: 800;
}

@media (max-width: 768px) {
    .gradient-title {
        font-size: 1.8rem !important;
    }
}

.view { display: none; opacity: 0; transition: opacity var(--transition-speed) ease; }
.view.active { display: block; opacity: 1; }
.hidden { display: none !important; }