/* =========================================================
   LOVEBIRD PRO
   Premium UI 2026
   PART 2A
========================================================= */

:root{

    --primary:#2563EB;
    --primary-dark:#1D4ED8;

    --secondary:#7C3AED;

    --success:#10B981;

    --danger:#EF4444;

    --text:#111827;

    --text-light:#6B7280;

    --white:#FFFFFF;

    --bg:#F4F7FB;

    --glass:rgba(255,255,255,.60);

    --border:rgba(255,255,255,.45);

    --shadow:
    0 20px 40px rgba(0,0,0,.08);

    --radius:30px;

    --transition:.35s cubic-bezier(.4,0,.2,1);

}


/* ========================================================= */

*{

margin:0;
padding:0;
box-sizing:border-box;

-webkit-tap-highlight-color:transparent;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Plus Jakarta Sans',sans-serif;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

position:relative;

min-height:100vh;

}


/* =========================================================
BACKGROUND
========================================================= */

body::before{

content:"";

position:fixed;

top:-220px;
left:-180px;

width:420px;
height:420px;

background:#4F8FFF;

opacity:.12;

border-radius:50%;

filter:blur(90px);

z-index:-2;

}

body::after{

content:"";

position:fixed;

right:-220px;
bottom:-220px;

width:420px;
height:420px;

background:#8B5CF6;

opacity:.12;

border-radius:50%;

filter:blur(90px);

z-index:-2;

}


/* =========================================================
BLUR CIRCLE
========================================================= */

.blur{

position:fixed;

width:260px;
height:260px;

border-radius:50%;

filter:blur(90px);

pointer-events:none;

z-index:-1;

animation:floatBlur 12s infinite ease-in-out;

}

.blur1{

background:#60A5FA;

top:-60px;
right:-70px;

opacity:.18;

}

.blur2{

background:#8B5CF6;

bottom:-80px;
left:-80px;

opacity:.16;

animation-delay:3s;

}

@keyframes floatBlur{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(25px);

}

100%{

transform:translateY(0px);

}

}


/* =========================================================
APP
========================================================= */

#app{

max-width:430px;

margin:auto;

padding:28px 20px 120px;

position:relative;

}


/* =========================================================
SPLASH
========================================================= */

#splash{

position:fixed;

transition:.8s ease;

inset:0;

background:

linear-gradient(
135deg,
#2563EB,
#4F46E5
);

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:.8s;

}

.splash-content{

text-align:center;

color:white;

animation:splashScale .8s ease;

}

.logo{

width:92px;

height:92px;

object-fit:contain;

margin-bottom:24px;

}

.logo-icon{

width:90px;
height:90px;

border-radius:30px;

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

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

font-size:48px;

margin:auto auto 25px;

backdrop-filter:blur(20px);

}

.splash-content h1{

font-size:34px;

font-weight:800;

letter-spacing:-1px;

margin-bottom:10px;

}

.splash-content p{

opacity:.85;

font-size:15px;

}

.loader{

width:48px;

height:48px;

margin:40px auto 0;

border-radius:50%;

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

border-top:4px solid white;

animation:spin .9s linear infinite;

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}

@keyframes splashScale{

0%{

transform:scale(.7);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}


/* =========================================================
HEADER
========================================================= */

header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

#greeting{

display:block;

font-size:13px;

font-weight:600;

color:var(--text-light);

margin-bottom:8px;

}

header h2{

font-size:34px;

font-weight:800;

letter-spacing:-1px;

}



/* =========================================================
HERO
========================================================= */

.hero{

margin-bottom:35px;

padding:34px;

border-radius:34px;

background:

linear-gradient(
135deg,
#2563EB,
#4F46E5
);

color:white;

box-shadow:

0 30px 50px rgba(37,99,235,.28);

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:220px;
height:220px;

border-radius:50%;

background:

rgba(255,255,255,.12);

top:-70px;
right:-60px;

}

.hero::after{

content:"";

position:absolute;

width:140px;
height:140px;

background:

rgba(255,255,255,.08);

border-radius:50%;

bottom:-50px;
left:-40px;

}

.version{

display:inline-block;

padding:8px 18px;

border-radius:999px;

font-size:12px;

font-weight:700;

background:

rgba(255,255,255,.16);

backdrop-filter:blur(12px);

margin-bottom:22px;

}

.hero h1{

font-size:31px;

line-height:1.25;

font-weight:800;

letter-spacing:-1px;

margin-bottom:18px;

position:relative;

z-index:2;

}

.hero p{

font-size:15px;

line-height:1.8;

opacity:.92;

position:relative;

z-index:2;

}

/* =========================================================
SECTION TITLE
========================================================= */

.section-title{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:18px;

}

.section-title h3{

font-size:22px;

font-weight:800;

letter-spacing:-.5px;

}


/* =========================================================
DASHBOARD
========================================================= */

.dashboard{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin-bottom:40px;

}

.stat{

position:relative;

overflow:hidden;

padding:24px;

border-radius:28px;

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

backdrop-filter:blur(18px);

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

box-shadow:0 20px 45px rgba(0,0,0,.06);

transition:var(--transition);

cursor:pointer;

}

.stat::before{

content:"";

position:absolute;

width:130px;

height:130px;

border-radius:50%;

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

top:-50px;

right:-50px;

transition:.5s;

}

.stat:hover{

transform:translateY(-8px);

box-shadow:0 28px 50px rgba(0,0,0,.12);

}

.stat:hover::before{

transform:scale(1.4);

}

.stat span{

font-size:30px;

color:var(--primary);

display:inline-block;

margin-bottom:18px;

}

.stat h3{

font-size:32px;

font-weight:800;

margin-bottom:8px;

}

.stat small{

font-size:14px;

color:var(--text-light);

}


/* =========================================================
MODULE CARD
========================================================= */

.module-card{

position:relative;

display:flex;

align-items:center;

gap:20px;

padding:22px;

margin-bottom:18px;

border-radius:30px;

text-decoration:none;

color:inherit;

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

backdrop-filter:blur(18px);

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

box-shadow:0 18px 45px rgba(0,0,0,.06);

overflow:hidden;

transition:var(--transition);

}

.module-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:5px;

height:100%;

background:linear-gradient(
180deg,
#2563EB,
#7C3AED
);

transform:scaleY(0);

transition:.35s;

}

.module-card:hover{

transform:translateY(-8px);

box-shadow:0 30px 55px rgba(0,0,0,.12);

}

.module-card:hover::before{

transform:scaleY(1);

}

.module-icon{

width:74px;

height:74px;

border-radius:24px;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

flex-shrink:0;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.blue{

background:linear-gradient(
135deg,
#DBEAFE,
#BFDBFE
);

}

.purple{

background:linear-gradient(
135deg,
#EDE9FE,
#DDD6FE
);

}

.green{

background:linear-gradient(
135deg,
#DCFCE7,
#BBF7D0
);

}

.module-info{

flex:1;

}

.module-info h4{

font-size:21px;

font-weight:800;

margin-bottom:8px;

}

.module-info p{

font-size:14px;

line-height:1.7;

color:var(--text-light);

}

.module-card .material-symbols-rounded{

font-size:24px;

color:var(--primary);

transition:.3s;

}

.module-card:hover .material-symbols-rounded{

transform:translateX(6px);

}



/* =========================================================
FOOTER
========================================================= */

footer{

text-align:center;

margin-top:45px;

padding:25px;

font-size:13px;

line-height:1.8;

color:#8A94A6;

}


/* =========================================================
BOTTOM NAVIGATION
========================================================= */

.bottom-nav{

position:fixed;

left:50%;

bottom:18px;

transform:translateX(-50%);

width:min(390px,92%);

height:78px;

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

backdrop-filter:blur(22px);

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

border-radius:28px;

display:flex;

justify-content:space-around;

align-items:center;

box-shadow:0 18px 45px rgba(0,0,0,.12);

z-index:999;

}

.nav-item{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:4px;

flex:1;

height:100%;

text-decoration:none;

color:#8A94A6;

transition:var(--transition);

-webkit-tap-highlight-color:transparent;

}

.nav-item span{

font-size:26px;

transition:.3s;

}

.nav-item small{

font-size:11px;

font-weight:700;

}

.nav-item.active{

color:var(--primary);

}

.nav-item.active span{

transform:translateY(-3px) scale(1.1);

}

.nav-item::after{

content:"";

width:6px;

height:6px;

background:var(--primary);

border-radius:50%;

margin-top:2px;

opacity:0;

transition:.3s;

}

.nav-item.active::after{

opacity:1;

}


/* =========================================================
PRESS EFFECT
========================================================= */

.module-card:active,
.stat:active,
.future-item:active,
.profile-btn:active,
.nav-item:active{

transform:scale(.97);

}


/* =========================================================
PART 2C
PREMIUM EFFECT
========================================================= */


/* ============================================
FADE
============================================ */

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(30px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.hero{

animation:fadeUp .8s ease;

}

.dashboard{

animation:fadeUp 1s ease;

}

.module-card{

animation:fadeUp .8s ease;

}




/* ============================================
FLOAT HERO
============================================ */

.hero{

animation:
fadeUp .8s ease,
heroFloat 6s ease-in-out infinite;

}

@keyframes heroFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0px);

}

}


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

.module-card{

overflow:hidden;

}

.module-card::after{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transform:skewX(-20deg);

transition:1s;

}

.module-card:hover::after{

left:180%;

}


/* ============================================
RIPPLE EFFECT
============================================ */

.ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:ripple .7s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(5);

opacity:0;

}

}


/* ============================================
SCROLL REVEAL
============================================ */

.reveal{

opacity:0;

transform:translateY(40px);

transition:.7s;

}

.reveal.show{

opacity:1;

transform:none;

}


/* ============================================
BUTTON HOVER
============================================ */

.profile-btn:hover{

box-shadow:

0 20px 45px rgba(37,99,235,.25);

}

.nav-item:hover{

color:var(--primary);

}


/* ============================================
ICON ANIMATION
============================================ */

.module-icon{

transition:.35s;

}

.module-card:hover .module-icon{

transform:

rotate(-8deg)

scale(1.08);

}


/* ============================================
STAT ANIMATION
============================================ */

.stat h3{

transition:.3s;

}

.stat:hover h3{

color:var(--primary);

transform:scale(1.05);

}





/* ============================================
SCROLLBAR
============================================ */

::-webkit-scrollbar{

width:6px;

}

::-webkit-scrollbar-thumb{

background:#CBD5E1;

border-radius:999px;

}


/* ============================================
DARK MODE
============================================ */

@media (prefers-color-scheme:dark){

body{

background:#08111F;

color:#F8FAFC;

}

body::before{

opacity:.08;

}

body::after{

opacity:.08;

}

.module-card,

.stat,

.future-item,

.bottom-nav,

.profile-btn{

background:rgba(22,30,48,.72);

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

}

.module-info p,

footer,

small{

color:#A8B3C7;

}

.section-title h3,

header h2,

.stat h3{

color:white;

}

}


/* ============================================
RESPONSIVE
============================================ */

@media(max-width:430px){

#app{

padding:22px 16px 120px;

}

header h2{

font-size:28px;

}

.hero{

padding:28px;

border-radius:28px;

}

.hero h1{

font-size:26px;

}

.dashboard{

gap:14px;

}

.stat{

padding:20px;

}

.module-card{

padding:18px;

}

.module-icon{

width:64px;

height:64px;

font-size:28px;

}

.bottom-nav{

height:72px;

}

}




/*=========================================
  BREEDING ASSISTANT
=========================================*/

.assistant-card{

    margin-top:25px;

    padding:22px;

    border-radius:24px;

    background:rgba(255,255,255,.72);
	
	animation:fadeUp 1.2s ease;

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

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

    box-shadow:
        0 10px 35px rgba(0,0,0,.08);

}

.assistant-card h3{

    font-size:20px;

    font-weight:700;

    margin-bottom:18px;

    color:#1F2937;

}

.assistant-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px;

    border-radius:18px;

    background:#fff;

    transition:.25s;

    cursor:pointer;

    position:relative;

}

.assistant-item+.assistant-item{

    margin-top:12px;

}

.assistant-item:hover{

    transform:translateY(-2px);

    box-shadow:

        0 10px 25px rgba(0,0,0,.08);

}

.assistant-icon{

    width:56px;

    height:56px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    flex-shrink:0;

    background:linear-gradient(135deg,#FFE58A,#FFD54F);

}

.assistant-info{

    flex:1;

}

.assistant-info strong{

    display:block;

    font-size:16px;

    color:#111827;

    margin-bottom:4px;

}

.assistant-info p{

    font-size:14px;

    color:#6B7280;

    margin:0;

}

.assistant-day{

    min-width:72px;

    text-align:center;

    font-size:13px;

    font-weight:700;

    color:#2563EB;

    background:#EFF6FF;

    padding:10px 12px;

    border-radius:14px;

    line-height:1.3;

}
/* Progress */

.assistant-progress{

    width:100%;

    height:8px;

    margin-top:10px;

    border-radius:999px;

    overflow:hidden;

    background:#EDF2F7;

}

.assistant-progress-bar{

    height:100%;

    border-radius:999px;

    background:linear-gradient(90deg,#4F46E5,#3B82F6);

    position:relative;

    overflow:hidden;

}

.assistant-progress-bar::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.5),
        transparent
    );

    animation:assistantShine 2s infinite;

}

@keyframes assistantShine{

    from{

        transform:translateX(-100%);

    }

    to{

        transform:translateX(250%);

    }

}


/* ============================================
END
============================================ */