:root{
  --bg:#050509;
  --bg2:#070816;
  --card:#0f1120;
  --card2:#14172a;
  --ink:#f5f5f7;
  --muted:#a0a7bd;
  --line:rgba(255,255,255,.10);
  --shadow:0 18px 44px rgba(0,0,0,.55);
  --r:18px;

  --accent:#ff7a1a;
  --accent2:#ffb24a;
  --blue:#5ab2ff;
  --good:#29d17a;
  --danger:#ff4d4d;

  --max:1240px;

  /* dropdown theme */
  --ddBg:#0f1120;
  --ddBg2:#14172a;
  --ddLine:rgba(255,255,255,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--ink);
  overflow-x:hidden;
  background: #050509;
}

/* fixed background */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(255,122,26,.18), transparent 60%),
    radial-gradient(800px 500px at 10% 10%, rgba(90,178,255,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  will-change: transform;
  transform: translateZ(0);
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
.hidden{display:none !important;}
code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 12px; opacity:.85;}
.muted{color:var(--muted);line-height:1.55}
.h1{margin:0;font-size:34px;letter-spacing:-.6px;line-height:1.06}

/* ✅ Greeting image inside the H1 (replaces "Вітаємо,") */
.h1Welcome{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.h1Welcome .helloImg{
  height:146px;
  width:auto;
  display:block;
  flex:0 0 auto;
  pointer-events:none;
  user-select:none;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.35));
}
@media (max-width:680px){
  .h1Welcome .helloImg{ height:146px; }
}

/* ✅ Greeting layout: image left, text right (title + subtitle) */
.greetRow{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:18px;
  align-items:start;
}
.greetArt{
  width:120px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.greetArt img{
  width:100%;
  height:auto;
  display:block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));
  user-select:none;
  pointer-events:none;
}
.greetText{min-width:0}
.greetSub{margin-top:10px}
/* мобилка */
@media (max-width:680px){
  .greetArt{ width:92px; }
}

.h2{margin:0;font-size:22px;letter-spacing:-.2px}
.grad{
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.glass{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius:24px;
  box-shadow:var(--shadow);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:var(--ink);
  padding:10px 14px;
  border-radius:14px;
  cursor:pointer;
  transition:.2s ease;
  user-select:none;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18)}
.btn:active{transform:translateY(0)}
.btn i{width:18px;height:18px}
.btnPrimary{
  border-color: rgba(255,122,26,.35);
  background: linear-gradient(135deg, rgba(255,122,26,.18), rgba(255,178,74,.10));
  box-shadow: 0 10px 30px rgba(255,122,26,.12);
}
.btnBlue{
  border-color: rgba(90,178,255,.35);
  background: linear-gradient(135deg, rgba(90,178,255,.18), rgba(90,178,255,.08));
}
.btnGhost{background:transparent}

.loader{
  position:fixed;inset:0;
  display:grid;place-items:center;
  z-index:200;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
}
.spinner{
  width:56px;height:56px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.20);
  border-top-color: rgba(255,122,26,.95);
  animation: spin .9s linear infinite;
  box-shadow: 0 20px 60px rgba(255,122,26,.18);
}
@keyframes spin{to{transform:rotate(360deg)}}

.toast{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  background: rgba(12,12,18,.92);
  border:1px solid rgba(255,255,255,.14);
  padding:12px 14px;border-radius:14px;
  color:var(--ink);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;
  transition:.2s ease;
  z-index:220;
  font-size:13px;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

/* LOGIN */
.loginPage{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px 0;
}
.loginCard{
  width:min(980px, calc(100% - 36px));
  padding:18px;
  border-radius:28px;
  position:relative;
  overflow:hidden;
}
.loginCard:before{
  content:"";
  position:absolute;inset:-2px;
  background:
    radial-gradient(700px 400px at 15% 0%, rgba(90,178,255,.22), transparent 60%),
    radial-gradient(800px 450px at 90% 10%, rgba(255,122,26,.26), transparent 60%);
  pointer-events:none;
}
.loginInner{
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
  align-items:stretch;
}
.loginLeft, .loginRight{
  border:1px solid var(--line);
  background: rgba(0,0,0,.22);
  border-radius:22px;
  padding:18px;
}
.loginLeft .badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  color:var(--muted);
  font-size:12px;
}
.loginLeft .badge i{width:16px;height:16px;opacity:.9}
.loginLeft p{margin:12px 0 0;color:var(--muted);line-height:1.55}
.loginFeature{margin-top:14px;display:grid;gap:10px}
.fItem{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius:18px;
  padding:12px;
  display:flex;gap:10px;align-items:flex-start;
}
.fItem i{width:18px;height:18px;color:rgba(255,255,255,.88);margin-top:2px}
.fItem b{display:block;font-size:13px}
.fItem span{display:block;color:var(--muted);font-size:12px;margin-top:5px;line-height:1.45}

.loginRight h3{margin:0;font-size:18px;letter-spacing:-.2px}
.form{margin-top:12px;display:grid;gap:10px}
.field{
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  border-radius:16px;
  padding:10px 12px;
  display:flex;align-items:center;gap:10px;
  color:var(--muted);
  transition:.2s ease;
}
.field i{width:18px;height:18px;opacity:.85}
.field input, .field select, .field textarea{
  width:100%;
  border:0;outline:none;background:transparent;
  color:var(--ink);
  font-size:14px;
  resize:none;
}

/* ✅ focus glow for all fields */
.field:focus-within{
  border-color: rgba(255,122,26,.35);
  box-shadow: 0 0 0 5px rgba(255,122,26,.12);
}

/* ✅ attention pulse (only when empty) */
.field.attention{
  border-color: rgba(255,122,26,.22);
  animation: softPulse 1.8s ease-in-out infinite;
}
@keyframes softPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(255,122,26,0); }
  50%{    box-shadow: 0 0 0 7px rgba(255,122,26,.12); }
}

.avatarPick{
  display:grid;
  grid-template-columns: 92px 1fr;
  gap:12px;
  align-items:center;
  margin-top:6px;
}
.avatarPreview{
  width:92px;height:92px;border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  overflow:hidden;
  background: rgba(0,0,0,.22);
  display:grid;place-items:center;
  position:relative;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.avatarPreview img{width:100%;height:100%;object-fit:cover}
.avatarPreview .ph{
  font-weight:900;
  font-size:28px;
  color:rgba(255,255,255,.80);
}
.avatarTools{display:grid;gap:8px}
.hint{color:var(--muted);font-size:12px;line-height:1.45}
.loginActions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.loginActions .btn{flex:1}

/* ✅ custom file picker (stylish + pulse) */
.fileInput{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}
.filePick{
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  border-radius:16px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition:.2s ease;
  user-select:none;
}
.filePick:hover{transform: translateY(-1px);border-color: rgba(255,255,255,.18)}
.filePick i{width:18px;height:18px;opacity:.9}
.filePickTitle{font-weight:800;font-size:13px;color:var(--ink)}
.filePickMeta{
  margin-left:auto;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:45%;
}
.filePick.pulse{
  border-color: rgba(255,122,26,.28);
  box-shadow: 0 0 0 0 rgba(255,122,26,0);
  animation: filePulse 1.6s ease-in-out infinite;
}
@keyframes filePulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(255,122,26,0); }
  50%{    box-shadow: 0 0 0 7px rgba(255,122,26,.14); }
}

/* APP TOPBAR */
.topbar{
  position:sticky;top:0;z-index:120;
  backdrop-filter: blur(12px);
  background: rgba(5,5,9,.62);
  border-bottom:1px solid var(--line);
}
.topbar .inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:12px 0;
}
.brand{
  display:flex;align-items:center;gap:12px;
  min-width:260px;
}
.logo{
  width:38px;height:38px;border-radius:12px;
  overflow:hidden;
  background: rgba(0,0,0,.15);
  display:grid;
  place-items:center;
  box-shadow: 0 10px 30px rgba(255,122,26,.25);
}
.logo img{width:100%;height:100%;object-fit:cover;display:block}
.brandText b{display:block;font-size:14px;letter-spacing:.2px}
.brandText span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.topActions{display:flex;align-items:center;gap:10px}

@media (max-width:680px){
  .brand{display:none;}
  .topActions{
    width:100%;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:8px;
  }
  .topActions .btn{
    width:100%;
    justify-content:center;
    padding:10px 8px;
    font-size:12.5px;
  }
  .topActions .btn i{width:16px;height:16px}
}

.section{padding:18px 0}

/* CABINET HEADER / GRID */
.cabHead{padding:18px;border-radius:26px}

.row2{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:14px;
  align-items:stretch;
  margin-top:14px;
}
.profileCard, .newsCard{
  border:1px solid var(--line);
  background: rgba(0,0,0,.22);
  border-radius:22px;
  padding:16px;
  overflow:hidden;
  position:relative;
  min-height: 100%;
}
.profileCard:before{
  content:"";
  position:absolute;inset:-2px;
  background:
    radial-gradient(400px 250px at 20% 0%, rgba(255,122,26,.22), transparent 60%),
    radial-gradient(420px 260px at 80% 15%, rgba(90,178,255,.18), transparent 60%);
  pointer-events:none;
  opacity:.9;
}
.profileInner{position:relative}
.avatarBig{
  width:100%;
  aspect-ratio: 1/1;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  overflow:hidden;
  background: rgba(0,0,0,.25);
  display:grid;place-items:center;
  box-shadow: 0 20px 80px rgba(0,0,0,.55);
}
.avatarBig img{width:100%;height:100%;object-fit:cover}
.avatarBig .ph{
  font-weight:900;
  font-size:40px;
  color:rgba(255,255,255,.86);
}
.profileName{
  margin-top:12px;
  font-weight:900;
  font-size:18px;
  letter-spacing:-.2px;
  text-align:center;
}
.profileMeta{
  margin-top:6px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.newsCard h3{
  margin:0;
  font-size:18px;
  letter-spacing:-.2px;
  display:flex;align-items:center;gap:10px;
}
.newsWrap{
  margin-top:10px;
  height:100%;
  display:flex;
  flex-direction:column;
}
.newsList{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:auto;
  flex: 1;
  min-height: 0;
  padding-right:4px;
}
.newsItem{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  transition:.2s ease;
  user-select:none;
}
.newsItem:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18)}
.newsItem span{
  display:block;
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 95%;
}
.newsItem i{width:16px;height:16px;opacity:.85}

/* CATEGORIES */
.catsHead{
  margin-top:14px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  flex-wrap:wrap;
}
.catsSub{color:var(--muted);margin-top:8px;line-height:1.55}
.catsDesktop{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top:14px;
}
.catsMobile{
  display:none;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}
.catCard{
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  border-radius:22px;
  overflow:hidden;
  cursor:pointer;
  transition:.22s ease;
  position:relative;
  min-height:230px;
  display:flex;flex-direction:column;
  transform: translateZ(0);
}
.catCard:before{
  content:"";
  position:absolute;inset:-2px;
  background:
    radial-gradient(520px 260px at 20% 0%, rgba(255,122,26,.22), transparent 60%),
    radial-gradient(560px 280px at 90% 10%, rgba(90,178,255,.16), transparent 60%);
  opacity:0;
  transition:.25s ease;
  pointer-events:none;
}
.catCard:hover{
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(255,255,255,.18);
}
.catCard:hover:before{opacity:1}
.catArt{
  height:140px;
  background: rgba(0,0,0,.22);
  position:relative;
  overflow:hidden;
}
.catArt img{
  width:100%;height:100%;
  object-fit:cover;
  transform: scale(1.03);
  transition: .35s ease;
  filter: saturate(1.08) contrast(1.06);
}
.catCard:hover .catArt img{transform: scale(1.10)}
.shine{
  position:absolute;inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.16) 30%, transparent 60%);
  transform: translateX(-120%);
  pointer-events:none;
  opacity:0;
}
.catCard:hover .shine{
  opacity:.9;
  animation: shine 1.05s ease forwards;
}
@keyframes shine{to{ transform: translateX(120%); opacity:0; }}
.catName{
  padding:12px 14px 0;
  font-weight:900;
  letter-spacing:.1px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.catName small{
  color:var(--muted);
  font-weight:800;
  font-size:12px;
  border:1px solid rgba(255,255,255,.10);
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.18);
}
.catMeta{
  padding:10px 14px 14px;
  display:flex;gap:10px;flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color:var(--muted);
  font-size:12px;
}
.pill i{width:16px;height:16px;opacity:.85}
.catChip{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  cursor:pointer;
  transition:.2s ease;
}
.catChip:hover{border-color:rgba(255,255,255,.18)}
.catChip .left{
  display:flex;align-items:center;gap:10px;
  color:var(--ink);
  font-weight:800;
}
.catChip small{color:var(--muted);font-weight:700}

/* MODALS */
.overlay{
  position:fixed;inset:0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(10px);
  z-index:150;
}
.modal{
  position:fixed;inset:16px;
  z-index:160;
  display:flex;flex-direction:column;
  border-radius:24px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(16,18,32,.98), rgba(8,9,19,.96));
  box-shadow: 0 30px 90px rgba(0,0,0,.75);
  overflow:hidden;
}
.modalTop{
  display:flex;flex-direction:column;
  gap:8px;
  padding:10px;
  border-bottom:1px solid var(--line);
  background: rgba(0,0,0,.20);
}
.modalTitleRow{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.modalTitle{
  display:flex;align-items:center;gap:10px;
  font-weight:900;
  letter-spacing:-.2px;
}
.modalTitle b{
  font-size:15px;
  max-width:70vw;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.iconBtn{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  transition:.2s ease;
  color:var(--ink);
  user-select:none;
  white-space:nowrap;
}
.iconBtn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18)}
.iconBtn i{width:18px;height:18px}

.modalTools{
  width:100%;
  display:grid;
  grid-template-columns: 1fr 170px 170px 170px auto;
  gap:8px;
  align-items:center;
}
.modalTools .field{border-radius:14px;padding:8px 10px}
.modalTools .field input,.modalTools .field select{font-size:13px}
.modalBody{
  padding:14px;
  overflow:auto;
  flex:1;
}
.grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
.pCard{
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  border-radius:18px;
  overflow:hidden;
  display:flex;flex-direction:column;
  min-height: 330px;
  position:relative;
}
.pHead{
  padding:12px 12px 0;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;
}
.pTitle{
  font-weight:900;
  font-size:13px;
  line-height:1.25;
  color:var(--ink);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ✅ Copy mini — accent like primary button */
.copyMini{
  flex:0 0 auto;
  width:36px;height:36px;
  border-radius:12px;
  display:grid;place-items:center;
  cursor:pointer;
  user-select:none;
  transition:.2s ease;
  position:relative;

  border:1px solid rgba(255,122,26,.28);
  background: linear-gradient(135deg, rgba(255,122,26,.20), rgba(0,0,0,.22));
  box-shadow: 0 10px 26px rgba(255,122,26,.14);
  color: rgba(255,210,170,.95);
}
.copyMini::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:10px;
  background: rgba(0,0,0,.18);
  filter: blur(.2px);
  opacity:.9;
}
.copyMini i{width:16px;height:16px;opacity:1;position:relative;z-index:1}
.copyMini:hover{
  transform:translateY(-1px);
  border-color: rgba(255,122,26,.42);
  box-shadow: 0 14px 34px rgba(255,122,26,.22);
}
.copyMini:active{
  transform:translateY(0);
  box-shadow: 0 8px 18px rgba(255,122,26,.16);
}

.pImg{
  margin:10px 12px 0;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  height:150px;
  background: rgba(0,0,0,.20);
}
.pImg img{width:100%;height:100%;object-fit:cover}
.pPriceRow{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  padding:10px 12px 0;
}
.price{
  font-weight:900;
  color:transparent;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;background-clip:text;
  font-size:14px;
}
.pDesc{
  padding:10px 12px 14px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:54px;
}
.empty{
  padding:22px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:18px;
  color:var(--muted);
  text-align:center;
}

/* ADS */
.adsGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top:14px;
}
.adsCard{
  border:1px solid var(--line);
  background: rgba(0,0,0,.22);
  border-radius:22px;
  padding:16px;
  overflow:hidden;
}
.adsCard h3{
  margin:0;
  font-size:18px;
  letter-spacing:-.2px;
  display:flex;align-items:center;gap:10px;
}
.adsList{
  margin-top:12px;
  display:grid;
  gap:8px;
}
.adsLink{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  transition:.2s ease;
  user-select:none;
}
.adsLink:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18)}
.adsLink span{
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 90%;
}
.adsLink i{width:16px;height:16px;opacity:.85}

/* FOOTER */
footer{margin-top:16px;padding:18px 0 26px}
.foot{
  border:1px solid var(--line);
  background: rgba(0,0,0,.22);
  border-radius:24px;
  padding:16px;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:14px;
}
.foot h4{margin:0;font-size:14px;letter-spacing:-.1px}
.foot .muted{margin-top:8px;font-size:12px}
.footLinks{margin-top:10px;display:grid;gap:8px}
.footLinks a{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition:.2s ease;
}
.footLinks a:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18)}
.footLinks i{width:16px;height:16px;opacity:.85}
.toolsRow{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}
.copyright{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}

/* AI modal on top */
#aiOverlay{ z-index: 245; background: rgba(0,0,0,.72); backdrop-filter: blur(12px); }
#aiModal{ z-index: 255; }

.aiHero{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap:16px;
  align-items:start;
}
.aiArt{
  width:100px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.aiArt img{
  width:100%;
  height:auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));
  user-select:none;
  pointer-events:none;
}
@media (max-width:680px){
  .aiHero{grid-template-columns: 96px 1fr;gap:12px;align-items:start;}
  .aiArt{width:96px;}
}

/* ORDER MODAL (higher z-index than category modal) */
#orderOverlay{ z-index: 175; }
#orderModal{ z-index: 185; }

/* CABINET HOW modal (highest) */
#cabHelpOverlay{
  z-index: 230;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(12px);
}
#cabHelpModal{ z-index: 240; }

/* ORDER TIP (over order modal) */
#orderTipOverlay{
  z-index: 195;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(12px);
}
#orderTipModal{
  z-index: 205;
  position:fixed;
  inset: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.tipCard{
  pointer-events:auto;
  width:min(860px, calc(100% - 24px));
  border:1px solid rgba(255,255,255,.14);
  background: rgba(12,12,18,.92);
  border-radius:22px;
  box-shadow: 0 30px 90px rgba(0,0,0,.75);
  padding:16px;
}
.tipHead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.tipHead b{
  font-size:16px;letter-spacing:-.2px;
  display:flex;align-items:center;gap:8px;
}
.tipText{
  margin-top:10px;
  color:var(--muted);
  line-height:1.55;
  font-size:13px;
  white-space:pre-line;
}

/* order form layout */
.oGrid{display:grid;grid-template-columns: 1fr 1fr;gap:10px;margin-top:10px}
.oRow{display:grid;grid-template-columns: 1fr;gap:8px;margin-top:10px}
.oLabel{display:flex;align-items:center;gap:10px;font-weight:800;font-size:13px}
.helpBtn{
  width:26px;height:26px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:grid;place-items:center;
  cursor:pointer;
  transition:.2s ease;
}
.helpBtn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.20)}
.helpBtn i{width:16px;height:16px;opacity:.9}
.oActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.oActions .btn{flex:1}

/* ✅ Dark dropdown styling (select options) */
.field select{color: var(--ink);background: transparent;color-scheme: dark;}
.field select option,.field select optgroup{background: var(--ddBg);color: var(--ink);}
.field select option:checked{background: var(--ddBg2);}

/* ✅ CABINET HOW content (infographic) */
.howHero{display:grid;grid-template-columns: 1fr 1fr;gap:12px;margin-bottom:12px}
.howHeroCard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius:18px;
  padding:14px;
}
.howHeroCard h3{
  margin:0 0 10px;
  display:flex;align-items:center;gap:10px;
  font-size:16px;
  letter-spacing:-.2px;
}
.howHeroCard h3 i{width:18px;height:18px}
.howSteps{margin:0;padding-left:18px;color:var(--muted);line-height:1.6}
.howSteps b{color:var(--ink)}
.howBullets{margin:0;padding-left:18px;color:var(--muted);line-height:1.6}
.howBullets b{color:var(--ink)}

.howGrid{display:grid;grid-template-columns: 1fr 1fr;gap:12px}
.howCard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  border-radius:18px;
  padding:14px;
}
.howCard h4{margin:0 0 8px;display:flex;align-items:center;gap:10px;font-size:14px}
.howCard h4 i{width:18px;height:18px}
.howCard p{margin:0}

.howMini{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.tag{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color:var(--muted);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}
.howFooterNote{
  margin-top:12px;
  border:1px solid rgba(255,122,26,.20);
  background: linear-gradient(135deg, rgba(255,122,26,.10), rgba(0,0,0,.18));
  border-radius:18px;
  padding:12px 14px;
  display:flex;gap:10px;align-items:flex-start;
  color:var(--muted);
}
.howFooterNote i{width:18px;height:18px;color:rgba(255,210,170,.95);margin-top:1px}
.howFooterNote b{color:var(--ink)}

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

/* =========================
   QUICK NAV (ПК / Моб)
========================= */
.quickNav{ margin-top:14px; }
.quickGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
}
.qCard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  border-radius:18px;
  padding:12px;
  cursor:pointer;
  text-align:left;
  color:var(--ink);
  transition:.22s ease;
  display:grid;
  grid-template-columns: 40px 1fr;
  gap:10px;
  align-items:start;
  position:relative;
  overflow:hidden;
}
.qCard:hover{transform: translateY(-2px);border-color: rgba(255,255,255,.18);}
.qCard::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(520px 260px at 20% 0%, rgba(255,122,26,.18), transparent 60%),
    radial-gradient(560px 280px at 90% 10%, rgba(90,178,255,.12), transparent 60%);
  opacity:0;
  transition:.25s ease;
  pointer-events:none;
}
.qCard:hover::before{opacity:1}
.qIcon{
  width:40px;height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  display:grid;place-items:center;
}
.qIcon i{width:18px;height:18px;opacity:.9}
.qBody b{
  display:block;
  font-weight:900;
  letter-spacing:-.2px;
  font-size:13px;
  line-height:1.25;
}
.qBody span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.qGo{
  grid-column: 1 / -1;
  margin-top:10px;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  background: rgba(0,0,0,.18);
  border-radius:14px;
  padding:10px 10px;
  color:rgba(255,255,255,.92);
  font-weight:800;
  font-size:12px;
}
.qGo i{width:16px;height:16px;opacity:.9}

/* Моб-мини карточка */
.quickMini{
  display:none;
  width:100%;
  margin-top:12px;
  border-radius:18px;
  padding:10px;
}
.miniLink{
  width:100%;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius:14px;
  padding:11px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  color:var(--ink);
  transition:.2s ease;
}
.miniLink:hover{border-color:rgba(255,255,255,.18)}
.miniLink i{width:16px;height:16px;opacity:.9}
.miniLink span{font-weight:800;font-size:12.5px}

@media (max-width:1100px){
  .quickGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:680px){
  .quickGrid{ display:none; }
  .quickMini{ display:grid; gap:8px; }
}
@media (max-width:680px){
  .quickMini{ flex: 0 0 100%; width:100%; }
}

/* =========================
   SOCIAL FOLLOW SECTION — PRO
========================= */
.social-follow{padding: 18px 0;}
.social-follow-card{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  padding: 18px;
  transform: translateZ(0);
}
.social-follow-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(820px 520px at 12% 0%, rgba(90,178,255,.20), transparent 60%),
    radial-gradient(980px 620px at 92% 10%, rgba(255,122,26,.26), transparent 62%),
    radial-gradient(520px 320px at 50% 120%, rgba(255,178,74,.10), transparent 60%);
  opacity:.95;
}
.social-follow-card::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 25px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 55%);
  opacity:.65;
}
.social-follow-content{
  position: relative;
  z-index: 2;
  max-width: 940px;
}
.social-follow .section-title{
  margin: 0;
  font-size: 22px;
  letter-spacing: -.2px;
  line-height: 1.15;
}
.social-follow-text{
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 13.6px;
}
.social-follow-text strong{color: var(--ink);font-weight: 900;}
.social-follow-actions{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.social-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  font-weight: 900;
  font-size: 13px;
  transition: .22s ease;
  user-select: none;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.social-btn::before{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 13px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 55%);
  opacity: .7;
}
.social-btn i{width: 18px;height: 18px;opacity: .95;}
.social-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 16px 36px rgba(0,0,0,.26);
}
.social-btn:active{
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.social-btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 5px rgba(255,122,26,.14),
    0 16px 36px rgba(0,0,0,.26);
}
.social-btn.tg{
  border-color: rgba(90,178,255,.32);
  background: linear-gradient(135deg, rgba(90,178,255,.20), rgba(0,0,0,.18));
}
.social-btn.ig{
  border-color: rgba(255,122,26,.30);
  background: linear-gradient(135deg, rgba(255,122,26,.22), rgba(0,0,0,.18));
}
.social-btn.tt{
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(0,0,0,.18));
}
.social-btn.fb{
  border-color: rgba(90,178,255,.26);
  background: linear-gradient(135deg, rgba(90,178,255,.16), rgba(0,0,0,.18));
}
.social-btn.in{
  border-color: rgba(90,178,255,.30);
  background: linear-gradient(135deg, rgba(90,178,255,.18), rgba(0,0,0,.18));
}
.social-btn.wa{
  border-color: rgba(41,209,122,.30);
  background: linear-gradient(135deg, rgba(41,209,122,.18), rgba(0,0,0,.18));
}
.social-follow-card .social-follow-content{padding-right: 10px;}
@media (max-width: 680px){
  .social-follow-card{padding: 14px;border-radius: 20px;}
  .social-follow .section-title{font-size: 18px;}
  .social-follow-text{font-size: 13px;}
  .social-follow-actions{gap: 8px;}
  .social-btn{width: 100%;justify-content: center;}
}

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

/* responsive */
@media (max-width:1100px){
  .row2{grid-template-columns: 1fr; }
  .grid{grid-template-columns: repeat(3, 1fr)}
  .modalTools{grid-template-columns: 1fr 160px 160px auto;}
  .adsGrid{grid-template-columns: 1fr;}
  .foot{grid-template-columns: 1fr; }
}
@media (max-width:900px){
  .catsDesktop{grid-template-columns: repeat(2, 1fr)}
  .grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width:680px){
  .loginInner{grid-template-columns:1fr}
  .catsDesktop{display:none}
  .catsMobile{display:flex}
  .modal{inset:10px;border-radius:20px}
  .grid{grid-template-columns: 1fr}
  .modalTools{grid-template-columns: 1fr auto;}
  .iconBtn{
    padding:10px 10px;
    border-radius:14px;
    font-size:0;
    gap:0;
  }
  .iconBtn i{margin:0}
  .oGrid{grid-template-columns: 1fr;}
}

/* ========= Social accordion (mobile collapse) ========= */
.socialDetails{
  position: relative;
  z-index: 2;
}

/* summary как кликабельная шапка */
.socialSummary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  user-select:none;
  padding: 0;
}

/* убираем стандартный маркер details */
.socialSummary::-webkit-details-marker{ display:none; }
.socialSummary::marker{ content:""; }

/* маленькая кнопка-стрелка справа */
.socialChevron{
  width:40px;height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  display:grid;place-items:center;
  flex:0 0 auto;
}
.socialChevron i{
  width:18px;height:18px;
  opacity:.9;
  transition: .2s ease;
}

/* поворот стрелки при открытии */
.socialDetails[open] .socialChevron i{
  transform: rotate(180deg);
}

/* контентная часть */
.socialPanel{
  margin-top: 12px;
}

/* легкая анимация появления */
.socialDetails[open] .socialPanel{
  animation: socialDrop .18s ease;
}
@keyframes socialDrop{
  from{ opacity:0; transform: translateY(-4px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ✅ показывать только на ПК (скрыть на телефоне/планшете) */
.pcOnly{ display:block; }
@media (max-width: 900px){
  .pcOnly{ display:none !important; }
}

/* ✅ статичные карточки: без клика и без "подскакиваний" */
.qCardStatic{
  cursor: default;
}
.qCardStatic::before{ display:none; }
.qCardStatic:hover{
  transform:none;
  border-color: rgba(255,255,255,.10);
}
.qCardStatic .qGo{
  background: rgba(0,0,0,.14);
}

/* 2 РЯД КАРТОЧЕК ПР */
/* ===================== Samostroy Modals ===================== */
.ssModal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  overflow: hidden;
}

.ssModal.isOpen{ display:block; }

.ssOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.60);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ssPanel{
  position: relative;
  width: min(980px, calc(100% - 28px));
  margin: 18px auto;
  padding: 18px;
  border-radius: 22px;
  max-height: calc(100vh - 36px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ssPanel{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ssPanel::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

@keyframes ssFade{ from{opacity:0} to{opacity:1} }
@keyframes ssPop{ from{transform: translateY(10px) scale(.98); opacity:.6} to{transform: translateY(0) scale(1); opacity:1} }

body.ssModalLock{ overflow: hidden; }

.ssClose{
  position:absolute; right: 12px; top: 12px;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.ssClose:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }

.ssHead{
  display:flex; gap:12px; align-items:flex-start;
  padding-right: 54px;
}
.ssHeadIcon{
  width:44px; height:44px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,122,0,.22), rgba(255,255,255,.05));
}
.ssTitle{
  margin: 0;
  font-size: 20px;
  letter-spacing: .2px;
}
.ssSub{
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.35;
}

.ssGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ssSpan2{ grid-column: 1 / -1; }

.ssCard{
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.04);
}
.ssCardT{
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 10px;
}

.ssStats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ssStat{
  padding: 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
}
.ssStat b{ font-size: 18px; display:block; }
.ssStat span{ color: var(--muted); font-size: 12px; }

.ssBars{ display:grid; gap: 10px; }
.ssBar{
  --p:50%;
  position: relative;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  overflow: hidden;
}
.ssBar::before{
  content:"";
  position:absolute; inset:0;
  width: var(--p);
  background: linear-gradient(90deg, rgba(255,122,0,.35), rgba(255,255,255,.06));
}
.ssBar span, .ssBar i{
  position: relative;
  z-index: 1;
}
.ssBar span{ font-weight: 700; }
.ssBar i{ float:right; color: var(--muted); font-style: normal; }

.ssHint{
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.ssSteps{
  margin: 0;
  padding-left: 18px;
  display:grid;
  gap: 8px;
  color: var(--ink);
}
.ssSteps b{ font-weight: 900; }

.ssList{
  margin: 0;
  padding-left: 18px;
  display:grid;
  gap: 10px;
  color: var(--ink);
}
.ssChips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ssChip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  color: var(--ink);
  font-weight: 700;
  font-size: 12px;
}
.ssTimeline{
  display:grid;
  gap: 10px;
}
.ssTlItem{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
}
.ssTlItem span{ color: var(--muted); }

.ssMini{ display:grid; gap: 8px; }
.ssMiniRow{
  display:flex; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
}
.ssMiniRow span{ color: var(--muted); }

.ssFlow{
  display:flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}
.ssFlowBox{
  flex: 1 1 180px;
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  padding: 12px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.ssFlowBox b{ font-weight: 900; }
.ssFlowBox span{ color: var(--muted); font-size: 12px; }
.ssFlowArrow{
  display:grid;
  place-items:center;
  width: 42px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
}

.ssScripts{
  display:grid;
  gap: 10px;
}
.ssScript{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  color: var(--ink);
  line-height: 1.35;
}

.ssCallout{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 16px;
  background: radial-gradient(140% 140% at 0% 0%, rgba(255,122,0,.18), rgba(0,0,0,.22));
  color: var(--ink);
}
.ssCallout i{ opacity: .9; }

/* ✅ Make qCard buttons look like your existing cards */
.qCardModal{
  border: 0;
  text-align: left;
  width: 100%;
  background: transparent;
  cursor: pointer;
}
.qCardModal:focus{
  outline: 2px solid rgba(255,122,0,.25);
  outline-offset: 3px;
}

/* ===== Samostroy Academy block ===== */
.academyBlock{
  padding: 26px 0;
}

.academyWrap{
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.05fr 1.25fr;
  gap: 22px;
  align-items: start;
}

.academyMedia{
  position:relative;
}

.academyMediaGlow{
  position:absolute; inset:-20px -20px auto -20px;
  height: 220px;
  background: radial-gradient(closest-side, rgba(255,122,34,.22), transparent 70%);
  filter: blur(6px);
  pointer-events:none;
}

.academyMediaFrame{
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}

.academyImg{
  width:100%;
  height: 380px;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}

.academyMediaBadge{
  position:absolute;
  left:14px;
  bottom:14px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(8,10,18,.55);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(245,245,247,.92);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing:.2px;
}

.academyMediaBadge .dot{
  width:8px; height:8px;
  border-radius: 50%;
  background: #ff7a22;
  box-shadow: 0 0 0 6px rgba(255,122,34,.14);
}

/* мини-карточки под фото */
.academyMiniGrid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.miniCard{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.miniCard i{
  width: 18px; height: 18px;
  color: rgba(255,122,34,.92);
}

.miniCard b{
  display:block;
  font-size: 13.5px;
}

.miniCard small{
  display:block;
  font-size: 12px;
  color: rgba(154,160,179,.9);
}

/* контент справа */
.academyContent{
  padding: 4px 0 0;
}

.academyKicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,122,34,.10);
  border:1px solid rgba(255,122,34,.22);
  color: rgba(255,200,160,.95);
  font-weight: 700;
  font-size: 12px;
  letter-spacing:.2px;
}

.academyTitle{
  margin: 12px 0 10px;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.08;
  letter-spacing: -.4px;
}

.academyTitle .accent{
  color: #ff7a22;
  text-shadow: 0 0 22px rgba(255,122,34,.18);
}

.academyLead{
  margin: 0 0 14px;
  color: rgba(245,245,247,.86);
  line-height: 1.55;
}

/* “презентация” */
.academyDeck{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin: 14px 0 14px;
}

.deckSlide{
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
  min-height: 150px;
}

.deckHead{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}

.deckHead i{
  width: 18px; height: 18px;
  color: rgba(255,122,34,.92);
}

.deckHead b{
  font-size: 13.5px;
}

.deckList{
  margin: 0;
  padding-left: 18px;
  color: rgba(154,160,179,.95);
  font-size: 12.5px;
  line-height: 1.45;
}

.deckList li{ margin: 6px 0; }

/* инфографика */
.academyStats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 12px 0 14px;
}

.statCard{
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  text-align:left;
}

.statCard b{
  display:block;
  font-size: 18px;
  letter-spacing: -.2px;
  color: rgba(245,245,247,.96);
}

.statCard span{
  display:block;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(154,160,179,.95);
}

/* CTA */
.academyCta{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
}

.btnAcademy{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,122,34,.98), rgba(255,84,0,.92));
  color: #0b0b10;
  font-weight: 900;
  letter-spacing: .3px;
  text-decoration:none;
  box-shadow: 0 16px 34px rgba(255,122,34,.22);
  transition: transform .18s ease, filter .18s ease;
}

.btnAcademy i{
  width: 20px; height: 20px;
}

.btnAcademy:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.academyNote{
  font-size: 12px;
  color: rgba(154,160,179,.95);
}

/* подсказка */
.academyHint{
  margin-top: 14px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
}

.academyHint i{
  width: 18px; height: 18px;
  color: rgba(255,122,34,.92);
  margin-top: 2px;
}

.academyHint b{
  color: rgba(245,245,247,.95);
}

.academyHint div{
  color: rgba(245,245,247,.78);
  line-height: 1.45;
  font-size: 13px;
}

/* анимация появления (если хочешь) */
[data-animate="in"]{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}
[data-animate="in"].is-in{
  opacity: 1;
  transform: translateY(0);
}

/* responsive */
@media (max-width: 980px){
  .academyWrap{ grid-template-columns: 1fr; }
  .academyImg{ height: 300px; }
  .academyDeck{ grid-template-columns: 1fr; }
  .academyStats{ grid-template-columns: 1fr 1fr; }
}

/* ===== Greet modal (full screen, blur, no borders) ===== */
.greetArt img{
  cursor: pointer;
}

.greetModal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.greetModal.is-open{
  display: block;
}

.greetBackdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* скролл внутри модалки */
.greetModalScroll{
  position: relative;
  height: 100%;
  overflow: auto;
  padding: clamp(16px, 3vw, 40px);

/* скрыть полоску прокрутки */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge legacy */
}
.greetModalScroll::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* блокируем фон страницы при открытой модалке */
body.modal-open{
  overflow: hidden;
  touch-action: none;
}

.greetModalInner{
  width: min(1100px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 22px;
  align-items: start;
}

/* картинка слева */
.greetModalLeft{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.greetModalImg{
  width: 100%;
  max-width: 260px;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.65));
  user-select: none;
}

/* справа текст + кнопка */
.greetModalRight{
  color: rgba(245,245,247,.92);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.greetChat{
  position: relative;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(245,245,247,.92);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  padding: 6px 2px 14px;
}

.greetTyping a{
  color: #ff7a22;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,122,34,.35);
}
.greetTyping a:hover{
  border-bottom-color: rgba(255,122,34,.75);
}

/* курсор как в чате */
.greetCaret{
  display: inline-block;
  width: 10px;
  height: 18px;
  margin-left: 4px;
  background: rgba(255,122,34,.9);
  border-radius: 3px;
  vertical-align: -3px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink{
  50%{ opacity: 0; }
}

/* кнопка Telegram */
.greetBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,122,34,.98), rgba(255,84,0,.92));
  color: #0b0b10;
  font-weight: 900;
  letter-spacing: .2px;
  text-decoration: none;
  box-shadow: 0 16px 34px rgba(255,122,34,.20);
  transform: translateY(0);
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
  opacity: 0.2;           /* сначала приглушена */
  pointer-events: none;   /* пока печатается — не кликается */
}

.greetBtn.is-ready{
  opacity: 1;
  pointer-events: auto;
}

.greetBtn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.greetNote{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(154,160,179,.9);
}

/* адаптив */
@media (max-width: 980px){
  .greetModalInner{
    grid-template-columns: 1fr;
  }
  .greetModalLeft{
    justify-content: flex-start;
  }
  .greetModalImg{
    max-width: 280px;
  }
}

/* ✅ Крестик закрытия (появится после печати) */
.greetClose{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  color: rgba(245,245,247,.92);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 32px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, filter .2s ease;
  z-index: 2;
}
.greetClose.is-ready{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.greetClose:hover{ filter: brightness(1.08); }

/* ✅ Блок с кнопкой + подписью полностью скрыт до печати */
.greetActions{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, max-height .25s ease;
}
.greetActions.is-ready{
  max-height: 220px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* кнопка больше НЕ должна сама управлять видимостью */
.greetBtn{
  opacity: 1;
  pointer-events: auto;
}

/* ✅ Мобилка: текст всегда справа, не под изображением */
@media (max-width: 980px){
  .greetModalInner{
    grid-template-columns: minmax(120px, 34vw) 1fr; /* картинка слева, текст справа */
    gap: 14px;
    align-items: start;
  }
  .greetModalImg{
    max-width: 100%;
  }
}

/* ===== Mini Academy Section ===== */
.academyMini{
  padding: 18px 0;
}

.academyMiniWrap{
  width: min(1100px, calc(100% - 24px));
  margin: 0 auto;

  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;

  background:
    radial-gradient(900px 220px at 10% 0%, rgba(255,122,0,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
  padding: 14px;
  position: relative;
  overflow: hidden;
}

/* LEFT media */
.academyMiniMedia{ position: relative; }
.academyMiniGlow{
  position:absolute; inset:-40px;
  background: radial-gradient(260px 160px at 30% 30%, rgba(255,122,0,.22), transparent 70%);
  filter: blur(10px);
  opacity: .9;
  pointer-events:none;
}

.academyMiniFrame{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  height: 150px;
}

.academyMiniImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.05);
}

.academyMiniBadge{
  position:absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(10,10,16,.55);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(245,245,247,.92);
  font-weight: 700;
  font-size: 12px;
}
.academyMiniBadge .dot{
  width: 8px; height: 8px; border-radius: 99px;
  background: rgba(255,122,0,.95);
  box-shadow: 0 0 0 4px rgba(255,122,0,.16);
}

/* RIGHT content */
.academyMiniContent{
  display:flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.academyMiniKicker{
  color: rgba(255,255,255,.70);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.academyMiniTitle{
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
}

.academyMiniText{
  margin: 0;
  color: rgba(245,245,247,.82);
  font-size: 14px;
  line-height: 1.45;
  max-width: 62ch;
}

/* Pills */
.academyMiniPills{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(245,245,247,.90);
  font-size: 12px;
  white-space: nowrap;
}

.pill i{
  width: 16px; height: 16px;
  opacity: .95;
}

/* CTA */
.academyMiniCta{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.btnAcademyMini{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,122,0,.35);
  background: rgba(255,122,0,.12);
  color: rgba(245,245,247,.95);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.btnAcademyMini:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  background: rgba(255,122,0,.16);
}
.btnAcademyMini i{
  width: 18px; height: 18px;
}

.academyMiniNote{
  color: rgba(255,255,255,.70);
  font-size: 12px;
}

/* Mobile: все равно слева картинка, справа текст (не в столбик) */
@media (max-width: 820px){
  .academyMiniWrap{
    grid-template-columns: 140px 1fr;
    gap: 12px;
    padding: 12px;
  }
  .academyMiniFrame{ height: 120px; }
  .academyMiniTitle{ font-size: 16px; }
  .academyMiniText{ font-size: 13px; }
}

/* Очень узкие экраны: чуть уменьшаем картинку, но текст всё равно справа */
@media (max-width: 420px){
  .academyMiniWrap{ grid-template-columns: 120px 1fr; }
  .academyMiniFrame{ height: 112px; }
}

/* (опционально) плавное появление если у тебя уже есть анимация по data-animate */
.academyMiniContent[data-animate="in"]{
  opacity: 1;
  transform: none;
}

/* Mobile: скрываем картинку, контент занимает всю ширину */
@media (max-width: 820px){
  .academyMiniMedia{ display: none; }
  .academyMiniWrap{ grid-template-columns: 1fr; }
}

/* ===== SOON lock (temporary disabled section) ===== */
.soonLock{
  position: relative;
  pointer-events: none;
  user-select: none;
}

.soonLock > *{
  filter: blur(.65px);     /* было 1.2px */
  opacity: .78;            /* было .55 */
  transform: translateZ(0);
}

/* затемнение поверх */
.soonLock::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: rgba(0,0,0,.22);          /* было .42 */
  backdrop-filter: blur(2px);           /* было 6px */
  -webkit-backdrop-filter: blur(3px);
  z-index: 5;
}

/* надпись "СКОРО!" по центру */
.soonLock::after{
  content:"С К О Р О !";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index: 6;

  font-weight: 900;
  letter-spacing: .45em;
  text-transform: uppercase;
  font-size: clamp(22px, 3.2vw, 44px);
  color: rgba(245,245,247,.92);

  text-shadow:
    0 10px 30px rgba(0,0,0,.55),
    0 0 22px rgba(255,122,34,.12);      /* чуть слабее */
}

/* 🅰️ℹ️ */
/* =========================
   AI Support — modern compact UI (ONE source of truth)
   ========================= */
.aiSupModal{
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  max-height: 86vh;           /* щоб на малих екранах не вилазило */
}

/* top */
.aiSupTop{
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.aiSupTopRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.aiSupTopLeft{display:flex;align-items:center;gap:10px;min-width:0}
.aiSupTopLeft b{font-size:13px;letter-spacing:.2px;white-space:nowrap}
.aiSupChip{
  font-size: 11px;
  color: rgba(255,255,255,.78);
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  max-width: 48vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.aiSupTopRight{display:flex;align-items:center;gap:8px}

.aiIconBtn{
  width: 32px;
  height: 32px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #f5f5f7;
  cursor: pointer;
}
.aiIconBtn:hover{filter:brightness(1.12)}
.aiIconBtn:active{transform:translateY(1px)}
.aiIconBtn svg{width:18px;height:18px}

/* body */
.aiSupBody{
  flex: 1;
  display:flex;
  flex-direction:column;
  min-height: 0;              /* критично для flex-scroll */
}

/* scroll only here */
.aiSupChat{
  flex: 1;
  min-height: 0;
  overflow:auto;
  padding: 12px;
}
.aiSupChat::-webkit-scrollbar{width:8px}
.aiSupChat::-webkit-scrollbar-thumb{background: rgba(255,255,255,.14);border-radius:10px}
.aiSupChat::-webkit-scrollbar-track{background: transparent}

/* messages */
.aiMsg{display:flex;gap:10px;margin:10px 0;align-items:flex-start;}
.aiAva{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  flex:0 0 auto;
}
.aiAva svg{width:18px;height:18px;opacity:.9}

.aiBubble{
  max-width: 860px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  line-height: 1.45;
  font-size: 13px;
}
.aiBubble.user{
  border-color: rgba(255,122,24,.30);
  background: rgba(255,122,24,.10);
}

/* composer pinned */
.aiSupComposer{
  position: sticky;
  bottom: 0;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(8,8,14,.30), rgba(8,8,14,.92));
  backdrop-filter: blur(10px);
}
.aiInputWrap{
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
}

/* НОРМАЛЬНЕ поле вводу (не крихітне) */
#aiSupInput{
  width: 100%;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;
  color: #f5f5f7;
  padding: 14px 48px 14px 14px; /* місце під кнопку справа */
  font-size: 13px;
  line-height: 1.35;
  min-height: 52px;            /* ключ: нормальна висота */
  max-height: 160px;
}
#aiSupInput:focus{box-shadow: 0 0 0 3px rgba(255,122,24,.10)}

.aiSendBtn{
  position:absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,122,24,.38);
  background: rgba(255,122,24,.18);
  color: #f5f5f7;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.aiSendBtn:hover{filter:brightness(1.15)}
.aiSendBtn:active{transform:translateY(1px)}
.aiSendBtn:disabled{opacity:.45;cursor:not-allowed}
.aiSendBtn svg{width:18px;height:18px}

.aiSupHint{
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255,255,255,.55);
}

/* typing */
.aiTyping{
  color: rgba(255,255,255,.65);
  font-size: 12px;
  padding: 6px 0 0 40px;
}

/* Markdown styles (assistant only) */
.aiBubble .md p{margin:0 0 8px}
.aiBubble .md p:last-child{margin-bottom:0}
.aiBubble .md ul, .aiBubble .md ol{margin:6px 0 6px 18px; padding:0}
.aiBubble .md li{margin:4px 0}
.aiBubble .md code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.aiBubble .md pre{
  margin: 8px 0;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow:auto;
}
.aiBubble .md .tableWrap{overflow:auto;border-radius:12px}
.aiBubble .md table{
  width:100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12px;
}
.aiBubble .md th, .aiBubble .md td{
  border: 1px solid rgba(255,255,255,.10);
  padding: 6px 8px;
  vertical-align: top;
}
.aiBubble .md th{background: rgba(255,255,255,.05)}

/* =========================
   Help buttons "?" reusable
   ========================= */
.aiHelpBtn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #f5f5f7;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.aiHelpBtn:hover{filter:brightness(1.12)}
.aiHelpBtn:active{transform:translateY(1px)}
.aiHelpBtn svg{width:18px;height:18px}

.aiHelpBtn{
  display:inline-flex;          /* важно для одной линии */
  align-items:center;
  justify-content:center;
  vertical-align: middle;       /* если рядом с текстом без контейнера */
}

.aiPulse{
  animation: aiPulse 2.4s ease-in-out infinite;
}

@keyframes aiPulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,24,.0); filter: brightness(1); }
  50%      { box-shadow: 0 0 0 8px rgba(255,122,24,.10); filter: brightness(1.12); }
}

/* при наведении — не мигает, чтобы не раздражало */
.aiHelpBtn:hover{ animation: none; }

.aiHelpBtn{ position: relative; }

.aiHelpBtn::after{
  content: attr(data-tip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  white-space: nowrap;

  background: rgba(0,0,0,.82);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: .15s opacity, .15s transform;
  z-index: 50;
}

.aiHelpBtn::before{
  content: "";
  position: absolute;
  right: 14px;
  bottom: calc(100% + 4px);
  width: 10px;
  height: 10px;
  transform: rotate(45deg);

  background: rgba(0,0,0,.82);
  border-left: 1px solid rgba(255,255,255,.12);
  border-top: 1px solid rgba(255,255,255,.12);

  opacity: 0;
  transform-origin: center;
  pointer-events: none;
  transition: .15s opacity;
  z-index: 49;
}

.aiHelpBtn:hover::after,
.aiHelpBtn:hover::before{
  opacity: 1;
  transform: translateY(0);
}

/* Класс для обёртывания */
.hRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
}
.hRow > span{min-width:0}


/* ===== AI HUB (cards inside #aiModal) ===== */
.aiHubIntro{ padding: 2px 2px 12px; }

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

.aiHubGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 920px){
  .aiHubGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .aiHubGrid{ grid-template-columns: 1fr; }
}

.aiSvcCard{
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

.aiSvcMain{
  width:100%;
  text-align:left;
  background: transparent;
  border:0;
  color: inherit;
  cursor:pointer;
  padding: 14px 44px 14px 14px; /* справа место под external-link */
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.aiSvcMain:hover{ filter: brightness(1.06); }

.aiSvcIco{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  flex: 0 0 auto;
}
.aiSvcTitle{ font-weight: 800; font-size: 14px; letter-spacing:.2px; }
.aiSvcSub{ font-size: 12px; color: rgba(255,255,255,.65); margin-top: 3px; }

.aiSvcGo{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #f5f5f7;
  transition: .15s filter, .15s transform;
}
.aiSvcGo:hover{ filter: brightness(1.12); }
.aiSvcGo:active{ transform: translateY(1px); }

/* ===== Help button (inline with text) ===== */
.aiHelpBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #f5f5f7;
  cursor:pointer;
  transition: .15s filter, .15s transform;
  vertical-align: middle;
}
.aiHelpBtn:hover{ filter: brightness(1.12); }
.aiHelpBtn:active{ transform: translateY(1px); }

/* чтобы заголовок + кнопка были в одну линию */
.aiInlineRow{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ===== Tooltip через data-tip ===== */
.aiHelpBtn[data-tip]{ position: relative; }
.aiHelpBtn[data-tip]::after{
  content: attr(data-tip);
  position:absolute;
  right: 0;
  bottom: calc(100% + 10px);
  transform: translateY(6px);
  opacity: 0;
  pointer-events:none;
  white-space: nowrap;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
  transition: .18s opacity, .18s transform;
}
.aiHelpBtn[data-tip]:hover::after{
  opacity: 1;
  transform: translateY(0);
}

/* ===== Pulse (легкое мигание) ===== */
.aiPulse{
  box-shadow: 0 0 0 rgba(255,122,24,0);
  animation: aiPulse 1.8s infinite;
}
@keyframes aiPulse{
  0%   { box-shadow: 0 0 0 0 rgba(255,122,24,.0); }
  55%  { box-shadow: 0 0 0 10px rgba(255,122,24,.10); }
  100% { box-shadow: 0 0 0 18px rgba(255,122,24,0); }
}

/* =========================
   INCOME CALCULATOR — styles
========================= */
.calcHead{ padding:18px; border-radius:26px; }
.calcTop{
  display:flex; justify-content:space-between; gap:12px;
  flex-wrap:wrap; align-items:flex-end;
}
.calcModes{ display:flex; gap:8px; flex-wrap:wrap; }
.modeBtn{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--ink);
  padding:10px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  cursor:pointer;
  transition:.2s ease;
  user-select:none;
}
.modeBtn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.modeBtn.isActive{
  border-color: rgba(255,122,26,.35);
  background: linear-gradient(135deg, rgba(255,122,26,.18), rgba(255,178,74,.08));
  box-shadow: 0 10px 30px rgba(255,122,26,.12);
}
.modeBtn.modeMax{ border-color: rgba(255,178,74,.30); }

.calcGrid{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:14px;
}

.calcResults{ min-width:0; }
.calcKpis{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.kpiCard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  border-radius:18px;
  padding:14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}
.kpiCard span{ display:block; color: var(--muted); font-size:12px; }
.kpiCard b{
  display:block;
  margin-top:8px;
  font-size: 22px;
  letter-spacing:-.2px;
}
.kpiCard small{ display:block; margin-top:6px; color: var(--muted); font-size:12px; line-height:1.35; }
.kpiCard.kpiAccent{
  border-color: rgba(255,122,26,.22);
  background: linear-gradient(135deg, rgba(255,122,26,.12), rgba(0,0,0,.20));
}

.calcChartCard{
  margin-top:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  border-radius:18px;
  padding:14px;
  overflow:hidden;
}
.chartHead{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap; margin-bottom:10px;
}
.chartHead b{
  display:flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:-.1px;
}
.chartHead b i{ width:18px; height:18px; opacity:.9; }
#calcChart{
  width:100%;
  height:220px;
  display:block;
  border-radius:14px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}

.calcLadder{
  margin-top:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  border-radius:18px;
  padding:14px;
}
.ladderHead{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
}
.ladderHead b{
  display:flex; align-items:center; gap:10px;
  font-size:13px;
}
.ladderHead b i{ width:18px; height:18px; opacity:.9; }
.ladderItem{ margin-top:10px; }
.ladderRow{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
}
.ladderRow b{ font-size:13px; }
.ladderRow span{ font-size:12px; }
.ladderBar{
  margin-top:8px;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.ladderFill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,122,26,.85), rgba(255,178,74,.70));
  box-shadow: 0 10px 24px rgba(255,122,26,.18);
  transition: width .35s ease;
}

.calcNext{
  margin-top:12px;
  border:1px solid rgba(255,122,26,.18);
  background: linear-gradient(135deg, rgba(255,122,26,.10), rgba(0,0,0,.18));
  border-radius:18px;
  padding:14px;
}
.nextHead{
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:900;
}
.nextHead i{ width:18px; height:18px; color: rgba(255,210,170,.95); }

.calcNote{ margin-top:12px; font-size:12px; line-height:1.5; }

.calcControls{ min-width:0; }
.ctrlCard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  border-radius:18px;
  padding:14px;
}
.ctrlHead{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
  margin-bottom:12px;
}
.ctrlHead b{
  display:flex; align-items:center; gap:10px;
  font-size:13px;
}
.ctrlHead b i{ width:18px; height:18px; opacity:.9; }

.ctrlBlock{ margin-top:12px; }
.ctrlLabel{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.ctrlLabel b{ font-size:13px; }
.ctrlValue{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  padding:6px 10px;
  font-weight:900;
  font-size:12px;
}

.range{
  width:100%;
  margin-top:10px;
  accent-color: var(--accent);
}
.rangeMeta{
  display:flex; justify-content:space-between;
  margin-top:6px;
  font-size:12px;
}

.dialRow{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.dialCard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius:18px;
  padding:12px;
}
.dialTitle b{
  display:flex; align-items:center; gap:8px;
  font-size:13px;
}
.dialTitle b i{ width:18px; height:18px; opacity:.9; }
.dialTitle span{ display:block; margin-top:6px; font-size:12px; color: var(--muted); line-height:1.35; }

.dial{
  margin-top:10px;
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  gap:10px;
  align-items:center;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius:16px;
  padding:10px;
}
.dialBtn{
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  display:grid; place-items:center;
  cursor:pointer;
  transition:.2s ease;
}
.dialBtn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.dialBtn i{ width:18px; height:18px; opacity:.9; }

.dialMid b{ display:block; font-size:18px; letter-spacing:-.2px; }
.dialMid span{ display:block; margin-top:4px; color: var(--muted); font-size:12px; line-height:1.35; }

.boostCard{
  margin-top:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius:18px;
  padding:12px;
}
.boostHead{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
  margin-bottom:10px;
}
.boostHead b{
  display:flex; align-items:center; gap:10px;
  font-size:13px;
}
.boostHead b i{ width:18px; height:18px; opacity:.9; }

.boostGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.boostItem{
  display:flex;
  gap:12px;
  align-items:center;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius:16px;
  padding:10px 12px;
  cursor:pointer;
  user-select:none;
}
.boostItem input{ position:absolute; left:-9999px; }
.boostUi{
  width:44px; height:26px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  position:relative;
  flex:0 0 auto;
}
.boostUi::after{
  content:"";
  position:absolute; top:3px; left:3px;
  width:20px; height:20px;
  border-radius:50%;
  background: rgba(245,245,247,.92);
  transition:.22s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.boostText b{ display:block; font-size:13px; }
.boostText small{ display:block; color: var(--muted); font-size:12px; margin-top:3px; line-height:1.35; }

.boostItem input:checked + .boostUi{
  border-color: rgba(255,122,26,.35);
  background: linear-gradient(135deg, rgba(255,122,26,.22), rgba(0,0,0,.14));
}
.boostItem input:checked + .boostUi::after{
  left:21px;
  background: rgba(255,210,170,.98);
}

.planCard{
  margin-top:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius:18px;
  padding:12px;
}
.planHead{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
  margin-bottom:8px;
}
.planHead b{
  display:flex; align-items:center; gap:10px;
  font-size:13px;
}
.planHead b i{ width:18px; height:18px; opacity:.9; }
.planList{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:8px;
  color: rgba(245,245,247,.92);
}
.planList li{
  color: rgba(245,245,247,.90);
  line-height: 1.45;
  font-size: 13px;
}
.planList li span{ color: var(--muted); }

.calcCta{ margin-top:12px; display:grid; gap:8px; }
.calcBtn{ width:100%; justify-content:center; }

/* Responsive */
@media (max-width: 980px){
  .calcGrid{ grid-template-columns: 1fr; }
  .dialRow{ grid-template-columns: 1fr; }
  .calcKpis{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px){
  .calcKpis{ grid-template-columns: 1fr; }
}

/* =========================
   SALES CRM — unified (add-on)
========================= */
.salesHero{ margin-top:2px; }

/* toolbar */
.salesToolbar{
  margin-top: 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.salesFilterRow{
  display:grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 10px;
  align-items:center;
}
.salesActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* stats */
.salesStats{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.salesStat{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: 16px;
  padding: 12px;
}
.salesStat span{ display:block; color: var(--muted); font-size: 12px; }
.salesStat b{ display:block; margin-top: 8px; font-size: 18px; letter-spacing:-.2px; }
.salesStatAccent{
  border-color: rgba(255,122,26,.22);
  background: linear-gradient(135deg, rgba(255,122,26,.10), rgba(0,0,0,.18));
}

/* cards / blocks */
.salesCard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: 18px;
  padding: 12px;
}
.salesCardHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.salesCardHead b{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 13px;
}
.salesCardHead b i{ width:18px; height:18px; opacity:.9; }

/* form */
.salesForm{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.salesSpan2{ grid-column: 1 / -1; }
.salesFormActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.salesSaveBtn{
  flex: 1 1 220px;
  justify-content:center;
}
#salesCancelEdit{ flex: 0 0 auto; }

/* table */
.salesTableWrap{
  width: 100%;
  overflow:auto;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.salesTable{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1100px;
}
.salesTableSmall{ min-width: 760px; }

.salesTable thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  text-align:left;
  font-size: 12px;
  color: rgba(245,245,247,.92);
  background: rgba(10,10,16,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding: 10px 10px;
}
.salesTable tbody td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(245,245,247,.90);
  font-size: 12.5px;
  vertical-align: top;
}
.salesTable tbody tr{ cursor:pointer; }
.salesTable tbody tr:hover td{ background: rgba(255,255,255,.03); }
.salesRowEditing td{
  outline: 1px solid rgba(255,122,26,.18);
  background: rgba(255,122,26,.06);
}

.salesProfitPos{ color: rgba(41,209,122,.95); font-weight: 900; }
.salesProfitNeg{ color: rgba(255,77,77,.95); font-weight: 900; }

.salesDel{
  width: 38px; height: 38px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(245,245,247,.92);
  cursor:pointer;
  transition: .18s ease;
}
.salesDel:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.salesDel:active{ transform: translateY(0); }

/* ===== Mobile UX ===== */
.salesCards{ display:none; }
.salesCardsSmall{ display:none; }

/* На мобилке: прячем таблицы, показываем карточки */
@media (max-width:680px){
  .salesTableWrap{ display:none; }
  .salesCards, .salesCardsSmall{ display:grid; gap:10px; }
}

/* Липкая панель фильтров на мобилке */
@media (max-width:680px){
  .salesToolbar{
    position: sticky;
    top: 0;
    z-index: 6;
    padding: 10px 0 12px;
    background: linear-gradient(180deg, rgba(8,9,19,.92), rgba(8,9,19,.62), transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* Упрощаем статистику на мобилке (2 плитки) */
@media (max-width:680px){
  .salesStats{ grid-template-columns: 1fr 1fr; }
  .salesStats .salesStat:nth-child(2),
  .salesStats .salesStat:nth-child(3){ display:none; }
}

/* filter row adaptive */
@media (max-width:1100px){
  .salesFilterRow{ grid-template-columns: 1fr; }
}
@media (max-width:900px){
  .salesStats{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:680px){
  .salesStats{ grid-template-columns: 1fr 1fr; }
  .salesActions .btn{ width:100%; justify-content:center; }
  .salesForm{ grid-template-columns: 1fr; }
  .salesSpan2{ grid-column:auto; }
  .salesFormActions{ flex-direction: column; }
  .salesSaveBtn, #salesCancelEdit{ width:100%; }
}

/* ===== Mobile deal cards ===== */
.dealCard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
.dealTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.dealDate{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -.2px;
}
.dealStatus{
  font-size: 12px;
  color: rgba(245,245,247,.92);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.dealProfit{
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
}
.dealMain{
  margin-top: 10px;
  line-height: 1.35;
}
.dealMain b{
  display:block;
  font-size: 13px;
}
.dealMain .muted{
  display:block;
  margin-top: 6px;
  font-size: 12px;
}
.dealMeta{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.metaPill{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(245,245,247,.88);
}
.dealBtns{
  margin-top: 10px;
  display:flex;
  gap:10px;
}
.dealBtn{
  flex: 1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 10px 12px;
  cursor:pointer;
  transition:.18s ease;
  font-weight: 900;
  font-size: 12.5px;
}
.dealBtn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.dealBtn:active{ transform: translateY(0); }
.dealBtn.danger{
  border-color: rgba(255,77,77,.26);
  background: rgba(255,77,77,.10);
}

/* ✅ FIX: Sales CRM — ничего не перекрывает, всё в потоке */
.salesToolbar{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ✅ чтобы заголовок таблицы тоже НЕ “висел” поверх строк */
.salesTable thead th{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* ✅ оставляем горизонтальный скролл, но без “внутреннего” вертикального слоя */
.salesTableWrap{
  overflow-x: auto;
  overflow-y: visible;
}

/* Кнопка стрелка */
#toolsToggle {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #ff7a1a;
  color: #fff;
  font-size: 22px;
  padding: 14px 10px;
  border-radius: 12px 0 0 12px;
  cursor: pointer;
  z-index: 1001;
  transition: .3s;
}

/* Панель */
#toolsPanel {
  position: fixed;
  top: 0;
  right: -50%;
  width: 50%;
  height: 100vh;
  background: #0f1120;
  box-shadow: -10px 0 30px rgba(0,0,0,.6);
  padding: 30px;
  z-index: 1000;
  transition: .4s ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Активное состояние */
#toolsPanel.active {
  right: 0;
}

#toolsToggle.active {
  right: 50%;
  transform: translateY(-50%) rotate(180deg);
}

/* Ссылки */
#toolsPanel h3 {
  color: #fff;
  margin-bottom: 10px;
}

#toolsPanel a {
  color: #fff;
  text-decoration: none;
  padding: 12px 16px;
  background: #14172a;
  border-radius: 12px;
  transition: .25s;
}

#toolsPanel a:hover {
  background: #ff7a1a;
}

/* Когда меню открыто — фон у стрелки прозрачный */
#toolsToggle.active {
  background: transparent;
  color: #ff7a1a;
  box-shadow: none;
}

/* Открытое меню — полупрозрачный фон стрелки */
#toolsToggle {
  background: rgba(255, 122, 26, 0.05); /* полупрозрачный оранжевый */
  color: rgba(255, 122, 26, 0.85); /* полупрозрачный оранжевый */
  box-shadow: none;
}

/* Затемняющий слой */
#toolsOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: .3s;
}

/* Когда меню открыто */
#toolsOverlay.active {
  opacity: 1;
  pointer-events: all;
}