.item{
            width: 100%;
        }
        .p-5 {
            padding: 1.6rem;
        }
        .menu{
            max-width: 160px;
            background: rgb(var(--bg-secondary-2), .8);
            backdrop-filter: blur(10px);
            box-shadow: none;
        }
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        textarea:-webkit-autofill,
        textarea:-webkit-autofill:hover,
        textarea:-webkit-autofill:focus,
        select:-webkit-autofill,
        select:-webkit-autofill:hover,
        select:-webkit-autofill:focus {
            color: inherit !important;
        }
.btn{
            padding: 8px 20px;
            font-size: 1rem;
            border-radius: 14px;
        }
        .place{
            width: 750px;
        }
        .btn::before{
            border-radius: 10px;
        }
        .menu-nav-icon{
            background: #000;
            width: 3rem;
            height: 3rem;
            border-radius: 16px;
            border: solid 0.2rem #333;
            color: #C4C4C4;
            font-size: 1.4rem;
            min-width: max-content;
            padding: 0px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .menu-nav-icon:hover{
            color: #fff;
        }
        .nav-3 {
            gap: 10px;
        }
        .bg-secondary-2{
            box-shadow: none;
        }
        .nav-sticky{
            z-index: 999;
        }
        .btn{
            color: #062E6F!important;
        }
        body{
            padding: 1.6rem 0px!important;
        }
        .content-view{
            height: auto;
        }
        .content-view {
            display: flex;
            flex-direction: column;
        }
        .content-place {
            flex: 1 0 auto;
            padding-bottom: 50px;
        }
        
        .abs-footer{
            position: fixed;
            bottom: 0;
        }
        .bottom-nav{
            position: fixed;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 300;
        }
        .nav__link{
            transition: all .3s;
            padding: 8px 14px;
            border-radius: 20px;
        }
        .nav__link:hover, .nav-link-active{
            text-decoration: underline;
        }
        .accordion__item:hover{
            background: rgba(var(--accent), .03);
        }
        .accordion__item__active{
            
            background: rgba(var(--accent), .08);
        }
        .accordion__item{
            transition: all .3s;
        }
        .active-nav{
            position: relative;
            background: transparent;
        }
        
        /* Нижний круг */
        .background-circle {
          position: fixed;
          bottom: -40%;
          /*transform: translateY(20%);*/
          left: 50%;
          transform: translateX(-50%);
          height: 30%;
          aspect-ratio: 1 / 1;
          background: radial-gradient(circle, #fff, #fff);
          border-radius: 50%;
          filter: blur(80px);
          z-index: 1;
          box-shadow:
            0 0 60px #ff6ec4aa,
            0 0 120px #7873f588;
            opacity: .2;
        }
        hrv{
            height: 1px;
            width: 100%;
            display: block;
            background: rgb(255, 255, 255);
            opacity: .03;
            margin: 14px 0px;
        }
        .item:hover{
            background: rgb(var(--accent));
        }
        .btn-secondary{
            border: none;
            background: rgba(255, 255, 255, .4);
        }
        
        [data-tooltip] {
    position: relative;
    cursor: pointer;
}

.tooltip-box {
    position: absolute;
    background: #0C1321;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease;
    z-index: 9999;
}

.tooltip-top    { bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-16px); }  /* увеличен отступ */
.tooltip-bottom { top: 100%; left: 50%; transform: translateX(-50%) translateY(16px); }   /* увеличен отступ */
.tooltip-left   { top: 50%; right: 100%; transform: translateY(-50%) translateX(-16px); }  /* увеличен отступ */
.tooltip-right  { top: 50%; left: 100%; transform: translateY(-50%) translateX(16px); }   /* увеличен отступ */

.tooltip-box.show {
    opacity: 1;
    visibility: visible;
}
        .fancybox__toolbar__items{
                position: fixed;
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%);
                background: rgb(4, 4, 4);
                border-radius: 1rem;
        }
        @media (min-width: 1024px) and (pointer: fine) {
            .content-place, footer {
                zoom: 1.25!important;
            }
            body{
                zoom: 0!important;
            }
        }
        .place{
            width: 800px;
        }
        ul{
            margin: 0;
        }
        
        :root {
            --body-color: 0,0,0;
            --color-1: 250, 250, 250;
            --accent: 101,144,230;
            --border: 254, 254, 254;
            --text-muted: #666;
            --text-success: #81C784;
            --text-danger: #E57373;
            --text-white: #fff;
            --bg-secondary: 16, 16, 16;
            --bg-secondary-2: 10,10,10;
            --link-color: 195, 219, 59;
        }
        
        [data-theme="colored"] {
            --body-color: 4,4,10;
            --color-1: 255,255,255;
            --border: 255, 255, 255;
            --text-muted: #A8A8A8;
            --text-success: #81C784;
            --text-danger: #E57373;
            --text-white: #fff;
            --accent: 0,131,244;
            --bg-secondary: 16,16,40;
            --bg-secondary-2: 8,8,20;
            --link-color: 195, 219, 59;

            .active-btn{
                background: rgb(var(--bg-secondary));
            }
            
            .top-bar{
                background: rgb(var(--bg-secondary-2));
            }
        }
        .bbcode{
            border: solid 1px rgba(255, 255, 255, .06);
            color: #fff;
            padding: 10px 20px;
        }
        .bbcode:hover{
            background: rgb(var(--accent));
        }
        input[type=checkbox] {
      appearance: none;
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 6px;
      background-color: rgb(var(--bg-secondary));
      transition: all 0.3s;
      cursor: pointer;
      margin: 0 0.5em 0 0;
    }
    

    input[type=checkbox]:checked {
      background-color: rgb(var(--accent));
      box-shadow: 0 0 0 0.3rem rgba(var(--accent), 0.2);
    }
    
    .top-bar a{
        color: rgb(var(--border), .8);
    }
    .top-bar a:hover{
        color: rgb(var(--accent));
    }
        
        hrv{
            background: rgb(var(--border), .07);
            opacity: 1;
        }
        .btn{
            user-select: none;
        }
        .btn:hover, .btn:focus{
            /*background: linear-gradient(140deg, #353535 5.47%, #1E1E1E 94.11%);*/
            transform: translateZ(10px);
        }
        .btn::before{
            opacity: 0;
        }
        .active-btn{
                height: 30px;
                width: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 20px;
                border-radius: 30%;
                background: linear-gradient(140deg, #353535 5.47%, #1E1E1E 94.11%);
        }
        
        .menu {
            position: absolute;
            display: none;
            border-radius: 16px;
            top: 50px;
            right: 0;
            backdrop-filter: blur(10px);
            background-color: rgba(20, 20, 30, 0.9);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            z-index: 400;
        }
        .ya-input{
            border: solid 1px rgba(255, 255, 255, .06);
            background: transparent!important;
            border-radius: 0;
        }
        .ya-input:focus{
            border-color: rgb(var(--accent));
        }
        .content-view{
            background: rgb(var(--body-color));
            height: 100vh!important;
            
        }
        .p-pill{
            padding: 6px 16px;
            border-radius: 14px;
        }
        .badge{
            color: #fff;
            font-size: 10px;
            background: rgb(var(--accent));
            padding: 2px 4px;
            border-radius: 8px;
        }
        .border{
            border: solid 1px rgb(var(--border), .07);
        }

        body{
            padding: 0!important;
        }
        .content-placeent-place{
            padding-top: ent-place{
            padding-top: 
        .icon-select option;
        }   font-family: 'wakuu';
        }
        .btn-primary{
            background: rgb(var(--accent));
            color: #fff!important;
        }
        .btn-primary:hover{
            opacity: .7;
            color: #fff!important;
        }
        .btn-cancel{
            color: rgba(var(--color-1), .7)!important;
            background: transparent;
            border: solid 2px rgba(var(--border), .07);
            transition: border .3s;
        }
        .btn-cancel:hover{
            color: #fff!important;
            border-color: #fff;
        }
        .btn-cancel-red:hover{
            color: var(--text-danger)!important;
            border-color: var(--text-danger);
        }
        .px-2 {
            padding: 0px 14px;
        }
        option{
            background: rgb(var(--bg-secondary))!important;
        }
        input:-webkit-autofill {
          -webkit-box-shadow: 0 0 0 1000px #101010 inset !important;
          -webkit-text-fill-color: #fff !important;
        }
        .nav__link{
            color: rgb(var(--color-1));
        }
        *:disabled{
            opacity: .4!important;
            pointer-events: none;
        }
        .top-bar{
            background: #000;
            z-index: 500;
            position: fixed;
            top: 0;
            left: 0;
            width: 95vw;
            height: 10vh;
            border-bottom: solid 1px rgba(255, 255, 255, .06);
            padding: 0px 0px 0px 40px;
        }
        .bottom-alert{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 1.4rem;
            background: rgb(200, 70, 70);
            z-index: 1002;
        }
        .nav-link-active{
            color: rgb(var(--accent));
            text-decoration: none;
        }
        .nav__link:hover{
            color: rgb(var(--accent), .6);
            text-decoration: none;
        }
        .second-menu {
          opacity: 0;
          transform: translateX(-20px);
          transition: opacity 0.3s ease-out, transform 0.3s ease-out;
        }
        
        .second-menu.animate-in {
          opacity: 1;
          transform: translateX(0);
        }
        
        .post-content{
            transition: background-color .3s;
        }
        .post-content:hover{
            background: rgb(var(--bg-secondary-2));
        }
        .rounded-circle{
            border: none;
            z-index: 1;
            position: relative;
        }
        .rounded-circle img{
            border-radius: 50%;
            border: solid 4px rgb(var(--body-color));
        }
        .rounded-circle::before {
            content: '';
            position: absolute;
            top: -1px; /* Компенсируем ширину бордюра */
            left: -1px;
            right: -1px;
            bottom: -1px;
            background: linear-gradient(60deg, #8e2de2, #4a00e0);
            border-radius: inherit;
            z-index: -1;
        }
        .link-active{
            color: rgb(var(--accent))!important;
            background: rgb(var(--accent), .1);
        }
        .logo{
            background: linear-gradient(60deg, #8e2de2, #4a00e0);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
        }
        .h-100{
            height: 100%;
        }
        .bg-gradient {
            background: linear-gradient(to right, rgb(var(--accent)) 60%, #628BDE);
            color: white!important;
        }
        .w-50{
            width: 50%!important;
        }
        .centered{
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, .7);
            z-index: 200;
            width: 100%;
            height: 100%;
        }
        #account{
            height: 10vh;
            padding: 0px 40px;
            display: flex;
            align-items: center;
            font-size: 22px;
            background: #5D8BE6;
            transition: opacity .3s;
        }
        #account:hover{
            opacity: .7;
        }
        .index-content{
            width: 95vw;
            border-right: solid 1px rgba(255, 255, 255, .06);
            margin-top: 10vh;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .slider-bg{
            position: fixed;
            left: 95vw;
            width: 5vw;
            height: 100%;
            background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 20px);
            z-index: 900;
        }
        .btn{
            border-radius: 0;
            border: solid 1px rgba(255, 255, 255, .06);
        }
        .btn-sidebar{
            padding: 16px 26px;
            display: flex;
            align-items: center;
            font-size: 22px;
            transition: background .3s;
            color: #fff;
            border: solid 1px rgba(255, 255, 255, .06);
            width: 90%;
        }
        .btn-sidebar:hover, .btn-active{
            background: rgb(var(--accent));
        }
        .btn-quit:hover {
            background: var(--text-danger);
        }
        #account{
            color: #fff;
        }
        .preloader{
            position: fixed;
            inset: 0;
            transition: opacity 0.6s ease;
            background: #000;
            z-index: 1337;
        }
        .preloader.loaded {
          opacity: 0;
        }
        .preloader img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) scale(1);
          animation: pulseScale 2s ease-in-out infinite;
        }
        @keyframes pulseScale {
          0%   { transform: translate(-50%, -50%) scale(1); }
          50%  { transform: translate(-50%, -50%) scale(1.08); }
          100% { transform: translate(-50%, -50%) scale(1); }
        }
        
        .error-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .error-wrap .code {
    font-size: 8rem;
    font-weight: 900;
    color: rgb(var(--accent));
    letter-spacing: 0.3em;
    margin: 0;
  }
  .error-wrap .message {
    margin: 1rem 0;
    font-size: 1.25rem;
    color: rgb(var(--text-muted));
  }
  .error-wrap .actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
  }
  .error-wrap .actions a {
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: 1rem;
    transition: transform 0.2s, opacity 0.2s;
    font-weight: 600;
  }
  .error-wrap .actions .btn {
    background: rgb(var(--accent));
    color: #fff!important;
  }
  .error-wrap .actions .btn-secondary {
    background: transparent;
    border: 2px solid rgb(var(--accent));
    color: rgb(var(--accent));
  }
  .error-wrap .actions a:hover {
    opacity: 0.8;
    transform: scale(0.95);
  }
  select.ya-input {
  background: linear-gradient(to right, rgba(var(--accent), 0.2), rgba(var(--accent), 0.1));
  color: rgb(var(--color-1));
  padding: 10px 16px;
  border: 1px solid rgba(var(--accent), 0.4);
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,<svg fill='white' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

select.ya-input:hover {
  background: linear-gradient(to right, rgba(var(--accent), 0.4), rgba(var(--accent), 0.2));
  box-shadow: 0 0 8px rgba(var(--accent), 0.2);
}

select.ya-input:focus {
  outline: none;
  border-color: rgba(var(--accent), 0.7);
  box-shadow: 0 0 10px rgba(var(--accent), 0.5);
}
.button {
  background: linear-gradient(145deg, rgba(var(--accent), 0.9), rgba(var(--accent), 0.6));
  color: rgb(var(--color-1));
  padding: 12px 26px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow:
    0 4px 12px rgba(var(--accent), 0.25),
    0 0 0 1px rgba(var(--accent), 0.4) inset;
  transition: all 0.25s ease;
  text-shadow: 0 0 4px rgba(var(--accent), 0.3);
}

.button:hover {
  background: linear-gradient(145deg, rgba(var(--accent), 1), rgba(var(--accent), 0.8));
  transform: translateY(-2px) scale(1.02);
}
.button:active {
  transform: scale(0.97);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(var(--accent), 0.4);
}

.second-menu{height: max-content; padding-bottom: 30px;}
        .accordion__item:hover, .accordion__item__active {background: rgb(var(--body-color));}
        .accordion__item {user-select: none;}
        .item:hover{background: rgb(var(--bg-secondary));}
        .btn-sidebar:hover{background: rgb(var(--bg-secondary)); color: #fff!important;}
        .bg-cancel{ background: rgb(240, 20, 20, .06);}
        .bg-cancel:hover{ color: #fff;}
        .p-5 {
            padding-top: 20px;
            padding-bottom: 20px;
        }
        
        
        
        
        
        
        
        
        .accent {color: rgb(var(--accent))!important;}
        .rounded-circle::before{
            background: transparent;
        }
        .n-body{
            padding: 0px 30px 0px;
            zoom: 1.5;
            min-height: 100%;
        }
        .n-footer{
            zoom: 1.5;
        }
        .n-content{
            padding-top: 40px;
        }
        @media (pointer:none), (pointer:coarse) {
            .n-body{
                padding: 0px 10px 0px;
                zoom: 1.1;
            }
            .n-footer{
                zoom: 1.1;
            }
            .n-content{
                padding-top: 60px;
            }
        }
        :root, [data-theme="colored"] {
            --body-color: 2,7,10;
            --color-1: 255, 255, 255;
            --border: 255, 255, 255;
            --text-muted: #40515C;
            --text-success: #81C784;
            --text-danger: #E57373;
            --text-white: #fff;
            --accent: 54,175,255;
            --bg-secondary: 9,29,42;
            --bg-secondary-2: 3,11,16;
            --link-color: 195, 219, 59;
        }
        .ya-input{
            border: solid 2px rgba(255, 255, 255, .06);
            border-left: solid 5px rgba(255, 255, 255, .06);
            border-radius: 8px;
            background: rgb(var(--bg-secondary))!important;
        }
        .btn-new{
            border-radius: 4px;
            background: rgb(var(--bg-secondary));
            color: #fff!important;
            border: solid 2px rgba(255, 255, 255, .06);
            border-left: solid 5px rgba(255, 255, 255, .06);
            text-transform: uppercase;
        }
        
        .btn-new:hover{
            border-color: rgb(var(--accent));
        }
        
        .btn-primary{
            border-radius: 6px;
            border: solid 2px rgba(255, 255, 255, .06);
            border-left: solid 5px rgb(var(--accent));
            text-transform: uppercase;
        }
        
        .btn-primary:hover{
            border-color: #fff;
        }
        
        .w-65{
            width: 65%;
        }
        .ya-input:focus, .post:hover {
            background: rgba(var(--bg-secondary), .4)!important; 
        }
        input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 1000px rgb(var(--bg-secondary-2)) inset !important;
            -webkit-text-fill-color: #fff !important;
        }
        .n-nav{
            padding-top: 60px;
        }
        
        .accent-sidebar {
          position: relative;   
          display: inline-block;
          padding-left: 16px; 
          line-height: 1; 
          color: rgb(var(--accent));    
        }
        
        /* рисуем «штрих» слева от слова */
        .accent-sidebar::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          width: 7px;
          height: 50%;
          background-color: rgb(var(--accent));  
          border-radius: 4px;
        }