:root{
    --bg:#07110d;
    --bg2:#0d1c16;

    --card:#10231b;
    --card2:#132a21;

    --green:#00c16e;
    --green2:#00e081;

    --white:#f4fff8;
    --text:#d7efe3;
    --muted:#7ea192;

    --border:#1f4234;
    --border-glow:rgba(0,224,129,.25);

    --danger:#ff5c5c;
    --warning:#facc15;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    background:
        radial-gradient(circle at top right, rgba(0,224,129,.12), transparent 30%),
        radial-gradient(circle at bottom left, rgba(0,193,110,.10), transparent 35%),
        linear-gradient(180deg,var(--bg),var(--bg2));
    color:var(--text);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body{
    min-height:100vh;
}

.app{
    width:100%;
    max-width:520px;
    margin:0 auto;
    min-height:100vh;
    position:relative;
    overflow:hidden;
    padding-bottom:90px;
}

.tech-lines{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.06;
    background-image:
        linear-gradient(var(--green) 1px, transparent 1px),
        linear-gradient(90deg, var(--green) 1px, transparent 1px);
    background-size:32px 32px;
}

.topbar{
    position:relative;
    padding:22px 20px 24px;
    border-bottom:1px solid var(--border);
    background:
        linear-gradient(180deg, rgba(0,224,129,.08), transparent),
        rgba(7,17,13,.88);
    backdrop-filter:blur(12px);
}

.topbar::after{
    content:"";
    position:absolute;
    left:20px;
    right:20px;
    bottom:0;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--green), transparent);
}

.topbar small{
    display:block;
    color:var(--green2);
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:11px;
    font-weight:700;
    margin-bottom:8px;
}

.topbar h1{
    margin:0;
    font-size:28px;
    line-height:1;
    color:var(--white);
    font-weight:900;
}

.topbar p{
    margin:8px 0 0;
    color:var(--muted);
    font-size:14px;
}

.content{
    padding:16px;
}

.view{
    display:none;
}

.view.is-active{
    display:block;
}

.card{
    position:relative;
    background:
        linear-gradient(180deg, rgba(255,255,255,.02), transparent),
        var(--card);
    border:1px solid var(--border);
    margin-bottom:14px;
    overflow:hidden;
}

.card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:4px;
    height:100%;
    background:linear-gradient(180deg,var(--green2),transparent);
}

.card-header{
    padding:16px;
    border-bottom:1px solid rgba(255,255,255,.04);
}

.card-header h2{
    margin:0;
    font-size:18px;
    color:var(--white);
    letter-spacing:.5px;
}

.card-body{
    padding:16px;
}

.field{
    margin-bottom:14px;
}

label{
    display:block;
    margin-bottom:7px;
    color:var(--green2);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:700;
}

input,
select,
textarea{
    width:100%;
    background:#0b1713;
    border:1px solid var(--border);
    color:var(--white);
    padding:14px;
    font-size:16px;
    outline:none;
    appearance:none;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--green);
    box-shadow:0 0 0 3px var(--border-glow);
}

textarea{
    resize:vertical;
    min-height:120px;
}

.btn{
    width:100%;
    border:0;
    padding:15px;
    font-size:15px;
    font-weight:800;
    cursor:pointer;
    transition:.2s ease;
    text-transform:uppercase;
    letter-spacing:1px;
}

.btn-primary{
    background:linear-gradient(90deg,var(--green),var(--green2));
    color:#04110c;
}

.btn-primary:active{
    transform:scale(.98);
}

.btn-secondary{
    background:#13261e;
    border:1px solid var(--border);
    color:var(--green2);
}

.btn-danger{
    background:rgba(255,92,92,.12);
    border:1px solid rgba(255,92,92,.35);
    color:var(--danger);
}

.section-title{
    margin-top:18px;
    margin-bottom:9px;
    color:var(--green2);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
}

.search-results,
.student-list,
.selected-exercises,
.exercise-list{
    display:grid;
    gap:10px;
}

.search-results{
    margin-top:10px;
}

.student,
.exercise,
.selected-exercise,
.search-result{
    background:var(--card2);
    border:1px solid var(--border);
    padding:14px;
}

.student,
.search-result,
.selected-exercise{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.student strong,
.search-result strong,
.exercise h3,
.selected-exercise strong{
    display:block;
    font-size:15px;
    color:var(--white);
}

.student span,
.search-result span,
.exercise p,
.selected-exercise span{
    display:block;
    margin-top:3px;
    font-size:12px;
    color:var(--muted);
}

.exercise p{
    line-height:1.5;
}

.exercise-category{
    display:inline-block;
    margin-bottom:8px;
    color:var(--green2);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:800;
}

.status{
    background:rgba(0,224,129,.12);
    border:1px solid rgba(0,224,129,.3);
    color:var(--green2);
    padding:7px 10px;
    font-size:11px;
    text-transform:uppercase;
    font-weight:800;
    letter-spacing:1px;
    white-space:nowrap;
}

.small-btn{
    width:auto;
    padding:10px 12px;
    font-size:11px;
}

.empty-state{
    border:1px dashed var(--border);
    color:var(--muted);
    padding:18px;
    text-align:center;
    font-size:14px;
}

.message{
    display:none;
    margin-top:12px;
    padding:12px;
    border:1px solid var(--border);
    background:#0b1713;
    color:var(--text);
    font-size:14px;
}

.message.is-visible{
    display:block;
}

.message.is-success{
    border-color:rgba(0,224,129,.35);
    color:var(--green2);
}

.message.is-error{
    border-color:rgba(255,92,92,.35);
    color:var(--danger);
}

.divider{
    height:1px;
    background:linear-gradient(90deg, transparent, var(--border), transparent);
    margin:18px 0;
}

.bottom-nav{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:0;
    width:100%;
    max-width:520px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    background:rgba(7,17,13,.95);
    border-top:1px solid var(--border);
    backdrop-filter:blur(16px);
    z-index:20;
}

.nav-btn{
    border:0;
    background:none;
    color:var(--muted);
    padding:16px 10px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:800;
}

.nav-btn.active{
    color:var(--green2);
    background:rgba(0,224,129,.05);
    box-shadow:inset 0 2px 0 var(--green2);
}

@media (min-width:700px){

    body{
        display:flex;
        justify-content:center;
        align-items:flex-start;
        padding:32px 0;
    }

    .app{
        width:420px;
        min-height:860px;
        max-height:none;
        border:1px solid var(--border);
        box-shadow:
            0 0 0 1px rgba(0,224,129,.08),
            0 24px 80px rgba(0,0,0,.45),
            0 0 80px rgba(0,224,129,.08);
        background:
            radial-gradient(circle at top right, rgba(0,224,129,.12), transparent 30%),
            linear-gradient(180deg,var(--bg),var(--bg2));
    }

    .bottom-nav{
        position:sticky;
        left:auto;
        right:auto;
        bottom:0;
        transform:none;
        width:100%;
        max-width:none;
    }

}


.history-result{
    margin-top:14px;
    display:grid;
    gap:12px;
}

.history-block{
    background:var(--card2);
    border:1px solid var(--border);
    padding:14px;
}

.history-block h3{
    margin:0 0 10px;
    color:var(--white);
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.history-list{
    display:grid;
    gap:8px;
}

.history-person{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px;
    background:#0b1713;
    border:1px solid var(--border);
}

.history-person strong{
    color:var(--white);
    font-size:14px;
}

.history-person span{
    color:var(--muted);
    font-size:12px;
}

.history-notes{
    white-space:pre-line;
    color:var(--text);
    line-height:1.55;
    font-size:14px;
}

.history-session{
    background:#0b1713;
    border:1px solid var(--border);
    padding:12px;
    margin-bottom:10px;
}

.history-session:last-child{
    margin-bottom:0;
}

.history-session-time{
    color:var(--green2);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:800;
    margin-bottom:8px;
}

.history-exercises{
    margin-top:10px;
    display:grid;
    gap:8px;
}

.history-exercise{
    border-left:3px solid var(--green2);
    padding:8px 10px;
    background:rgba(0,224,129,.05);
}

.history-exercise strong{
    display:block;
    color:var(--white);
    font-size:13px;
}

.history-exercise span{
    color:var(--muted);
    font-size:12px;
}


.stats-result{
    margin-top:14px;
    display:grid;
    gap:12px;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.stats-card{
    background:var(--card2);
    border:1px solid var(--border);
    padding:14px;
}

.stats-card strong{
    display:block;
    color:var(--green2);
    font-size:24px;
    line-height:1;
}

.stats-card span{
    display:block;
    margin-top:6px;
    color:var(--muted);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.stats-list{
    display:grid;
    gap:8px;
}

.stats-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    background:#0b1713;
    border:1px solid var(--border);
    padding:10px;
}

.stats-row strong{
    color:var(--white);
    font-size:14px;
}

.stats-row span{
    color:var(--muted);
    font-size:12px;
}

.youth-note-panel{
    margin-top:10px;
    padding:12px;
    background:#0b1713;
    border:1px solid var(--border);
}

.youth-note-panel textarea{
    min-height:90px;
}

.student-actions{
    display:flex;
    gap:6px;
    align-items:center;
}

.student-main{
    min-width:0;
}

.student-main strong{
    overflow:hidden;
    text-overflow:ellipsis;
}

@media (max-width:380px){
    .nav-btn{
        font-size:10px;
        padding-left:4px;
        padding-right:4px;
    }

    .stats-grid{
        grid-template-columns:1fr;
    }
}


.history-person-wrap{
    display:grid;
    gap:8px;
}

.history-person-button{
    width:100%;
    cursor:pointer;
    text-align:left;
    color:inherit;
    font:inherit;
}

.history-person-button em{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:11px;
    font-style:normal;
}

.history-youth-note{
    background:#0b1713;
    border:1px solid var(--border);
    border-left:3px solid var(--green2);
    padding:12px;
}

.history-note-updated{
    margin-top:8px;
    color:var(--muted);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px;
}


.logout-link{
    display:inline-flex;
    margin-top:12px;
    color:var(--green2);
    text-decoration:none;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:800;
    border:1px solid var(--border);
    padding:8px 10px;
    background:rgba(0,224,129,.04);
}