/* ===========================================================
   FinVize — Nápověda / „vesmírná" navigace (panel-help)
   Samostatný stylesheet. Vše scopováno pod #panel-help.
   =========================================================== */

#panel-help { padding-bottom: 1rem; }

/* ---- Stage (vesmír) ---- */
.help-space{
  position:relative; width:100%;
  height:clamp(540px, 72vh, 820px);
  border-radius:var(--radius-lg,16px);
  overflow:hidden;
  background:
    radial-gradient(1200px 700px at 78% 12%, rgba(74,123,255,0.16), transparent 60%),
    radial-gradient(900px 600px at 12% 88%, rgba(201,168,76,0.10), transparent 60%),
    radial-gradient(700px 500px at 50% 50%, rgba(56,189,248,0.08), transparent 65%),
    linear-gradient(160deg, #03060f 0%, #060b22 45%, #0a1030 100%);
  border:1px solid var(--border,#2a2a4a);
  box-shadow: inset 0 0 120px rgba(0,0,0,0.6);
  perspective: 1200px;
  user-select:none;
}

/* ---- hvězdné pole ---- */
.help-stars,.help-stars2{ position:absolute; inset:0; pointer-events:none; }
.help-stars span,.help-stars2 span{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:#fff; opacity:.7;
  box-shadow:0 0 4px rgba(255,255,255,.7);
  animation: hlpTwinkle 3.6s ease-in-out infinite;
}
.help-stars2 span{ width:1px; height:1px; opacity:.45; animation-duration:6s; }
@keyframes hlpTwinkle{ 0%,100%{opacity:.25} 50%{opacity:.95} }

.help-nebula{
  position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none;
  opacity:.5; animation: hlpDrift 26s ease-in-out infinite alternate;
}
@keyframes hlpDrift{ from{transform:translate(0,0) scale(1)} to{transform:translate(26px,-22px) scale(1.12)} }

/* ===========  GALAXIE (přehled témat)  =========== */
.help-galaxy{
  position:absolute; inset:0;
  transition: transform .65s cubic-bezier(.2,.7,.2,1), opacity .5s ease, filter .5s ease;
  transform-origin: var(--warp-x,50%) var(--warp-y,50%);
}
.help-space.zoomed .help-galaxy{ transform:scale(3.4); opacity:0; filter:blur(8px); pointer-events:none; }

.help-galaxy-hint{
  position:absolute; left:50%; top:18px; transform:translateX(-50%);
  font-size:.78rem; color:var(--text-secondary); letter-spacing:.04em;
  background:rgba(6,11,31,.55); padding:.35rem .8rem; border-radius:999px;
  border:1px solid var(--border-glass,rgba(255,255,255,.07)); backdrop-filter:blur(4px);
  z-index:5; text-align:center;
}

/* orbitní kružnice (dekorace) */
.help-orbit{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border:1px dashed rgba(120,150,255,.14); border-radius:50%; pointer-events:none;
}

/* planeta = téma */
.help-planet{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  cursor:pointer; z-index:3;
  transition: transform .3s ease, filter .3s ease;
  animation: hlpFloat var(--float,7s) ease-in-out infinite;
}
@keyframes hlpFloat{ 0%,100%{margin-top:0} 50%{margin-top:-10px} }
.help-planet:hover{ transform:translate(-50%,-50%) scale(1.07); z-index:6; }

.help-planet-orb{
  position:relative; width:var(--orb,108px); height:var(--orb,108px);
  border-radius:18px; overflow:hidden;
  background:var(--bg-card-solid,#10163c);
  border:1px solid var(--border,#2a2a4a);
  box-shadow:0 10px 34px rgba(0,0,0,.5), 0 0 0 6px rgba(255,255,255,.02);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.help-planet:hover .help-planet-orb{
  border-color:var(--tint,#4a7bff);
  box-shadow:0 14px 46px rgba(0,0,0,.6), 0 0 30px -4px var(--tint,#4a7bff);
}
.help-planet-glow{
  position:absolute; inset:-40%; border-radius:50%;
  background:radial-gradient(circle, var(--tint,#4a7bff) 0%, transparent 62%);
  opacity:.16; pointer-events:none;
}
.help-planet-label{
  font-size:.82rem; font-weight:600; color:var(--text-primary);
  text-align:center; max-width:130px; line-height:1.2;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.help-planet-tag{
  font-size:.64rem; color:var(--tint,#6b95ff); text-transform:uppercase;
  letter-spacing:.12em; font-weight:700;
}

/* ===========  DETAIL TÉMATU  =========== */
.help-detail{
  position:absolute; inset:0; display:none;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap:1.4rem; padding:1.3rem 1.4rem 1.4rem;
  opacity:0; transform:scale(.92);
  transition: opacity .5s ease .15s, transform .5s cubic-bezier(.2,.7,.2,1) .15s;
  overflow:auto;
}
.help-space.zoomed .help-detail{ display:grid; }
.help-space.zoomed.detail-in .help-detail{ opacity:1; transform:scale(1); }

.help-back{
  position:absolute; left:1.1rem; top:1.05rem; z-index:8;
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(10,16,48,.7); color:var(--text-primary);
  border:1px solid var(--border,#2a2a4a); border-radius:999px;
  padding:.5rem .95rem; font-size:.82rem; font-weight:600; cursor:pointer;
  backdrop-filter:blur(6px); transition:border-color .2s, background .2s;
}
.help-back:hover{ border-color:var(--accent-gold,#c9a84c); background:rgba(16,24,64,.85); }

/* --- levý sloupec: velký „screenshot" + depth meter --- */
.help-stage-left{ display:flex; flex-direction:column; gap:.9rem; min-width:0; padding-top:2.6rem; }
.help-screenwrap{
  position:relative; border-radius:14px; overflow:hidden;
  border:1px solid var(--border,#2a2a4a);
  background:linear-gradient(160deg,#070d24,#0b1338);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  flex:1; min-height:240px;
  display:flex; align-items:stretch;
}
.help-screen-inner{ flex:1; padding:14px; min-width:0; }
.help-screen-inner.swap{ animation: hlpScreenFade .45s ease; }
@keyframes hlpScreenFade{ from{opacity:0; transform:translateY(8px) scale(.985)} to{opacity:1; transform:none} }
.help-screen-badge{
  position:absolute; right:10px; top:10px; z-index:2;
  font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-secondary); background:rgba(6,11,31,.7);
  border:1px solid var(--border-glass,rgba(255,255,255,.07));
  padding:.25rem .55rem; border-radius:999px; backdrop-filter:blur(4px);
}

/* --- pravý sloupec: obsah s úrovněmi --- */
.help-stage-right{ display:flex; flex-direction:column; min-width:0; padding-top:.2rem; }
.help-topic-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:.2rem; }
.help-topic-ic{
  width:44px; height:44px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  background:rgba(74,123,255,.12); border:1px solid var(--tint,#4a7bff);
}
.help-topic-title{ font-size:1.25rem; font-weight:700; color:var(--text-primary); line-height:1.15; }
.help-topic-sub{ font-size:.76rem; color:var(--tint,#6b95ff); text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.help-topic-where{
  font-size:.8rem; color:var(--text-secondary); margin:.7rem 0 1rem;
  background:var(--bg-secondary,#0a1030); border:1px solid var(--border,#2a2a4a);
  border-left:3px solid var(--tint,#4a7bff); border-radius:8px; padding:.6rem .75rem;
}

/* depth stepper */
.help-depths{ display:flex; gap:.5rem; margin-bottom:1rem; }
.help-depth-btn{
  flex:1; cursor:pointer; text-align:left;
  background:var(--bg-secondary,#0a1030); border:1px solid var(--border,#2a2a4a);
  border-radius:10px; padding:.6rem .7rem; transition:all .22s ease; color:var(--text-secondary);
}
.help-depth-btn:hover{ border-color:var(--tint,#4a7bff); }
.help-depth-btn.active{
  border-color:var(--tint,#4a7bff); color:var(--text-primary);
  background:linear-gradient(160deg, rgba(74,123,255,.14), rgba(74,123,255,.04));
  box-shadow:0 0 20px -8px var(--tint,#4a7bff);
}
.help-depth-num{ display:flex; align-items:center; gap:.4rem; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.help-depth-dot{ width:18px;height:18px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:.7rem; background:rgba(255,255,255,.06); }
.help-depth-btn.active .help-depth-dot{ background:var(--tint,#4a7bff); color:#fff; }
.help-depth-name{ font-size:.86rem; font-weight:600; margin-top:.25rem; color:inherit; }

/* obsah úrovně */
.help-level-body{
  font-size:.92rem; line-height:1.62; color:var(--text-secondary);
  overflow:auto; padding-right:.4rem; flex:1;
  animation: hlpFade .4s ease;
}
@keyframes hlpFade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.help-level-body p{ margin:0 0 .8rem; }
.help-level-body strong{ color:var(--text-primary); }
.help-level-body .help-cfa-tag{
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.1em;
  color:var(--accent-gold,#c9a84c); border:1px solid var(--border-light,rgba(201,168,76,.3));
  border-radius:999px; padding:.15rem .5rem; margin-bottom:.7rem; text-transform:uppercase;
}
.help-level-body ul{ margin:.2rem 0 .9rem; padding-left:1.1rem; }
.help-level-body li{ margin-bottom:.35rem; }
.help-formula{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.82rem;
  background:var(--bg-secondary,#0a1030); border:1px solid var(--border,#2a2a4a);
  border-radius:8px; padding:.55rem .7rem; color:var(--accent-cyan,#38bdf8); margin:.2rem 0 .9rem;
  overflow-x:auto; white-space:nowrap;
}

/* ===========  MOCK-UP náhledy obrazovek  =========== */
.mk{ display:flex; flex-direction:column; gap:8px; height:100%; font-size:10px; color:var(--text-secondary); }
.mk-bar{ display:flex; gap:6px; }
.mk-tile{ flex:1; background:var(--bg-card-solid,#10163c); border:1px solid var(--border,#2a2a4a); border-radius:8px; padding:7px 8px; }
.mk-tile .l{ font-size:8px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.mk-tile .v{ font-size:13px; font-weight:700; color:var(--text-primary); margin-top:3px; }
.mk-tile .v.pos{ color:var(--accent-green,#4ade80);} .mk-tile .v.neg{ color:var(--accent-red,#f87171);} .mk-tile .v.gold{ color:var(--accent-gold,#c9a84c);}
.mk-card{ background:var(--bg-card-solid,#10163c); border:1px solid var(--border,#2a2a4a); border-radius:8px; padding:8px 9px; }
.mk-h{ font-size:9px; font-weight:700; color:var(--text-primary); margin-bottom:6px; display:flex; justify-content:space-between; }
.mk-row{ display:flex; align-items:center; gap:6px; margin:4px 0; }
.mk-dot{ width:8px;height:8px;border-radius:3px; flex:none; }
.mk-row .nm{ flex:1; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-row .amt{ font-weight:600; color:var(--text-primary); }
.mk-track{ flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden; }
.mk-fill{ height:100%; border-radius:3px; }
.mk-badge{ font-size:8px; padding:1px 5px; border-radius:999px; border:1px solid var(--border,#2a2a4a); color:var(--text-secondary); }
.mk-grow{ flex:1; }
.mk svg{ display:block; width:100%; }

/* ===========  Responsivita  =========== */
@media (max-width: 860px){
  .help-detail{ grid-template-columns:1fr; overflow:auto; }
  .help-stage-left{ padding-top:2.8rem; }
  .help-screenwrap{ min-height:200px; }
  .help-depths{ flex-direction:column; }
  .help-planet-orb{ --orb:84px; }
}

/* ---- pomocné prvky uvnitř mock-up obrazovek (úrovně detailu) ---- */
.mk-titlebar{ display:flex; align-items:center; gap:6px; font-size:9.5px; font-weight:700;
  color:var(--text-primary,#edf0ff); padding-bottom:6px; margin-bottom:7px;
  border-bottom:1px solid var(--border,#2a2a4a); letter-spacing:.02em; }
.mk-titlebar .mk-chip{ margin-left:auto; }
.mk-chip{ font-size:8px; font-weight:600; color:var(--text-secondary,#a0a8d0);
  background:var(--bg-secondary,#0a1030); border:1px solid var(--border,#2a2a4a);
  border-radius:999px; padding:2px 7px; }
.mk-anno{ font-size:8.5px; font-weight:600; color:#0a0f24; background:var(--accent-gold-light,#e0c675);
  border-radius:6px; padding:3px 7px; margin-bottom:6px; display:inline-block; }
.mk-cap{ font-size:8px; color:var(--text-muted,#6770a0); margin-top:6px; text-align:center; }
.mk-note{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:8.5px; line-height:1.5;
  color:var(--accent-cyan,#38bdf8); background:rgba(56,189,248,.07);
  border:1px solid rgba(56,189,248,.22); border-radius:6px; padding:5px 7px; margin:5px 0; }
.mk-hl{ box-shadow:0 0 0 1.5px var(--accent-gold,#c9a84c), 0 0 14px -2px var(--accent-gold,#c9a84c); }
.mk-eq{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin:4px 0 8px; }
.mk-eq-i{ flex:1; min-width:54px; text-align:center; background:var(--bg-card-solid,#10163c);
  border:1px solid var(--border,#2a2a4a); border-radius:6px; padding:5px 4px;
  font-size:10px; font-weight:700; color:var(--text-primary,#edf0ff); }
.mk-eq span{ font-size:12px; color:var(--text-muted,#6770a0); font-weight:700; }
.mk-arrow{ text-align:center; color:var(--text-muted,#6770a0); font-size:11px; margin:2px 0; }
.mk-split{ display:flex; gap:6px; }
.mk-split > *{ flex:1; }