/* Мягкое минималистичное оформление: скруглённые углы, неглубокие тени, спокойные ночные тона. */

:root{
  --bg:#eef0f6;
  --card:#ffffff;
  --fg:#262b3a;
  --muted:#6b7288;
  --line:#e3e6ef;
  --accent:#5568b0;
  --accent-soft:#e8ebf7;
  --link:#4558a8;
  --visited:#7a5aa8;
  --warn:#b0483c;
  --shadow:0 1px 2px rgba(40,50,90,.06), 0 8px 24px rgba(40,50,90,.08);
  --shadow-sm:0 1px 2px rgba(40,50,90,.08), 0 2px 8px rgba(40,50,90,.06);
  --r:18px;
  --ui:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#141720;
    --card:#1d2130; --fg:#e4e7f2; --muted:#9aa1b8; --line:#2a2f42;
    --accent:#9aabee; --accent-soft:#272d45; --link:#9fb0f2; --visited:#c3a9f0; --warn:#ff9a8f;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  }
}

*{ box-sizing:border-box; }
html{ background:var(--bg); }
body{
  max-width:55em;
  margin:0 auto;
  padding:1.2em 1em 3em;
  background:var(--bg);
  color:var(--fg);
  font:17px/1.65 var(--ui);
}

a:link{ color:var(--link); }
a:visited{ color:var(--visited); }

/* меню — «таблетки» */
nav{ display:flex; gap:.5em; padding:.2em 0 1em; font-size:14px; }
nav a{
  padding:.35em .95em;
  border-radius:999px;
  background:var(--card);
  box-shadow:var(--shadow-sm);
  text-decoration:none;
}
nav a:hover{ background:var(--accent-soft); }

/* основная карточка */
main{
  padding:1.6em 1.6em 1.8em;
  background:var(--card);
  border-radius:calc(var(--r) + 6px);
  box-shadow:var(--shadow);
}
h1{ margin:0; font-size:1.9em; line-height:1.2; font-weight:500; letter-spacing:-.01em; }
h1 strong{ font-weight:700; color:var(--accent); }
.sub{ margin:.35em 0 0; color:var(--muted); }
h2{ margin:2em 0 .6em; font-size:1.25em; font-weight:600; }
hr{ border:0; border-top:1px solid var(--line); margin:1.6em 0; }
p{ margin:.8em 0; }
blockquote{
  margin:1em 0;
  padding:.8em 1.1em;
  background:var(--accent-soft);
  border-radius:14px;
}
blockquote p{ margin:.3em 0; }
.src{ font-size:.82em; color:var(--muted); }

/* калькулятор */
.calc{
  margin:1.5em 0;
  padding:1em 1.2em 1.3em;
  border:0;
  background:var(--accent-soft);
  border-radius:var(--r);
}
.calc legend{
  padding:.15em .8em;
  font-size:.82em; font-weight:600;
  color:var(--accent);
  background:var(--card);
  border-radius:999px;
  box-shadow:var(--shadow-sm);
}
.calc-table{ border-collapse:collapse; margin:.3em 0 0; }
.calc-table td{ padding:.35em .9em .35em 0; }
.calc label{ font-size:.95em; white-space:nowrap; }
.calc input[type="time"]{
  font:inherit; font-size:1em;
  padding:.4em .7em;
  color:var(--fg); background:var(--card);
  border:1px solid transparent;
  border-radius:12px;
  box-shadow:var(--shadow-sm);
}
.calc input[type="time"]:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.calc button{
  margin-top:.7em;
  font:600 .9em var(--ui);
  padding:.6em 1.4em;
  color:#fff; background:var(--accent);
  border: outset 2px #eee; border-radius:999px;
  box-shadow:0 2px 6px rgba(85,104,176,.35);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
@media (prefers-color-scheme:dark){ .calc button{ color:#14172a; } }
.calc button:hover{ filter:brightness(1.06); }
.calc button:active{ transform:translateY(1px); box-shadow:0 1px 3px rgba(85,104,176,.35); }
.calc button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.result{
  margin-top:1.1em;
  padding:.9em 1.1em;
  background:var(--card);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
}
#lastthird{ font-size:1em; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
#midnight{ font-weight:600; }
.is-hidden{ display:none; }

/* вопросы и ответы — отдельные карточки */
details{
  margin:.7em 0;
  background:var(--card);
  border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
}
summary{
  display:flex; align-items:center; gap:.7em;
  padding:.85em 1.1em;
  cursor:pointer;
  font-weight:600;
  list-style:none;
  border-radius:var(--r);
}
summary::-webkit-details-marker{ display:none; }
summary::before{
  content:"+";
  display:inline-grid; place-items:center;
  flex:0 0 1.5em; width:1.5em; height:1.5em;
  border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  font-weight:600; line-height:1;
}
details[open] > summary::before{ content:"\2212"; }
summary:hover{ background:var(--accent-soft); }
summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.d-body{ padding:.2em 1.2em 1.1em 1.2em; }
.d-body h3{ margin:1em 0 .1em; font-size:1em; font-weight:600; color:var(--accent); }
.d-body p{ margin:.2em 0 .5em; }

.lbl{ margin:1.2em 0 .2em; font-size:.8em; color:var(--muted); }
.arabic{
  margin:.2em 0 .6em;
  padding:.4em 1em;
  background:var(--accent-soft);
  border-radius:14px;
  text-align:right;
  font-family:"Traditional Arabic","Scheherazade New","Amiri","Noto Naskh Arabic","Times New Roman",serif;
  font-size:1.6em;
  line-height:2;
}
.warn{ color:var(--warn); }

/* плавное раскрытие (если браузер умеет; иначе мгновенно) */
:root{ interpolate-size:allow-keywords; }
details::details-content{
  block-size:0; overflow:hidden;
  transition:block-size .3s ease, content-visibility .3s allow-discrete;
}
details[open]::details-content{ block-size:auto; }
@media (prefers-reduced-motion:reduce){
  details::details-content{ transition:none; }
  .calc button{ transition:none; }
}

/* подвал */
footer{
  margin-top:1.8em;
  text-align:center;
  font-size:13px; color:var(--muted);
}
footer p{ margin:.2em 0; }
footer a:link, footer a:visited{ color:var(--muted); }

@media (max-width:480px){
  body{ font-size:16px; padding:.8em .6em 2.5em; }
  main{ padding:1.2em 1em 1.4em; }
  h1{ font-size:1.5em; }
  .calc{ padding:.9em .9em 1.1em; }
  .calc-table, .calc-table tbody, .calc-table tr, .calc-table td{ display:block; }
  .calc-table td{ padding:.2em 0; }
}