/* =========================================================
   OPORA — shared design system
   Used by: index.html, meni-vazhko.html, korysne.html, profile.html
   NOT used by emotion-wheel.html (it keeps its own embedded,
   already-approved styles untouched).
   ========================================================= */

:root{
  /* --- brand tokens — do not introduce colors outside this set --- */
  --color-deep-olive: #464B35;
  --color-olive: #6B684E;
  --color-sage: #989580;
  --color-warm-cream: #F4EFE6;
  --color-sand: #C7BDAA;

  /* --- semantic aliases --- */
  --bg: var(--color-warm-cream);
  --bg-soft: #ECE4D6;
  --panel: #F1EBE0;
  --panel-border: var(--color-sand);
  --ink: var(--color-deep-olive);
  --ink-dim: var(--color-olive);
  --accent: var(--color-olive);

  /* --- spacing scale --- */
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;

  /* --- radii --- */
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* --- shadow --- */
  --shadow-soft: 0 10px 30px rgba(70, 75, 53, 0.10);

  /* --- fonts --- */
  --font-display: 'Bodoni Moda', serif;   /* big brand headings */
  --font-accent: 'Montserrat', sans-serif; /* light decorative accents */
  --font-body: 'Manrope', system-ui, sans-serif; /* everything else */
}

*{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }

/* --- typography --- */
.eyebrow{
  font-family: var(--font-accent);
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--accent);
  margin: 0 0 8px;
}
h1.display{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 6vw, 40px);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
h2.display{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 5vw, 28px);
  margin: 0 0 6px;
}
p.lead{
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

/* --- page shell --- */
.app{
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) 120px;
}

/* --- cards --- */
.card{
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
   margin-bottom: 16px; 
}
.card + .card{ margin-top: var(--space-md); }
.card .eyebrow{ margin-bottom: 10px; }
.card p.lead{ margin-bottom: var(--space-md); }

.card-soft{
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* --- buttons --- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
  width: 100%;
}
.btn:active{ transform: scale(0.98); }
.btn-primary{
  background: var(--color-deep-olive);
  color: var(--color-warm-cream);
}
.btn-secondary{
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--panel-border);
}
@media (hover: hover) and (pointer: fine){
  .btn:hover{ opacity: .92; }
}

/* --- bottom navigation --- */
.bottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--panel);
  border-top: 1px solid var(--panel-border);
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
  z-index: 50;
}
.bottom-nav a{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  font-size: 11.5px;
  font-weight: 600;
  min-width: 64px;
}
.bottom-nav a svg{ width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.bottom-nav a.active{ color: var(--color-deep-olive); }
.bottom-nav a.active svg{ stroke-width: 2; }

/* --- back navigation link (used on every sub-page) --- */
.back-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
  padding: 10px 4px;
  margin: -10px 0 var(--space-sm) -4px;
  min-height: 44px;
  box-sizing: border-box;
}

/* --- large tappable entry cards (Головна / Мені важко / Корисне hubs) --- */
.action-card{ display:block; }

/* --- color variants for entry cards, so adjacent cards read as distinct --- */
.card-tint-sand{
  background: #E0D8CB;
  border-color: var(--color-sand);
}

.card-tint-olive{
  background: #D6D1C5;
  border-color: var(--color-olive);
}

.card-tint-sage{
  background: #CFCBBD;
  border-color: var(--color-sage);
}
.action-arrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size: 14px; font-weight: 700; color: var(--color-deep-olive);
  margin-top: var(--space-sm);
}

/* --- generic placeholder note (used on stub sections) --- */
.coming-soon{
  color: var(--ink-dim);
  font-size: 14.5px;
  line-height: 1.6;
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* --- Telegram access gate (used only on the single entry point, index.html) --- */
body.gate-active .app{ display:none; }
#access-gate{
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--bg);
  color: var(--ink);
  text-align: center;
  padding: 24px;
  z-index: 100;
}
#access-gate.hidden{ display: none; }
#access-gate .gate-spinner{
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid var(--panel-border);
  border-top-color: var(--accent);
  animation: gate-spin 0.9s linear infinite;
}
#access-gate.denied .gate-spinner{ display: none; }
#access-gate p{
  max-width: 380px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0;
}
@keyframes gate-spin{ to{ transform: rotate(360deg); } }

/* =========================================================
   HOME DISCOVERY COMPONENTS
   Centralized here rather than in index.html.
   ========================================================= */
/* HOME DISCOVERY — WHEEL FEATURE + THREE DIRECT ACTIONS */
.home-discovery{display:grid;gap:13px}
.home-wheel-feature{position:relative;display:block;min-height:242px;overflow:hidden;isolation:isolate;padding:28px 25px;border:1px solid rgba(70,75,53,.12);border-radius:25px;background:linear-gradient(122deg,#E4EBD8 0%,#F2E7D9 54%,#E6DCE8 100%);color:#464B35;text-decoration:none;box-shadow:var(--home-shadow);transition:transform .2s ease,box-shadow .2s ease}
.home-wheel-feature:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(50,52,40,.11)}
.home-wheel-copy{position:relative;z-index:2;max-width:65%}
.home-wheel-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 17px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6C715F}
.home-wheel-eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:#77816A}
.home-wheel-feature h2{margin:0 0 11px;font:400 clamp(31px,6vw,46px)/1.06 "Bodoni Moda",Georgia,serif;letter-spacing:-.035em}
.home-wheel-feature p.home-wheel-desc{margin:0 0 20px;font-size:11px;line-height:1.7;color:#676D5D}
.home-wheel-link{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:800;border-bottom:1px solid #464B35;padding-bottom:5px}
.home-wheel-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.home-wheel-art{position:absolute;z-index:1;right:-26px;top:50%;width:min(50%,235px);aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:conic-gradient(from -22deg,#E5BBA7 0 45deg,#E8D29B 45deg 90deg,#C8D5A8 90deg 135deg,#A5C9C0 135deg 180deg,#B7C1E0 180deg 225deg,#D7B5D4 225deg 270deg,#E7B6C1 270deg 315deg,#E8C8AA 315deg 360deg);box-shadow:0 10px 35px rgba(70,75,53,.12);opacity:.9}
.home-wheel-art:before{content:"";position:absolute;inset:21%;border-radius:50%;background:linear-gradient(135deg,#F2E8DB,#E9E7DC);border:1px solid rgba(255,255,255,.8);box-shadow:0 0 0 2px rgba(255,255,255,.45)}
.home-wheel-art:after{content:"✳";position:absolute;inset:0;display:grid;place-items:center;color:#78806D;font:400 35px "Bodoni Moda",serif}
.home-wheel-orbit{position:absolute;inset:9%;border:1px solid rgba(255,255,255,.7);border-radius:50%;pointer-events:none}
.home-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.home-action-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:178px;padding:19px;border:1px solid rgba(70,75,53,.10);border-radius:21px;background:#FFFEFC;color:#464B35;text-decoration:none;box-shadow:var(--home-shadow);transition:transform .2s ease,box-shadow .2s ease}
.home-action-card:hover{transform:translateY(-2px);box-shadow:0 12px 29px rgba(50,52,40,.10)}
.home-action-card.specialist{background:#FFFEFC}
.home-action-card.crisis{background:#FFFEFC}
.home-action-card.questionnaires{background:#FFFEFC;grid-column:1/-1;min-height:135px;padding-right:64px}
.home-action-icon{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;padding:0;border-radius:50%;background:#F0F1EB;margin:0 0 16px;line-height:0}
.home-action-icon svg{display:block;width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.home-action-card h3{font-size:14px;line-height:1.35;font-weight:800;margin:0 0 6px}
.home-action-card p{font-size:10px;line-height:1.65;color:#737567;margin:0;max-width:270px}
.home-action-arrow{position:absolute;right:17px;top:18px;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.home-action-card:focus-visible,.home-wheel-feature:focus-visible{outline:3px solid #464B35;outline-offset:3px}
@media(min-width:650px){.home-action-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.home-action-card.questionnaires{grid-column:auto;min-height:178px;padding-right:19px}.home-wheel-feature{min-height:270px;padding:34px}.home-wheel-art{right:35px;width:225px}}
@media(max-width:370px){.home-wheel-feature{padding:23px 20px}.home-wheel-copy{max-width:72%}.home-wheel-feature h2{font-size:29px}.home-wheel-art{right:-62px;width:200px}.home-action-card{padding:15px;min-height:185px}.home-action-card h3{font-size:13px}}
@media(prefers-reduced-motion:reduce){.home-wheel-feature,.home-action-card{transition:none}.home-wheel-feature:hover,.home-action-card:hover{transform:none}}

.home-action-card.crisis .home-action-icon{background:#F6ECE7}
.home-action-card.questionnaires .home-action-icon{background:#EDEBF2}

/* =========================================================
   OPORA DARK — shared semantic surfaces and typography
   ========================================================= */
:root[data-theme="dark"]{
  --bg:#171B19;--card:#242B27;--panel:#242B27;--bg-soft:#202722;
  --ink:#F0EEE6;--ink-dim:#B9BFB4;--muted:#ABB4A9;
  --border:#3A443C;--sage:#344239;--olive:#DCE5D7;
  --accent:#B8C9B4;--panel-border:#3A443C;
  --color-deep-olive:#F0EEE6;--color-olive:#C4D0BE;
  --color-warm-cream:#171B19;--color-sand:#3A443C;
  --home-ink:#F0EEE6;--home-muted:#B9BFB4;--home-border:#3A443C;
  --home-gradient:linear-gradient(125deg,#33433B,#39352F 54%,#3C3340);
  --home-shadow:0 10px 28px rgba(0,0,0,.17);
  color-scheme:dark;
}
html[data-theme="dark"] body{background:#171B19;color:#F0EEE6}
html[data-theme="dark"] :is(.card,.home-card,.home-action-card,.home-plus,.home-promo,.home-stat,.home-next,.home-modal,.modal,.dialog,.wheel-card,.link-row,.profile-card,.test-card,.state-card,.technique-card,.subscription-card,.notice-card){background:#242B27;color:#F0EEE6;border-color:#3A443C}
html[data-theme="dark"] :is(.home-wheel-feature,.specialist-banner,.plus-card){background:linear-gradient(125deg,#33433B,#39352F 54%,#3C3340);color:#F0EEE6;border-color:#4B544A}
html[data-theme="dark"] :is(.home-action-icon,.home-card-icon,.link-icon,.home-arrow,.avatar,.badge,.notice,.home-modal-close,.opora-plus-close){background:#344239;color:#E8EDE3}
html[data-theme="dark"] :is(.home-action-card p,.home-wheel-desc,.home-promo-description,.home-plus-description,.subtitle,.help,.username,.status,.detail-label,.subscription-description,.home-card-description,.home-action-card p,.home-plus-modal-text,.lead){color:#B9BFB4}
html[data-theme="dark"] :is(.button.secondary,.home-button-secondary,.btn-secondary,.logout-button){background:#303932;color:#F0EEE6;border-color:#4B564D}
html[data-theme="dark"] :is(input,select,textarea,.field input,.field select,.home-field input,.home-field select){background:#222A25;color:#F0EEE6;border-color:#49564B}
html[data-theme="dark"] :is(input,textarea)::placeholder{color:#9CA99E}
html[data-theme="dark"] :is(.home-wheel-link,.home-wheel-eyebrow,.home-wheel-feature h2){color:#F0EEE6}
html[data-theme="dark"] .home-wheel-link{border-color:#F0EEE6}
html[data-theme="dark"] .home-wheel-art{opacity:.72}
html[data-theme="dark"] .home-wheel-art:before{background:#344239}
html[data-theme="dark"] :is(.home-action-card.specialist,.home-action-card.crisis,.home-action-card.questionnaires){background:#242B27}
html[data-theme="dark"] .home-action-card.crisis .home-action-icon{background:#483832}
html[data-theme="dark"] .home-action-card.questionnaires .home-action-icon{background:#3C3749}
html[data-theme="dark"] #opora-bottom-navigation{--opora-nav-bg:rgba(31,38,33,.96);--opora-nav-ink:#F0EEE6;--opora-nav-muted:#B9BFB4;--opora-nav-active:#354239;--opora-nav-border:#455047}
html[data-theme="dark"] #opora-bottom-navigation .opora-nav-item.active{background:#354239;color:#F0EEE6}
html[data-theme="dark"] #opora-plus-development-modal .opora-plus-card{background:#242B27;color:#F0EEE6;border-color:#455047}
html[data-theme="dark"] #opora-plus-development-modal .opora-plus-text{color:#B9BFB4}
html[data-theme="dark"] #opora-plus-development-modal .opora-plus-title{color:#F0EEE6}
html[data-theme="dark"] #opora-plus-development-modal .opora-plus-close{background:#354239;color:#F0EEE6}
html[data-theme="dark"] #opora-plus-development-modal .opora-plus-button{background:#D7E2D0;color:#202920}
html[data-theme="dark"] .button:not(.secondary){background:#D7E2D0;color:#202920}
html[data-theme="dark"] :is(.detail,.profile-bottom){border-color:#3A443C}
html[data-theme="dark"] :is(.notice,.home-promo-feature,.home-plus-label){background:#344239;color:#E8EDE3}
html[data-theme="dark"] :is(.home-wheel-feature,.home-action-card,.home-card,.card){box-shadow:0 10px 28px rgba(0,0,0,.12)}
/* The dark palette is opt-in; preserve the exact approved light palette. */

/* OPORA Preview: dark-mode surface and control consistency */
html[data-theme="dark"]{
  --surface:#242B27;--surface-soft:#202722;--surface-raised:#303932;
  --text:#F0EEE6;--text-muted:#B9BFB4;--stroke:#3A443C;
}
html[data-theme="dark"] :is(.card-soft,.card-tint-sand,.card-tint-olive,.card-tint-sage,.coming-soon){
  background:var(--surface-soft);color:var(--text);border-color:var(--stroke);
}
html[data-theme="dark"] :is(.action-arrow,.bottom-nav a.active,.back-link){
  color:var(--text);
}
html[data-theme="dark"] :is(.btn-primary,.btn:not(.btn-secondary)){
  background:#D7E2D0;color:#202920;
}
html[data-theme="dark"] .btn-secondary{
  background:var(--surface-raised);color:var(--text);border-color:#4B564D;
}
html[data-theme="dark"] :is(.bottom-nav,#access-gate){
  background:var(--surface);color:var(--text);border-color:var(--stroke);
}
html[data-theme="dark"] :is(.home-action-card,.home-action-card.specialist,.home-action-card.crisis,.home-action-card.questionnaires){
  background:var(--surface);color:var(--text);border-color:var(--stroke);
}
html[data-theme="dark"] :is(.home-action-card h3,.home-action-arrow,.home-action-icon svg){
  color:var(--text);
}
html[data-theme="dark"] :is(.home-action-card p,.home-wheel-feature p.home-wheel-desc){
  color:var(--text-muted);
}
html[data-theme="dark"] :is(.home-action-card,.home-wheel-feature):focus-visible{
  outline-color:#D7E2D0;
}
html[data-theme="dark"] :is(button,input,select,textarea):focus-visible{
  outline:2px solid #B8C9B4;outline-offset:2px;
}

/* Preview-wide dark theme: semantic aliases used by page-local styles */
html[data-theme="dark"]{
  --page-bg:#171B19;--page-ink:#F0EEE6;--page-muted:#B9BFB4;
  --page-border:#3A443C;--page-shadow:0 8px 28px rgba(0,0,0,.16);
  --state-bg:#171B19;--state-ink:#F0EEE6;--state-muted:#B9BFB4;
  --state-border:#3A443C;
  --paper:#242B27;--soft:#202722;--line:#3A443C;
  --card:#242B27;--ink:#F0EEE6;--muted:#B9BFB4;
  --border:#3A443C;--sage:#344239;--sand:#423C34;
  --olive:#F0EEE6;
}
html[data-theme="dark"] :is(.support-card,.state-card,.technique-card,.category,.useful-card){
  background:#242B27;color:#F0EEE6;border-color:#3A443C;
}
html[data-theme="dark"] :is(.support-card-icon,.support-card-arrow,.state-back-icon,.state-card-icon,.techniques-back-icon,.technique-back-icon,.technique-tag,.useful-icon,.useful-arrow){
  background:#344239;color:#F0EEE6;border-color:#455047;
}
html[data-theme="dark"] :is(.support-brand,.state-brand,.technique-brand,.state-kicker,.section-count){
  color:#B9BFB4;
}
html[data-theme="dark"] :is(.support-card-description,.state-subtitle,.state-blurb,.technique-description,.technique-intro,.category-description){
  color:#B9BFB4;
}
html[data-theme="dark"] :is(.technique-state,.technique-state-icon){
  background:#344239;color:#F0EEE6;
}
html[data-theme="dark"] :is(.specialist-card){
  background:linear-gradient(125deg,#33433B,#39352F 54%,#3C3340);
  color:#F0EEE6;border-color:#4B544A;
}
html[data-theme="dark"] :is(.specialist-eyebrow,.specialist-card h2 em,.specialist-card p.specialist-description){
  color:#D4DDD0;
}
html[data-theme="dark"] .specialist-cta{
  background:#D7E2D0;color:#202920;
}
html[data-theme="dark"] :is(.state-card,.support-card,.technique-card,.category,.useful-card):focus-visible{
  outline:2px solid #B8C9B4;outline-offset:3px;
}

/* =========================================================
   OPORA shared dark components — Preview design audit
   Keep component colors here; page HTML keeps layout only.
   ========================================================= */
html[data-theme="dark"]{
  --opora-surface:#242B27;
  --opora-surface-soft:#202722;
  --opora-surface-raised:#303932;
  --opora-text:#F0EEE6;
  --opora-text-muted:#B9BFB4;
  --opora-outline:#455047;
  --opora-button-bg:#D7E2D0;
  --opora-button-ink:#202920;
}
html[data-theme="dark"] :is(.support-card,.category,.test-card,.test-item,.test-question,.test-result,.question-card,.result-card,.answer-card,.wheel-card,.technique-card,.state-card,.useful-card){
  background:var(--opora-surface);
  color:var(--opora-text);
  border-color:var(--opora-outline);
}
html[data-theme="dark"] :is(.category,.category-title,.category-name,.category-count,.category .arrow,.test-title,.test-desc,.test-card .tag,.test-card .arrow){
  color:var(--opora-text);
}
html[data-theme="dark"] :is(.category-count,.test-desc,.test-subtitle,.test-meta,.test-description){
  color:var(--opora-text-muted);
}
html[data-theme="dark"] :is(.category-icon,.support-card-icon,.support-card:nth-child(2) .support-card-icon,.support-card-arrow,.support-card:hover .support-card-arrow){
  background:#344239;
  color:var(--opora-text);
  border-color:var(--opora-outline);
}
html[data-theme="dark"] :is(.support-reminder,.support-note,.support-tip,.support-notice,.notice,.home-status,.home-alert,.home-message,.home-error){
  background:var(--opora-surface-soft);
  color:var(--opora-text);
  border-color:var(--opora-outline);
}
html[data-theme="dark"] :is(.home-status,.home-status p,.home-status span,.home-status button,.home-error,.home-error p,.home-alert,.home-alert p){
  color:var(--opora-text);
}
html[data-theme="dark"] :is(.home-plus-button,.home-plus-cta,.home-button,.home-plus-card .home-button,.home-plus-card button){
  background:var(--opora-button-bg);
  color:var(--opora-button-ink);
  border-color:transparent;
}
html[data-theme="dark"] :is(.home-button-secondary,.home-plus-button-secondary){
  background:var(--opora-surface-raised);
  color:var(--opora-text);
  border-color:var(--opora-outline);
}
html[data-theme="dark"] :is(.home-plus-label,.home-plus-status,.home-plus-tag,.home-plus-badge){
  background:#344239;
  color:var(--opora-text);
  border-color:#607064;
}
html[data-theme="dark"] :is(.home-plus-message,.home-plus-description,.home-plus-modal-text){
  color:var(--opora-text-muted);
}
html[data-theme="dark"] :is(.test-card.plus-card,.plus-card){
  background:linear-gradient(125deg,#33433B,#39352F 54%,#3C3340);
  color:var(--opora-text);
  border-color:#4B544A;
}
html[data-theme="dark"] :is(.test-card.plus-card .test-title,.test-card.plus-card .test-desc,.test-card.plus-card .tag,.test-card.plus-card .arrow){
  color:var(--opora-text);
}
html[data-theme="dark"] .test-card.plus-card .plus-label{
  background:#D7E2D0;
  color:#202920;
}
html[data-theme="dark"] :is(.home-plus-card,.home-plus-panel,.home-plus-overlay-content){
  background:var(--opora-surface);
  color:var(--opora-text);
  border-color:var(--opora-outline);
}
html[data-theme="dark"] :is(.home-plus-card button:disabled,.home-button:disabled,.button:disabled,.btn:disabled){
  background:#465048;
  color:#C9D2C8;
  opacity:1;
  cursor:not-allowed;
}

/* Shared badge states: OPORA PLUS / in development */
html[data-theme="dark"] .home-development-label{
  background:#39443C;
  color:#E0E9DC;
  border:1px solid #647365;
}
html[data-theme="dark"] .home-plus-top .home-development-label{
  opacity:1;
}


/* ============================================================
   PAGE MODULES — single CSS source, isolated per HTML page.
   These are existing visual modules migrated without restyling.
   ============================================================ */

/* Page: index */
@scope (html[data-opora-page="index"]) {

:root {
  --home-bg: #F4EFE6;
  --home-ink: #464B35;
  --home-muted: #777866;
  --home-olive: #6B684E;
  --home-border: rgba(70,75,53,.12);
  --home-gradient: linear-gradient(
    135deg,
    #E4EBD8 0%,
    #F1E6D8 54%,
    #E6DCE8 100%
  );
  --home-shadow: 0 8px 28px rgba(50,52,40,.045);
}

[hidden] { display:none !important; }

* { box-sizing:border-box; }

body {
  margin:0;
  background:var(--home-bg);
  color:var(--home-ink);
  font-family:"Manrope",sans-serif;
}

button,input,select {
  font-family:inherit;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button { cursor:pointer; }

.home-app {
  width:min(calc(100% - 36px),520px);
  margin:auto;
  padding:32px 0 30px;
}

.home-header { margin-bottom:26px; }

.home-brand {
  margin:0 0 10px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.24em;
  color:var(--home-olive);
}

.home-greeting {
  margin:0;
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:clamp(35px,9vw,45px);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.035em;
}

.home-subtitle {
  margin:10px 0 0;
  color:var(--home-muted);
  font-size:13px;
  line-height:1.7;
}

.home-section { margin-top:25px; }

.home-eyebrow {
  margin:0 0 13px;
  color:var(--home-muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* PLUS */

.home-plus,
.home-promo {
  padding:21px;
  border:1px solid rgba(100,100,85,.12);
  border-radius:23px;
  background:var(--home-gradient);
  box-shadow:var(--home-shadow);
}

.home-plus-top,
.home-promo-top {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:13px;
}

.home-plus-label {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:99px;
  background:rgba(255,255,255,.57);
  color:#675E4D;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
}

.home-development-label {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 10px;
  border-radius:99px;
  background:rgba(255,255,255,.35);
  color:#686C5F;
  font-size:10px;
  font-weight:700;
}

.home-plus-title,
.home-promo-title {
  margin:0;
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:30px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.025em;
}

.home-plus-description,
.home-promo-description {
  margin:9px 0 19px;
  color:#686C5F;
  font-size:12px;
  line-height:1.75;
}

.home-stats {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}

.home-stat {
  padding:15px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:16px;
  background:rgba(255,255,255,.43);
}

.home-stat-label {
  margin:0 0 8px;
  color:#6C705F;
  font-size:11px;
  line-height:1.5;
}

.home-stat-number {
  margin:0;
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:35px;
  font-weight:400;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.home-stat-unit {
  margin-left:3px;
  font-family:"Manrope",sans-serif;
  font-size:11px;
  color:#6C705F;
}

.home-next {
  padding:16px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:17px;
  background:rgba(255,255,255,.78);
}

.home-next-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:11px;
}

.home-next-label {
  margin:0;
  color:#777866;
  font-size:11px;
  font-weight:700;
}

.home-next-date {
  margin:0;
  font-size:15px;
  font-weight:700;
  line-height:1.5;
}

.home-next-meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:8px;
  color:#777866;
  font-size:11px;
}

.home-next-note {
  margin:10px 0 0;
  padding-top:10px;
  border-top:1px solid var(--home-border);
  color:#777866;
  font-size:11px;
  line-height:1.6;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}

.home-next-empty {
  margin:0;
  color:#777866;
  font-size:12px;
  line-height:1.7;
}

.home-plus-actions {
  display:flex;
  gap:9px;
  margin-top:13px;
}

.home-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:11px 14px;
  border:0;
  border-radius:12px;
  background:var(--home-ink);
  color:white;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  text-align:center;
}

.home-button:disabled {
  opacity:.55;
  cursor:not-allowed;
}

.home-button-secondary {
  border:1px solid rgba(70,75,53,.13);
  background:rgba(255,255,255,.6);
  color:var(--home-ink);
}

.home-plus-actions .home-button { flex:1; }

.home-plus-message {
  margin:11px 0 0;
  color:#777866;
  font-size:11px;
  line-height:1.6;
}

/* FREE CARDS */

.home-cards {
  display:grid;
  gap:11px;
}

.home-card {
  display:flex;
  align-items:center;
  gap:15px;
  min-height:106px;
  padding:17px;
  border:1px solid var(--home-border);
  border-radius:19px;
  background:#FFFEFB;
  color:var(--home-ink);
  text-decoration:none;
  box-shadow:var(--home-shadow);
  transition:transform .18s ease,box-shadow .18s ease;
}

.home-card:hover {
  box-shadow:0 10px 30px rgba(50,52,40,.085);
}

.home-card:active {
  transform:scale(.985);
}

.home-card-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 49px;
  width:49px;
  height:49px;
  border-radius:15px;
  background:#F0E7DB;
  color:var(--home-ink);
}

.home-card:nth-child(2) .home-card-icon {
  background:#E8EDE1;
}

.home-card:nth-child(3) .home-card-icon {
  background:#ECE7EF;
}

.home-card-icon svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.home-card-content {
  flex:1;
  min-width:0;
}

.home-card-title {
  margin:0 0 5px;
  font-size:14px;
  font-weight:700;
  line-height:1.45;
}

.home-card-description {
  margin:0;
  color:var(--home-muted);
  font-size:11px;
  line-height:1.65;
}

/* MODERN ARROW */

.home-arrow {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 32px;
  width:32px;
  height:32px;
  border:1px solid rgba(70,75,53,.1);
  border-radius:11px;
  background:#F7F5EF;
  color:#777866;
  transition:
    background .2s ease,
    transform .2s ease,
    color .2s ease;
}

.home-arrow svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.home-card:hover .home-arrow {
  background:#EAECE3;
  color:var(--home-ink);
  transform:translateX(2px);
}

.home-button svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* PROMO */

.home-promo-features {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:17px;
}

.home-promo-feature {
  padding:7px 10px;
  border-radius:99px;
  background:rgba(255,255,255,.58);
  color:#626A58;
  font-size:10px;
  font-weight:700;
}

.home-promo .home-button {
  width:100%;
}

/* STATUS */

.home-status {
  margin:0 0 15px;
  padding:11px 13px;
  border:1px solid var(--home-border);
  border-radius:12px;
  background:rgba(255,255,255,.65);
  color:var(--home-muted);
  font-size:11px;
  line-height:1.6;
}

.home-status button {
  margin-top:8px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--home-ink);
  font-size:12px;
  font-weight:700;
  text-decoration:underline;
}

/* PLUS MODAL — same centered editorial composition as progress modal */
#homePlusOverlay{z-index:2000;padding:20px;background:rgba(35,40,30,.48);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#homePlusOverlay .home-modal{position:relative;width:min(100%,390px);max-height:min(90dvh,650px);overflow-y:auto;padding:31px 25px 27px;border:1px solid rgba(255,255,255,.65);border-radius:24px;background:#FFFEFB;box-shadow:0 18px 60px rgba(35,43,30,.16);text-align:center;color:#464B35}
#homePlusOverlay .home-modal-heading{display:block;margin:0}
#homePlusOverlay .home-modal-close{position:absolute;right:14px;top:14px;width:32px;height:32px;font-size:21px;cursor:pointer}
#homePlusOverlay .home-plus-label{display:inline-flex;margin:3px auto 0;padding:8px 13px;border:0;border-radius:99px;background:linear-gradient(135deg,#E4EBD8,#F1E6D8,#E6DCE8);font-size:10px;color:#6B684E}
#homePlusOverlay .home-modal-title{margin:20px 0 13px;font-size:33px;line-height:1.15;letter-spacing:-.03em}
#homePlusOverlay .home-plus-modal-text{margin:0;color:#777866;font-size:13px;line-height:1.85}
#homePlusOverlay .home-plus-modal-text+.home-plus-modal-text{margin-top:15px}
#homePlusOverlay #homeGotIt{width:100%;min-height:46px;margin-top:25px;border-radius:13px;font-size:13px}
@media(max-width:370px){#homePlusOverlay .home-modal{padding:28px 19px 23px}#homePlusOverlay .home-modal-title{font-size:30px}}

/* MODAL */

.home-overlay {
  position:fixed;
  inset:0;
  z-index:1500;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(30,34,27,.48);
  backdrop-filter:blur(6px);
}

.home-overlay.open {
  display:flex;
}

.home-modal {
  width:min(100%,430px);
  max-height:90dvh;
  overflow-y:auto;
  padding:23px;
  border-radius:21px;
  background:#FFFEFB;
  box-shadow:0 20px 60px rgba(0,0,0,.15);
}

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

.home-modal-title {
  margin:0;
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:27px;
  font-weight:400;
}

.home-modal-close {
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:0;
  border-radius:10px;
  background:#F4EFE6;
  color:var(--home-ink);
  font-size:23px;
}

.home-field { margin-bottom:15px; }

.home-field label {
  display:block;
  margin-bottom:7px;
  color:var(--home-olive);
  font-size:12px;
  font-weight:700;
}

.home-field input,
.home-field select {
  width:100%;
  min-height:46px;
  padding:10px 12px;
  border:1px solid var(--home-border);
  border-radius:11px;
  background:#F8F6F1;
  color:var(--home-ink);
  font-size:16px;
}

.home-modal-actions {
  display:flex;
  gap:9px;
  margin-top:20px;
}

.home-modal-actions .home-button {
  flex:1;
}

@media(max-width:370px) {
  .home-app {
    width:calc(100% - 28px);
  }

  .home-plus,.home-promo {
    padding:16px;
  }

  .home-card {
    gap:11px;
    padding:14px;
  }

  .home-card-icon {
    flex-basis:43px;
    width:43px;
    height:43px;
  }

  .home-card-title {
    font-size:13px;
  }

  .home-arrow {
    flex-basis:29px;
    width:29px;
    height:29px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .home-card,.home-arrow {
    transition:none;
  }
}

}

/* Page: meni-vazhko */
@scope (html[data-opora-page="meni-vazhko"]) {

:root {
  --page-bg: #F4EFE6;
  --page-ink: #464B35;
  --page-muted: #777866;
  --page-border: rgba(70,75,53,.12);
  --page-shadow: 0 8px 28px rgba(50,52,40,.045);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--page-ink);
  font-family: "Manrope", sans-serif;
}

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

.support-app {
  width: min(calc(100% - 36px),520px);
  margin: 0 auto;
  padding: 32px 0 110px;
}

/* HEADER */

.support-header {
  margin-bottom: 30px;
}

.support-brand {
  margin: 0 0 10px;
  color: #6B684E;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .24em;
}

.support-title {
  margin: 0;
  font-family: "Bodoni Moda",Georgia,serif;
  font-size: clamp(35px,9vw,45px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.support-subtitle {
  max-width: 360px;
  margin: 12px 0 0;
  color: var(--page-muted);
  font-size: 13px;
  line-height: 1.8;
}

/* SECTION */

.support-section {
  margin-top: 25px;
}

.support-eyebrow {
  margin: 0 0 13px;
  color: var(--page-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.support-cards {
  display: grid;
  gap: 11px;
}

/* CARDS */

.support-card {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 116px;
  padding: 19px 17px;
  border: 1px solid var(--page-border);
  border-radius: 19px;
  background: #FFFEFB;
  color: var(--page-ink);
  text-decoration: none;
  box-shadow: var(--page-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}

.support-card:hover {
  box-shadow: 0 10px 30px rgba(50,52,40,.085);
}

.support-card:active {
  transform: scale(.985);
}

.support-card:focus-visible {
  outline: 2px solid #989580;
  outline-offset: 3px;
}

/* ICONS */

.support-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 49px;
  width: 49px;
  height: 49px;
  border-radius: 15px;
  background: #E8EDE1;
  color: var(--page-ink);
}

.support-card:nth-child(2) .support-card-icon {
  background: #ECE7EF;
}

.support-card-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* CONTENT */

.support-card-content {
  flex: 1;
  min-width: 0;
}

.support-card-title {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.support-card-description {
  display: block;
  margin: 0;
  color: var(--page-muted);
  font-size: 11px;
  line-height: 1.7;
}

/* ARROW */

.support-card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(70,75,53,.1);
  border-radius: 11px;
  background: #F7F5EF;
  color: #777866;
  transition:
    background .2s ease,
    transform .2s ease,
    color .2s ease;
}

.support-card-arrow svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.support-card:hover .support-card-arrow {
  background: #EAECE3;
  color: var(--page-ink);
  transform: translateX(2px);
}

/* NOTE */

.support-note {
  margin-top: 25px;
  padding: 20px;
  border: 1px solid rgba(100,100,85,.12);
  border-radius: 21px;
  background: linear-gradient(
    135deg,
    #E4EBD8 0%,
    #F1E6D8 54%,
    #E6DCE8 100%
  );
}

.support-note-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: #6B684E;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.support-note-label svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.support-note-text {
  margin: 0;
  color: #686C5F;
  font-size: 12px;
  line-height: 1.8;
}

/* MOBILE */

@media(max-width:370px) {
  .support-app {
    width: calc(100% - 28px);
  }

  .support-card {
    gap: 11px;
    padding: 15px 13px;
  }

  .support-card-icon {
    flex-basis: 43px;
    width: 43px;
    height: 43px;
  }

  .support-card-title {
    font-size: 13px;
  }

  .support-card-arrow {
    flex-basis: 29px;
    width: 29px;
    height: 29px;
  }

  .support-note {
    padding: 17px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .support-card,
  .support-card-arrow {
    transition: none;
  }
}

}

/* Page: stan */
@scope (html[data-opora-page="stan"]) {

:root {
  --state-bg: #F4EFE6;
  --state-ink: #464B35;
  --state-muted: #777866;
  --state-border: rgba(70,75,53,.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--state-bg);
  color: var(--state-ink);
  font-family: "Manrope", sans-serif;
}

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

.state-app {
  width: min(calc(100% - 36px),520px);
  margin: 0 auto;
  padding: 32px 0 110px;
}

/* BACK */

.state-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  color: var(--state-muted);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.state-back-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border: 1px solid var(--state-border);
  border-radius: 10px;
  background: rgba(255,255,255,.65);
}

.state-back-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* HEADER */

.state-header {
  margin-bottom: 26px;
}

.state-brand {
  margin: 0 0 10px;
  color: #6B684E;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .24em;
}

.state-title {
  margin: 0;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(34px,8vw,43px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.035em;
}

.state-subtitle {
  margin: 13px 0 0;
  color: var(--state-muted);
  font-size: 13px;
  line-height: 1.8;
}

.state-eyebrow {
  margin: 0 0 13px;
  color: var(--state-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* GRID */

.state-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}

/* CARDS */

.state-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 78px;
  padding: 12px;
  border: 1px solid rgba(70,75,53,.09);
  border-radius: 17px;
  background: #FFFEFB;
  color: var(--state-ink);
  text-decoration: none;
  box-shadow: 0 5px 18px rgba(50,52,40,.035);
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.state-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 25px rgba(50,52,40,.075);
}

.state-card:active {
  transform: scale(.975);
}

.state-card:focus-visible {
  outline: 2px solid #989580;
  outline-offset: 3px;
}

/* EMOTION ICON */

.state-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  border-radius: 12px;
  background: rgba(255,255,255,.42);
  color: #464B35;
}

.state-card-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* TITLE */

.state-card-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* ARROW */

.state-card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: #777866;
  opacity: .8;
}

.state-card-arrow svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* SEMANTIC COLORS */

.state-card[data-tone="anxiety"] {
  background: #F3E6CF;
}

.state-card[data-tone="anger"] {
  background: #F0DCD6;
}

.state-card[data-tone="sadness"] {
  background: #DFE8EF;
}

.state-card[data-tone="fear"] {
  background: #E9E1EF;
}

.state-card[data-tone="overwhelm"] {
  background: #ECE5D9;
}

.state-card[data-tone="panic"] {
  background: #F1DBDF;
}

.state-card[data-tone="intrusive-thoughts"] {
  background: #E3E5F0;
}

.state-card[data-tone="numbness"] {
  background: #E5E8E8;
}

.state-card[data-tone="unsure"] {
  background: #E5E9D7;
}

/* NOTE */

.state-note {
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid rgba(100,100,85,.12);
  border-radius: 19px;
  background: linear-gradient(
    135deg,
    #E4EBD8 0%,
    #F1E6D8 54%,
    #E6DCE8 100%
  );
}

.state-note p {
  margin: 0;
  color: #686C5F;
  font-size: 12px;
  line-height: 1.8;
}

/* MOBILE */

@media(max-width:370px) {
  .state-app {
    width: calc(100% - 28px);
  }

  .state-grid {
    gap: 8px;
  }

  .state-card {
    min-height: 73px;
    padding: 10px;
    gap: 7px;
  }

  .state-card-icon {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .state-card-icon svg {
    width: 18px;
    height: 18px;
  }

  .state-card-title {
    font-size: 11px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .state-card {
    transition: none;
  }
}

}

/* Page: techniques */
@scope (html[data-opora-page="techniques"]) {

:root {
  --page-bg: #F4EFE6;
  --page-ink: #464B35;
  --page-muted: #777866;
  --page-border: rgba(70,75,53,.12);
  --state-color: #F3E6CF;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--page-ink);
  font-family: "Manrope", sans-serif;
}

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

.techniques-app {
  width: min(calc(100% - 36px),520px);
  margin: 0 auto;
  padding: 32px 0 110px;
}

/* BACK */

.techniques-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  color: var(--page-muted);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.techniques-back-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border: 1px solid var(--page-border);
  border-radius: 10px;
  background: rgba(255,255,255,.65);
}

.techniques-back-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* STATE HEADER */

.state-header {
  margin-bottom: 30px;
}

.state-brand {
  margin: 0 0 13px;
  color: #6B684E;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .24em;
}

.state-heading {
  display: flex;
  align-items: center;
  gap: 15px;
}

.state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 19px;
  background: var(--state-color);
  color: #464B35;
}

.state-icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.state-kicker {
  margin: 0 0 5px;
  color: #6B684E;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.state-title {
  margin: 0;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(35px,8vw,44px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

.state-blurb {
  margin: 18px 0 0;
  color: var(--page-muted);
  font-size: 13px;
  line-height: 1.8;
}

/* SECTION */

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

.section-label {
  margin: 0;
  color: var(--page-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.section-count {
  color: #989580;
  font-size: 11px;
  font-weight: 700;
}

/* TECHNIQUE LIST */

.technique-list {
  display: grid;
  gap: 11px;
}

/* CARD */

.technique-card {
  display: block;
  padding: 18px 19px;
  border: 1px solid var(--page-border);
  border-radius: 19px;
  background: #FFFEFB;
  color: var(--page-ink);
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(50,52,40,.035);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.technique-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 27px rgba(50,52,40,.07);
  border-color: rgba(70,75,53,.22);
}

.technique-card:active {
  transform: scale(.985);
}

.technique-card:focus-visible {
  outline: 2px solid #989580;
  outline-offset: 3px;
}

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

.technique-number {
  color: #989580;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}

.technique-duration {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--page-muted);
  font-size: 10px;
  font-weight: 600;
  text-align: right;
}

.technique-duration svg {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.technique-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.015em;
}

.technique-description {
  margin: 8px 0 16px;
  color: var(--page-muted);
  font-size: 12px;
  line-height: 1.75;
}

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

.technique-approach {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--state-color);
  color: #5B604A;
  font-size: 10px;
  font-weight: 700;
}

.technique-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(70,75,53,.1);
  border-radius: 10px;
  background: #F4EFE6;
  color: #464B35;
}

.technique-arrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* NOTE */

.techniques-note {
  margin-top: 23px;
  padding: 18px 20px;
  border: 1px solid rgba(100,100,85,.12);
  border-radius: 19px;
  background: linear-gradient(
    135deg,
    #E4EBD8 0%,
    #F1E6D8 54%,
    #E6DCE8 100%
  );
}

.techniques-note p {
  margin: 0;
  color: #686C5F;
  font-size: 12px;
  line-height: 1.8;
}

.techniques-note a {
  color: #464B35;
  font-weight: 700;
  text-underline-offset: 3px;
}

/* ERROR */

.techniques-error {
  margin-top: 18px;
  color: var(--page-muted);
  font-size: 13px;
  line-height: 1.7;
}

/* MOBILE */

@media(max-width:370px) {
  .techniques-app {
    width: calc(100% - 28px);
  }

  .state-icon {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
    border-radius: 16px;
  }

  .state-icon svg {
    width: 27px;
    height: 27px;
  }

  .state-title {
    font-size: 33px;
  }

  .technique-card {
    padding: 16px;
  }

  .technique-title {
    font-size: 15px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .technique-card {
    transition: none;
  }
}

}

/* Page: technique */
@scope (html[data-opora-page="technique"]) {

:root {
  --page-bg: #F4EFE6;
  --page-ink: #464B35;
  --page-muted: #777866;
  --page-border: rgba(70,75,53,.12);
  --state-color: #E5E9D7;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--page-ink);
  font-family: "Manrope", sans-serif;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid #989580;
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.technique-app {
  width: min(calc(100% - 36px),520px);
  margin: 0 auto;
  padding: 32px 0 110px;
}

/* BACK */

.technique-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 27px;
  color: var(--page-muted);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.technique-back-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border: 1px solid var(--page-border);
  border-radius: 10px;
  background: rgba(255,255,255,.65);
}

.technique-back-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* INTRO */

.technique-brand {
  margin: 0 0 14px;
  color: #6B684E;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .24em;
}

.technique-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px 7px 7px;
  margin-bottom: 19px;
  border-radius: 12px;
  background: var(--state-color);
}

.technique-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.4);
}

.technique-state-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.technique-state-name {
  font-size: 11px;
  font-weight: 700;
}

.technique-title {
  margin: 0;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(34px,8vw,43px);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

.technique-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.technique-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border: 1px solid var(--page-border);
  border-radius: 10px;
  background: rgba(255,255,255,.65);
  color: #686C5F;
  font-size: 11px;
  font-weight: 700;
}

.technique-tag svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* DESCRIPTION */

.technique-intro {
  margin-top: 25px;
}

.section-label {
  margin: 0 0 10px;
  color: var(--page-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.technique-description {
  margin: 0;
  color: var(--page-muted);
  font-size: 13px;
  line-height: 1.85;
}

/* CAUTION */

.technique-caution {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid rgba(146,115,70,.15);
  border-radius: 16px;
  background: #F3E9D9;
}

.caution-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #70654E;
  font-size: 11px;
  font-weight: 800;
}

.caution-heading svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.technique-caution p {
  margin: 0;
  color: #70654E;
  font-size: 12px;
  line-height: 1.75;
}

/* STEP AREA */

.practice-section {
  margin-top: 28px;
}

.practice-card {
  padding: 22px 20px;
  border: 1px solid var(--page-border);
  border-radius: 21px;
  background: #FFFEFB;
  box-shadow: 0 6px 22px rgba(50,52,40,.035);
}

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

.practice-eyebrow {
  color: #6B684E;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.practice-count {
  color: var(--page-muted);
  font-size: 11px;
  font-weight: 700;
}

.progress-track {
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 10px;
  background: #EDEAE2;
}

.progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #989580;
  transition: width .25s ease;
}

.step-content {
  min-height: 175px;
  padding: 26px 0 20px;
  display: flex;
  align-items: center;
}

.step-text {
  margin: 0;
  color: var(--page-ink);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.practice-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.practice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 47px;
  padding: 12px 17px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background .18s ease,
    transform .18s ease;
}

.practice-btn:active {
  transform: scale(.98);
}

.practice-btn-primary {
  flex: 1;
  background: #464B35;
  color: #FFFEFB;
}

.practice-btn-primary:hover {
  background: #5C6247;
}

.practice-btn-secondary {
  background: #F1EFE9;
  color: #464B35;
  border-color: var(--page-border);
}

.practice-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.practice-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* EXIT */

.practice-exit {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--page-muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

/* FINISH */

.finish-view {
  margin-top: 28px;
}

.finish-card {
  padding: 25px 21px;
  border: 1px solid var(--page-border);
  border-radius: 21px;
  background: linear-gradient(
    135deg,
    #E4EBD8 0%,
    #F1E6D8 54%,
    #E6DCE8 100%
  );
}

.finish-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: 15px;
  background: rgba(255,255,255,.55);
}

.finish-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #464B35;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.finish-title {
  margin: 0;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.finish-description {
  margin: 12px 0 0;
  color: #686C5F;
  font-size: 13px;
  line-height: 1.8;
}

.feedback-heading {
  margin: 25px 0 12px;
  font-size: 13px;
  font-weight: 800;
}

.feedback-options {
  display: grid;
  gap: 9px;
}

.feedback-option {
  width: 100%;
  min-height: 46px;
  padding: 12px 15px;
  border: 1px solid rgba(70,75,53,.13);
  border-radius: 12px;
  background: rgba(255,255,255,.7);
  color: #464B35;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.feedback-option[aria-pressed="true"] {
  background: #464B35;
  color: #fff;
}

.feedback-response {
  margin: 15px 0 0;
  color: #686C5F;
  font-size: 12px;
  line-height: 1.75;
}

.finish-after {
  margin-top: 19px;
  padding-top: 17px;
  border-top: 1px solid rgba(70,75,53,.12);
  color: #686C5F;
  font-size: 12px;
  line-height: 1.75;
}

.finish-links {
  display: grid;
  gap: 10px;
  margin-top: 21px;
}

.finish-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  padding: 12px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
}

.finish-link-primary {
  background: #464B35;
  color: #FFFEFB;
}

.finish-link-secondary {
  border: 1px solid rgba(70,75,53,.13);
  background: rgba(255,255,255,.55);
  color: #464B35;
}

/* FOOTNOTE */

.practice-note {
  margin-top: 21px;
  color: var(--page-muted);
  font-size: 11px;
  line-height: 1.75;
}

.practice-note a {
  color: #464B35;
  font-weight: 700;
  text-underline-offset: 3px;
}

.error-message {
  padding: 20px;
  border: 1px solid var(--page-border);
  border-radius: 17px;
  background: #FFFEFB;
  color: var(--page-muted);
  font-size: 13px;
  line-height: 1.75;
}

/* MOBILE */

@media(max-width:370px) {
  .technique-app {
    width: calc(100% - 28px);
  }

  .practice-card {
    padding: 18px 16px;
  }

  .step-text {
    font-size: 16px;
  }

  .practice-actions {
    gap: 8px;
  }

  .practice-btn {
    padding: 11px 13px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .progress-fill,
  .practice-btn {
    transition: none;
  }
}

}

/* Page: questionnaires */
@scope (html[data-opora-page="questionnaires"]) {

:root {
  --bg: #F4EFE6;
  --paper: #FFFEFC;
  --olive: #464B35;
  --muted: #858677;
  --sage: #E8EADF;
  --line: #E5E0D5;
  --soft: #F0EBE1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--olive);
  font-family: "Manrope", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.page {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 28px 17px calc(120px + env(safe-area-inset-bottom));
}

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

.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--olive);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}

.back svg, .arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-count {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .19em;
  text-transform: uppercase;
}

h1, h2, h3 { margin-top: 0; }

.hero-title {
  margin-bottom: 17px;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(39px, 8.5vw, 60px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.08;
}

.hero-desc {
  max-width: 570px;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.95;
}

.search-wrap {
  position: relative;
  margin-bottom: 29px;
}

.search-wrap svg {
  position: absolute;
  top: 50%;
  left: 17px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  stroke: var(--muted);
  fill: none;
  stroke-width: 1.8;
  pointer-events: none;
}

.search {
  width: 100%;
  min-height: 55px;
  padding: 15px 18px 15px 48px;
  border: 1px solid var(--line);
  border-radius: 16px;
  outline: none;
  background: var(--paper);
  color: var(--olive);
  font-size: 12px;
}

.search:focus { border-color: var(--olive); }
.search::placeholder { color: #A2A194; }

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.section-title {
  margin: 0;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.section-subtitle {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.category {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  min-height: 166px;
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--paper);
  color: var(--olive);
  text-align: left;
  transition: transform .18s ease, border-color .18s ease;
}

.category:hover {
  transform: translateY(-2px);
  border-color: #B7B9A9;
}

.category-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.category-icon {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 12px;
  background: var(--sage);
}

.category-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--olive);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-name {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.category-count {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.category .arrow {
  display: inline-flex;
  color: var(--muted);
}

.panel {
  margin-top: 29px;
}

.panel-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
}

.panel-description {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

.small-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
  color: var(--olive);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.small-back svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tests {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.test-card {
  display: block;
  width: 100%;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  color: var(--olive);
  text-align: left;
  text-decoration: none;
}

.test-card.available {
  transition: transform .18s ease, border-color .18s ease;
}

.test-card.available:hover {
  transform: translateY(-2px);
  border-color: #AEB29D;
}

.test-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.test-title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.test-desc {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.85;
}

.test-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--olive);
  font-size: 10px;
  font-weight: 700;
}

.tag.live {
  background: var(--sage);
}

.tag.reflect {
  background: #F2E6DB;
}

.test-card .arrow {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sage);
}

.test-card:not(.available) .arrow {
  background: var(--soft);
  color: #AAA99E;
}

.notice {
  margin-top: 29px;
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--sage);
}

.notice h3 {
  margin: 0 0 8px;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 25px;
  font-weight: 400;
}

.notice p {
  margin: 0;
  font-size: 11px;
  line-height: 1.9;
}

.empty {
  padding: 30px 20px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}

footer {
  margin-top: 32px;
  color: #A5A194;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: center;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
}

@media (max-width: 430px) {
  .category {
    min-height: 150px;
    padding: 15px;
  }

  .category-name { font-size: 12px; }
  .test-card { padding: 17px; }
  .section-title { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .category, .test-card.available { transition: none; }
}

/* OPORA Plus — затверджений пастельний градієнт */
.test-card.plus-card{background:linear-gradient(130deg,#E4EBD8 0%,#F1E6D8 55%,#E6DCE8 100%);border-color:rgba(112,119,98,.15);color:#464B35;box-shadow:0 12px 28px rgba(70,75,53,.10)}
.test-card.plus-card .test-title,.test-card.plus-card .test-desc,.test-card.plus-card .tag,.test-card.plus-card .arrow{color:#464B35}
.test-card.plus-card .test-desc{opacity:.86}
.test-card.plus-card .tag{background:rgba(255,254,252,.46);border-color:rgba(112,119,98,.20)}
.test-card.plus-card .plus-label{background:#464B35;color:#FFFEFC;border-radius:999px;padding:7px 11px;font-size:10px;font-weight:800;letter-spacing:.07em}
.test-divider{margin:27px 0 13px;display:flex;align-items:center;gap:10px;color:#464B35;font-weight:800;font-size:13px}
.test-divider:after{content:"";height:1px;flex:1;background:#D9D8CE}
.test-divider small{display:block;font-weight:500;color:#777B6E;font-size:11px;margin-top:5px}
.test-kind{font-weight:700}
.test-card:focus-visible{outline:3px solid #A3AB82;outline-offset:3px}

}

/* Page: emotion-wheel */
@scope (html[data-opora-page="emotion-wheel"]) {

:root {
  --bg: #F4EFE6;
  --card: #FFFEFC;
  --ink: #464B35;
  --muted: #898978;
  --border: #E4DFD4;
  --sage: #E8EADF;
  --sand: #F1E6D6;
  --shadow: 0 -12px 40px rgba(70,75,53,.12);
}

* { box-sizing: border-box; }

html {
  width: 100%;
  min-width: 0;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }
button:disabled { cursor: default; }

[hidden] { display: none !important; }

.page {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 27px 18px calc(110px + env(safe-area-inset-bottom));
}

/* HEADER */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 19px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.back-link:hover { color: var(--ink); }

.back-link svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-header {
  margin-bottom: 25px;
}

.eyebrow {
  margin: 0 0 11px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

h1, h2 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 400;
}

h1 {
  margin: 0 0 11px;
  font-size: clamp(38px, 8vw, 52px);
  line-height: 1.12;
  letter-spacing: -.035em;
}

.intro {
  max-width: 480px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

/* LAYOUT */

.layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 340px;
  align-items: start;
  gap: 22px;
}

.wheel-card {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--card);
}

.wheel-holder {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 16px;
  background: var(--bg);
  touch-action: none;
  cursor: default;
}

.wheel-holder.dragging { cursor: grabbing !important; }

.wheel-transform {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}

#wheel {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* WHEEL */

.segment {
  cursor: pointer;
  stroke: var(--bg);
  stroke-width: 2;
  transform-origin: 400px 400px;
  outline: none;
  transition: filter .18s ease, stroke-width .18s ease;
}

.segment.active {
  stroke: var(--ink);
  stroke-width: 3.5;
  filter: brightness(1.08);
}

.segment:focus-visible {
  stroke: var(--ink);
  stroke-width: 4;
}

.wheel-label {
  font-family: "Manrope", sans-serif;
  pointer-events: none;
  user-select: none;
}

.wheel-label.core { font-weight: 800; }
.wheel-label.mid { font-weight: 700; }
.wheel-label.outer { font-weight: 600; }

.center-circle {
  fill: var(--bg);
  stroke: var(--border);
  stroke-width: 2;
}

.center-text {
  font-family: "Bodoni Moda", Georgia, serif;
  fill: var(--ink);
  text-anchor: middle;
  pointer-events: none;
}

/* ZOOM */

.zoom-controls {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,254,252,.96);
  box-shadow: 0 5px 18px rgba(70,75,53,.08);
}

.zoom-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 19px;
}

.zoom-button:hover:not(:disabled) {
  background: var(--sage);
}

.zoom-button:disabled { opacity: .35; }

.zoom-level {
  min-width: 40px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

/* LEGEND */

.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.legend-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
}

.legend-chip:hover {
  border-color: #989580;
  background: var(--sage);
}

.legend-chip .dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
}

/* INFORMATION PANEL */

.info-panel {
  position: sticky;
  top: 24px;
  min-height: 310px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
}

.panel-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.panel-tag .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.info-panel h2 {
  margin: 0 0 11px;
  font-size: 33px;
  line-height: 1.2;
}

.breadcrumb {
  margin: 0 0 17px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.description {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.9;
}

.hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.9;
}

.panel-close {
  display: none;
}

.sheet-backdrop {
  display: none;
}

/* EXPLANATION */

.wheel-note {
  margin-top: 15px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--sage);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.8;
}

.wheel-note strong { font-weight: 800; }

/* ACCESSIBILITY */

button:focus-visible,
.back-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* TABLET / MOBILE */

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

  .info-panel {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    min-height: 0;
    max-height: 70dvh;
    overflow-y: auto;
    padding: 29px 23px calc(29px + env(safe-area-inset-bottom));
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background: var(--card);
    box-shadow: var(--shadow);
    transform: translateY(105%);
    transition: transform .28s ease;
  }

  .info-panel.open {
    transform: translateY(0);
  }

  .panel-close {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg);
    color: var(--ink);
    font-size: 15px;
  }

  .sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(70,75,53,.4);
  }

  .sheet-backdrop.open {
    display: block;
  }
}

@media (max-width: 600px) {
  .page {
    padding: 24px 15px calc(110px + env(safe-area-inset-bottom));
  }

  .page-header { margin-bottom: 22px; }

  .wheel-card {
    padding: 10px;
    border-radius: 18px;
  }

  .wheel-holder { border-radius: 12px; }

  .zoom-controls {
    top: 18px;
    right: 18px;
    gap: 2px;
    padding: 3px;
  }

  .zoom-button {
    width: 30px;
    height: 30px;
    font-size: 17px;
  }

  .zoom-level {
    min-width: 37px;
    font-size: 10px;
  }

  .legend {
    gap: 7px;
    margin-top: 15px;
    padding: 0 2px 5px;
  }

  .legend-chip {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 10px;
  }

  .info-panel h2 { font-size: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  .segment,
  .info-panel {
    transition: none;
  }
}

}

/* Page: kudy-zvernutysya */
@scope (html[data-opora-page="kudy-zvernutysya"]) {

    :root {
      --ink: #464B35;
      --muted: #777866;
      --bg: #F4EFE6;
      --paper: #FFFDF9;
      --line: rgba(70,75,53,.13);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: Manrope, sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    a { color: inherit; text-decoration: none; }

    .page {
      width: min(100%, 900px);
      margin: 0 auto;
      padding: 22px 18px 16px;
    }

    .back {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 24px;
      font-size: 12px;
      font-weight: 600;
    }

    .back svg { width: 17px; height: 17px; }

    .eyebrow {
      margin: 0 0 9px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    h1, h2, h3, p { margin-top: 0; }

    h1 {
      margin-bottom: 10px;
      font: 400 clamp(40px, 7vw, 58px)/1.1 "Bodoni Moda", serif;
      letter-spacing: -.035em;
    }

    .intro {
      margin: 0 0 25px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.75;
    }

    /* SPECIALIST DISCOVERY — EDITORIAL PROMO BANNER */
    .specialist-section { margin: 0 0 32px; }
    .specialist-card {
      position: relative;
      display: block;
      isolation: isolate;
      min-height: 310px;
      overflow: hidden;
      padding: clamp(25px, 5vw, 46px);
      border: 1px solid rgba(70,75,53,.10);
      border-radius: 28px;
      color: #343C2D;
      background: linear-gradient(122deg,#E4EBD8 0%,#F2E7D9 54%,#E6DCE8 100%);
      box-shadow: 0 16px 42px rgba(70,75,53,.09);
      transition: transform .3s ease, box-shadow .3s ease;
    }
    .specialist-card:hover { transform: translateY(-3px); box-shadow: 0 22px 52px rgba(70,75,53,.13); }
    .specialist-card:focus-visible { outline: 3px solid #464B35; outline-offset: 4px; }
    .specialist-copy { position: relative; z-index: 2; max-width: 570px; }
    .specialist-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      margin: 0 0 24px; font-size: 10px; font-weight: 800;
      letter-spacing: .17em; text-transform: uppercase; color: #5E6852;
    }
    .specialist-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #66745B; }
    .specialist-card h2 {
      max-width: 520px; margin: 0 0 15px;
      font: 400 clamp(35px, 5.5vw, 55px)/1.06 "Bodoni Moda",serif;
      letter-spacing: -.045em;
    }
    .specialist-card h2 em { font-weight: 400; color: #798269; }
    .specialist-card p.specialist-description {
      max-width: 375px; margin: 0 0 27px;
      color: #5F6657; font-size: 12px; line-height: 1.8;
    }
    .specialist-cta {
      display: inline-flex; align-items: center; justify-content: center; gap: 17px;
      min-height: 49px; padding: 12px 17px 12px 20px; border-radius: 100px;
      color: #FFFEFC; background: #464B35;
      font-size: 12px; font-weight: 700; letter-spacing: .005em;
      box-shadow: 0 8px 20px rgba(70,75,53,.13);
      transition: background .2s ease, transform .2s ease;
    }
    .specialist-card:hover .specialist-cta { background: #333A2B; transform: translateX(2px); }
    .specialist-cta svg { width: 17px; height: 17px; }
    .specialist-art { position: absolute; z-index: 1; right: -12px; top: 0; bottom: 0; width: 46%; pointer-events: none; }
    .specialist-art::before {
      content: ""; position: absolute; width: 320px; height: 320px;
      right: -75px; top: -100px; border-radius: 50%;
      border: 1px solid rgba(70,75,53,.16); box-shadow: 0 0 0 45px rgba(255,255,255,.08),0 0 0 92px rgba(255,255,255,.06);
    }
    .specialist-orbit {
      position: absolute; right: 14%; bottom: -38px; width: 235px; height: 235px;
      border-radius: 50% 50% 14% 50%; transform: rotate(-25deg);
      background: linear-gradient(145deg,rgba(255,255,255,.72),rgba(174,187,158,.42));
      border: 1px solid rgba(255,255,255,.7); box-shadow: 0 20px 50px rgba(70,75,53,.08);
    }
    .specialist-orbit::before {
      content: ""; position: absolute; width: 120px; height: 120px; top: 38px; left: 45px;
      border-radius: 50%; border: 1px solid rgba(70,75,53,.17);
    }
    .specialist-orbit::after {
      content: "✳"; position: absolute; top: 70px; left: 83px;
      font: 400 65px/1 "Bodoni Moda",serif; color: rgba(70,75,53,.56);
      transform: rotate(25deg);
    }
    .specialist-spark { position: absolute; top: 24%; right: 24%; font: 400 36px/1 "Bodoni Moda",serif; color: rgba(70,75,53,.37); }
    @media (max-width: 600px) {
      .specialist-card { min-height: 350px; padding: 26px 24px; border-radius: 24px; }
      .specialist-copy { max-width: 100%; }
      .specialist-eyebrow { margin-bottom: 20px; }
      .specialist-card h2 { max-width: 290px; font-size: clamp(34px,9vw,45px); }
      .specialist-card p.specialist-description { max-width: 260px; font-size: 11px; }
      .specialist-art { width: 60%; right: -90px; opacity: .54; }
      .specialist-orbit { width: 195px; height: 195px; right: -15px; bottom: -50px; }
      .specialist-orbit::before { width: 95px; height: 95px; left: 36px; top: 30px; }
      .specialist-orbit::after { left: 67px; top: 52px; }
      .specialist-spark { right: 34%; }
    }
    @media (prefers-reduced-motion: reduce) {
      .specialist-card,.specialist-cta { transition: none; }
      .specialist-card:hover,.specialist-card:hover .specialist-cta { transform: none; }
    }

    /* VISUAL SEPARATION */

    .section-divider {
      height: 1px;
      margin-bottom: 25px;
      background: var(--line);
    }

    .crisis-header { margin-bottom: 17px; }

    .crisis-title {
      margin: 0 0 9px;
      font: 400 clamp(33px, 5vw, 44px)/1.15 "Bodoni Moda", serif;
      letter-spacing: -.025em;
    }

    .crisis-intro {
      max-width: 640px;
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.75;
    }

    /* EMERGENCY */

    .emergency {
      padding: 17px 18px;
      margin-bottom: 13px;
      background: #F0DFDB;
      border-radius: 18px;
    }

    .emergency h3 {
      margin: 0 0 5px;
      font-size: 13px;
      font-weight: 700;
    }

    .emergency p {
      margin: 0 0 13px;
      color: #786E68;
      font-size: 11px;
      line-height: 1.65;
    }

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

    .emergency-call {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 39px;
      padding: 10px 15px;
      border-radius: 100px;
      background: var(--ink);
      color: white;
      font-size: 12px;
      font-weight: 700;
    }

    .emergency-call.secondary {
      background: rgba(70,75,53,.1);
      color: var(--ink);
    }

    /* HOTLINE CARDS */

    .hotlines {
      display: grid;
      gap: 9px;
    }

    .hotline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      padding: 16px 18px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 17px;
    }

    .hotline-info { min-width: 0; }

    .hotline h3 {
      margin: 0 0 5px;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
    }

    .hotline-org {
      margin: 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.6;
    }

    .hotline-hours {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.55;
    }

    .hotline-action {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 7px;
      flex-shrink: 0;
    }

    .hotline-number {
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .call-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 35px;
      padding: 8px 13px;
      border-radius: 100px;
      background: #E4EBD8;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }

    .call-button svg {
      width: 15px;
      height: 15px;
    }

    .hotline.priority {
      border-color: rgba(154,105,96,.32);
      background: #FFF9F7;
    }

    .priority .call-button {
      background: #F0DFDB;
    }

    .source-note {
      margin: 14px 0 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.7;
    }

    .source-note a {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    a:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 3px;
    }

    @media (max-width: 480px) {
      .page { padding: 20px 14px 12px; }



      .hotline {
        padding: 14px 12px;
        gap: 10px;
      }

      .hotline h3 { font-size: 12px; }

      .hotline-org { font-size: 10px; }

      .hotline-number { font-size: 11px; }

      .call-button { padding: 8px 10px; }
    }


  
}

/* Page: korysne */
@scope (html[data-opora-page="korysne"]) {

    :root {
      --useful-bg: #F4EFE6;
      --useful-card: #FFFEFC;
      --useful-ink: #464B35;
      --useful-muted: #898978;
      --useful-border: #E4DFD4;
      --useful-sage: #E8EADF;
      --useful-sand: #F1E6D6;
    }

    * {
      box-sizing: border-box;
    }

    html {
      width: 100%;
      min-width: 0;
      -webkit-text-size-adjust: 100%;
    }

    body {
      margin: 0;
      min-width: 0;
      overflow-x: hidden;
      background: var(--useful-bg);
      color: var(--useful-ink);
      font-family: "Manrope", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    .useful-page {
      width: min(100%, 680px);
      margin: 0 auto;
      padding: 27px 18px 30px;
    }

    /* HEADER */

    .useful-eyebrow {
      margin: 0 0 11px;
      color: var(--useful-muted);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }

    .useful-title {
      margin: 0 0 11px;
      color: var(--useful-ink);
      font-family: "Bodoni Moda", Georgia, serif;
      font-size: clamp(40px, 9vw, 52px);
      font-weight: 400;
      line-height: 1.12;
      letter-spacing: -0.035em;
    }

    .useful-intro {
      max-width: 440px;
      margin: 0;
      color: var(--useful-muted);
      font-size: 13px;
      font-weight: 400;
      line-height: 1.8;
    }

    /* SECTION */

    .useful-section {
      margin-top: 30px;
    }

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

    .useful-section-title {
      margin: 0;
      color: var(--useful-ink);
      font-family: "Bodoni Moda", Georgia, serif;
      font-size: 27px;
      font-weight: 400;
      line-height: 1.2;
    }

    .useful-section-count {
      flex-shrink: 0;
      color: var(--useful-muted);
      font-size: 11px;
      font-weight: 600;
    }

    /* CARDS */

    .useful-cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 13px;
    }

    .useful-card {
      position: relative;
      display: block;
      min-width: 0;
      overflow: hidden;
      padding: 21px;
      border: 1px solid var(--useful-border);
      border-radius: 19px;
      background: var(--useful-card);
      color: var(--useful-ink);
      text-decoration: none;
      transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
    }

    .useful-card:hover {
      transform: translateY(-2px);
      border-color: #CBCDBD;
      box-shadow: 0 8px 22px rgba(70, 75, 53, 0.06);
    }

    .useful-card:focus-visible {
      outline: 2px solid var(--useful-ink);
      outline-offset: 3px;
    }

    .useful-card:active {
      transform: scale(0.99);
    }

    .useful-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 22px;
    }

    .useful-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      flex-shrink: 0;
      border-radius: 15px;
      background: var(--useful-sage);
      color: var(--useful-ink);
    }

    .useful-icon.sand {
      background: var(--useful-sand);
    }

    .useful-icon svg {
      width: 27px;
      height: 27px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .useful-card-number {
      color: #B2B1A5;
      font-family: "Bodoni Moda", Georgia, serif;
      font-size: 21px;
      line-height: 1;
    }

    .useful-card-title {
      margin: 0 0 9px;
      color: var(--useful-ink);
      font-family: "Bodoni Moda", Georgia, serif;
      font-size: clamp(27px, 6vw, 33px);
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: -0.025em;
    }

    .useful-card-description {
      max-width: 390px;
      margin: 0;
      color: var(--useful-muted);
      font-size: 12px;
      line-height: 1.8;
    }

    .useful-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 22px;
      padding-top: 15px;
      border-top: 1px solid var(--useful-border);
    }

    .useful-card-action {
      color: var(--useful-ink);
      font-size: 12px;
      font-weight: 800;
    }

    .useful-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 33px;
      height: 33px;
      flex-shrink: 0;
      border-radius: 50%;
      background: var(--useful-sage);
      color: var(--useful-ink);
      transition: transform 180ms ease;
    }

    .useful-arrow svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .useful-card:hover .useful-arrow {
      transform: translateX(3px);
    }

    /* INFO NOTE */

    .useful-info {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-top: 16px;
      padding: 15px;
      border: 1px solid #E5E2D8;
      border-radius: 14px;
      background: #EEEDE5;
    }

    .useful-info-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 21px;
      width: 21px;
      height: 21px;
      color: var(--useful-ink);
    }

    .useful-info-icon svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .useful-info p {
      margin: 0;
      color: #737665;
      font-size: 11px;
      line-height: 1.8;
    }

    /* COMING SOON */

    .useful-coming {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 25px;
      padding: 19px;
      border: 1px dashed #D6D4C7;
      border-radius: 17px;
      background: rgba(255, 254, 252, 0.45);
    }

    .useful-coming-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 43px;
      width: 43px;
      height: 43px;
      border-radius: 13px;
      background: #E9E8DE;
      color: var(--useful-ink);
    }

    .useful-coming-icon svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .useful-coming-copy {
      flex: 1;
      min-width: 0;
    }

    .useful-coming-title {
      margin: 0 0 4px;
      font-size: 12px;
      font-weight: 800;
    }

    .useful-coming-text {
      margin: 0;
      color: var(--useful-muted);
      font-size: 11px;
      line-height: 1.7;
    }

    /* FOOTER */

    .useful-footer {
      margin-top: 28px;
      padding-bottom: 14px;
      color: #A5A396;
      font-size: 10px;
      line-height: 1.7;
      text-align: center;
    }

    /* MOBILE */

    @media (max-width: 420px) {
      .useful-page {
        padding: 24px 15px 30px;
      }

      .useful-section {
        margin-top: 27px;
      }

      .useful-card {
        padding: 19px;
      }

      .useful-card-top {
        margin-bottom: 19px;
      }

      .useful-card-footer {
        margin-top: 19px;
      }

      .useful-coming {
        padding: 16px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .useful-card,
      .useful-arrow {
        transition: none;
      }
    }

    /* Dark mode: page-specific semantic palette */
    html[data-theme="dark"] {
      --useful-bg: #171B19;
      --useful-card: #242B27;
      --useful-ink: #F0EEE6;
      --useful-muted: #B9BFB4;
      --useful-border: #3A443C;
      --useful-sage: #344239;
      --useful-sand: #423C34;
    }
    html[data-theme="dark"] .useful-card-number,
    html[data-theme="dark"] .useful-footer { color: #ABB4A9; }
    html[data-theme="dark"] .useful-card:hover {
      border-color: #607064;
      box-shadow: 0 8px 22px rgba(0,0,0,.18);
    }
    html[data-theme="dark"] .useful-info {
      background: #202722;
      border-color: var(--useful-border);
    }
    html[data-theme="dark"] .useful-info p { color: var(--useful-muted); }
    html[data-theme="dark"] .useful-coming {
      background: #202722;
      border-color: #4B564D;
    }
    html[data-theme="dark"] .useful-coming-icon {
      background: #344239;
      color: var(--useful-ink);
    }
    html[data-theme="dark"] .useful-arrow {
      background: #344239;
      color: var(--useful-ink);
    }
  
}

/* Page: profile */
@scope (html[data-opora-page="profile"]) {

    :root {
      --bg: #F4EFE6;
      --ink: #464B35;
      --muted: #777866;
      --olive: #6B684E;
      --border: rgba(70,75,53,.12);
      --gradient: linear-gradient(
        135deg,
        #E4EBD8 0%,
        #F1E6D8 54%,
        #E6DCE8 100%
      );
    }

    * { box-sizing: border-box; }
    [hidden] { display: none !important; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: "Manrope", sans-serif;
    }

    button, input, select, textarea {
      font-family: inherit;
    }

    button { cursor: pointer; }
    button:disabled { opacity: .55; cursor: default; }

    .app {
      width: min(calc(100% - 36px), 520px);
      margin: auto;
      padding: 32px 0 125px;
    }

    .brand {
      margin: 0 0 12px;
      color: var(--olive);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .24em;
    }

    .plus-label {
      display: inline-flex;
      align-items: center;
      padding: 7px 11px;
      margin-bottom: 17px;
      border: 1px solid rgba(255,255,255,.7);
      border-radius: 99px;
      background: linear-gradient(135deg,#E4EBD8,#F1E6D8,#E6DCE8);
      color: #675E4D;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .06em;
    }

    .page-title {
      margin: 0;
      font-family: "Bodoni Moda", Georgia, serif;
      font-size: clamp(35px,9vw,45px);
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -.035em;
    }

    .page-description {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.7;
    }

    /* STATISTICS */

    .stats {
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: 11px;
      margin-top: 26px;
    }

    .stat-card {
      min-width: 0;
      min-height: 116px;
      padding: 17px;
      border: 1px solid rgba(100,100,85,.12);
      border-radius: 19px;
      background: var(--gradient);
      box-shadow: 0 8px 28px rgba(50,52,40,.045);
    }

    .stat-label {
      margin: 0 0 12px;
      color: #666B5B;
      font-size: 11px;
      line-height: 1.5;
    }

    .stat-number {
      margin: 0;
      font-family: "Bodoni Moda",Georgia,serif;
      font-size: 38px;
      font-weight: 400;
      line-height: 1.1;
      font-variant-numeric: tabular-nums;
    }

    .stat-card.wide {
      grid-column: 1 / -1;
      min-height: auto;
    }

    .stat-date {
      margin: 0;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.6;
    }

    .stat-meta {
      margin: 8px 0 0;
      color: #666B5B;
      font-size: 11px;
      line-height: 1.6;
    }

    /* ACCORDIONS */

    .sections {
      display: grid;
      gap: 11px;
      margin-top: 26px;
    }

    .fold {
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 19px;
      background: #FFFEFB;
      box-shadow: 0 8px 28px rgba(50,52,40,.045);
    }

    .fold > summary {
      display: flex;
      align-items: center;
      gap: 15px;
      min-height: 88px;
      padding: 17px;
      cursor: pointer;
      list-style: none;
    }

    .fold > summary::-webkit-details-marker {
      display: none;
    }

    .fold-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 49px;
      width: 49px;
      height: 49px;
      border-radius: 15px;
      background: #F0E7DB;
      color: var(--ink);
    }

    .fold:nth-child(2) .fold-icon { background: #E8EDE1; }
    .fold:nth-child(3) .fold-icon { background: #ECE7EF; }
    .fold:nth-child(4) .fold-icon { background: #E8EDE1; }

    .fold-icon svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .fold-title {
      flex: 1;
      min-width: 0;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.5;
    }

    .fold-arrow {
      width: 8px;
      height: 8px;
      margin-right: 5px;
      border-right: 1.6px solid #8A8C7A;
      border-bottom: 1.6px solid #8A8C7A;
      transform: rotate(45deg);
      transition: transform .2s;
    }

    .fold[open] .fold-arrow {
      transform: rotate(225deg);
    }

    .fold-content {
      padding: 18px;
      border-top: 1px solid var(--border);
    }

    /* SESSIONS */

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

    .section-title {
      margin: 0;
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .section + .section { margin-top: 27px; }

    .button {
      min-height: 42px;
      padding: 10px 15px;
      border: 0;
      border-radius: 12px;
      background: var(--ink);
      color: white;
      font-size: 12px;
      font-weight: 700;
    }

    .button.secondary {
      background: #F4EFE6;
      color: var(--ink);
    }

    .session-list {
      display: grid;
      gap: 10px;
    }

    .session-card,
    .specialist-card {
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: #F8F6F1;
    }

    .session-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
    }

    .session-date {
      margin: 0 0 5px;
      font-family: "Bodoni Moda",Georgia,serif;
      font-size: 22px;
      font-weight: 400;
    }

    .session-time {
      color: var(--muted);
      font-size: 12px;
    }

    .session-actions {
      display: flex;
      gap: 6px;
    }

    .icon-button {
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 10px;
      background: #EAE5DB;
      color: var(--ink);
      font-size: 15px;
    }

    .session-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 13px;
    }

    .pill {
      padding: 7px 11px;
      border: 0;
      border-radius: 99px;
      background: #EAE5DB;
      color: var(--olive);
      font-size: 11px;
      font-weight: 700;
    }

    .pill.paid {
      background: #E8EDE1;
      color: #48563F;
    }

    .pill.unpaid {
      background: #F5E9E7;
      color: #8B4B4B;
    }

    .session-note {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
      color: var(--muted);
      font-size: 12px;
      line-height: 1.7;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .note-button {
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      text-align: left;
      font-size: inherit;
      line-height: inherit;
    }

    .empty {
      padding: 18px;
      border-radius: 14px;
      background: #F8F6F1;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.7;
      text-align: center;
    }

    .specialist-card + .specialist-card {
      margin-top: 10px;
    }

    .specialist-name {
      margin: 0 0 6px;
      font-size: 14px;
      font-weight: 700;
    }

    .specialist-meta {
      margin: 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.7;
    }

    .feedback {
      margin: 12px 0;
      color: #8B4B4B;
      font-size: 12px;
      line-height: 1.7;
    }

    .status {
      margin-top: 20px;
      padding: 16px;
      border-radius: 14px;
      background: #FFFEFB;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.7;
    }

    /* MODAL */

    .overlay {
      position: fixed;
      inset: 0;
      z-index: 1500;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(30,34,27,.48);
      backdrop-filter: blur(6px);
    }

    .overlay.open { display: flex; }

    .modal {
      width: min(100%,430px);
      max-height: 90dvh;
      overflow-y: auto;
      padding: 23px;
      border-radius: 21px;
      background: #FFFEFB;
    }

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

    .modal-title {
      margin: 0;
      font-family: "Bodoni Moda",Georgia,serif;
      font-size: 27px;
      font-weight: 400;
    }

    .close-button {
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 10px;
      background: #F4EFE6;
      color: var(--ink);
      font-size: 23px;
    }

    .field { margin-bottom: 15px; }

    .field label {
      display: block;
      margin-bottom: 7px;
      color: var(--olive);
      font-size: 12px;
      font-weight: 700;
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      min-height: 46px;
      padding: 11px 12px;
      border: 1px solid var(--border);
      border-radius: 11px;
      background: #F8F6F1;
      color: var(--ink);
      font-size: 16px;
    }

    .field textarea {
      min-height: 100px;
      resize: vertical;
    }

    .modal-actions {
      display: flex;
      gap: 9px;
      margin-top: 20px;
    }

    .modal-actions button { flex: 1; }

    @media(max-width:370px) {
      .app { width: calc(100% - 28px); }
      .stat-card { padding: 14px; }
      .fold > summary { padding: 13px; gap: 11px; }
      .fold-content { padding: 13px; }
    }
  
}


/* ============================================================
   SHARED DESIGN SYSTEM — common geometry, rhythm and components
   ============================================================ */
:root {
  --ds-content-width: 760px;
  --ds-page-gutter: 18px;
  --ds-page-top: 28px;
  --ds-page-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
  --ds-section-gap: 28px;
  --ds-card-radius: 22px;
  --ds-card-padding: 20px;
  --ds-card-gap: 12px;
  --ds-control-height: 46px;
  --ds-control-radius: 13px;
  --ds-nav-clearance: calc(118px + env(safe-area-inset-bottom, 0px));
  --ds-bg: #F4EFE6;
  --ds-surface: #FFFEFC;
  --ds-text: #464B35;
  --ds-muted: #777866;
  --ds-line: #E4DFD4;
}
html[data-theme="dark"] {
  --ds-bg: #171B19;
  --ds-surface: #242B27;
  --ds-text: #F0EEE6;
  --ds-muted: #B9BFB4;
  --ds-line: #455047;
}
html[data-opora-page] { min-height:100%; background:var(--ds-bg); }
html[data-opora-page] body { min-height:100vh; background:var(--ds-bg); color:var(--ds-text); }
html[data-opora-page] :is(.home-app,.support-app,.state-app,.techniques-app,.technique-app,.useful-page,.app,.page) {
  width:min(100%,var(--ds-content-width));
  margin-inline:auto;
  padding:var(--ds-page-top) var(--ds-page-gutter) var(--ds-page-bottom);
}
html[data-opora-page] :is(.home-header,.support-header,.state-header,.page-header) { margin-bottom:var(--ds-section-gap); }
html[data-opora-page] :is(.home-section,.support-section,.useful-section,.practice-section) { margin-top:var(--ds-section-gap); }
html[data-opora-page] :is(.home-cards,.support-cards,.state-grid,.technique-list,.useful-cards,.categories,.tests,.hotlines,.session-list) { gap:var(--ds-card-gap); }
html[data-opora-page] :is(.home-card,.support-card,.state-card,.technique-card,.useful-card,.category,.test-card,.session-card,.stat-card,.wheel-card,.practice-card,.finish-card,.hotline,.fold) {
  border-radius:var(--ds-card-radius);
}
html[data-opora-page] :is(.home-button,.button,.practice-btn,.finish-link,.call-button,.specialist-cta) {
  min-height:var(--ds-control-height);
  border-radius:var(--ds-control-radius);
}
html[data-opora-page] :is(input,select,textarea) { color:var(--ds-text); }
html[data-opora-page] :is(.home-app,.support-app,.state-app,.techniques-app,.technique-app,.useful-page,.app,.page) > :last-child { margin-bottom:0; }
html[data-theme="dark"] :is(.support-card,.category,.test-card,.test-card.plus-card,.home-status,.home-development-label,.support-note) { border-color:var(--ds-line); }
html[data-theme="dark"] :is(.category,.category-name,.category-count,.test-card,.test-title,.test-desc,.home-development-label) { color:var(--ds-text); }
html[data-theme="dark"] .home-development-label { background:#39443C; color:#E0E9DC; border:1px solid #647365; }
@media (min-width: 768px) {
  :root { --ds-page-gutter:24px; --ds-page-top:36px; --ds-section-gap:32px; }
}

/* OPORA editorial rhythm — shared page-level typography and spacing */
:root {
  --ds-space-1:8px;
  --ds-space-2:12px;
  --ds-space-3:16px;
  --ds-space-4:24px;
  --ds-space-5:32px;
  --ds-space-6:40px;
  --ds-brand-size:11px;
  --ds-h1-size:clamp(38px,8vw,52px);
  --ds-h2-size:clamp(27px,6vw,34px);
  --ds-body-size:13px;
  --ds-body-leading:1.8;
}
html[data-opora-page] :is(.home-brand,.support-brand,.state-brand,.technique-brand,.useful-eyebrow,.brand,.page-header > .eyebrow,.page > .eyebrow,.home-header > .eyebrow) {
  margin:0 0 var(--ds-space-3);
  color:var(--ds-muted);
  font-family:"Manrope",sans-serif;
  font-size:var(--ds-brand-size);
  font-weight:800;
  line-height:1.4;
  letter-spacing:.22em;
  text-transform:uppercase;
}
html[data-opora-page] :is(.home-greeting,.support-title,.state-header .state-title,.technique-app > .technique-title,.useful-title,.page-title,.hero-title,.page-header h1,.page > h1) {
  margin-top:0;
  margin-bottom:var(--ds-space-2);
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:var(--ds-h1-size);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.035em;
}
html[data-opora-page] :is(.home-subtitle,.support-subtitle,.state-subtitle,.state-blurb,.useful-intro,.page-description,.hero-desc,.page-header .intro,.page > .intro) {
  margin-top:0;
  margin-bottom:0;
  color:var(--ds-muted);
  font-size:var(--ds-body-size);
  line-height:var(--ds-body-leading);
}
html[data-opora-page] :is(.home-section,.support-section,.useful-section,.practice-section) { margin-top:var(--ds-space-5); }
html[data-opora-page] :is(.home-eyebrow,.support-eyebrow,.state-eyebrow,.section-label,.section-heading,.section-head,.useful-section-heading) { margin-bottom:var(--ds-space-3); }
html[data-opora-page] :is(.useful-section-title,.section-title,.crisis-title,.section-heading h2) {
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:var(--ds-h2-size);
  font-weight:400;
  line-height:1.18;
  letter-spacing:-.025em;
}
html[data-opora-page] :is(.home-cards,.support-cards,.state-grid,.technique-list,.useful-cards,.categories,.tests,.hotlines,.session-list) { gap:var(--ds-space-2); }
html[data-opora-page] :is(.home-card,.support-card,.state-card,.technique-card,.useful-card,.category,.test-card,.session-card,.stat-card,.wheel-card,.practice-card,.finish-card,.hotline,.fold) { border-radius:var(--ds-card-radius); }
html[data-theme="dark"] :is(.home-brand,.support-brand,.state-brand,.technique-brand,.useful-eyebrow,.brand,.page-header > .eyebrow,.page > .eyebrow) { color:var(--ds-muted); }

/* Unified end-of-page clearance: one menu height plus a small visual gap.
   Do not stack the old per-page bottom paddings with this clearance. */
:root {
  --ds-bottom-nav-height: 76px;
  --ds-bottom-nav-gap: 8px;
  --ds-bottom-nav-offset: 0px;
  --ds-page-bottom: calc(var(--ds-bottom-nav-height) + var(--ds-bottom-nav-gap) + var(--ds-bottom-nav-offset) + env(safe-area-inset-bottom, 0px));
}
html[data-opora-page] body > :is(main,.home-app,.support-app,.state-app,.techniques-app,.technique-app,.useful-page,.app,.page),
html[data-opora-page] :is(main.home-app,main.support-app,main.state-app,main.techniques-app,main.technique-app,main.useful-page,main.app,main.page) {
  padding-bottom:var(--ds-page-bottom);
}
html[data-opora-page] :is(.home-app,.support-app,.state-app,.techniques-app,.technique-app,.useful-page,.app,.page) > :last-child {
  margin-bottom:0;
}

/* Support journey — gentle functional accents, not severity labels */
html[data-opora-page="meni-vazhko"] .support-card--self .support-card-icon { background:#DFEBDD; color:#405F49; }
html[data-opora-page="meni-vazhko"] .support-card--specialist .support-card-icon { background:#F4E8C8; color:#79602F; }
html[data-opora-page="meni-vazhko"] .support-card--crisis .support-card-icon { background:#F5DCD8; color:#984D47; }
html[data-opora-page="meni-vazhko"] .support-card--crisis { border-color:rgba(152,77,71,.24); }
html[data-theme="dark"][data-opora-page="meni-vazhko"] .support-card--self .support-card-icon { background:#304638; color:#CBE4CD; }
html[data-theme="dark"][data-opora-page="meni-vazhko"] .support-card--specialist .support-card-icon { background:#51452D; color:#F3DDA6; }
html[data-theme="dark"][data-opora-page="meni-vazhko"] .support-card--crisis .support-card-icon { background:#593A3A; color:#F3C2BC; }
html[data-theme="dark"][data-opora-page="meni-vazhko"] .support-card--crisis { border-color:rgba(243,194,188,.3); }
/* Crisis page: one introduction, urgent actions first, neutral contact list */
html[data-opora-page="kudy-zvernutysya"] .crisis-page-header { margin-bottom:24px; }
html[data-opora-page="kudy-zvernutysya"] .crisis-page-header .intro { margin-bottom:0; }
html[data-opora-page="kudy-zvernutysya"] .emergency { background:#F6E5E1; border:1px solid #E9C4BE; border-radius:var(--ds-card-radius); margin-bottom:24px; }
html[data-opora-page="kudy-zvernutysya"] .emergency-call { background:#874943; color:#FFF9F7; }
html[data-opora-page="kudy-zvernutysya"] .emergency-call.secondary { background:#FFF9F7; color:#874943; border:1px solid #E5BFB9; }
html[data-opora-page="kudy-zvernutysya"] .hotline,
html[data-opora-page="kudy-zvernutysya"] .hotline.priority { background:var(--ds-surface); border-color:var(--ds-line); color:var(--ds-text); }
html[data-opora-page="kudy-zvernutysya"] .call-button,
html[data-opora-page="kudy-zvernutysya"] .priority .call-button { background:#E3E8DD; color:#405444; }
html[data-theme="dark"][data-opora-page="kudy-zvernutysya"] .emergency { background:#402B2B; border-color:#80514F; color:#F5EAE5; }
html[data-theme="dark"][data-opora-page="kudy-zvernutysya"] .emergency p { color:#E0C5C0; }
html[data-theme="dark"][data-opora-page="kudy-zvernutysya"] .emergency-call { background:#B9756E; color:#1D1818; }
html[data-theme="dark"][data-opora-page="kudy-zvernutysya"] .emergency-call.secondary { background:#593A39; color:#F3D4CF; border-color:#95635D; }
html[data-theme="dark"][data-opora-page="kudy-zvernutysya"] .call-button { background:#39483D; color:#E2EEE2; }

/* Compact, readable tool cards — shared design-system overrides */
html[data-opora-page="korysne"] .useful-section { margin-top:28px; }
html[data-opora-page="korysne"] .useful-section-heading { margin-bottom:14px; }
html[data-opora-page="korysne"] .useful-cards { gap:12px; }
html[data-opora-page="korysne"] .useful-card {
  padding:18px 19px;
  border-radius:20px;
}
html[data-opora-page="korysne"] .useful-card-top {
  align-items:center;
  margin-bottom:13px;
}
html[data-opora-page="korysne"] .useful-icon {
  width:42px;
  height:42px;
  border-radius:12px;
}
html[data-opora-page="korysne"] .useful-icon svg { width:23px; height:23px; }
html[data-opora-page="korysne"] .useful-card-number { font-size:17px; }
html[data-opora-page="korysne"] .useful-card-title {
  margin-bottom:6px;
  font-size:clamp(25px,5.6vw,30px);
  line-height:1.16;
}
html[data-opora-page="korysne"] .useful-card-description {
  max-width:none;
  font-size:12px;
  line-height:1.65;
}
html[data-opora-page="korysne"] .useful-card-footer {
  margin-top:14px;
  padding-top:12px;
}
html[data-opora-page="korysne"] .useful-arrow {
  width:30px;
  height:30px;
}
html[data-opora-page="korysne"] .useful-arrow svg { width:16px; height:16px; }
@media (max-width:420px) {
  html[data-opora-page="korysne"] .useful-card { padding:17px; }
  html[data-opora-page="korysne"] .useful-card-top { margin-bottom:12px; }
  html[data-opora-page="korysne"] .useful-card-title { font-size:26px; }
}

/* Bottom navigation is fixed; do not reserve its height twice.
   One compact scroll clearance for the last interactive card. */
html[data-opora-page="korysne"] .useful-page {
  min-height:0;
  padding-bottom:calc(90px + env(safe-area-inset-bottom, 0px));
}
html[data-opora-page="korysne"] .useful-info { margin-bottom:0; }
html[data-opora-page="korysne"] .useful-coming { margin-top:18px; margin-bottom:0; }
html[data-opora-page="korysne"] .useful-footer { display:none; }

/* Shared mobile editorial layout — screenings, self-discovery, specialists */
html[data-opora-page="questionnaires"] .page,
html[data-opora-page="public-specialists"] .page {
  min-height:0;
  padding:20px 18px calc(94px + env(safe-area-inset-bottom,0px));
}
html[data-opora-page="questionnaires"] .topline {margin-bottom:24px;}
html[data-opora-page="questionnaires"] header {margin-bottom:18px;}
html[data-opora-page="questionnaires"] .hero-title,
html[data-opora-page="public-specialists"] h1 {
  margin:0 0 12px;
  font-size:clamp(36px,8.2vw,48px);
  line-height:1.12;
}
html[data-opora-page="questionnaires"] .hero-desc,
html[data-opora-page="public-specialists"] .intro {font-size:13px;line-height:1.7;}
html[data-opora-page="questionnaires"] .search-wrap {margin:18px 0 24px;}
html[data-opora-page="questionnaires"] .section-head {margin-bottom:14px;}
html[data-opora-page="questionnaires"] .section-title {font-size:clamp(27px,6vw,34px);line-height:1.2;}
html[data-opora-page="questionnaires"] .categories {gap:12px;}
html[data-opora-page="questionnaires"] .category {min-height:0;padding:16px;border-radius:18px;}
html[data-opora-page="questionnaires"] .category-top {margin-bottom:20px;}
html[data-opora-page="questionnaires"] .category-icon {width:39px;height:39px;}
html[data-opora-page="questionnaires"] .category-name {font-size:12px;line-height:1.5;}
html[data-opora-page="questionnaires"] .category-count {font-size:10px;}
html[data-opora-page="questionnaires"] .test-card {padding:16px;border-radius:18px;}
html[data-opora-page="questionnaires"] .test-desc {line-height:1.65;}
html[data-opora-page="questionnaires"] .panel-top {margin-bottom:18px;}
html[data-opora-page="questionnaires"] .notice {margin-top:22px;}
html[data-opora-page="questionnaires"] footer {display:none;}
html[data-opora-page="questionnaires"] .screening-panel .eyebrow,
html[data-opora-page="questionnaires"] .screening-panel .panel-description:empty {display:none;}
html[data-opora-page="questionnaires"] .screening-panel .section-title {font-size:27px;}
html[data-opora-page="public-specialists"] .back {margin-bottom:24px;}
html[data-opora-page="public-specialists"] .eyebrow {margin-bottom:16px;}
html[data-opora-page="public-specialists"] .intro {margin-bottom:24px;}
html[data-opora-page="public-specialists"] .tabs {gap:8px;margin-bottom:20px;}
html[data-opora-page="public-specialists"] .tab {font-size:11px;padding:12px 15px;min-height:44px;}
html[data-opora-page="public-specialists"] .state.catalog-error {
  padding:20px 18px;
  min-height:0;
  border-radius:18px;
  font-size:12px;
  line-height:1.7;
}
html[data-theme="dark"][data-opora-page="questionnaires"] :is(.category,.test-card,.search-wrap) {background:var(--ds-surface);border-color:var(--ds-line);color:var(--ds-text);}
html[data-theme="dark"][data-opora-page="public-specialists"] .state.catalog-error {background:var(--ds-surface);border-color:var(--ds-line);color:var(--ds-muted);}

/* Final content should stop just above the fixed bottom navigation.
   Avoid duplicate safe-area and per-page padding on the home screen. */
html[data-opora-page="index"] main.home-app {
  min-height:0;
  padding-bottom:calc(80px + env(safe-area-inset-bottom,0px));
}
html[data-opora-page="index"] main.home-app > .home-section:last-child {
  margin-bottom:0;
}

/* OPORA page-end rhythm — reference: home screen, 2026-10-16.
   Single bottom clearance, no additional trailing section margins. */
:root {
  --ds-page-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
html[data-opora-page] body > main:is(.home-app,.support-app,.state-app,.techniques-app,.technique-app,.useful-page,.app,.page),
html[data-opora-page] body > :is(main.page,main.useful-page,main.home-app,main.support-app) {
  min-height:0;
  padding-bottom:var(--ds-page-bottom);
}
html[data-opora-page] body > main > :last-child {
  margin-bottom:0;
}
html[data-opora-page="korysne"] .useful-page,
html[data-opora-page="questionnaires"] .page,
html[data-opora-page="public-specialists"] .page,
html[data-opora-page="index"] main.home-app {
  min-height:0;
  padding-bottom:var(--ds-page-bottom);
}

/* Self-discovery is not available yet: neutral non-interactive card */
html[data-opora-page="korysne"] .useful-card--coming-soon {cursor:default;box-shadow:none;}
html[data-opora-page="korysne"] .useful-card--coming-soon:hover {transform:none;}
html[data-opora-page="korysne"] .useful-card--coming-soon .useful-card-footer {justify-content:flex-start;}
html[data-opora-page="korysne"] .useful-card--coming-soon .useful-card-action {font-size:12px;color:var(--ds-muted);font-weight:700;}

/* Reusable status pill for unavailable Useful tools */
html[data-opora-page="korysne"] .useful-status-badge {
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:32px;
  padding:7px 13px;
  border-radius:999px;
  background:var(--ds-chip-bg, #e8e9df);
  color:var(--ds-text, #444a37);
  font:700 12px/1.3 "Manrope",sans-serif;
  letter-spacing:0;
}
html[data-theme="dark"][data-opora-page="korysne"] .useful-status-badge {
  background:#353a32;
  color:#e5e7da;
}

/* iOS Safari: clean search field, prevent focus zoom, tame tap highlights. */
html, body { -webkit-tap-highlight-color: transparent; }
html :is(a, button, input, textarea, select, summary, [role="button"], [tabindex]) {
  -webkit-tap-highlight-color: transparent;
}
@media (hover: none) and (pointer: coarse) {
  html :is(a, button, input, textarea, select, summary, [role="button"]):focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }
}
@media screen and (max-width: 767px) {
  html input:not([type="checkbox"]):not([type="radio"]),
  html textarea,
  html select {
    font-size: max(16px, 1em);
  }
}
/* Screening/reflection search: only one rounded border, no native iOS search decoration. */
html[data-opora-page="questionnaires"] .search-wrap {
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}
html[data-opora-page="questionnaires"] input.search {
  display: block;
  width: 100%;
  min-width: 0;
  font-size: 16px;
  line-height: 1.4;
  border: 1px solid var(--line, #e5e0d5);
  border-radius: 16px;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
html[data-opora-page="questionnaires"] input.search:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--olive, #464b35);
}
html[data-opora-page="questionnaires"] input.search:focus-visible {
  outline: 2px solid var(--olive, #464b35);
  outline-offset: 2px;
}
html[data-opora-page="questionnaires"] input.search::-webkit-search-decoration,
html[data-opora-page="questionnaires"] input.search::-webkit-search-results-button,
html[data-opora-page="questionnaires"] input.search::-webkit-search-results-decoration {
  display: none;
}

/* OPORA design system — informational notes, distinct from interactive cards.
   Dashed outline signals explanatory content rather than a selectable tool. */
:root {
  --ds-note-border: rgba(105, 112, 91, .52);
  --ds-note-surface: rgba(138, 148, 118, .055);
}
html[data-theme="dark"] {
  --ds-note-border: rgba(175, 189, 164, .5);
  --ds-note-surface: rgba(175, 189, 164, .045);
}
html[data-opora-page="questionnaires"] .notice,
html[data-opora-page="questionnaire"] .info:not(.warning),
html[data-opora-page="meni-vazhko"] .support-note,
html[data-opora-page="korysne"] .useful-coming {
  border: 1.5px dashed var(--ds-note-border);
  border-radius: 20px;
  background: var(--ds-note-surface);
  box-shadow: none;
}
html[data-opora-page="questionnaires"] .notice {
  padding: 20px 21px;
}
html[data-opora-page="questionnaires"] .notice h3 {
  font-size: 25px;
}
html[data-opora-page="questionnaires"] .notice p {
  font-size: 14px;
  line-height: 1.7;
}

/* OPORA: prevent native blue Safari focus rings on touch interactions.
   Keep a branded, visible focus indicator for keyboard navigation. */
:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
  outline-color: #64715A;
}
@media (hover: none) and (pointer: coarse) {
  html :is(a, button, input, select, textarea, summary, [role="button"]):focus,
  html :is(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  html :is(a, button, summary, [role="button"]) {
    -webkit-tap-highlight-color: transparent !important;
  }
  html :is(input, textarea, select):focus-visible {
    outline: 2px solid #64715A !important;
    outline-offset: 2px;
  }
}


/* OPORA PLUS — shared promotional system */
.op-plus-banner{position:relative;overflow:hidden;margin:25px 0;padding:27px 25px;border:1px solid rgba(97,109,86,.15);border-radius:24px;background:linear-gradient(128deg,#E4EBD8 0%,#F1E6D8 55%,#E6DCE8 100%);color:#364534;box-shadow:0 12px 28px rgba(70,75,53,.07);font-family:Manrope,Arial,sans-serif}
.op-plus-banner:before{content:"";position:absolute;width:190px;height:190px;border:1px solid rgba(70,75,53,.12);border-radius:50%;right:-85px;top:-85px;pointer-events:none}
.op-plus-banner__top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:17px}
.op-plus-banner__brand{font-size:11px;font-weight:800;letter-spacing:.11em}
.op-plus-banner__status{font-size:10px;font-weight:750;padding:6px 10px;border:1px solid rgba(70,75,53,.18);border-radius:40px;background:rgba(255,255,255,.36)}
.op-plus-banner__title{position:relative;margin:0 0 12px;color:#364534;font-family:"Bodoni Moda",Georgia,serif;font-weight:400;font-size:clamp(27px,6vw,39px);line-height:1.18;letter-spacing:-.025em}
.op-plus-banner__text{position:relative;margin:0 0 18px;max-width:560px;font-size:13px;line-height:1.8;color:#586354}
.op-plus-banner__chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.op-plus-banner__chips span{font-size:11px;padding:7px 10px;border-radius:30px;border:1px solid rgba(70,75,53,.14);background:rgba(255,255,255,.37)}
.op-plus-banner__link{display:inline-flex;align-items:center;justify-content:center;min-height:43px;padding:11px 17px;border-radius:12px;background:#364534;color:#fff!important;text-decoration:none;font-size:12px;font-weight:750}
.op-plus-banner__link:hover{background:#4C604A}
.op-plus-banner--compact{padding:23px}
.op-plus-banner--compact .op-plus-banner__title{font-size:clamp(25px,5vw,33px)}
html[data-theme="dark"] .op-plus-banner{background:linear-gradient(130deg,#3B4939,#50473E 55%,#494052);border-color:#64705D;color:#F8F3EB}
html[data-theme="dark"] .op-plus-banner__title,html[data-theme="dark"] .op-plus-banner__text{color:#F8F3EB}
html[data-theme="dark"] .op-plus-banner__link{background:#F4EFE6;color:#364534!important}
@media(max-width:420px){.op-plus-banner{padding:22px 19px;border-radius:21px}.op-plus-banner__text{font-size:12px}}