/* ═══════════════════════════════════════════════════════════
   BuzzFlow «Night Meadow» — дизайн-система v1
   Підключається ПІСЛЯ вбудованих стилів index.html і перекриває їх.
   Затверджено: redesign_preview_v5.html
   ═══════════════════════════════════════════════════════════ */

:root{
  --night:#050B16;
  --ice:#EDF5FF;
  --mist:#9DB4D4;
  --faint:#5A6F90;
  --cyan:#A9DBFF;
  --star:#CFE9FF;
  --accent:#7FC3FF;          /* основний акцент (замість #a855f7) */
  --accent-deep:#3D8BFF;
  --sunset:#FF9E6B;          /* теплий CTA-градієнт */
  --rose:#FF7FA8;
  --mint:#6FF0BC;
  --glass:rgba(130,185,255,.055);
  --glass-brd:rgba(160,210,255,.17);
  --font-logo:'Raleway',sans-serif;
  --font-ui:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
}

/* ── Кіно-сцена: фото + віньєтка без зміни HTML ── */
html{background:var(--night)}
/* Без фото: чиста кінематографічна сцена на градієнтах */
html::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 50% -180px, rgba(61,139,255,.28), transparent 62%),
    radial-gradient(900px 600px at 82% 8%, rgba(110,193,255,.09), transparent 60%),
    radial-gradient(700px 700px at 8% 105%, rgba(40,90,180,.13), transparent 65%),
    linear-gradient(180deg,#040A14 0%,#02060D 55%,#010409 100%);
}
/* легкий шум щоб не було "пластикової" рівноти */
html::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .8 0 0 0 0 1 0 0 0 .02 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body{
  font-family:var(--font-ui) !important;
  background:transparent !important;
  color:var(--ice) !important;
}
body > *{position:relative;z-index:1}

/* ── Сайдбар: скло ── */
.sidebar{
  background:rgba(8,16,30,.55) !important;
  border-right:1px solid var(--glass-brd) !important;
  backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);
}
.sidebar::after{
  background:linear-gradient(to bottom,transparent,rgba(140,200,255,.3) 50%,transparent) !important;
}
.nav-item{color:var(--mist) !important}
.nav-item i{color:var(--faint) !important}
.nav-item:hover{
  background:rgba(130,185,255,.07) !important;
  color:var(--ice) !important;
  border-color:rgba(160,210,255,.12) !important;
}
.nav-item:hover i{color:var(--accent) !important}
.nav-item.active{
  background:linear-gradient(135deg,rgba(127,195,255,.14) 0%,rgba(61,139,255,.07) 100%) !important;
  color:var(--cyan) !important;
  border-color:rgba(160,210,255,.28) !important;
  box-shadow:0 2px 22px rgba(110,180,255,.1),inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.nav-item.active i{color:var(--accent) !important}
.nav-item.active::before{
  background:linear-gradient(to bottom,#8FCBFF,#3D8BFF) !important;
  box-shadow:0 0 10px rgba(130,195,255,.7) !important;
}

/* ── Header і контент: прозорі, щоб було видно сцену ── */
.header{
  background:rgba(6,13,26,.5) !important;
  border-bottom:1px solid rgba(160,210,255,.1) !important;
  backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);
}
.header h1{color:var(--ice) !important}
.content{
  background:transparent !important;
  background-image:none !important;
}
.app{background:transparent !important}

/* ── Кнопки ── */
.btn-primary{
  background:linear-gradient(115deg,rgba(255,158,107,.9),rgba(255,127,168,.8)) !important;
  color:#1C0E08 !important;font-weight:700 !important;
  box-shadow:0 0 26px -8px rgba(255,150,120,.6);
}
.btn-primary:hover{filter:brightness(1.08);opacity:1 !important}
.btn-secondary{
  background:rgba(130,185,255,.09) !important;
  border:1px solid var(--glass-brd) !important;
  color:var(--ice) !important;
}
.btn-secondary:hover{background:rgba(130,185,255,.16) !important;opacity:1 !important}

/* ── Картки: скло зі світінням ── */
.card{
  background:var(--glass) !important;
  border:1px solid var(--glass-brd) !important;
  border-radius:18px !important;
  /* без backdrop-filter: артефакти при скролі, а на градієнтному фоні він непомітний */
  box-shadow:0 1px 0 rgba(210,235,255,.1) inset,
             0 30px 60px -32px rgba(0,0,0,.9),
             0 0 40px -18px rgba(110,180,255,.22) !important;
}
.card:hover{border-color:rgba(170,215,255,.3) !important}
.card-title{color:var(--ice) !important}

/* ── Форми ── */
textarea,input[type="text"],input[type="email"],input[type="password"],
input[type="datetime-local"],input[type="url"],input[type="number"],
input[type="time"],input[type="date"],select{
  background:rgba(8,16,30,.6) !important;
  border:1px solid rgba(160,210,255,.15) !important;
  color:var(--ice) !important;
  font-family:var(--font-ui) !important;
}
textarea:focus,input:focus,select:focus{border-color:var(--accent) !important;box-shadow:0 0 18px -6px rgba(127,195,255,.4)}
label{color:var(--mist) !important}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #0A1424 inset !important;
  -webkit-text-fill-color:var(--ice) !important;
}

/* ── Бейджі ── */
.badge-scheduled{background:rgba(61,139,255,.18) !important;color:#8FCBFF !important}
.badge-published{background:rgba(111,240,188,.14) !important;color:var(--mint) !important}
.badge-draft{background:rgba(130,160,200,.14) !important;color:var(--mist) !important}
.badge-failed{background:rgba(255,107,107,.15) !important;color:#FF9E9E !important}

/* ── Логотип у сайдбарі ── */
.sidebar-logo .logo-name{
  font-family:var(--font-logo) !important;
  font-weight:200 !important;
  font-size:17px !important;
  letter-spacing:.34em !important;
  text-transform:uppercase;
  color:var(--ice) !important;
}
.sidebar-logo .logo-name b,
.sidebar-logo .logo-name .logo-accent{
  font-weight:600 !important;
  background:linear-gradient(100deg,var(--cyan),var(--star));
  -webkit-background-clip:text;background-clip:text;color:transparent !important;
  filter:drop-shadow(0 0 12px rgba(150,210,255,.65));
}

/* ── Скролбар ── */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(140,200,255,.18);border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(140,200,255,.3);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-corner{background:transparent}   /* білий квадрат на стику скролбарів у textarea */

/* ═══ Плаваючі плити: рейка зліва + бар зверху ═══ */
.app{padding:16px !important;gap:16px}

/* Сайдбар → іконкова рейка */
.sidebar{
  position:relative;z-index:60;   /* тултіпи мають бути НАД контентними плитами */
  width:70px !important;
  border-radius:24px;
  border:1px solid var(--glass-brd) !important;
  padding:18px 0 0 !important;
  overflow:visible !important;
}
.sidebar::after{display:none !important}
.sidebar-logo{padding:0 0 18px !important;display:flex !important;justify-content:center !important}
.sidebar-logo > div{display:none !important}            /* ховаємо wordmark — він тепер у топбарі */
[data-i18n="nav_section"]{display:none !important}      /* label "Навігація" */
.nav-item{
  justify-content:center !important;
  margin:3px 12px !important;
  padding:12px 0 !important;
  position:relative;
}
.nav-item i{font-size:20px !important}
/* підпис → скляний тултіп праворуч */
.nav-item span{
  position:absolute;left:54px;top:50%;transform:translateY(-50%);
  background:rgba(8,16,30,.95);border:1px solid var(--glass-brd);
  padding:6px 12px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--ice);
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:80;
  box-shadow:0 8px 24px rgba(0,0,0,.6);
}
.nav-item:hover span{opacity:1;transition-delay:.25s}
.nav-item.active span{display:none !important}   /* не показуємо тултіп на активному пункті (лишався видимим після кліку) */
.nav-item.active::before{display:none !important}   /* без бічної лінії — лише обводка */
/* user-menu внизу рейки: лише аватар */
.sidebar #user-menu > div{padding:12px 0 14px !important;justify-content:center !important;border-radius:0 0 22px 22px}
.sidebar #user-menu > div > div:nth-child(2),
.sidebar #user-menu > div > button{display:none !important}

/* Хедер → плаваюча плита */
.main{gap:16px}
.header{
  border-radius:20px;
  border:1px solid var(--glass-brd) !important;
  box-shadow:0 1px 0 rgba(210,235,255,.08) inset,0 20px 44px -28px rgba(0,0,0,.9);
}
.header-brand{
  font-family:var(--font-logo);font-weight:200;font-size:16px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ice);
}
.header-brand b{
  font-weight:600;
  background:linear-gradient(100deg,var(--cyan),var(--star));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 12px rgba(150,210,255,.65));
}
.header h1{font-size:13px !important;font-weight:600 !important;color:var(--mist) !important}
.content{border-radius:0 0 8px 8px}

/* ── Картки коментарів/постів: виразніше розділення ── */
.post-item{
  background:rgba(130,185,255,.045) !important;
  border:1px solid rgba(160,210,255,.14) !important;
  border-radius:16px !important;
  padding:16px 18px !important;
  margin-bottom:14px !important;
  box-shadow:0 1px 0 rgba(210,235,255,.07) inset,0 18px 40px -26px rgba(0,0,0,.85);
  transition:border-color .18s, box-shadow .18s !important;
}
.post-item:hover{
  border-color:rgba(170,215,255,.3) !important;
  box-shadow:0 1px 0 rgba(210,235,255,.07) inset,0 22px 44px -24px rgba(0,0,0,.9),0 0 36px -14px rgba(110,180,255,.3);
}

/* ── Радар: анімована кнопка сканування ── */
.radar-btn{
  display:inline-flex;align-items:center;gap:9px;padding:7px 16px 7px 10px;
  border-radius:999px;border:1px solid rgba(127,195,255,.3);
  background:rgba(127,195,255,.1);color:#A9DBFF;
  font-size:12.5px;font-weight:600;cursor:pointer;transition:all .2s;
}
.radar-btn:hover{background:rgba(127,195,255,.18)}
.radar-btn.scanning{border-color:rgba(127,195,255,.55);box-shadow:0 0 24px -6px rgba(127,195,255,.6)}
.radar-viz{position:relative;width:26px;height:26px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(127,195,255,.45);overflow:hidden}
.radar-viz::before{content:'';position:absolute;inset:5px;border-radius:50%;
  border:1px solid rgba(127,195,255,.3)}
.radar-viz i{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;
  border-radius:50%;background:#A9DBFF}
/* промінь */
.radar-viz::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(150,210,255,.9), rgba(150,210,255,.15) 80deg, transparent 90deg);
  opacity:.35;animation:radar-sweep 6s linear infinite}
.radar-btn.scanning .radar-viz::after{opacity:.95;animation:radar-sweep 1.3s linear infinite}
/* точка-ціль, блимає під час сканування */
.radar-viz b{position:absolute;left:66%;top:30%;width:4px;height:4px;border-radius:50%;
  background:#FFC53D;opacity:0}
.radar-btn.scanning .radar-viz b{animation:radar-blip 1.3s ease-out infinite}
@keyframes radar-sweep{to{transform:rotate(360deg)}}
@keyframes radar-blip{0%,20%{opacity:0}30%{opacity:1;box-shadow:0 0 8px #FFC53D}80%,100%{opacity:0}}

/* ── Кнопка "Запланувати" — індиго, як заплановані пости в календарі ── */
.btn-schedule{
  background:linear-gradient(135deg,#818CF8,#6366F1) !important;
  color:#fff !important;font-weight:700 !important;border:none !important;
  box-shadow:0 0 26px -8px rgba(129,140,248,.65);
}
.btn-schedule:hover{filter:brightness(1.1);opacity:1 !important}

/* ── Модалки: додаткове скло ── */
.modal-overlay{background:rgba(2,6,14,.72) !important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal h2{color:var(--ice)}
/* ручка ресайзу textarea — ховаємо білий нативний квадрат
   (розтягування за кут при цьому працює далі) */
textarea::-webkit-resizer{display:none !important;background:transparent !important}
/* нативні іконки календаря/часу в темний бік */
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:invert(.75) sepia(.2) saturate(3) hue-rotate(180deg);cursor:pointer}

/* ── Auth/landing скло ── */
.auth-glass-card{
  background:rgba(130,185,255,.05) !important;
  border:1px solid var(--glass-brd) !important;
  box-shadow:0 0 0 1px rgba(140,200,255,.06),0 24px 64px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.auth-feat-pill{
  border:1px solid rgba(160,210,255,.2) !important;
  background:rgba(130,185,255,.07) !important;
  color:var(--cyan) !important;
}