:root{
    --ept-primary:#4f46e5;
    --ept-primary-dark:#4338ca;
    --ept-start:#16a34a;
    --ept-start-dark:#15803d;
    --ept-stop:#dc2626;
    --ept-stop-dark:#b91c1c;
    --ept-bg:#0f172a;
    --ept-bg2:#1e293b;
    --ept-card:#ffffff;
    --ept-text:#0f172a;
    --ept-muted:#64748b;
    --ept-border:#e2e8f0;
    --ept-radius:18px;
    --ept-shadow:0 10px 30px rgba(2,6,23,.08);
}

*{box-sizing:border-box;}

body.ept-body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
    background:linear-gradient(180deg,#eef2ff 0%,#f8fafc 40%,#f1f5f9 100%);
    color:var(--ept-text);
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
}

.ept-app{
    max-width:560px;
    margin:0 auto;
    padding:16px 16px 48px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.ept-card{
    background:var(--ept-card);
    border-radius:var(--ept-radius);
    box-shadow:var(--ept-shadow);
    padding:20px;
    border:1px solid rgba(226,232,240,.7);
}

.ept-center{text-align:center;}
.ept-muted{color:var(--ept-muted);font-size:14px;line-height:1.5;}

.ept-logo{
    font-size:44px;
    line-height:1;
    margin-bottom:8px;
}

/* Login */
.ept-login{max-width:420px;margin:8vh auto 0;text-align:center;}
.ept-login h1{margin:6px 0 4px;font-size:26px;}

.ept-field{margin:14px 0;}
.ept-field input,
.ept-field textarea{
    width:100%;
    padding:14px 16px;
    border:1.5px solid var(--ept-border);
    border-radius:14px;
    font-size:16px;
    font-family:inherit;
    background:#f8fafc;
    transition:border-color .15s,background .15s;
}
.ept-field input:focus,
.ept-field textarea:focus{
    outline:none;
    border-color:var(--ept-primary);
    background:#fff;
}
.ept-field textarea{resize:vertical;}

.ept-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:15px 18px;
    font-size:17px;
    font-weight:700;
    border:none;
    border-radius:14px;
    cursor:pointer;
    color:#fff;
    transition:transform .08s,filter .15s,opacity .15s;
    -webkit-tap-highlight-color:transparent;
}
.ept-btn:active{transform:scale(.98);}
.ept-btn:disabled{opacity:.45;cursor:not-allowed;}
.ept-btn-primary{background:var(--ept-primary);}
.ept-btn-primary:hover{background:var(--ept-primary-dark);}
.ept-btn-start{background:var(--ept-start);}
.ept-btn-start:hover{background:var(--ept-start-dark);}
.ept-btn-stop{background:var(--ept-stop);}
.ept-btn-stop:hover{background:var(--ept-stop-dark);}

.ept-error{color:var(--ept-stop);font-size:14px;margin-top:10px;min-height:18px;font-weight:600;}

/* Header */
.ept-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:4px 4px 0;
}
.ept-hello{color:var(--ept-muted);font-size:14px;}
.ept-name{font-size:22px;font-weight:800;}
.ept-logout{
    background:#fff;
    border:1.5px solid var(--ept-border);
    color:var(--ept-muted);
    padding:8px 14px;
    border-radius:12px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}
.ept-logout:hover{color:var(--ept-stop);border-color:var(--ept-stop);}

/* Timer */
.ept-timer-card{text-align:center;background:linear-gradient(160deg,#ffffff,#f5f3ff);}
.ept-timer{
    font-size:64px;
    font-weight:800;
    letter-spacing:1px;
    font-variant-numeric:tabular-nums;
    color:var(--ept-primary);
    line-height:1.1;
}
.ept-timer.running{color:var(--ept-start);}
.ept-timer-label{color:var(--ept-muted);font-size:14px;margin:6px 0 16px;}

.ept-controls{display:flex;gap:12px;margin-top:6px;}
.ept-controls .ept-btn{flex:1;}

.ept-earned{
    margin-top:16px;
    padding:14px;
    border-radius:14px;
    background:#ecfdf5;
    border:1px solid #a7f3d0;
    display:flex;
    flex-direction:column;
    gap:2px;
    animation:eptpop .3s ease;
}
@keyframes eptpop{from{transform:scale(.9);opacity:0;}to{transform:scale(1);opacity:1;}}
.ept-earned-label{font-size:13px;color:#047857;font-weight:600;}
.ept-earned-value{font-size:30px;font-weight:800;color:#059669;}

/* Stats grid */
.ept-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.ept-stat{padding:16px;}
.ept-stat-label{color:var(--ept-muted);font-size:13px;margin-bottom:6px;}
.ept-stat-value{font-size:22px;font-weight:800;}
.ept-stat-accent{grid-column:1 / -1;background:linear-gradient(135deg,var(--ept-primary),#7c3aed);color:#fff;border:none;}
.ept-stat-accent .ept-stat-label{color:rgba(255,255,255,.85);}

/* Filter */
.ept-filter{margin-bottom:14px;}
.ept-filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.ept-filter-row label{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:12px;
    color:var(--ept-muted);
    font-weight:600;
}
.ept-filter-row input{
    padding:10px 12px;
    border:1.5px solid var(--ept-border);
    border-radius:12px;
    font-size:15px;
    font-family:inherit;
}
.ept-presets{display:flex;gap:8px;flex-wrap:wrap;}
.ept-chip{
    background:#eef2ff;
    color:var(--ept-primary);
    border:1px solid #c7d2fe;
    padding:8px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}
.ept-chip.active,.ept-chip:hover{background:var(--ept-primary);color:#fff;border-color:var(--ept-primary);}

.ept-chart-wrap{position:relative;height:240px;}

/* History */
.ept-section-title{margin:0 0 12px;font-size:18px;}
.ept-history{display:flex;flex-direction:column;gap:10px;}
.ept-hist-item{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:12px;
    border-radius:12px;
    background:#f8fafc;
    border:1px solid var(--ept-border);
}
.ept-hist-main{min-width:0;}
.ept-hist-date{font-size:13px;color:var(--ept-muted);}
.ept-hist-comment{font-size:15px;font-weight:600;margin-top:2px;word-break:break-word;}
.ept-hist-right{text-align:right;white-space:nowrap;}
.ept-hist-dur{font-size:14px;color:var(--ept-muted);}
.ept-hist-earn{font-size:16px;font-weight:800;color:var(--ept-start);}

@media (max-width:380px){
    .ept-timer{font-size:52px;}
    .ept-controls{flex-direction:column;}
}