:root{
  --bg:#0b1020;
  --panel:#0f1733;
  --text:#e9ecf7;
  --muted:#b7c0e3;
  --brand:#6aa6ff;
  --border:rgba(255,255,255,0.12);
  --shadow:0 12px 30px rgba(0,0,0,0.35);
  --focus:0 0 0 3px rgba(106,166,255,0.35);
  --radius:14px;
  --max:1050px;
  --font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}

:root[data-theme="light"]{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --text:#0d1325;
  --muted:#44507a;
  --brand:#2b6bff;
  --border:rgba(13,19,37,0.12);
  --shadow:0 10px 24px rgba(13,19,37,0.10);
  --focus:0 0 0 3px rgba(43,107,255,0.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:radial-gradient(1000px 500px at 15% 0%, rgba(106,166,255,0.18), transparent 60%),
             radial-gradient(900px 520px at 85% 10%, rgba(155,106,255,0.16), transparent 60%),
             var(--bg);
  color:var(--text);
  line-height:1.55;
}

a{color:inherit;text-decoration-color:rgba(106,166,255,0.55)}
a:hover{text-decoration-color:rgba(106,166,255,0.9)}
a:focus-visible{outline:none;box-shadow:var(--focus);border-radius:10px}

.container{max-width:var(--max);margin:0 auto;padding:20px}

.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  padding:10px 12px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
}
.skip-link:focus{left:10px;z-index:10}

.site-header{
  position:sticky;
  top:0;
  z-index:5;
  backdrop-filter:saturate(140%) blur(10px);
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom:1px solid var(--border);
}

.header-inner{display:flex;align-items:center;gap:14px;justify-content:space-between}

.brand{display:flex;align-items:center;gap:12px;min-width:240px}
.logo{
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(106,166,255,0.95), rgba(155,106,255,0.85));
  color:white;
  font-weight:800;
  box-shadow:var(--shadow);
}
.brand-title{font-weight:800;letter-spacing:0.2px}
.brand-subtitle{font-size:13px;color:var(--muted)}

.nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.nav a{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
}
.nav a[aria-current="page"]{
  border-color:var(--border);
  background:color-mix(in srgb, var(--panel) 80%, transparent);
}

.theme-toggle{
  appearance:none;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 85%, transparent);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
}
.theme-toggle:focus-visible{outline:none;box-shadow:var(--focus)}

.hero{padding:18px 0 6px}
.hero h1{font-size:clamp(28px, 4vw, 40px);margin:8px 0 6px}
.hero p{margin:0;color:var(--muted);max-width:70ch}

.panel{
  margin:18px 0;
  padding:16px;
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.card-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.card{
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:color-mix(in srgb, var(--panel) 92%, transparent);
}
.card h2{font-size:16px;margin:0 0 6px}
.card p{margin:0;color:var(--muted)}

.counter{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.counter-value{
  font-size:34px;
  font-weight:800;
  letter-spacing:0.5px;
  padding:6px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 92%, transparent);
}
.counter-actions{display:flex;gap:10px;flex-wrap:wrap}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:linear-gradient(135deg, color-mix(in srgb, var(--brand) 70%, var(--panel)), color-mix(in srgb, var(--panel) 90%, transparent));
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  font-weight:700;
}
.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn:active{transform:translateY(1px)}

.btn-secondary{
  background:color-mix(in srgb, var(--panel) 92%, transparent);
}

.note{display:grid;gap:10px}
.label{font-weight:700}
.note-row{display:flex;gap:10px;flex-wrap:wrap}
.input{
  flex:1;
  min-width:220px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  color:var(--text);
}
.input:focus{outline:none;box-shadow:var(--focus)}
.note-output{color:var(--muted);min-height:1.5em}

.list{margin:0;padding-left:18px;color:var(--muted)}

.site-footer{border-top:1px solid var(--border);margin-top:26px}
.footer-inner{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;color:var(--muted)}
.sep{opacity:0.7}

@media (max-width: 860px){
  .brand{min-width:auto}
  .card-grid{grid-template-columns:1fr}
  .header-inner{flex-wrap:wrap;justify-content:center}
}