: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));
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

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;
}

/* 全域隱藏捲軸（仍可滾動）。已移除黑夜模式自訂捲軸，避免 !important 覆蓋頁內元件。 */
:root,
html,
body,
#root,
* {
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
    -ms-overflow-style: none;
}

:root::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#root::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
    background: transparent;
}

:root::-webkit-scrollbar-track,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
#root::-webkit-scrollbar-track,
*::-webkit-scrollbar-track,
:root::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
#root::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: transparent;
}

/* =========================================================
     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;
    /* 🎯 移除點擊高亮 */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;

    /* 🎯 移除 focus 時的 outline */
    outline: none;
}

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;
}