
:root{
  --bg:#EEF2F5; --surface:#FBFCFE; --panel:#F6F8FA;
  --ink:#1E262D; --ink-soft:#5C6770; --muted:#8A949C;
  --line:#D7DEE4; --line-soft:#E6EBEF;
  --steel:#6E7E8C; --steel-deep:#41525F; --steel-light:#9AA8B3;
  --gold:#B8924A; --gold-soft:#CBAE72;
  --el-fire:#B65A3C; --el-earth:#7E8358; --el-air:#7C9DB6; --el-water:#4E7E95;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"URW Palladio L",Georgia,serif;
  --runic:"Noto Sans Runic","Segoe UI Historic","Segoe UI Symbol",Junicode,serif;
  --maxw:720px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(110,126,140,.07), transparent 60%),
    radial-gradient(700px 500px at 108% 4%, rgba(65,82,95,.06), transparent 55%),
    var(--bg);
  color:var(--ink); font-family:var(--serif);
  font-size:20px; line-height:1.72; -webkit-font-smoothing:antialiased;
  padding:48px 20px 88px; position:relative; min-height:100vh;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNDAwIiBmaWxsPSJub25lIiBzdHJva2U9IiMyQjM3NDIiIHN0cm9rZS13aWR0aD0iMSI+PGNpcmNsZSBjeD0iMjAwIiBjeT0iMjAwIiByPSI2MCIvPjxjaXJjbGUgY3g9IjIwMCIgY3k9IjIwMCIgcj0iMTIwIi8+PGNpcmNsZSBjeD0iMjAwIiBjeT0iMjAwIiByPSIxNzAiLz48Y2lyY2xlIGN4PSIyMDAiIGN5PSIyMDAiIHI9IjE5MiIvPjxwb2x5Z29uIHBvaW50cz0iMjAwLjAsNTAuMCAzMjkuOSwyNzUuMCA3MC4xLDI3NS4wIi8+PGxpbmUgeDE9IjIwMC4wIiB5MT0iMjQuMCIgeDI9IjIwMC4wIiB5Mj0iOC4wIi8+PGxpbmUgeDE9IjI0NS42IiB5MT0iMzAuMCIgeDI9IjI0OS43IiB5Mj0iMTQuNSIvPjxsaW5lIHgxPSIyODguMCIgeTE9IjQ3LjYiIHgyPSIyOTYuMCIgeTI9IjMzLjciLz48bGluZSB4MT0iMzI0LjUiIHkxPSI3NS41IiB4Mj0iMzM1LjgiIHkyPSI2NC4yIi8+PGxpbmUgeDE9IjM1Mi40IiB5MT0iMTEyLjAiIHgyPSIzNjYuMyIgeTI9IjEwNC4wIi8+PGxpbmUgeDE9IjM3MC4wIiB5MT0iMTU0LjQiIHgyPSIzODUuNSIgeTI9IjE1MC4zIi8+PGxpbmUgeDE9IjM3Ni4wIiB5MT0iMjAwLjAiIHgyPSIzOTIuMCIgeTI9IjIwMC4wIi8+PGxpbmUgeDE9IjM3MC4wIiB5MT0iMjQ1LjYiIHgyPSIzODUuNSIgeTI9IjI0OS43Ii8+PGxpbmUgeDE9IjM1Mi40IiB5MT0iMjg4LjAiIHgyPSIzNjYuMyIgeTI9IjI5Ni4wIi8+PGxpbmUgeDE9IjMyNC41IiB5MT0iMzI0LjUiIHgyPSIzMzUuOCIgeTI9IjMzNS44Ii8+PGxpbmUgeDE9IjI4OC4wIiB5MT0iMzUyLjQiIHgyPSIyOTYuMCIgeTI9IjM2Ni4zIi8+PGxpbmUgeDE9IjI0NS42IiB5MT0iMzcwLjAiIHgyPSIyNDkuNyIgeTI9IjM4NS41Ii8+PGxpbmUgeDE9IjIwMC4wIiB5MT0iMzc2LjAiIHgyPSIyMDAuMCIgeTI9IjM5Mi4wIi8+PGxpbmUgeDE9IjE1NC40IiB5MT0iMzcwLjAiIHgyPSIxNTAuMyIgeTI9IjM4NS41Ii8+PGxpbmUgeDE9IjExMi4wIiB5MT0iMzUyLjQiIHgyPSIxMDQuMCIgeTI9IjM2Ni4zIi8+PGxpbmUgeDE9Ijc1LjUiIHkxPSIzMjQuNSIgeDI9IjY0LjIiIHkyPSIzMzUuOCIvPjxsaW5lIHgxPSI0Ny42IiB5MT0iMjg4LjAiIHgyPSIzMy43IiB5Mj0iMjk2LjAiLz48bGluZSB4MT0iMzAuMCIgeTE9IjI0NS42IiB4Mj0iMTQuNSIgeTI9IjI0OS43Ii8+PGxpbmUgeDE9IjI0LjAiIHkxPSIyMDAuMCIgeDI9IjguMCIgeTI9IjIwMC4wIi8+PGxpbmUgeDE9IjMwLjAiIHkxPSIxNTQuNCIgeDI9IjE0LjUiIHkyPSIxNTAuMyIvPjxsaW5lIHgxPSI0Ny42IiB5MT0iMTEyLjAiIHgyPSIzMy43IiB5Mj0iMTA0LjAiLz48bGluZSB4MT0iNzUuNSIgeTE9Ijc1LjUiIHgyPSI2NC4yIiB5Mj0iNjQuMiIvPjxsaW5lIHgxPSIxMTIuMCIgeTE9IjQ3LjYiIHgyPSIxMDQuMCIgeTI9IjMzLjciLz48bGluZSB4MT0iMTU0LjQiIHkxPSIzMC4wIiB4Mj0iMTUwLjMiIHkyPSIxNC41Ii8+PC9zdmc+") center 64px / 540px no-repeat;
  opacity:.05;
}
.irk-result{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:3px; padding:52px 48px 56px;
  box-shadow:0 1px 0 #fff inset, 0 18px 50px -28px rgba(30,38,45,.28);
  animation:rise .7s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
h1{font-size:1.95rem; font-weight:600; letter-spacing:.01em; line-height:1.18;
  margin:0 0 6px; text-align:center;}
.motto{text-align:center; color:var(--steel-deep); font-style:italic;
  font-size:1.02rem; margin:0 0 8px;}
.rule{height:0; border:0; border-top:1px solid var(--gold); width:54px; margin:22px auto 36px;
  position:relative; opacity:.9;}
.rule::after{content:"◆"; position:absolute; top:-.72em; left:50%; transform:translateX(-50%);
  color:var(--gold); background:var(--surface); padding:0 8px; font-size:.62rem;}
section{margin:0 0 34px; animation:rise .7s cubic-bezier(.2,.7,.2,1) both;}
section:nth-of-type(1){animation-delay:.08s}
section:nth-of-type(2){animation-delay:.16s}
h2{font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.22em;
  color:var(--steel-deep); margin:0 0 20px; padding-bottom:9px;
  border-bottom:1px solid var(--line-soft); position:relative;}
h2::after{content:""; position:absolute; left:0; bottom:-1px; width:46px; height:1px;
  background:var(--gold);}
.irk-runes ul{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(3,1fr); gap:14px;}
.irk-runes li{background:var(--panel); border:1px solid var(--line);
  border-radius:3px; padding:22px 12px 18px; text-align:center;}
.glyph{display:block; font-family:var(--runic); font-size:2.7rem; line-height:1;
  color:var(--steel-deep); margin-bottom:12px;}
.irk-runes strong{display:block; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.14em; color:var(--muted); font-weight:600; margin-bottom:3px;}
.irk-runes li{font-size:1.04rem; color:var(--ink);}
.elbar{margin:0 0 13px;}
.elbar .lab{display:flex; justify-content:space-between; font-size:.86rem;
  color:var(--ink-soft); margin-bottom:5px; letter-spacing:.02em;}
.elbar .track{height:7px; background:var(--line-soft); border-radius:99px; overflow:hidden;}
.elbar .fill{display:block; height:100%; border-radius:99px;
  background:var(--c,var(--steel)); transform-origin:left;
  animation:grow .9s .35s cubic-bezier(.2,.7,.2,1) both;}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.elbar[data-el="Fire"]{--c:var(--el-fire)}
.elbar[data-el="Earth"]{--c:var(--el-earth)}
.elbar[data-el="Air"]{--c:var(--el-air)}
.elbar[data-el="Water"]{--c:var(--el-water)}
.verdict{margin-top:20px; font-size:1.02rem;}
.verdict strong{color:var(--steel-deep);}
.comp{margin-top:14px; padding:14px 16px; background:var(--panel);
  border-left:2px solid var(--gold); border-radius:0 3px 3px 0;
  font-size:.98rem; color:var(--ink-soft);}
@media(max-width:560px){
  .irk-result{padding:36px 22px 40px}
  h1{font-size:1.6rem}
  .irk-runes ul{grid-template-columns:1fr; gap:10px}
  .glyph{font-size:2.3rem}
}

.irk-form{display:flex; flex-direction:column; gap:14px; max-width:420px;}
.irk-form label{display:flex; flex-direction:column; font-size:.82rem;
  color:var(--steel-deep); letter-spacing:.04em; gap:5px;}
.irk-form input{font:inherit; padding:10px 12px; border:1px solid var(--line);
  border-radius:3px; background:var(--panel); color:var(--ink);}
.irk-form input:focus{outline:none; border-color:var(--steel); box-shadow:0 0 0 3px rgba(110,126,140,.12);}
.irk-form button{margin-top:6px; padding:12px 20px; font:inherit; font-weight:600;
  letter-spacing:.06em; cursor:pointer; color:var(--surface);
  background:var(--steel-deep); border:none; border-radius:3px; transition:background .2s;}
.irk-form button:hover{background:var(--ink);}
.rune-grid{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:10px;}
.rune-grid a{display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:var(--panel); border:1px solid var(--line); border-radius:3px;
  text-decoration:none; color:var(--ink); transition:border-color .2s, transform .2s;}
.rune-grid a:hover{border-color:var(--gold); transform:translateY(-1px);}
.rune-grid .glyph{font-family:var(--runic); font-size:1.5rem; color:var(--steel-deep); margin:0;}

.rune-detail{margin:0 0 30px; padding:24px 26px; background:var(--panel);
  border:1px solid var(--line); border-radius:3px;
  animation:rise .7s cubic-bezier(.2,.7,.2,1) both;}
.rune-detail h2{border:none; padding:0; margin:0 0 14px; font-size:1.15rem;
  text-transform:none; letter-spacing:.01em; color:var(--ink);}
.rune-detail h2::after{display:none;}
.glyph-inline{font-family:var(--runic); font-size:1.5rem; color:var(--steel-deep);
  margin-right:8px; vertical-align:-2px;}
.poem{margin:0 0 16px; padding:12px 18px; border-left:2px solid var(--gold);
  font-style:italic; color:var(--steel-deep); background:var(--surface); border-radius:0 3px 3px 0;}
.advice{margin-top:14px; padding:14px 16px; background:var(--surface);
  border:1px solid var(--line-soft); border-radius:3px; color:var(--ink-soft);}
.advice strong{color:var(--steel-deep);}
.more a{color:var(--steel-deep); text-decoration:none; font-size:.95rem;}
.more a:hover{color:var(--gold);}

/* === Мобильная адаптация (телефоны) === */
@media (max-width: 640px){
  body{ padding:20px 12px 56px; font-size:19px; }
  .irk-result{ padding:26px 18px 32px; border-radius:0; }
  h1{ font-size:1.5rem; line-height:1.22; }
  .motto{ font-size:.95rem; }
  .rule{ margin:18px auto 28px; }

  /* форма: всегда колонка, поля на всю ширину */
  .irk-form{ max-width:100%; gap:12px; }
  .irk-form input{ width:100%; font-size:16px; }   /* 16px = iOS не зумит при фокусе */
  .irk-form button{ width:100%; padding:14px; font-size:1rem; }

  /* три руны кода — в колонку, чтобы не сплющивались */
  .irk-runes ul{ grid-template-columns:1fr; gap:10px; }
  .glyph{ font-size:2.4rem; }

  /* сетка 24 рун — минимум 2 в ряд на узком экране */
  .rune-grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .rune-grid a{ padding:11px 12px; }

  /* блоки разбора рун компактнее */
  .rune-detail{ padding:18px 16px; }
  .rune-detail h2{ font-size:1.05rem; }
  .poem{ padding:10px 14px; font-size:.95rem; }
  .advice{ padding:12px 14px; }

  /* полосы стихий */
  .elbar .lab{ font-size:.84rem; }
}

/* очень узкие (≤380px) — сетка рун в один столбец */
@media (max-width: 380px){
  .rune-grid{ grid-template-columns:1fr; }
}

/* ФИО-шапка */
.fio-head{ text-align:center; margin-bottom:18px; }
.fio-cyr{ font-size:1.05rem; color:var(--ink); letter-spacing:.04em; }
.fio-runes{ font-family:var(--runic); font-size:1.7rem; color:var(--steel-deep);
  letter-spacing:.12em; margin-top:6px; }

/* нумерология */
.numerology{ margin:0 0 34px; }
.num-block{ margin:0 0 18px; padding:18px 20px; background:var(--panel);
  border:1px solid var(--line); border-radius:3px; }
.num-head{ display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.num-badge{ flex:0 0 auto; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:600; color:var(--surface);
  background:var(--steel-deep); border:2px solid var(--gold); }
.num-desc{ font-size:.85rem; color:var(--muted); }

/* разбор стихий */
.el-detail{ margin-top:18px; padding:16px 18px; background:var(--panel);
  border-left:2px solid var(--steel); border-radius:0 3px 3px 0; }
.el-detail h3{ margin:0 0 8px; font-size:1rem; color:var(--steel-deep);
  letter-spacing:.02em; }

/* данные рождения */
.birth-info{ display:flex; flex-wrap:wrap; gap:6px 20px; justify-content:center;
  margin-bottom:16px; font-size:.9rem; color:var(--ink-soft); }
.birth-info strong{ color:var(--ink); font-weight:600; }
.birth-info .coords{ font-size:.82rem; color:var(--muted); }
.el-detail.empty-el{ border-left-color:var(--gold); background:var(--surface); }
.el-detail.empty-el h3{ color:var(--gold); }

.el-note{ font-size:.85rem; color:var(--muted); margin:-6px 0 14px; }

/* кнопка PDF */
.pdf-section{ text-align:center; margin:36px 0 10px; }
.pdf-btn{ display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; font:inherit; font-size:1.05rem; font-weight:600;
  letter-spacing:.04em; cursor:pointer; color:var(--surface);
  background:var(--steel-deep); border:2px solid var(--gold);
  border-radius:4px; transition:background .2s, transform .15s; }
.pdf-btn:hover{ background:var(--ink); transform:translateY(-1px); }
.pdf-ico{ font-size:1.25rem; line-height:1; }
.pdf-hint{ margin-top:10px; font-size:.82rem; color:var(--muted); }

/* === ПЕЧАТЬ / PDF === */
@media print{
  @page{ margin:14mm; }
  html, body{ background:#fff !important; padding:0 !important; margin:0 !important;
    font-size:13pt; color:#000; }
  body::before{ display:none !important; }              /* убрать watermark-фон */
  .no-print{ display:none !important; }                 /* скрыть кнопки/ссылки */
  .irk-result{ box-shadow:none !important; border:none !important;
    max-width:100% !important; padding:0 !important; margin:0 !important;
    background:#fff !important; }
  .rune-detail, .num-block, .el-detail, .comp, .poem, .advice, .birth-info{
    break-inside:avoid; page-break-inside:avoid;
    background:#fafafa !important; border-color:#ddd !important; }
  h1{ font-size:20pt; }
  h2{ font-size:12pt; color:#333 !important; }
  .fio-runes{ color:#333 !important; }
  .glyph, .glyph-inline{ color:#222 !important; }
  .elbar .fill{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  a{ color:#000 !important; text-decoration:none; }
  .rune-detail{ animation:none !important; }            /* без анимаций в печати */
  section{ animation:none !important; }
}

/* гальдрический блок */
.galdr-section{margin:36px 0;padding:26px 28px;background:var(--panel);
  border:1px solid var(--line);border-radius:3px;border-top:2px solid var(--gold);}
.galdr-intro{color:var(--ink-soft);margin-bottom:18px;}
.galdr-block{margin-bottom:20px;}
.galdr-block h3{font-size:1rem;color:var(--steel-deep);margin:0 0 8px;letter-spacing:.02em;}
.galdr-runes{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0;}
.galdr-glyph{font-family:var(--runic);font-size:2.6rem;color:var(--steel-deep);
  line-height:1;padding:8px 12px;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:4px;}
.galdr-names{font-size:.92rem;color:var(--muted);letter-spacing:.05em;}
.galdr-bind{padding-top:16px;border-top:1px solid var(--line-soft);}
.galdr-bind p{font-size:.9rem;color:var(--ink-soft);font-style:italic;}
@media print{.galdr-section{break-inside:avoid;background:#fafafa !important;}
  .galdr-glyph{color:#222 !important;}}
