:root{
    --brand:#0b9790;
    --brand-dark:#073b66;
    --ink:#142033;
    --muted:#748093;
    --surface:#ffffff;
    --page:#f5f7fa;
    --line:#e8edf2;
    --shadow:0 12px 32px rgba(17,34,68,.08);
    --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--page)}
body{
    margin:0;
    min-height:100vh;
    font-family:tahoma,Arial,sans-serif;
    color:var(--ink);
    -webkit-tap-highlight-color:transparent;
}
a{color:inherit}

.splash-page{
    overflow:hidden;
    background:
        radial-gradient(circle at 80% 18%,rgba(103,232,221,.42),transparent 25%),
        radial-gradient(circle at 12% 82%,rgba(15,151,194,.33),transparent 25%),
        linear-gradient(150deg,#f9ffff 0%,#dffafa 35%,#0a9eb0 70%,#063e63 100%);
}

.splash-screen{
    position:relative;
    min-height:100vh;
    min-height:100dvh;
    display:grid;
    place-items:center;
    overflow:hidden;
    isolation:isolate;
}

.splash-logo{
    position:relative;
    z-index:4;
    width:min(58vw,290px);
    height:auto;
    filter:drop-shadow(0 22px 26px rgba(2,50,84,.22));
    animation:logoFloat 3.2s ease-in-out infinite;
}

.splash-orb{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.22);
    box-shadow:inset 0 0 40px rgba(255,255,255,.24);
    backdrop-filter:blur(3px);
    animation:orbMove 8s ease-in-out infinite alternate;
}

.orb-one{width:180px;height:180px;right:-70px;top:12%}
.orb-two{width:110px;height:110px;left:7%;bottom:17%;animation-delay:-2s}
.orb-three{width:48px;height:48px;right:21%;bottom:10%;animation-delay:-4s}

.splash-wave{
    position:absolute;
    width:140%;
    height:220px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:50%;
    transform:rotate(-7deg);
    animation:waveMove 7s ease-in-out infinite alternate;
}
.wave-one{bottom:-130px;right:-20%}
.wave-two{bottom:-165px;right:-10%;animation-delay:-2.5s}

@keyframes logoFloat{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-15px) scale(1.025)}
}
@keyframes orbMove{
    from{transform:translate3d(-8px,-6px,0)}
    to{transform:translate3d(18px,20px,0)}
}
@keyframes waveMove{
    from{transform:rotate(-7deg) translateX(-2%)}
    to{transform:rotate(-4deg) translateX(4%)}
}

.app-page{
    background:var(--page);
    padding-bottom:calc(92px + var(--safe-bottom));
}

.app-shell{
    width:min(100%,680px);
    margin:0 auto;
    padding:16px 14px 32px;
}

.topbar{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
    padding:2px 2px 16px;
}

.topbar-profile{
    text-decoration:none;
}

.profile-avatar{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    box-shadow:var(--shadow);
    font-size:19px;
}

.topbar-copy{
    min-width:0;
}

.topbar-copy span{
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-bottom:4px;
}

.topbar-copy strong{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:17px;
}

.topbar-logo{
    width:48px;
    height:48px;
    object-fit:contain;
}

.promo-slider{
    position:relative;
    overflow:hidden;
    margin-bottom:25px;
    border-radius:26px;
    box-shadow:0 18px 42px rgba(10,61,102,.15);
    touch-action:pan-y;
}

.promo-track{
    display:flex;
    direction:ltr;
    transition:transform .55s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
}

.promo-slide{
    direction:rtl;
    position:relative;
    flex:0 0 100%;
    min-height:190px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    overflow:hidden;
    padding:25px 24px 42px;
    color:#fff;
    text-decoration:none;
}

.promo-slide::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 85% 20%,rgba(255,255,255,.20),transparent 28%),
        linear-gradient(120deg,rgba(255,255,255,.06),transparent);
}

.promo-slide-guide{background:linear-gradient(135deg,#073b66,#0b9790)}
.promo-slide-store{background:linear-gradient(135deg,#273b86,#5856d6)}
.promo-slide-report{background:linear-gradient(135deg,#075b57,#20a56c)}

.promo-content{
    position:relative;
    z-index:2;
    max-width:72%;
}

.promo-label{
    display:inline-flex;
    padding:5px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.15);
    font-size:11px;
}

.promo-slide h2{
    margin:12px 0 7px;
    font-size:22px;
}

.promo-slide p{
    margin:0;
    color:rgba(255,255,255,.80);
    font-size:12px;
    line-height:1.9;
}

.promo-action{
    display:block;
    margin-top:14px;
    font-size:12px;
    font-weight:bold;
}

.promo-art{
    position:relative;
    z-index:2;
    width:76px;
    height:76px;
    display:grid;
    place-items:center;
    border-radius:24px;
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.16);
    font-size:38px;
    font-weight:bold;
    backdrop-filter:blur(8px);
}

.promo-dots{
    position:absolute;
    z-index:5;
    right:0;
    left:0;
    bottom:13px;
    display:flex;
    justify-content:center;
    gap:6px;
    direction:ltr;
}

.promo-dots button{
    width:6px;
    height:6px;
    padding:0;
    border:0;
    border-radius:999px;
    background:rgba(255,255,255,.45);
    transition:.25s;
}

.promo-dots button.active{
    width:22px;
    background:#fff;
}

.services-section{
    margin-top:2px;
}

.section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 4px 13px;
}

.section-head h1{
    margin:0;
    font-size:18px;
}

.section-head span{
    color:var(--muted);
    font-size:11px;
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:11px;
}

.service-card{
    position:relative;
    min-height:130px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:15px 8px;
    text-decoration:none;
    border-radius:21px;
    background:var(--surface);
    border:1px solid var(--line);
    box-shadow:0 8px 22px rgba(17,34,68,.055);
    transition:transform .18s ease,box-shadow .18s ease;
}

.service-card:active{
    transform:scale(.97);
}

.service-icon{
    width:47px;
    height:47px;
    display:grid;
    place-items:center;
    margin-bottom:5px;
    border-radius:17px;
    background:linear-gradient(145deg,#e9fbf9,#edf4ff);
    color:var(--brand-dark);
}

.service-icon svg{
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.service-card strong{
    font-size:13px;
}

.service-card small{
    color:var(--muted);
    font-size:10px;
}

.service-badge{
    position:absolute;
    top:9px;
    left:9px;
    min-width:22px;
    height:22px;
    display:grid;
    place-items:center;
    padding:0 6px;
    border-radius:999px;
    background:#e43e58;
    color:#fff;
    font-size:10px;
    font-weight:bold;
}

.bottom-nav{
    position:fixed;
    z-index:30;
    right:50%;
    bottom:max(10px,var(--safe-bottom));
    transform:translateX(50%);
    width:min(calc(100% - 20px),660px);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:8px 6px;
    border-radius:23px;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(225,231,238,.92);
    box-shadow:0 16px 42px rgba(17,34,68,.14);
    backdrop-filter:blur(18px);
}

.bottom-nav-item{
    min-height:49px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    border-radius:16px;
    color:#8a94a4;
    text-decoration:none;
    font-size:10px;
}

.bottom-nav-item svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.bottom-nav-item.active{
    color:var(--brand);
    background:#ecfbf9;
    font-weight:bold;
}

@media(max-width:380px){
    .service-grid{gap:8px}
    .service-card{min-height:122px}
    .promo-slide{min-height:178px;padding-right:18px;padding-left:18px}
    .promo-art{width:62px;height:62px;font-size:31px}
    .promo-content{max-width:74%}
}

@media(min-width:620px){
    .app-shell{padding-right:18px;padding-left:18px}
    .promo-slide{min-height:215px}
    .service-card{min-height:145px}
}


/* PWA install experience */
.pwa-install-sheet[hidden],
.pwa-install-guide[hidden]{
    display:none !important;
}

.pwa-install-sheet{
    position:fixed;
    z-index:100;
    right:50%;
    bottom:max(14px,env(safe-area-inset-bottom,0px));
    transform:translateX(50%);
    width:min(calc(100% - 24px),620px);
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
    padding:15px 15px 15px 12px;
    border-radius:24px;
    background:rgba(255,255,255,.97);
    border:1px solid rgba(226,232,240,.95);
    box-shadow:0 22px 60px rgba(15,23,42,.22);
    backdrop-filter:blur(18px);
    animation:installSheetIn .42s cubic-bezier(.22,.61,.36,1) both;
}

.auth-install-sheet{
    bottom:max(14px,env(safe-area-inset-bottom,0px));
}

.pwa-install-logo{
    width:52px;
    height:52px;
    object-fit:contain;
}

.pwa-install-copy{
    min-width:0;
}

.pwa-install-copy strong{
    display:block;
    margin-bottom:5px;
    font-size:14px;
    color:#142033;
}

.pwa-install-copy span{
    display:block;
    color:#748093;
    font-size:11px;
    line-height:1.8;
}

.pwa-install-button{
    min-height:42px;
    padding:0 16px;
    border:0;
    border-radius:14px;
    background:linear-gradient(135deg,#073b66,#0b9790);
    color:#fff;
    font-family:inherit;
    font-size:12px;
    font-weight:bold;
    cursor:pointer;
    white-space:nowrap;
}

.pwa-install-close{
    position:absolute;
    top:7px;
    left:8px;
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:#f1f5f9;
    color:#64748b;
    font-size:18px;
    cursor:pointer;
}

.pwa-install-guide{
    position:fixed;
    z-index:120;
    inset:0;
    display:grid;
    place-items:end center;
    padding:20px 14px max(20px,env(safe-area-inset-bottom,0px));
    background:rgba(15,23,42,.46);
    backdrop-filter:blur(5px);
}

.pwa-install-guide-card{
    position:relative;
    width:min(100%,520px);
    padding:26px 22px;
    border-radius:27px;
    background:#fff;
    box-shadow:0 28px 80px rgba(15,23,42,.28);
    animation:installGuideIn .35s ease both;
}

.pwa-install-guide-card h2{
    margin:0 0 13px;
    font-size:19px;
}

.pwa-install-guide-card p{
    margin:0;
    color:#475569;
    font-size:13px;
    line-height:2.2;
}

.pwa-install-guide-close{
    position:absolute;
    top:10px;
    left:10px;
    width:30px;
    height:30px;
    border:0;
    border-radius:50%;
    background:#f1f5f9;
    color:#64748b;
    font-size:19px;
    cursor:pointer;
}

@keyframes installSheetIn{
    from{
        opacity:0;
        transform:translate(50%,28px) scale(.97);
    }
    to{
        opacity:1;
        transform:translate(50%,0) scale(1);
    }
}

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

@media(max-width:430px){
    .pwa-install-sheet{
        grid-template-columns:auto 1fr;
        padding:14px;
    }

    .pwa-install-button{
        grid-column:1 / -1;
        width:100%;
    }
}