:root{
  --bg:#f4f5f7; --card:#ffffff; --text:#1f2430; --muted:#6b7280;
  --accent:#2563eb; --accent-dark:#1d4ed8; --border:#e5e7eb;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14161c; --card:#1e2129; --text:#eef0f4; --muted:#9aa2b1;
    --accent:#3b82f6; --accent-dark:#60a5fa; --border:#2c303a;
  }
}
*{box-sizing:border-box;}
html,body{margin:0; height:100%;}
body{
  background:var(--bg); color:var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.6;
}
a{color:var(--accent);}
.container{max-width:760px; margin:0 auto; padding:0 16px;}

/* Header / Nav */
header.site{
  background:var(--card); border-bottom:1px solid var(--border);
}
.nav-wrap{
  max-width:760px; margin:0 auto; padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.logo{font-weight:700; font-size:1.05rem; color:var(--text); text-decoration:none;}
.logo span{color:var(--accent);}
nav.links{display:flex; gap:16px; flex-wrap:wrap; font-size:0.92rem;}
nav.links a{color:var(--muted); text-decoration:none;}
nav.links a:hover, nav.links a.active{color:var(--accent);}

/* Main content */
main{padding:32px 0 48px;}
h1{font-size:1.6rem; margin:0 0 8px;}
h2{font-size:1.2rem; margin:28px 0 10px;}
p.lead{color:var(--muted); margin:0 0 24px;}
p{margin:0 0 14px;}
ul{padding-left:20px; margin:0 0 14px;}
li{margin-bottom:6px;}

/* Cards / calculator UI */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:26px; margin-bottom:26px;
  box-shadow:0 4px 20px rgba(0,0,0,0.06);
}
label{display:block; font-size:0.85rem; color:var(--muted); margin-bottom:4px; margin-top:14px;}
input[type="time"], input[type="number"], input[type="text"], input[type="email"], select, textarea{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:transparent; color:var(--text);
  font-size:1rem; font-family:inherit;
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--accent); outline-offset:1px;}
button, .btn{
  margin-top:22px; width:100%; padding:12px; border:none; border-radius:10px;
  background:var(--accent); color:#fff; font-size:1rem; font-weight:600;
  cursor:pointer; text-align:center; text-decoration:none; display:inline-block;
}
button:hover, .btn:hover{background:var(--accent-dark);}
.result{
  margin-top:20px; padding:16px; border-radius:12px;
  background:var(--bg); border:1px solid var(--border);
  display:none;
}
.result.show{display:block;}
.result .total{font-size:1.5rem; font-weight:700; color:var(--accent-dark);}
.result .line{display:flex; justify-content:space-between; font-size:0.88rem; color:var(--muted); margin-top:4px;}
.error{color:#dc2626; font-size:0.85rem; margin-top:10px; display:none;}
.error.show{display:block;}
.tool-links{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px;}
.tool-links a{
  border:1px solid var(--border); border-radius:10px; padding:10px 14px;
  text-decoration:none; color:var(--text); font-size:0.9rem; background:var(--card);
}
.tool-links a:hover{border-color:var(--accent); color:var(--accent);}
.checkbox-row{display:flex; align-items:center; gap:8px; margin-top:14px;}
.checkbox-row input{width:auto;}
.checkbox-row label{margin:0; color:var(--text); font-size:0.92rem;}

/* Footer */
footer.site{
  border-top:1px solid var(--border); padding:24px 0; margin-top:20px;
}
footer.site .container{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:0.85rem; color:var(--muted);
}
footer.site a{color:var(--muted); text-decoration:underline;}