/*
======================================================================
 EcoDrop Kiosk OS V2
 ---------------------------------------------------------------------
 File        : /kiosk/ui/kiosk.css
 Module      : Kiosk Shell
 Version     : 2.0.0
======================================================================
*/

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

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    touch-action:manipulation;

    overscroll-behavior:none;

    background:var(--eco-surface);

}

body{

    margin:0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-family:var(--eco-font-body);

    color:var(--eco-text-primary);

}

/* ==========================================================
   ROOT
========================================================== */

#app{

    position:relative;

    width:100%;

    height:100%;

    overflow:hidden;

    isolation:isolate;

}

/* ==========================================================
   SCREEN
========================================================== */

.eco-screen{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .35s ease,
        transform .35s ease;

    transform:translateY(20px);

}

.eco-screen.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateY(0);

}

/* ==========================================================
   LAYOUT
========================================================== */

.eco-page{

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    padding:32px;

    box-sizing:border-box;

}

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

.eco-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:32px;

}

.eco-logo{

    height:52px;

    width:auto;

}

.eco-status{

    display:flex;

    align-items:center;

    gap:10px;

}

.eco-status-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--eco-success);

    box-shadow:0 0 12px var(--eco-success);

}

/* ==========================================================
   CONTENT
========================================================== */

.eco-content{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

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

.eco-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

/* ==========================================================
   BUTTON GROUP
========================================================== */

.eco-actions{

    display:flex;

    gap:16px;

    align-items:center;

    justify-content:center;

}

/* ==========================================================
   QR FRAME
========================================================== */

.eco-qr-frame{

    position:relative;

    width:300px;

    height:300px;

    border-radius:32px;

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

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

    overflow:hidden;

}

.eco-qr-frame__line{

    position:absolute;

    left:0;

    width:100%;

    height:3px;

    background:var(--eco-primary);

    animation:ecoScanner 2.2s linear infinite;

}

@keyframes ecoScanner{

    0%{

        top:0;

    }

    50%{

        top:calc(100% - 3px);

    }

    100%{

        top:0;

    }

}

/* ==========================================================
   SUCCESS
========================================================== */

.eco-success-icon{

    width:120px;

    height:120px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:64px;

    background:var(--eco-success);

    color:#fff;

    margin-bottom:32px;

}

/* ==========================================================
   WEIGHT
========================================================== */

.eco-weight-value{

    font-size:72px;

    font-weight:700;

    line-height:1;

    margin:20px 0;

}

/* ==========================================================
   BOOT
========================================================== */

.eco-loader{

    width:56px;

    height:56px;

    border-radius:50%;

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

    border-top-color:var(--eco-primary);

    animation:ecoSpin .8s linear infinite;

}

@keyframes ecoSpin{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   IDLE
========================================================== */

.eco-idle-clock{

    font-size:72px;

    font-weight:700;

    letter-spacing:2px;

}

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

@media (max-width:1340px){

    .eco-page{

        padding:24px;

    }

    .eco-qr-frame{

        width:260px;

        height:260px;

    }

}

@media (max-width:900px){

    .eco-page{

        padding:20px;

    }

    .eco-weight-value{

        font-size:56px;

    }

}

/* ==========================================================
   TABLET
   Samsung Galaxy Tab A7 Lite
========================================================== */

@media (max-width:800px){

    html{

        font-size:15px;

    }

    .eco-actions{

        flex-direction:column;

        width:100%;

    }

    .eco-button{

        width:100%;

    }

}
/* ==========================================================
   V2 KERNEL STABILITY PATCH
========================================================== */
:root{
    --eco-surface:var(--eco-surface-app,#07110C);
    --eco-surface-elevated:var(--eco-surface-card,rgba(18,28,23,.88));
    --eco-border:rgba(255,255,255,.12);
    --eco-primary:var(--eco-brand,#22C55E);
    --eco-text-primary:var(--eco-text,#F8FAFC);
    --eco-text-secondary:var(--eco-text-muted,#B8C7BE);
    --eco-font-body:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --eco-warning:#F59E0B;
    --eco-danger:#EF4444;
    --eco-radius-md:16px;
    --eco-radius-lg:24px;
    --eco-radius-xl:32px;
    --eco-shadow-sm:0 8px 24px rgba(0,0,0,.18);
    --eco-shadow-md:0 18px 48px rgba(0,0,0,.24);
    --eco-shadow-lg:0 32px 80px rgba(0,0,0,.34);
    --eco-glass-bg:rgba(255,255,255,.08);
    --eco-glass-blur:18px;
    --eco-glass-border:rgba(255,255,255,.14);
}

.eco-app{
    min-height:100vh;
    background:
        radial-gradient(circle at 20% 10%,rgba(34,197,94,.22),transparent 34%),
        radial-gradient(circle at 82% 28%,rgba(56,189,248,.14),transparent 30%),
        linear-gradient(135deg,#07110C 0%,#0C1712 52%,#101827 100%);
}

.eco-screen{padding:34px;box-sizing:border-box;color:var(--eco-text-primary);}
.eco-boot,.eco-intro,.eco-home,.eco-scan,.eco-weight,.eco-success,.eco-idle,.eco-staff,.eco-diagnostics,.eco-settings{
    width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px;
}
.eco-home__top,.eco-scan__header,.eco-weight__header,.eco-staff__header,.eco-diagnostics__header,.eco-settings__header{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;position:absolute;top:28px;left:0;padding:0 34px;box-sizing:border-box;
}
.eco-brand{display:flex;align-items:center;gap:14px;text-align:left;}
.eco-brand__logo,.eco-boot__logo img,.eco-intro__logo,.eco-idle__logo img{height:54px;width:auto;max-width:220px;}
.eco-brand__text{display:flex;flex-direction:column;gap:2px;}
.eco-brand__title{font-size:22px;font-weight:800;letter-spacing:-.03em;}
.eco-brand__subtitle,.eco-home__status-text,.eco-intro__eyebrow{font-size:13px;color:var(--eco-text-secondary);text-transform:uppercase;letter-spacing:.12em;font-weight:700;}
.eco-home__title,.eco-intro__title,.eco-scan__title,.eco-weight__title,.eco-success__title,.eco-idle__title,.eco-staff__title,.eco-diagnostics__title,.eco-settings__title{
    margin:0;font-size:clamp(42px,7vw,86px);line-height:.95;font-weight:850;letter-spacing:-.06em;
}
.eco-home__description,.eco-intro__description,.eco-scan__subtitle,.eco-weight__subtitle,.eco-success__subtitle,.eco-idle__subtitle,.eco-staff__subtitle,.eco-diagnostics__subtitle,.eco-settings__subtitle{
    max-width:680px;margin:0 auto;color:var(--eco-text-secondary);font-size:clamp(18px,2.4vw,28px);line-height:1.35;
}
.eco-button{border:0;border-radius:999px;padding:16px 28px;font-weight:800;font-size:18px;cursor:pointer;min-height:56px;box-shadow:var(--eco-shadow-sm);}
.eco-button--xl{min-height:72px;padding:20px 44px;font-size:24px;}
.eco-button--primary{background:#22C55E;color:#041109;}
.eco-button--secondary{background:rgba(255,255,255,.12);color:#fff;}
.eco-button--ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.14);}
.eco-button--warning{background:#F59E0B;color:#1f1300;}
.eco-button--danger{background:#EF4444;color:#fff;}
.eco-home__footer,.eco-scan__footer,.eco-diagnostics__footer,.eco-settings__footer{position:absolute;bottom:28px;display:flex;gap:12px;}
.eco-card{border-radius:28px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(18px);padding:22px;box-shadow:var(--eco-shadow-md);}
.eco-loader{width:54px;height:54px;border-radius:999px;border:5px solid rgba(255,255,255,.14);border-top-color:#22C55E;animation:ecoSpin .8s linear infinite;}
.eco-boot__title{font-size:42px;font-weight:850;letter-spacing:-.05em;}
.eco-boot__version,.eco-boot__status{color:var(--eco-text-secondary);font-weight:700;}
.eco-intro__progress{width:min(520px,70vw);height:5px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;}
.eco-intro__progress span{display:block;width:100%;height:100%;background:#22C55E;transform-origin:left;animation:ecoIntroProgress 5s linear forwards;}
@keyframes ecoIntroProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.eco-status--online,.eco-status.eco-status--online{color:#22C55E;}
.eco-status--offline{color:#EF4444;}
.eco-success__icon{width:118px;height:118px;border-radius:999px;background:#22C55E;color:#041109;display:flex;align-items:center;justify-content:center;font-size:76px;font-weight:900;}
.eco-success__reward{font-size:48px;font-weight:850;color:#22C55E;}
.eco-success__reward small{font-size:20px;color:var(--eco-text-secondary);display:block;}
.eco-qr-frame{width:min(310px,58vw);height:min(310px,58vw);}
.eco-weight__icon{font-size:72px;}
.eco-weight__value{font-size:72px;font-weight:850;}
.eco-diagnostics__table{width:min(720px,90vw);border-collapse:collapse;text-align:left;font-size:18px;}
.eco-diagnostics__table td{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.1);}
@media (max-width:800px){.eco-screen{padding:22px}.eco-home__top,.eco-scan__header,.eco-weight__header,.eco-staff__header,.eco-diagnostics__header,.eco-settings__header{top:18px;padding:0 22px}.eco-home__footer,.eco-scan__footer,.eco-diagnostics__footer,.eco-settings__footer{bottom:18px}.eco-brand__logo{height:42px}.eco-home__title,.eco-intro__title{font-size:48px}.eco-button--xl{min-height:64px;font-size:20px}}
/* ==========================================================
   HOME SCREEN V2 EXPERIENCE
========================================================== */

.eco-home{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    padding:28px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    isolation:isolate;
}

.eco-home__ambient{
    position:absolute;
    inset:-20%;
    z-index:-3;
    background:
        radial-gradient(circle at 18% 18%,rgba(34,197,94,.28),transparent 30%),
        radial-gradient(circle at 82% 24%,rgba(56,189,248,.18),transparent 28%),
        radial-gradient(circle at 50% 90%,rgba(132,204,22,.18),transparent 34%);
    filter:blur(20px);
    animation:ecoAmbientMove 12s ease-in-out infinite alternate;
}

.eco-home__noise{
    position:absolute;
    inset:0;
    z-index:-2;
    opacity:.08;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent);
}

.eco-home__header{
    width:100%;
    min-height:78px;
    padding:16px 20px;
    border-radius:28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-sizing:border-box;
    z-index:2;
}

.eco-home__brand{
    display:flex;
    align-items:center;
    gap:14px;
}

.eco-home__logo{
    height:52px;
    width:auto;
}

.eco-home__name{
    font-size:24px;
    font-weight:850;
    letter-spacing:-.04em;
}

.eco-home__version{
    margin-top:2px;
    color:var(--eco-text-secondary);
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.eco-home__device{
    display:flex;
    align-items:center;
    gap:14px;
}

.eco-home__status{
    height:38px;
    padding:0 14px;
    border-radius:999px;
    display:flex;
    align-items:center;
    gap:8px;
    background:rgba(34,197,94,.12);
    border:1px solid rgba(34,197,94,.22);
    color:#86EFAC;
    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;
}

.eco-home__machine{
    height:38px;
    padding:0 14px;
    border-radius:999px;
    display:flex;
    align-items:center;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:var(--eco-text-secondary);
    font-size:13px;
    font-weight:800;
}

.eco-home__main{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:30px;
    z-index:1;
}

.eco-home__hero{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:36px;
}

.eco-home__hero-left{
    text-align:left;
    max-width:720px;
}

.eco-home__eyebrow{
    margin-bottom:16px;
    color:#86EFAC;
    font-size:13px;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.eco-home__title{
    margin:0;
    font-size:clamp(54px,8vw,112px);
    line-height:.88;
    font-weight:900;
    letter-spacing:-.08em;
}

.eco-home__title span{
    display:block;
    color:#22C55E;
}

.eco-home__description{
    margin:24px 0 32px;
    max-width:540px;
    color:var(--eco-text-secondary);
    font-size:clamp(20px,2.2vw,28px);
    line-height:1.36;
    font-weight:600;
}

.eco-home__hero-right{
    display:flex;
    align-items:center;
    justify-content:center;
}

.eco-home__animation{
    position:relative;
    width:min(360px,36vw);
    aspect-ratio:1;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.eco-home__animation-circle{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(22px);
    box-shadow:
        inset 0 0 60px rgba(255,255,255,.08),
        0 40px 120px rgba(34,197,94,.22);
}

.eco-home__animation-glow{
    position:absolute;
    inset:12%;
    border-radius:50%;
    background:radial-gradient(circle,rgba(34,197,94,.48),transparent 68%);
    filter:blur(18px);
    animation:ecoPulse 2.8s ease-in-out infinite;
}

.eco-home__animation-logo{
    position:relative;
    z-index:2;
    width:46%;
    aspect-ratio:1;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#22C55E;
    color:#041109;
    font-size:clamp(56px,7vw,92px);
    box-shadow:0 30px 80px rgba(34,197,94,.34);
}

.eco-home__impact{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.eco-impact-card{
    min-height:136px;
    padding:20px;
    border-radius:28px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(20px);
    box-shadow:var(--eco-shadow-sm);
    text-align:left;
}

.eco-impact-card__header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
}

.eco-impact-card__icon{
    width:38px;
    height:38px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(34,197,94,.15);
    font-size:20px;
}

.eco-impact-card__title{
    color:var(--eco-text-secondary);
    font-size:13px;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.eco-impact-card__value{
    font-size:clamp(30px,4vw,48px);
    line-height:1;
    font-weight:900;
    letter-spacing:-.06em;
}

.eco-impact-card__value span{
    margin-left:6px;
    color:var(--eco-text-secondary);
    font-size:16px;
    font-weight:800;
    letter-spacing:0;
}

.eco-impact-card__description{
    margin-top:10px;
    color:var(--eco-text-secondary);
    font-size:14px;
    font-weight:600;
}

.eco-impact-card__footer{
    margin-top:10px;
    color:#86EFAC;
    font-size:13px;
    font-weight:800;
}

.eco-home__footer{
    width:100%;
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    z-index:2;
}

.eco-home__footer-right{
    color:var(--eco-text-secondary);
    font-size:13px;
    font-weight:700;
}

.eco-language-switch{
    display:flex;
    gap:8px;
    padding:6px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(16px);
}

.eco-language-switch__button{
    border:0;
    min-width:54px;
    height:38px;
    border-radius:999px;
    background:transparent;
    color:var(--eco-text-secondary);
    font-weight:900;
    cursor:pointer;
}

.eco-language-switch__button.active{
    background:#22C55E;
    color:#041109;
}

@keyframes ecoAmbientMove{
    from{
        transform:translate3d(-2%,-1%,0) scale(1);
    }
    to{
        transform:translate3d(2%,1%,0) scale(1.04);
    }
}

@keyframes ecoPulse{
    0%,100%{
        opacity:.65;
        transform:scale(.96);
    }
    50%{
        opacity:1;
        transform:scale(1.06);
    } 
}

@media (max-width:900px){

    .eco-home{
        padding:18px;
    }

    .eco-home__header{
        min-height:64px;
        border-radius:22px;
    }

    .eco-home__logo{
        height:40px;
    }

    .eco-home__name{
        font-size:20px;
    }

    .eco-home__version{
        font-size:10px;
    }

    .eco-home__machine{
        display:none;
    }

    .eco-home__hero{
        grid-template-columns:1fr;
        gap:18px;
    }

    .eco-home__hero-left{
        text-align:center;
        margin:0 auto;
    }

    .eco-home__description{
        margin-left:auto;
        margin-right:auto;
    }

    .eco-home__animation{
        width:min(240px,54vw);
    }

    .eco-home__impact{
        grid-template-columns:1fr;
        gap:10px;
    }

    .eco-impact-card{
        min-height:auto;
        padding:16px;
    }

    .eco-home__footer{
        min-height:54px;
    }

}