.page{

    flex:1;

    min-height:100vh;

    overflow-y:auto;

    padding:28px 20px 120px;

    display:none;

    flex-direction:column;
}

.page.active{
  display:flex;
}

.card{

  background:
    rgba(30, 30, 30, 0.5);

  backdrop-filter:blur(24px);

  border-radius:28px;

  padding:14px;

  margin-top:24px;

  border:

   1px solid
   rgba(255,255,255,.06);

  box-shadow:

   0 8px 32px
   rgba(0,0,0,.28);

   position:relative;
}

button{

  border:none;

  background:#29272789;

  color:white;

  transition:0.15s;
}

button:active{
  transform:scale(0.93);
}

.tabbar{

  position:fixed;

  left:50%;
  bottom:18px;

  transform:translateX(-50%);

  width:92%;

  max-width:430px;

  height:78px;

  background:
    rgba(255,255,255,0.12);

  backdrop-filter:blur(20px);

  border-radius:28px;

  display:flex;

  justify-content:space-around;
  align-items:center;
}

/* =========================
   TABBAR ICONS
========================= */

.tab{

  width:58px;
  height:58px;

  border-radius:18px;

  overflow:visible;

  padding:0;

  background:transparent;

  position:relative;
}

.tab.active{

  background:
    rgba(255,255,255,0.14);

  box-shadow:
    0 0 24px
    rgba(255,255,255,0.22);

  pointer-events:none;
}

.tab img{

  overflow:hidden;

  width:100%;
  height:100%;

  object-fit:cover;

  border-radius:18px;

  display:block;
}

.actions{

  display:flex;

  gap:12px;

  margin-top:24px;
}

.actions button{

  flex:1;

  height:52px;

  border-radius:16px;

  font-size:16px;
}

.save{

  background:#ff453a;
}

h2{

  margin-bottom:18px;
}

/* =========================
   TITLES
========================= */

.page-title{

  font-size:36px;
  font-weight:800;

  margin-bottom:22px;

  text-align: center;
  width: 100%;
}