:root {
    --accent: #007aff;
    --accent-rgb: 0, 122, 255;
    --desktop-icon-rows: 7;
    --desktop-icon-size: 72px;
    --desktop-shortcut-row: 110px;
    --desktop-shortcut-gap: 8px;
    --desktop-grid-strength: 0;
    --desktop-grid-layer-opacity: var(--desktop-grid-strength);
    --window-opacity: 0.96;
    --window-radius: 14px;
    --taskbar-glow: 0.5;
    --shell-topbar-height: 0px;
    --shell-topbar-offset: 0px;
    --shell-taskbar-height: 66px;
    --shell-taskbar-offset: 0px;
    --widgets-rail-width: 388px;
    --widget-height-scale: 1;
    --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
    --mono-font: "JetBrains Mono", "Menlo", "Monaco", "Courier New", monospace;
    --ink: #1d1d1d;
    --muted-ink: #767676;
    --line: rgba(0, 0, 0, 0.1);
    --shell-text: #f5f5f5;
    --cursor-style: default;
    --custom-wallpaper: none;
}

* {
    box-sizing: border-box;
}

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

body {
    overflow: hidden;
    font-family: var(--ui-font);
    color: var(--shell-text);
    background: linear-gradient(135deg, #f0f0f0 0%, #ffffff 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

body,
body button,
body a,
body input,
body textarea,
body select {
    cursor: var(--cursor-style);
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    border: none;
}

a {
    color: inherit;
    text-decoration: none;
}

[hidden] {
    display: none !important;
}

body.has-custom-wallpaper {
    background:
        linear-gradient(180deg, rgba(5, 10, 21, 0.28), rgba(8, 17, 33, 0.44)),
        var(--custom-wallpaper) center / cover no-repeat fixed;
}

body.has-custom-wallpaper .desktop::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(8, 17, 33, 0.14)),
        var(--custom-wallpaper) center / cover no-repeat;
}

body[data-wallpaper="bliss"] {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02)),
        url("../img/img1.webp") center / cover no-repeat fixed;
}

body[data-wallpaper="bliss"] .desktop::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(17, 24, 39, 0.05)),
        url("../img/img1.webp") center / cover no-repeat;
}

body[data-wallpaper="aurora"] {
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 100, 152, 0.92), transparent 24%),
        radial-gradient(circle at 56% 42%, rgba(255, 142, 87, 0.86), transparent 21%),
        radial-gradient(circle at 84% 22%, rgba(117, 186, 255, 0.9), transparent 20%),
        linear-gradient(155deg, #0e5c9d 0%, #2a90da 26%, #e3ebff 54%, #ffa361 78%, #cf1778 100%);
}

body[data-wallpaper="aurora"] .desktop::before {
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 100, 152, 0.92), transparent 24%),
        radial-gradient(circle at 56% 42%, rgba(255, 142, 87, 0.86), transparent 21%),
        radial-gradient(circle at 84% 22%, rgba(117, 186, 255, 0.9), transparent 20%),
        linear-gradient(155deg, #0e5c9d 0%, #2a90da 26%, #e3ebff 54%, #ffa361 78%, #cf1778 100%);
}

body[data-wallpaper="sunset"] {
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 215, 145, 0.92), transparent 22%),
        radial-gradient(circle at 62% 32%, rgba(255, 151, 96, 0.82), transparent 24%),
        radial-gradient(circle at 84% 18%, rgba(133, 168, 255, 0.6), transparent 18%),
        linear-gradient(155deg, #243d86 0%, #4d65cc 18%, #f5cc93 50%, #ff8c64 72%, #9d3f88 100%);
}

body[data-wallpaper="sunset"] .desktop::before {
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 215, 145, 0.92), transparent 22%),
        radial-gradient(circle at 62% 32%, rgba(255, 151, 96, 0.82), transparent 24%),
        radial-gradient(circle at 84% 18%, rgba(133, 168, 255, 0.6), transparent 18%),
        linear-gradient(155deg, #243d86 0%, #4d65cc 18%, #f5cc93 50%, #ff8c64 72%, #9d3f88 100%);
}

body[data-wallpaper="matrix"] {
    background:
        radial-gradient(circle at 16% 16%, rgba(86, 236, 255, 0.74), transparent 22%),
        radial-gradient(circle at 82% 20%, rgba(56, 138, 255, 0.66), transparent 24%),
        radial-gradient(circle at 56% 72%, rgba(16, 185, 129, 0.24), transparent 18%),
        linear-gradient(160deg, #041928 0%, #0b4569 28%, #1b89aa 58%, #081f30 100%);
}

body[data-wallpaper="matrix"] .desktop::before {
    background:
        radial-gradient(circle at 16% 16%, rgba(86, 236, 255, 0.74), transparent 22%),
        radial-gradient(circle at 82% 20%, rgba(56, 138, 255, 0.66), transparent 24%),
        radial-gradient(circle at 56% 72%, rgba(16, 185, 129, 0.24), transparent 18%),
        linear-gradient(160deg, #041928 0%, #0b4569 28%, #1b89aa 58%, #081f30 100%);
}

body[data-wallpaper="graphite"] {
    background:
        radial-gradient(circle at 20% 18%, rgba(129, 146, 255, 0.24), transparent 22%),
        radial-gradient(circle at 82% 22%, rgba(255, 255, 255, 0.1), transparent 18%),
        linear-gradient(150deg, #0d1628 0%, #1d3257 32%, #46556c 62%, #131b2d 100%);
}

body[data-wallpaper="graphite"] .desktop::before {
    background:
        radial-gradient(circle at 20% 18%, rgba(129, 146, 255, 0.24), transparent 22%),
        radial-gradient(circle at 82% 22%, rgba(255, 255, 255, 0.1), transparent 18%),
        linear-gradient(150deg, #0d1628 0%, #1d3257 32%, #46556c 62%, #131b2d 100%);
}