/* ==========================================================
   ICON BUTTON
========================================================== */

.icon-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    border:1px solid transparent;

    background:transparent;

    color:var(--text-secondary);

    cursor:pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.icon-button-rounded{
    border-radius:var(--radius-md);
}

/* ---------- Sizes ---------- */

.icon-button-sm{
    width:32px;
    height:32px;
}

.icon-button-md{
    width:40px;
    height:40px;
}

.icon-button-lg{
    width:48px;
    height:48px;
}

/* ---------- Variants ---------- */

.icon-button-primary{
    background:var(--primary);
    color:#fff;
}

.icon-button-primary:hover{
    background:#1d4ed8;
}

.icon-button-secondary{
    background:var(--surface-2);

    border-color:var(--glass-border);

    color:var(--text-primary);
}

.icon-button-secondary:hover{
    background:var(--surface-3);
}

.icon-button-ghost:hover{
    background:rgba(255,255,255,.06);

    color:var(--text-primary);
}

.icon-button-danger{
    color:var(--danger);
}

.icon-button-danger:hover{
    background:rgba(239,68,68,.12);
}

/* ---------- States ---------- */

.icon-button:disabled{
    opacity:.5;

    cursor:not-allowed;
}
.sidebar{
    width:280px;
    height:100vh;
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    position:relative;
    transform:none;
    background:rgba(15,23,42,.96);
    backdrop-filter:blur(20px);
    border-right:1px solid rgba(255,255,255,.06);
    transition:
        width .25s ease,
        transform .25s ease;
    z-index:1000;
    box-sizing:border-box;
}

.sidebar.collapsed{
    width:86px;
}

.sidebar-header{
    height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
    border-bottom:1px solid rgba(255,255,255,.06);
    flex-shrink:0;
}

.sidebar-logo{
    display:flex;
    align-items:center;
    gap:14px;
    overflow:hidden;
    min-width:0;
}

.logo-circle{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );
    color:#fff;
    font-size:18px;
    font-weight:700;
    flex-shrink:0;
}

.logo-text{
    display:flex;
    flex-direction:column;
    white-space:nowrap;
    min-width:0;
}

.logo-text strong{
    color:#fff;
    font-size:18px;
    font-weight:700;
}

.logo-text small{
    color:#94a3b8;
    font-size:11px;
    margin-top:2px;
}

.sidebar-toggle,
.sidebar-close{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:12px;
    cursor:pointer;
    background:#1e293b;
    color:#fff;
    transition:
        background .2s ease,
        color .2s ease;
    flex-shrink:0;
}

.sidebar-toggle:hover,
.sidebar-close:hover{
    background:#2563eb;
}

.sidebar-close{
    display:flex;
}

.sidebar-nav{
    flex:1;
    overflow-y:auto;
    padding:18px 10px;
}

.sidebar-nav::-webkit-scrollbar{
    width:6px;
}

.sidebar-nav::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.10);
    border-radius:999px;
}

.nav-item{
    display:flex;
    align-items:center;
    gap:16px;
    height:50px;
    padding:0 16px;
    margin-bottom:8px;
    border-radius:14px;
    color:#cbd5e1;
    text-decoration:none;
    transition:
        background .2s ease,
        color .2s ease;
    box-sizing:border-box;
}

.nav-item:hover{
    background:#1e3a8a;
    color:#fff;
}

.nav-item.active{
    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );
    color:#fff;
    box-shadow:
        0 10px 24px rgba(37,99,235,.35);
}

.sidebar.collapsed .nav-item{
    justify-content:center;
    padding:0;
}

.sidebar.collapsed .nav-item span{
    display:none;
}

.sidebar-status{
    margin:16px;
    padding:16px;
    border-radius:16px;
    background:#172554;
    border:1px solid rgba(255,255,255,.08);
    flex-shrink:0;
}

.sidebar-status strong{
    display:block;
    color:#fff;
}

.sidebar-status small{
    display:block;
    margin-top:6px;
    color:#94a3b8;
}

.status-bar{
    height:8px;
    margin-top:14px;
    border-radius:999px;
    overflow:hidden;
    background:#1e293b;
}

.status-fill{
    width:100%;
    height:100%;
    background:linear-gradient(
        90deg,
        #22c55e,
        #2563eb
    );
}

/*
 * Mobile state is controlled by AppShell.
 *
 * AppShell adds the "mobile" class when the
 * application is in mobile mode.
 */
.sidebar.mobile{
    position:fixed;
    left:0;
    top:0;
    width:280px;
    height:100vh;
    transform:translateX(-100%);
    box-sizing:border-box;
}

.sidebar.mobile.mobile-open{
    transform:translateX(0);
}

/*
 * Mobile always uses the full sidebar.
 * The collapsed desktop state must not affect it.
 */
.sidebar.mobile.collapsed{
    width:280px;
}

.sidebar.mobile .sidebar-toggle{
    display:none;
}

.sidebar.mobile .sidebar-close{
    display:flex;
}

.sidebar.mobile .nav-item{
    justify-content:flex-start;
    padding:0 16px;
}

.sidebar.mobile .nav-item span{
    display:block;
}

.sidebar.mobile .sidebar-status{
    display:block;
}

/* =========================================================
   RESPONSIVE MOBILE SHELL
   AppShell determines mobile-mode; this prevents the
   desktop sidebar from occupying layout space.
========================================================= */

@media (max-width:1024px){
    .sidebar:not(.mobile){
        display:none;
    }

    .sidebar.mobile{
        position:fixed;
        left:0;
        top:0;
        width:280px;
        max-width:85vw;
        height:100vh;
        transform:translateX(-100%);
        z-index:1000;
    }

    .sidebar.mobile.mobile-open{
        transform:translateX(0);
    }
}

/* =========================================================
   FINAL MOBILE DASHBOARD POLISH
   Prevent the closed mobile drawer from leaving a visible
   sliver at the left edge of the viewport.
========================================================= */
@media (max-width:1024px){
    .sidebar.mobile{
        left:-2px;
        visibility:hidden;
        pointer-events:none;
        transform:translate3d(-105%,0,0);
    }

    .sidebar.mobile.mobile-open{
        left:0;
        visibility:visible;
        pointer-events:auto;
        transform:translate3d(0,0,0);
    }
}
/* ==========================================================
   INPUT
========================================================== */

.input-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.input-full{
    width:100%;
}

.input-label{
    color:var(--text-secondary);

    font-size:13px;

    font-weight:600;
}

.input-wrapper{
    display:flex;
    align-items:center;
    gap:10px;

    min-height:44px;

    padding:0 14px;

    background:var(--surface-2);

    border:1px solid var(--glass-border);

    border-radius:var(--radius-md);

    transition:
        border-color .15s ease,
        background .15s ease;
}

.input-wrapper:focus-within{
    border-color:var(--primary);
}

.input-wrapper.error{
    border-color:var(--danger);
}

.input-wrapper.disabled{
    opacity:.6;
}

.input{
    flex:1;

    border:none;

    outline:none;

    background:transparent;

    color:var(--text-primary);

    font-size:14px;

    min-width:0;
}

.input::placeholder{
    color:var(--text-muted);
}

.input-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--text-muted);

    flex-shrink:0;
}

.input-hint{
    font-size:12px;

    color:var(--text-muted);
}

.input-error{
    font-size:12px;

    color:var(--danger);
}
.app-header{
    position:sticky;
    top:0;
    z-index:800;

    height:74px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 20px;

    background:rgba(15,23,42,.92);
    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.06);

    flex-shrink:0;
}

.header-left{
    display:flex;
    align-items:center;
    gap:16px;
    flex:1;
    min-width:0;
}

.header-right{
    display:flex;
    align-items:center;
    gap:14px;
    flex-shrink:0;
}

.header-logo{
    display:flex;
    flex-direction:column;
    flex-shrink:0;
}

.header-logo strong{
    color:#fff;
    font-size:18px;
    font-weight:800;
    line-height:1;
}

.header-logo small{
    margin-top:2px;
    color:#94a3b8;
    font-size:11px;
    line-height:1;
}

.desktop-collapse,
.mobile-menu,
.header-icon{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:12px;

    cursor:pointer;

    background:#172554;
    color:#fff;

    transition:.2s;
}

.desktop-collapse:hover,
.mobile-menu:hover,
.header-icon:hover{
    background:#2563eb;
}

.rotate{
    transform:rotate(180deg);
    transition:transform .25s;
}

.header-search{
    position:relative;

    width:360px;
    max-width:100%;

    flex:1;
}

.search-icon{
    position:absolute;

    left:14px;
    top:50%;

    transform:translateY(-50%);

    color:#94a3b8;

    pointer-events:none;
}

.search-input{
    width:100%;
    padding-left:44px !important;
}

.notification{
    position:relative;
}

.dot{
    position:absolute;

    top:8px;
    right:8px;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#ef4444;

    border:2px solid #111827;
}

.profile-button{
    display:flex;
    align-items:center;
    gap:12px;

    border:none;

    background:transparent;

    color:#fff;

    cursor:pointer;

    padding:0;
}

.avatar{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    font-weight:700;
}

.profile-info{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.profile-info strong{
    font-size:14px;
}

.profile-info small{
    color:#94a3b8;
    font-size:12px;
}

/* ===========================
   Tablet
=========================== */

@media (max-width:1200px){

    .header-search{
        width:240px;
    }

}

/* ===========================
   Mobile
=========================== */

@media (max-width:768px){

    .app-header{

        height:64px;

        padding:0 12px;
    }

    .desktop-collapse{
        display:none;
    }

    .mobile-menu{
        display:flex;
    }

    .header-search{
        display:none;
    }

    .profile-info{
        display:none;
    }

    .header-logo strong{
        font-size:16px;
    }

    .header-logo small{
        font-size:10px;
    }

}

/* ===========================
   Desktop
=========================== */

@media (min-width:769px){

    .mobile-menu{
        display:none;
    }

}

.notification-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notification-count {
    position: absolute;
    top: -9px;
    right: -11px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    border: 2px solid var(--bg-primary, #05070f);
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}
.mobileBottomNav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:68px;
    display:flex;
    justify-content:space-around;
    align-items:center;
    padding-bottom:env(safe-area-inset-bottom);
    box-sizing:border-box;
    background:rgba(13,22,42,.97);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 -6px 18px rgba(0,0,0,.25);
    z-index:1100;
}

.bottomItem{
    position:relative;
    flex:1;
    height:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:4px;
    text-decoration:none;
    color:#7c8db8;
    font-size:11px;
    font-weight:600;
    transition:.25s;
}

.bottomItem svg{
    flex-shrink:0;
    transition:.25s;
}

.bottomItem:hover{
    color:#fff;
}

.bottomItem.active{
    color:#4d8cff;
}

.bottomItem.active svg{
    transform:translateY(-2px);
}

.bottomItem.active::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:34px;
    height:3px;
    border-radius:18px 18px 0 0;
    background:#4d8cff;
}

@media (max-width:1024px){
    .mobileBottomNav{
        display:flex;
    }
}

@media (min-width:1025px){
    .mobileBottomNav{
        display:none;
    }
}

@media (max-width:480px){
    .mobileBottomNav{
        height:68px;
    }

    .bottomItem{
        font-size:10px;
    }

    .bottomItem svg{
        width:20px;
        height:20px;
    }
}
.app-shell{
    display:flex;
    width:100%;
    min-height:100vh;
    background:
        radial-gradient(circle at top,#122041 0%,#08111f 35%,#050b16 100%);
    color:#fff;
    overflow:hidden;
}

.app-shell-main{
    display:flex;
    flex-direction:column;
    flex:1;
    min-width:0;
    min-height:100vh;
    overflow:hidden;
    background:#08111f;
}

.app-shell-content{
    flex:1;
    min-width:0;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    padding:18px;
    -webkit-overflow-scrolling:touch;
}

.app-shell-content.trading-content{
    padding:0;
}

.app-shell-container{
    width:100%;
    max-width:none;
    margin:0;
    min-width:0;
}

.app-shell-container.full-width{
    width:100%;
    max-width:none;
    margin:0;
}

.app-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
    z-index:900;
}

.app-shell-content::-webkit-scrollbar{
    width:6px;
}

.app-shell-content::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.18);
    border-radius:999px;
}

/* ================= Desktop ================= */

@media (min-width:769px){
    .app-shell{
        overflow:hidden;
    }

    .app-shell-main{
        overflow:hidden;
    }
}

/* ================= Tablet ================= */

@media (max-width:1200px){
    .app-shell-content{
        padding:14px;
    }
}

/* ================= Mobile ================= */

@media (max-width:1024px){
    html,
    body,
    #root{
        width:100%;
        min-width:0;
        max-width:100%;
        min-height:100%;
        overflow-x:hidden;
    }

    .app-shell{
        display:block;
        width:100%;
        min-width:0;
        max-width:100%;
        min-height:100vh;
        overflow-x:hidden;
    }

    .app-shell-main{
        width:100%;
        min-width:0;
        max-width:100%;
        min-height:100vh;
        overflow:hidden;
    }

    .app-shell-content{
        width:100%;
        min-width:0;
        max-width:100%;
        padding:0;
        padding-bottom:calc(92px + env(safe-area-inset-bottom));
        scroll-padding-bottom:calc(92px + env(safe-area-inset-bottom));
        overflow-x:hidden;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    .app-shell-content.trading-content{
        padding:0;
        padding-bottom:92px;
    }

    .app-shell-container{
        width:100%;
        min-width:0;
        max-width:100%;
        overflow-x:hidden;
    }

    .app-shell-container.full-width{
        width:100%;
        min-width:0;
        max-width:100%;
    }
}

@media (max-width:480px){
    .app-shell-content{
        padding:0;
        padding-bottom:92px;
    }

    .app-shell-content.trading-content{
        padding:0;
        padding-bottom:92px;
    }
}


/* PYTHON MOBILE DASHBOARD FIX */

@media (max-width: 1024px) {
    html,
    body,
    #root {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .app-shell {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 100vh;
        overflow-x: hidden;
    }

    .app-shell-main {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 100vh;
        overflow: hidden;
    }

    .app-shell-content {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
        scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom));
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    .app-shell-container,
    .app-shell-container.full-width {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .app-shell-content.trading-content {
        overflow-x: hidden;
    }
}

@media (max-width: 480px) {
    .app-shell-content {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* END PYTHON MOBILE DASHBOARD FIX */
.auth-banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
  width: 100%;
}

.banner-top {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.banner-top h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.banner-top h2 .highlight {
  background: linear-gradient(90deg, #60a5fa, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.banner-subtitle {
  max-width: 560px;
  margin: 0;
  color: #94a3b8;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 500;
}

.banner-features {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.banner-feature {
  display: flex;
  align-items: center;
  gap: 14px;
}

.feature-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.10);
  border: 1px solid rgba(96, 165, 250, 0.17);
  color: #60a5fa;
}

.feature-content {
  min-width: 0;
}

.feature-content h4 {
  margin: 0 0 3px;
  color: #f8fafc;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 650;
}

.feature-content p {
  margin: 0;
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.45;
}

.banner-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0 0;
}

.glow-container {
  position: relative;
  width: 190px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glow-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(37, 99, 235, 0.30),
      rgba(37, 99, 235, 0.08) 40%,
      transparent 72%
    );
  filter: blur(10px);
  animation: pulse 5s ease-in-out infinite;
}

.glow-middle {
  position: absolute;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  border: 1px solid rgba(96, 165, 250, 0.18);
  background: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.14),
    transparent 70%
  );
  box-shadow: 0 0 50px rgba(37, 99, 235, 0.08);
}

.glow-core {
  position: relative;
  z-index: 5;
  width: 82px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 23px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 0 40px rgba(37, 99, 235, 0.50),
    0 12px 35px rgba(0, 0, 0, 0.30);
}

.glow-core span {
  color: #facc15;
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
}

.coin {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #cbd5e1;
  font-size: 16px;
  font-weight: 700;
  background: rgba(15, 30, 50, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  animation: float 4s ease-in-out infinite;
}

.coin-btc {
  top: 8px;
  left: 20px;
}

.coin-eth {
  top: 20px;
  right: 8px;
  animation-delay: 0.5s;
}

.coin-sol {
  bottom: 26px;
  left: 2px;
  animation-delay: 1s;
}

.coin-ada {
  bottom: 8px;
  right: 20px;
  animation-delay: 0.3s;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.75;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glow-outer,
  .coin {
    animation: none;
  }
}
.auth-layout {
  position: relative;
  display: flex;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(37, 99, 235, 0.10), transparent 32%),
    #020617;
  color: #f0f6fc;
}

.auth-layout-banner {
  position: relative;
  flex: 1 1 52%;
  min-width: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 64px clamp(40px, 6vw, 100px);
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 48%, rgba(37, 99, 235, 0.13), transparent 34%),
    linear-gradient(145deg, #07101f 0%, #030712 58%, #020617 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  box-sizing: border-box;
}

.auth-layout-banner::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.045);
  filter: blur(70px);
  pointer-events: none;
}

.auth-layout-banner > * {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
}

.auth-layout-content {
  flex: 1 1 48%;
  min-width: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px clamp(24px, 5vw, 80px);
  box-sizing: border-box;
  background:
    radial-gradient(circle at 80% 15%, rgba(37, 99, 235, 0.07), transparent 28%),
    #020617;
}

.auth-layout-main {
  width: 100%;
  max-width: 470px;
  margin: 0 auto;
}

@media (max-width: 1100px) {
  .auth-layout-banner {
    display: none;
  }

  .auth-layout-content {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .auth-layout-content {
    min-height: 100vh;
    padding: 24px 16px;
    align-items: center;
  }

  .auth-layout-main {
    max-width: 100%;
  }
}
.auth-card {
  width: 100%;
  box-sizing: border-box;
  padding: 34px 34px 30px;
  background:
    linear-gradient(
      145deg,
      rgba(22, 32, 51, 0.88),
      rgba(15, 23, 42, 0.82)
    );
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 22px;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.42),
    0 0 60px rgba(37, 99, 235, 0.055);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.auth-card-header {
  text-align: center;
  margin-bottom: 28px;
}

.auth-card-title {
  margin: 0 0 8px;
  color: #fff;
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 700;
}

.auth-card-subtitle {
  margin: 0;
  color: #94a3b8;
  font-size: 0.9rem;
  line-height: 1.5;
}

.auth-card-body {
  width: 100%;
}

@media (max-width: 640px) {
  .auth-card {
    padding: 24px 18px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.password-field{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.password-field label{
    color:#94a3b8;
    font-size:13px;
    font-weight:600;
}

.password-wrapper{
    position:relative;
}

.password-wrapper input{
    width:100%;
    height:54px;

    padding-left:48px;
    padding-right:52px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.04);

    color:white;

    font-size:15px;

    transition:.25s;
}

.password-wrapper input:focus{
    outline:none;

    border-color:#2563eb;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.18);
}

.password-icon{
    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    color:#64748b;
}

.password-toggle{
    position:absolute;

    right:12px;

    top:50%;

    transform:translateY(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    border:none;

    border-radius:10px;

    background:transparent;

    color:#94a3b8;

    cursor:pointer;

    transition:.2s;
}

.password-toggle:hover{
    background:rgba(37,99,235,.12);

    color:white;
}

.password-field small{
    color:#ef4444;

    font-size:12px;
}
.remember-me{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-top:6px;
}

.remember-checkbox{
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    user-select:none;
}

.remember-checkbox input{
    display:none;
}

.remember-checkmark{
    position:relative;
    width:20px;
    height:20px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,.12);
    background:#111827;
    transition:.25s;
}

.remember-checkbox input:checked
+ .remember-checkmark{
    background:#2563eb;
    border-color:#2563eb;
}

.remember-checkbox input:checked
+ .remember-checkmark::after{
    content:"";
    position:absolute;
    left:6px;
    top:2px;
    width:5px;
    height:10px;
    border:solid white;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.remember-text{
    color:#cbd5e1;
    font-size:14px;
    font-weight:500;
}

.forgot-password{
    color:#60a5fa;
    font-size:14px;
    text-decoration:none;
    transition:.25s;
}

.forgot-password:hover{
    color:white;
    text-decoration:underline;
}

@media(max-width:640px){

    .remember-me{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }

}
.social-login{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.social-divider{
    position:relative;
    text-align:center;
}

.social-divider::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:1px;
    background:rgba(255,255,255,.08);
}

.social-divider span{
    position:relative;
    display:inline-block;
    padding:0 18px;
    background:#111827;
    color:#94A3B8;
    font-size:13px;
}

.social-buttons{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.social-btn{
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    border:none;
    border-radius:16px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:white;

    cursor:pointer;

    transition:.25s;
}

.social-btn:hover{

    transform:translateY(-2px);

    border-color:#2563eb;

    background:rgba(37,99,235,.12);

}

.social-btn svg{

    color:#60A5FA;

}

.social-btn span{

    font-size:14px;

    font-weight:600;

}

@media(max-width:768px){

    .social-buttons{

        grid-template-columns:1fr;

    }

}

.google-icon {
    flex-shrink: 0;
    display: block;
}
.auth-footer{

    display:flex;
    flex-direction:column;

    gap:20px;

    margin-top:32px;

    text-align:center;

}

.auth-footer p{

    margin:0;

    color:#94A3B8;

    font-size:14px;

}

.auth-footer p a{

    margin-left:8px;

    color:#60A5FA;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.auth-footer p a:hover{

    color:white;

}

.auth-footer-links{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    color:#64748B;

    font-size:13px;

}

.auth-footer-links a{

    color:#94A3B8;

    text-decoration:none;

    transition:.25s;

}

.auth-footer-links a:hover{

    color:#60A5FA;

}

.auth-copyright{

    color:#64748B;

    font-size:12px;

    border-top:1px solid rgba(255,255,255,.06);

    padding-top:18px;

}

@media(max-width:768px){

    .auth-footer-links{

        gap:8px;

        font-size:12px;

    }

}
/* ==========================================================
   SHARED MODAL
========================================================== */
.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 24px;
    z-index: 4000 !important;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-sizing: border-box;
    overflow: hidden;
}

.modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-height: 90vh;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    animation: modal-show 0.18s ease;
    box-sizing: border-box;
    transform: none;
}

/* ==========================================================
   SIZES
========================================================== */
.modal-sm {
    max-width: 480px;
}

.modal-md {
    max-width: 640px;
}

.modal-lg {
    max-width: 900px;
}

.modal-xl {
    max-width: 1200px;
}

.modal-full {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
}

/* ==========================================================
   HEADER
========================================================== */
.modal-header {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-sizing: border-box;
    overflow: hidden;
}

.modal-title {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.modal-subtitle {
    margin: 8px 0 0;
    min-width: 0;
    max-width: 100%;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ==========================================================
   BODY
========================================================== */
.modal-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 24px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-padding-bottom: 24px;
}

/* ==========================================================
   FOOTER
========================================================== */
.modal-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    min-height: 0;
    gap: 12px;
    padding: 20px 24px;
    background: #0f172a;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

/* ==========================================================
   MOBILE (768px and lower)
========================================================== */
@media (max-width: 768px) {
    .modal-overlay {
        position: fixed !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100vw !important;
        height: 100dvh !important;
        padding: 16px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .modal {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        max-height: 88dvh !important;
        border-radius: 20px !important;
        overflow: hidden !important;
    }

    .modal-header {
        flex: 0 0 auto !important;
        padding: 18px 18px 14px !important;
    }

    .modal-title {
        font-size: 18px !important;
        line-height: 1.25;
    }

    .modal-subtitle {
        margin-top: 5px !important;
        font-size: 13px !important;
    }

    .modal-body {
        flex: 1 1 auto !important;
        width: 100% !important;
        padding: 18px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        box-sizing: border-box !important;
    }

    .modal-footer {
        flex: 0 0 auto !important;
        min-height: 56px;
        padding: 12px 18px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .modal-full {
        height: 100% !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }
}

/* ==========================================================
   SMALL PHONES
========================================================== */
@media (max-width: 480px) {
    .modal-header {
        padding: 16px 14px 12px !important;
    }
    .modal-title {
        font-size: 17px !important;
    }
    .modal-body {
        padding: 14px !important;
    }
}

/* ==========================================================
   ANIMATION & HEADER WRAPPER
========================================================== */
@keyframes modal-show {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.modal-header-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.modal-header-text {
    flex: 1 1 auto;
    min-width: 0;
}

.modal-header-content > .icon-button {
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .modal-header-content {
        gap: 10px;
    }
    .modal-header-content > .icon-button {
        width: 32px;
        height: 32px;
    }
}
.login-form {
  width: 100%;
}

.login-title {
  margin: 0;
  color: #fff;
  text-align: center;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -0.025em;
}

.login-subtitle {
  margin: 9px 0 28px;
  color: #94a3b8;
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.login-field > label,
.two-factor-field > label {
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
}

.login-field .input-wrapper {
  position: relative;
  width: 100%;
}

.login-field .input-wrapper .field-icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: #64748b;
  pointer-events: none;
}

.login-field .input-wrapper input {
  display: block;
  width: 100%;
  height: 52px;
  box-sizing: border-box;
  padding: 0 16px 0 46px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 13px;
  outline: none;
  background: rgba(255, 255, 255, 0.045);
  color: #f8fafc;
  font-size: 14px;
  line-height: 1;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.login-field .input-wrapper input::placeholder {
  color: #64748b;
}

.login-field .input-wrapper input:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.login-field .input-wrapper input:focus {
  border-color: rgba(59, 130, 246, 0.75);
  background: rgba(59, 130, 246, 0.045);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.login-options {
  margin: 2px 0 20px;
}

.login-error {
  margin: 0 0 16px;
  padding: 11px 13px;
  border: 1px solid rgba(239, 68, 68, 0.20);
  border-radius: 11px;
  background: rgba(239, 68, 68, 0.07);
  color: #fca5a5;
  font-size: 13px;
  line-height: 1.45;
}

.login-button {
  margin-top: 2px;
}

.two-factor-form {
  width: 100%;
}

.two-factor-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.10);
  border: 1px solid rgba(96, 165, 250, 0.18);
}

.two-factor-copy {
  text-align: center;
  margin-bottom: 24px;
}

.two-factor-heading {
  margin: 0 0 8px;
  color: #f8fafc;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}

.two-factor-subtext {
  margin: 0 auto;
  max-width: 470px;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.55;
}

.two-factor-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.two-factor-field .input-wrapper {
  position: relative;
}

.two-factor-field .field-icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: #64748b;
  pointer-events: none;
}

.two-factor-code-input {
  display: block;
  width: 100%;
  height: 52px;
  box-sizing: border-box;
  padding: 0 16px 0 46px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 13px;
  outline: none;
  background: rgba(255, 255, 255, 0.045);
  color: #f8fafc;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0.18em;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.two-factor-code-input::placeholder {
  color: #64748b;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
}

.two-factor-code-input:focus {
  border-color: rgba(59, 130, 246, 0.75);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

@media (max-width: 640px) {
  .login-title {
    font-size: 25px;
  }

  .login-subtitle {
    margin-bottom: 24px;
  }
}
.password-strength{
    display:flex;
    flex-direction:column;
    gap:12px;

    margin-top:8px;
}

.strength-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.strength-header span{
    color:#94A3B8;
    font-size:13px;
}

.strength-header strong{
    font-size:13px;
    font-weight:700;
}

.weak{
    color:#EF4444;
}

.medium{
    color:#F59E0B;
}

.strong{
    color:#22C55E;
}

.strength-bar{
    width:100%;
    height:8px;

    border-radius:999px;

    background:#1E293B;

    overflow:hidden;
}

.strength-fill{
    height:100%;
    transition:.35s;
    border-radius:999px;
}

.strength-fill.weak{
    background:#EF4444;
}

.strength-fill.medium{
    background:#F59E0B;
}

.strength-fill.strong{
    background:#22C55E;
}

.strength-rules{
    list-style:none;

    margin:0;
    padding:0;

    display:flex;
    flex-direction:column;
    gap:8px;
}

.strength-rules li{
    color:#64748B;
    font-size:13px;
    transition:.25s;
}

.strength-rules li.valid{
    color:#22C55E;
}

.strength-rules li::before{
    content:"• ";
}
.terms-checkbox{
    margin-top:8px;
}

.terms-label{
    display:flex;
    align-items:flex-start;
    gap:12px;
    cursor:pointer;
}

.terms-label input{
    display:none;
}

.terms-checkmark{
    position:relative;
    flex-shrink:0;

    width:20px;
    height:20px;

    margin-top:2px;

    border-radius:6px;

    background:#111827;

    border:1px solid rgba(255,255,255,.12);

    transition:.25s;
}

.terms-label input:checked
+ .terms-checkmark{
    background:#2563eb;
    border-color:#2563eb;
}

.terms-label input:checked
+ .terms-checkmark::after{
    content:"";

    position:absolute;

    left:6px;
    top:2px;

    width:5px;
    height:10px;

    border:solid white;
    border-width:0 2px 2px 0;

    transform:rotate(45deg);
}

.terms-text{
    color:#CBD5E1;

    font-size:14px;

    line-height:1.7;
}

.terms-text a{
    color:#60A5FA;

    text-decoration:none;

    font-weight:600;

    transition:.25s;
}

.terms-text a:hover{
    color:white;
    text-decoration:underline;
}
.register-form{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.register-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.register-field{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.register-field label{
    color:#94A3B8;
    font-size:13px;
    font-weight:600;
}

.input-wrapper{
    position:relative;
}

.field-icon{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:#64748B;
}

.input-wrapper input{
    width:100%;
    height:54px;
    padding-left:48px;
    padding-right:16px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    color:#fff;
    font-size:15px;
}

.input-wrapper input:focus{
    outline:none;
    border-color:#2563EB;
    box-shadow:0 0 0 3px rgba(37,99,235,.18);
}

.register-button{
    height:56px;
    border:none;
    border-radius:16px;
    cursor:pointer;
    color:white;
    font-size:15px;
    font-weight:700;
    background:linear-gradient(135deg,#2563EB,#06B6D4);
    transition:.25s;
}

.register-button:hover:not(:disabled){
    transform:translateY(-2px);
    box-shadow:0 15px 35px rgba(37,99,235,.35);
}

.register-button:disabled{
    opacity:.6;
    cursor:not-allowed;
}

.register-error{
    padding:14px;
    border-radius:14px;
    background:rgba(239,68,68,.12);
    border:1px solid rgba(239,68,68,.22);
    color:#FCA5A5;
    font-size:14px;
}

@media(max-width:768px){

    .register-grid{
        grid-template-columns:1fr;
    }

}
/* Global styles moved to index.css */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-400: oklch(70.4% .191 22.216);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-green-400: oklch(79.2% .209 151.711);
    --color-emerald-400: oklch(76.5% .177 163.223);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-blue-300: oklch(80.9% .105 251.813);
    --color-blue-400: oklch(70.7% .165 254.624);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-indigo-200: oklch(87% .065 274.039);
    --color-indigo-400: oklch(67.3% .182 276.935);
    --color-indigo-500: oklch(58.5% .233 277.117);
    --color-indigo-600: oklch(51.1% .262 276.966);
    --color-rose-400: oklch(71.2% .194 13.428);
    --color-rose-500: oklch(64.5% .246 16.439);
    --color-slate-100: oklch(96.8% .007 247.896);
    --color-slate-200: oklch(92.9% .013 255.508);
    --color-slate-300: oklch(86.9% .022 252.894);
    --color-slate-400: oklch(70.4% .04 256.788);
    --color-slate-600: oklch(44.6% .043 257.281);
    --color-slate-800: oklch(27.9% .041 260.031);
    --color-slate-900: oklch(20.8% .042 265.755);
    --color-slate-950: oklch(12.9% .042 264.695);
    --color-white: #fff;
    --spacing: .25rem;
    --container-md: 28rem;
    --container-xl: 36rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --blur-md: 12px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }

  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .relative {
    position: relative;
  }

  .top-1\/2 {
    top: 50%;
  }

  .right-3 {
    right: calc(var(--spacing) * 3);
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .mx-auto {
    margin-inline: auto;
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: var(--spacing);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

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

  .table {
    display: table;
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

  .w-full {
    width: 100%;
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .flex-shrink {
    flex-shrink: 1;
  }

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

  .border-collapse {
    border-collapse: collapse;
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .resize {
    resize: both;
  }

  .appearance-none {
    appearance: none;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .flex-col {
    flex-direction: column;
  }

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

  .items-center {
    align-items: center;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
    margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-x-2\.5 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-x-reverse)));
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-blue-500\/20 {
    border-color: #3080ff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-blue-500\/20 {
      border-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
    }
  }

  .border-emerald-500\/20 {
    border-color: #00bb7f33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-500\/20 {
      border-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }
  }

  .border-indigo-500 {
    border-color: var(--color-indigo-500);
  }

  .border-rose-500\/20 {
    border-color: #ff235733;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-rose-500\/20 {
      border-color: color-mix(in oklab, var(--color-rose-500) 20%, transparent);
    }
  }

  .border-slate-600 {
    border-color: var(--color-slate-600);
  }

  .border-slate-800 {
    border-color: var(--color-slate-800);
  }

  .border-slate-800\/60 {
    border-color: #1d293d99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-slate-800\/60 {
      border-color: color-mix(in oklab, var(--color-slate-800) 60%, transparent);
    }
  }

  .border-slate-800\/80 {
    border-color: #1d293dcc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-slate-800\/80 {
      border-color: color-mix(in oklab, var(--color-slate-800) 80%, transparent);
    }
  }

  .bg-blue-500\/10 {
    background-color: #3080ff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-500\/10 {
      background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
    }
  }

  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }

  .bg-emerald-500\/10 {
    background-color: #00bb7f1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-500\/10 {
      background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
    }
  }

  .bg-indigo-600\/30 {
    background-color: #4f39f64d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-indigo-600\/30 {
      background-color: color-mix(in oklab, var(--color-indigo-600) 30%, transparent);
    }
  }

  .bg-rose-500\/10 {
    background-color: #ff23571a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-rose-500\/10 {
      background-color: color-mix(in oklab, var(--color-rose-500) 10%, transparent);
    }
  }

  .bg-slate-800 {
    background-color: var(--color-slate-800);
  }

  .bg-slate-800\/40 {
    background-color: #1d293d66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-800\/40 {
      background-color: color-mix(in oklab, var(--color-slate-800) 40%, transparent);
    }
  }

  .bg-slate-800\/60 {
    background-color: #1d293d99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-800\/60 {
      background-color: color-mix(in oklab, var(--color-slate-800) 60%, transparent);
    }
  }

  .bg-slate-900 {
    background-color: var(--color-slate-900);
  }

  .bg-slate-900\/90 {
    background-color: #0f172be6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-900\/90 {
      background-color: color-mix(in oklab, var(--color-slate-900) 90%, transparent);
    }
  }

  .bg-slate-950 {
    background-color: var(--color-slate-950);
  }

  .bg-slate-950\/80 {
    background-color: #020618cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-950\/80 {
      background-color: color-mix(in oklab, var(--color-slate-950) 80%, transparent);
    }
  }

  .object-contain {
    object-fit: contain;
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .py-1 {
    padding-block: var(--spacing);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .pt-1 {
    padding-top: var(--spacing);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pb-36 {
    padding-bottom: calc(var(--spacing) * 36);
  }

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

  .font-mono {
    font-family: var(--font-mono);
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }

  .break-all {
    word-break: break-all;
  }

  .text-amber-400 {
    color: var(--color-amber-400);
  }

  .text-amber-400\/90 {
    color: #fcbb00e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-400\/90 {
      color: color-mix(in oklab, var(--color-amber-400) 90%, transparent);
    }
  }

  .text-blue-300 {
    color: var(--color-blue-300);
  }

  .text-blue-400 {
    color: var(--color-blue-400);
  }

  .text-emerald-400 {
    color: var(--color-emerald-400);
  }

  .text-green-400 {
    color: var(--color-green-400);
  }

  .text-indigo-200 {
    color: var(--color-indigo-200);
  }

  .text-indigo-400 {
    color: var(--color-indigo-400);
  }

  .text-red-400 {
    color: var(--color-red-400);
  }

  .text-rose-400 {
    color: var(--color-rose-400);
  }

  .text-slate-100 {
    color: var(--color-slate-100);
  }

  .text-slate-200 {
    color: var(--color-slate-200);
  }

  .text-slate-300 {
    color: var(--color-slate-300);
  }

  .text-slate-400 {
    color: var(--color-slate-400);
  }

  .text-white {
    color: var(--color-white);
  }

  .uppercase {
    text-transform: uppercase;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  @media (hover: hover) {
    .hover\:border-blue-500:hover {
      border-color: var(--color-blue-500);
    }

    .hover\:bg-blue-500:hover {
      background-color: var(--color-blue-500);
    }

    .hover\:bg-slate-900\/40:hover {
      background-color: #0f172b66;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-slate-900\/40:hover {
        background-color: color-mix(in oklab, var(--color-slate-900) 40%, transparent);
      }
    }

    .hover\:text-slate-200:hover {
      color: var(--color-slate-200);
    }
  }

  .focus\:border-indigo-500:focus {
    border-color: var(--color-indigo-500);
  }

  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-indigo-500\/50:focus {
    --tw-ring-color: #625fff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-indigo-500\/50:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-indigo-500) 50%, transparent);
    }
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (min-width: 48rem) {
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:p-7 {
      padding: calc(var(--spacing) * 7);
    }

    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }
  }
}

*, :before, :after {
  box-sizing: border-box;
}

html, body, #root {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  color: #fff;
  background: #081028;
  font-family: Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}
*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body,
#root{
    width:100%;
    min-height:100%;
    margin:0;
    padding:0;
}

html{
    -webkit-text-size-adjust:100%;
}

body{
    background:#08111f;
    color:#fff;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

#root{
    width:100%;
    max-width:none;
    min-height:100vh;
    margin:0;
    padding:0;
    border:none;
    text-align:left;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea{
    font:inherit;
}

img{
    max-width:100%;
    display:block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p{
    margin:0;
}

/* ==========================================================
   TRADING DEVICE LAYOUT
========================================================== */

.desktop-trading-only {
    display: block;
}

.mobile-trading-only {
    display: none;
}

@media (max-width: 768px) {
    .desktop-trading-only {
        display: none;
    }

    .mobile-trading-only {
        display: block;
        width: 100%;
    }
}
/* Global 2FA overlay fix */
div[class*="two-factor"], div[class*="2fa"], div[class*="TwoFactor"] {
  display: flex !important;
  flex-direction: column !important;
}
div[class*="two-factor"] h4, div[class*="two-factor"] p, div[class*="two-factor"] label, div[class*="two-factor"] input {
  display: block !important;
  width: 100% !important;
}
/* ==========================================================
   KIARA DESIGN TOKENS
========================================================== */

:root{

/* ==========================================================
   SURFACES
========================================================== */

--surface-0:#020617;
--surface-1:#0f172a;
--surface-2:#162033;
--surface-3:#1e293b;

/* ==========================================================
   GLASS
========================================================== */

--glass-bg:rgba(15,23,42,.72);
--glass-bg-light:rgba(30,41,59,.60);

--glass-border:rgba(255,255,255,.06);
--glass-border-strong:rgba(255,255,255,.12);

--glass-blur:22px;

--glass-shadow:
0 12px 32px rgba(0,0,0,.30);

/* ==========================================================
   RADIUS
========================================================== */

--radius-xs:6px;
--radius-sm:8px;
--radius-md:12px;
--radius-lg:16px;
--radius-xl:20px;
--radius-2xl:24px;
--radius-pill:999px;

/* ==========================================================
   COLORS
========================================================== */

--primary:#2563eb;
--primary-light:#60a5fa;

--success:#22c55e;
--warning:#f59e0b;
--danger:#ef4444;

--text-primary:#ffffff;
--text-secondary:#cbd5e1;
--text-muted:#94a3b8;

--divider:rgba(255,255,255,.06);

/* ==========================================================
   SPACING
========================================================== */

--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-7:32px;

/* ==========================================================
   Z INDEX
========================================================== */

--z-dropdown:1000;
--z-popover:1100;
--z-modal:3000;
--z-drawer:4000;
--z-toast:5000;

}