body{
 font-family:system-ui,Arial,sans-serif;
 background:#f4f6f8;
 margin:0;
 padding:16px;
}
.container{
 max-width:1200px;
 margin:auto;
 background:#fff;
 padding:24px;
 border-radius:20px;
}
.nav{
 display:flex;
 flex-wrap:wrap;
 gap:10px;
 margin-bottom:12px;
}
.nav a{
 padding:8px 16px;
 border-radius:20px;
 background:#eef1f4;
 text-decoration:none;
 color:#333;
 font-weight:500;
 font-size:14px;
}
.nav a.active{background:#007bff;color:#fff}
.nav .logout{background:#f7c5c5}

/* Countdown */
.countdown{
 font-size:13px;
 color:#666;
 margin-bottom:12px;
 text-align:right;
}
.countdown.warn{
 color:#d9534f;
 font-weight:bold;
 animation:pulse 1s infinite;
}
@keyframes pulse{
 0%{opacity:1}
 50%{opacity:.4}
 100%{opacity:1}
}

/* Cards */
.card{
 padding:14px;
 border-radius:16px;
 margin-bottom:12px;
 font-size:14px;
}
.gruen{background:#c8f7c5}
.gelb{background:#fff3b0}
.rot{background:#f7c5c5}

/* Tables – Desktop */
.table-wrap{
 overflow-x:auto;
}
table{
 width:100%;
 border-collapse:separate;
 border-spacing:0;
 font-size:14px;
}
table th{
 background:#f1f3f6;
 font-weight:600;
 padding:10px;
 border-bottom:2px solid #e0e4ea;
 text-align:center;
 white-space:nowrap;
}
table td{
 padding:8px;
 text-align:center;
 border-bottom:1px solid #eaecef;
}
table tr:hover td{
 background:#fafbfc;
}

/* Forms */
label{
 display:flex;
 align-items:center;
 gap:10px;
 padding:6px 0;
 font-size:15px;
}
input[type=checkbox]{transform:scale(1.25)}
button{
 width:100%;
 padding:14px;
 border:none;
 border-radius:14px;
 background:#28a745;
 color:#fff;
 font-size:16px;
 margin-top:14px;
 cursor:pointer;
}

/* Mobile tweaks */
@media (max-width:768px){
 .container{padding:16px}
 .nav{
  overflow-x:auto;
  flex-wrap:nowrap;
 }
 .nav a{white-space:nowrap}
 h2{font-size:18px}
 table{font-size:12px}
}


/* Touch buttons for today page */
.touch-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
 gap:10px;
 margin-top:10px;
}
.touch-btn{
 display:block;
 padding:14px;
 border-radius:14px;
 background:#eef1f4;
 text-align:center;
 font-size:15px;
 cursor:pointer;
 border:2px solid transparent;
}
.touch-btn input{
 display:none;
}
.touch-btn.active{
 background:#28a745;
 color:#fff;
 border-color:#1f7d34;
}


/* progress dashboard */
.today-progress{
 margin:10px 0 20px 0;
}
.progress-bar{
 width:100%;
 height:14px;
 background:#e9ecef;
 border-radius:10px;
 overflow:hidden;
}
.progress-fill{
 height:100%;
 background:#28a745;
}
.progress-text{
 font-size:13px;
 margin-top:4px;
 text-align:right;
 color:#555;
}


/* Mobile login page */
.login-wrapper{
 display:flex;
 align-items:center;
 justify-content:center;
 min-height:70vh;
}

.login-card{
 width:100%;
 max-width:380px;
 background:#fff;
 padding:28px;
 border-radius:20px;
 box-shadow:0 10px 25px rgba(0,0,0,0.08);
 text-align:center;
}

.login-card input[type=password]{
 width:100%;
 padding:16px;
 font-size:18px;
 border-radius:12px;
 border:1px solid #ddd;
 margin-top:10px;
}

.login-card button{
 width:100%;
 margin-top:14px;
}

@media (max-width:600px){
 .login-card{
  padding:22px;
  border-radius:16px;
 }
}


/* ---------- LOGIN PAGE ---------- */

.login-body{
 background:#f4f6f8;
 margin:0;
 font-family:system-ui, Arial, sans-serif;
}

.login-wrapper{
 display:flex;
 align-items:center;
 justify-content:center;
 min-height:100vh;
 padding:20px;
}

.login-card{
 width:100%;
 max-width:420px;
 background:#ffffff;
 border-radius:20px;
 padding:32px;
 box-shadow:0 15px 40px rgba(0,0,0,0.08);
 text-align:center;
}

.login-title{
 margin-bottom:20px;
 font-size:22px;
}

.login-form input{
 width:100%;
 padding:16px;
 font-size:18px;
 border-radius:12px;
 border:1px solid #dcdcdc;
 margin-bottom:14px;
 box-sizing:border-box;
}

.login-form button{
 width:100%;
 padding:16px;
 font-size:18px;
 border-radius:14px;
 border:none;
 background:#28a745;
 color:white;
 cursor:pointer;
}

.login-form button:hover{
 background:#23913d;
}

.login-error{
 margin-top:10px;
 color:#c0392b;
 font-size:14px;
}

/* Mobile */
@media (max-width:600px){

.login-card{
 padding:24px;
 border-radius:16px;
}

.login-title{
 font-size:20px;
}

.login-form input{
 font-size:20px;
 padding:18px;
}

.login-form button{
 font-size:20px;
}

}



/* ===== LOGIN PAGE ===== */

.login-body{
 background:#f4f6f8;
 margin:0;
 font-family:system-ui, Arial, sans-serif;
}

/* full page centering */
.login-page{
 display:flex;
 align-items:center;
 justify-content:center;
 min-height:100vh;
 padding:40px;
}

/* card */
.login-card{
 width:100%;
 max-width:420px;
 background:#ffffff;
 border-radius:22px;
 padding:36px;
 box-shadow:0 20px 60px rgba(0,0,0,0.08);
 text-align:center;
}

/* header */
.login-header{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:10px;
 margin-bottom:24px;
}

.login-header h1{
 font-size:24px;
 margin:0;
}

.login-icon{
 font-size:22px;
}

/* input */
.login-form input{
 width:100%;
 padding:16px;
 font-size:18px;
 border-radius:12px;
 border:1px solid #d9d9d9;
 margin-bottom:14px;
 box-sizing:border-box;
 transition:border .2s;
}

.login-form input:focus{
 outline:none;
 border-color:#28a745;
}

/* button */
.login-form button{
 width:100%;
 padding:16px;
 font-size:18px;
 border-radius:14px;
 border:none;
 background:#28a745;
 color:white;
 cursor:pointer;
 transition:all .15s;
}

.login-form button:hover{
 background:#23913d;
 transform:translateY(-1px);
}

.login-error{
 margin-top:12px;
 color:#c0392b;
 font-size:14px;
}

/* mobile */
@media (max-width:600px){

.login-page{
 padding:20px;
}

.login-card{
 padding:26px;
 border-radius:18px;
}

.login-header h1{
 font-size:22px;
}

.login-form input{
 font-size:20px;
 padding:18px;
}

.login-form button{
 font-size:20px;
}

}