:root{
  --bg:#eef1f5; --panel:#ffffff; --ink:#10151c; --soft:#5d6b7a;
  --line:#e3e7ec; --line2:#eef1f5;
  --accent:#2563eb; --accent-ink:#ffffff;
  --green:#15a34a; --green-bg:#e7f7ee; --green-ink:#0c6b32;
  --red:#dc2626;  --red-bg:#fdeaea;  --red-ink:#9b1c1c;
  --amber:#d97706; --amber-bg:#fdf2e3; --amber-ink:#92560a;
  --shadow:0 1px 2px rgba(16,21,28,.04), 0 6px 20px rgba(16,21,28,.06);
  --radius:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.topbar{
  position:sticky; top:0; z-index:5;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{font-weight:800; letter-spacing:.16em; font-size:.82rem; color:var(--soft)}
main{max-width:640px; margin:0 auto; padding:20px 16px 64px}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; margin:0 0 16px; box-shadow:var(--shadow);
}
h1{font-size:1.4rem; margin:0 0 18px; font-weight:800}
h2{font-size:.95rem; margin:0 0 14px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--soft)}
h3{font-size:.78rem; margin:18px 0 8px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--soft)}
.muted{color:var(--soft)} .warn{color:var(--red-ink); font-weight:600}
.ok{color:var(--green-ink); font-weight:700} .pending{color:var(--amber-ink); font-weight:600}
.big{font-size:1.5rem; font-weight:800; margin:.1em 0; letter-spacing:-.01em}
.flash{
  background:var(--amber-bg); border:1px solid #f0d8a8; color:var(--amber-ink);
  padding:12px 16px; border-radius:14px; margin-bottom:16px; font-weight:600;
}
.status{display:flex; gap:20px; align-items:center; flex-wrap:wrap; border-width:1px}
.status.green{background:linear-gradient(180deg,var(--green-bg),#fff); border-color:#bfe6cd}
.status.red{background:linear-gradient(180deg,var(--red-bg),#fff); border-color:#f2c4c4}
.status .statustext{flex:1; min-width:190px}
.status .statustext h2{margin-bottom:6px}
.statuslight{width:58px; height:58px; border-radius:50%; flex:0 0 auto; position:relative}
.status.green .statuslight{background:radial-gradient(circle at 35% 30%,#56d98a,#15a34a); box-shadow:0 0 0 6px rgba(21,163,74,.14), 0 6px 18px rgba(21,163,74,.45)}
.status.red .statuslight{background:radial-gradient(circle at 35% 30%,#f36b6b,#dc2626); box-shadow:0 0 0 6px rgba(220,38,38,.14), 0 6px 18px rgba(220,38,38,.4)}
.status.green .big{color:var(--green-ink)} .status.red .big{color:var(--red-ink)}
.statusactions{display:flex; gap:10px; flex-wrap:wrap; width:100%}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; background:#eaeef3; color:var(--ink);
  padding:12px 18px; border-radius:12px; font-weight:700; font-size:.98rem;
  cursor:pointer; transition:transform .04s ease, filter .15s ease, box-shadow .15s ease;
  text-decoration:none; line-height:1.1;
}
.btn:hover{filter:brightness(.97)} .btn:active{transform:translateY(1px)}
.btn.big{padding:14px 22px; font-size:1.02rem; flex:1}
.btn.massive{width:100%; padding:30px; font-size:1.45rem; letter-spacing:.02em; border-radius:16px; box-shadow:0 8px 22px rgba(217,119,6,.35)}
.btn.primary{background:var(--accent); color:var(--accent-ink)}
.btn.success{background:var(--green); color:#fff}
.btn.danger{background:var(--red); color:#fff}
.btn.warning{background:var(--amber); color:#fff}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--soft)}
.btn.ghost:hover{border-color:#cdd5de; color:var(--ink); filter:none}
.link{background:none; border:none; color:var(--accent); cursor:pointer; padding:0; font:inherit; font-weight:600}
.link.del{color:var(--red)} .link:hover{text-decoration:underline}
.inline{display:inline} .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.addrow{margin-top:14px}
input,button{font-family:inherit}
input[type=text],input[type=email],input[type=date],input[type=time],input[type=number],input[type=password]{
  background:#fff; border:1px solid var(--line); color:var(--ink);
  padding:12px 13px; border-radius:11px; font-size:1rem; min-width:0; transition:border-color .15s, box-shadow .15s;
}
input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.addrow input{flex:1}
label{display:block; margin:.5em 0; font-weight:600; font-size:.9rem; color:var(--soft)}
label input{width:100%; margin-top:6px; font-weight:500; color:var(--ink)}
table.list{width:100%; border-collapse:collapse}
table.list td{padding:11px 4px; border-bottom:1px solid var(--line2); vertical-align:middle}
table.list tr:last-child td{border-bottom:none}
.right{text-align:right}
code{background:var(--line2); padding:2px 7px; border-radius:7px; font-size:.88em}
.login{max-width:380px; margin:8vh auto}
.login .btn{width:100%; margin-top:6px}
details.card summary{cursor:pointer; font-weight:700; color:var(--soft); list-style:none}
details.card summary::-webkit-details-marker{display:none}
details.card summary::before{content:"\2699  "}
.settings label{margin:.7em 0}
@media(max-width:520px){
  main{padding:14px 12px 56px}
  .card{padding:18px}
  .big{font-size:1.35rem}
  .status{flex-direction:column; text-align:center}
  .statusactions{justify-content:center}
  .btn{padding:14px 18px}
  .btn.big{flex:1 1 100%}
  .btn.massive{padding:34px 20px; font-size:1.35rem}
  .addrow{flex-direction:column; align-items:stretch}
  .addrow input, .addrow .btn{width:100%}
  table.list td{word-break:break-word}
  .settings label input{font-size:16px}
}