/* Asztroláb – felület
   Kéttémás arculat: nappali (meleg elefántcsont + indigó + arany) és
   éjszakai (mélykék égbolt + levendula + arany). A fejléc mindkét témában
   éjszakai égbolt — ez a márka állandó eleme. */

:root{
  --bg:#f4f2ea; --bg2:#fffefa; --ink:#232032; --muted:#6e6980;
  --line:#e3dfd2; --accent:#544694; --accent2:#a9832c; --accent-soft:#eeebf7;
  --ok:#47825a; --warn:#a95f1c;
  --shadow:0 1px 2px rgba(35,32,60,.04),0 10px 30px rgba(35,32,60,.07);
  --radius:16px;
  --night1:#10132a; --night2:#1d2145; --gold:#d8b95e; --starink:#eceafb;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Cambria,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d0f1d; --bg2:#151830; --ink:#e8e6f2; --muted:#9b97b2;
    --line:#262a49; --accent:#a89ae0; --accent2:#d8b95e; --accent-soft:#1e2140;
    --ok:#6fae83; --warn:#d3924e;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 34px rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}

/* ---- fejléc: éjszakai égbolt, mindkét témában ---- */
.topbar{
  position:relative; overflow:hidden; color:var(--starink);
  background:
    radial-gradient(1.6px 1.6px at 12% 28%, rgba(236,234,251,.9) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 26% 68%, rgba(236,234,251,.65) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 38% 22%, rgba(216,185,94,.85) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 49% 58%, rgba(236,234,251,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 61% 30%, rgba(236,234,251,.8) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 72% 74%, rgba(236,234,251,.6) 50%, transparent 51%),
    radial-gradient(1.9px 1.9px at 84% 36%, rgba(236,234,251,.85) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 93% 62%, rgba(216,185,94,.7) 50%, transparent 51%),
    radial-gradient(ellipse 90% 130% at 70% -30%, var(--night2) 0%, var(--night1) 68%);
  padding:42px 0 36px; margin-bottom:30px;
  border-bottom:1px solid rgba(216,185,94,.35);
}
.brand{display:flex; align-items:center; gap:20px}
.logo{width:64px; height:64px; flex:none; filter:drop-shadow(0 2px 10px rgba(216,185,94,.25))}
.topbar h1{
  font-family:var(--serif); font-size:2.5rem; font-weight:600;
  margin:0; letter-spacing:.06em;
}
.topbar h1 .glyph{color:var(--gold); margin-right:8px}
.tagline{
  margin:5px 0 0; opacity:.78; max-width:64ch; font-size:.95rem;
  letter-spacing:.01em;
}

/* ---- nézetválasztó ---- */
.mode-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 24px;
}
.mode-tile{
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 20px 18px; text-align:center; cursor:pointer;
  display:flex; flex-direction:column; gap:5px; align-items:center;
  box-shadow:var(--shadow); transition:border-color .15s, transform .12s;
  font:inherit; color:var(--ink);
}
.mode-tile:hover{border-color:var(--accent); transform:translateY(-2px)}
.mode-tile.active{
  border-color:var(--accent2);
  background:
    radial-gradient(ellipse 80% 120% at 50% -30%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 70%),
    var(--bg2);
}
.mode-tile .mt-icon{font-size:2rem; color:var(--accent2)}
.mode-tile .mt-title{
  font-family:var(--serif); font-size:1.25rem; font-weight:600; letter-spacing:.02em;
}
.mode-tile .mt-sub{font-size:.84rem; color:var(--muted)}
/* láthatóság mód szerint: választás előtt csak a csempék látszanak */
body:not(.mode-horoszkop) #formCard,
body:not(.mode-horoszkop) #result{display:none !important}
body:not(.mode-tarot) #tarotBox{display:none !important}
@media (max-width:560px){ .mode-nav{grid-template-columns:1fr} }
@media print{ .mode-nav{display:none !important} }

/* ---- kártyák ---- */
.card{
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px; margin-bottom:22px; box-shadow:var(--shadow);
}
.card h2{
  font-family:var(--serif); font-size:1.35rem; margin:0 0 18px; font-weight:600;
  display:flex; align-items:center; gap:10px; letter-spacing:.015em;
  padding-bottom:12px; border-bottom:1px solid var(--line); position:relative;
}
.card h2::after{
  content:''; position:absolute; left:0; bottom:-1px; width:56px; height:2px;
  background:linear-gradient(90deg,var(--accent2),transparent);
}
.card h2 .icon{font-size:1.2em}

/* ---- űrlap ---- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.field{display:flex; flex-direction:column; gap:6px; position:relative}
.field>span{font-size:.8rem; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em}
.field>span em{font-weight:400; font-style:normal; opacity:.75; text-transform:none; letter-spacing:0}
input[type=text],input[type=date],input[type=time],select{
  font:inherit; font-size:.98rem; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg); color:var(--ink); width:100%;
  transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
}
.check{display:flex; align-items:center; gap:7px; font-size:.85rem; color:var(--muted);
  font-weight:400; margin-top:2px; text-transform:none; letter-spacing:0}
.check input{width:auto}
small{color:var(--muted); font-size:.82rem}

.suggestions{
  position:absolute; top:100%; left:0; right:0; z-index:20; background:var(--bg2);
  border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
  max-height:220px; overflow-y:auto; display:none;
}
.suggestions.open{display:block}
.suggestions div{padding:8px 12px; cursor:pointer; font-size:.92rem}
.suggestions div:hover,.suggestions div.sel{background:var(--accent-soft)}
.suggestions .cty{color:var(--muted); font-size:.8rem; float:right}

.extra{margin-top:18px; border-top:1px solid var(--line); padding-top:14px}
.extra summary{cursor:pointer; font-size:.9rem; color:var(--muted); font-weight:600}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.chips label{
  display:inline-flex; align-items:center; gap:6px; font-size:.87rem;
  padding:6px 13px; border:1px solid var(--line); border-radius:999px; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.chips label:has(input:checked){background:var(--accent-soft); border-color:var(--accent)}
.chips input{width:auto}

.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
button{
  font:inherit; font-size:.95rem; font-weight:600; padding:11px 22px; border-radius:11px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .08s, filter .15s, box-shadow .15s;
}
button:active{transform:translateY(1px)}
.primary{
  background:linear-gradient(150deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#1c1440));
  color:#fff; letter-spacing:.02em;
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 35%,transparent);
}
.primary:hover{filter:brightness(1.1)}
.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.ghost:hover{background:var(--accent-soft); border-color:var(--accent)}
.saved{margin-top:14px; display:flex; flex-wrap:wrap; gap:8px}
.saved button{font-size:.83rem; padding:6px 13px; font-weight:500}

/* ---- összefoglaló ---- */
.hero{
  background:
    radial-gradient(ellipse 70% 100% at 85% -20%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 70%),
    var(--bg2);
  border-color:color-mix(in srgb,var(--accent) 35%,var(--line));
}
.hero h2{margin-bottom:6px; border-bottom:none; padding-bottom:0; font-size:1.6rem}
.hero h2::after{display:none}
.hero .who{color:var(--muted); font-size:.93rem; margin:0 0 22px}
.bigfacts{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px; margin-bottom:22px}
.fact{
  background:var(--bg); border:1px solid var(--line); border-radius:13px;
  padding:15px 14px 13px; text-align:center;
}
.fact .lbl{font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted)}
.fact .val{font-family:var(--serif); font-size:1.22rem; margin-top:3px; line-height:1.25}
.fact .sym{font-size:1.6rem; color:var(--accent2); margin-top:2px}

/* ---- szűrők ---- */
.filters{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px;
  position:sticky; top:0; z-index:30; padding:12px 0;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.filters button{
  background:var(--bg2); border:1px solid var(--line); color:var(--muted);
  font-size:.88rem; padding:7px 16px; font-weight:500; border-radius:999px;
}
.filters button:hover{border-color:var(--accent); color:var(--ink)}
.filters button.active{background:var(--accent); color:#fff; border-color:var(--accent)}

/* ---- szekciók ---- */
.sec-items{display:flex; flex-direction:column; gap:2px}
.row{padding:12px 0; border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row .lbl{font-size:.76rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:2px}
.row .val{font-family:var(--serif); font-size:1.1rem; color:var(--ink)}
.row .txt{font-size:.94rem; color:var(--muted); margin-top:4px; max-width:75ch}
.notes{margin-top:16px; padding:13px 16px; background:var(--accent-soft);
  border-radius:11px; border-left:3px solid var(--accent2);
  font-size:.88rem; color:var(--muted)}
.notes p{margin:0 0 7px} .notes p:last-child{margin:0}

/* ---- táblázatok ---- */
table{width:100%; border-collapse:collapse; margin-top:8px; font-size:.92rem}
th,td{text-align:left; padding:9px 11px; border-bottom:1px solid var(--line)}
th{font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:600}
tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 55%,transparent)}
td .sym{font-size:1.15rem; color:var(--accent2); margin-right:6px}
.retro{color:var(--warn); font-weight:700; font-size:.8rem}
.tbl-scroll{overflow-x:auto}

/* ---- fényszögek ---- */
.aspects{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.asp{
  border:1px solid var(--line); border-radius:999px; padding:5px 14px; font-size:.87rem;
  background:var(--bg);
}
.asp.exact{border-color:var(--accent2); background:var(--accent-soft); font-weight:600}
.asp .orb{color:var(--muted); font-size:.8rem; margin-left:5px}

/* ---- horoszkópábra ---- */
.wheel-box{display:flex; justify-content:center; margin:6px 0 16px}
svg.wheel{max-width:100%; height:auto}

/* ---- bioritmus ---- */
.bio-bars{display:flex; flex-direction:column; gap:11px; margin:8px 0 14px}
.bio-row{display:grid; grid-template-columns:92px 1fr 58px; align-items:center; gap:10px; font-size:.9rem}
.bio-track{height:9px; background:var(--line); border-radius:99px; position:relative; overflow:hidden}
.bio-fill{position:absolute; top:0; bottom:0; left:50%; border-radius:99px}
.bio-mid{position:absolute; left:50%; top:-4px; bottom:-4px; width:1px; background:var(--muted); opacity:.45}
.bio-val{text-align:right; font-variant-numeric:tabular-nums; font-weight:600}

.crit{color:var(--warn); font-weight:800}
.sub, .sec-h3{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--accent2); margin:22px 0 8px; font-weight:700;
}
.comp-notes{margin:2px 0 4px}
.comp-notes p{margin:0 0 6px; font-size:.89rem; color:var(--muted)}
.comp-notes em{opacity:.75}
.extra-cycles{margin-top:14px; border-top:1px solid var(--line); padding-top:12px}
.extra-cycles summary{cursor:pointer; font-size:.85rem; color:var(--muted); font-weight:600}
.extra-cycles .bio-bars{margin-top:12px}
.overall{
  margin:14px 0 0; padding:11px 15px; background:var(--accent-soft);
  border-radius:10px; font-size:.92rem; border-left:3px solid var(--accent2);
}

/* ---- diagramok ---- */
.chart-box{margin:10px 0 6px; overflow-x:auto}
svg.chart{width:100%; min-width:520px; height:auto; color:var(--ink)}
.chart-cap{margin:0 0 4px}
.markers{margin:10px 0 0; padding-left:22px; font-size:.88rem; color:var(--muted)}
.markers li{margin-bottom:5px}
.markers strong{color:var(--ink)}

/* ---- kronotípus-kvíz ---- */
.quiz{margin-top:10px}
.quiz .q{margin-bottom:14px}
.quiz .q p{margin:0 0 7px; font-weight:600; font-size:.94rem}
.quiz .opts{display:flex; flex-wrap:wrap; gap:7px}
.quiz .opts label{
  font-size:.85rem; padding:6px 13px; border:1px solid var(--line);
  border-radius:999px; cursor:pointer; transition:background .15s,border-color .15s;
}
.quiz .opts label:has(input:checked){background:var(--accent); color:#fff; border-color:var(--accent)}
.quiz .opts input{display:none}
.quiz-result{margin-top:12px; padding:14px; border-radius:11px; background:var(--accent-soft); display:none}
.quiz-result.show{display:block}

/* ---- lábléc, figyelmeztetés ---- */
.disclaimer{background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.disclaimer p{margin:0; font-size:.91rem}
.foot{padding:8px 20px 44px; color:var(--muted); font-size:.84rem; text-align:center}
.foot p{margin:6px 0}
.foot .powered{color:var(--accent2); font-size:.92rem; letter-spacing:.03em}
.foot .powered strong{font-family:var(--serif); font-size:1.05em}
.foot .powered a{
  color:var(--accent2); text-decoration:none;
  border-bottom:1px dotted var(--accent2);
}
.foot .powered a:hover{color:var(--accent); border-bottom-style:solid}
.coffee-btn{
  display:inline-block; margin-top:6px; padding:9px 20px; border-radius:999px;
  background:linear-gradient(140deg,var(--accent2),color-mix(in srgb,var(--accent2) 70%,#6b4c12));
  color:#fff !important; font-weight:700; font-size:.9rem; text-decoration:none;
  letter-spacing:.02em; box-shadow:0 4px 14px color-mix(in srgb,var(--accent2) 40%,transparent);
  transition:transform .12s, filter .15s;
}
.coffee-btn:hover{transform:translateY(-2px); filter:brightness(1.08)}
@media print{ .coffee-btn{display:none !important} }

/* ---- nyomtatás ---- */
@media print{
  .topbar{background:none; color:#000; padding:0 0 12px; border-bottom:2px solid #000}
  .topbar h1 .glyph,.logo{filter:none}
  .form-card,.filters,.actions,.foot,.saved{display:none !important}
  .card{break-inside:avoid; box-shadow:none; border-color:#ccc; page-break-inside:avoid}
  body{background:#fff; font-size:11pt}
  .row .txt{color:#333}
}

@media (max-width:560px){
  .topbar h1{font-size:1.8rem}
  .brand{gap:14px}
  .logo{width:48px; height:48px}
  .card{padding:18px}
  .bio-row{grid-template-columns:76px 1fr 48px; font-size:.84rem}
}

/* ---- kronobiológiai mérőeszköz ---- */
.chrono-tool{margin-top:6px}
.sleep-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px; margin:10px 0 4px;
}
.sleep-grid>div{
  border:1px solid var(--line); border-radius:12px; padding:13px 15px; background:var(--bg);
}
.sleep-grid .lbl{
  display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); font-weight:700; margin-bottom:8px;
}
.sleep-grid label{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; font-size:.88rem; margin-bottom:7px;
}
.sleep-grid label:last-child{margin-bottom:0}
.sleep-grid input[type=time]{width:110px; padding:5px 8px}
.sleep-grid input[type=number]{width:64px; padding:5px 8px}
.sleep-grid .check{justify-content:flex-start; font-size:.82rem}

.goal-opts{margin-top:6px}
.goal-opts label{font-size:.88rem}

.chrono-result{display:none; margin-top:22px; padding-top:18px; border-top:2px solid var(--line)}
.chrono-result.show{display:block}

.advice p{
  margin:0 0 8px; padding:10px 14px; border-radius:10px; font-size:.91rem;
  border-left:3px solid transparent; background:var(--bg);
}
.advice .do{border-left-color:var(--ok); background:color-mix(in srgb,var(--ok) 8%,var(--bg))}
.advice .dont{border-left-color:var(--warn); background:color-mix(in srgb,var(--warn) 8%,var(--bg))}
.advice .pace{border-left-color:var(--accent); background:var(--accent-soft); font-style:italic}
.warn-box{
  margin:0 0 10px; padding:11px 14px; border-radius:10px; font-size:.9rem;
  background:color-mix(in srgb,var(--warn) 12%,var(--bg2));
  border-left:3px solid var(--warn);
}
.src{margin-top:12px; color:var(--muted)}


/* ---- Pitagorasz-négyzet ---- */
.pm-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:9px;
  max-width:430px; margin:10px 0 6px;
}
.pm-cell{
  border:1px solid var(--line); border-radius:12px; padding:14px 8px 11px;
  text-align:center; background:var(--bg);
}
.pm-cell.empty{opacity:.45}
.pm-num{
  font-family:var(--serif); font-size:1.35rem; letter-spacing:.08em;
  color:var(--accent); line-height:1.2; word-break:break-all;
}
.pm-name{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin-top:5px}


/* ---- Sorsmátrix ---- */
svg.matrix-svg{max-width:460px; width:100%; height:auto; color:var(--ink); min-width:0}


/* ---- Sorsmátrix csakratáblázat ---- */
.chakra-tbl td.num{text-align:center; font-family:var(--serif); font-size:1.05rem; width:64px}
.chakra-tbl td.num.accent{color:var(--accent); font-weight:700}
.chakra-tbl tr.tot td{border-top:2px solid var(--line); background:var(--accent-soft)}
.ch-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-right:7px; vertical-align:middle;
}
.ch-1{background:#7b3fa0} .ch-2{background:#3f5ed0} .ch-3{background:#2eaad4}
.ch-4{background:#4caf50} .ch-5{background:#e8c62e} .ch-6{background:#e8892e}
.ch-7{background:#d94141}


/* ---- ХВД csakraanalízis ---- */
.hvd-bars{margin:10px 0 8px}
.hvd-row{
  display:grid; grid-template-columns:190px 1fr 52px 120px;
  align-items:center; gap:10px; font-size:.9rem; margin-top:12px;
}
.hvd-name{font-weight:600}
.hvd-track{
  height:11px; background:var(--line); border-radius:99px;
  position:relative; overflow:hidden;
}
.hvd-zone{
  position:absolute; left:40%; width:20%; top:0; bottom:0;
  background:var(--muted); opacity:.28;
}
.hvd-fill{position:absolute; left:0; top:0; bottom:0; border-radius:99px; opacity:.9}
.hvd-val{text-align:right; font-variant-numeric:tabular-nums; font-weight:700}
.hvd-band{font-size:.76rem; text-align:right; color:var(--muted)}
.hvd-band.band-tulzott{color:var(--warn); font-weight:600}
.hvd-band.band-gyenge{color:var(--accent); font-weight:600}
.hvd-desc{
  grid-column:1/-1; font-size:.86rem; color:var(--muted);
  margin:2px 0 0 22px;
}
.unc{color:var(--warn); font-weight:700; cursor:help}
@media (max-width:640px){
  .hvd-row{grid-template-columns:1fr 46px; gap:6px}
  .hvd-track{grid-column:1/-1; order:3}
  .hvd-band{grid-column:2; text-align:right}
  .hvd-desc{margin-left:0}
}


/* ---- részletes ház- és bolygónézet ---- */
.detail-list{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.d-item{
  border:1px solid var(--line); border-radius:12px; background:var(--bg);
  padding:0 15px; transition:border-color .15s;
}
.d-item:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.d-item[open]{background:var(--bg2); border-color:var(--accent)}
.d-item summary{
  cursor:pointer; padding:12px 0; display:flex; align-items:baseline;
  gap:10px; flex-wrap:wrap; list-style:none;
}
.d-item summary::-webkit-details-marker{display:none}
.d-item summary::before{
  content:'▸'; color:var(--accent2); font-size:.8rem;
  transition:transform .15s; display:inline-block;
}
.d-item[open] summary::before{transform:rotate(90deg)}
.d-num{
  font-family:var(--serif); font-size:1.15rem; color:var(--accent);
  min-width:26px; font-weight:600;
}
.d-title{font-weight:600; flex:1}
.d-title em{font-weight:400; font-style:normal; color:var(--muted); font-size:.88rem}
.d-meta{font-size:.83rem; color:var(--muted); font-variant-numeric:tabular-nums}
.d-desc{margin:2px 0 10px; font-size:.93rem; color:var(--muted); max-width:75ch}
.d-keys{margin:0 0 10px}
.tag{
  display:inline-block; font-size:.76rem; padding:3px 10px; margin:0 5px 5px 0;
  border:1px solid var(--line); border-radius:999px; color:var(--muted);
}
.d-item .sec-items{padding-bottom:6px}

/* fok-blokk */
.deg-block{
  margin:10px 0 14px; padding:13px 15px; border-radius:11px;
  background:var(--accent-soft); border-left:3px solid var(--accent2);
}
.deg-item{margin-bottom:9px}
.deg-item:last-child{margin-bottom:0}
.deg-lbl{
  display:block; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); font-weight:700;
}
.deg-val{display:block; font-family:var(--serif); font-size:1.02rem; margin-top:2px}
.deg-txt{display:block; font-size:.88rem; color:var(--muted); margin-top:3px; max-width:72ch}

/* fényszöglista a bolygóknál */
.asp-list{display:flex; flex-direction:column; gap:7px; margin-bottom:12px}
.asp-row{display:flex; flex-wrap:wrap; align-items:baseline; gap:9px}
.asp-txt{font-size:.88rem; color:var(--muted); flex:1; min-width:220px}


/* ---- személyes vs általános tartalom ---- */
.personal{padding-top:2px}
.sub-note{opacity:.75; font-size:.86rem !important}
.general{
  margin:12px 0 10px; border-top:1px dashed var(--line); padding-top:10px;
}
.general summary{
  cursor:pointer; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:700; list-style:none;
}
.general summary::-webkit-details-marker{display:none}
.general summary::before{content:'▸ '; font-size:.9em}
.general[open] summary::before{content:'▾ '}
.general .d-desc{margin-top:9px}
.gen-line{margin:0 0 6px; font-size:.88rem; color:var(--muted); max-width:75ch}
.gen-line strong{color:var(--ink); font-weight:600}

.pointer{color:var(--ink) !important}
.badge{
  display:inline-block; font-size:.68rem; padding:2px 9px; border-radius:999px;
  background:linear-gradient(140deg,var(--accent2),color-mix(in srgb,var(--accent2) 70%,#6b4c12));
  color:#fff; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; margin-left:4px;
}


/* ---- záró összegzés ---- */
#sections .card[data-cat="osszegzes"]{
  background:
    radial-gradient(ellipse 75% 110% at 12% -25%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 65%),
    var(--bg2);
  border-color:color-mix(in srgb,var(--accent) 50%,var(--line));
}
.sum-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px; margin:10px 0 4px;
}
.sum-cell{
  background:var(--bg); border:1px solid var(--line); border-radius:12px;
  padding:13px 15px;
}
.sum-cell .lbl{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:700;
}
.sum-cell .val{font-family:var(--serif); font-size:1.05rem; margin-top:3px; line-height:1.3}

.deg-head{
  font-size:.85rem; color:var(--muted); margin-bottom:10px;
  padding-bottom:8px; border-bottom:1px solid var(--line);
}
.deg-head strong{color:var(--ink); font-family:var(--serif); font-size:1rem}

.ruler-row.key{
  background:var(--accent-soft); border-radius:11px; padding:12px 15px;
  border-bottom:none; margin:4px 0; border-left:3px solid var(--accent2);
}
.ruler-row.key .lbl{color:var(--accent)}
.cusp-deg summary{font-weight:600}
.cusp-deg .deg-block{margin-top:8px}


/* ---- Ba Zi elemmérleg ---- */
.elem-bars{display:flex; flex-direction:column; gap:9px; margin:10px 0 6px}
.elem-row{display:grid; grid-template-columns:120px 1fr 34px; align-items:center; gap:10px; font-size:.9rem}
.elem-row.dm .elem-name{font-weight:700; color:var(--accent)}
.elem-track{height:11px; background:var(--line); border-radius:99px; overflow:hidden}
.elem-fill{height:100%; border-radius:99px; opacity:.9}
.elem-val{text-align:right; font-variant-numeric:tabular-nums; font-weight:600}

/* ---- Vimshottari dasa ---- */
.dasha-list{display:flex; flex-direction:column; gap:5px; margin:10px 0 6px}
.dasha-row{
  display:grid; grid-template-columns:110px 1fr 62px auto; align-items:center;
  gap:10px; font-size:.9rem; padding:8px 13px; border-radius:10px; background:var(--bg);
  border:1px solid var(--line);
}
.dasha-row.now{background:var(--accent-soft); border-color:var(--accent)}
.dasha-row .d-name{font-family:var(--serif); font-size:1.02rem}
.dasha-row .d-span{color:var(--muted); font-variant-numeric:tabular-nums}
.dasha-row .d-len{text-align:right; color:var(--muted); font-size:.84rem}
@media (max-width:560px){
  .elem-row{grid-template-columns:92px 1fr 28px}
  .dasha-row{grid-template-columns:88px 1fr auto; gap:6px}
  .dasha-row .d-len{display:none}
}

/* ---- szinasztria ---- */
.syn-overall{
  display:flex; align-items:center; gap:18px; margin:6px 0 16px;
  padding:16px 18px; border-radius:13px; background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
}
.syn-num{
  font-family:var(--serif); font-size:2.3rem; font-weight:700; color:var(--accent2);
  min-width:92px; text-align:center; line-height:1;
}
.syn-band{font-size:.92rem; max-width:70ch}
.syn-bars{display:flex; flex-direction:column; gap:14px; margin:8px 0 6px}
.syn-row{
  display:grid; grid-template-columns:170px 1fr 52px; align-items:center; gap:10px;
  font-size:.9rem;
}
.syn-name{font-weight:600}
.syn-track{height:11px; background:var(--line); border-radius:99px; overflow:hidden}
.syn-fill{
  height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}
.syn-fill.empty{background:var(--muted); opacity:.35}
.syn-val{text-align:right; font-variant-numeric:tabular-nums; font-weight:700}
.syn-txt{grid-column:1/-1; font-size:.85rem; color:var(--muted); margin:-4px 0 0}
.asp.syn-harm{border-color:var(--ok)}
.asp.syn-hard{border-color:var(--warn)}
.asp.syn-conj{border-color:var(--accent2)}
@media (max-width:560px){
  .syn-row{grid-template-columns:1fr 46px}
  .syn-track{grid-column:1/-1; order:3}
}

/* ---- tarot ---- */
.tarot-box .grid{align-items:end}
.t-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:16px; margin:12px 0 6px;
}
.t-card{
  background:var(--bg); border:1px solid var(--line); border-radius:13px;
  padding:14px; text-align:center;
}
.t-card.t-major{border-color:var(--accent2)}
.t-pos{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--accent2); font-weight:700; margin-bottom:8px; min-height:2em;
}
.t-card img{
  width:110px; max-width:80%; border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.3);
  transition:transform .3s;
}
.t-card img.t-rev{transform:rotate(180deg)}
.t-name{font-family:var(--serif); font-size:1.02rem; margin-top:10px; font-weight:600}
.t-revmark{
  display:inline-block; font-size:.68rem; padding:1px 8px; border-radius:999px;
  background:var(--warn); color:#fff; text-transform:uppercase;
  letter-spacing:.04em; vertical-align:middle;
}
.t-postext{font-size:.8rem; color:var(--muted); margin:7px 0 5px; font-style:italic}
.t-meaning{font-size:.88rem; line-height:1.5; text-align:left}
/* a kirakás térbeli táblája */
.t-board{
  display:grid; gap:12px; justify-content:center; align-items:center;
  margin:16px 0 4px; padding:18px 10px; border:1px solid var(--line);
  border-radius:13px;
  background:
    radial-gradient(ellipse 80% 120% at 50% -30%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 70%),
    var(--bg);
  overflow-x:auto;
}
.t-mini{position:relative; text-align:center}
.t-mini img{
  width:100%; max-width:82px; border-radius:6px; display:block; margin:0 auto;
  box-shadow:0 3px 10px rgba(0,0,0,.35); transition:transform .3s;
}
.t-mini img.t-rev{transform:rotate(180deg)}
.t-mini img.t-crossimg{
  position:absolute; left:50%; top:50%; width:82%; max-width:70px;
  transform:translate(-50%,-50%) rotate(90deg); z-index:2;
  box-shadow:0 5px 16px rgba(0,0,0,.5);
}
.t-mini img.t-crossimg.t-crossrev{transform:translate(-50%,-50%) rotate(270deg)}
.t-mini.t-cross{position:relative; align-self:stretch; justify-self:stretch; z-index:2}
.t-num{
  position:absolute; right:-4px; top:-6px; z-index:3;
  background:var(--accent2); color:#fff; font-size:.7rem; font-weight:700;
  width:20px; height:20px; line-height:20px; border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.t-mini.t-cross .t-num{right:auto; left:-4px; top:auto; bottom:-6px}

/* szimbólum-lapok (Lenormand, cigánykártya) */
.t-glyphcard{
  width:100%; max-width:88px; margin:0 auto; aspect-ratio:2/3;
  border:1px solid #b39a6a; border-radius:7px; position:relative;
  background:
    radial-gradient(ellipse 90% 60% at 50% 32%, rgba(255,252,240,.9), rgba(240,228,200,.9) 70%),
    linear-gradient(160deg,#f3e8cf,#e2d2ab);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:8px 5px 6px;
  box-shadow:
    inset 0 0 0 2px #f7efdc, inset 0 0 0 3px #c2a877,
    inset 0 0 14px rgba(140,110,60,.28), 0 3px 10px rgba(0,0,0,.3);
}
.t-glyphcard::before,.t-glyphcard::after{
  content:'❦'; position:absolute; font-size:.55rem; color:#a98d58; opacity:.85;
}
.t-glyphcard::before{top:4px; left:6px}
.t-glyphcard::after{bottom:4px; right:6px; transform:rotate(180deg)}
.t-glyphcard .t-glyph{
  font-size:2rem; line-height:1;
  filter:drop-shadow(0 2px 2px rgba(90,60,20,.35));
}
.t-glyphcard .t-gname{
  font-family:var(--serif); font-size:.6rem; letter-spacing:.05em;
  color:#5d4a28; font-weight:700; text-align:center; line-height:1.25;
  text-transform:uppercase; border-top:1px solid #c2a877;
  padding-top:3px; width:86%;
}
.t-glyphcard.t-crossglyph{
  position:absolute; left:50%; top:50%; width:74%;
  transform:translate(-50%,-50%) rotate(90deg); z-index:2;
}
.t-glyphbig{font-size:3rem; line-height:1.2}
.t-glyphcard.t-glyphlg{max-width:112px; margin-bottom:4px}
.t-glyphcard.t-glyphlg .t-glyph{font-size:2.5rem}
.t-glyphcard.t-glyphlg .t-gname{font-size:.66rem}
.t-glyphcard.t-pickcard{max-width:52px; gap:0; padding:4px 2px}
.t-glyphcard.t-pickcard .t-glyph{font-size:1.35rem; filter:drop-shadow(0 1px 1px rgba(90,60,20,.3))}
.t-glyphcard.t-pickcard::before,.t-glyphcard.t-pickcard::after{display:none}

/* saját kirakás: kattintható helyek */
.t-slot{cursor:pointer}
.t-slot .t-empty{
  width:100%; max-width:88px; margin:0 auto; aspect-ratio:2/3;
  border:2px dashed color-mix(in srgb,var(--accent) 55%,var(--line));
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  padding:6px; transition:border-color .15s, background .15s;
}
.t-slot .t-empty span{
  font-size:.62rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); font-weight:700; text-align:center; line-height:1.3;
}
.t-slot:hover .t-empty{border-color:var(--accent2); background:var(--accent-soft)}
.t-slot.t-cross{pointer-events:none}
.t-slot.t-cross > *{pointer-events:auto}
.t-slot .t-empty.t-emptycross{
  position:absolute; left:50%; top:50%; width:70%; max-width:70px;
  transform:translate(-50%,-50%) rotate(90deg); z-index:2; background:var(--bg2);
}

/* felugró lapválasztó */
.t-modal{
  position:fixed; inset:0; z-index:200; background:rgba(10,10,20,.65);
  display:flex; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(3px);
}
.t-dialog{
  background:var(--bg2); border:1px solid var(--line); border-radius:14px;
  max-width:720px; width:100%; max-height:84vh; display:flex; flex-direction:column;
  box-shadow:0 18px 60px rgba(0,0,0,.5);
}
.t-dhead{
  display:flex; align-items:center; gap:10px; padding:14px 18px;
  border-bottom:1px solid var(--line); font-size:1rem;
}
.t-close{
  margin-left:auto; background:none; border:none; font-size:1.5rem; padding:0 6px;
  color:var(--muted); cursor:pointer; line-height:1;
}
.t-close:hover{color:var(--ink)}
.t-dtools{
  display:flex; gap:14px; align-items:center; padding:10px 18px;
  border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.t-dtools input[type=text]{flex:1; min-width:160px; padding:7px 10px}
.t-picker{
  overflow-y:auto; padding:14px 18px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:10px;
}
.t-pick{
  background:var(--bg); border:1px solid var(--line); border-radius:9px;
  padding:7px 5px; cursor:pointer; text-align:center; font-weight:500;
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.t-pick img{width:56px; border-radius:4px}
.t-pick .t-glyph{font-size:1.6rem}
.t-pick span{font-size:.68rem; line-height:1.2; color:var(--ink)}
.t-pick:hover{border-color:var(--accent)}
.t-pick.sel{border-color:var(--accent2); background:var(--accent-soft)}
.t-pick.used{opacity:.3; cursor:not-allowed}
@media print{
  .tarot-box .actions,.t-manual,.tarot-box .grid,#tarotSpreadDesc,
  #tarotManualBox{display:none !important}
}

/* lapfelfedő animáció */
@keyframes tDeal{
  from{opacity:0; transform:perspective(700px) rotateY(85deg) scale(.92)}
  to{opacity:1; transform:perspective(700px) rotateY(0) scale(1)}
}
.t-deal{animation:tDeal .45s ease-out both}
@media (prefers-reduced-motion: reduce){ .t-deal{animation:none} }

/* ---- ⚡ ---- */
.logo{cursor:pointer}
.egg-toast{
  position:fixed; left:50%; bottom:34px; transform:translate(-50%,20px);
  background:var(--night1); color:var(--starink); border:1px solid var(--gold);
  border-radius:14px; padding:14px 22px; font-size:.95rem; text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.45); z-index:99; opacity:0;
  transition:opacity .35s, transform .35s; pointer-events:none; max-width:90vw;
}
.egg-toast.show{opacity:1; transform:translate(-50%,0)}
.egg-toast em{color:var(--gold); font-style:normal; font-family:var(--serif)}

/* ---- tranzit-idővonal ---- */
.tr-line{margin-top:18px; border-left:2px solid var(--line); padding-left:18px}
.tr-year{
  font-family:var(--serif); font-size:1.3rem; font-weight:700; color:var(--accent2);
  margin:24px 0 10px; position:relative; letter-spacing:.04em;
}
.tr-year::before{
  content:''; position:absolute; left:-24px; top:.42em; width:10px; height:10px;
  border-radius:50%; background:var(--accent2);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent2) 25%,transparent);
}
.tr-line .tr-year:first-child{margin-top:4px}
.tr-event{
  background:var(--bg); border:1px solid var(--line); border-radius:12px;
  padding:13px 15px; margin-bottom:10px; position:relative;
}
.tr-event::before{
  content:''; position:absolute; left:-22px; top:20px; width:6px; height:6px;
  border-radius:50%; background:var(--muted);
}
.tr-event.major{border-color:var(--accent); background:var(--accent-soft)}
.tr-event.major::before{background:var(--accent)}
.tr-head{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.tr-sym{
  font-size:1.05rem; color:var(--accent2); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.tr-dates{
  color:var(--muted); font-size:.84rem; margin:3px 0 6px;
  font-variant-numeric:tabular-nums;
}
.tr-txt{font-size:.92rem; line-height:1.55}