:root {
  --bg: #f7f7f8;
  --card: #ffffff;
  --muted: #666;
  --accent: #1f6feb;
  --border: #e5e5e5;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto;
  background: var(--bg);
  margin: 0;
  padding: 32px;
  color: #111;
}

.container {
  max-width: 820px;
  margin: 0 auto;
  background: var(--card);
  padding: 25px 26px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(20,20,30,0.05);
  border: 1px solid var(--border);
}

h1{font-size:20px;margin:0}

p.lead{margin:4px 0 0;color:var(--muted)}

h2 {
  margin: 0 0 16px 0;
  font-size: 22px;
  text-align: center;
}

label {
  font-weight: 600;
  margin-top: 18px;
  display: block;
}

.row{display:flex;gap:12px;flex-wrap:wrap}

.time-selectors {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-top: 10px;
}


.time-selectors div {
text-align: center;
}




.time-selectors span {
font-size: 0.85em;
color: var(--muted);
}


.time-selectors input {
margin-top: 6px;
}

input[type="text"],
input[type="file"],
textarea,
input[type="number"] {
width: 100%;
margin-top: 6px;
padding: 10px;
border-radius: 8px;
border: 1px solid var(--border);
background: #fafafa;
font-size: 14px;
box-sizing: border-box;
}

pre{background:#0b1220;color:#e6edf3;padding:14px;border-radius:8px;overflow:auto;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; font-size:13px}
button {
  margin-top: 10px;
  padding: 10px 12px;
  width: 100%;
  font-size: 15px;
  border-radius: 8px;
  font-weight:bold;
  border: 1px solid var(--border);
  background: #fafafa;
  box-sizing: border-box;
}

button {
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
  transition: 0.15s ease;
}

button:hover {
  opacity: 0.9;
}

.status {
  margin: 8px 0 14px 0;
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
}

.loading {
color: var(--accent);
display: none;
}


a {
color: var(--accent);
font-weight: 600;
}

.section {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

footer {
text-align: left;
margin-top: 20px;
color: var(--muted);
font-size: 16px;
}

ul{margin:8px 0 0;padding-left:20px}



.wrap{max-width:900px; margin:0 auto}
header{display:flex;align-items:center;gap:12px;margin-bottom:18px}

.small{font-size:13px}
.muted{color:var(--muted)}

.code-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}