:root {
    --bg: #f3f8fd;
    --surface: rgba(255, 255, 255, 0.84);
    --line: rgba(13, 26, 43, 0.1);
    --text: #0f1d2f;
    --muted: #5d7088;
    --primary: #07b8ff;
    --primary-strong: #0977c9;
    --secondary: #00c789;
    --secondary-strong: #0d9d73;
    --accent: #ffb454;
    --success: #22d27f;
    --shadow-lg: 0 30px 80px rgba(13, 26, 43, 0.12);
    --shadow-md: 0 20px 44px rgba(13, 26, 43, 0.1);
}

body {
    background:
        radial-gradient(circle at top left, rgba(7, 184, 255, 0.16), transparent 28%),
        radial-gradient(circle at 82% 10%, rgba(0, 199, 137, 0.14), transparent 24%),
        linear-gradient(180deg, #fbfdff 0%, #f0f6fc 52%, #f6fbff 100%);
}

body::before {
    background-image:
        linear-gradient(rgba(13, 26, 43, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 26, 43, 0.028) 1px, transparent 1px);
}

body::after {
    background: radial-gradient(circle, rgba(255, 180, 84, 0.2), transparent 70%);
}

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

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

.screen-panel::before {
    background: radial-gradient(circle, rgba(7, 184, 255, 0.24), transparent 70%);
}

.screen-panel::after {
    background: radial-gradient(circle, rgba(0, 199, 137, 0.22), transparent 70%);
}

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

.pos-carousel {
    background:
        radial-gradient(circle at top left, rgba(212, 242, 255, 0.34), transparent 34%),
        linear-gradient(135deg, #28b6d8 0%, #1696be 50%, #0d7586 100%);
    box-shadow:
        0 28px 60px rgba(6, 67, 72, 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%);
}