/* ==========================================================================
   HalDesign v1 — main3.css (общий для всех страниц)
   ========================================================================== */

/* ---- TOKENS / BASE ---- */
:root{
  color-scheme: dark;
  --bg:#0f1014; --surface:#16181f; --surface-2:#1b1f27;
  --glass:rgba(255,255,255,0.06); --stroke:rgba(255,255,255,0.12);
  --text:#e8e9ee; --muted:#9aa0b4;
  --accent1:#ff2fb9; --accent2:#6a5cff; --accent3:#4ad1ff;
  --danger:#ff4d6d; --success:#3ddc97; --warning:#ffcc66;

  --font-ui: Manrope, Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-xxs:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:26px;

  --radius-xs:8px; --radius:14px; --radius-lg:20px; --radius-xl:28px; --round:999px;
  --shadow-sm:0 6px 20px rgba(0,0,0,.35); --shadow:0 10px 50px rgba(0,0,0,.45);
  --glow:0 0 0 2px rgba(255,255,255,.06);

  --container:1120px; --line:1px solid var(--stroke);

  
  --hc-bg:#121318;
  --hc-surface:#191B22;
  --hc-surface-2:#1F2230;
  --hc-stroke:rgba(255,255,255,0.08);
  --hc-text:#E8EAF2;
  --hc-muted:#9aa0b5;
  --hc-accent1:#fe007e;
  --hc-accent2:#3a01ff;
  --hc-danger:#ff4d4d;
  --hc-radius:16px;
  --hc-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
  --hc-shadow-sm: 0 6px 18px rgba(0,0,0,.25);
}

*{box-sizing:border-box}

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg,video{display:block; max-width:100%}
a{color:var(--text); text-decoration:none}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.muted{color:var(--muted)}
[hidden]{display:none!important}

/* Фокусы (и фолбэк без :focus-visible) */
:where(a,button,input,select,textarea){outline:0}
:where(a,button,input,select,textarea):focus-visible{
  box-shadow:0 0 0 2px rgba(106,92,255,.5), 0 0 0 4px rgba(255,255,255,.08);
  border-radius:12px; transition:box-shadow .18s cubic-bezier(.2,.8,.2,1);
}
@supports not selector(:focus-visible){
  :where(a,button,input,select,textarea):focus{
    box-shadow:0 0 0 2px rgba(106,92,255,.5), 0 0 0 4px rgba(255,255,255,.08);
    border-radius:12px;
  }
}

/* Мобилки: iOS-автозум, автозаполнение, скроллбары, tap highlight */
@media (max-width:640px){ input,select,textarea{ font-size:16px } }
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-text-fill-color:var(--text); transition:background-color 5000s ease-in-out 0s;
}
*{scrollbar-width:thin; scrollbar-color:#3a3f52 transparent; -webkit-tap-highlight-color:rgba(255,255,255,.05)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#3a3f52;border-radius:10px}
::-webkit-scrollbar-track{background:transparent}

/* Reduced motion уважение */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:1ms!important; transition-duration:1ms!important}
}

/* ---- HEADER / NAV (общая шапка HalNet) ---- */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(15,16,20,.90); /* фолбэк без blur */
  border-bottom:1px solid var(--stroke);
}
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)){
  .header{
    backdrop-filter:saturate(140%) blur(8px);
    -webkit-backdrop-filter:saturate(140%) blur(8px);
    background:linear-gradient(180deg, rgba(15,16,20,.85), rgba(15,16,20,.55) 60%, transparent);
  }
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:44px; height:44px; border-radius:14px; position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center}
.logo::before{content:""; position:absolute; inset:-2px; border-radius:16px; 
  /*background:linear-gradient(135deg,var(--accent1),var(--accent2));*/
  filter:blur(.6px); z-index:-1}
.logo-image{position:relative; width:100%; height:100%; aspect-ratio:1; margin:4px 0 0 4px;}
.brand h1{font-size:22px; margin:0; letter-spacing:.2px}
.nav-center{display:flex; align-items:center; gap:8px}
.nav-right{display:flex; align-items:center; gap:8px}

/* ---- Buttons (общие) ---- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 16px;
  border-radius:14px; font-weight:700; background:var(--surface); color:var(--text); border:1px solid var(--stroke);
  transition:transform .15s ease, border-color .15s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.22)}
.btn--primary{background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#fff; border:none}
.btn--primary span{color:#fff; font-weight:800}
.btn--ghost{background:transparent}

.icon-btn{
  position:relative; display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:12px; border:1px solid var(--stroke); background:var(--surface);
  transition:border-color .15s ease, transform .12s ease;
}
.icon-btn:hover{border-color:rgba(255,255,255,.22); transform:translateY(-1px)}

/* ---- Notifications (общие) ---- */
.noti-dot{position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:999px; background:var(--danger); box-shadow:0 0 0 2px #0f1014}
.noti-panel{
  position:absolute; right:0; top:56px; width:min(420px,94vw);
  background:rgba(22,24,31,.96); border:1px solid var(--stroke); border-radius:16px; box-shadow:var(--shadow); display:none
}
.noti-panel.open{display:block}
.noti-item{padding:12px 14px; border-bottom:1px solid var(--stroke)}
.noti-item:last-child{border-bottom:none}

.scrim{position:relative; display:flex; z-index:55; align-items: center;}
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){
  .scrim{backdrop-filter:blur(1px); -webkit-backdrop-filter:blur(1px)}
}
.scrim.open{display:block}
.apps-header{font-weight:800; letter-spacing:.3px; margin:2px 0 10px}
.apps-list{display:grid; grid-template-columns:1fr; gap:10px}
.app-tile{padding:12px 14px; display:flex; align-items:center; gap:10px; border-radius:14px; background:var(--glass); border:1px solid var(--stroke)}
.app-tile:hover{border-color:rgba(255,255,255,.22)}
.tile-ic{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent1),var(--accent2))}
.apps-btn{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; border:1px solid var(--stroke); background:var(--glass); font-weight:600}
.menu-btn{background:var(--glass); border:1px solid var(--stroke)}

/* ---- Карточка-основа (общая) ---- */
.card{
  background:var(--glass); border:1px solid var(--stroke); border-radius:var(--radius-lg); padding:18px;
  transition:.2s ease; position:relative; overflow:hidden;
}
.card:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.22)}

/* ---- Утилиты секций и заголовков (общие) ---- */
.band{padding:36px 0}
.h2{font-size:38px; margin:0 0 18px}

/* ---- Footer (общий) ---- */
footer{color:var(--muted); font-size:14px; text-align:center}
footer a{color:var(--accent3)}
.endfooter{padding-bottom:20px}

/* ---- Reveal (общая микро-анимация) ---- */
.reveal{opacity:0; transform:translateY(10px); transition:.5s ease}
.reveal.on{opacity:1; transform:none}

/* user menu */
#menuUser {
    display:block;
    position:relative;
    float:right;
    margin-right:20px;
    margin-top:20px;
    height:50px;
    cursor:pointer;
    font-size:24px;
    max-width:200px;
}

#menuUser:hover>span {
    color:#474747;
    transition:0.25s;
}

#menuUser:not(:hover)>span {
    color:#000000;
    transition:0.25s;
}

#menuUser:hover>i {
    border-color:#474747;
    transition:0.25s;
}

#menuUser:not(:hover)>i {
    border-color:#000000;
    transition:0.25s;
}

#menuUserNickname {
    font-size:20px;
    color:#000000;
    max-width:98px;
    white-space: nowrap;
    text-overflow: ellipsis;
    display:inline-block;
    overflow: hidden; 
}

#menuUserIcon {
    width:50px;
    height:50px;
    display:inline-block;
    border-radius:50%;
}

#menuUserArrow {
    border: solid;
    border-color: var(--hc-accent);
    border-width: 0 4px 4px 0;
    width: 4px;
    height: 4px;
    display: inline-block;
    padding: 4px;
    margin-bottom: 8px;
}

.menuUserArrowOpened {
    -webkit-transform:translateY(5px) rotate(-135deg);
    -ms-transform:translateY(5px) rotate(-135deg);
    transform:translateY(5px) rotate(-135deg);
}

.menuUserArrowClosed {
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
}

#pullMenuUser {
    width:auto;
    height:auto;
    background-color:#858585;
    display:block;
    position:absolute;
    margin-top:5px;
    right:15px;
    border-radius:0 0 10px 10px;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: 0.1s ease-in-out;
    -moz-transition: 0.1s ease-in-out;
    -o-transition: 0.1s ease-in-out;
    transition: 0.1s ease-in-out;
    padding-bottom:5px;
}

.pullMenuUserOpened {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}

.pullMenuUserClosed {
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
}

#pullMenuUserDiv {
    display:block;
    width:100%;
    height:50px;
    margin-top:5px;
    cursor:pointer;
    margin-right:5px;
}

#pullMenuUserDiv>a {
    font-size:24px;
    text-decoration:none;
    color:#EBEBEB;
    margin-left:10px;
    float:left;
    margin-top:12px;
}

#pullMenuUserDiv>img {
    width:50px;
    height:50px;
    float:left;
    margin-left:5px;
}

.halnethref {
    font-size:20px;
    text-decoration:none;
    color:#EBEBEB;
}

#authSignMenuUser {
    position:relative;
    display:block;
    text-align:center;
    height:60px;
    line-height:60px;
}

#pullMenuUserSection {
    background-color:#636363;
    height:1px;
    width:calc(100% - 10px);
    margin-left:5px;
    margin-right:5px;
    margin-top:5px;
}


/* menu user*/
.userDiv {
    display:flex;
    position:relative;
    width:auto;
    align-items: center;
    margin:0 0 0 7px;
    cursor: pointer;
}

.userIcon {
    width:50px;
    height:50px;
    border-radius: 5px;
}

.userMenu {
  display: flex;
  flex-direction: column;
  justify-content: left;
  position: absolute;
  top:60px;
  right:-20px;
  width: 200px;
  height: auto;
  padding: 5px;
  background: rgba(25,27,34,.6);
  border-radius: 0 0 10px 10px;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: 0.1s ease-in-out;
  -moz-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
  gap:5px;
}

.userMenuOpened {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}

.userMenuClosed {
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
}


.userMenuOption {
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content:center;
  width:100%;
  height: fit-content;
  border-bottom:#ffffff solid 1px;
  cursor: pointer;
  margin:0;
  padding:0 5px 5px 5px;
}

.userMenuOption:first-child {
  padding:5px;
}

.userMenuOption:last-child {
  border-bottom: 0;
  margin:0;
}

.userMenuOptionIcon {
  display: block;
  width:30px;
  height:30px;
}

.userMenuOptionText {
  display: block;
}

/* notifications */
#notificationDiv {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
  position: absolute;
  top:60px;
  right:-20px;
  width: 300px;
  height: auto;
  padding: 10px;
  background: rgba(25,27,34,.6);
  border-radius: 0 0 10px 10px;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: 0.1s ease-in-out;
  -moz-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
  gap:5px;
}

.notificationClosed {
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
}

.notificationOpened {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}

.notificationAll {
  display:block;
}

.notification {
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height:auto;
  padding:5px 0 5px 0;
  border-top:1px solid #ffffff;
}

/* Меню */


.apps-drawer{
  position:fixed; top:0; left:0; height:100vh; width:min(360px,86vw);
  background:rgba(22,24,31,.98); border-right:1px solid var(--stroke); box-shadow:var(--shadow);
  z-index:60; padding:16px;
  
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: transform .25s ease;
  -moz-transition: transform .25s ease;
  -o-transition: transform .25s ease;
  transition: transform .25s ease;
}

.drawerClosed {
    -webkit-transform: translateX(-110%);
    -ms-transform: translateX(-110%);
    transform: translateX(-110%);
}

.drawerOpened {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

/* ── Глобальный фон без швов + лёгкий noise ───────────────── */
#hcBackground{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 700px at 18% 20%, rgba(254,0,126,.16) 0%, rgba(254,0,126,0) 65%),
    radial-gradient(1100px 820px at 82% 22%, rgba(58,1,255,.16) 0%, rgba(58,1,255,0) 70%),
    radial-gradient(1000px 900px at 22% 82%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #0E0F14 0%, #131622 100%);
  filter: saturate(118%);
  animation: bg-sway 18s ease-in-out infinite alternate;
}

#hcNoise{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"><filter id=\"n\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.8\" numOctaves=\"2\" stitchTiles=\"stitch\"/></filter><rect width=\"120\" height=\"120\" filter=\"url(%23n)\" opacity=\"0.06\"/></svg>');
  background-size: 240px 240px;
  mix-blend-mode: overlay;
}

@keyframes bg-sway{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(0,-8px,0) scale(1.015)} }
@media (prefers-reduced-motion: reduce){ #hcBackground{ animation:none } }

/* ==========================================================================
   HalDesign v1 — MOBILE OVERRIDES
   Добавь этот блок в самый конец main3.css
   ========================================================================== */

/* --- Брейкпоинты и safe-area --- */
:root{
  --bp-xs:360px; --bp-sm:480px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Контейнеры и типографика — чуть компактнее на мобилке */
.container{ padding:0 clamp(12px, 4vw, 20px) }
.h2{ font-size:clamp(22px, 5.5vw, 38px) }

/* Глобальные отступы с учётом вырезов экрана */
body{ padding-bottom:var(--safe-bottom) }
.header{ padding-top:var(--safe-top) }

/* Шапка/навигация — уплотняем, скрываем центр на малых экранах */
@media (max-width: 640px){
  .nav{ padding:8px 0 }
  .logo{ width:36px; height:36px; border-radius:12px }
  .brand h1{ font-size:16px }
  /*.nav-center{ display:none }*/ /* прячем средние элементы на мобилке */
  .btn{ padding:10px 12px }
  .icon-btn{ width:36px; height:36px }
}

/* Кнопки — не вылезают за края при длинных строках */
.btn{ max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden }

/* Панель уведомлений (универсальная) — держим внутри экрана */
.noti-panel{
  right: max(8px, var(--safe-right));
  left: auto;
  width: min(420px, 94vw);
  top: calc(56px + var(--safe-top));
}

/* Старые блоки уведомлений — приводим к токенам + адаптируем ширину */
#notificationDiv{
  right: max(8px, var(--safe-right));
  left: auto;
  top: calc(56px + var(--safe-top));
  width: min(360px, 92vw);
  background: rgba(25,27,34,.9);
  border: 1px solid var(--stroke);
  border-radius: 12px;
}

/* Меню пользователя — цвета к токенам + не выезжает за правый край */
.userMenu{
  inset-inline-end: max(8px, var(--safe-right));
  left: auto;
  right: max(8px, var(--safe-right));
  width: min(320px, 88vw);
  background: rgba(25,27,34,.9);
  border: 1px solid var(--stroke);
  border-radius: 12px;
}
.userMenuOption{
  border-bottom:1px solid var(--stroke);
}
.userMenuOption:last-child{ border-bottom:0 }
.userMenuOptionText{ color:var(--hc-text) }
.userMenuOptionIcon{ filter:none; opacity:.95 }

/* Старый header-юзер блок (#menuUser …) — приводим цвета к токенам */
#menuUserNickname{ color:var(--hc-text) }
#pullMenuUser{ background-color:var(--hc-surface-2) }
#pullMenuUser a, .halnethref{ color:var(--hc-text) }
#pullMenuUserSection{ background-color:var(--hc-stroke) }

/* Выезжающее левое меню (apps-drawer) — учитываем safe-area и сужаем на узких экранах */
.apps-drawer{
  width: min(360px, 92vw);
  padding-top: calc(16px + var(--safe-top));
}

/* Карточки — немного компактнее на телефонах */
@media (max-width: 640px){
  .card{ padding:14px; border-radius: var(--radius) }
  .apps-list{ grid-template-columns:1fr }        /* одна колонка на очень узких */
}
@media (min-width: 480px) and (max-width: 768px){
  .apps-list{ grid-template-columns: repeat(2, 1fr) } /* две колонки на небольших */
}

/* Иконки/мелочи — увеличиваем область тапа */
.icon-btn, .userMenuOption, .apps-btn{ min-height:40px }

/* Изображения внутри кнопок/плиток не ломают высоту */
.app-tile img, .userMenuOptionIcon{
  max-width:100%; height:auto; object-fit:contain;
}

/* Ноти-точка — не уходит под скругления */
.noti-dot{ box-shadow:0 0 0 2px var(--bg) }

/* Фоновые слои — чутка мягче на маленьких экранах */
@media (max-width: 480px){
  #hcBackground{ filter:saturate(112%) }
}

/* Прочие подстраховки переполнений */
:where(h1,h2,h3,h4,h5,h6,button,a,span){ word-break:break-word }