:root{
  --bg:#0e0e0e;           /* чёрный фон */
  --card:#121212;         /* карточки */
  --text:#fafafa;         /* белый текст */
  --muted:#9a9a9a;
  --accent:#ff7a00;       /* оранжевый */
  --accent-2:#ff9a3d;
  --border:#1f1f1f;
  --ring:rgba(255,122,0,.25);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:linear-gradient(180deg,#0b0b0b,#111);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.page-head{
  max-width:1100px;
  margin:24px auto 8px;
  padding:0 16px;
}
.page-head h1{
  margin:0 0 6px;
  font-weight:800;
  letter-spacing:.2px;
  font-size: clamp(22px, 3.2vw, 32px);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
}
.muted{color:var(--muted); margin:0}

.container{
  max-width:1100px;
  margin: 12px auto 24px;
  padding: 0 16px;
}

.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* две колонки на десктопе */
  gap: 14px;
}
@media (max-width: 720px){
  .grid{ grid-template-columns: 1fr; }              /* одна колонка на телефоне */
}

.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: #242424;
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}

.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#131313,#101010);
}

.card-body{
  padding: 10px 14px 14px;
}

.cat{
  border:1px solid var(--border);
  border-radius:10px;
  margin:10px 0;
  overflow:hidden;
}
.cat[open]{
  border-color:#262626;
}
.cat > summary{
  list-style:none;
  cursor:pointer;
  padding:12px 12px;
  background: #141414;
  user-select:none;
  position: relative;
  padding-right: 28px; /* место для стрелки */
}
.cat > summary::-webkit-details-marker{display:none}

.cat > summary::after {
  content: "▶"; /* стрелка вправо */
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.2s ease;
  font-size: 14px;
  color: var(--accent);
}

.cat[open] > summary::after {
  transform: translateY(-50%) rotate(90deg);
}

.attrs{
  padding: 10px 12px 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px 12px;
}
@media (max-width: 560px){
  .attrs{ grid-template-columns: 1fr; }
}

/* чекбоксы и подписи */
.check{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size: 14px;
}
.card-head .check span{
  font-size: 15px;
}
.check input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  accent-color: var(--accent);
  cursor:pointer;
}
.check span{
  line-height:1.2;
}

.card > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 28px;
}
.card > summary::-webkit-details-marker { display: none; }

.card > summary::after {
  content: "▶";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .2s ease;
  color: var(--accent);
}
.card[open] > summary::after {
  transform: translateY(-50%) rotate(90deg);
}



/* кнопки */
.btn{
  appearance:none;
  border:none;
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.btn:active{ transform: translateY(1px); }

.primary{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#101010;
  box-shadow: 0 8px 20px var(--ring);
}
.primary:hover{
  filter: brightness(1.04);
}

/* футер */
.footer{
  max-width:1100px;
  margin: 0 auto 28px;
  padding: 0 16px;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.result{
  color:var(--muted);
  font-size:14px;
}