* {
    user-select: none;
}

:root {
    --app-font: system-ui;
    --base-font-size: 16px;
}

html,
body {
    height: 100%;
    overflow-x: hidden;
    touch-action: manipulation;
    font-family: var(--app-font), sans-serif;
    font-size: var(--base-font-size);
}

input[type="text"],
input[type="password"],
textarea {
    user-select: text;
}

/* Hide scrollbars globally but keep scrolling */
* {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

*::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* Utility to hide scrollbars but keep scrolling */
.no-scrollbar {
    scrollbar-width: none;
    /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
    /* WebKit */
}

/* Dark mode overrides */
html.dark body {
    background-color: #6e4f55;
}

html.dark .logo-light {
    display: none;
}

html.dark .logo-dark {
    display: block;
}

html.dark .bg-pink-50 {
    background-color: #281f21 !important;
}

html.dark .bg-white,
html.dark .alt.bg-pink-100 {
    background-color: #382b31 !important;
}

html.dark [type="checkbox"]:checked + span + span.bg-white {
    background-color: rgb(255 156 194) !important;
}

html.dark [type="checkbox"]:checked + span.bg-pink-200 {
    background-color: #572538 !important;
}

html.dark .bg-pink-100 {
    background-color: #673151 !important;
    color: #ffd8e5 !important;
}

html.dark .bg-pink-500 {
    background-color: #ff67a2 !important;
    color: #1f1416 !important;
}

html.dark .text-pink-900,
html.dark .text-pink-800,
html.dark .text-pink-700,
html.dark .text-pink-600,
html.dark .text-pink-500 {
    color: #fff7fa !important;
}

html.dark .text-pink-400 {
    color: #9a7a8b !important;
}

html.dark .text-gray-700 {
    color: #ffd8e5 !important;
}

html.dark .border-pink-100 {
    border-color: #4a4044 !important;
}

html.dark ::placeholder {
    color: #83556e !important;
}

html.dark .bg-pink-200 {
    background-color: #1f1416 !important;
}

html.dark .border-pink-200 {
    border-color: #281f21 !important;
}

html.dark .divide-pink-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: #3a3336 !important;
}

html.dark .hover\:bg-pink-50:hover {
    background-color: #20191c !important;
}

html.dark .prg-bt {
    background-color: #58464e !important;
}

html.dark .alt.border-pink-200 {
    border-color: #5f4a4e !important;
}

html.dark .alt2.bg-white {
    background-color: #553952 !important;
}

html.dark .text-black {
    color: #ffffff !important;
}

html.dark .alt3.border-pink-200 {
    border-color: #664e59 !important;
}

html.dark .alt3.bg-white {
    background-color: #553952 !important;
}

.material-symbols-outlined {
    font-family: "Material Symbols Outlined Variable", "Fallback Outline";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

.material-symbols-filled {
    font-family: "Material Symbols Outlined Variable", "Fallback Outline";
    font-variation-settings: "FILL" 1;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

.heart {
    --size: 280px;
    --progress: 0.65;
    width: var(--size);
    height: var(--size);
    background: conic-gradient(
        #831843 0deg,
        #831843 calc(var(--progress) * 360deg),
        #8f8f8f2b calc(var(--progress) * 360deg) 360deg
    );
    mask: url("/heart-progress.svg") no-repeat center/contain;
    -webkit-mask: url("/heart-progress.svg") no-repeat center/contain;
}

.dark .heart {
    --size: 280px;
    --progress: 0.65;
    width: var(--size);
    height: var(--size);
    background: conic-gradient(
        #ffd8e5 0deg,
        #ffd8e5 calc(var(--progress) * 360deg),
        #8f8f8f42 calc(var(--progress) * 360deg) 360deg
    );
    mask: url("/heart-progress.svg") no-repeat center/contain;
    -webkit-mask: url("/heart-progress.svg") no-repeat center/contain;
}