:root{
--red:#8B111E;
--red2:#C1121F;
--green:#16A34A;
--bg:#F4F6FA;
--card:#ffffffee;
--border:#E7EAF1;
--text:#1F2937;
}
body{
background:linear-gradient(#fafafa,#f1f5f9);
font-family:Inter,Arial,sans-serif;
}
#lto-driver{
max-width:960px;
margin:auto;
padding:24px;
}
.hero{
background:linear-gradient(135deg,var(--red),var(--red2));
color:white;
border-radius:30px;
padding:28px;
box-shadow:0 18px 40px rgba(139,17,30,.25);
}
.hero-top{
display:flex;
align-items:center;
gap:20px;
}
.logo-circle{
width:72px;height:72px;
display:flex;align-items:center;justify-content:center;
background:#ffffff20;
border-radius:20px;
font-size:36px;
backdrop-filter:blur(10px);
}
.hero h1{margin:6px 0 4px;font-size:30px}
.hero small{letter-spacing:2px;opacity:.8}
.hero-bottom{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:25px;
flex-wrap:wrap;
gap:20px;
}
.ring{
position:relative;
width:140px;height:140px;
}
.ring svg{
width:140px;height:140px;
transform:rotate(-90deg);
}
.ring circle{
fill:none;
stroke:#ffffff33;
stroke-width:10;
}
#progress-ring{
stroke:#FFD54A;
stroke-linecap:round;
stroke-dasharray:314;
stroke-dashoffset:314;
transition:.5s;
}
.ring-text{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
font-weight:700;
}
.stats{
display:flex;
gap:18px;
flex-wrap:wrap;
}
.stat{
background:#ffffff15;
padding:16px 22px;
border-radius:16px;
backdrop-filter:blur(10px);
min-width:120px;
text-align:center;
}
.stat strong{
display:block;
font-size:28px;
}
.glass-card{
background:var(--card);
backdrop-filter:blur(18px);
border:1px solid var(--border);
border-radius:24px;
padding:24px;
margin:22px 0;
box-shadow:0 10px 25px rgba(15,23,42,.05);
}
.glass-card h2{
margin-top:0;
color:var(--red);
}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:14px;
}
input,textarea{
width:100%;
padding:14px 16px;
border-radius:16px;
border:1px solid var(--border);
background:#fff;
font-size:15px;
}
.section{
margin:20px 0;
}
.section-head{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 22px;
border-radius:18px;
background:#fff;
cursor:pointer;
border:1px solid var(--border);
transition:.2s;
}
.section-head:hover{
transform:translateY(-2px);
}
.badge{
background:#FEE2E2;
color:var(--red);
padding:6px 12px;
border-radius:999px;
font-weight:600;
font-size:13px;
}
.items{
display:none;
padding:12px 20px;
background:white;
border:1px solid var(--border);
border-top:none;
border-radius:0 0 20px 20px;
}
.section.open .items{
display:block;
animation:fade .25s ease;
}
label.item{
display:flex;
gap:12px;
padding:12px 0;
border-bottom:1px solid #F3F4F6;
}
label.item:last-child{
border:none;
}
input[type=checkbox]{
accent-color:var(--green);
width:22px;height:22px;
}
.done span{
text-decoration:line-through;
color:#6B7280;
}
.sticky-bar{
position:sticky;
bottom:18px;
display:flex;
gap:12px;
justify-content:center;
padding-top:20px;
}
button{
padding:15px 24px;
border:none;
border-radius:16px;
font-weight:700;
cursor:pointer;
box-shadow:0 8px 18px rgba(139,17,30,.18);
}
button.outline{
background:white;
border:1px solid var(--border);
color:#111827;
}
#saveBtn{
background:linear-gradient(90deg,var(--red),var(--red2));
color:white;
}
@keyframes fade{
from{opacity:0;transform:translateY(-5px);}
to{opacity:1;transform:none;}
}
@media(max-width:768px){
#lto-driver{padding:12px}
.hero{padding:22px;border-radius:22px}
.hero h1{font-size:22px}
.hero-bottom{justify-content:center}
.sticky-bar{
flex-direction:column;
}
button{width:100%}
}
@media print{
.sticky-bar{display:none}
.hero,.glass-card{
box-shadow:none;
}
body{background:white}
}