:root{
  --bg: var(--tg-theme-bg-color, #0b1220);
  --bg2: var(--tg-theme-secondary-bg-color, #0f1b2e);
  --text: var(--tg-theme-text-color, #eaf0ff);
  --hint: var(--tg-theme-hint-color, #9aa7c1);
  --btn: var(--tg-theme-button-color, #2f7cff);
  --btnText: var(--tg-theme-button-text-color, #ffffff);

  --radius: 18px;
  --shadow: 0 10px 28px rgba(0,0,0,.35);
  --border: rgba(255,255,255,.08);
}

/* Manual UI theme override (button in header)
   - default: Telegram theme (no data-theme attribute)
   - light/dark: force local palette
*/
:root[data-theme="light"]{
  --bg:#f7f9ff;
  --bg2:#ffffff;
  --text:#0b1220;
  --hint:#5b677f;
  --btn:#2f7cff;
  --btnText:#ffffff;
  --shadow: 0 10px 28px rgba(0,0,0,.18);
  --border: rgba(0,0,0,.08);
}
:root[data-theme="dark"]{
  --bg:#0b1220;
  --bg2:#0f1b2e;
  --text:#eaf0ff;
  --hint:#9aa7c1;
  --btn:#2f7cff;
  --btnText:#ffffff;
  --shadow: 0 10px 28px rgba(0,0,0,.35);
  --border: rgba(255,255,255,.08);
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; height:100%;
  background:var(--bg); color:var(--text);
  font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
button, .btn, .chip, .tab, .iconbtn, .miniicon, a{
  cursor: pointer;
}

button:disabled, .btn:disabled{
  cursor: not-allowed;
}

.app{ min-height:100dvh; padding-bottom:calc(74px + env(safe-area-inset-bottom)); }

.topbar{
  position:sticky; top:0; z-index:5;
  padding:14px 16px 10px;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}

.brand{ display:flex; gap:12px; align-items:center; }
.brand__icon{
  width:38px; height:38px; border-radius:14px;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--btn) 28%, var(--bg2));
  box-shadow:var(--shadow);
}
.brand__title{ font-weight:800; letter-spacing:.2px; }
.brand__subtitle{ color:var(--hint); font-size:12px; margin-top:2px; }
.brand__text{ display:grid; gap:2px; }

.subtitleRow{
  display:flex;
  align-items:center;
  gap:8px;
}
.subtitleRow #subtitle{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:200px;
}
.miniicon{
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--bg2) 88%, transparent);
  color:var(--text);
  display:grid;
  place-items:center;
  padding:0;
  line-height:1;
  font-size:15px;
}
.miniicon:active{ transform:scale(.98); }

.iconbtn{
  width:40px; height:40px; border-radius:14px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--bg2) 85%, transparent);
  color:var(--text);
  display:grid; place-items:center;
}

.content{ padding:14px 16px 0; max-width:760px; margin:0 auto; }
.screen{ display:none; }
.screen.is-active{ display:block; }

.hero{
  display:grid; grid-template-columns:1.2fr .8fr; gap:14px;
  padding:16px; border-radius:var(--radius);
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--btn) 28%, var(--bg2)),
    color-mix(in srgb, var(--bg2) 86%, black)
  );
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.hero__badge{
  display:inline-flex; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  font-size:12px; width:fit-content;
}

.hero__title{ margin:10px 0 6px; font-size:20px; line-height:1.15; letter-spacing:.2px; }
.hero__desc{ margin:0; color:color-mix(in srgb, var(--text) 80%, var(--hint)); }
.hero__actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }

.hero__art{
  position:relative; min-height:124px;
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
}
.blob{
  position:absolute; inset:-40px -60px auto auto;
  width:180px; height:180px; border-radius:60px;
  background:radial-gradient(circle at 30% 30%,
    rgba(255,255,255,.30),
    rgba(255,255,255,.08),
    transparent 60%
  );
  transform:rotate(18deg);
}
.mascot{
  position:absolute; left:14px; bottom:12px;
  font-size:64px;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.sparkle{ position:absolute; font-size:16px; opacity:.85; }
.s1{ top:10px; left:14px; }
.s2{ top:30px; right:18px; }
.s3{ bottom:16px; right:26px; }

.grid{ margin-top:14px; display:grid; gap:14px; }
.card{
  padding:16px; border-radius:var(--radius);
  background:color-mix(in srgb, var(--bg2) 92%, black);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.card--soft{ background:color-mix(in srgb, var(--bg2) 85%, var(--bg)); }
.card__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.card__title{ font-weight:800; letter-spacing:.2px; }
.card__hint{ color:var(--hint); font-size:12px; }

.btn{ border:0; border-radius:16px; padding:10px 14px; font-weight:800; letter-spacing:.2px; }
.btn-primary{ background:var(--btn); color:var(--btnText); }
.btn-ghost{ background:rgba(255,255,255,.06); color:var(--text); border:1px solid rgba(255,255,255,.12); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chips--small{ margin-top:10px; }
.chip{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  font-weight:700;
}
.chip--small{ padding:6px 10px; font-size:12px; }

.sosbox{
  margin-top:12px; padding:12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
}
.sosbox__title{ font-weight:800; margin-bottom:6px; }
.sosbox__text{ color:color-mix(in srgb, var(--text) 82%, var(--hint)); }

.note{
  padding:12px; border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  display:flex; gap:10px; align-items:flex-start;
}
.note__text{ color:color-mix(in srgb, var(--text) 80%, var(--hint)); }
.note__icon{ opacity:.9; }

.field{ display:block; margin-top:12px; }
.field__label{ color:var(--hint); font-size:12px; margin-bottom:6px; }
.field textarea{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.20);
  color:var(--text);
  padding:12px;
  outline:none;
  resize:vertical;
}
.field__meta{ margin-top:6px; color:var(--hint); font-size:12px; }

.input{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.20);
  color:var(--text);
  padding:12px;
  outline:none;
  margin-top:8px;
}

.actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.tiny{ margin-top:10px; color:var(--hint); font-size:12px; }
.muted{ color:var(--hint); }

.mood__row{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.mood__num{ font-size:34px; font-weight:900; line-height:1; }
.mood__label{ color:color-mix(in srgb, var(--text) 80%, var(--hint)); font-weight:700; }
.mood__faces{ opacity:.85; display:flex; gap:6px; }
.slider{ width:100%; margin-top:10px; accent-color:var(--btn); }

.prose p{ margin:10px 0; }

.tabs{
  position:fixed; left:0; right:0; bottom:0;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}
.tab{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:16px;
  padding:10px 8px;
  display:grid; place-items:center;
  gap:4px;
}
.tab__icon{ font-size:16px; }
.tab__text{ font-size:11px; color:color-mix(in srgb, var(--text) 75%, var(--hint)); font-weight:800; }
.tab.is-active{
  background:color-mix(in srgb, var(--btn) 22%, rgba(255,255,255,.06));
  border-color:color-mix(in srgb, var(--btn) 40%, rgba(255,255,255,.12));
}

.toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(92px + env(safe-area-inset-bottom));
  padding:10px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  font-weight:800;
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms ease;
  max-width:min(520px, calc(100vw - 24px));
  text-align:center;
}
.toast.is-show{ opacity:1; }

/* Segmented control */
.seg{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:12px;
}
.seg__btn{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:16px;
  padding:10px 8px;
  font-weight:800;
}
.seg__btn.is-active{
  background:color-mix(in srgb, var(--btn) 22%, rgba(255,255,255,.06));
  border-color:color-mix(in srgb, var(--btn) 40%, rgba(255,255,255,.12));
}

/* Lists */
.list{ margin-top:12px; display:grid; gap:10px; }
.item{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}
.item__title{ font-weight:900; margin-bottom:4px; }
.item__meta{ color:var(--hint); font-size:12px; }
.item__why{ margin-top:8px; color:color-mix(in srgb, var(--text) 82%, var(--hint)); }
.item__actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }

.panicpanel,.libpanel,.prpanel{ display:none; }
.panicpanel.is-active,.libpanel.is-active,.prpanel.is-active{ display:block; }

.player{
  margin-top:14px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
}
.player__title{ font-weight:900; }
.player__meta{ color:var(--hint); font-size:12px; margin-top:2px; }
.player__actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }

.account{
  display:flex; gap:12px; align-items:center;
  margin-top:14px; padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
}
.avatar{
  width:46px; height:46px; border-radius:16px;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--btn) 28%, var(--bg2));
  box-shadow:var(--shadow);
  font-weight:900;
}
.account__name{ font-weight:900; }
.account__meta{ color:var(--hint); font-size:12px; margin-top:2px; }

.row{ display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap; }

/* EMDR */
.emdr__stage{
  margin-top:12px;
  height:160px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  position:relative;
  overflow:hidden;
}
.dot{
  width:18px; height:18px; border-radius:999px;
  background:color-mix(in srgb, var(--btn) 75%, white);
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  left:10%;
  box-shadow:0 0 18px rgba(47,124,255,.35);
}

@media (max-width:520px){
  .hero{ grid-template-columns:1fr; }
  .hero__art{ min-height:110px; }
}
.item.item--clickable{
  cursor:pointer;
}
.item.item--clickable:active{
  transform:scale(.99);
}
.item__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.check{
  display:flex;
  align-items:center;
  gap:10px;
}
.check input{
  width:18px;
  height:18px;
}

.seg__btn.is-active{
  background:color-mix(in srgb, var(--btn) 22%, rgba(255,255,255,.04));
  border-color:color-mix(in srgb, var(--btn) 55%, rgba(255,255,255,.10));
}

.dot.mode-dot{
  width:18px; height:18px;
  border-radius:999px;
  box-shadow:0 0 18px rgba(47,124,255,.35);
}

.dot.mode-glow{
  width:44px; height:44px;
  border-radius:999px;
  background:radial-gradient(circle, color-mix(in srgb, var(--btn) 70%, white) 0%, rgba(47,124,255,.08) 60%, rgba(47,124,255,0) 75%);
  box-shadow:0 0 34px rgba(47,124,255,.35);
  opacity:.95;
}

.dot.mode-bar{
  width:10px; height:70px;
  border-radius:12px;
  background:color-mix(in srgb, var(--btn) 70%, white);
  box-shadow:0 0 26px rgba(47,124,255,.30);
}