/* guide.css v4.0 — HOME REIMAGINED + FLOW UI (stable ids)
   - New HERO with quick diagnosis
   - "Scenarios" grid instead of boring categories
   - Quick Router modal (3 questions)
   - Breadcrumbs wrap & hover-safe
   - Stage + tips + final + favs
*/

:root {
    --bg0: #070a0f;
    --bg1: #0a0f17;
    --bg2: #0d1420;

    --text: #e9eefc;
    --muted: rgba(233, 238, 252, .70);
    --muted2: rgba(233, 238, 252, .55);

    --line: rgba(255, 255, 255, .10);
    --line2: rgba(255, 255, 255, .08);

    --glass: rgba(255, 255, 255, .06);
    --glass2: rgba(255, 255, 255, .04);

    --accent: #caa24b;
    --accent2: #f0d08a;

    --ok: #3bdc7e;
    --bad: #ff5e69;

    --sh1: 0 18px 60px rgba(0, 0, 0, .55);
    --sh2: 0 10px 30px rgba(0, 0, 0, .45);

    --r12: 12px;
    --r16: 16px;
    --r18: 18px;
    --r22: 22px;

    --pad: 18px;
    --max: 1100px;
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    font: 500 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, sans-serif;
    color: var(--text);
    background: transparent;
    /* важно */
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(1200px 800px at 70% -10%, rgba(202, 162, 75, .22), transparent 55%),
        radial-gradient(900px 700px at 10% 10%, rgba(59, 220, 126, .035), transparent 58%),
        radial-gradient(900px 700px at 70% 90%, rgba(84, 129, 255, .11), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1) 35%, var(--bg0));
}



.container {
    width: min(var(--max), calc(100% - 32px));
    margin: 0 auto
}

a {
    color: inherit
}

button,
input {
    font: inherit;
    color: inherit
}

button {
    cursor: pointer
}

input {
    outline: none
}

/* TOPBAR */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 14px 0;
    backdrop-filter: blur(14px);
    background: linear-gradient(180deg, rgba(10, 15, 23, .88), rgba(10, 15, 23, .58));
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px
}

.logo {
    width: 50px;
    height: 50px;
    border-radius: 14px;

    /* само лого */
    background-image:
        url("/assets/pwa/icon-192.png"),
        radial-gradient(circle at 35% 35%,
            rgba(240, 208, 138, 0.35),
            rgba(202, 162, 75, 0.15) 55%,
            rgba(255, 255, 255, 0.04) 72%),
        linear-gradient(140deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.03));

    background-size:
        cover,
        cover,
        cover;

    background-position: center;
    background-repeat: no-repeat;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.08);
}



.brand h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: .2px
}

.brand p {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--muted)
}

.searchRow {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center
}

.search {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
    overflow: hidden;
}

.search input {
    width: 100%;
    padding: 12px 42px 12px 42px;
    border: 0;
    background: transparent;
    color: rgba(233, 238, 252, .95);
}

.search input::placeholder {
    color: rgba(233, 238, 252, .55)
}

.ic {
    width: 18px;
    height: 18px;
    opacity: .95;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.ic.left {
    left: 14px
}

.ic.right {
    right: 14px;
    cursor: pointer;
    opacity: .75
}

.ic.right:hover {
    opacity: 1
}

/* BUTTONS */
.btn {
    border: 1px solid rgba(255, 255, 255, .10);
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
    color: rgba(233, 238, 252, .92);
    border-radius: 999px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .12s ease, border-color .12s ease, background .12s ease, opacity .12s ease, box-shadow .12s ease;
    user-select: none;
}

.btn:hover {
    border-color: rgba(240, 208, 138, .28);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .22)
}

.btn:active {
    transform: translateY(0) scale(.99)
}

.btn.small {
    padding: 8px 12px;
    font-size: 13px
}

.btn.ghost {
    background: linear-gradient(180deg, rgba(0, 0, 0, .20), rgba(255, 255, 255, .03));
    border-color: rgba(255, 255, 255, .12);
}

.btnIcon {
    width: 18px;
    height: 18px;
    opacity: .95
}

.btn.primary {
    border-color: rgba(240, 208, 138, .35);
    background:
        radial-gradient(120px 70px at 35% 20%, rgba(240, 208, 138, .35), transparent 60%),
        linear-gradient(180deg, rgba(202, 162, 75, .28), rgba(202, 162, 75, .10));
}

.btn.primary:hover {
    border-color: rgba(240, 208, 138, .55);
    background:
        radial-gradient(140px 90px at 35% 20%, rgba(240, 208, 138, .45), transparent 60%),
        linear-gradient(180deg, rgba(202, 162, 75, .34), rgba(202, 162, 75, .12));
}

.btn.danger {
    border-color: rgba(255, 90, 90, .25);
    background:
        radial-gradient(120px 70px at 35% 20%, rgba(255, 90, 90, .25), transparent 60%),
        linear-gradient(180deg, rgba(255, 90, 90, .10), rgba(255, 255, 255, .03));
}

.btn.danger:hover {
    border-color: rgba(255, 90, 90, .45)
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    color: rgba(233, 238, 252, .75);
    font-size: 12px;
}

.appMain {
    padding: 18px 0 18px
}

/* PANELS */
.panel {
    border-radius: var(--r22);
    border: 1px solid rgba(255, 255, 255, .08);
    background:
        radial-gradient(1100px 260px at 12% 0%, rgba(255, 255, 255, .07), transparent 55%),
        radial-gradient(900px 260px at 85% 10%, rgba(240, 208, 138, .06), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
    box-shadow: var(--sh2);
    overflow: hidden;
}

.panelHeader {
    padding: 14px var(--pad);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.panelHeader .title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 950;
    letter-spacing: .2px
}

.panelHint {
    color: rgba(233, 238, 252, .62);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55%
}

/* HOME HERO */
.homeHero {
    display: grid;
    gap: 14px;
    margin-bottom: 16px
}

.heroCard {
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, .10);
    background:
        radial-gradient(1200px 420px at 12% 0%, rgba(240, 208, 138, .16), transparent 60%),
        radial-gradient(900px 420px at 90% 0%, rgba(59, 220, 126, .10), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
    box-shadow: var(--sh1);
    padding: 18px 18px;
    position: relative;
    overflow: hidden;
}

.heroCard:before {
    content: "";
    position: absolute;
    inset: -2px;
    background:
        radial-gradient(420px 160px at 20% -20%, rgba(240, 208, 138, .20), transparent 55%),
        radial-gradient(520px 200px at 80% 0%, rgba(84, 129, 255, .12), transparent 60%);
    pointer-events: none;
}

.heroTop {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.heroKicker {
    font-weight: 950;
    letter-spacing: .25px;
    color: rgba(233, 238, 252, .92);
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(0, 0, 0, .18);
}

.heroBadges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.heroBadge {
    font-size: 12px;
    color: rgba(233, 238, 252, .78);
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
}

.heroTitle {
    position: relative;
    margin: 12px 0 8px;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: .2px;
}

.heroSub {
    position: relative;
    margin: 0 0 14px;
    color: rgba(233, 238, 252, .76);
    font-size: 14.5px;
    line-height: 1.55;
    max-width: 860px;
}

.heroActions {
    position: relative;
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.heroBtn {
    padding: 12px 16px;
    font-size: 14px
}

.heroHint {
    position: relative;
    margin-top: 12px;
    color: rgba(233, 238, 252, .65);
    font-size: 12.5px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .14);
}

/* TRUST ROW */
.trustRow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px
}

.trustCard {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .14);
    padding: 14px 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}

.trustIcon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    font-size: 18px;
}

.trustTitle {
    font-weight: 950;
    letter-spacing: .2px;
    margin-bottom: 4px
}

.trustSub {
    color: rgba(233, 238, 252, .70);
    font-size: 12.8px;
    line-height: 1.4
}

/* SCENARIOS GRID */
.catGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: var(--pad);
}

.cat {
    border-radius: var(--r18);
    border: 1px solid rgba(255, 255, 255, .08);
    background:
        radial-gradient(260px 120px at 18% 10%, rgba(240, 208, 138, .10), transparent 65%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
    padding: 14px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .26);
    transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
    cursor: pointer;
    min-height: 92px;
    position: relative;
    overflow: hidden;
}

.cat:before {
    content: "";
    position: absolute;
    inset: -2px;
    background:
        radial-gradient(220px 120px at 0% 50%, rgba(59, 220, 126, .07), transparent 55%),
        radial-gradient(220px 120px at 100% 50%, rgba(84, 129, 255, .07), transparent 55%);
    opacity: .7;
    pointer-events: none;
}

.cat:hover {
    transform: translateY(-2px);
    border-color: rgba(240, 208, 138, .30);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .32)
}

.cat.active {
    border-color: rgba(240, 208, 138, .50);
    background:
        radial-gradient(320px 160px at 18% 10%, rgba(240, 208, 138, .18), transparent 65%),
        linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
}

.catTop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    position: relative
}

.catIcon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(0, 0, 0, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    font-size: 18px;
}

.cat h3 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.25;
    position: relative
}

.cat p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    position: relative
}

.catSmall {
    margin-top: 8px;
    color: rgba(233, 238, 252, .62);
    font-size: 12px;
    line-height: 1.35;
    position: relative
}

/* BREADCRUMBS */
.bcrumbBar {
    padding: 14px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .10);
    background:
        radial-gradient(900px 180px at 15% 0%, rgba(255, 255, 255, .06), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
    box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
    backdrop-filter: blur(14px);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: start;
    overflow: visible;
}

.bcrumbTrail {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    align-items: start;
    min-width: 0
}

.bcrumbRoot {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(0, 0, 0, .20);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    cursor: pointer;
    user-select: none;
    transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.bcrumbRoot:hover {
    border-color: rgba(240, 208, 138, .45);
    background:
        radial-gradient(120px 46px at 30% 45%, rgba(240, 208, 138, .14), transparent 60%),
        rgba(190, 155, 70, .08);
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.bcrumbChips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 6px 6px;
    max-height: 140px;
    overflow: hidden;
}

.bcrumbChips .bcrumb {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    height: 34px;
    max-width: 340px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(0, 0, 0, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    color: rgba(233, 238, 252, .92);
    font-size: 12.8px;
    line-height: 1;
    letter-spacing: .15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    user-select: none;
    transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
    will-change: transform;
}

.bcrumbChips .bcrumb:hover {
    transform: translateY(-2px);
    border-color: rgba(240, 208, 138, .46);
    background:
        radial-gradient(140px 44px at 18% 50%, rgba(240, 208, 138, .20), transparent 62%),
        rgba(190, 155, 70, .10);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .26), 0 0 0 1px rgba(240, 208, 138, .12) inset;
}

.bcrumbChips .bcrumb.is-current {
    border-color: rgba(240, 208, 138, .58);
    background:
        radial-gradient(160px 50px at 18% 50%, rgba(240, 208, 138, .24), transparent 60%),
        rgba(190, 155, 70, .12);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .24), 0 0 0 1px rgba(240, 208, 138, .18) inset;
    cursor: default;
}

.bcrumbChips .bcrumb-ellipsis {
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px dashed rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .14);
    color: rgba(233, 238, 252, .65);
    display: inline-flex;
    align-items: center;
}

.bcrumbActions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap
}

.bcrumbActions .btn.small {
    height: 36px;
    padding: 8px 13px
}

/* STAGE */
.stage {
    padding: calc(var(--pad) + 2px);
    position: relative
}

.stageTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px
}

.stageTopRight {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.stage.is-switching {
    transform: translateY(2px);
    filter: saturate(.96) brightness(.98);
    opacity: .94;
    transition: opacity .13s ease, transform .13s ease, filter .13s ease
}

/* PROGRESS */
.progressBar {
    margin: 10px 0 14px
}

.progressTrack {
    height: 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    overflow: hidden;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, .35);
}

.progressFill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background:
        radial-gradient(160px 46px at 18% 50%, rgba(240, 208, 138, .55), transparent 60%),
        linear-gradient(90deg, rgba(233, 238, 252, .92), rgba(240, 208, 138, .78));
    box-shadow: 0 0 18px rgba(240, 208, 138, .18);
    transition: width .22s ease;
}

/* TITLES */
.stageTitle {
    margin: 25px 0 38px;
    font-size: clamp(20px, 3.1vw, 34px);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: .2px;
    max-width: 980px;
    color: rgba(233, 238, 252, .96);
}

/* ANSWERS */
.answers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px
}

.ans {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .08);
    background:
        radial-gradient(260px 100px at 18% 10%, rgba(240, 208, 138, .10), transparent 65%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.ans:hover {
    transform: translateY(-2px);
    border-color: rgba(240, 208, 138, .30);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .32)
}

.ans .label {
    font-weight: 950;
    margin-bottom: 2px;
    font-size: 15px
}

.ans.ans-yes {
    border-color: rgba(86, 214, 145, .40);
    box-shadow: 0 0 0 1px rgba(86, 214, 145, .12) inset;
    background:
        radial-gradient(420px 160px at 0% 50%, rgba(59, 220, 126, .16), transparent 55%),
        radial-gradient(260px 100px at 18% 10%, rgba(240, 208, 138, .08), transparent 65%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
}

.ans.ans-yes .label {
    color: rgba(164, 255, 203, .95)
}

.ans.ans-no {
    border-color: rgba(255, 98, 110, .40);
    box-shadow: 0 0 0 1px rgba(255, 98, 110, .10) inset;
    background:
        radial-gradient(420px 160px at 0% 50%, rgba(255, 98, 110, .14), transparent 55%),
        radial-gradient(260px 100px at 18% 10%, rgba(240, 208, 138, .08), transparent 65%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
}

.ans.ans-no .label {
    color: rgba(255, 170, 176, .95)
}

/* RESULT CARD (fallback) */
.resultCard {
    margin-top: 10px;
    border-radius: var(--r18);
    border: 1px solid rgba(59, 220, 126, .25);
    background:
        radial-gradient(1000px 260px at 30% 0%, rgba(59, 220, 126, .12), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
    padding: 16px 18px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}

.rTitle {
    font-weight: 950;
    letter-spacing: .2px;
    margin-bottom: 8px
}

.rText {
    color: rgba(233, 238, 252, .88);
    font-size: 15px;
    line-height: 1.45
}

/* TIPS PANEL */
#tipsPanel {
    border-radius: var(--r22)
}

#tipsPanel .panelHeader {
    padding: 14px var(--pad);
    background: rgba(0, 0, 0, .12)
}

#tipsText {
    padding: 12px var(--pad) 16px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(233, 238, 252, .86)
}

/* FINAL */
.finalScreen {
    padding: 6px 0 0
}

.finalBadge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(240, 208, 138, .30);
    background:
        radial-gradient(120px 40px at 20% 50%, rgba(240, 208, 138, .22), transparent 65%),
        rgba(255, 255, 255, .03);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
    margin-bottom: 10px;
}

.finalBadge .dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 35%, rgba(59, 220, 126, 1), rgba(27, 189, 98, .55));
    box-shadow: 0 0 0 3px rgba(59, 220, 126, .10);
}

.finalBadge .txt {
    font-weight: 950;
    color: rgba(233, 238, 252, .92);
    font-size: 12.5px
}

.finalTitle {
    font-size: clamp(26px, 3.8vw, 44px);
    font-weight: 950;
    line-height: 1.06;
    letter-spacing: .2px;
    margin-bottom: 38px
}

.finalCard {
    border-radius: var(--r22);
    border: 1px solid rgba(59, 220, 126, .22);
    background:
        radial-gradient(900px 280px at 20% 0%, rgba(59, 220, 126, .13), transparent 60%),
        radial-gradient(600px 220px at 80% 0%, rgba(240, 208, 138, .10), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
    box-shadow: var(--sh1);
    padding: 18px;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
}

.finalCard:before {
    content: "";
    position: absolute;
    inset: -2px;
    background:
        radial-gradient(520px 140px at 20% -10%, rgba(240, 208, 138, .14), transparent 55%),
        radial-gradient(520px 140px at 70% 0%, rgba(59, 220, 126, .10), transparent 60%);
    pointer-events: none;
}

.finalCardTop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px
}

.finalCardLabel {
    font-weight: 950;
    letter-spacing: .2px;
    color: rgba(233, 238, 252, .92)
}

.finalText {
    position: relative;
    color: rgba(233, 238, 252, .92);
    font-size: 18px;
    line-height: 1.45;
    font-weight: 700;
    padding: 14px 14px;
    border-radius: var(--r18);
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .20);
    margin-bottom: 10px;

}

.finalActions {
    position: relative;
    display: flex;
    gap: 10px;
    margin-top: 38px;
    flex-wrap: wrap
}

.finalActions .btn {
    padding: 12px 16px;
    font-size: 14px
}

/* TOAST */
.toast {
    position: fixed;
    left: 50%;
    bottom: 92px;
    transform: translateX(-50%) translateY(10px);
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .10);
    color: rgba(233, 238, 252, .92);
    box-shadow: 0 16px 46px rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
    z-index: 200;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0)
}

/* FAVORITES MODAL */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 180
}

.modal.show {
    display: block
}

.modalBackdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(8px)
}

.modalCard {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(860px, calc(100% - 24px));
    max-height: min(82vh, 760px);
    border-radius: var(--r22);
    border: 1px solid rgba(255, 255, 255, .10);
    background:
        radial-gradient(900px 260px at 20% 0%, rgba(240, 208, 138, .14), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
    box-shadow: var(--sh1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modalHead {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.modalTitle {
    font-weight: 950;
    font-size: 16px
}

.modalSub {
    color: rgba(233, 238, 252, .65);
    font-size: 12.5px;
    margin-top: 2px
}

.modalHeadActions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.modalBody {
    padding: 14px 16px;
    overflow: auto
}

.modalSearch input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(0, 0, 0, .20);
    color: rgba(233, 238, 252, .92);
}

.modalSearch input::placeholder {
    color: rgba(233, 238, 252, .55)
}

.modalList {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.favGroup {
    border-radius: var(--r18);
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .16);
    overflow: hidden
}

.favGroupHead {
    padding: 12px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.favGroupHead .t {
    font-weight: 950
}

.favGroupHead .c {
    color: rgba(233, 238, 252, .65);
    font-size: 12px
}

.favItem {
    padding: 12px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.favItem:first-child {
    border-top: 0
}

.favItem:hover {
    background: rgba(255, 255, 255, .03)
}

.favItem .txt {
    font-weight: 900;
    font-size: 13.5px;
    margin-bottom: 2px
}

.favItem .meta {
    color: rgba(233, 238, 252, .65);
    font-size: 12.5px;
    line-height: 1.35
}

.favItem .rm {
    border-radius: 999px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 90, 90, .25);
    background: rgba(255, 90, 90, .08);
    color: rgba(233, 238, 252, .92);
}

.favItem .rm:hover {
    border-color: rgba(255, 90, 90, .45)
}

/* QUICK ROUTER MODAL */
.qmodal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 190
}

.qmodal.show {
    display: block
}

.qbackdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(10px)
}

.qcard {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(680px, calc(100% - 24px));
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, .12);
    background:
        radial-gradient(900px 320px at 20% 0%, rgba(240, 208, 138, .18), transparent 60%),
        radial-gradient(900px 320px at 90% 0%, rgba(59, 220, 126, .10), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
    box-shadow: var(--sh1);
    overflow: hidden;
}

.qhead {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.qtitle {
    font-weight: 950;
    font-size: 16px;
    letter-spacing: .2px
}

.qsub {
    color: rgba(233, 238, 252, .70);
    font-size: 12.8px;
    margin-top: 3px;
    line-height: 1.35
}

.qclose {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(0, 0, 0, .18);
    color: rgba(233, 238, 252, .92);
}

.qclose:hover {
    border-color: rgba(240, 208, 138, .35);
    transform: translateY(-1px)
}

.qbody {
    padding: 16px 16px
}

.qstep {
    color: rgba(233, 238, 252, .65);
    font-size: 12.5px;
    margin-bottom: 8px
}

.qquestion {
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 950;
    letter-spacing: .2px;
    margin-bottom: 12px;
}

.qanswers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.qfoot {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    flex-wrap: wrap
}

.qresult {
    padding: 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, .10);
    background: rgba(0, 0, 0, .14);
}

.qresultTitle {
    font-weight: 950;
    letter-spacing: .2px;
    margin-bottom: 8px
}

.qresultText {
    color: rgba(233, 238, 252, .82);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px
}

.qresultActions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

/* RESPONSIVE */
@media (max-width: 980px) {
    .catGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .answers {
        grid-template-columns: 1fr
    }

    .panelHint {
        max-width: 45%
    }

    .trustRow {
        grid-template-columns: 1fr
    }
}

@media (max-width: 640px) {
    .searchRow {
        grid-template-columns: 1fr
    }

    .stageTop {
        flex-direction: column;
        align-items: stretch
    }

    .stageTopRight {
        justify-content: flex-start
    }

    .panelHint {
        display: none
    }

    .qanswers {
        grid-template-columns: 1fr
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important
    }
}

/* ==============================
   MOBILE FRIENDLY OVERRIDES v1
   paste at the very end of guide.css
================================ */

/* iOS safe areas */
:root {
    --safeTop: env(safe-area-inset-top, 0px);
    --safeBottom: env(safe-area-inset-bottom, 0px);
}

/* Better tap behavior on mobile */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    -webkit-tap-highlight-color: transparent;
}

/* Container: tighter on mobile */
@media (max-width: 640px) {
    .container {
        width: min(var(--max), calc(100% - 22px));
    }

    .appMain {
        padding: 14px 0 calc(12px + var(--safeBottom));
    }
}

/* TOPBAR: mobile layout */
@media (max-width: 640px) {
    .topbar {
        padding: calc(10px + var(--safeTop)) 0 10px;
    }

    .brand {
        gap: 10px;
        margin-bottom: 10px;
    }

    .logo {
        width: 38px;
        height: 38px;
        border-radius: 14px;
    }

    .brand h1 {
        font-size: 16px;
        line-height: 1.15;
    }

    .brand p {
        font-size: 12px;
        line-height: 1.2;
    }

    .searchRow {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .search {
        border-radius: 16px;
        /* pill looks too fat on mobile */
    }

    .search input {
        padding: 12px 40px 12px 40px;
        font-size: 14px;
    }

    /* buttons in topbar: full width & comfy */
    .btn {
        min-height: 44px;
        /* thumb-friendly */
    }

    .btn.small {
        min-height: 42px;
    }
}

/* HOME HERO: simplify spacing for mobile */
@media (max-width: 640px) {
    .heroCard {
        padding: 14px 14px;
        border-radius: 22px;
    }

    .heroTop {
        gap: 8px;
    }

    .heroKicker {
        padding: 7px 10px;
        font-size: 12px;
    }

    .heroBadges {
        gap: 6px;
    }

    .heroBadge {
        padding: 6px 9px;
        font-size: 11.5px;
    }

    .heroTitle {
        margin: 10px 0 6px;
        font-size: 24px;
        line-height: 1.12;
    }

    .heroSub {
        margin: 0 0 12px;
        font-size: 13.5px;
        line-height: 1.5;
    }

    /* if you keep actions: stack them */
    .heroActions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .heroBtn {
        width: 100%;
        justify-content: center;
    }

    /* Hint block часто лишний на мобиле, но оставим аккуратным */
    .heroHint {
        margin-top: 10px;
        padding: 10px 12px;
        border-radius: 16px;
        font-size: 12px;
    }
}

/* TRUST ROW: already becomes 1 col at 980, but tune mobile */
@media (max-width: 640px) {
    .trustCard {
        padding: 12px 12px;
        border-radius: 18px;
        gap: 10px;
    }

    .trustIcon {
        width: 38px;
        height: 38px;
        border-radius: 14px;
    }
}

/* SCENARIOS GRID: make it real phone UI */
@media (max-width: 720px) {
    .catGrid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
    }
}

@media (max-width: 640px) {
    .cat {
        padding: 14px;
        border-radius: 18px;
        min-height: 96px;
    }

    /* larger title + better line clamp */
    .cat h3 {
        font-size: 15px;
        line-height: 1.2;
        margin: 0 0 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cat p {
        font-size: 12.8px;
        line-height: 1.25;
    }

    .catSmall {
        margin-top: 6px;
        font-size: 12.4px;
        line-height: 1.3;
        color: rgba(233, 238, 252, .68);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .catIcon {
        width: 44px;
        height: 44px;
        border-radius: 16px;
        font-size: 18px;
        flex: 0 0 auto;
    }
}

/* BREADCRUMBS: tighter & wrap nicely */
@media (max-width: 640px) {
    .bcrumbBar {
        padding: 12px;
        border-radius: 18px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .bcrumbTrail {
        grid-template-columns: 40px 1fr;
    }

    .bcrumbChips {
        gap: 8px;
        padding: 4px;
        max-height: 120px;
    }

    .bcrumbChips .bcrumb {
        height: 32px;
        padding: 0 10px;
        font-size: 12.5px;
        max-width: 100%;
    }

    .bcrumbActions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .bcrumbActions .btn.small {
        height: 42px;
        padding: 8px 12px;
    }
}

/* FLOW: stage spacing & buttons on phone */
@media (max-width: 640px) {
    .stage {
        padding: 14px;
    }

    .stageTop {
        gap: 10px;
        margin-bottom: 10px;
    }

    .stageTopRight {
        gap: 8px;
    }

    .stageTitle {
        margin: 18px 0 16px;
        font-size: 22px;
        line-height: 1.12;
    }

    .answers {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 10px;
    }

    .ans {
        padding: 14px;
        border-radius: 18px;
        min-height: 58px;
    }

    .ans .label {
        font-size: 15px;
    }
}

/* Final screen: readable & not cramped */
@media (max-width: 640px) {
    .finalTitle {
        font-size: 28px;
        margin-bottom: 16px;
    }

    .finalCard {
        padding: 14px;
        border-radius: 20px;
    }

    .finalText {
        font-size: 16px;
        padding: 12px;
    }

    .finalActions {
        margin-top: 25px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .finalActions .btn {
        width: 100%;
        justify-content: center;
        min-height: 46px;
    }
}

/* Toast: keep above iOS bottom bar */
@media (max-width: 640px) {
    .toast {
        bottom: calc(16px + var(--safeBottom));
        width: calc(100% - 24px);
        max-width: 520px;
        text-align: center;
    }
}

/* Modals: better fit on phones */
@media (max-width: 640px) {

    .modalCard,
    .qcard {
        top: calc(50% + (var(--safeTop) / 2));
        width: calc(100% - 18px);
        border-radius: 22px;
    }

    .modalHead {
        gap: 10px;
    }

    .modalHeadActions {
        width: 100%;
    }

    .modalHeadActions .btn.small {
        width: 100%;
        justify-content: center;
    }
}

/* Small polish: prevent horizontal weirdness */
@media (max-width: 640px) {
    .panelHeader {
        padding: 12px 14px;
    }

    .panelHint {
        display: none;
        /* on phones it often truncates + steals space */
    }
}

.searchRow {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center
}

.search {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
    overflow: hidden;
}

.search input {
    width: 100%;
    padding: 12px 42px 12px 42px;
    border: 0;
    background: transparent;
    color: rgba(233, 238, 252, .95);
}

.search input::placeholder {
    color: rgba(233, 238, 252, .55)
}

.ic {
    width: 18px;
    height: 18px;
    opacity: .95;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.ic.left {
    left: 14px
}

.ic.right {
    right: 14px;
    cursor: pointer;
    opacity: .75
}

.ic.right:hover {
    opacity: 1
}

@media (max-width: 520px) {
    html {
        background-color: #070a0f !important;
        background-image:
            /* тёплый акцент сверху */
            radial-gradient(860px 520px at 78% -18%, rgba(202, 162, 75, .16), transparent 64%),

            /* большой мягкий синий снизу (без резкого края) */
            radial-gradient(1400px 900px at 50% 120%, rgba(84, 129, 255, .10), transparent 74%),

            /* дополнительный "туман" чтобы не было линии-стыка */
            radial-gradient(1200px 700px at 60% 70%, rgba(84, 129, 255, .04), transparent 70%),

            /* базовый тёмный слой */
            linear-gradient(180deg, #06080d 0%, #0a0f17 48%, #06080d 100%) !important;

        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        min-height: 100svh;
        overflow-x: hidden;
    }

    body {
        background: transparent !important;
        min-height: 100svh;
        overflow-x: hidden;
    }
}

/* ============================
   STAGE TOP — ONE LINE TOOLBAR (MOBILE)
============================ */

@media (max-width: 640px) {

    .stageTop {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    /* левая кнопка тоже часть строки */
    .stageTopLeft {
        flex: 0 0 auto;
    }

    /* правая группа — одна линия */
    .stageTopRight {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        flex: 1 0 auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ВСЕ кнопки — фиксированной ширины */
    .stageTop .btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* чуть компактнее, чтобы влезало больше */
    .stageTop .btn.small {
        padding: 8px 12px;
        font-size: 13px;
        height: 36px;
    }

    /* визуально скрываем скроллбар */
    .stageTop::-webkit-scrollbar,
    .stageTopRight::-webkit-scrollbar {
        display: none;
    }

    .stageTop {
        scrollbar-width: none;
    }
}

/* ============================
   STAGE TOP — HARD OVERRIDE (ONE LINE)
   paste at VERY END of guide.css
============================ */
@media (max-width: 640px) {

    /* перебиваем твой старый flex-direction: column */
    .stageTop {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    /* оба блока как "элементы строки", без ширины 100% */
    .stageTopLeft,
    .stageTopRight {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;

        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
    }

    /* кнопки никогда не должны пытаться ужиматься в перенос */
    .stageTop .btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    /* чуть компактнее */
    .stageTop .btn.small {
        height: 36px;
        padding: 8px 12px;
        font-size: 13px;
    }

    /* прячем скроллбар */
    .stageTop::-webkit-scrollbar {
        display: none;
    }

    .stageTop {
        scrollbar-width: none;
    }

}

/* ============================
   BREADCRUMBS — ORGANIC v2
   (paste at the VERY end)
============================ */

.bcrumbBar {
    padding: 12px 12px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .08);
    background:
        radial-gradient(900px 180px at 15% 0%, rgba(255, 255, 255, .06), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}

/* компоновка: слева домик, справа чипы */
.bcrumbTrail {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

/* домик — как часть системы */
.bcrumbRoot {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(0, 0, 0, .20);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
    user-select: none;
}

.bcrumbRoot:hover {
    transform: translateY(-1px);
    border-color: rgba(240, 208, 138, .35);
    background:
        radial-gradient(120px 46px at 30% 45%, rgba(240, 208, 138, .14), transparent 60%),
        rgba(190, 155, 70, .08);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ЧИПЫ: на десктопе 1 линия с мягким скроллом */
.bcrumbChips {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;

    padding: 6px 6px;
    border-radius: 18px;

    /* “единый лоток” */
    /* background: rgba(0, 0, 0, .12);
    border: 1px solid rgba(255, 255, 255, .06); */
    /* box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); */

    /* горизонтальный скролл без уродства */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.bcrumbChips::-webkit-scrollbar {
    display: none;
}

/* мягкое затухание по краям (ощущение “внутри”) */
.bcrumbChips {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

/* сами чипы — ниже, компактнее, “путь” */
.bcrumbChips .bcrumb {
    appearance: none;
    -webkit-appearance: none;
    height: 30px;
    max-width: 193px;
    padding: 0 10px;

    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);

    color: rgba(233, 238, 252, .88);
    font-size: 12.4px;
    line-height: 1;

    cursor: pointer;
    user-select: none;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.bcrumbChips .bcrumb:hover {
    transform: translateY(-1px);
    border-color: rgba(240, 208, 138, .30);
    background:
        radial-gradient(140px 44px at 18% 50%, rgba(240, 208, 138, .16), transparent 62%),
        rgba(190, 155, 70, .08);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .22), 0 0 0 1px rgba(240, 208, 138, .10) inset;
}

.bcrumbChips .bcrumb.is-current {
    border-color: rgba(240, 208, 138, .55);
    background:
        radial-gradient(160px 50px at 18% 50%, rgba(240, 208, 138, .22), transparent 60%),
        rgba(190, 155, 70, .12);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .24), 0 0 0 1px rgba(240, 208, 138, .18) inset;
    cursor: default;
}

/* если вдруг используешь ... */
.bcrumbChips .bcrumb-ellipsis {
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px dashed rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .14);
    color: rgba(233, 238, 252, .65);
    display: inline-flex;
    align-items: center;
}

/* ============================
     MOBILE: ВОЗВРАЩАЕМ WRAP (2+ строки)
  ============================ */
@media (max-width: 640px) {
    .bcrumbBar {
        padding: 12px;
        border-radius: 18px;
    }

    .bcrumbTrail {
        grid-template-columns: 38px 1fr;
        align-items: start;
    }

    .bcrumbRoot {
        width: 38px;
        height: 38px;
        border-radius: 14px;
    }

    .bcrumbChips {
        white-space: normal;
        /* ключ: разрешаем перенос */
        overflow: visible;
        /* без скролла */
        -webkit-mask-image: none;
        /* fade не нужен */
        mask-image: none;

        padding: 4px;
        gap: 8px;
    }

    .bcrumbChips .bcrumb {
        max-width: 100%;
    }
}

/* ===========================
   MOBILE BREADCRUMBS: ONE LINE + HORIZONTAL SCROLL
   (paste at the VERY END)
=========================== */
@media (max-width: 640px) {

    .bcrumbBar {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        border-radius: 18px !important;
        padding: 12px !important;
    }

    .bcrumbTrail {
        grid-template-columns: 38px 1fr !important;
        align-items: center !important;
    }

    .bcrumbRoot {
        width: 38px !important;
        height: 38px !important;
        border-radius: 14px !important;
    }

    /* ключ: ОДНА СТРОКА + горизонтальный скролл */
    .bcrumbChips {
        display: flex !important;
        flex-wrap: nowrap !important;
        /* запрет переноса */
        white-space: nowrap !important;
        /* на всякий */
        overflow-x: auto !important;
        /* скролл */
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;

        gap: 8px !important;
        padding: 6px !important;

        /* border-radius: 16px !important; */
        /* border: 1px solid rgba(255,255,255,.06) !important;
      background: rgba(0,0,0,.12) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; */

        /* убираем маску, она на мобилке часто выглядит странно */
        -webkit-mask-image: none !important;
        mask-image: none !important;

        scrollbar-width: none !important;
    }

    .bcrumbChips::-webkit-scrollbar {
        display: none;
    }

    /* чтобы чипы НЕ сжимались в кашу */
    .bcrumbChips .bcrumb {
        flex: 0 0 auto !important;
        /* фикс: не ужимать */
        height: 28px !important;
        padding: 0 10px !important;

        font-size: 11.8px !important;
        max-width: 210px !important;
        /* ограничиваем "батоны" */
        border-radius: 999px !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* визуальная подсказка что это "лента" */
    .bcrumbChips {
        position: relative !important;
    }

    .bcrumbChips::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 26px;
        pointer-events: none;
        /* background: linear-gradient(90deg, transparent, rgba(10,15,23,.85)); */
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;
    }

    /* действия под крошками если есть */
    .bcrumbActions {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    .bcrumb {
        max-width: 195px;
    }
}

.bcrumb.is-yes::after {
    content: "✔";
    color: #3ecf8e;
    margin-left: 6px;
    font-size: 12px;
}

.bcrumb.is-no {
    background: rgba(220, 80, 80, 0.22);
    border-color: rgba(220, 80, 80, 0.45);
    color: #ffd6d6;
}

:root {
    --txt-1: rgba(233, 238, 252, .92);
    --txt-2: rgba(233, 238, 252, .75);
    --txt-3: rgba(233, 238, 252, .60);
    --line: rgba(255, 255, 255, .10);
    --glass: rgba(10, 15, 23, .55);
    --glass2: rgba(10, 15, 23, .35);
    --shadow: 0 18px 70px rgba(0, 0, 0, .45);
    --rad-xl: 26px;
    --rad-lg: 20px;
    --rad-md: 16px;
}

/* Section wrapper (под твои panel/hero) */
.infoWrap {
    display: grid;
    gap: 16px;
    width: 100%;
}

/* Pretty info panel */
.infoPanel {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
    box-shadow: var(--shadow);
    border-radius: var(--rad-xl);
    overflow: hidden;
    position: relative;
}

.infoPanel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1200px 420px at 12% 0%, rgba(255, 255, 255, .08), transparent 60%),
        radial-gradient(900px 360px at 88% 10%, rgba(180, 150, 90, .10), transparent 60%);
    pointer-events: none;
    opacity: .9;
}

.infoHead {
    position: relative;
    padding: 18px 18px 12px 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.infoTitle {
    font-weight: 900;
    letter-spacing: .2px;
    color: var(--txt-1);
    font-size: 18px;
    line-height: 1.15;
    display: flex;
    gap: 10px;
    align-items: center;
}

.infoBadge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .22);
    color: var(--txt-2);
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
}

.infoBody {
    position: relative;
    padding: 0 18px 18px 18px;
    color: var(--txt-2);
    line-height: 1.55;
    font-weight: 600;
    font-size: 14px;
}

.infoBody p {
    margin: 10px 0;
}

.infoBody p:first-child {
    margin-top: 6px;
}

.infoBody b {
    color: var(--txt-1);
}

/* Grid with bullets */
.infoGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

@media (max-width: 900px) {
    .infoGrid {
        grid-template-columns: 1fr;
    }
}

.miniCard {
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(0, 0, 0, .18);
    border-radius: var(--rad-lg);
    padding: 14px 14px;
    backdrop-filter: blur(10px);
}

.miniTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.miniTitle {
    color: var(--txt-1);
    font-weight: 900;
    font-size: 14px;
    letter-spacing: .2px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.miniText {
    color: var(--txt-2);
    font-weight: 650;
}

/* Tags row */
.tagRow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.tag {
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .16);
    color: var(--txt-2);
    padding: 7px 10px;
    border-radius: 999px;
    font-weight: 750;
    font-size: 12px;
}

/* Donate block */
.donateBox {
    margin-top: 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(180deg, rgba(180, 150, 90, .12), rgba(0, 0, 0, .16));
    border-radius: var(--rad-lg);
    padding: 14px;
}

.donateTitle {
    color: var(--txt-1);
    font-weight: 950;
    font-size: 14px;
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.donateList {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.donateList a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .22);
    color: var(--txt-1);
    font-weight: 850;
    text-decoration: none;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
    will-change: transform;
}

.donateList a:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, .22);
    background: rgba(0, 0, 0, .28);
}

.donateHint {
    color: var(--txt-3);
    font-weight: 650;
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.45;
}

/* Small helper text under hero */
.homeAfterHero {
    margin-top: 14px;
}

/* Utility: hide on flow/final if needed (handled by JS optionally) */


@media (max-width: 640px) {

    /* Общая карточка */
    .infoPanel {
        border-radius: 22px;
    }

    /* Шапка */
    .infoHead {
        padding: 16px 16px 10px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .infoTitle {
        font-size: 16px;
        font-weight: 850;
        line-height: 1.2;
    }

    .infoBadge {
        font-size: 11px;
        padding: 6px 9px;
        opacity: .85;
    }

    /* Тело */
    .infoBody {
        padding: 0 16px 16px 16px;
        font-size: 13.5px;
        line-height: 1.6;
        font-weight: 520;
    }

    .infoBody p {
        margin: 12px 0;
    }

    .infoBody p:first-child {
        margin-top: 8px;
    }

    /* Акцентный текст */
    .infoBody b {
        font-weight: 700;
    }

    /* Сетка преимуществ */
    .infoGrid {
        margin-top: 14px;
        gap: 10px;
    }

    .miniCard {
        padding: 13px 13px;
        border-radius: 18px;
    }

    .miniTop {
        margin-bottom: 6px;
    }

    .miniTitle {
        font-size: 13px;
        font-weight: 800;
    }

    .miniText {
        font-size: 13px;
        line-height: 1.5;
        font-weight: 500;
    }

    /* Бейджи внутри карточек */
    .miniTop .infoBadge {
        font-size: 10.5px;
        padding: 5px 8px;
    }

    /* Теги симптомов */
    .tagRow {
        margin-top: 14px;
        gap: 6px;
    }

    .tag {
        font-size: 11.5px;
        padding: 6px 9px;
        font-weight: 650;
    }

}

/* === DONATE: living light (NO seams) === */

#infoDonate {
    position: relative;
    overflow: hidden;
    z-index: 0;
    /* важно: создаём стек слоёв без -1 */
    /* isolation: isolate;    можно убрать, часто оно и даёт “швы” */
}

/* поднимаем весь реальный контент выше фоновых псевдо-слоёв */
#infoDonate>* {
    position: relative;
    z-index: 1;
}

/* световая волна */
#infoDonate::before {
    content: "";
    position: absolute;
    inset: -70% -80%;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;

    background: radial-gradient(circle at 30% 50%,
            rgba(255, 215, 140, 0.18),
            transparent 58%);

    filter: blur(22px);
    /* убирает любые жесткие границы */
    transform: translate3d(-35%, 0, 0);
    /* 3d помогает с композитингом */
    opacity: 0;
    animation: donateLightWave 4s ease-in-out infinite;
}

/* мягкий глоу */
#infoDonate::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;

    box-shadow: 0 0 26px rgba(255, 215, 130, 0.18);
    opacity: .55;
    animation: donateGlowBreath 2s ease-in-out infinite;
}

@keyframes donateLightWave {
    0% {
        opacity: 0;
        transform: translate3d(-45%, 0, 0);
    }

    22% {
        opacity: .9;
    }

    55% {
        opacity: .75;
        transform: translate3d(35%, 0, 0);
    }

    78% {
        opacity: .9;
    }

    100% {
        opacity: 0;
        transform: translate3d(85%, 0, 0);
    }
}

@keyframes donateGlowBreath {

    0%,
    100% {
        opacity: .45;
    }

    50% {
        opacity: .75;
    }
}

/* ===== infoPanel text-only premium ===== */

#infoPanel .infoBody.infoText {
    padding-top: 2px;
}

#infoPanel .infoBody.infoText p {
    margin: 10px 0;
    color: rgba(233, 238, 252, .76);
    line-height: 1.65;
    font-size: 14.5px;
}

#infoPanel .infoBody.infoText .lead {
    margin-top: 6px;
    color: rgba(233, 238, 252, .88);
    font-size: 15.5px;
    line-height: 1.7;
}

#infoPanel .infoBody.infoText b {
    color: rgba(233, 238, 252, .95);
    font-weight: 850;
}

#infoPanel .infoBody.infoText a {
    color: rgba(233, 238, 252, .96);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    padding-bottom: 1px;
}

#infoPanel .infoBody.infoText a:hover {
    border-bottom-color: rgba(255, 255, 255, .35);
}

/* аккуратный разделитель вместо “плиток” */
#infoPanel .infoBody.infoText .divider {
    margin: 14px 0 12px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, .12), rgba(255, 255, 255, .0));
}

/* заголовок списка */
#infoPanel .infoBody.infoText .listTitle {
    margin: 0 0 8px;
    color: rgba(233, 238, 252, .88);
    font-weight: 900;
    letter-spacing: .2px;
}

/* список без “плиток”, но с красивыми маркерами */
#infoPanel .infoBody.infoText .cleanList {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

#infoPanel .infoBody.infoText .cleanList li {
    color: rgba(233, 238, 252, .74);
    line-height: 1.55;
    padding-left: 18px;
    position: relative;
}

#infoPanel .infoBody.infoText .cleanList li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: rgba(255, 215, 130, 0.9);
    box-shadow: 0 0 14px rgba(255, 215, 130, 0.22);
    transform: translateY(-50%);
    opacity: .85;
}

/* “Важно” как спокойная заметка */
#infoPanel .infoBody.infoText .note {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    border-radius: 16px;
    color: rgba(233, 238, 252, .72);
    line-height: 1.55;
}

/* чуть компактнее на мобиле */
@media (max-width: 640px) {
    #infoPanel .infoBody.infoText p {
        font-size: 14px;
    }

    #infoPanel .infoBody.infoText .lead {
        font-size: 15px;
    }
}

/* =========================================================
   FAVORITES MODAL (#favModal) — FULL OVERRIDE (MOBILE FIRST)
   PASTE AT THE VERY END OF guide.css
========================================================= */

#favModal.modal.show {
    display: block !important;
}

/* база модалки (и на десктопе тоже пусть будет аккуратно) */
#favModal .modalBackdrop {
    background: rgba(0, 0, 0, .58) !important;
    backdrop-filter: blur(10px) !important;
}

#favModal .modalCard {
    border-radius: 22px !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    background:
        radial-gradient(900px 260px at 20% 0%, rgba(240, 208, 138, .14), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)) !important;
    box-shadow: 0 18px 70px rgba(0, 0, 0, .45) !important;
    overflow: hidden !important;
}

/* ===== MOBILE ===== */
@media (max-width: 640px) {

    /* карточка: максимум места по высоте */
    #favModal .modalCard {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;

        width: calc(100% - 14px) !important;
        max-height: calc(92svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;

        border-radius: 22px !important;
    }

    /* =========================
     HEADER: нормальная шапка
     ========================= */

    #favModal .modalHead {
        padding: 12px 12px !important;
        border-bottom: 1px solid rgba(255, 255, 255, .08) !important;

        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "title actions"
            "sub   actions" !important;
        gap: 6px 10px !important;
        align-items: start !important;
    }

    #favModal .modalTitle {
        grid-area: title !important;
        font-weight: 950 !important;
        font-size: 16px !important;
        line-height: 1.12 !important;
        margin: 0 !important;
    }

    #favModal .modalSub {
        grid-area: sub !important;
        font-size: 12px !important;
        color: rgba(233, 238, 252, .65) !important;
        margin: 0 !important;
    }

    #favModal .modalHeadActions {
        grid-area: actions !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    /* СНОСИМ твой "width:100%" железно */
    #favModal .modalHeadActions .btn.small {
        width: auto !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 7px 12px !important;
        font-size: 12.8px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        justify-content: center !important;
    }

    /* Крестик компактным квадратом */
    #favModal #favCloseBtn.btn.small {
        width: 36px !important;
        padding: 0 !important;
        border-radius: 14px !important;
    }

    /* =========================
     BODY: паддинги + скролл
     ========================= */

    #favModal .modalBody {
        padding: 12px 12px !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* =========================
     SEARCH
     ========================= */

    #favModal .modalSearch {
        margin-bottom: 10px !important;
    }

    #favModal .modalSearch input {
        width: 100% !important;
        padding: 11px 12px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(255, 255, 255, .10) !important;
        background: rgba(0, 0, 0, .22) !important;
        color: rgba(233, 238, 252, .92) !important;
        font-size: 14px !important;
    }

    #favModal .modalSearch input::placeholder {
        color: rgba(233, 238, 252, .52) !important;
    }

    /* =========================
     GROUP
     ========================= */

    #favModal .modalList {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 0 !important;
    }

    #favModal .favGroup {
        border-radius: 18px !important;
        border: 1px solid rgba(255, 255, 255, .08) !important;
        background: rgba(0, 0, 0, .16) !important;
        overflow: hidden !important;
    }

    #favModal .favGroupHead {
        padding: 10px 10px !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 10px !important;
        border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    }

    #favModal .favGroupHead .t {
        font-weight: 950 !important;
        font-size: 13.5px !important;
        line-height: 1.25 !important;
        min-width: 0 !important;
    }

    #favModal .favGroupHead .c {
        flex: 0 0 auto !important;
        font-size: 12px !important;
        color: rgba(233, 238, 252, .65) !important;
        white-space: nowrap !important;
    }

    /* =========================
     ITEM: делаем КОЛОНКОЙ
     ========================= */

    #favModal .favItem {
        padding: 10px 10px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;

        gap: 10px !important;
        cursor: default !important;

        border-top: 1px solid rgba(255, 255, 255, .06) !important;
    }

    #favModal .favItem:hover {
        background: rgba(255, 255, 255, .03) !important;
    }

    /* контейнер текста */
    #favModal .favItem>div {
        min-width: 0 !important;
    }

    #favModal .favItem .txt {
        font-weight: 900 !important;
        font-size: 13.6px !important;
        line-height: 1.35 !important;
        margin: 0 0 4px 0 !important;
    }

    #favModal .favItem .meta {
        font-size: 12.6px !important;
        line-height: 1.45 !important;
        color: rgba(233, 238, 252, .68) !important;
    }

    /* =========================
     REMOVE BUTTON: снизу на всю ширину
     ========================= */

    #favModal .favItem .rm {
        width: 100% !important;
        min-height: 40px !important;
        padding: 10px 12px !important;

        border-radius: 14px !important;
        border: 1px solid rgba(255, 90, 90, .28) !important;
        background: rgba(255, 90, 90, .10) !important;
        color: rgba(233, 238, 252, .92) !important;

        font-weight: 900 !important;
        text-align: center !important;
    }

    #favModal .favItem .rm:hover {
        border-color: rgba(255, 90, 90, .50) !important;
        background: rgba(255, 90, 90, .14) !important;
    }
}

/* чтобы на телефонах не было "залипания" hover */
@media (hover: none) {
    #favModal .favItem:hover {
        background: transparent !important;
    }
}

/* iOS anti-zoom: главный поиск */
#q {
    font-size: 16px !important;
    line-height: 1.2;
}

/* На всякий: если .search задаёт font-size меньше, не даём input унаследовать */
.search #q {
    font-size: 16px !important;
}

/* Иногда помогает убрать "умные" штуки iOS */
#q {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}