/* Палитра и типографика skinaura.am: Tenor Sans, графит #333130,
   пыльно-розовый акцент #e58a82, белый фон, прямые углы */
:root{
  --bg:#ffffff; --ink:#333130; --muted:#8a827d;
  --accent:#e58a82; --accent-dark:#d1746c; --band:#f7e4e1; --band-deep:#f2cfca;
  --border:#eadcd9; --danger:#b8443a;
}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink);
  font:16px/1.65 'Tenor Sans','Trebuchet MS',sans-serif;
  margin:0; padding:2.5rem 1.25rem 4rem;}
main{max-width:920px; margin:0 auto; display:flex; flex-direction:column; gap:2rem}
h1,h2,h3{font-weight:400; line-height:1.25; text-wrap:balance; margin:0}
h1{font-size:2rem; letter-spacing:.04em; text-transform:uppercase}
h1 .brand-a{color:var(--accent)}
h2{font-size:1.4rem}
h3{font-size:1.25rem}
.sub{color:var(--muted); margin:.5rem 0 0}
header{text-align:center; border-bottom:1px solid var(--band-deep); padding-bottom:1.5rem}

.settings{background:var(--band); padding:1.4rem 1.6rem;
  display:flex; flex-direction:column; gap:1.1rem}
.fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem}
.field{display:flex; flex-direction:column; gap:.35rem}
.field input,.field select{margin-top:auto}
.field label{font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink)}
input,select{background:var(--bg); color:var(--ink); border:1px solid var(--border);
  border-radius:0; padding:.55rem .75rem; font:inherit; width:100%}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.hint{font-size:.84rem; color:var(--muted); margin:0}
.settings .hint{color:#7c6f6b}

button{font:inherit; border:none; border-radius:0; cursor:pointer;
  padding:.6rem 1.4rem; background:var(--accent); color:#fff; letter-spacing:.03em}
button:hover{background:var(--accent-dark)}
button:disabled{opacity:.55; cursor:default}
button.ghost{background:transparent; color:var(--accent);
  border:1px solid var(--accent)}
button.ghost:hover{background:var(--band)}

.cat{border:1px solid var(--band-deep); padding:1.2rem 1.5rem;
  display:flex; flex-direction:column; gap:.9rem}
.cat-head{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.cat-head h3{flex:1}
.count{color:var(--accent)}
.titles{display:flex; flex-direction:column; gap:.6rem}
.trow{background:#fdf8f7; border:1px solid var(--border); padding:.75rem 1rem;
  display:flex; flex-direction:column; gap:.6rem}
.trow-head{display:flex; align-items:center; gap:.8rem}
.trow-head .t{flex:1}
.trow-head button{padding:.4rem 1rem; font-size:.9rem}
.article{border-top:1px solid var(--band-deep); padding-top:.8rem;
  display:flex; flex-direction:column; gap:.55rem}
.article p{margin:0; max-width:65ch}
.article h4{margin:.5rem 0 0; font-size:.8rem; font-weight:400; color:var(--accent);
  text-transform:uppercase; letter-spacing:.12em}
.article ul{margin:.2rem 0 0; padding-left:1.1rem; font-size:.92rem}
.article a{color:var(--accent-dark)}
.err{color:var(--danger); font-size:.88rem; margin:0}
.warn{color:var(--muted); font-size:.85rem; margin:0}
.spin{display:inline-block; width:1em; height:1em; border:2px solid #fff6;
  border-top-color:#fff; border-radius:50%; animation:sp 1s linear infinite;
  vertical-align:-.15em}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .spin{animation:none} }
footer{color:var(--muted); font-size:.85rem; border-top:1px solid var(--band-deep); padding-top:1rem}
.toolbar{display:flex; gap:.8rem; align-items:center; flex-wrap:wrap}

/* Навигация в шапке */
.topnav{display:flex; gap:1.8rem; justify-content:center; margin-top:1.1rem}
.topnav a{color:var(--ink); text-decoration:none; text-transform:uppercase;
  letter-spacing:.14em; font-size:.82rem; padding-bottom:.25rem;
  border-bottom:2px solid transparent}
.topnav a:hover{color:var(--accent-dark)}
.topnav a.active{color:var(--accent); border-bottom-color:var(--accent)}

/* История запросов */
.entry{border:1px solid var(--band-deep); padding:1rem 1.3rem;
  display:flex; flex-direction:column; gap:.6rem}
.entry-head{display:flex; gap:.8rem; align-items:center; flex-wrap:wrap}
.tag{background:var(--band); color:var(--accent-dark); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.12em; padding:.25rem .6rem}
.entry-head .meta{color:var(--muted); font-size:.85rem}
.entry-head .t{flex:1}
.done-mark{color:var(--muted); font-size:.85rem; letter-spacing:.03em}
details.article-box{border:1px solid var(--border); background:#fdf8f7; padding:.6rem .9rem}
details.article-box summary{cursor:pointer; color:var(--accent-dark)}
details.article-box .article{border-top:none; padding-top:.3rem}
.empty{color:var(--muted)}