/* HPMA – dark, calm, card-based. Plays nicely with jkliment.cz */
:root{
  --hpma-bg: rgba(10,14,22,.72);
  --hpma-card: rgba(18,24,36,.78);
  --hpma-card2: rgba(24,32,48,.72);
  --hpma-border: rgba(255,255,255,.08);
  --hpma-text: rgba(255,255,255,.92);
  --hpma-muted: rgba(255,255,255,.62);
  --hpma-accent: rgba(80,160,255,.95);
  --hpma-accent2: rgba(70,220,170,.95);
  --hpma-hot: rgba(255,90,90,.95);
  --hpma-radius: 16px;
  --hpma-shadow: 0 14px 40px rgba(0,0,0,.35);
}

.hpma-shell{
  color: var(--hpma-text);
  background: radial-gradient(1200px 600px at 20% 10%, rgba(80,160,255,.16), transparent 60%),
              radial-gradient(900px 480px at 80% 40%, rgba(70,220,170,.12), transparent 62%),
              var(--hpma-bg);
  border: 1px solid var(--hpma-border);
  border-radius: 22px;
  box-shadow: var(--hpma-shadow);
  overflow: hidden;
  min-height: 78vh;
}

.hpma-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  background: linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,0));
  border-bottom: 1px solid var(--hpma-border);
}

.hpma-brand{ display:flex; gap:12px; align-items:center;}
.hpma-logo{
  width:34px; height:34px; border-radius: 12px;
  background: conic-gradient(from 210deg, var(--hpma-accent), var(--hpma-accent2), var(--hpma-accent));
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
}
.hpma-title{ font-weight:800; letter-spacing:.5px; font-size: 1.05rem; line-height:1.1;}
.hpma-subtitle{ color: var(--hpma-muted); font-size:.82rem; }

.hpma-actions{display:flex; gap:10px; align-items:center;}
.hpma-iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width: 38px; height: 38px;
  border-radius: 14px;
  border: 1px solid var(--hpma-border);
  background: rgba(255,255,255,.04);
  color: var(--hpma-text);
  text-decoration:none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.hpma-iconbtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14);}

.hpma-tabs{
  display:none;
  padding: 10px 10px 0;
  gap:10px;
  background: rgba(0,0,0,.06);
  border-bottom: 1px solid var(--hpma-border);
}
.hpma-tab{
  flex: 1;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--hpma-border);
  background: rgba(255,255,255,.04);
  color: var(--hpma-muted);
  font-weight: 700;
}
.hpma-tab.is-active{ color: var(--hpma-text); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }

.hpma-grid{
  display:grid;
  grid-template-columns: 320px 1fr 360px;
  gap: 0;
  min-height: calc(78vh - 56px);
}

.hpma-panel{
  position:relative;
  background: rgba(0,0,0,.08);
  border-right: 1px solid var(--hpma-border);
  overflow: hidden;
}
.hpma-panel--detail{ border-right: none; }
.hpma-panelhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--hpma-border);
}
.hpma-h{ font-weight: 800; letter-spacing:.2px;}
.hpma-mini{
  border: 1px solid var(--hpma-border);
  background: rgba(255,255,255,.04);
  color: var(--hpma-text);
  border-radius: 14px;
  padding: 8px 10px;
  font-weight: 800;
  cursor:pointer;
}
.hpma-mini:hover{ background: rgba(255,255,255,.07); }

.hpma-search{ padding: 12px 14px 10px; }
.hpma-search input{
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--hpma-border);
  background: rgba(0,0,0,.18);
  color: var(--hpma-text);
  outline:none;
}
.hpma-search input::placeholder{ color: rgba(255,255,255,.45); }

.hpma-filters{
  padding: 0 14px 12px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap: wrap;
}
.hpma-chip{
  border: 1px solid var(--hpma-border);
  background: rgba(255,255,255,.03);
  color: var(--hpma-muted);
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 800;
  font-size: .82rem;
  cursor:pointer;
}
.hpma-chip.is-on{
  background: rgba(80,160,255,.16);
  border-color: rgba(80,160,255,.35);
  color: rgba(235,245,255,.95);
}
.hpma-spacer{ flex: 1; }

.hpma-tree{
  padding: 6px 6px 12px;
  overflow:auto;
  height: calc(100% - 160px);
}
.hpma-node{
  display:flex; align-items:center; gap:10px;
  padding: 10px 10px;
  margin: 6px 8px;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor:pointer;
  user-select:none;
}
.hpma-node:hover{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06); }
.hpma-node.is-active{ background: rgba(80,160,255,.14); border-color: rgba(80,160,255,.30); }
.hpma-node .dot{
  width:10px; height:10px; border-radius: 4px;
  background: rgba(255,255,255,.25);
}
.hpma-node .title{ font-weight: 800; }
.hpma-node .meta{ margin-left:auto; display:flex; gap:8px; align-items:center; color: var(--hpma-muted); font-size:.82rem;}
.hpma-badge{
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 900;
  border: 1px solid var(--hpma-border);
  background: rgba(255,255,255,.03);
}
.hpma-badge.hot{ border-color: rgba(255,90,90,.35); background: rgba(255,90,90,.14); color: rgba(255,235,235,.95); }
.hpma-badge.draft{ border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: rgba(255,255,255,.70); }
.hpma-badge.active{ border-color: rgba(70,220,170,.28); background: rgba(70,220,170,.12); color: rgba(220,255,245,.95); }

.hpma-muted{ color: var(--hpma-muted); padding: 10px 14px; }

.hpma-canvas{
  position:relative;
  height: calc(100% - 52px);
  overflow:auto;
  padding: 18px;
}
.hpma-map{
  transform-origin: 0 0;
}
.hpma-maprow{
  display:flex;
  justify-content:center;
  margin: 16px 0;
}
.hpma-card{
  position:relative;
  min-width: 220px;
  max-width: 520px;
  border-radius: 18px;
  border: 1px solid var(--hpma-border);
  background: rgba(255,255,255,.04);
  padding: 14px 14px;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.hpma-card:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.hpma-card.is-active{ border-color: rgba(80,160,255,.45); background: rgba(80,160,255,.14); }
.hpma-card .kicker{ color: rgba(255,255,255,.65); font-weight: 800; font-size: .78rem; margin-bottom: 6px;}
.hpma-card .name{ font-size: 1.05rem; font-weight: 900; letter-spacing:.2px;}
.hpma-card .sub{ margin-top: 8px; color: rgba(255,255,255,.70); font-size:.9rem; line-height:1.35; }
.hpma-conn{
  height: 22px;
  display:flex;
  justify-content:center;
}
.hpma-conn:before{
  content:"";
  width:2px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
}

.hpma-zoom{
  position:absolute;
  right: 14px;
  bottom: 14px;
  display:flex;
  gap:10px;
}
.hpma-zoombtn{
  width: 40px; height: 40px;
  border-radius: 16px;
  border: 1px solid var(--hpma-border);
  background: rgba(0,0,0,.18);
  color: var(--hpma-text);
  font-weight: 900;
  cursor:pointer;
}
.hpma-zoombtn:hover{ background: rgba(255,255,255,.06); }

.hpma-overview{
  position:absolute;
  left: 14px;
  bottom: 14px;
  width: 240px;
  border-radius: 18px;
  border: 1px solid var(--hpma-border);
  background: rgba(0,0,0,.22);
  padding: 10px 10px 12px;
  display:none;
}
.hpma-overview-title{ font-weight: 900; color: rgba(255,255,255,.75); font-size:.78rem; margin-bottom: 8px;}
.hpma-overview-mini{ display:flex; flex-direction:column; gap:6px;}
.hpma-miniitem{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 8px 10px;
  font-weight: 900;
  font-size: .84rem;
  color: rgba(255,255,255,.86);
}

.hpma-detail{
  height: calc(100% - 52px);
  overflow:auto;
  padding: 14px;
}
.hpma-detail h2{ margin: 0 0 6px; font-size: 1.25rem; }
.hpma-detail .meta{ color: var(--hpma-muted); font-weight: 700; margin-bottom: 12px; }
.hpma-detail .p{ color: rgba(255,255,255,.80); line-height: 1.55; margin: 10px 0 14px; }
.hpma-section{
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 12px;
}
.hpma-section .sh{ font-weight: 900; margin-bottom: 8px; display:flex; align-items:center; gap:10px;}
.hpma-link{
  display:flex; align-items:center; gap:10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(235,245,255,.92);
  text-decoration:none;
  font-weight: 800;
  margin: 8px 0;
}
.hpma-link:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.hpma-grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.hpma-kv{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 10px 10px;
}
.hpma-kv .k{ color: var(--hpma-muted); font-weight: 800; font-size:.78rem; }
.hpma-kv .v{ font-weight: 900; margin-top: 4px; }

.hpma-footnote{ padding: 10px 14px 16px; color: rgba(255,255,255,.52); font-size:.82rem; border-top: 1px solid rgba(255,255,255,.06); }

/* Responsive */
@media (max-width: 1100px){
  .hpma-grid{ grid-template-columns: 300px 1fr 0; }
  .hpma-panel--detail{ display:none; }
  .hpma-overview{ display:block; }
}
@media (max-width: 840px){
  .hpma-tabs{ display:flex; }
  .hpma-grid{ grid-template-columns: 1fr; }
  .hpma-panel{ border-right:none; display:none; height: calc(78vh - 56px - 52px); }
  .hpma-panel.is-active{ display:block; }
  .hpma-overview{ display:block; width: calc(100% - 28px); }
}