:root {
    --bg: #f8fbff;
    --surface: rgba(255, 255, 255, 0.84);
    --line: rgba(12, 23, 38, 0.1);
    --text: #0d1a2b;
    --muted: #5f7289;
    --primary: #13b8d7;
    --primary-strong: #0c7f93;
    --secondary: #ffc845;
    --secondary-strong: #dfaa1f;
    --accent: #ff7a45;
    --success: #56d88f;
    --shadow-lg: 0 30px 80px rgba(12, 23, 38, 0.12);
    --shadow-md: 0 20px 44px rgba(12, 23, 38, 0.1);
}

body {
    background:
        radial-gradient(circle at top left, rgba(19, 184, 215, 0.16), transparent 28%),
        radial-gradient(circle at 82% 12%, rgba(255, 200, 69, 0.14), transparent 24%),
        linear-gradient(180deg, #fbfdff 0%, #f3f8fd 52%, #f7fbff 100%);
}

body::before {
    background-image:
        linear-gradient(rgba(12, 23, 38, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12, 23, 38, 0.028) 1px, transparent 1px);
}

body::after {
    background: radial-gradient(circle, rgba(255, 122, 69, 0.18), transparent 70%);
}

.surface-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 251, 255, 0.92));
}

.screen-panel {
    background: linear-gradient(180deg, #101c2d 0%, #0a1421 100%);
}

.screen-panel::before {
    background: radial-gradient(circle, rgba(19, 184, 215, 0.25), transparent 70%);
}

.screen-panel::after {
    background: radial-gradient(circle, rgba(255, 200, 69, 0.2), transparent 70%);
}

.carousel-note::before {
    box-shadow: 0 0 0 6px rgba(19, 184, 215, 0.14);
}

.pos-carousel {
    background:
        radial-gradient(circle at top left, rgba(226, 248, 255, 0.34), transparent 34%),
        linear-gradient(135deg, #18bed8 0%, #0e93b2 54%, #0d6f82 100%);
    box-shadow:
        0 28px 60px rgba(7, 69, 81, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.pos-carousel::after {
    display: none;
}

.pos-carousel::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.24), transparent 70%);
}