@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
 /* --font-main: system-ui, -apple-system, Roboto, Arial, sans-serif; */  /*  THIS IS FOR SYSTEM FONTS */
  --font-main: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --body-bg: #fff ;
  --text: #000 ;
  --header: #fff ;
  --border:#eee;
  --backbtnBg: #EEE9FF;
  --backbtnclr: #000 ;

  --brand: #9b8cff ;
  --icon-bg: #EEE9FF;
}
@media (prefers-color-scheme: dark) {
:root{
   --body-bg: #16181d ;
   --text: #fff ;
   --header: #22252b ;
   --border:#2f3440;
   --backbtnBg: #171a20 ;
   --backbtnclr: #fff ;
  }
}
/********************************/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box ;
  user-select: none ;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-main);
  color: var(--text);
  animation: pageOpen 0.4s ease-out;
  background: var(--body-bg) ;
}
@keyframes pageOpen {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
input:focus,
button:focus,
textarea:focus,
select:focus {
  outline: none !important;
  box-shadow: none !important;
}
/*******************************************/
header {
  padding:10px 16px;
  background:var(--header);
  border-bottom:1px solid var(--border);
  position: sticky; top: 0;
  display:flex;
  align-items:center;
  gap:10px;
  height: 58px ;
  max-height: 58px ;
  animation: none !important;
}
.back-btn{
  width:38px;
  height:38px;
  background: var(--backbtnBg);
  color: var(--backbtnclr);
  border: 2px solid #9b8cff ;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
/******************************************/
button, a {
  touch-action: manipulation;
}