:root {
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --logo-color: #1a1a1a;
    --btn-bg: #f0f0f0;
    --btn-text: #1a1a1a;
    --btn-hover-bg: #e0e0e0;
    --ui-bg: rgba(255, 255, 255, 0.85);
    --slider-track: #d3d3d3;
    --slider-thumb: #666666;
    --accent-color: #007aff;
    --accent-color-rgb: 0, 122, 255;
    --nav-active-bg: rgba(0, 122, 255, 0.1);
    --crop-overlay: rgba(255, 255, 255, 0.8);
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgba(96, 96, 96, 0.55);
    --scrollbar-thumb-hover: rgba(80, 80, 80, 0.75);
    --camera-shutter-border: rgba(150, 150, 150, 0.85);
    --camera-shutter-fill: rgba(220, 220, 220, 0.95);
}

[data-theme="dark"] {
    --bg-color: #000000;
    --text-color: #f0f0f0;
    --logo-color: #f0f0f0;
    --btn-bg: #2c2c2e;
    --btn-text: #f0f0f0;
    --btn-hover-bg: #3a3a3c;
    --ui-bg: rgba(28, 28, 30, 0.85);
    --slider-track: #444;
    --slider-thumb: #ccc;
    --accent-color: #0a84ff;
    --accent-color-rgb: 10, 132, 255;
    --nav-active-bg: rgba(10, 132, 255, 0.2);
    --crop-overlay: rgba(0, 0, 0, 0.8);
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgba(204, 204, 204, 0.55);
    --scrollbar-thumb-hover: rgba(220, 220, 220, 0.75);
    --camera-shutter-border: rgba(255, 255, 255, 0.85);
    --camera-shutter-fill: rgba(255, 255, 255, 0.95);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

* {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 9999px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-button {
    display: none;
}

#app-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.screen {
    display: none;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.screen.active {
    display: flex;
}

.icon {
    width: 100%;
    height: 100%;
    display: block;
    color: var(--text-color);
    transition: color 0.3s;
}

.hidden {
    display: none !important;
}