/* additions for the app pages on top of the site styles (no inline styles: the CSP forbids them) */
.stack { display: flex; flex-direction: column; gap: 18px; }
.auth-title { font-size: clamp(26px, 4vw, 34px); }
.muted-note { font-size: 15px; color: var(--muted); }
.app-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.app-actions .who { font-size: 15px; color: var(--muted); }
.totp-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.totp-qr { width: 220px; height: 220px; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: #fff; display: grid; place-items: center; }
.totp-qr svg { width: 100%; height: 100%; display: block; }
.totp-manual summary { cursor: pointer; color: var(--primary); font-size: 15px; }
.totp-manual code { font-size: 15px; word-break: break-all; background: var(--bg-alt); padding: 2px 6px; border-radius: 6px; }
@media (max-width: 1024px) { .app-actions { display: flex; } }
@media (max-width: 520px) { .app-actions .who { display: none; } }
.stack-sm { display: flex; flex-direction: column; gap: 12px; }
.stack-xs { display: flex; flex-direction: column; gap: 6px; }
.add-row { align-items: flex-end; }
.add-row .field { flex: 1; min-width: 220px; }
.client-list { display: flex; flex-direction: column; gap: 14px; }
.client-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.badge.ok { background: #E8F6EF; color: var(--ok); }
.badge.wait { background: #FFF6CC; color: #7A5A00; }
.invite-box { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; padding-top: 6px; border-top: 1px solid var(--line); margin-top: 6px; }
.invite-qr { width: 220px; height: 220px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.invite-qr svg { width: 100%; height: 100%; display: block; }
.c-url { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); }
.join-notes { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--muted); }
@media (max-width: 640px) { .invite-box { grid-template-columns: minmax(0, 1fr); } .invite-qr { width: 200px; height: 200px; } }
.verify-wrap { max-width: 980px; margin: 0 auto 18px; }
.verify-msg { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
/* registration: who you are */
.role-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role-opt { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; cursor: pointer; font-size: 14px; color: var(--muted); }
.role-opt b { color: var(--ink); font-size: 16px; }
.role-opt input { position: absolute; opacity: 0; pointer-events: none; }
.role-opt:has(input:checked) { border: 2px solid var(--primary); background: var(--primary-soft); padding: 13px 15px; }
.role-opt:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }
@media (max-width: 520px) { .role-pick { grid-template-columns: 1fr; } }

/* specialist: the code card */
.h-sub { font-size: 22px; }
.code-card { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.code-qr { width: 200px; height: 200px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 18px; display: block; }
.code-qr svg { width: 100%; height: 100%; display: block; }
.code-big { font-size: 34px; font-weight: 700; letter-spacing: .08em; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .code-card { grid-template-columns: minmax(0, 1fr); } }

/* client: specialists and the scanner */
.link-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.link-row b { margin-right: auto; color: var(--ink); }
.scanner { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.scanner video { width: 100%; max-width: 360px; border-radius: 16px; background: #000; }
.specialist-card { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 16px; background: var(--primary-soft); }
.specialist-card b { font-size: 22px; color: var(--primary-deep); }

/* install page */
.app-head { display: flex; gap: 16px; align-items: center; }
.app-head img { border-radius: 16px; flex: none; }
.install-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.store-row { gap: 10px; }
/* two apps, one site: the header shows the icon of the app in use (html[data-app] is set by role.js) */
.logo img { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.logo .logo-client { box-shadow: 0 0 0 1px var(--line); }
html[data-app="pro"] .logo .logo-client, html:not([data-app="pro"]) .logo .logo-pro { display: none; }
.app-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.app-opt { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--muted); }
.app-opt img { border-radius: 12px; flex: none; box-shadow: 0 0 0 1px var(--line); }
.app-opt b { display: block; color: var(--ink); }
.app-opt small { font-size: 13px; }
html[data-app="client"] .app-opt[data-app-opt="client"], html[data-app="pro"] .app-opt[data-app-opt="pro"] { border: 2px solid var(--primary); background: var(--primary-soft); padding: 11px 13px; }
@media (max-width: 520px) { .app-pick { grid-template-columns: 1fr; } }

/* ---------- the diary ---------- */
.app-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.app-tabs a { padding: 9px 16px; border-radius: 999px; text-decoration: none; color: var(--text); font-weight: 600; font-size: 15px; }
.app-tabs a[aria-current="page"] { background: var(--primary); color: #fff; }
.dream-list { display: flex; flex-direction: column; gap: 10px; }
.dream-item { display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; cursor: pointer; }
.dream-item:hover:not([disabled]) { border-color: var(--primary); }
.dream-item[disabled] { cursor: default; opacity: .75; }
.dream-item b { color: var(--ink); font-size: 17px; }
.d-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); }
.empty-diary { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding: 8px 0; }
.dream-full { display: flex; flex-direction: column; gap: 12px; }
.dream-full h3 { margin-top: 10px; font-size: 18px; }
.d-title { font-size: 26px; }
.d-text { white-space: pre-wrap; font-size: 18px; line-height: 1.6; color: var(--ink); }
.d-list { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.d-row dt { font-size: 14px; color: var(--muted); }
.d-row dd { margin: 0; white-space: pre-wrap; color: var(--ink); }
.d-image { border-left: 3px solid var(--primary-soft); padding: 4px 0 4px 14px; display: flex; flex-direction: column; gap: 6px; }
.d-image p { margin: 0; white-space: pre-wrap; }
.record { display: flex; flex-direction: column; gap: 16px; }
.rec-steps button { border: 0; font: inherit; font-size: 14px; padding: 6px 12px; border-radius: 999px; background: var(--bg-alt); color: var(--muted); font-weight: 600; cursor: pointer; }
.rec-steps button.on { background: var(--primary); color: #fff; }
.rec-steps button.done { background: var(--primary-soft); color: var(--primary); }
.seg-pick { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--line); align-self: flex-start; }
.seg-pick button { border: 0; background: transparent; font: inherit; font-weight: 600; padding: 9px 20px; border-radius: 999px; cursor: pointer; color: var(--muted); }
.seg-pick button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.voice-box { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px; border-radius: 16px; background: var(--primary-soft); }
.voice-box p { flex-basis: 100%; margin: 0; }
.voice-box.recording { background: #FDECEC; }
.rec-time { font-size: 22px; font-weight: 700; color: #B42318; font-variant-numeric: tabular-nums; }
.field textarea, .field select { font: inherit; font-weight: 400; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--bg); resize: vertical; }
.field textarea:focus, .field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.dream-text { min-height: 180px; font-size: 17px; line-height: 1.6; }
.field-short { max-width: 280px; }
fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field legend { font-weight: 600; color: var(--ink); margin-bottom: 8px; padding: 0; }
.radio-row, .vis-list, .link-list { display: flex; flex-direction: column; gap: 10px; font-weight: 400; }
.link-list { max-height: 260px; overflow-y: auto; padding-right: 6px; }
.check input[type="radio"] { accent-color: var(--primary); }
.image-card { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.image-card .row { justify-content: space-between; }
.add-image input { flex: 1; min-width: 180px; font: inherit; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; }
.rec-nav { padding-top: 6px; border-top: 1px solid var(--line); }
.client-dreams { padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 520px) { .app-tabs a { padding: 8px 12px; font-size: 14px; } .d-title { font-size: 22px; } }

/* ---------- series and search ---------- */
.inner-tabs button { border: 0; background: transparent; font: inherit; padding: 8px 14px; border-radius: 999px; color: var(--text); font-weight: 600; font-size: 15px; cursor: pointer; }
.inner-tabs button[aria-current="page"] { background: var(--primary); color: #fff; }
.inner { padding-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.insight { display: flex; flex-direction: column; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.insight:last-child { border-bottom: 0; }
.insight h3 { font-size: 19px; }
.series { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--bg-alt); }
.series-head, .month-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.series-head b, .month-head b { color: var(--ink); font-size: 17px; }
.series-line { display: flex; gap: 8px; flex-wrap: wrap; }
.dream-chip { font: inherit; font-size: 14px; text-align: left; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 7px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.dream-chip:hover:not([disabled]) { border-color: var(--primary); }
.dream-chip.fact { color: var(--muted); border-style: dashed; cursor: default; }
.image-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-btn { font: inherit; font-size: 14px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--primary-soft); color: var(--primary-deep); cursor: pointer; }
.chip-btn b { margin-left: 4px; }
.chip-btn:hover { border-color: var(--primary); }
.months { display: flex; flex-direction: column; gap: 14px; }
.month { display: flex; flex-direction: column; gap: 8px; }
.month-bar { flex: 1 1 120px; max-width: 220px; height: 8px; border-radius: 99px; background: var(--bg-alt); overflow: hidden; align-self: center; }
.month-fill { display: block; height: 100%; width: var(--w, 0); background: var(--primary); border-radius: 99px; }
.search-form { display: flex; flex-direction: column; gap: 10px; }
.search-row input { flex: 1; min-width: 0; font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.search-row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.filters summary { cursor: pointer; color: var(--primary); font-weight: 600; }
.filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 10px; align-items: end; }
.filter-grid input[type="date"] { font: inherit; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; }
.search-results { display: flex; flex-direction: column; gap: 10px; }
.hit { font-size: 15px; color: var(--text); }
mark { background: #FFF1A8; color: inherit; padding: 0 2px; border-radius: 3px; }
@media (max-width: 640px) { .filter-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- the specialist's notebook ---------- */
.notebook-box { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; background: #F7F6FB; border: 1px dashed var(--line); }
.nb-head { justify-content: space-between; align-items: baseline; }
.nb-head h3 { font-size: 18px; }
.nb-note, .nb-hyp { font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); resize: vertical; }
.nb-note:focus, .nb-hyp:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.nb-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-list { display: flex; flex-direction: column; gap: 10px; }
.ct-item { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.ct-form { padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.ct-form .field input { font: inherit; font-weight: 400; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; }
.btn-sm { padding: 7px 14px; font-size: 14px; }
.ct-line { display: flex; gap: 8px; flex-wrap: wrap; }
.ct-chip { font-size: 14px; padding: 6px 10px; border-radius: 12px; background: #F3EEFB; color: var(--ink); border: 1px dashed #CFC4E6; }

/* ---------- the client's dream card: a workspace ---------- */
.card-top { justify-content: space-between; align-items: center; }
.saved-flash { min-height: 1em; }
.ws { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.ws h3 { font-size: 19px; }
.guided { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: var(--bg-alt); border: 1px solid var(--line); }
.guided-head { justify-content: space-between; align-items: center; }
.guided textarea { font: inherit; font-size: 17px; line-height: 1.55; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); resize: vertical; min-height: 130px; }
.guided textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.q-big { font-size: 21px; line-height: 1.4; font-weight: 600; color: var(--ink); margin: 0; }
.src-text { padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); max-height: 320px; overflow-y: auto; user-select: text; -webkit-user-select: text; }
.src-text::selection { background: #FFF1A8; }
.suggest { display: flex; flex-direction: column; gap: 8px; }
.pic-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.pic-pick button { font: inherit; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--primary); cursor: pointer; }
.pic-pick button:hover { border-color: var(--primary); }
.pic-pick button[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.pic-pick button span { color: inherit; }
.pic-pick .pic-none { color: var(--muted); justify-content: center; }
.pic-badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.story-item { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); }
.story-item b { color: var(--ink); font-size: 17px; }
.story-text { font-size: 16px; }
.help-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.pw-form { max-width: 420px; }
@media (max-width: 520px) { .q-big { font-size: 19px; } .guided { padding: 12px; } .pic-pick { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); } }

/* ---------- near words in search ---------- */
.near-box { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--bg-alt); }
.near-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.near-row b { color: var(--ink); margin-right: 4px; }
.near-chip { font: inherit; font-size: 14px; padding: 5px 11px; border-radius: 999px; border: 1px dashed var(--line); background: var(--bg); color: var(--muted); cursor: pointer; }
.near-chip[aria-pressed="true"] { border: 1px solid var(--primary); background: var(--primary-soft); color: var(--primary-deep); }
mark.near { background: transparent; border-bottom: 2px dotted var(--primary); border-radius: 0; }
.own-pic { margin: 0; }
.own-pic img { display: block; max-width: 100%; max-height: 480px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-alt); }
.file-btn { cursor: pointer; }

/* ---------- the specialist's cabinet: client page, markup, maps, library, reader, export ---------- */
.pro-tabs a { font-size: 14px; padding: 7px 12px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag-label { min-width: 110px; font-weight: 600; color: var(--ink); font-size: 14px; }
.tag { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 14px; padding: 4px 6px 4px 11px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-deep); border: 1px solid transparent; }
.tag button { border: 0; background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 999px; }
.tag button:hover { background: rgba(27, 42, 107, .12); }
.tag.sug { background: var(--bg); border: 1px dashed var(--primary); color: var(--primary); cursor: pointer; padding: 4px 11px; }
.tag-input { font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; width: 130px; background: var(--bg); }
.tag-input.wide { width: auto; flex: 1; min-width: 200px; border-radius: 12px; }
.fig-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.fig-row input { font: inherit; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.parallel { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.parallel p { margin: 0; }
.field-inline { flex-direction: row; align-items: center; gap: 8px; }
.field-inline select { padding: 7px 10px; }
.badge.motif { background: #EEF3E8; color: #2F5A1E; }
.grow { flex: 1; min-width: 0; }
.passage { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.passage p { margin: 0; white-space: pre-wrap; }
.lib-hit { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); }
.lib-results { display: flex; flex-direction: column; gap: 10px; }
.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.kb-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); }
.kb-card p { margin: 0; }
.kb-card ul { margin: 0; padding-left: 18px; font-size: 14px; }
.vol { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; border-radius: 8px; background: var(--primary); color: #fff; font-weight: 700; font-size: 14px; padding: 0 6px; }
.text-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.text-item { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; color: var(--ink); }
.text-item:hover { border-color: var(--primary); }
.link-btn { font: inherit; border: 0; background: transparent; color: var(--primary); cursor: pointer; padding: 0; text-align: left; font-weight: 600; }
body.no-scroll { overflow: hidden; }
.reader-back { position: fixed; inset: 0; background: rgba(13, 22, 56, .45); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.reader { background: var(--bg); border-radius: 20px; width: min(860px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: var(--shadow); }
.reader-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.reader-body { overflow-y: auto; padding: 16px 18px 24px; display: flex; flex-direction: column; gap: 10px; }
.reader-text p { white-space: pre-wrap; line-height: 1.65; margin: 0 0 12px; font-size: 16px; }
.reader-text .found-place { background: #FFF8D6; border-radius: 8px; padding: 6px 8px; }
.pager { justify-content: space-between; }
.tl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.timeline { display: block; }
.tl-grid { stroke: var(--line); }
.tl-label, .tl-row { font-size: 11px; fill: var(--muted); font-family: inherit; }
.tl-dream { fill: var(--primary); }
.tl-dream.fact { fill: var(--bg); stroke: var(--primary); stroke-width: 2; }
.tl-dream.night { fill: #9A3412; }
.tl-dream.initial { stroke: #F5B700; stroke-width: 3; }
.tl-session { fill: #157F55; }
.tl-ct { fill: #8B8FA8; }
.tl-ct.sup { fill: #F5B700; }
.tl-legend { gap: 14px; font-size: 13px; color: var(--muted); }
.tl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 12px; height: 12px; }
.lg.dream { border-radius: 50%; background: var(--primary); }
.lg.dream.initial { box-shadow: 0 0 0 2px #F5B700; }
.lg.dream.night { background: #9A3412; }
.lg.dream.fact { background: var(--bg); border: 2px solid var(--primary); }
.lg.session { background: #157F55; transform: rotate(45deg); width: 10px; height: 10px; }
.lg.ct { background: #8B8FA8; }
.lg.ct.sup { background: #F5B700; }
.heat-wrap { overflow-x: auto; }
.motif-map { border-collapse: separate; border-spacing: 3px; font-size: 14px; }
.motif-map th { font-weight: 600; text-align: left; white-space: nowrap; color: var(--ink); padding: 2px 6px; }
.motif-map thead th { font-size: 12px; color: var(--muted); font-weight: 500; text-align: center; }
.hc { width: 40px; height: 32px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; }
.hc:disabled { cursor: default; }
.hc.c0 { background: var(--bg-alt); }
.hc.c1 { background: #D6DCF0; }
.hc.c2 { background: #A9B5E0; }
.hc.c3 { background: #6E7FC4; color: #fff; }
.hc.c4 { background: var(--primary); color: #fff; }
.sub-dream { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sub-text { font-size: 15px; }
.fig-line { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 10px; font-size: 14px; }
.myth-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
table.plain { border-collapse: collapse; width: 100%; font-size: 14px; }
table.plain th, table.plain td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.plain th { color: var(--muted); font-weight: 600; }
.export-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; align-items: start; }
.export-right { position: sticky; top: 12px; }
.ex-prev { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; max-height: 70vh; overflow-y: auto; background: var(--bg); line-height: 1.55; }
.ex-prev:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.ex-prev h1 { font-size: 22px; }
.ex-prev h2 { font-size: 18px; margin-top: 20px; }
.ex-prev h3 { font-size: 16px; margin-top: 12px; }
.repl { flex-wrap: nowrap; }
.repl input { flex: 1; min-width: 0; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
@media (max-width: 900px) { .export-grid, .myth-grid { grid-template-columns: minmax(0, 1fr); } .export-right { position: static; } }
@media (max-width: 640px) { .fig-row { grid-template-columns: minmax(0, 1fr); } .fig-line { grid-template-columns: minmax(0, 1fr); gap: 2px; } .tag-label { min-width: 0; width: 100%; } .reader-back { padding: 0; } .reader { max-height: 100vh; height: 100%; border-radius: 0; } }
@media print {
  body.printing * { visibility: hidden; }
  body.printing #ex-prev, body.printing #ex-prev * { visibility: visible; }
  body.printing #ex-prev { position: absolute; left: 0; top: 0; width: 100%; max-height: none; overflow: visible; border: 0; padding: 0; }
}
.filter-grid > * { min-width: 0; }
.field select, .field input { max-width: 100%; min-width: 0; }
.field-inline { flex-wrap: wrap; max-width: 100%; }
.field-inline select { flex: 1 1 160px; }
@media (max-width: 640px) { .own-form .filter-grid, .card-form .filter-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- own account ---------- */
.btn-danger { background: #B42318; color: #fff; border: 1px solid #B42318; }
.btn-danger:hover { background: #912018; }
.danger-zone { border-top-color: #F4C7C3; }
.danger-link { color: #B42318; }
details > summary.link-btn { list-style: none; display: inline-block; }
details > summary.link-btn::-webkit-details-marker { display: none; }
details[open] > summary.link-btn { margin-bottom: 10px; }
.client-card.ended { opacity: .85; background: var(--bg-alt); }
.dream-item.pending { cursor: default; border-style: dashed; }

/* ---------- the owner panel ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stat-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--bg-alt); border: 1px solid var(--line); }
.stat-tile b { font-size: 24px; color: var(--ink); }
.stat-tile span { font-size: 13px; color: var(--muted); }
.stat-tile.warn { background: var(--warn-soft); border-color: #F4C7A3; }

/* ---------- language switcher ---------- */
.lang-pick { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--line); margin-left: auto; margin-right: 10px; }
.lang-pick button { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; padding: 5px 9px; border-radius: 999px; cursor: pointer; color: var(--muted); }
.lang-pick button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.auth-box > .lang-pick { align-self: flex-end; margin: 0; }
@media (max-width: 520px) { .lang-pick { margin-right: 6px; } .lang-pick button { font-size: 12px; padding: 4px 6px; } }

/* ---------- protection from capture (assets/guard.js) ---------- */
html.guard body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.guard input, html.guard textarea, html.guard [contenteditable="true"], html.guard .src-text { -webkit-user-select: text; user-select: text; }
.guard-mark { position: fixed; inset: -20%; z-index: 300; pointer-events: none; display: flex; flex-wrap: wrap; gap: 70px 60px; align-content: flex-start; transform: rotate(-24deg); opacity: .07; overflow: hidden; }
.guard-mark span { font-size: 15px; font-weight: 600; color: #101828; white-space: nowrap; }
html.guard-cover body > * { visibility: hidden !important; }
html.guard-cover body { background: var(--bg-alt) !important; }
@media print { html.guard body:not(.printing) * { visibility: hidden !important; } }

/* ---------- subscription ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.plan-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); align-items: flex-start; }
.plan-card.best { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.plan-card p { margin: 0; }
.plan-price { font-size: 26px; font-weight: 700; color: var(--ink); }
.billing-bar { margin: 0; }
html.pro-blocked .code-card, html.pro-blocked #requests-box { display: none; }
.pay-remind { width: min(520px, 100%); }
.pay-remind h2 { font-size: 22px; }
.receipt-form { flex-wrap: nowrap; }
.receipt-form input { flex: 1; min-width: 140px; font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; }

/* phones: the cabinet takes the whole width (no card inside the page), and the five recording steps fit in one
   scrollable row, so the field for the dream itself is on the first screen */
@media (max-width: 600px) {
  body .auth { padding: 0; background: var(--bg); min-height: 0; }
  body .auth-box, body .auth-box.wide { border-radius: 0; box-shadow: none; padding: 16px 16px 32px; gap: 16px; }
  #client > .eyebrow, #therapist > .eyebrow { display: none; }
  .auth-title { font-size: 24px; }
  .rec-steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px; }
  .rec-steps::-webkit-scrollbar { display: none; }
  .rec-steps button { flex: none; font-size: 13px; padding: 6px 11px; }
  .lang-pick button { min-height: 34px; min-width: 32px; padding: 4px 5px; }
  body .top .wrap { gap: 8px; }
  .app-actions { margin-left: 4px; }
  .app-actions .btn { padding: 7px 12px; font-size: 14px; min-height: 36px; }
  .top .logo { font-size: 18px; gap: 8px; flex-shrink: 0; }
  table.plain { display: block; max-width: 100%; overflow-x: auto; }
}

/* «Показать» inside a password field; a field with a mistake is outlined in red */
.pw-wrap { position: relative; display: flex; flex-direction: column; }
.pw-wrap input { padding-right: 96px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--primary); font: inherit; font-size: 14px; font-weight: 600; padding: 8px 10px; cursor: pointer; border-radius: 8px; }
.field input[aria-invalid="true"] { border-color: #B42318; box-shadow: 0 0 0 3px #FEE4E2; }
.check input[aria-invalid="true"] + span { color: #B42318; }

/* the test copy test.sonimif.ru (assets/app.js) */
.test-copy { background: #FEF0C7; color: #7A2E0E; text-align: center; font-size: 14px; font-weight: 600; padding: 8px 16px; }