*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Roboto",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  line-height:1.5;
  color:#111827;
  background:#fff;
}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

.page-header{border-bottom:2px solid #000}
.header-top{
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  align-items:end;
  padding:18px 16px 8px;
}
.title-1{font:700 24px/1.2 inherit;text-align:center}
.title-2{font:700 18px/1.2 inherit;text-align:center;margin-top:2px}
.subtitle{text-align:center;margin-top:8px}

/* фото */
.photo-wrap{
  width:150px;height:190px;border:2px solid #000;border-radius:8px;
  display:grid;place-items:center;overflow:hidden;background:#fff
}
.photo-wrap img{width:100%;height:100%;object-fit:cover}

/* верхні вкладки */
.top-nav{display:flex;flex-wrap:wrap;gap:12px;padding:10px 0 14px}
.top-nav .tab{
  min-width:150px;padding:10px 16px;border:2px solid #000;border-radius:18px;
  background:#fff;cursor:pointer;text-align:center;line-height:1.2
}
.top-nav .tab.active{background:#fff59b}

/* основна сітка */
.main-grid{
  display:grid;grid-template-columns:330px 1fr;gap:18px;padding:18px 16px 24px;
  border:2px solid #000;border-top:0
}

/* ліве меню (для обох ЛР) */
.side-menu{padding-top:8px}
.pill{
  width:100%;margin-bottom:12px;padding:12px 16px;border:2px solid #000;border-radius:999px;
  background:#fff;text-align:left;cursor:pointer
}
.pill.active{background:#f1f5f9}

/* контент */
.content{
  min-height:520px;padding:16px;border:2px solid #000;border-radius:8px;
  display:grid;align-content:start;background:#fff
}
.placeholder{margin:auto;font-weight:700}

/* типографіка та демо-елементи */
h2{margin:6px 0 12px}
h3{margin:12px 0 8px}
p{margin:6px 0}
ul,ol{margin:6px 0 10px 18px}
figure{margin:8px 0}
figcaption{font-size:14px;color:#6b7280}

pre.code{background:#0f172a;color:#e5e7eb;padding:12px;border-radius:8px;overflow:auto}
table.demo{width:100%;border-collapse:collapse;margin:10px 0}
table.demo th,table.demo td{border:1px solid #cbd5e1;padding:8px;text-align:left}
table.demo thead{background:#f3f4f6}

/* футер */
.footer{padding:10px 16px 24px;color:#6b7280}

/* кнопки-посилання */
.link-buttons{display:flex;flex-direction:column;gap:8px;max-width:420px;margin-top:8px}
.link-buttons .btn{display:block;padding:10px 12px;border:1px solid #ddd;border-radius:8px;text-decoration:none;color:inherit}


/* підменю в ЛР3 */
.sub-menu{
  margin-left: 12px;
  margin-top: 4px;
  display: none;              /* спочатку приховано */
}

.sub-menu.open{
  display: block;
}

.pill-sub{
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 16px;
}

.pill-parent{
  position: relative;
}

/* невеликий візуальний відступ, щоб було видно ієрархію */
.pill-sub + .pill-sub{
  margin-top: 6px;
}