*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --primary:#a62419;
    --secondary:#c94f3d;
    --light:#fffaf7;
    --border:#ead8d2;
    --text:#4b2d28;
}




body{
    font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background:linear-gradient(
        135deg,
        #a62419,
        #c94f3d
    );
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:1rem;
    
}

/* //on top menu zzz */
.app-header{
    box-shadow:none;
}

.app-header ion-toolbar{

    --background:linear-gradient(
        135deg,
        #8b2e24,
        #b84a3c
    );

    /* // --min-height:72px; */
    padding:6px 12px;
}

.header-container{

    display:flex;
    align-items:center;

    width:100%;
    height:100%;
}

/* Back */

.back-btn{

    width:42px;
    height:42px;

    border:none;

    border-radius:12px;

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

    color:#fff;

    font-size:18px;

    cursor:pointer;

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

    flex-shrink:0;
}

/* Logo */

.logo-area{

    flex:1;

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

.app-logo{

    height:38px;
    width:auto;

    object-fit:contain;
}

/* Avatar */

.avatar-area{

    width:42px;
    height:42px;

    flex-shrink:0;
}

.avatar{

    width:100%;
    height:100%;

    border-radius:50%;

    object-fit:cover;

    border:2px solid rgba(255,255,255,.4);
}

/* Mobile */

@media(max-width:576px){

    .app-header ion-toolbar{
        /* // --min-height:66px; */
    }

    .app-logo{
        height:32px;
    }

    .avatar-area{
        width:38px;
        height:38px;
    }

}

/* loading box */

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}