/* VARIABLES */
:root {
--body-bg-color: rgb(249, 250, 253);
--color-white:#fff;
--color-neutral-light:rgb(249,250,253);
--color-neutral-medium:rgb(234,238,245);
--color-neutral-dark: rgb(100, 110, 130);
--color-neutral-text: #222;
--color-primary:#3B82F6;
--color-primary-medium:#0069d9;
--color-primary-text:#fff;
--color-action: #10B981;
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
}

/* RESETS */
*,*::before,*::after {box-sizing:border-box;margin:0;padding:0;}
html {scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px;width:100vw;max-width:100vw;height:100vh;height:100dvh;}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}
body {position:relative;width:100vw;max-width:100vw;height:100vh;height:100dvh;line-height:1.5;color:var(--color-neutral-text);}
html,body {margin:0;padding:0;scrollbar-color: var(--color-neutral-medium) var(--color-neutral-light);scrollbar-width: thin; }
body {background-color: var(--body-bg-color);}
h1 {font-size:2.0rem;}
h2 {font-size:1.5rem;}
h3 {font-size:1.25rem;}
a,span{display:inline-block;vertical-align:middle;}
a,a:hover {color: inherit;text-decoration:none;}
button {cursor:pointer;background-color:transparent;color:inherit;border:none;outline:none;}
div {scrollbar-width: thin;}
div::-webkit-scrollbar {width:6px;height:6px;}
::-webkit-scrollbar-track {background: var(--color-neutral-medium);}
::-webkit-scrollbar-thumb {background-color: var(--color-neutral-light);border-radius: 5px;border: 2px solid var(--color-neutral-medium);}
img,picture,video,canvas,svg {display:block;max-width:100%;margin:0 auto;}
table {border-collapse:collapse;width:100%;}
[onclick] {cursor:pointer;} 
label{width:100%;display:flex;align-items:center;margin:0 0 0.1rem 0;font-weight:600;font-size:0.96rem;padding:0 0.25rem;color:var(--color-neutral-text);}
input,button,textarea,select {font:inherit;border:none;}
input,select {border:1px solid var(--color-neutral-medium);width:100%;height:2.3rem;padding:0 0.5rem;border-radius:0.2rem;background-color:var(--color-white);color:var(--color-neutral-text);}
input[type="checkbox"] {width:1.5rem;height:1.5rem;margin-right:0.25rem;cursor:pointer;}
label:has(input[type="checkbox"]) {cursor:pointer;}
textarea {border:1px solid var(--color-neutral-medium);width:100%;height: auto;min-height:5rem;max-height:20rem;padding:0.5rem;line-height:2rem;border-radius:0.2rem;background-color:var(--color-white);color:var(--color-neutral-text);field-sizing:content;}
input[readonly],select[disabled] {background-color:var(--color-neutral-medium);}
input:focus-visible,select:focus-visible,textarea:focus-visible {border-color:var(--color-primary);}
input::placeholder,select::placeholder {color:#444;}
form {padding:0;margin:0;display:block;border:none;outline:none;}
main {will-change: transform;contain: layout style paint;transition: opacity 0.2s ease;opacity: 1;}

/* COMPONENTS */
.btn {display:inline-flex;align-items:center;justify-content:center;gap:0.15rem;line-height:2.3rem;height:2.3rem;padding:0 0.75rem!important;border-radius:0.2rem;text-align:center;}
.btn.bg-neutral {color:var(--color-neutral-text);background-color:var(--color-neutral-light);}
.btn.bg-neutral.hover:hover {background-color:var(--color-neutral-medium);}
.btn.bg-primary {background-color:var(--color-primary);color:var(--color-primary-text);}
.btn.bg-primary.hover:hover {background-color:var(--color-primary-medium);}
.btn-group {border-radius: 0.2rem;display: inline-flex;}
.btn-group .btn {border-radius: 0;}
.btn-group.border > * {border:0!important;}
.btn-group .btn:first-child {border-top-left-radius: 0.2rem;border-bottom-left-radius: 0.2rem;}
.btn-group .btn:last-child {border-top-right-radius: 0.2rem;border-bottom-right-radius: 0.2rem;}
.btn-group .btn + .btn {position: relative;}
.btn-group .btn + .btn::before {content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px;background-color: rgba(230, 230, 230, 0.5);}

.card {padding:1rem;border:1px solid rgb(234,238,245);border-radius:0.5rem;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);}

.dropdown{position:relative;}
.dropdown-content{width:auto;min-width:100%;display:none;position:absolute;z-index:10;text-align:left;font-size:1rem;top:100%;left:0;padding:0.25rem;color:var(--neutral-color-text);background-color:var(--color-white);border:1px solid var(--color-neutral-medium);box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);border-radius:0.5rem;max-height:500px;overflow-y:auto;}
.dropdown-content > * {display:block;width:100%;text-align:left;padding:0.25rem 0.5rem;white-space: nowrap;color:var(--color-neutral-text);}
.dropdown-content > *:hover {background-color:var(--color-neutral-light);}

.link {color:var(--color-primary);text-decoration:underline;cursor:pointer;}

.navbar {display:flex;align-items:center;user-select:none;}
.navbar-item {position:relative;padding:0 0.1rem;display:flex;align-items:center;}

/* UTILITY */
.bg-neutral-light {background-color:var(--color-neutral-light);}
.bg-neutral-medium {background-color: var(--color-neutral-medium);}
.bg-primary {background-color:var(--color-primary);color:var(--color-primary-text);}
.bg-action {background-color:var(--color-action);color:var(--color-primary-text);}
.primary {color:var(--color-primary);}

/* ANIMATIONS */
.appear {animation:appear linear;animation-timeline:view();animation-range:entry 0% cover 30%;}
@keyframes appear {from{opacity:0;transform:translateX(-50%);}to{opacity:1;transform:translateX(0px);}}
.spin {animation: spin 1s linear infinite;}
@keyframes spin {to {transform: rotate(360deg);}}