:root {
    --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    --p-h: 250;
    --s-h: 245;
    --t-h: 300;

    --s-xs:  0.25rem;  /* 4px  */
    --s-sm:  0.5rem;   /* 8px  */
    --s-xm:  0.5rem;   /* 10px */
    --s-md:  1rem;     /* 16px */
    --s-lg:  1.5rem;   /* 24px */
    --s-xl:  2rem;     /* 32px */
    --s-2xl: 3rem;     /* 48px */

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   clamp(1.125rem, 2vw + 1rem, 1.25rem);
    --text-xl:   clamp(1.25rem, 3vw + 1rem, 1.75rem);
    --text-2xl:  clamp(1.5rem, 4vw + 1rem, 2.5rem);
    --text-3xl:  clamp(2rem, 6vw + 1rem, 4rem);

    --error:                oklch(55% 0.25  25);
    --on-error:             oklch(98% 0.01 25);
    --error-container:      oklch(90% 0.05 25);
    --on-error-container:   oklch(25% 0.15 25);

    --warning:              oklch(75% 0.15 85);
    --on-warning:           oklch(20% 0.05 85);
    --warning-container:    oklch(94% 0.10 85);
    --on-warning-container: oklch(35% 0.15 85);

    --info:                 oklch(60% 0.15 250);
    --on-info:              oklch(98% 0.01 250);
    --info-container:       oklch(92% 0.04 250);
    --on-info-container:    oklch(20% 0.10 250);
}
/*
    Themes
*/
[data-theme="light"] {
    --primary:                oklch(40% 0.20 var(--p-h));
    --on-primary:             oklch(98% 0.01 var(--p-h));
    --primary-container:      oklch(90% 0.05 var(--p-h));
    --on-primary-container:   oklch(10% 0.10 var(--p-h));

    --secondary:              oklch(40% 0.20 var(--s-h));
    --on-secondary:           oklch(98% 0.01 var(--s-h));
    --secondary-container:    oklch(90% 0.05 var(--s-h));
    --on-secondary-container: oklch(10% 0.10 var(--s-h));

    --tertiary:               oklch(40% 0.20 var(--t-h));
    --on-tertiary:            oklch(98% 0.01 var(--t-h));
    --tertiary-container:     oklch(90% 0.05 var(--t-h));
    --on-tertiary-container:  oklch(10% 0.10 var(--t-h));

    --surface:                oklch(98% 0.01 var(--p-h));
    --surface-container:      oklch(94% 0.02 var(--p-h));
    --on-surface:             oklch(15% 0.02 var(--p-h));
    
    --outline:                oklch(50% 0.02 var(--p-h));
    --scrim:                oklch(0% 0 0 / 0.3);

    .icon{ filter: none !important; -webkit-filter: none !important; }
}
[data-theme="dark"] {
    --primary:                oklch(80% 0.12 var(--p-h));
    --on-primary:             oklch(20% 0.10 var(--p-h));
    --primary-container:      oklch(30% 0.10 var(--p-h));
    --on-primary-container:   oklch(90% 0.05 var(--p-h));

    --secondary:              oklch(80% 0.12 var(--s-h));
    --on-secondary:           oklch(20% 0.10 var(--s-h));
    --secondary-container:    oklch(30% 0.10 var(--s-h));
    --on-secondary-container: oklch(90% 0.05 var(--s-h));

    --tertiary:               oklch(80% 0.12 var(--t-h));
    --on-tertiary:            oklch(20% 0.10 var(--t-h));
    --tertiary-container:     oklch(30% 0.10 var(--t-h));
    --on-tertiary-container:  oklch(90% 0.05 var(--t-h));

    --surface:                oklch(12% 0.02 var(--p-h));
    --surface-container:      oklch(16% 0.02 var(--p-h));
    --on-surface:             oklch(94% 0.01 var(--p-h));

    --outline:                oklch(30% 0.03 var(--p-h));
}
/*
    Reset and stuff
*/
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
    outline: 2px solid var(--outline);
    outline-offset: 1px;
    border: none;
}
*,
*::after,
*::before { box-sizing: border-box; }
*{ margin: 0; padding: 0; }
body {
    background-color: var(--surface);
    color:            var(--on-surface);
    font-family:      var(--font-family);
    font-size:        var(--text-base);
    height: 100vh;
}
a { color: inherit; text-decoration: none; }
button,
input {
    background-color: var(--primary-container);
    font-family: var(--font-family);
    border-radius: 4px;
    font-size: inherit;
    cursor: pointer;
    color: inherit;
    border: none;
}
button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
button{
    transition: border-radius 0.1s ease;
}
button.deform:hover,
button.deform:focus-visible{
    border-radius: 6px;
}
button.grow {
    transition: transform 0.2s ease-in-out;
}

button.grow:hover {
    transform: scale(1.03);
}
button.bounce {
    transition: transform 0.1s ease;
}

button.bounce:active {
    transform: scale(0.98);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
.loading {
    color: transparent !important;
    position: relative;
    pointer-events: none;
}
.loading::after {
    animation: spin 0.6s linear infinite;
    border: 2px solid var(--load-color, var(--on-surface));
    border-top-color: transparent;
    border-radius: 50%;
    position: absolute;
    content: "";
    height: 1.2rem; width: 1.2rem;
    top: calc(50% - 0.6rem);
    left: calc(50% - 0.6rem);
}

li{ list-style: none; }
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 700;
    color: var(--on-surface);
}

h1 { font-size: var(--text-3xl) ; margin-bottom: var(--s-sm); }
h2 { font-size: var(--text-2xl) ; margin-bottom: var(--s-sm); }
h3 { font-size: var(--text-xl)  ; margin-bottom: var(--s-sm); }
h4 { font-size: var(--text-lg)  ; margin-bottom: var(--s-sm); }
h5 { font-size: var(--text-base); font-weight: 800; text-transform: uppercase; }
h6 { font-size: var(--text-sm)  ; font-weight: 800; text-transform: uppercase; opacity: 0.8; }
/*
    Utils
*/
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.hidden {
    display: none !important;
}

.flx{ display: flex; }
.grd{ display: grid; }
.dsp-block{display: block;}
.dsp-none{ display: none; }

.grd.pli-c{ place-items: center; }

.ali-c{ align-items: center;     }
.ali-s{ align-items: flex-start; }
.ali-e{ align-items: flex-end;   }

.j-spcBetween{ justify-content: space-between; }
.j-spcAround{  justify-content: space-around;  }
.j-center{     justify-content: center;        }
.j-left{       justify-content: left;          }
.j-end{        justify-content: end;           }

.flx.ali-center{ align-items: center;            }
.flx.ali-end{    align-items: end;               }                 
.flx.col{        flex-direction: column;         }
.flx.col.rev{    flex-direction: column-reverse; }
.flx.rev{        flex-direction: row-reverse;    }

.flx-1    { flex:1; }
.flx.wrap { flex-wrap: wrap; }   

.fil-x{  width:  100%; }
.fil-y{  height: 100%; }
.fil{width: 100%; height: 100%; }

.bdr-high   { border: 2px solid var(--primary); }
.bdr-low    { border: 2px solid var(--outline); }

.bdr-rad-xs { border-radius: 2px;  }
.bdr-rad-sm { border-radius: 4px;  }
.bdr-rad-md { border-radius: 8px;  }
.bdr-rad-lg { border-radius: 10px; }
.bdr-rad-xl { border-radius: 16px; }
.bdr-rad-no { border-radius: 0px;  }

.bdrT-rad-md { border-top-left-radius: 8px; border-top-right-radius: 8px; }

.pos-rel{ position: relative; }
.pos-stc{ position: sticky; }
.pos-abs{ position: absolute; }

.right  { right: 0;  }
.left   { left: 0;   }
.bottom { bottom: 0; }
.top    { top: 0;    }

.h-50pr{ height: 50%; }
.w-50pr{ width:  50%; }

.p-xs  { padding: var(--s-xs);  }
.p-sm  { padding: var(--s-sm);  }
.p-md  { padding: var(--s-md);  }
.p-lg  { padding: var(--s-lg);  }
.p-xl  { padding: var(--s-xl);  }
.p-2xl { padding: var(--s-2xl); }

.py-xs  { padding-top:  var(--s-xs);  padding-bottom: var(--s-xs);  }
.py-sm  { padding-top:  var(--s-sm);  padding-bottom: var(--s-sm);  }
.py-md  { padding-top:  var(--s-md);  padding-bottom: var(--s-md);  }
.py-lg  { padding-top:  var(--s-lg);  padding-bottom: var(--s-lg);  }
.py-xl  { padding-top:  var(--s-xl);  padding-bottom: var(--s-xl);  }
.py-2xl { padding-top:  var(--s-2xl); padding-bottom: var(--s-2xl); }

.pl-sm { padding-left:  var(--s-sm); }
.pl-md { padding-left:  var(--s-md); }
.pl-lg { padding-left:  var(--s-lg); }

.pr-md  { padding-right: var(--s-md);  }
.pr-lg  { padding-right: var(--s-lg);  }
.pr-xl  { padding-right: var(--s-xl);  }
.pr-2xl { padding-right: var(--s-2xl); }

.px-xs  { padding-left: var(--s-xs);   padding-right:  var(--s-xs); }
.px-sm  { padding-left: var(--s-sm);   padding-right:  var(--s-sm); }
.px-md  { padding-left: var(--s-md);   padding-right:  var(--s-md); }
.px-lg  { padding-left: var(--s-lg);   padding-right:  var(--s-lg); }
.px-xl  { padding-left:  var(--s-xl);  padding-right: var(--s-xl);  }
.px-2xl { padding-left:  var(--s-2xl); padding-right: var(--s-2xl); }

.m-xs { margin: var(--s-xs); }
.m-sm { margin: var(--s-sm); }
.m-md { margin: var(--s-md); }
.m-lg { margin: var(--s-lg); }
.m-xl { margin: var(--s-xl); }

.m-auto { margin: auto  ; }
.mx-auto{ margin: 0 auto; }
.my-auto{ margin: auto 0; }

.my-sm { margin-top:  var(--s-sm); margin-bottom: var(--s-sm); }
.my-md { margin-top:  var(--s-md); margin-bottom: var(--s-md); }
.my-lg { margin-top:  var(--s-lg); margin-bottom: var(--s-lg); }

.mx-sm { margin-left: var(--s-sm); margin-right:  var(--s-sm); }
.mx-md { margin-left: var(--s-md); margin-right:  var(--s-md); }
.mx-lg { margin-left: var(--s-lg); margin-right:  var(--s-lg); }

.mt-sm  { margin-top: var(--s-sm);  }
.mt-md  { margin-top: var(--s-md);  }
.mt-lg  { margin-top: var(--s-lg);  }
.mt-xl  { margin-top: var(--s-xl);  }
.mt-2xl { margin-top: var(--s-2xl); }

.mb-xs  { margin-bottom: var(--s-xs); }
.mb-sm  { margin-bottom: var(--s-sm); }
.mb-md  { margin-bottom: var(--s-md); }
.mb-lg  { margin-bottom: var(--s-lg); }

.gap-xs { gap: var(--s-xs); }
.gap-sm { gap: var(--s-sm); }
.gap-md { gap: var(--s-md); }
.gap-lg { gap: var(--s-lg); }
.gap-xl { gap: var(--s-xl); }

.h-fit { height: fit-content;    }
.h-max { height: max-content;    }
.h-var { height: var(--h, auto); }

.w-xs  { width: var(--s-xs);  }
.w-sm  { width: var(--s-sm);  }
.w-md  { width: var(--s-md);  }
.w-lg  { width: var(--s-lg);  }
.w-xl  { width: var(--s-xl);  }
.w-2xl { width: var(--s-2xl); }

.w-25  { width: 25%; }
.w-50  { width: 50%; }
.w-var { width: min(100%,var(--w, auto)); }

.txt-center{ text-align: center; }
.txt-left  { text-align: left;   }
.txt-right { text-align: right;  }
.txt-capitl::first-letter{ text-transform: capitalize; }
.txt-capitl-whole{ text-transform: capitalize; }

.txt-xs   { font-size: var(--text-xs);   }
.txt-sm   { font-size: var(--text-sm);   }
.txt-base { font-size: var(--text-base); }
.txt-lg   { font-size: var(--text-lg);  line-height: 1.4; }
.txt-xl   { font-size: var(--text-xl);  line-height: 1.3; }
.txt-2xl  { font-size: var(--text-2xl); line-height: 1.2; font-weight: 700;}
.txt-3xl  { font-size: var(--text-3xl); line-height: 1.1; font-weight: 800;}

.txt-wrap {text-wrap: wrap;}

.fw-normal { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-bold   { font-weight: 700; }
.fw-black  { font-weight: 900; }

.ls-tight { letter-spacing: -0.02em; }
.ls-wide  { letter-spacing: 0.05em;  }

.txt-balance { text-wrap: balance; }
 
.txt-gradient {
    background: linear-gradient(to right, var(--primary), var(--tertiary));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
.txt-error{color: var(--error);}

.txt-undr{ text-decoration: underline; }

.bg-none     { background: none; }
.bg-surface  { background-color: var(--surface); }
.bg-primary  { background-color: var(--primary); color: var(--on-primary); }
.bg-primary-container  { background-color: var(--primary-container);}
.bg-surface-container { background-color: var(--surface-container);}

.asp-square { aspect-ratio: 1 / 1;  }
.asp-video  { aspect-ratio: 16 / 9; }
.obj-cover  { object-fit: cover;    }

.ovr-none{ overflow: hidden; }

.pe-none     { pointer-events: none; }
.pe-none > * { pointer-events: all;  }

.tr-right-100   { transform: translateX(100%); }
.transition-all { transition: all 0.3s ease;   }

.crs-text { cursor: text;}

#lang-menu {
    transform: translateX(120%);
    opacity: 0;
    pointer-events: none; 
}

#lang-menu.t{
    transition: transform 0.3s ease-in, opacity 0.2s ease-in;
}

#lang-menu.open {
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1), opacity 0.3s ease-out;
    pointer-events: all;
}

.icon {
    width: 1em; height: 1em;
}
.icon:not(.color){
    filter:         invert(100%);
    -webkit-filter: invert(100%);
}
.icon-container{
    min-height: 1.7em; min-width: 1.7em; 
    display: grid;
    place-items: center;
}

.separator { 
    align-items: center;
    text-align: center;
    display: flex;
}
.separator::before,
.separator::after {
    border-bottom: 1px solid var(--outline);
    content: "";
    flex: 1;
}
.separator::before { margin-right: var(--s-md); }
.separator::after  { margin-left:  var(--s-md); }

@keyframes pulse-dot {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
        background: var(--tertiary);
    }
    50% {
        transform: scale(1.2);
        opacity: 0.5;
        background: var(--primary);
    }
}
.auth-code-box {
    flex: 1;
    height: 100%;
    border: 2px solid var(--info);
    border-radius: 16px;
    display: grid;
    place-items: center;
    transition: border-color 0.2s ease, border-radius 0.2s ease;
}
.auth-code-box:empty{
    border-color:  var(--outline);
    border-radius: 6px;
}
.auth-code-box:empty::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--outline);
}
.auth-code-box.active{
    border-radius: 10px !important;
    transform: scale(1.1);
    border-color: var(--primary);
}
.auth-code-box.waiting::before{
    background: var(--tertiary);
    animation: pulse-dot 1.5s ease  infinite;
}
#code-input:focus + .code-boxes .box:nth-child(1) { border-color: var(--primary); }

@keyframes shake {
    0%, 100% { transform: translateX(0) scale(1.05); }
    25% { transform: translateX(-5px)   scale(1.05); }
    50% { transform: translateX(5px)    scale(1.05); }
    75% { transform: translateX(-5px)   scale(1.05); }
}

.shake-error {
    animation: shake 0.4s ease-in-out;
}