*{
box-sizing:border-box;
}

body{
margin:0;
padding:12px;
font-family:Arial,sans-serif;
background:#f2f2f2;
color:#111;
line-height:1.6;
}

.section{
background:white;
border-radius:22px;
padding:20px;
margin-bottom:24px;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
}

h1{
text-align:center;
font-size:2.5rem;
margin-bottom:18px;
font-family:"UnifrakturCook", "Old English Text MT", serif;
}

h2{
font-size:1.5rem;
margin:24px 0 14px;
}

/* =========================
CHECKLIST
========================= */

.top-controls{
display:flex;
flex-direction:column;
gap:12px;
margin-bottom:18px;
}

.mode-buttons{
display:flex;
gap:10px;
}

.mode-btn,
.reset-btn{
border:none;
border-radius:16px;
padding:16px;
font-size:1.15rem;
font-weight:bold;
cursor:pointer;
width:100%;
}

.mode-btn{
background:#1d3557;
color:white;
}

.mode-btn.active{
background:#2a9d8f;
}

.reset-btn{
background:#d62828;
color:white;
}

.week-days{
display:flex;
gap:8px;
overflow-x:auto;
padding-bottom:6px;
}

.day-btn{
min-width:92px;
border:none;
border-radius:14px;
padding:12px 10px;
font-size:1rem;
font-weight:bold;
background:#444;
color:white;
cursor:pointer;
flex-shrink:0;
}

.day-btn.active{
background:#ff9800;
}

.schedule-box{
margin-top:14px;
background:#fafafa;
border-radius:18px;
padding:18px;
}

.schedule-item{
font-size:1.1rem;
margin-bottom:12px;
padding-bottom:12px;
border-bottom:1px solid #ddd;
}

.task{
background:white;
border-radius:18px;
padding:18px;
margin-bottom:14px;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.task.done{
background:#d8d8d8;
color:#666;
text-decoration:line-through;
}

.task-header{
display:flex;
align-items:flex-start;
gap:14px;
}

.task-text{
width:100%;
font-size:1.2rem;
font-weight:600;
word-wrap:break-word;
}

.subtasks{
margin-top:16px;
padding-left:18px;
border-left:4px solid #ccc;
}

.subtask{
display:flex;
align-items:flex-start;
gap:12px;
margin-bottom:14px;
}

.subtask span{
font-size:1.08rem;
}

input[type="checkbox"]{
width:32px;
height:32px;
margin-top:3px;
flex-shrink:0;
}

/* =========================
GÓRNY PASEK KLUCZY
========================= */

.keys-banner{
position:sticky;
top:0;
z-index:9999;
width:100%;
overflow:hidden;
background:linear-gradient(90deg,#111,#222,#111);
border-radius:20px;
margin-bottom:18px;
box-shadow:0 4px 14px rgba(0,0,0,0.25);
border:2px solid #ffcc00;
}

.keys-track{
display:flex;
width:max-content;
animation:slideKeys 16s linear infinite;
}

.keys-text{
white-space:nowrap;
padding:14px 40px;
font-size:1.5rem;
font-weight:900;
letter-spacing:2px;
color:#ffd700;
text-shadow:
0 0 6px rgba(255,215,0,0.9),
0 0 14px rgba(255,215,0,0.7);
}

@keyframes slideKeys{

from{
transform:translateX(0);
}

to{
transform:translateX(-50%);
}

}

/* Oscylacja */

.keys-text span{
display:inline-block;
animation:wave 1.8s ease-in-out infinite;
}

.keys-text span:nth-child(2){
animation-delay:0.12s;
}

.keys-text span:nth-child(3){
animation-delay:0.24s;
}

.keys-text span:nth-child(4){
animation-delay:0.36s;
}

.keys-text span:nth-child(5){
animation-delay:0.48s;
}

.keys-text span:nth-child(6){
animation-delay:0.60s;
}

.keys-text span:nth-child(7){
animation-delay:0.72s;
}

.keys-text span:nth-child(8){
animation-delay:0.84s;
}

.keys-text span:nth-child(9){
animation-delay:0.96s;
}

.keys-text span:nth-child(10){
animation-delay:1.08s;
}

.keys-text span:nth-child(11){
animation-delay:1.20s;
}

.keys-text span:nth-child(12){
animation-delay:1.32s;
}

@keyframes wave{

0%,100%{
transform:translateY(0px) rotate(0deg);
}

25%{
transform:translateY(-6px) rotate(-4deg);
}

50%{
transform:translateY(4px) rotate(4deg);
}

75%{
transform:translateY(-3px) rotate(-2deg);
}

}

.work-section{
background:#111;
color:white;
}

.work-title{
text-align:center;
}

.buttons{
display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
margin-top:20px;
}

.work-btn{
border:none;
border-radius:14px;
padding:18px;
font-size:18px;
cursor:pointer;
font-weight:bold;
}

.morning{
background:#2ecc71;
color:white;
}

.evening{
background:#3498db;
color:white;
}

.select{
background:#f39c12;
color:white;
width:100%;
}

.load{
background:#9b59b6;
color:white;
width:100%;
margin-top:12px;
}

textarea{
width:100%;
height:350px;
margin-top:20px;
background:#222;
color:#0f0;
border:none;
border-radius:12px;
padding:15px;
box-sizing:border-box;
resize:none;
font-size:15px;
}

.status{
margin-top:15px;
opacity:0.8;
text-align:center;
}

@media(max-width:480px){

h1{
font-size:1.7rem;
}

.task-text{
font-size:1.15rem;
}

.subtask span{
font-size:1.05rem;
}

input[type="checkbox"]{
width:34px;
height:34px;
}

.day-btn{
min-width:88px;
font-size:0.95rem;
}

}
/* =========================
LOGIN
========================= */

#auth-screen{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(135deg,#111,#222);
display:flex;
justify-content:center;
align-items:center;
z-index:999999;
padding:20px;
}

.auth-box{
background:white;
padding:35px;
border-radius:24px;
width:100%;
max-width:400px;
display:flex;
flex-direction:column;
gap:16px;
box-shadow:0 10px 30px rgba(0,0,0,0.35);
}

.auth-box h1{
font-family:"UnifrakturCook", serif;
text-align:center;
margin:0 0 10px;
font-size:2.2rem;
}

.login-box input{
padding:16px;
border-radius:14px;
border:2px solid #ddd;
font-size:1rem;
}

.login-box button{
padding:16px;
border:none;
border-radius:14px;
background:#1d3557;
color:white;
font-size:1.1rem;
font-weight:bold;
cursor:pointer;
transition:0.2s;
}

.login-box button:hover{
background:#2a9d8f;
}

#login-error{
color:red;
text-align:center;
min-height:20px;
font-weight:bold;
}