:root{
  --bg:#0f1115;
  --panel:#151823;
  --text:#e7eaf2;
  --muted:#a9b1c6;
  --accent:#8ab4f8;
  --border:#23283a;
  --ok:#4cc38a;
  --warn:#f3b94c;
  --err:#ef6461;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  padding:0;
  font-family: var(--sans);
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, #1a1e2b 0, var(--bg) 45%);
  line-height: 1.5;
}

.site-header, .site-footer{
  max-width: 980px;
  margin: 1.25rem auto;
  padding: 0 1rem;
}
.site-header h1{
  margin: .25rem 0 .25rem;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
}
.subtitle{
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

.container{
  max-width: 980px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}

.panel{
  background: linear-gradient(180deg, #171b27, var(--panel));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.form-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: .75rem .75rem;
  align-items: end;
}
label{
  display: grid;
  gap: .35rem;
  font-size: .95rem;
  color: var(--muted);
}
input{
  background: #0f1320;
  border: 1px solid var(--border);
  color: var(--text);
  padding: .6rem .7rem;
  border-radius: 10px;
  outline: none;
}
input:focus{ border-color: #2a3150; box-shadow: inset 0 0 0 1px #2a3150; }

.actions{
  display: flex;
  gap: .5rem;
  align-items: center;
  padding-top: .25rem;
}
button{
  appearance: none;
  border: 1px solid var(--border);
  background: #1b2030;
  color: var(--text);
  padding: .6rem .9rem;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .02s ease, background .2s ease, border-color .2s ease;
  font-weight: 600;
}
button:hover{ background: #242b40; }
button:active{ transform: translateY(1px); }
button[disabled]{ opacity: .5; cursor: not-allowed; }

.hint{
  margin-top: .5rem;
  color: var(--muted);
}
.hint summary{ cursor: pointer; }

.status-line{
  font-family: var(--mono);
  font-size: .9rem;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #111522;
  margin-bottom: .75rem;
}
.status-line.ok{ border-color: #244b3a; background: #0f1a16; color: var(--ok); }
.status-line.warn{ border-color: #4b3e24; background: #1a160f; color: var(--warn); }
.status-line.err{ border-color: #4b2424; background: #1a0f0f; color: var(--err); }

.article-list{
  list-style: decimal-leading-zero inside;
  display: grid;
  gap: .75rem;
  padding-left: 0;
  margin: 0;
}
.article{
  border: 1px solid var(--border);
  background: #111524;
  border-radius: 12px;
  padding: .9rem .95rem;
}
.article h3{
  margin: 0 0 .25rem;
  font-size: 1.05rem;
}
.meta{
  color: var(--muted);
  font-size: .85rem;
  margin-bottom: .35rem;
}
.article .content{
  white-space: pre-wrap;
  word-wrap: break-word;
}

code{ font-family: var(--mono); }