:root{
  /* Light theme */
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --accent:#2563eb;
  --accent2:#1d4ed8;
  --danger:#dc2626;
  --ok:#16a34a;
  --border:#e2e8f0;
  --shadow:0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow2:0 1px 2px rgba(15, 23, 42, 0.06);
}

*{box-sizing:border-box;}
html, body{height:100%;}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg), #ffffff);
  color:var(--text);
}

a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:16px;
}

.topbar{
  position:sticky;
  top:0;
  background:rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
  z-index:10;
}

.topbar .container{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand a{font-weight:700; color:var(--text);}
.nav{display:flex; align-items:center; gap:12px;}
.nav-user{color:var(--muted); font-size:0.95rem;}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  box-shadow: var(--shadow);
}

.grid{display:grid; gap:16px;}

@media (min-width: 900px){
  .grid.cols-2{grid-template-columns: 1fr 1fr;}
}

h1,h2{margin:0 0 12px 0; letter-spacing:-0.01em;}
h1{font-size:1.35rem;}
h2{font-size:1.1rem;}
.muted{color:var(--muted);}

.form-row{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;}
.label{display:flex; flex-direction:column; gap:6px; font-size:0.9rem; color:var(--muted);}

input[type="text"], input[type="password"], input[type="date"], select{
  background:#ffffff;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  min-width:200px;
  box-shadow: var(--shadow2);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
select:focus{
  outline:3px solid rgba(37, 99, 235, 0.20);
  border-color:rgba(37, 99, 235, 0.55);
}

button, .btn{
  background:var(--accent);
  color:#ffffff;
  border:1px solid rgba(37, 99, 235, 0.15);
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  box-shadow: var(--shadow2);
}

button:hover, .btn:hover{background:var(--accent2); text-decoration:none;}
button:active, .btn:active{transform:translateY(1px);}

.btn-secondary{
  background:#ffffff;
  color:var(--text);
  border:1px solid var(--border);
}

.btn-secondary:hover{background:#f1f5f9;}

.btn-danger{
  background:var(--danger);
  border-color: rgba(220, 38, 38, 0.20);
}

.btn-danger:hover{background:#b91c1c;}

.badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:0.8rem;
  border:1px solid var(--border);
  color:var(--muted);
  background:#f8fafc;
}

.badge.open{
  border-color:rgba(37, 99, 235, 0.35);
  color:var(--accent);
  background:rgba(37, 99, 235, 0.06);
}

.badge.done{
  border-color:rgba(22, 163, 74, 0.35);
  color:var(--ok);
  background:rgba(22, 163, 74, 0.06);
}

.table-wrap{
  overflow-x:auto;
  border-radius:12px;
  border:1px solid var(--border);
  background:#ffffff;
  box-shadow: var(--shadow2);
}

table{width:100%; border-collapse:collapse; min-width:880px; background:#ffffff;}

th,td{padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top;}

th{
  color:var(--muted);
  text-align:left;
  font-size:0.85rem;
  font-weight:700;
  background:#f8fafc;
}

tr:hover td{background:rgba(37, 99, 235, 0.04);}

.actions{display:flex; gap:8px; flex-wrap:wrap;}

.flash{
  margin:0 0 12px 0;
  padding:12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#ffffff;
  box-shadow: var(--shadow2);
}

.flash.ok{border-color:rgba(22, 163, 74, 0.35); background:rgba(22, 163, 74, 0.05);}
.flash.err{border-color:rgba(220, 38, 38, 0.35); background:rgba(220, 38, 38, 0.05);}

.footer{border-top:1px solid var(--border); margin-top:28px;}

pre{
  white-space:pre-wrap;
  word-break:break-word;
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  overflow:auto;
  box-shadow: var(--shadow2);
}

/* Small screens */
@media (max-width: 520px){
  .container{padding:12px;}
  input[type="text"], input[type="password"], input[type="date"], select{min-width:0; width:100%;}
  .form-row{align-items:stretch;}
  .nav{flex-wrap:wrap; justify-content:flex-end;}
  table{min-width:720px;}
}