:root{
  /* Default theme: DARK (current design) */
  --bg:#070708;
  --card:#0f0f12;
  --text:#f3f0e8;
  --muted:#b7b0a0;

  --accent:#d4af37;   /* золото */
  --accent2:#f5c542;  /* теплий акцент */
  --danger:#ff5a5f;
  --success:#2ecc71;

  --border:rgba(212,175,55,0.18);

  /* Surfaces / effects */
  --topbar-bg: rgba(15,15,18,0.78);
  --panel-bg: rgba(15,15,18,0.92);
  --hover-bg: rgba(255,255,255,0.04);
  --badge-bg: rgba(255,255,255,0.04);

  --input-bg: rgba(15,15,18,0.9);
  --input-border: rgba(212,175,55,0.22);
  --label: rgba(243,240,232,0.78);

  --shadow-soft: rgba(0,0,0,0.35);
  --shadow-strong: rgba(0,0,0,0.45);

  /* Background glow */
  --bg-grad-1: rgba(212,175,55,0.20);
  --bg-grad-2: rgba(245,197,66,0.12);
}


html[data-theme="light"]{
  /* LIGHT theme (Apple-like) */
  --bg:#F5F5F7;
  --card:#FFFFFF;
  --text:#1D1D1F;
  --muted:#6E6E73;

  --accent:#0071E3;
  --accent2:#005BB5;
  --danger:#FF3B30;
  --success:#34C759;

  --border: rgba(29,29,31,0.14);

  --topbar-bg: rgba(255,255,255,0.86);
  --panel-bg: rgba(255,255,255,0.92);
  --hover-bg: rgba(29,29,31,0.04);
  --badge-bg: rgba(29,29,31,0.05);

  --input-bg: rgba(255,255,255,0.94);
  --input-border: rgba(29,29,31,0.18);
  --label: rgba(29,29,31,0.72);

  --shadow-soft: rgba(29,29,31,0.10);
  --shadow-strong: rgba(29,29,31,0.16);

  /* Background glow (keep the "logo" vibe) */
  --bg-grad-1: rgba(0,113,227,0.14);
  --bg-grad-2: rgba(212,175,55,0.10);
}


*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: radial-gradient(1200px 800px at 20% 0%, rgba(212,175,55,0.20), transparent 60%),
              radial-gradient(900px 700px at 80% 20%, rgba(245,197,66,0.12), transparent 60%),
              var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* гарантируем кликабельность */
body, .layout, .panel, .tabs, button, textarea, input { pointer-events:auto; }
.hidden{ display:none !important; }

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.5px;
  color:var(--text);
  text-decoration:none;
}

.brand__logo{
  width:200px;
  height:100px;
  object-fit:contain;
  border-radius:8px;
  box-shadow: 0 8px 20px var(--shadow-soft);
}

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

.badge{
  padding:6px 10px;
  border:1px solid var(--border);
  background: var(--badge-bg);
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
}

.layout{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:18px;

  padding-left: var(--sidebar-width);
  padding-top: var(--modebar-height);
}

.tabs{
  display:flex;
  gap:10px;
  padding:10px;
  border:1px solid var(--border);
  background: rgba(15,15,18,0.55);
  border-radius:16px;
}

.tab{
  border: 1px solid rgba(212,175,55,0.18);
  background: rgba(255,255,255,0.01);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
}
.tab: active{ transform: translateY(1px); }
.tab:active{ transform: translateY(1px); }
.tab.active{
  border-color: rgba(212,175,55,0.65);
  background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(245,197,66,0.12));
}

.panel{
  margin-top:14px;
  border:1px solid var(--border);
  background: rgba(15,15,18,0.55);
  border-radius:18px;
  padding:14px;
  min-height:520px;
}

.view{ height:100%; }

.hint{
  color:var(--muted);
  font-size:13px;
  margin: 0 0 10px 0;
}

/* --- чат-подобный лог --- */
.log{
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  background: rgba(0,0,0,0.15);
  height:420px;
  overflow:auto;
}

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

/* ряд сообщения */
.msg-row{
  display:flex;
  width:100%;
}
.msg-row.user{ justify-content:flex-end; }
.msg-row.assistant{ justify-content:flex-start; }

/* пузырь */
.bubble{
  max-width:78%;
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px 12px;
  background: rgba(255,255,255,0.03);
  white-space:pre-wrap;
  line-height:1.4;
}

.msg-row.user .bubble{
  background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(245,197,66,0.12));
  border-color: rgba(91,140,255,0.35);
}

.bubble .meta{
  font-size:11px;
  color:var(--muted);
  margin-bottom:6px;
}

.bubble .txt{
  white-space:pre-wrap;
}

/* composer */
.composer{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
  align-items:stretch;
}

.composer-row{
  display:flex;
  gap:10px;
  align-items:center;
}
.composer-row .input{
  flex:1;
}

.input{
  width:100%;
  resize:vertical;
  border:1px solid var(--border);
  background: rgba(0,0,0,0.18);
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
}

.text{
  width:100%;
  border:1px solid var(--border);
  background: rgba(0,0,0,0.18);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}

.lbl{
  display:block;
  margin:10px 0 6px;
  font-size:12px;
  color:var(--muted);
}

.btn{
  border: 1px solid var(--input-border);
  background: rgba(255,255,255,0.02);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  white-space:nowrap;
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
}
.btn: hover{ border-color: rgba(245,197,66,0.45); }
.btn: hover{ border-color: rgba(245,197,66,0.45); }

.btn-primary{
  border-color: rgba(91,140,255,0.55);
  background: linear-gradient(135deg, rgba(91,140,255,0.35), rgba(245,197,66,0.18));
}

.btn-ghost{
  background: transparent;
}

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

/* --- court subtabs --- */
.subtabs{
  display:flex;
  gap:8px;
  padding:10px;
  border:1px solid var(--border);
  background: rgba(15,15,18,0.35);
  border-radius:16px;
  margin: 10px 0;
  flex-wrap:wrap;
}

.subtabs-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
}

.subtab,.subtab2{
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color:var(--text);
  padding:8px 12px;
  border-radius:12px;
  cursor:pointer;
}

.subtab.active,.subtab2.active{
  border-color: rgba(212,175,55,0.65);
  background: linear-gradient(135deg, rgba(0,113,227,0.16), rgba(245,197,66,0.12));
}

.court-grid{
  display:block;
}


.btncol{ display:flex; flex-direction:column; gap:8px; }

.card{
  border:1px solid var(--border);
  background: var(--panel-bg);
  border-radius:16px;
  padding:12px;
}

.code{
  border:1px solid var(--border);
  background: var(--input-bg);
  border-radius:14px;
  padding:12px;
  margin-top:10px;
  overflow:auto;
  max-height:320px;
}

/* ------------------------------------------------------------------ */
/* ✅ ДОБАВЛЕНО: стили для модалки "Тарифи" и карточек планов           */
/* ------------------------------------------------------------------ */

.modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}

.modal__panel{
  position: relative;
  width: min(920px, calc(100% - 40px));
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 20px 80px var(--shadow-strong);
}

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

.modal__title{
  font-size: 18px;
  font-weight: 800;
}

.modal__sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.plans{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 12px;
}

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

.plan-card{
  border: 1px solid var(--border);
  background:  var(--panel-bg);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
}

.plan-card--highlight{
  border-color: rgba(0,113,227,0.55);
  background: linear-gradient(135deg, rgba(0,113,227,0.16), rgba(245,197,66,0.10));
}

.plan-card__name{
  font-weight: 800;
  font-size: 16px;
}

.plan-card__price{
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .2px;
  margin-top: 2px;
}

.plan-card__muted{
  color: var(--muted);
  font-size: 13px;
}

.plan-card__btn{
  margin-top: auto;
  width: 100%;
}

.modal__msg{
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(0,0,0,0.18);
  color: var(--muted);
}


/* ===== Public landing ===== */
.container{
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 56px;
}

.container--public{ padding-top: 28px; }

.topbar--public .nav--public{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}

.brand--link{
  color: var(--text);
  text-decoration:none;
}

.nav a{
  color: var(--muted);
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 10px;
}
.nav a:hover{
  color: var(--text);
  background: var(--badge-bg);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--input-border);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  font-weight: 700;
  text-decoration:none;
  cursor:pointer;
}
.btn: hover{ border-color: rgba(245,197,66,0.45); }

.btn--ghost{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.01);
}

.btn--xl{ padding: 12px 16px; border-radius: 16px; }

.section{
  margin-top: 44px;
}

.section__title{
  margin: 0;
  font-size: 28px;
  letter-spacing: .2px;
}

.section__subtitle{
  margin: 10px 0 0;
  color: var(--muted);
}

.hero{
  margin-top: 18px;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .topbar--public{ gap: 10px; flex-wrap: wrap; }
  .topbar--public .right{ width: 100%; justify-content:flex-end; }
}

.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--badge-bg);
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
}

.hero__title{
  margin: 14px 0 0;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: .3px;
}
@media (max-width: 980px){
  .hero__title{ font-size: 36px; }
}

.hero__subtitle{
  margin: 14px 0 0;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
}

.hero__cta{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.hero__note{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(183,176,160,0.85);
}

.card{
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel-bg);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.glass{ padding: 16px; }

.card__kicker{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
}

.card__actions{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.chatbubble{
  margin-top: 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.chatbubble__me,
.chatbubble__ai{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  line-height: 1.45;
  font-size: 14px;
}
.chatbubble__me{
  background: var(--badge-bg);
}
.chatbubble__ai{
  background: linear-gradient(135deg, rgba(91,140,255,0.15), rgba(245,197,66,0.08));
}

.grid3{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 980px){
  .grid3{ grid-template-columns: 1fr; }
}

.feature{ padding: 16px; }
.feature__icon{ font-size: 22px; }
.feature__title{ margin-top: 8px; font-weight: 900; }
.feature__text{ margin-top: 8px; color: var(--muted); line-height: 1.55; }

.steps{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 980px){
  .steps{ grid-template-columns: 1fr; }
}

.step{ padding: 16px; }
.step__n{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  border: 1px solid rgba(91,140,255,0.55);
  background: rgba(91,140,255,0.15);
}
.step__title{ margin-top: 10px; font-weight: 900; }
.step__text{ margin-top: 8px; color: var(--muted); line-height: 1.55; }

.quote{ padding: 16px; }
.quote__text{ line-height: 1.6; }
.quote__meta{ margin-top: 10px; color: var(--muted); font-size: 13px; }

.pricing{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 980px){
  .pricing{ grid-template-columns: 1fr; }
}

.plan{ padding: 16px; display:flex; flex-direction: column; min-height: 260px; }
.plan--highlight{
  border-color: rgba(91,140,255,0.55);
  background: linear-gradient(135deg, rgba(0,113,227,0.16), rgba(245,197,66,0.10));
}
.plan__name{ font-weight: 900; }
.plan__price{ font-size: 34px; font-weight: 950; margin-top: 6px; }
.plan__muted{ color: var(--muted); margin-top: 4px; }
.plan__list{ margin: 14px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.6; }
.plan__btn{ margin-top: auto; width: 100%; }

.faq{ margin-top: 16px; display:flex; flex-direction: column; gap: 12px; }
.faq__item{ padding: 14px 16px; }
.faq__item summary{
  cursor:pointer;
  font-weight: 900;
}
.faq__text{ margin-top: 10px; color: var(--muted); line-height: 1.6; }

.cta{
  margin-top: 46px;
  padding-bottom: 10px;
}
.cta__inner{ padding: 18px; display:flex; flex-direction: column; gap: 10px; }
.cta__title{ margin: 0; font-size: 22px; }
.cta__text{ margin: 0; color: var(--muted); }
.cta__actions{ display:flex; gap: 12px; flex-wrap: wrap; }

.footer{
  margin-top:auto;
  border-top: 1px solid var(--border);
  background: rgba(15,15,18,0.55);
  padding: 22px 0;
}
.footer__inner{
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  display:flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items:center;
  justify-content: space-between;
}
.footer__brand{ font-weight: 900; }
.footer__links{ display:flex; gap: 12px; flex-wrap: wrap; }
.footer__links a{ color: var(--muted); text-decoration:none; }
.footer__links a:hover{ color: var(--text); }
.footer__copy{ color: rgba(183,176,160,0.85); font-size: 12px; }



/* ===== Landing v2 (selling) ===== */
.hero--new .grad{
  background: linear-gradient(135deg, rgba(91,140,255,1), rgba(245,197,66,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pill--shine{
  border-color: rgba(91,140,255,0.45);
  background: linear-gradient(135deg, rgba(0,113,227,0.16), rgba(245,197,66,0.08));
}

.hero__bullets{
  margin: 16px 0 0;
  padding-left: 18px;
  color: rgba(243,240,232,0.92);
  line-height: 1.65;
}
.hero__bullets li{ margin: 6px 0; }
.hero__bullets b{ color: var(--text); }

.trustline{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px 12px;
}
.trustline__item{
  color: var(--muted);
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
}

.showcase{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(15,15,18,0.55);
  border-radius: 20px;
  overflow:hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  backdrop-filter: blur(14px);
}
.showcase__top{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.12);
}
.dot{ width:10px; height:10px; border-radius: 999px; }
.dot--r{ background: rgba(255,95,86,0.9); }
.dot--y{ background: rgba(255,189,46,0.9); }
.dot--g{ background: rgba(39,201,63,0.9); }
.showcase__title{
  margin-left: 6px;
  font-weight: 900;
  color: rgba(243,240,232,0.92);
  font-size: 13px;
}

.showcase__tabs{
  display:flex;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.showcase__tab{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}
.showcase__tab.active{
  color: var(--text);
  border-color: rgba(91,140,255,0.55);
  background: rgba(91,140,255,0.14);
}

.showcase__body{ padding: 14px; }
.bubble{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  line-height: 1.5;
  font-size: 14px;
}
.bubble + .bubble{ margin-top: 10px; }
.bubble--me{ background: rgba(255,255,255,0.03); }
.bubble--ai{ background: linear-gradient(135deg, rgba(91,140,255,0.15), rgba(245,197,66,0.08)); }

.showcase__meta{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(91,140,255,0.35);
  background: rgba(91,140,255,0.10);
  color: rgba(243,240,232,0.92);
  font-size: 12px;
  font-weight: 800;
}
.chip--ghost{
  border-color: var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
}

.showcase__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}

/* Value grid */
.grid2{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 980px){
  .grid2{ grid-template-columns: 1fr; }
}
.value{ padding: 16px; }
.value__title{ font-weight: 950; font-size: 16px; }
.value__text{ margin-top: 10px; color: var(--muted); line-height: 1.6; }
.value__points{ margin-top: 12px; display:flex; gap: 10px; flex-wrap:wrap; }

/* Feature meta */
.feature--new .feature__meta{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

/* Callout */
.callout{
  margin-top: 14px;
  padding: 16px;
  border-color: rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.14);
}
.callout__title{
  font-weight: 950;
  margin-bottom: 8px;
}
.callout__text{
  color: rgba(243,240,232,0.90);
  line-height: 1.65;
}

/* Demo block */
.demo{ padding: 0; overflow:hidden; }
.demo__bar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.12);
}
.demo__brand{ font-weight: 950; }
.demo__tabs{ display:flex; gap: 8px; flex-wrap:wrap; }
.demo__tabs button{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-weight: 900;
  cursor:pointer;
}
.demo__tabs button.active{
  color: var(--text);
  border-color: rgba(91,140,255,0.55);
  background: rgba(91,140,255,0.14);
}
.demo__tabs button:hover{ filter: brightness(1.06); }

.demo__body{ padding: 14px; }
.demo__hint{
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 10px;
}
.demo__log{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.demo__composer{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.demo__input{
  flex: 1 1 340px;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  outline: none;
}
.demo__input::placeholder{ color: rgba(183,176,160,0.70); }

/* CTA after demo */
.cta2{
  margin-top: 14px;
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content: space-between;
  flex-wrap:wrap;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(91,140,255,0.14), rgba(245,197,66,0.08));
}
.cta2__title{ font-weight: 950; }
.cta2__text{ margin-top: 6px; color: var(--muted); }
.cta2__right{ display:flex; gap: 10px; flex-wrap:wrap; }

/* Pricing tweaks */
/* Pricing tweaks */
.pricing--new .plan--new .plan__price{
  font-size: 34px;
}
.plan--new .plan__price::after{
  content: " credits";
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  margin-left: 8px;
}
.plan--new.plan--highlight{
  border-color: rgba(91,140,255,0.60);
  background: linear-gradient(135deg, rgba(91,140,255,0.20), rgba(245,197,66,0.11));
}


.micro{
  margin-top: 12px;
  display:flex;
  gap: 10px 14px;
  flex-wrap:wrap;
  color: var(--muted);
  font-size: 13px;
}
.micro__item{
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
}

/* Footer tweaks */
.footer__left{ display:flex; flex-direction: column; gap: 4px; }
.footer__tag{ color: rgba(183,176,160,0.85); font-size: 12px; }


/* ===== Legal pages (privacy/terms) ===== */
.legal{ margin-top: 22px; }
.legal__head{ margin: 10px 0 16px; }
.legal__title{ margin: 0; font-size: 34px; letter-spacing: .2px; }
.legal__meta{ margin-top: 8px; color: var(--muted); font-size: 13px; }
.legal__card{ padding: 18px; }
.legal__card h3{ margin: 18px 0 8px; }
.legal__card p, .legal__card li{ color: var(--muted); line-height: 1.65; }
.legal__card b{ color: var(--text); }
.legal__cta{ margin-top: 16px; padding: 18px; display:flex; flex-direction: column; gap: 10px; }
.legal__ctaTitle{ font-weight: 950; font-size: 20px; }
.legal__ctaText{ color: var(--muted); }
.legal__ctaActions{ display:flex; gap: 12px; flex-wrap: wrap; }


/* ===== Landing v3 tweaks ===== */

.hero__bullets2{
  margin-top: 18px;
  display: grid;
  gap: 10px;
}
.hb2__item{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 12px 12px;
}
.hb2__title{
  font-weight: 900;
  letter-spacing: .2px;
}
.hb2__text{
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}

.showcase .mini{
  padding: 14px;
}
.mini__kicker{
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .7px;
}
.mini__grid{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}
.mini__row{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  align-items: start;
}
@media (max-width: 980px){
  .mini__row{ grid-template-columns: 1fr; }
}
.mini__label{
  font-weight: 900;
  color: rgba(243,240,232,0.92);
}
.mini__text{
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}
.mini__actions{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.mini__note{ margin-top: 10px; font-size: 12px; }

.steps--new .step__text{ font-size: 14px; }

.cta2--compact{ margin-top: 16px; }


/* ===== Legal page switch ===== */

.legal__switch{
  margin-top: 10px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.legal__link{
  color: var(--text);
  text-decoration:none;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  font-weight: 800;
  font-size: 12px;
}
.legal__link:hover{ filter: brightness(1.06); }
.legal__sep{ color: rgba(183,176,160,0.70); }


/* ===== Landing tweaks (UA v4.1) ===== */
.hero--breakout{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  padding: 34px 0 18px;
}
.hero__inner{
  width: min(1360px, calc(100% - 32px));
  margin: 0 auto;
}
.hero__left--wide{
  max-width: 100%;
}
.hero__title--wide{
  font-size: 52px;
  line-height: 1.03;
  letter-spacing: .2px;
  max-width: 1200px;
}
.hero__subtitle--wide{
  max-width: 980px;
  font-size: 18px;
}
.hero__cta--single{
  margin-top: 22px;
}
@media (max-width: 980px){
  .hero--breakout{ padding-top: 22px; }
  .hero__title--wide{ font-size: 38px; }
  .hero__subtitle--wide{ font-size: 16px; }
}
.cta__actions--single{
  justify-content: flex-start;
}

/* ===== Landing hero full-width (centered) ===== */

.hero--full{
  /* full-width background, but centered content */
  width: 100%;
  padding: 48px 0 22px;
  margin-top: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(91,140,255,0.28), transparent 60%),
    radial-gradient(900px 600px at 85% 30%, rgba(245,197,66,0.14), transparent 60%),
    rgba(15,15,18,0.35);
  box-shadow: 0 18px 50px rgba(0,0,0,0.30);
  overflow: hidden;
}

/* inside container, keep it centered and wide */
.hero__inner{
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

/* grid */
.hero__grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items: start;
}

/* typography */
.hero__title{
  margin: 14px 0 0;
  font-size: 52px;
  line-height: 1.02;
  letter-spacing: 0.2px;
}

.hero__subtitle--tight{
  max-width: 62ch;
  font-size: 16px;
}

/* proof cards under subtitle */
.hero__proof{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.proofCard{
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 12px;
}

.proofCard__title{
  font-weight: 900;
  margin-bottom: 6px;
}

.proofCard__text{
  color: var(--muted);
  line-height: 1.55;
  font-size: 13px;
}

/* CTA single button */
.hero__cta--single{
  margin-top: 18px;
}

/* right mock */
.heroMock{
  padding: 14px;
  border-radius: 20px;
}

.heroMock__head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom: 10px;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .7px;
}

.heroMock__title{
  margin-left: 6px;
}

.heroMock__tags{
  margin-top: 12px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.heroMock__foot{
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 10px;
}

.heroMock__hint{
  color: rgba(183,176,160,0.90);
  font-size: 12px;
}

/* responsiveness */
@media (max-width: 980px){
  .hero--full{ padding: 30px 0 18px; }
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__title{ font-size: 38px; }
  .hero__proof{ grid-template-columns: 1fr; }
}

/* ===== Hero: single column / full width text ===== */
.hero__grid--single{
  grid-template-columns: 1fr !important;
}

.hero__left--wide{
  max-width: none;
}

.hero__title--wide{
  font-size: 56px;
  max-width: 20ch;
}

.hero__subtitle--wide{
  max-width: 72ch;
}

.hero__proof--wide{
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 980px){
  .hero__title--wide{ font-size: 40px; max-width: none; }
  .hero__subtitle--wide{ max-width: none; }
  .hero__proof--wide{ grid-template-columns: 1fr; }
}

/* ===== Hero centered ===== */
.hero__grid--center{
  justify-items: center;
}

.hero__left--center{
  text-align: center;
}

.hero__title--center{
  margin-left: auto;
  margin-right: auto;
}

.hero__subtitle--center{
  margin-left: auto;
  margin-right: auto;
}

.hero__proof--center{
  width: 100%;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.hero__cta--center{
  justify-content: center;
}

.hero__note--center{
  max-width: 90ch;
  margin-left: auto;
  margin-right: auto;
}

/* make the main headline feel “hero” even more */
.hero__title--wide{
  max-width: 22ch;
}

@media (max-width: 980px){
  .hero__proof--center{ max-width: none; }
  .hero__title--wide{ max-width: none; }
}




/* Pricing display (discount) */
.price-old{
  color: var(--danger);
  text-decoration: line-through;
  font-weight: 700;
}
.price-discount{
  color: var(--muted);
  font-weight: 700;
  margin-left: 6px;
}
.price-new{
  color: #0b6b2e; /* dark green */
  font-weight: 800;
}
.price-free{
  color: var(--muted);
  font-weight: 700;
}

/* Tariffs page plan list */
.plans{ display:grid; gap:12px; }
.planRow{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.planRow__name{ font-size:18px; font-weight:800; }
.planRow__muted{ color:var(--muted); font-size:12px; }
.planRow__right{ text-align:right; }
.planRow__price{ font-size:18px; line-height:1.2; }
.planRow__credits{ margin-top:6px; font-size:12px; }


.row{display:flex;align-items:center;}
.gap{gap:8px;}

/* ChatGPT-like left sidebar for chat history */
.chat-shell{display:flex;gap:12px;align-items:stretch;}
.chat-sidebar{width:240px;min-width:200px;max-width:280px;display:flex;flex-direction:column;gap:10px;}
.chat-chats{border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;}
.chat-chat-item{width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:transparent;border:0;color:inherit;cursor:pointer;text-align:left;}
.chat-chat-item:hover{background:rgba(255,255,255,0.06);}
.chat-chat-item.active{background:rgba(255,255,255,0.10);}
.chat-chat-title{font-size:13px;opacity:0.95;}
.chat-main{flex:1;min-width:0;}


/* --- ChatGPT-like attachments UI --- */
.btn-danger{
  background:#2b2b2b;
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
.btn-danger:hover{ filter:brightness(1.08); }

.attachbar{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}

.iconbtn{
  width:40px;
  height:40px;
  border-radius:12px;
  border: 1px solid rgba(212,175,55,0.18);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.iconbtn: hover{ border-color: rgba(245,197,66,0.45); }

.hidden-file{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}

.files-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:8px;
}

.file-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
  font-size:13px;
}

.file-pill__x{
  border:none;
  background:transparent;
  color:rgba(255,255,255,.8);
  cursor:pointer;
  font-size:14px;
  line-height:1;
}
.file-pill__x:hover{ color:#fff; }


.msg-files{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 6px; }
.file-pill--msg{ padding:6px 10px; }

.court-title{ margin-top:10px; }


/* chat bubbles like ChatGPT */
.log .msg{
  max-width:78%;
  margin:10px 0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.log .msg.user{
  margin-left:auto;
}
.log .msg.assistant{
  margin-right:auto;
}
.msg-title{
  font-size:12px;
  opacity:0.75;
  padding-left:6px;
}
.msg-logo{
  height:48px;
  width:auto;
  display:inline-block;
  vertical-align:middle;
}
.msg-files{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.file-pill--msg{
  background:rgba(255,255,255,.06);
}
.msg-body{
  border: none;
  border-radius:16px;
  padding:10px 12px;
  background: transparent;
  line-height:1.45;
  white-space:pre-wrap;
}
/* УБРАТЬ белую "карточку" в сообщениях (только внутри чата) */
.log .msg-body .card{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Tighten markdown spacing inside messages (especially assistant) */
.msg-body p{ margin: 0 0 10px; }
.msg-body p:last-child{ margin-bottom: 0; }
.msg-body ul, .msg-body ol{
  margin: 6px 0 10px 18px;
  padding: 0;
}
.msg-body li{ margin: 0 0 6px; }
.msg-body li:last-child{ margin-bottom: 0; }
.msg-body pre{ margin: 10px 0; }
.msg-body blockquote{ margin: 10px 0; }

/* Reduce excessive gaps in markdown blocks (headings, rules) */
.msg-body h1, .msg-body h2, .msg-body h3, .msg-body h4, .msg-body h5, .msg-body h6{
  margin: 0 0 10px;
  line-height: 1.25;
}
.msg-body h1:last-child, .msg-body h2:last-child, .msg-body h3:last-child,
.msg-body h4:last-child, .msg-body h5:last-child, .msg-body h6:last-child{
  margin-bottom: 0;
}
.msg-body hr{ margin: 10px 0; border: 0; border-top: 1px solid rgba(255,255,255,0.18); }

/* For assistant markdown, do not preserve raw newlines (pre-wrap creates big vertical gaps) */
.log .msg.assistant .msg-body{ white-space: normal; }
.log .msg.user .msg-body{
  background: rgba(255,255,255,0.06);
}


/* Landing тарифы (секция #pricing) */
#pricing .pricing--tariffs{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 980px){
  #pricing .pricing--tariffs{ grid-template-columns: 1fr; }
}

#pricing .tariff-card, .modal__panel--tariffs .tariff-card, #tariffsModal .tariff-card{
  position: relative;
  padding: 26px 22px 22px;
  border-radius: 18px;
  border: 1px solid rgba(231, 180, 78, 0.55);
  background:
    radial-gradient(1200px 380px at 50% -10%, rgba(231, 180, 78, 0.20), rgba(0,0,0,0) 55%),
    radial-gradient(900px 420px at 50% 120%, rgba(231, 180, 78, 0.10), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(23, 18, 17, 0.92), rgba(12, 10, 11, 0.92));
  box-shadow:
    0 18px 55px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}


/* Tariffs — align FREE/SMART/BUSINESS content + buttons */
.tariff-card{
  display:flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-width: 0;
}

.tariff-features{ 
  margin-top: 14px;
  margin-bottom: 14px;
  flex: 1 1 auto;
}

.tariff-btn{ margin-top: auto; }
#pricing .tariff-card--featured, .modal__panel--tariffs .tariff-card--featured, #tariffsModal .tariff-card--featured{
  border: 1px solid rgba(231, 180, 78, 0.95);
  box-shadow:
    0 22px 70px rgba(0,0,0,0.62),
    0 0 0 1px rgba(231, 180, 78, 0.25),
    0 0 40px rgba(231, 180, 78, 0.22),
    inset 0 0 0 1px rgba(255,255,255,0.05);
}

#pricing .tariff-badge, .modal__panel--tariffs .tariff-badge, #tariffsModal .tariff-badge{
  position:absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #201208;
  background: linear-gradient(180deg, rgba(255, 220, 140, 1), rgba(212, 156, 55, 1));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}

#pricing .tariff-title, .modal__panel--tariffs .tariff-title{
  text-align:center;
  font-weight: 950;
  letter-spacing: 0.08em;
  font-size: 34px;
}
#pricing .tariff-subtitle, .modal__panel--tariffs .tariff-subtitle{
  text-align:center;
  margin-top: 6px;
  color: rgba(255,255,255,0.78);
  font-weight: 700;
}

#pricing .tariff-price, .modal__panel--tariffs .tariff-price, #tariffsModal .tariff-price{
  text-align:center;
  margin-top: 18px;
  /* keep the features list aligned across all plans */
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.tariff-price__main{
  font-size: 40px;
  font-weight: 950;
}
.tariff-price__slash{
  font-size: 34px;
  font-weight: 900;
  opacity: 0.8;
}
.tariff-price__per{
  font-size: 18px;
  font-weight: 800;
  opacity: 0.85;
  margin-left: 6px;
}
.tariff-price__note{
  margin-top: 2px;
  font-size: 18px;
  font-weight: 800;
  opacity: 0.9;
}

/* Align FREE note with SMART/BUSINESS save line */
.tariff-card--free .tariff-price__note{ margin-top: 44px; }

.tariff-price__meta{
  margin-top: 8px;
  font-weight: 800;
}
.tariff-price__old{
  opacity: 0.55;
  text-decoration: line-through;
  margin-right: 10px;
}

/* FREE plan: hide the "$2" helper line while keeping layout */
.tariff-card--free .tariff-price__old{
  opacity: 0 !important;
}
.tariff-price__discount{
  color: #ff5a5a;
  font-weight: 950;
}
.tariff-price__save{
  margin-top: 8px;
  color: rgba(231, 180, 78, 0.95);
  font-weight: 900;
}

#pricing .tariff-features, .modal__panel--tariffs .tariff-features{
  list-style:none;
  padding: 0;
  margin: 18px 0 0;
  display:flex;
  flex-direction: column;
  gap: 10px;
  color: rgba(255,255,255,0.85);
  font-weight: 700;
}
#pricing .tariff-features__item, .modal__panel--tariffs .tariff-features__item{
  display:flex;
  align-items: center;
  gap: 10px;
}
#pricing .tariff-features__item::before, .modal__panel--tariffs .tariff-features__item::before{
  content: "✓";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  color: #0b130c;
  background: #6fe08c;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
}
#pricing .tariff-features__item--no, .modal__panel--tariffs .tariff-features__item--no{
  opacity: 0.75;
}
#pricing .tariff-features__item--no::before, .modal__panel--tariffs .tariff-features__item--no::before{
  content: "✕";
  color: #2b0b0b;
  background: #ff6a6a;
}

#pricing .tariff-btn, .modal__panel--tariffs .tariff-btn{
  margin-top: 20px;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 950;
}
#pricing .tariff-btn--gold, .modal__panel--tariffs .tariff-btn--gold{
  background: linear-gradient(180deg, rgba(255, 220, 140, 1), rgba(212, 156, 55, 1));
  color: #201208;
  border-color: rgba(255,255,255,0.18);
}
#pricing .tariff-btn--gold:hover, .modal__panel--tariffs .tariff-btn--gold:hover{
  filter: brightness(1.05);
}




#tariffsModal .modal__panel--tariffs{
  width: min(1180px, calc(100% - 40px));
}
#tariffsModal .modal__sub{
  max-width: 720px;
}
#tariffsModal .pricing--tariffs{
  margin-top: 10px;
}
#tariffsModal .micro--tariffs{ margin-top: 14px; }

/* Landing тарифы (секция #tariffsModal) */
#tariffsModal .pricing--tariffs{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 980px){
  #tariffsModal .pricing--tariffs{ grid-template-columns: 1fr; }
}

#tariffsModal .tariff-card{
  position: relative;
  padding: 26px 22px 22px;
  border-radius: 18px;
  border: 1px solid rgba(231, 180, 78, 0.55);
  background:
    radial-gradient(1200px 380px at 50% -10%, rgba(231, 180, 78, 0.20), rgba(0,0,0,0) 55%),
    radial-gradient(900px 420px at 50% 120%, rgba(231, 180, 78, 0.10), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(23, 18, 17, 0.92), rgba(12, 10, 11, 0.92));
  box-shadow:
    0 18px 55px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

#tariffsModal .tariff-card--featured{
  border: 1px solid rgba(231, 180, 78, 0.95);
  box-shadow:
    0 22px 70px rgba(0,0,0,0.62),
    0 0 0 1px rgba(231, 180, 78, 0.25),
    0 0 40px rgba(231, 180, 78, 0.22),
    inset 0 0 0 1px rgba(255,255,255,0.05);
}

#tariffsModal .tariff-badge{
  position:absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #201208;
  background: linear-gradient(180deg, rgba(255, 220, 140, 1), rgba(212, 156, 55, 1));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}

#tariffsModal .tariff-title{
  text-align:center;
  font-weight: 950;
  letter-spacing: 0.08em;
  font-size: 34px;
}
#tariffsModal .tariff-subtitle{
  text-align:center;
  margin-top: 6px;
  color: rgba(255,255,255,0.78);
  font-weight: 700;
}

#tariffsModal .tariff-price{
  text-align:center;
  margin-top: 18px;
  /* keep the features list aligned across all plans */
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
#tariffsModal .tariff-price__main{
  font-size: 40px;
  font-weight: 950;
}
#tariffsModal .tariff-price__slash{
  font-size: 34px;
  font-weight: 900;
  opacity: 0.8;
}
#tariffsModal .tariff-price__per{
  font-size: 18px;
  font-weight: 800;
  opacity: 0.85;
  margin-left: 6px;
}
#tariffsModal .tariff-price__note{
  margin-top: 2px;
  font-size: 18px;
  font-weight: 800;
  opacity: 0.9;
}
#tariffsModal .tariff-price__meta{
  margin-top: 8px;
  font-weight: 800;
}
#tariffsModal .tariff-price__old{
  opacity: 0.55;
  text-decoration: line-through;
  margin-right: 10px;
}
#tariffsModal .tariff-price__discount{
  color: #ff5a5a;
  font-weight: 950;
}
#tariffsModal .tariff-price__save{
  margin-top: 8px;
  color: rgba(231, 180, 78, 0.95);
  font-weight: 900;
}

#tariffsModal .tariff-features{
  list-style:none;
  padding: 0;
  margin: 18px 0 0;
  display:flex;
  flex-direction: column;
  gap: 10px;
  color: rgba(255,255,255,0.85);
  font-weight: 700;
}
#tariffsModal .tariff-features__item{
  display:flex;
  align-items: center;
  gap: 10px;
}
#tariffsModal .tariff-features__item::before{
  content: "✓";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  color: #0b130c;
  background: #6fe08c;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
}
#tariffsModal .tariff-features__item--no{
  opacity: 0.75;
}
#tariffsModal .tariff-features__item--no::before{
  content: "✕";
  color: #2b0b0b;
  background: #ff6a6a;
}

#tariffsModal .tariff-btn{
  margin-top: 20px;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 950;
}
#tariffsModal .tariff-btn--gold{
  background: linear-gradient(180deg, rgba(255, 220, 140, 1), rgba(212, 156, 55, 1));
  color: #201208;
  border-color: rgba(255,255,255,0.18);
}
#tariffsModal .tariff-btn--gold:hover{
  filter: brightness(1.05);
}


/* === ChatGPT-like layout overrides (fixed sidebar + fixed composer + fixed modebar) === */

:root{
  --sidebar-width: 320px;
  --edge-gap: 0px;
  --modebar-height: 56px;
  --composer-safe-height: 180px;
  --composer-bottom-gap: 14px;
}
.chat-shell{
  position: relative;
}

/* Fixed left sidebar */
.chat-sidebar{
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 50;
}

.chat-sidebar .sidebar-top{
  flex: 0 0 auto;
  display: grid;
  gap: 10px;
}

.chat-sidebar .sidebar-history{
  flex: 1 1 auto;
  overflow: auto;
  padding-right: 4px;
}

.chat-sidebar .sidebar-bottom{
  position: relative;
  flex: 0 0 auto;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 10px;
}

.chat-sidebar .sidebar-account-btn{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: inherit;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
}

.chat-sidebar .sidebar-account-menu{
  /* collapsible block under the Account button (reliable on all screen sizes) */
  position: static;
  display: none;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.32);
}



.chat-sidebar .sidebar-bottom.account-open .sidebar-account-menu{
  display: grid;
}
/* Account menu collapse + inline profile */
.sidebar-profile-panel[hidden]{ display:none !important; }

.sidebar-profile-panel{
  margin-top: 6px;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  display: grid;
  gap: 6px;
}

.sidebar-profile-row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  line-height: 1.25;
}

.sidebar-profile-k{ opacity: .8; }
.sidebar-profile-v{ opacity: .95; text-align:right; word-break: break-word; }
.chat-sidebar .sidebar-link{
  color: inherit;
  text-decoration: none;
  opacity: .9;
}
.chat-sidebar .sidebar-link:hover{
  opacity: 1;
  text-decoration: underline;
}

.chat-sidebar .sidebar-note{
  margin-top: 10px;
  font-size: 12px;
  opacity: .75;
}

/* Main area shifted right from fixed sidebar */
.chat-main.fixed-composer{
  position: fixed;
  top: var(--modebar-height);
  left: var(--sidebar-width);
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
}
/* Make log scrollable and reserve space for fixed composer */
.chat-main.fixed-composer .log{
  flex: 1;
  height: auto;
  overflow: auto;

  /* 1) прибираємо "рамочку" (border) та зайвий фон у чат-діалозі */
  border: none;
  background: transparent;

  /* 2) резервуємо місце під fixed-composer + залишаємо невеликий зазор зверху від поля вводу */
  padding-bottom: calc(var(--composer-safe-height) + 2px);
}

/* Fixed composer at the bottom of the viewport (always accessible) */
.chat-main.fixed-composer .composer{
  position: fixed;
  left: var(--sidebar-width) !important;
  right: 0;
  bottom: 0 !important;
  z-index: 60;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

/* Ensure composer inner spacing doesn't touch edges */
.chat-main.fixed-composer .composer-row{
  align-items: flex-end;
}

/* On very small screens, fall back to non-fixed sidebar */
@media (max-width: 900px){
  :root{ --sidebar-width: 280px; }
}
@media (max-width: 720px){
  .chat-sidebar{ position: static; width: auto; height: auto; border-right: none; }
  .topbar.modebar{ position: static; left: 0; height: auto; }
  .layout{ padding-left: 0; padding-top: 0; }
  .chat-main.fixed-composer{ position: static; }
  .chat-main.fixed-composer .composer{ position: static; left:auto; right:auto; bottom:auto; }
}
.chat-main.fixed-composer{
    margin-left: 0;
    margin-right: 0;
  }
  .chat-main.fixed-composer .composer{
    position: sticky;
    left: var(--sidebar-width) !important;
    right: auto;
    bottom: 0;
  }
}


/* Fixed mode bar on the right (modes: Chat/Quote/Court) */
.topbar.modebar{
  position: fixed;
  left: var(--sidebar-width) !important;
  right: 0;
  top: 0;
  height: var(--modebar-height) !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 14px;
  z-index: 70;
}
.topbar.modebar .mode-tabs{
  display: flex;
  gap: 10px;
}


/* Sidebar brand/logo */
.chat-sidebar .sidebar-brand{
  padding: 14px 14px 6px 14px;
}
.chat-sidebar .sidebar-brand__logo{ height: 40px; width: auto; display:block; }

.chat-sidebar.fixed-sidebar{
  background: rgba(0,0,0,.20);
  border-right: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  z-index: 80;
  display:flex;
  flex-direction:column;
}

.chat-sidebar .sidebar-mode{
  flex: 1 1 auto;
  overflow: hidden;
  display:flex;
}
.chat-sidebar .sidebar-section{
  display:none;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0 14px;
}
.chat-sidebar .sidebar-section.active{ display:flex; }

.chat-sidebar .sidebar-top{ flex:0 0 auto; display:grid; gap:10px; padding-top: 10px; }
.chat-sidebar .sidebar-history{ flex:1 1 auto; overflow:auto; padding-top: 10px; padding-right: 4px; }

.chat-sidebar .sidebar-bottom{ flex:0 0 auto; padding: 10px 14px 14px 14px; border-top:1px solid rgba(255,255,255,.08); }
.chat-sidebar .sidebar-account-btn{ width:100%; }
.chat-sidebar .sidebar-action{ width:100%; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color:inherit; padding:10px 12px; text-align:left; cursor:pointer; }
.chat-sidebar .sidebar-action.danger{ border-color: rgba(255,90,95,.35); }
.chat-sidebar .sidebar-badges{ display:grid; gap:8px; }



/* === v4 fixes === */
/* 1) Modebar must sit to the right of the fixed sidebar (not underneath it) */
.topbar.modebar{
  position: fixed !important;
  top: 0 !important;
  left: var(--sidebar-width) !important;
  right: 0 !important;
  height: var(--modebar-height) !important;
  min-height: var(--modebar-height) !important;
  z-index: 55 !important;
  display: flex !important;
  align-items: center !important;
}

/* 2) Remove wide background hint panels inside chat/quote/court views */
.view .hint{
  display: none !important;
}

/* 3) Ensure the fixed composer is anchored to the bottom of the viewport */
.chat-main.fixed-composer .composer{
  position: fixed !important;
  left: var(--sidebar-width) !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Keep some breathing room inside the composer while it is full-width */
.chat-main.fixed-composer .composer{
  padding-bottom: 10px !important;
}

/* Make sure the log never hides behind the bottom-fixed composer */
.chat-main.fixed-composer .log{
  flex: 1;
  height: auto;
  overflow: auto;

  /* 1) прибираємо "рамочку" (border) та зайвий фон у чат-діалозі */
  border: none;
  background: transparent;

  /* 2) резервуємо місце під fixed-composer + залишаємо невеликий зазор зверху від поля вводу */
  padding-bottom: calc(var(--composer-safe-height) + 2px);
}

/* === v5 fixes === */
/* 1) Center mode buttons horizontally */
.topbar.modebar{
  justify-content: center !important;
}
.topbar.modebar .mode-tabs{
  margin: 0 auto !important;
}

/* 2) Remove remaining frame around the dialog/log area */
.chat-main.fixed-composer .log{
  flex: 1;
  height: auto;
  overflow: auto;

  /* 1) прибираємо "рамочку" (border) та зайвий фон у чат-діалозі */
  border: none;
  background: transparent;

  /* 2) резервуємо місце під fixed-composer + залишаємо невеликий зазор зверху від поля вводу */
  padding-bottom: calc(var(--composer-safe-height) + 2px);
}

/* 3) Ensure dialog history ends above the fixed composer (extra gap) */
.chat-main.fixed-composer .log{
  flex: 1;
  height: auto;
  overflow: auto;

  /* 1) прибираємо "рамочку" (border) та зайвий фон у чат-діалозі */
  border: none;
  background: transparent;

  /* 2) резервуємо місце під fixed-composer + залишаємо невеликий зазор зверху від поля вводу */
  padding-bottom: calc(var(--composer-safe-height) + 2px);
}


/* === v6 fixes (requested) === */
/* 1) Remove the remaining "frame" behind the dialog area (panel background/border) */
.chat-main.fixed-composer .panel{
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Also ensure the chat view container doesn't draw its own frame */
.chat-main.fixed-composer .view{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) Ensure dialog history never goes under the bottom-fixed composer */
.chat-main.fixed-composer .log{
  flex: 1;
  height: auto;
  overflow: auto;

  /* 1) прибираємо "рамочку" (border) та зайвий фон у чат-діалозі */
  border: none;
  background: transparent;

  /* 2) резервуємо місце під fixed-composer + залишаємо невеликий зазор зверху від поля вводу */
  padding-bottom: calc(var(--composer-safe-height) + 2px);
}

/* Extra breathing room above the composer */
.chat-main.fixed-composer{
  padding-bottom: var(--composer-safe-height) !important;
}

/* keep composer truly docked to the viewport bottom */
.chat-main.fixed-composer .composer{
  position: fixed !important;
  left: var(--sidebar-width) !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
}


/* --- mode specific tweaks (web only) --- */
body.mode-chat .panel,
body.mode-quote .panel,
body.mode-court .panel{
  border: none;
  background: transparent;
}

/* remove footer panel in Court mode */
body.mode-court .footer{
  display:none !important;
}


/* --- Tariffs alignment fixes (modal + landing) --- */
.tariff-price{
  align-items: center;
  gap: 6px;
}
.tariff-card--free .tariff-price{
  /* FREE has fewer meta lines; keep list start aligned with other plans */
  min-height: 190px;
}
.tariff-card--free .tariff-price__note{
  margin-top: 34px;
}
/* Keep first feature row aligned even if fonts differ */
.tariff-features{
  margin-top: 10px;
}


/* FREE tariff: no discount badge in meta line */
.tariff-card--free .tariff-price__discount{display:none;}


/* FREE plan (tariffs modal): hide the "$2" helper line while keeping layout */
#tariffsModal .tariff-card--free .tariff-price__old{
  opacity: 0 !important;
}


/* -------------------------
   Auth pages (Apple-level clean)
-------------------------- */
.auth-shell{
  min-height: calc(100vh - 160px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:56px 16px 24px;
}
.auth-card{
  width:min(520px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.55);
  padding: 22px;
}
.auth-head{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom: 14px;
}
.auth-logo{
  width:44px;
  height:44px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.auth-title{
  margin:0;
  font-size: 28px;
  letter-spacing: 0.2px;
}
.auth-subtitle{
  margin:4px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}
.auth-form{ margin-top: 14px; }

.field{ display:block; margin: 12px 0; }
.field__label{
  display:block;
  font-size: 12px;
  color: var(--label);
  margin-bottom: 6px;
}
.field__input{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  outline: none;
}
.field__input:focus{
  border-color: rgba(245,197,66,0.5);
  box-shadow: 0 0 0 4px rgba(212,175,55,0.14);
}

.auth-links{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top: 12px;
  font-size: 13px;
}
.auth-links a{ color: rgba(245,197,66,0.95); text-decoration:none; }
.auth-links a:hover{ text-decoration:underline; }

.auth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 16px 0 10px;
  color: rgba(243,240,232,0.55);
  font-size: 12px;
}
.auth-divider:before,
.auth-divider:after{
  content:"";
  height:1px;
  flex:1;
  background: rgba(212,175,55,0.22);
}
.btn--block{ width:100%; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid var(--input-border);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  cursor:pointer;
  text-decoration:none;
  user-select:none;
}
.btn:hover{ border-color: rgba(245,197,66,0.45); }
.btn--primary{
  background: linear-gradient(180deg, rgba(245,197,66,0.18), rgba(212,175,55,0.14));
  border-color: rgba(245,197,66,0.55);
}
.btn--ghost{
  background: rgba(255,255,255,0.01);
}
.gmark{
  width:16px;
  height:16px;
  border-radius:4px;
  background:
    radial-gradient(circle at 30% 30%, #fff 0 45%, transparent 46%),
    conic-gradient(from 45deg, #4285F4 0 25%, #34A853 0 50%, #FBBC05 0 75%, #EA4335 0 100%);
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
}

/* Notices */
.notice{
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(212,175,55,0.22);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  margin: 10px 0;
}
.notice--info{ border-color: rgba(212,175,55,0.22); }
.notice--success{ border-color: rgba(46, 204, 113, 0.55); }
.notice--danger{ border-color: rgba(255, 90, 95, 0.65); }

/* -------------------------
   Modal for policies
-------------------------- */
.modal.modal--fullscreen{ position:fixed; inset:0; display:none; z-index: 50; }
.modal.modal--fullscreen.modal--open{ display:block; }
.modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
}
.modal__dialog{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10,10,10,.92);
  backdrop-filter: blur(14px);
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
.modal__head{
  display:flex;
  justify-content:space-between;
  gap: 14px;
  padding: 16px 16px 10px;
  border-bottom: 1px solid rgba(212,175,55,0.18);
}
.modal__title{ font-size: 16px; font-weight: 700; }
.modal__subtitle{ font-size: 12px; color: var(--muted); margin-top: 4px; }

.iconbtn{
  border:1px solid rgba(212,175,55,0.18);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  width: 34px; height: 34px;
  border-radius: 12px;
  cursor:pointer;
}
.iconbtn:hover{ border-color: rgba(245,197,66,0.45); }

.modal__tabs{
  display:flex;
  gap:10px;
  padding: 10px 16px 0;
}
.tab{
  padding: 8px 10px;
  border-radius: 12px;
  border:1px solid rgba(212,175,55,0.18);
  background: rgba(255,255,255,0.01);
  color: var(--text);
  cursor:pointer;
}
.tab--active{
  border-color: rgba(245,197,66,0.55);
  background: rgba(245,197,66,0.10);
}

.modal__body{
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.docframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}

.modal__foot{
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(212,175,55,0.18);
}
.check{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 13px;
  color: rgba(243,240,232,0.85);
}
.check input{ margin-top: 3px; }
.check a{ color: rgba(245,197,66,0.95); text-decoration:none; }
.check a:hover{ text-decoration:underline; }

.modal__actions{
  margin-top: 12px;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
}

@media (max-width: 640px){
  .auth-shell{ padding-top: 28px; }
  .modal__dialog{ margin: 18px auto; }
  .docframe{ height: 58vh; }
  .auth-links{ flex-direction: column; align-items:flex-start; }
}


/* Fullscreen policy modal */
.modal--fullscreen .modal__dialog{
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
.modal--fullscreen .modal__body{
  flex: 1;
  min-height: 0;
}
.modal--fullscreen .docframe{
  height: 100%;
  border-radius: 0;
}


/* Modal output */
.out--modal{margin:0 0 10px 0; max-height:140px; overflow:auto; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10);}


/* Theme toggle */
.btn--theme{ white-space:nowrap; }
.btn--theme [data-theme-icon]{ font-size: 16px; line-height: 1; }

/* FIX (no layout changes): ensure Profile panel can't cover Tariffs button */
#accountMenu{ position: relative; }
#profilePanel.sidebar-profile-panel{ position: relative; z-index: 0; }
#btnTariffs{ position: relative; z-index: 1; pointer-events: auto; }


/* === Light theme visual fixes (UI polish) === */
html[data-theme="light"] .tabs,
html[data-theme="light"] .panel,
html[data-theme="light"] .demo__bar,
html[data-theme="light"] .callout{
  background: rgba(255,255,255,0.78);
  border-color: rgba(29,29,31,0.14);
}

html[data-theme="light"] .demo__tabs button{
  background: rgba(29,29,31,0.04);
  color: rgba(29,29,31,0.72);
  border-color: rgba(29,29,31,0.14);
}

html[data-theme="light"] .demo__tabs button.active,
html[data-theme="light"] .tab.active{
  border-color: rgba(0,113,227,0.55);
  background: linear-gradient(135deg, rgba(0,113,227,0.14), rgba(245,197,66,0.10));
}

html[data-theme="light"] .hero--full{
  border-color: rgba(29,29,31,0.12);
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(0,113,227,0.16), transparent 62%),
    radial-gradient(900px 600px at 85% 30%, rgba(245,197,66,0.12), transparent 62%),
    rgba(255,255,255,0.72);
  box-shadow: 0 18px 50px rgba(29,29,31,0.14);
}

html[data-theme="light"] .callout__text{
  color: rgba(29,29,31,0.82);
}

html[data-theme="light"] .chat-sidebar.fixed-sidebar{
  background: rgba(255,255,255,0.82);
  border-right: 1px solid rgba(29,29,31,0.12);
}

html[data-theme="light"] .topbar.modebar{
  background: rgba(255,255,255,0.86);
  border-bottom: 1px solid rgba(29,29,31,0.12);
  box-shadow: 0 10px 30px rgba(29,29,31,0.08);
}

html[data-theme="light"] .chat-main.fixed-composer .composer{
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(29,29,31,0.14);
  box-shadow: 0 10px 28px rgba(29,29,31,0.10);
}


/* Light theme — stronger modal backdrop to hide bright blocks behind dialogs */
html[data-theme="light"] .modal__overlay{
  background: rgba(0,0,0,0.82);
  backdrop-filter: none;
}

/* Light theme — Суд: make instance/stage tabs more readable */
html[data-theme="light"] .subtab,
html[data-theme="light"] .subtab2{
  background: rgba(255,255,255,0.86);
  border-color: rgba(29,29,31,0.16);
  color: rgba(29,29,31,0.88);
}
html[data-theme="light"] .subtab:hover,
html[data-theme="light"] .subtab2:hover{
  border-color: rgba(0,113,227,0.30);
}
html[data-theme="light"] .subtab.active,
html[data-theme="light"] .subtab2.active{
  border-color: rgba(0,113,227,0.45);
  background: linear-gradient(135deg, rgba(0,113,227,0.18), rgba(245,197,66,0.14));
}

/* Landing — tariffs section shell like in Account → Тарифи modal */
html[data-theme="light"] #pricing .tariffs-shell{
  border: 1px solid rgba(29,29,31,0.12);
  background: rgba(255,255,255,0.88);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 16px 50px rgba(29,29,31,0.10);
}

/* Tariffs visibility in light theme */
html[data-theme="light"] .tariff-card,
html[data-theme="light"] .modal__panel--tariffs .tariff-card,
html[data-theme="light"] #tariffsModal .tariff-card{
  border: 1px solid rgba(0,113,227,0.22);
  background:
    radial-gradient(1200px 380px at 50% -10%, rgba(0,113,227,0.10), rgba(0,0,0,0) 60%),
    radial-gradient(900px 420px at 50% 120%, rgba(245,197,66,0.10), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245,245,247,0.92));
  box-shadow:
    0 18px 55px rgba(29,29,31,0.14),
    inset 0 0 0 1px rgba(29,29,31,0.04);
}

html[data-theme="light"] .tariff-title,
html[data-theme="light"] .modal__panel--tariffs .tariff-title{
  color: rgba(29,29,31,0.92);
}

html[data-theme="light"] #pricing .tariff-subtitle,
html[data-theme="light"] .modal__panel--tariffs .tariff-subtitle,
html[data-theme="light"] #tariffsModal .tariff-subtitle,
html[data-theme="light"] #pricing .tariff-price,
html[data-theme="light"] .modal__panel--tariffs .tariff-price,
html[data-theme="light"] #tariffsModal .tariff-price{
  color: rgba(29,29,31,0.80);
}

html[data-theme="light"] .tariff-features__item{
  color: rgba(29,29,31,0.78);
}

html[data-theme="light"] .tariff-features__item--no{
  opacity: .55;
}

/* Make FREE button text fit */
.tariff-card--free .tariff-btn{
  font-size: 12px;
  letter-spacing: 0.06em;
  padding-left: 10px;
  padding-right: 10px;
}
@media (max-width: 520px){
  .tariff-card--free .tariff-btn{
    font-size: 11px;
    letter-spacing: 0.05em;
  }
}

/* Fix auth logo aspect ratio (register/login/etc.) */
.auth-logo{
  object-fit: contain;
}




/* =======================
   DESIGN FIXES (v3)
   Only visual tweaks
   ======================= */

/* 1) Dialog modals: remove "white rectangle" feeling in light theme */
html[data-theme="light"] .modal__overlay{
  background: rgba(0,0,0,0.72);
  backdrop-filter: none;
}

/* Make sidebar + modebar seamless in light theme */
html[data-theme="light"] .fixed-sidebar{
  background: rgba(255,255,255,0.92);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
html[data-theme="light"] .topbar,
html[data-theme="light"] .topbar.modebar{
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

/* 2) Top panel connection: align separators in light theme */
html[data-theme="light"] .topbar.modebar{
  box-shadow: 0 6px 18px rgba(29,29,31,0.06);
}
html[data-theme="light"] .fixed-sidebar{
  box-shadow: 6px 0 18px rgba(29,29,31,0.04);
}

/* 3) Court mode: center categories and highlight active more clearly */
.subtabs-row{ justify-content:center; }
.subtabs{ justify-content:center; }

html[data-theme="light"] .subtabs{
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(29,29,31,0.14);
}
html[data-theme="light"] .subtab,
html[data-theme="light"] .subtab2{
  background: rgba(29,29,31,0.04);
  border: 1px solid rgba(29,29,31,0.14);
  color: rgba(29,29,31,0.92);
}
html[data-theme="light"] .subtab.active,
html[data-theme="light"] .subtab2.active{
  background: linear-gradient(135deg, rgba(0,113,227,0.22), rgba(212,175,55,0.22));
  border-color: rgba(0,113,227,0.40);
  box-shadow: 0 6px 16px rgba(29,29,31,0.12);
  font-weight: 800;
}

/* 4) Landing pricing: always match the "Account → Tariffs" light look */
html[data-theme="light"] #pricing .tariff-card{
  border: 1px solid rgba(0,113,227,0.22) !important;
  background:
    radial-gradient(1200px 380px at 50% -10%, rgba(0,113,227,0.10), rgba(0,0,0,0) 60%),
    radial-gradient(900px 420px at 50% 120%, rgba(245,197,66,0.10), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245,245,247,0.92)) !important;
  box-shadow:
    0 18px 55px rgba(29,29,31,0.14),
    inset 0 0 0 1px rgba(29,29,31,0.04) !important;
}
html[data-theme="light"] #pricing .tariff-title{ color: rgba(29,29,31,0.92) !important; }
html[data-theme="light"] #pricing .tariff-subtitle,
html[data-theme="light"] #pricing .tariff-price{ color: rgba(29,29,31,0.72) !important; }
html[data-theme="light"] #pricing .tariff-price__old{ color: rgba(29,29,31,0.48) !important; }
html[data-theme="light"] #pricing .tariff-features__item{ color: rgba(29,29,31,0.78) !important; }
html[data-theme="light"] #pricing .tariff-features__item--no{ color: rgba(255,59,48,0.80) !important; }

/* Ensure landing tariff buttons stay readable on light cards */
#pricing .tariff-btn{
  border: 1px solid rgba(29,29,31,0.14) !important;
  background: rgba(255,255,255,0.92) !important;
  color: rgba(29,29,31,0.92) !important;
}
#pricing .tariff-btn--gold{
  border: 1px solid rgba(212,175,55,0.55) !important;
  background: linear-gradient(180deg, rgba(245,197,66,0.92), rgba(212,175,55,0.92)) !important;
  color: rgba(29,29,31,0.92) !important;
}

/* panel остаётся прозрачным (белый прямоугольник убран) */
.panel{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* НЕ рамка на всё окно диалога */
.log{
  border: none !important;
  background: transparent !important;
}

/* РАМКА КАЖДОГО СООБЩЕНИЯ (Chat / Цитування / Суд) */
.log .msg-body{
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.03) !important;
}

/* ===== Make modebar frame transparent (buttons: Чат/Цитування/Суд) ===== */
.topbar.modebar{
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/* если у modebar где-то задаётся рамка целиком (на будущее) */
.topbar.modebar{
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
}

/* ===== Make the frame behind input transparent (composer background panel) ===== */
.chat-main.fixed-composer .composer{
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important; /* чтобы не было "стеклянной плашки" */
}

/* MODEBAR (Чат/Цитування/Суд): сделать "рамку/плашку" полностью прозрачной */
.topbar.modebar{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* на всякий случай: если где-то рисуется линия именно border-bottom */
.topbar.modebar{
  border-bottom: 0 !important;
}
/* === Court mode: make frames behind instance/stage buttons transparent === */
.subtabs{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* light theme overrides were re-adding the frame — kill them too */
html[data-theme="light"] .subtabs{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}