:root {
    --app-max-width: 480px;
    --design-width: 375;

    /* 視口高度變數：無 JS，優先使用穩定視口 */
    --_100vh: 100vh;
    --vh: 1vh;
}

@supports (height: 100svh) {
    :root {
        --_100vh: 100svh;
        --vh: 1svh;
    }
}
/* 注意：100dvh 會跟著瀏覽器地址列/鍵盤變動，容易造成滾動抖動與跳動，所以不預設啟用 */
@supports (height: 100dvh) {
    :root {
        --_100vh: 100dvh;
        --vh: 1dvh;
    }
}
/* rem 縮放：保持原尺寸比例與 max-width 限制，僅用 CSS */
:root {
    font-family: "Gilroy", sans-serif;
    font-size: calc(min(100vw, var(--app-max-width)) / var(--design-width));
}

:root::-webkit-scrollbar {
    display: none;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    min-height: var(--_100vh);
    overflow-x: hidden;
    background: linear-gradient(to right, #717dff, #898989, #ff8e8e);
    overscroll-behavior: none;
}

body {
    align-self: center;
    max-width: var(--app-max-width);
    width: 100%;
    position: relative;
    --color: #ff9494;
    font-size: 12rem;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
    flex-wrap: nowrap;
    align-items: stretch;
    min-height: inherit;
}

div#root {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

/* =========================================================
     Button, Input, Select, etc.
     ========================================================= */
button,
input,
select,
textarea {
    border: none;
    outline: none;
    appearance: none;
    background: transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    box-shadow: none;
    font-family: Inter;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px your-desired-color inset !important;
    -webkit-text-fill-color: your-desired-text-color !important;
    /* Optional: To prevent a transition effect if you are changing the background color */
    transition: background-color 5000s ease-in-out 0s;
}

/* =========================================================
     黑夜模式滚动条样式（Chrome + Safari 兼容）
     - 同时用 data-theme 与 .theme-dark，macOS Safari 对 class 选择器更稳定
     - 标准属性 scrollbar-color/scrollbar-width 在 Safari 18.2+ 生效
     ========================================================= */
:root[data-theme="dark"] *::-webkit-scrollbar,
html[data-theme="dark"] *::-webkit-scrollbar,
html.theme-dark *::-webkit-scrollbar,
:root[data-theme="dark"] html::-webkit-scrollbar,
:root[data-theme="dark"] body::-webkit-scrollbar,
html[data-theme="dark"] html::-webkit-scrollbar,
html[data-theme="dark"] body::-webkit-scrollbar,
html.theme-dark html::-webkit-scrollbar,
html.theme-dark body::-webkit-scrollbar,
html[data-theme="dark"] #root::-webkit-scrollbar,
html.theme-dark #root::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    display: block !important;
    -webkit-appearance: none;
    appearance: none;
}

:root[data-theme="dark"] *::-webkit-scrollbar-track,
html[data-theme="dark"] *::-webkit-scrollbar-track,
html.theme-dark *::-webkit-scrollbar-track,
:root[data-theme="dark"] html::-webkit-scrollbar-track,
:root[data-theme="dark"] body::-webkit-scrollbar-track,
html[data-theme="dark"] html::-webkit-scrollbar-track,
html[data-theme="dark"] body::-webkit-scrollbar-track,
html.theme-dark html::-webkit-scrollbar-track,
html.theme-dark body::-webkit-scrollbar-track,
html[data-theme="dark"] #root::-webkit-scrollbar-track,
html.theme-dark #root::-webkit-scrollbar-track {
    /* macOS Safari：轨道需非完全透明才会应用自定义滚动条 */
    background: rgba(0, 0, 0, 0.05);
}

:root[data-theme="dark"] *::-webkit-scrollbar-thumb,
html[data-theme="dark"] *::-webkit-scrollbar-thumb,
html.theme-dark *::-webkit-scrollbar-thumb,
:root[data-theme="dark"] html::-webkit-scrollbar-thumb,
:root[data-theme="dark"] body::-webkit-scrollbar-thumb,
html[data-theme="dark"] html::-webkit-scrollbar-thumb,
html[data-theme="dark"] body::-webkit-scrollbar-thumb,
html.theme-dark html::-webkit-scrollbar-thumb,
html.theme-dark body::-webkit-scrollbar-thumb,
html[data-theme="dark"] #root::-webkit-scrollbar-thumb,
html.theme-dark #root::-webkit-scrollbar-thumb {
    background: rgba(238, 238, 238, 0.5) !important;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}

:root[data-theme="dark"] *::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover,
html.theme-dark *::-webkit-scrollbar-thumb:hover,
:root[data-theme="dark"] html::-webkit-scrollbar-thumb:hover,
:root[data-theme="dark"] body::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] html::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] body::-webkit-scrollbar-thumb:hover,
html.theme-dark html::-webkit-scrollbar-thumb:hover,
html.theme-dark body::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] #root::-webkit-scrollbar-thumb:hover,
html.theme-dark #root::-webkit-scrollbar-thumb:hover {
    background: rgba(238, 238, 238, 0.7) !important;
}

/* 仅在对 scrollbar-color 有效的浏览器中设置（macOS Safari 无效，避免无效属性，仅用 webkit-scrollbar） */
@supports (scrollbar-color: rgba(0, 0, 0, 0.5) transparent) {
    :root[data-theme="dark"] *,
    html[data-theme="dark"] *,
    html.theme-dark * {
        scrollbar-width: thin !important;
        scrollbar-color: rgba(238, 238, 238, 0.5) transparent !important;
    }

    :root[data-theme="dark"] html,
    :root[data-theme="dark"] body,
    html[data-theme="dark"],
    html[data-theme="dark"] body,
    html[data-theme="dark"] #root,
    html.theme-dark,
    html.theme-dark body,
    html.theme-dark #root {
        scrollbar-width: thin !important;
        scrollbar-color: rgba(238, 238, 238, 0.5) transparent !important;
        -ms-overflow-style: auto !important;
    }
}

/* macOS Safari：在 html 上强制预留滚动条，使 webkit-scrollbar 样式生效 */
@supports (scrollbar-width: thin) {
    html[data-theme="dark"],
    html.theme-dark {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
}