@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

html {
  background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
  background-attachment: fixed;
  background-size: cover;
}

@media (width <= 800px) {
  html {
    font-size: 90%;
  }
}

body {
  font-family: "Rubik", sans-serif;
  margin: 0;
  color: oklch(0.373 0.034 259.733);
}

h1 { font-size: 1rem; margin-block-start: 0; margin-block-end: 0; font-weight: 400; }
h2 { font-size: 1rem; margin-block-start: 0; margin-block-end: 0; font-weight: 400; }
h3 { font-size: 1rem; margin-block-start: 0; margin-block-end: 0; font-weight: 400; }
h4 { font-size: 1rem; margin-block-start: 0; margin-block-end: 0; font-weight: 400; }
h5 { font-size: 1rem; margin-block-start: 0; margin-block-end: 0; font-weight: 400; }
h6 { font-size: 1rem; margin-block-start: 0; margin-block-end: 0; font-weight: 400; }
p  { font-size: 1rem; margin-block-start: 0; margin-block-end: 0; font-weight: 400; }

a { text-decoration: none; color: oklch(0.373 0.034 259.733); }

select, input {
  font-family: "Rubik", sans-serif;
  box-sizing: content-box;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: oklch(0.373 0.034 259.733);
  border-radius: 0.25rem;
  border: solid 1px oklch(0.872 0.01 258.338);
}

textarea {
  font-family: "Rubik", sans-serif;
  font-size: 1rem;
  color: oklch(0.373 0.034 259.733);
  border-radius: 0.25rem;
  border: solid 1px oklch(0.872 0.01 258.338);
  resize: none;
}

button, [type="submit"] {
  font-family: "Rubik", sans-serif;
  font-size: 1rem;
  color: oklch(0.373 0.034 259.733);
  border: none;
  background-color: transparent;
}

.whitespace-prewrap { white-space: pre-wrap; }

.carousel      { overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.carousel-item { scroll-snap-align: center; }

.hidden    { display: none; }
.invisible { visibility: hidden; }

.border-box  { box-sizing: border-box; }
.content-box { box-sizing: content-box; }

.f1  { font-size: 0.25rem; }
.f2  { font-size: 0.5rem; }
.f3  { font-size: 0.75rem; }
.f4  { font-size: 1rem; }
.f5  { font-size: 1.25rem; }
.f6  { font-size: 1.5rem; }
.f7  { font-size: 1.75rem; }
.f8  { font-size: 2rem; }
.f12 { font-size: 3rem; }
.f16 { font-size: 4rem; }

.fw3 { font-weight: 300; }
.fw4 { font-weight: 400; }
.fw5 { font-weight: 500; }
.fw6 { font-weight: 600; }

.ls1 { letter-spacing: 0.1rem; }

.text-center { text-align: center; }
.text-right  { text-align: right; }

.relative   { position: relative; }
.absolute   { position: absolute; }
.sticky     { position: sticky; }
.fixed      { position: fixed; }
.top0       { top: 0; }
.top-1      { top: -0.25rem; }
.left0      { left: 0; }
.right0     { right: 0; }
.right-1    { right: -0.25rem; }
.bottom0    { bottom: 0; }
.top-1      { top: -0.25rem; }
.right-0\.5 { right: -0.125rem; }

.backdrop-blur { backdrop-filter: blur(2rem); }

.hauto { height: auto; }
.hfit  { height: fit-content; }
.hfull { height: 100%; }
.hpx   { height: 1px; }
.h2    { height: 0.5rem; }
.h3    { height: 0.75rem; }
.h4    { height: 1rem; }
.h5    { height: 1.25rem; }
.h6    { height: 1.5rem; }
.h8    { height: 2rem; }
.h10   { height: 2.5rem; }
.h12   { height: 3rem; }
.h14   { height: 3.5rem; }
.h16   { height: 4rem; }
.h24   { height: 6rem; }
.h25   { height: 6.25rem; }
.h32   { height: 8rem; }
.h40   { height: 10rem; }
.h48   { height: 12rem; }
.h64   { height: 16rem; }
.h96   { height: 24rem; }
.h128  { height: 32rem; }

.wauto { width: auto; }
.wfit  { width: fit-content; }
.wfull { width: 100%; }
.w75p  { width: 75%; }
.wpx   { width: 1px; }
.w2    { width: 0.5rem; }
.w3    { width: 0.75rem; }
.w4    { width: 1rem; }
.w5    { width: 1.25rem; }
.w6    { width: 1.5rem; }
.w8    { width: 2rem; }
.w10   { width: 2.5rem; }
.w16   { width: 4rem; }
.w24   { width: 6rem; }
.w25   { width: 6.25rem; }
.w32   { width: 8rem; }
.w40   { width: 10rem; }
.w48   { width: 12rem; }
.w64   { width: 16rem; }
.w96   { width: 24rem; }
.w128  { width: 32rem; }

.w25p { width: 25%; }
.w75p { width: 75%; }

.maxhfull { max-height: 100%; }
.maxh24   { max-height: 6rem; }
.maxh32   { max-height: 8rem; }
.maxh64   { max-height: 16rem; }
.maxh96   { max-height: 24rem; }

.maxwfull { max-width: 100%; }
.maxw24   { max-width: 6rem; }
.maxw32   { max-width: 8rem; }
.maxw64   { max-width: 16rem; }
.maxw96   { max-width: 24rem; }
.maxw128  { max-width: 32rem; }
.maxw160  { max-width: 40rem; }

.minh48 { min-height: 12rem; }

.wcontent { max-width: 80rem; }

.m1 { margin: 0.25rem; }
.m2 { margin: 0.5rem; }
.m3 { margin: 0.75rem; }
.m4 { margin: 1rem; }
.m6 { margin: 1.5rem; }
.m8 { margin: 2rem; }

.my2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my4 { margin-top: 1rem;   margin-bottom: 1rem; }
.my8 { margin-top: 2rem;   margin-bottom: 2rem; }

.mt1 { margin-top: 0.25rem; }
.mt2 { margin-top: 0.5rem; }
.mt3 { margin-top: 0.75rem; }
.mt4 { margin-top: 1rem; }
.mt6 { margin-top: 1.5rem; }
.mt8 { margin-top: 2rem; }

.mt1 { margin-bottom: 0.25rem; }
.mt2 { margin-bottom: 0.5rem; }
.mb3 { margin-bottom: 0.75rem; }
.mb4 { margin-bottom: 1rem; }
.mb6 { margin-bottom: 1.5rem; }
.mb8 { margin-bottom: 2rem; }

.mr-6 { margin-right: -1.5rem; }

.ml4 { margin-left: 1rem; }

.mxauto { margin-left: auto; margin-right: auto; }

.mt25vh { margin-top: 25vh; }

.p1 { padding: 0.25rem; }
.p2 { padding: 0.5rem; }
.p3 { padding: 0.75rem; }
.p4 { padding: 1rem; }
.p6 { padding: 1.5rem; }
.p8 { padding: 2rem; }

.px1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px2 { padding-left: 0.5rem;  padding-right: 0.5rem; }
.px3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px4 { padding-left: 1rem;    padding-right: 1rem; }
.px6 { padding-left: 1.5rem;  padding-right: 1.5rem; }
.px8 { padding-left: 2rem;    padding-right: 2rem; }

.py1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py2 { padding-top: 0.5rem;  padding-bottom: 0.5rem; }
.py3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py4 { padding-top: 1rem;    padding-bottom: 1rem; }
.py6 { padding-top: 1.5rem;  padding-bottom: 1.5rem; }
.py8 { padding-top: 2rem;    padding-bottom: 2rem; }

.pl1 { padding-left: 0.25rem; }
.pl2 { padding-left: 0.5rem; }
.pl3 { padding-left: 0.75rem; }
.pl4 { padding-left: 1rem; }
.pl6 { padding-left: 1.5rem; }
.pl8 { padding-left: 2rem; }

.pr1 { padding-right: 0.25rem; }
.pr2 { padding-right: 0.5rem; }
.pr3 { padding-right: 0.75rem; }
.pr4 { padding-right: 1rem; }
.pr6 { padding-right: 1.5rem; }
.pr8 { padding-right: 2rem; }

.pt1 { padding-top: 0.25rem; }
.pt2 { padding-top: 0.5rem; }
.pt3 { padding-top: 0.75rem; }
.pt4 { padding-top: 1rem; }
.pt6 { padding-top: 1.5rem; }
.pt8 { padding-top: 2rem; }

.pb1 { padding-bottom: 0.25rem; }
.pb2 { padding-bottom: 0.5rem; }
.pb3 { padding-bottom: 0.75rem; }
.pb4 { padding-bottom: 1rem; }
.pb6 { padding-bottom: 1.5rem; }
.pb8 { padding-bottom: 2rem; }

.block  { display: block; }
.inline { display: inline; }

.row   { display: flex; flex-direction: row;    gap: 0rem; }
.row1  { display: flex; flex-direction: row;    gap: 0.25rem; }
.row2  { display: flex; flex-direction: row;    gap: 0.5rem; }
.row3  { display: flex; flex-direction: row;    gap: 0.75rem; }
.row4  { display: flex; flex-direction: row;    gap: 1rem; }
.row8  { display: flex; flex-direction: row;    gap: 2rem; }
.row12 { display: flex; flex-direction: row;    gap: 3rem; }
.col   { display: flex; flex-direction: column; gap: 0rem; }
.col1  { display: flex; flex-direction: column; gap: 0.25rem; }
.col2  { display: flex; flex-direction: column; gap: 0.5rem; }
.col3  { display: flex; flex-direction: column; gap: 0.75rem; }
.col4  { display: flex; flex-direction: column; gap: 1rem; }
.col8  { display: flex; flex-direction: column; gap: 2rem; }

.row8-col8 { display: flex; flex-direction: row; gap: 2rem; }
@media (width <= 800px) { .row8-col8 { display: flex; flex-direction: column; gap: 2rem; } }

.flex { display: flex; }

.flexwrap { flex-wrap: wrap; }

.grid  { display: grid; gap: 0rem; }
.grid1 { display: grid; gap: 0.25rem; }
.grid2 { display: grid; gap: 0.5rem; }
.grid3 { display: grid; gap: 0.75rem; }
.grid4 { display: grid; gap: 1rem; }
.grid6 { display: grid; gap: 1.5rem; }
.grid8 { display: grid; gap: 2rem; }

.gridcols64 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

.flex1 { flex: 1 1 0%; }

.grow0 { flex-grow: 0; }
.grow1 { flex-grow: 1; }

.shrink0 { flex-shrink: 0; }
.shrink1 { flex-shrink: 1; }

.flex-shrink0 { flex-shrink: 0; }

.ai-start   { align-items:     start; }
.ai-end     { align-items:     end; }
.ai-center  { align-items:     center; }
.jc-start   { justify-content: start; }
.jc-end     { justify-content: end; }
.jc-center  { justify-content: center; }
.jc-between { justify-content: space-between; }
.as-center  { align-self:      center; }
.as-start   { align-self:      start; }
.as-end     { align-self:      end; }

.rounded-full { border-radius: 256rem; }
.rounded1     { border-radius: 0.25rem; }
.rounded2     { border-radius: 0.5rem; }
.rounded3     { border-radius: 0.75rem; }
.rounded4     { border-radius: 1rem; }

.border   { border:        1px solid; }
.border-l { border-left:   1px solid; }
.border-r { border-right:  1px solid; }
.border-t { border-top:    1px solid; }
.border-b { border-bottom: 1px solid; }

.border-gray6      { border-color: oklch(0.446 0.03 256.802); }
.border-gray6-50   { border-color: oklch(0.446 0.03 256.802 / 0.5); }
.border-gray6-20   { border-color: oklch(0.446 0.03 256.802 / 0.2); }
.border-gray-10    { border-color: oklch(0.446 0.03 256.802 / 0.1); }
.border-blue6      { border-color: oklch(0.5 0.134 242.749); }
.border-blue6-50   { border-color: oklch(0.588 0.158 241.966 / 0.5); }
.border-blue7      { border-color: oklch(0.5 0.134 242.749); }
.border-yellow6    { border-color: oklch(0.681 0.162 75.834); }
.border-yellow6-50 { border-color: oklch(0.681 0.162 75.834 / 0.5); }
.border-yellow9-50 { border-color: oklch(0.421 0.095 57.708 / 0.5); }
.border-green4     { border-color: oklch(0.742 0.15 157.05); }
.border-red4       { border-color: oklch(0.627 0.253 17.585); }

.text-white      { color: white; }
.text-white-90   { color: rgb(255 255 255 / 0.9); }
.text-gray5      { color: oklch(0.551 0.027 264.364); }
.text-gray6      { color: oklch(0.446 0.03 256.802); }
.text-gray7      { color: oklch(0.373 0.034 259.733); }
.text-blue6      { color: oklch(0.588 0.158 241.966); }
.text-blue7      { color: oklch(0.5 0.134 242.749); }
.text-blue8      { color: oklch(0.443 0.11 240.79); }
.text-yellow9    { color: oklch(0.421 0.095 57.708); }
.text-yellow9-70 { color: oklch(0.421 0.095 57.708 / 0.7); }
.text-red8       { color: oklch(0.455 0.188 13.697); }
.text-green8     { color: oklch(0.427 0.154 150.069); }

.bg-white      { background-color: white; }
.bg-white-30   { background-color: oklch(1 0 0 / 0.3); }
.bg-white-50   { background-color: oklch(1 0 0 / 0.5); }
.bg-white-70   { background-color: oklch(1 0 0 / 0.7); }
.bg-black-80   { background-color: rgba(0, 0, 0, 0.8); }
.bg-gray4      { background-color: oklch(0.707 0.022 261.325); }
.bg-gray4-50   { background-color: oklch(0.707 0.022 261.325 / 0.5); }
.bg-gray5      { background-color: oklch(0.551 0.027 264.364); }
.bg-gray6      { background-color: oklch(0.446 0.03 256.802); }
.bg-gray6-10   { background-color: oklch(0.446 0.03 256.802 / 0.1); }
.bg-blue6      { background-color: oklch(0.588 0.158 241.966); }
.bg-blue6-10   { background-color: oklch(0.588 0.158 241.966 / 0.1); }
.bg-blue7      { background-color: oklch(0.5 0.134 242.749); }
.bg-blue7-10   { background-color: oklch(0.5 0.134 242.749 / 0.1); }
.bg-green6     { background-color: oklch(0.627 0.194 149.214); }
.bg-green7     { background-color: oklch(0.527 0.154 150.069); }
.bg-green-10   { background-color: oklch(0.742 0.15 157.05 / 0.1); }
.bg-red7       { background-color: oklch(0.586 0.253 17.585); }
.bg-red-10     { background-color: oklch(0.627 0.253 17.585 / 0.1); }
.bg-yellow6    { background-color: oklch(0.681 0.162 75.834); }
.bg-yellow6-10 { background-color: oklch(0.681 0.162 75.834 / 0.1); }
.bg-yellow6-30 { background-color: oklch(0.681 0.162 75.834 / 0.3); }
.bg-yellow6-50 { background-color: oklch(0.681 0.162 75.834 / 0.5); }
.bg-yellow7    { background-color: oklch(0.554 0.135 66.442); }

.btn { padding: 0.75rem 2rem; border-radius: 0.5rem; }

.btn-bg-transparent        { background-color: transparent; }
.btn-bg-transparent:hover  { background-color: oklch(0.551 0.027 264.364 / 0.2); }
.btn-bg-transparent:active { background-color: oklch(0.446 0.03 256.802 / 0.2); }
.btn-bg-white              { background-color: oklch(1 0 0); }
.btn-bg-white:hover        { background-color: oklch(0.95 0 0); }
.btn-bg-white:active       { background-color: oklch(0.9 0 0); }
.btn-bg-white-30           { background-color: oklch(1 0 0 / 0.3); }
.btn-bg-white-30:hover     { background-color: oklch(1 0 0 / 0.5); }
.btn-bg-white-30:active    { background-color: oklch(1 0 0 / 0.7); }
.btn-bg-white-50           { background-color: oklch(1 0 0 / 0.5); }
.btn-bg-white-50:hover     { background-color: oklch(1 0 0 / 0.7); }
.btn-bg-white-50:active    { background-color: oklch(1 0 0 / 0.8); }
.btn-bg-gray               { background-color: oklch(0.707 0.022 261.325); }
.btn-bg-gray:hover         { background-color: oklch(0.551 0.027 264.364); }
.btn-bg-gray:active        { background-color: oklch(0.446 0.03 256.802); }
.btn-bg-blue               { background-color: oklch(0.588 0.158 241.966); color: white; }
.btn-bg-blue:hover         { background-color: oklch(0.5 0.134 242.749); }
.btn-bg-blue:active        { background-color: oklch(0.443 0.11 240.79); }
.btn-bg-blue:disabled      { background-color: oklch(0.707 0.022 261.325); color: oklch(0.928 0.006 264.531); }
.btn-bg-red                { background-color: oklch(0.586 0.253 17.585); color: white; }
.btn-bg-red:hover          { background-color: oklch(0.5 0.25 17.585); }
.btn-bg-red:active         { background-color: oklch(0.43 0.24 17.585); }
.btn-bg-red:disabled       { background-color: oklch(0.707 0.022 261.325); color: oklch(0.928 0.006 264.531); }
.btn-bg-yellow6-10         { background-color: oklch(0.681 0.162 75.834 / 0.1); }
.btn-bg-yellow6-10:hover   { background-color: oklch(0.681 0.162 75.834 / 0.2); }
.btn-bg-yellow6-10:active  { background-color: oklch(0.681 0.162 75.834 / 0.3); }

.btn-shiny        { background: linear-gradient(to bottom right, oklch(0.588 0.158 241.966), oklch(0.685 0.169 237.323)); box-shadow: 0 0.25rem 1rem oklch(0.685 0.169 237.323 / 0.5); }
.btn-shiny:hover  { background: linear-gradient(to bottom right, oklch(0.588 0.158 241.966), oklch(0.746 0.16 232.661)); }
.btn-shiny:active { background: linear-gradient(to bottom right, oklch(0.588 0.158 241.966), oklch(0.5 0.134 242.749)); }

.shake { animation: shake 150ms 2 linear; }
@keyframes shake {
  0%   { transform: translate(5px,  0); }
  50%  { transform: translate(-5px, 0); }
  100% { transform: translate(0,    0); }
}

.z10 { z-index: 10; }

.cover { object-fit: cover; }

/* Fluid drag and drop animations */
.sortable-ghost {
  opacity: 0.5 !important;
  transform: scale(0.9) !important;
  border-color: oklch(0.588 0.158 241.966) !important;
}

.sortable-chosen {
  cursor: grabbing !important;
  z-index: 999 !important;
}

/* Smooth transitions for non-dragged items */
[x-sort] > * {
  transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Force smooth transitions during sorting */
[x-sort].sortable-drag > * {
  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Ensure SortableJS elements transition smoothly */
.sortable-fallback {
  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Prevent text selection during drag */
[x-sort] {
  user-select: none;
}

/* Style for non-sortable items - exclude from SortableJS */
.sortable-ignore {
  /* Remove from SortableJS interaction */
}