/*COLOR VARIABLES*/
:root{
    --gold:        #f5c518;
    --amber:       #ff8c00;
    --brown:       #5c3d11;
    --cream:       #fffdf3;
    --text:        #2e1f00;
    --text-soft:   #b08040;
    --border:      #f0e0a0;
    --white:       #ffffff; 
}

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

body{
    font-family: 'Quicksand', sans-serif;
    background: var(--cream);
    color: var(--text);
    min-height: 100vh;
}

/*LOADINF SCREEN*/
#loading-screen{
    position: fixed;
    inset: 0;
    background: linear-gradient(160deg, #fff8dc, #ffe066, #ffd6a5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    z-index: 9999;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    justify-content: center;
}


#loading-screen.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/*SPINNING SUNFLOWER*/
.spinner{
    font-size: 5rem;
    animation: spin 1.8s linear infinite;

}

@keyframes spin {
    to {transform: rotate(360deg); }
}

/*APP NAME */
.app-name{
    font-family: 'Baloo 2', cursive;
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--brown);
}

/*MOTTO*/
.app-motto {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-soft);
    letter-spacing: 0.03em;
}

/*LOADING BAR*/
.bar-wrap{
    width: 180px;
    height: 6px;
    background: rgba(255,255,255,0.5);
    border-radius: 99px;
    overflow: hidden;
    margin-top: 8px;
}

.bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold), var(--amber));
    animation: loadBar 2.2s ease-in-out forwards;
}

@keyframes loadBar{
    0% {width: 0%;}
    60% {width: 75%;}
    100%{width: 100%;}
}


/*APP SHELL*/
#app{display: flex;min-height: 100vh;}
#app.hidden {display: none;}


/*SIDEBAR*/
.sidebar{
    width: 84px;
    background: var(--brown);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0;
    position: fixed;
    left: 0;top: 0; bottom: 0;
    z-index: 100;
    box-shadow: 3px 0 12px rgba(92,61,17,0.15); 
}

.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 24px;
}

.brand-icon{ font-size: 1.8rem;}

.brand-name{
    font-family: 'Baloo 2', cursive;
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.nav-links{
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 0;
    cursor: pointer;
    position: relative;
    transition: background 0.2s ease;
}

.nav-item::before{
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--gold);
    border-radius: 0 3px 3px 0;
    transform: scaleY(0);
    transition: transform 0.2s ease;
}


.nav-item.active::before,
.nav-item:hover::before{transform: scaleY(1);}

.nav-item.active,
.nav-item:hover{background: rgba(245,197,24,0.1);}

.nav-icon{ font-size: 1.2rem;}

.nav-label{
    font-size: 0.55rem;
    font-weight: 700;
    color: #ffd6a5;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nav-item.active .nav-label,
.nav-item:hover .nav-label{ color: var(--gold);}

.sidebar-motto{
    margin-top: auto;
    font-size: 0.48rem;
    font-weight: 700;
    color: var(--gold);
    opacity: 0.45;
    text-align: center;
    line-height: 1.6;
    padding: 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/*MAIN CONTENT*/
.main-content{
    margin-left: 84px;
    flex: 1;
    padding: 36px 36px;
}

.section{display: none;}
.section.active{display:block;}

.section-header{ margin-bottom: 24px; }

.section-title {
    font-family: 'Baloo 2', cursive;
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--brown);
}

.section-sub{
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-soft);
    margin-top: 3px;
}



/*FEED*/
.feed-list{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.feed-card{
    background: var(--white);
    border: 1.5px solid var(--amber);
    border-radius: 16px;
    padding: 16px;
}


.feed-top{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.feed-avatar{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff4c2;
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;

}

.feed-meta {flex: 1;}

.feed-name{
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
}


.feed-time{
    font-size: 0.72rem;
    color: var(--text-soft);
    font-weight: 600;
}

.feed-badge{
    font-size: 0.65rem;
    font-weight: 700;
    background: #fff4c2;
    border: 1.5px solid var(--gold);
    color: var(--brown);
    padding: 3PX 10px;
    border-radius: 99px;
    white-space: nowrap;
}

.feed-text {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  background: #FFFBEF;
  border-left: 4px solid var(--gold);
  padding: 8px 12px;
  border-radius: 0 10px 10px 0;
  margin-bottom: 10px;
}
 
.feed-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
 
.like-btn {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 99px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-soft);
  cursor: pointer;
  font-family: 'Quicksand', sans-serif;
  transition: all 0.2s ease;
}
 
.like-btn:hover,
.like-btn.liked {
  background: #FFF4C2;
  border-color: var(--gold);
  color: var(--amber);
}
 
.comment-input {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 99px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  background: #FFFBEF;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s ease;
}
 
.comment-input:focus {
  border-color: var(--gold);
  background: var(--white);
}
 
.send-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  transition: transform 0.2s ease;
}
 
.send-btn:hover { transform: scale(1.2); }
 
.feed-comments {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
 
.comment-item {
  font-size: 0.78rem;
  font-weight: 600;
  color: #7A5C1E;
  background: #FFFBEF;
  padding: 5px 10px;
  border-radius: 10px;
}
 
.comment-item strong { color: var(--text); }
 

/*Habits*/
.habit-add-row{
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
}

.habit-input{
    flex: 1;
    min-width: 180px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.88rem;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    color: var(--text);
    background: #FFFBEF;
    outline: none;
    transition: border-color 0.2s ease;
}

.habit-input:focus{
    border-color: var(--gold);
    background: var(--white);
}

.habit-select{
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.85rem;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    color: var(--text);
    background: #FFFBEF;
    outline: none;
    cursor: pointer;
}

.btn-add{
    background: linear-gradient(135deg, var(--gold), var(--amber));
    color: var(--brown);
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-family: 'Quicksand', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(230,168,0,0.25);
}

.btn-add:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(230,168,0,0.35);
}

.btn-add:active{ transform: translateY(0); }

/*Habits-list*/
.habits-list{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/*individual habit card*/
.habit-card{
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: box-shadow 0.2s ease;
}

.habit-card:hover{
    box-shadow: 0 4px 14px rgba(180,120,0,0.1);
}

.habit-card.completed{
    border-color: #6baa3a;
    background: linear-gradient(135deg,#f6fff0,#edffd9);
}


/*checkbox*/
.habit-check{
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border: 2px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    background: #fffbef;
    transition: all 0.2s ease;
}

.habit-check:hover{
    border-color: #6baa3a;
    background: #f0fff0;
}

.habit-card.completed .habit-check{
    background: #6baa3a;
    border-color: #6baa3a;
    color: var(--white);
}

.habit-info{ flex: 1; } 

.habit-name{
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
}

.habit-card.completed .habit-name{
    text-decoration: line-through;
    color: var(--text-soft);
}

.habit-cat{
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-soft);
    margin-top: 2px;
}


/*Delete button*/
.habit-delete{
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    padding:4px 8px;
    border-radius: 8px;
    color: var(--text-soft);
    transition: all 0.2s ease;
}

.habit-delete:hover{
    background: #fff0f0;
    color: #e05050;
}

/*Empty state*/
.habits-empty{
    text-align: center;
    padding: 48px 20px;
    color: var(--text-soft);
    font-size: 0.95rem;
    font-weight: 600;
}

.habits-empty span{
    font-size: 3rem;
    display: block;
    margin-bottom: 10px;
}

.habits-empty.hidden { display: none; }

/*Progress Section*/
.sunflower-card{
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    align-items: center;
    gap: 48px;
}

/*Sunflower*/
.sf-wrap{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sf-flower{
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sf-petal{
    position: absolute;
    width: 24px;
    height: 40px;
    background: #f0e0a0;
    border-radius: 50%;
    transition: background 0.4s ease;
}

.sf-petal.active{
    background: var(--gold);
}

.sf-center {
    font-size: 2.8rem;
    z-index: 2;
    position: relative;
}


/*Info side*/
.sf-info{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sf-count{
    font-family: 'Baloo 2', cursive;
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--brown);
}

.sf-msg{
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-soft);
    line-height: 1.5;
}

.sf-bar-wrap{
    width: 100%;
    height: 8px;
    background: var(--border);
    border-radius: 99px;
    overflow: hidden;
    margin-top: 4px;
}

.sf-bar{
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold), var(--amber));
    border-radius: 99px;
    transition: width 0.6s ease;
}

.sf-percent{
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-soft);
}

/*Profile*/
.profile-card{
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}

/*current animal*/
.profile-animal-wrap{
    text-align: center;
}

.profile-animal{
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 10px;
    animation: float 3s ease-in-out infinite;
}


@keyframes float{
    0%, 100% {transform: translateY(0);}
    50%      {transform: translateY(-8px);}
}


.profile-level-name{
    font-family: 'Baloo 2', cursive;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--brown);
}

.profile-sub{
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-soft);
    margin: 4px;
}

/*level track*/
.level-track{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.level-step{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0.35;
    transition: opacity 0.3s;
}

.level-step.active{
    opacity: 1;
}

.level-step.done{
    opacity: 0.7;
}

.level-circle{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff4c2;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    transition: all 0.3s ease;
}

.level-step.active .level-circle{
    border: 3px solid var(--gold);
    box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.2);
    background: #fff4c2;
}

.level-step.done .level-circle{
    border-color: #6baa3a;
    background: #f0fff0;
}

.level-label{
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
}

.level-desc{
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-soft);
}

.level-arrow{
    font-size: 1.2rem;
    color: var(--border);
    margin-bottom: 24px;
}

/*Toast notification*/
.toast{
    position: fixed;
    bottom: 28px;
    right: 28px;
    background: var(--brown);
    color: var(--gold);
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 12px 22px;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(92,61,17,0.25);
    z-index: 99999;
    animation: toastIn 0.3s ease;
}

@keyframes toastIn{
    from{opacity: 0; transform: translateY(10px);}
    to{opacity: 1; transform: translateY(0);}
}