html{
    scroll-behavior:auto !important
}

body{
    overflow-x: hidden;
}

#toast-container>div{
    box-shadow: none;
}

div.g-recaptcha{
   width: auto !important;
   height: auto !important;
   text-align: -webkit-center;
   text-align: -moz-center;
   text-align: -o-center;
   text-align: -ms-center;
}

.logo-image img{
    max-width: 100px;
}

.zindex-1{
    z-index: 1;
}

.search-box {
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  display: none;
  z-index: 10;
}

.search-box input[type="text"] {
  width: 100%;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

header.navbar.sticky-top,
.z-index-sticky{
    z-index: 1030;
}

.parallax-image .container{
    position: relative;
    z-index: 1;
}

.lazyload,
.lazyloading {
  opacity: 0;
}

.lazyloaded {
    opacity: 1;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

div.g-recaptcha{
   width: auto !important;
   height: auto !important;
   text-align: -webkit-center;
   text-align: -moz-center;
   text-align: -o-center;
   text-align: -ms-center;
}

.mask{
    position: absolute;
    background-position: 50%;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: .8;
    z-index: 1;
}

.plugin-name{
    right: 15px;
    bottom: 10px;
    padding: 8px 15px;
    color: white;
    background: rgba(30,30,30,0.9);
    text-shadow: 0 1px 3px rgb(0 0 0 / 40%);
    box-shadow: 0 0 30px rgb(255 255 255 / 10%);
}

.result del {
    text-decoration: none;
    color: #b30000;
    background: #fadad7;
}

.result ins {
    background: #eaf2c2;
    color: #406619;
    text-decoration: none;
}

#gmap{
    width: 100%;
    height: 280px;
}
 
hr.horizontal.dark {
    background-image: linear-gradient(-90deg,transparent,rgba(0,0,0,.4),transparent);
}

hr.horizontal {
    background-color: transparent;
}

.icon-xl{
    width: 100px;
    height: 100px;
}

.maintenance-page h2{
    font-size: 2rem;
    font-weight: 600;
}

.maintenance-page .btn-warning {
    background-image: linear-gradient(-310deg,#f53939,#fbcf33);
}

.fab.icon,
.fas.icon,
.far.icon,
.fa.icon{
    font-size: inherit;
    height: auto;
    margin: 0 -.25rem 0 .25rem;
}

.sidenav{
    z-index: 10;
}

.btn-close{
    color: #444;
}

.btn-close:hover {
    color: inherit;
}

.rounded-top-0{
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.rounded-bottom-0{
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important; 
}

.error{
    color: #ea0606;
}

.form-label, label {
    font-size: 14px;
}

.h1, h1{
    font-size: 2.5rem;
}

.h-0{
    height: 0 !important;
}

.wh-110px {
    height: 110px !important;
    width: 110px !important;
}

#download-box .table td, 
#download-box .table th{
    white-space: inherit;
}

#download-box .nav.nav-pills .nav-link.active
{
    background-image: linear-gradient(-310deg,#f53939,#fbcf33);
    color: white !important;
}

.border-transparent{
    border: transparent !important;
}

#sidenav-collapse-main{
    overflow-x: hidden !important;
}

table.settings > tbody > tr > td{
    padding: 15px 10px !important;
}

.theme-dark .input-group-flat .input-group-text:last-child {
    padding-right: 0.75rem;
}

.theme-dark .form-control::-webkit-file-upload-button {
    background-color: #1e293b !important;
}

.theme-dark .card-body+.card-body {
    border-top: 0;
}

.theme-dark .card{
    border-color: rgba(101,109,119,.16);
}

.lang-menu .dropdown-menu{
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

.lang-image{
    width: 16px;
    height: auto;
}

.sidebars .sticky-top{
    top: 15px;
}

.sidebar-icon{
    color: #3a416f !important;
    font-size: 12px !important;
    opacity: 1 !important;
    top: 0 !important;
}

.nav-link.active .sidebar-icon{
    color: #fff !important;
}


.navbar-vertical .navbar-nav .nav-link[data-bs-toggle=collapse]:after {
    font-family: 'font awesome 5 free';
    font-weight: 700;
    font-style: normal;
    font-variant: normal;
    display: inline-block;
    margin-right: auto;
    content: '\f105';
    transition: all .15s ease;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    color: #ced4da;
}

.navbar-vertical.navbar-expand-xs .navbar-nav .nav-item {
    width: auto
}

@media(prefers-reduced-motion:reduce) {
    .navbar-vertical .navbar-nav .nav-link[data-bs-toggle=collapse]:after {
        transition: none
    }
}

.navbar-vertical .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:after {
    transform: rotate(-90deg);
    color: rgba(35,46,60,.7);
}

.navbar-vertical .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

#indexing .nav-link,
#tools .nav-link,
#pages .nav-link,
#theme-settings .nav-link{
    padding-right: 3.25rem !important;
} 

#indexing .nav-link:focus, 
#indexing .nav-link:hover,
#tools .nav-link:focus, 
#tools .nav-link:hover,
#pages .nav-link:focus, 
#pages .nav-link:hover,
#theme-settings .nav-link:focus, 
#theme-settings .nav-link:hover {
    color: inherit;
    text-decoration: none;
    background-color: rgba(101,109,119,.06);
}

#indexing .nav-link.active, 
#indexing .nav-link:active,
#tools .nav-link.active, 
#tools .nav-link:active,
#pages .nav-link.active, 
#pages .nav-link:active,
#theme-settings .nav-link.active, 
#theme-settings .nav-link:active {
    color: #206bc4;
    text-decoration: none;
    background-color: rgba(32,107,196,.06);
}

div.screenshot{
    position: relative;
}

.overlay-preview {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.parallax-image{
    background-position: 50% 50%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100%;
}

span#heart i{
    color: rgb(242, 48, 48);
    display: inline-block;
    vertical-align: middle;
    margin: 0px 4px;
}

@media (prefers-reduced-motion: no-preference){
    span#heart i {
        animation: 2s ease 0s infinite normal none running heart;
    }
}

@-webkit-keyframes heart {
    1% {
        -webkit-transform: scale(1.25);
        -ms-transform: scale(1.25);
        transform: scale(1.25);
    }
    10% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
    15% {
        -webkit-transform: scale(1.25);
        -ms-transform: scale(1.25);
        transform: scale(1.25);
    }
    18% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes heart {
    1% {
        -webkit-transform: scale(1.25);
        -ms-transform: scale(1.25);
        transform: scale(1.25);
    }
    10% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
    15% {
        -webkit-transform: scale(1.25);
        -ms-transform: scale(1.25);
        transform: scale(1.25);
    }
    18% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

#content-box img:not(.img-fluid):not(.blur-shadow-image img):not(.cropper-container img) {
    border-radius: .75rem;
    max-width: 100%;
    height: auto;
    box-shadow: 0 .25rem .375rem -.0625rem hsla(0,0%,8%,.12),0 .125rem .25rem -.0625rem hsla(0,0%,8%,.07);
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.is-divider {
    height: 3px;
    display: block;
    background-color: rgba(0,0,0,0.1);
    margin: 1em 0 1em;
    width: 100%;
    max-width: 30px;
    margin-right: auto;
    margin-left: auto;
}

.hr {
    border-color: #e9ecef;
}

.text-nowrap{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.text-justify {
    text-align: justify!important;
}

.btn-group-sm>.btn i, .btn.btn-sm i {
    font-size: inherit;
}

.dd-handle{
    border: 1px solid rgba(98,105,118,.16) !important;
    box-shadow: none !important;
}

.dd-handle span i{
    font-size: inherit;
}

@media (max-width: 991.98px){
    .dropdown.nav-item .dropdown-menu-animation.show {
        height: auto !important;
        overflow: hidden !important;
    }
}

/**
 * -------------------------------------------------------------------------------
 *  Back to top
 * -------------------------------------------------------------------------------
**/

#backtotop { 
    bottom: 0; 
    display: none; 
    margin: 0 0 20px 20px; 
    position: fixed; 
    left: 0; 
    z-index: 2; 
} 
#backtotop a { 
    background: url("../img/arrow.png") no-repeat scroll 50% 50% rgba(0, 0, 0, 0.5); 
    border: 0 none; 
    display: block; 
    height: 40px; 
    text-decoration: none; 
    transition: all 0.1s ease-in-out 0s; 
    width: 40px; 
    border-radius: 5px;
} 
#backtotop a:hover { 
    -webkit-box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.5); 
    box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.5); 
    background-color: rgba(0, 0, 0, 0.6);
}

/**
 * -------------------------------------------------------------------------------
 *  Pace
 * -------------------------------------------------------------------------------
**/

.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.pace-inactive {
    display: none;
}

.pace .pace-progress {
    background-image: linear-gradient(-310deg,#ED3269,#F05F3E);
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 100%;
    width: 100%;
    height: 2px;
}

.pace .pace-progress-inner {
    display: block;
    position: absolute;
    left: 0px;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px #cb0c9f, 0 0 5px #cb0c9f;
    opacity: 1.0;
    -webkit-transform: rotate(-3deg) translate(0px, -4px);
    -moz-transform: rotate(-3deg) translate(0px, -4px);
    -ms-transform: rotate(-3deg) translate(0px, -4px);
    -o-transform: rotate(-3deg) translate(0px, -4px);
    transform: rotate(-3deg) translate(0px, -4px);
}

.pace .pace-activity {
    display: block;
    position: fixed;
    z-index: 2000;
    top: 15px;
    left: 15px;
    width: 14px;
    height: 14px;
    border: solid 2px transparent;
    border-top-color: #cb0c9f;
    border-right-color: #cb0c9f;
    border-radius: 10px;
    -webkit-animation: pace-spinner 400ms linear infinite;
    -moz-animation: pace-spinner 400ms linear infinite;
    -ms-animation: pace-spinner 400ms linear infinite;
    -o-animation: pace-spinner 400ms linear infinite;
    animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}
@-moz-keyframes pace-spinner {
    0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -moz-transform: rotate(-360deg); transform: rotate(-360deg); }
}
@-o-keyframes pace-spinner {
    0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -o-transform: rotate(-360deg); transform: rotate(-360deg); }
}
@-ms-keyframes pace-spinner {
    0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -ms-transform: rotate(-360deg); transform: rotate(-360deg); }
}
@keyframes pace-spinner {
    0% { transform: rotate(0deg); transform: rotate(0deg); }
    100% { transform: rotate(-360deg); transform: rotate(-360deg); }
}

/**
 * -------------------------------------------------------------------------------
 *  Social
 * -------------------------------------------------------------------------------
**/

.btn.btn-facebook.btn-simple,
.btn.btn-twitter.btn-simple,
.btn.btn-youtube.btn-simple,
.btn.btn-linkedin.btn-simple,
.btn.btn-skype.btn-simple,
.btn.btn-github.btn-simple,
.btn.btn-behance.btn-simple,
.btn.btn-dribbble.btn-simple,
.btn.btn-flickr.btn-simple,
.btn.btn-pinterest.btn-simple,
.btn.btn-tumblr.btn-simple,
.btn.btn-vimeo.btn-simple,
.btn.btn-vk.btn-simple,
.btn.btn-telegram.btn-simple,
.btn.btn-reddit.btn-simple,
.btn.btn-instagram.btn-simple,
.btn.btn-whatsapp.btn-simple {
    background-color: transparent;
    background-image: none!important;
    box-shadow: none;
    border: none;
}

.btn.btn-facebook.btn-simple {
    color: #3b5998;
}

.btn.btn-twitter.btn-simple {
    color: #55acee;
}

.btn.btn-youtube.btn-simple {
    color: #ff0000;
}

.btn.btn-linkedin.btn-simple {
    color: #0a66c2;
}

.btn.btn-skype.btn-simple {
    color: #00aff0;
}

.btn.btn-github.btn-simple {
    color: #24292e;
}

.theme-dark .btn.btn-github.btn-simple{
    color: #f4f6fa;
}

.btn.btn-behance.btn-simple {
    color: #0057ff;
}

.btn.btn-dribbble.btn-simple {
    color: #c32361;
}

.btn.btn-flickr.btn-simple {
    color: #f40083;
}

.btn.btn-pinterest.btn-simple {
    color: #bd081c;
}

.btn.btn-tumblr.btn-simple {
    color: #2c4762;
}

.btn.btn-vimeo.btn-simple {
    color: #1ab7ea;
}

.btn.btn-vk.btn-simple {
    color: #4a76a8;
}

.btn.btn-telegram.btn-simple {
    color: #0088cc;
}

.btn.btn-reddit.btn-simple {
    color: #ff5700;
}

.btn.btn-whatsapp.btn-simple {
    color: #25d366;
}

.btn.btn-instagram.btn-simple {
    color: #7C39AE;
}

.share-icons .btn.btn-facebook.btn-simple,
.share-icons .btn.btn-twitter.btn-simple,
.share-icons .btn.btn-youtube.btn-simple,
.share-icons .btn.btn-linkedin.btn-simple,
.share-icons .btn.btn-skype.btn-simple,
.share-icons .btn.btn-github.btn-simple,
.share-icons .btn.btn-behance.btn-simple,
.share-icons .btn.btn-dribbble.btn-simple,
.share-icons .btn.btn-flickr.btn-simple,
.share-icons .btn.btn-pinterest.btn-simple,
.share-icons .btn.btn-tumblr.btn-simple,
.share-icons .btn.btn-vimeo.btn-simple,
.share-icons .btn.btn-vk.btn-simple,
.share-icons .btn.btn-telegram.btn-simple,
.share-icons .btn.btn-reddit.btn-simple,
.share-icons .btn.btn-instagram.btn-simple,
.share-icons .btn.btn-whatsapp.btn-simple {
    color: white !important;
    font-size: .75rem;
}

.share-icons-sm .btn.btn-facebook.btn-simple,
.share-icons-sm .btn.btn-twitter.btn-simple,
.share-icons-sm .btn.btn-youtube.btn-simple,
.share-icons-sm .btn.btn-linkedin.btn-simple,
.share-icons-sm .btn.btn-skype.btn-simple,
.share-icons-sm .btn.btn-github.btn-simple,
.share-icons-sm .btn.btn-behance.btn-simple,
.share-icons-sm .btn.btn-dribbble.btn-simple,
.share-icons-sm .btn.btn-flickr.btn-simple,
.share-icons-sm .btn.btn-pinterest.btn-simple,
.share-icons-sm .btn.btn-tumblr.btn-simple,
.share-icons-sm .btn.btn-vimeo.btn-simple,
.share-icons-sm .btn.btn-vk.btn-simple,
.share-icons-sm .btn.btn-telegram.btn-simple,
.share-icons-sm .btn.btn-reddit.btn-simple,
.share-icons-sm .btn.btn-instagram.btn-simple,
.share-icons-sm .btn.btn-whatsapp.btn-simple {
    color: white !important;
    font-size: .5rem;
}

.share-icons-sm i,
.share-icons i{
    margin-right: .12em;
    margin-left: .12em;
    min-width: 2.5em;
    display: inline-block;
}

.social-shadow{
    box-shadow: inset 0 -4px 0 rgb(0 0 0 / 25%) !important;
    -webkit-box-shadow: inset 0 -4px 0 rgb(0 0 0 / 25%) !important;
}

.share-icons-sm .btn.btn-facebook.btn-simple:hover,
.share-icons-sm .btn.btn-facebook.btn-simple:focus,
.share-icons-sm .btn.btn-facebook.btn-simple:visited,
.share-icons-sm .btn.btn-facebook.btn-simple:active,
.share-icons-sm .btn.btn-facebook.btn-simple,
.share-icons .btn.btn-facebook.btn-simple:hover,
.share-icons .btn.btn-facebook.btn-simple:focus,
.share-icons .btn.btn-facebook.btn-simple:visited,
.share-icons .btn.btn-facebook.btn-simple:active,
.share-icons .btn.btn-facebook.btn-simple {
    background: #3b5998 !important;
}

.share-icons-sm .btn.btn-twitter.btn-simple:hover,
.share-icons-sm .btn.btn-twitter.btn-simple:focus,
.share-icons-sm .btn.btn-twitter.btn-simple:visited,
.share-icons-sm .btn.btn-twitter.btn-simple:active,
.share-icons-sm .btn.btn-twitter.btn-simple,
.share-icons .btn.btn-twitter.btn-simple:hover,
.share-icons .btn.btn-twitter.btn-simple:focus,
.share-icons .btn.btn-twitter.btn-simple:visited,
.share-icons .btn.btn-twitter.btn-simple:active,
.share-icons .btn.btn-twitter.btn-simple {
    background: #55acee !important;
}

.share-icons-sm .btn.btn-youtube.btn-simple:hover,
.share-icons-sm .btn.btn-youtube.btn-simple:focus,
.share-icons-sm .btn.btn-youtube.btn-simple:visited,
.share-icons-sm .btn.btn-youtube.btn-simple:active,
.share-icons-sm .btn.btn-youtube.btn-simple,
.share-icons .btn.btn-youtube.btn-simple:hover,
.share-icons .btn.btn-youtube.btn-simple:focus,
.share-icons .btn.btn-youtube.btn-simple:visited,
.share-icons .btn.btn-youtube.btn-simple:active,
.share-icons .btn.btn-youtube.btn-simple {
    background: #ff0000 !important;
}

.share-icons-sm .btn.btn-linkedin.btn-simple:hover,
.share-icons-sm .btn.btn-linkedin.btn-simple:focus,
.share-icons-sm .btn.btn-linkedin.btn-simple:visited,
.share-icons-sm .btn.btn-linkedin.btn-simple:active,
.share-icons-sm .btn.btn-linkedin.btn-simple,
.share-icons .btn.btn-linkedin.btn-simple:hover,
.share-icons .btn.btn-linkedin.btn-simple:focus,
.share-icons .btn.btn-linkedin.btn-simple:visited,
.share-icons .btn.btn-linkedin.btn-simple:active,
.share-icons .btn.btn-linkedin.btn-simple {
    background: #0a66c2 !important;
}

.share-icons-sm .btn.btn-skype.btn-simple:hover,
.share-icons-sm .btn.btn-skype.btn-simple:focus,
.share-icons-sm .btn.btn-skype.btn-simple:visited,
.share-icons-sm .btn.btn-skype.btn-simple:active,
.share-icons-sm .btn.btn-skype.btn-simple,
.share-icons .btn.btn-skype.btn-simple:hover,
.share-icons .btn.btn-skype.btn-simple:focus,
.share-icons .btn.btn-skype.btn-simple:visited,
.share-icons .btn.btn-skype.btn-simple:active,
.share-icons .btn.btn-skype.btn-simple {
    background: #00aff0 !important;
}

.share-icons-sm .btn.btn-github.btn-simple:hover,
.share-icons-sm .btn.btn-github.btn-simple:focus,
.share-icons-sm .btn.btn-github.btn-simple:visited,
.share-icons-sm .btn.btn-github.btn-simple:active,
.share-icons-sm .btn.btn-github.btn-simple,
.share-icons .btn.btn-github.btn-simple:hover,
.share-icons .btn.btn-github.btn-simple:focus,
.share-icons .btn.btn-github.btn-simple:visited,
.share-icons .btn.btn-github.btn-simple:active,
.share-icons .btn.btn-github.btn-simple {
    background: #24292e !important;
}

.share-icons-sm .btn.btn-behance.btn-simple:hover,
.share-icons-sm .btn.btn-behance.btn-simple:focus,
.share-icons-sm .btn.btn-behance.btn-simple:visited,
.share-icons-sm .btn.btn-behance.btn-simple:active,
.share-icons-sm .btn.btn-behance.btn-simple,
.share-icons .btn.btn-behance.btn-simple:hover,
.share-icons .btn.btn-behance.btn-simple:focus,
.share-icons .btn.btn-behance.btn-simple:visited,
.share-icons .btn.btn-behance.btn-simple:active,
.share-icons .btn.btn-behance.btn-simple {
    background: #0057ff !important;
}

.share-icons-sm .btn.btn-dribbble.btn-simple:hover,
.share-icons-sm .btn.btn-dribbble.btn-simple:focus,
.share-icons-sm .btn.btn-dribbble.btn-simple:visited,
.share-icons-sm .btn.btn-dribbble.btn-simple:active,
.share-icons-sm .btn.btn-dribbble.btn-simple,
.share-icons .btn.btn-dribbble.btn-simple:hover,
.share-icons .btn.btn-dribbble.btn-simple:focus,
.share-icons .btn.btn-dribbble.btn-simple:visited,
.share-icons .btn.btn-dribbble.btn-simple:active,
.share-icons .btn.btn-dribbble.btn-simple {
    background: #c32361 !important;
}

.share-icons-sm .btn.btn-flickr.btn-simple:hover,
.share-icons-sm .btn.btn-flickr.btn-simple:focus,
.share-icons-sm .btn.btn-flickr.btn-simple:visited,
.share-icons-sm .btn.btn-flickr.btn-simple:active,
.share-icons-sm .btn.btn-flickr.btn-simple,
.share-icons .btn.btn-flickr.btn-simple:hover,
.share-icons .btn.btn-flickr.btn-simple:focus,
.share-icons .btn.btn-flickr.btn-simple:visited,
.share-icons .btn.btn-flickr.btn-simple:active,
.share-icons .btn.btn-flickr.btn-simple {
    background: #f40083 !important;
}

.share-icons-sm .btn.btn-pinterest.btn-simple:hover,
.share-icons-sm .btn.btn-pinterest.btn-simple:focus,
.share-icons-sm .btn.btn-pinterest.btn-simple:visited,
.share-icons-sm .btn.btn-pinterest.btn-simple:active,
.share-icons-sm .btn.btn-pinterest.btn-simple,
.share-icons .btn.btn-pinterest.btn-simple:hover,
.share-icons .btn.btn-pinterest.btn-simple:focus,
.share-icons .btn.btn-pinterest.btn-simple:visited,
.share-icons .btn.btn-pinterest.btn-simple:active,
.share-icons .btn.btn-pinterest.btn-simple {
    background: #bd081c !important;
}

.share-icons-sm .btn.btn-tumblr.btn-simple:hover,
.share-icons-sm .btn.btn-tumblr.btn-simple:focus,
.share-icons-sm .btn.btn-tumblr.btn-simple:visited,
.share-icons-sm .btn.btn-tumblr.btn-simple:active,
.share-icons-sm .btn.btn-tumblr.btn-simple,
.share-icons .btn.btn-tumblr.btn-simple:hover,
.share-icons .btn.btn-tumblr.btn-simple:focus,
.share-icons .btn.btn-tumblr.btn-simple:visited,
.share-icons .btn.btn-tumblr.btn-simple:active,
.share-icons .btn.btn-tumblr.btn-simple {
    background: #2c4762 !important;
}

.share-icons-sm .btn.btn-vimeo.btn-simple:hover,
.share-icons-sm .btn.btn-vimeo.btn-simple:focus,
.share-icons-sm .btn.btn-vimeo.btn-simple:visited,
.share-icons-sm .btn.btn-vimeo.btn-simple:active,
.share-icons-sm .btn.btn-vimeo.btn-simple,
.share-icons .btn.btn-vimeo.btn-simple:hover,
.share-icons .btn.btn-vimeo.btn-simple:focus,
.share-icons .btn.btn-vimeo.btn-simple:visited,
.share-icons .btn.btn-vimeo.btn-simple:active,
.share-icons .btn.btn-vimeo.btn-simple {
    background: #1ab7ea !important;
}

.share-icons-sm .btn.btn-vk.btn-simple:hover,
.share-icons-sm .btn.btn-vk.btn-simple:focus,
.share-icons-sm .btn.btn-vk.btn-simple:visited,
.share-icons-sm .btn.btn-vk.btn-simple:active,
.share-icons-sm .btn.btn-vk.btn-simple,
.share-icons .btn.btn-vk.btn-simple:hover,
.share-icons .btn.btn-vk.btn-simple:focus,
.share-icons .btn.btn-vk.btn-simple:visited,
.share-icons .btn.btn-vk.btn-simple:active,
.share-icons .btn.btn-vk.btn-simple {
    background: #4a76a8 !important;
}

.share-icons-sm .btn.btn-telegram.btn-simple:hover,
.share-icons-sm .btn.btn-telegram.btn-simple:focus,
.share-icons-sm .btn.btn-telegram.btn-simple:visited,
.share-icons-sm .btn.btn-telegram.btn-simple:active,
.share-icons-sm .btn.btn-telegram.btn-simple,
.share-icons .btn.btn-telegram.btn-simple:hover,
.share-icons .btn.btn-telegram.btn-simple:focus,
.share-icons .btn.btn-telegram.btn-simple:visited,
.share-icons .btn.btn-telegram.btn-simple:active,
.share-icons .btn.btn-telegram.btn-simple {
    background: #0088cc !important;
}

.share-icons-sm .btn.btn-reddit.btn-simple:hover,
.share-icons-sm .btn.btn-reddit.btn-simple:focus,
.share-icons-sm .btn.btn-reddit.btn-simple:visited,
.share-icons-sm .btn.btn-reddit.btn-simple:active,
.share-icons-sm .btn.btn-reddit.btn-simple,
.share-icons .btn.btn-reddit.btn-simple:hover,
.share-icons .btn.btn-reddit.btn-simple:focus,
.share-icons .btn.btn-reddit.btn-simple:visited,
.share-icons .btn.btn-reddit.btn-simple:active,
.share-icons .btn.btn-reddit.btn-simple {
    background: #ff5700 !important;
}

.share-icons-sm .btn.btn-whatsapp.btn-simple:hover,
.share-icons-sm .btn.btn-whatsapp.btn-simple:focus,
.share-icons-sm .btn.btn-whatsapp.btn-simple:visited,
.share-icons-sm .btn.btn-whatsapp.btn-simple:active,
.share-icons-sm .btn.btn-whatsapp.btn-simple,
.share-icons .btn.btn-whatsapp.btn-simple:hover,
.share-icons .btn.btn-whatsapp.btn-simple:focus,
.share-icons .btn.btn-whatsapp.btn-simple:visited,
.share-icons .btn.btn-whatsapp.btn-simple:active,
.share-icons .btn.btn-whatsapp.btn-simple {
    background: #25d366 !important;
}

.share-icons-sm .btn.btn-instagram.btn-simple:hover,
.share-icons-sm .btn.btn-instagram.btn-simple:focus,
.share-icons-sm .btn.btn-instagram.btn-simple:visited,
.share-icons-sm .btn.btn-instagram.btn-simple:active,
.share-icons-sm .btn.btn-instagram.btn-simple,
.share-icons .btn.btn-instagram.btn-simple:hover,
.share-icons .btn.btn-instagram.btn-simple:focus,
.share-icons .btn.btn-instagram.btn-simple:visited,
.share-icons .btn.btn-instagram.btn-simple:active,
.share-icons .btn.btn-instagram.btn-simple {
    background: #f09433 !important; 
    background: -moz-linear-gradient(-45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; 
    background: -webkit-linear-gradient(-45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) !important;  
    background: linear-gradient(-45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) !important; 
}

/**
 * -------------------------------------------------------------------------------
 *  Loading
 * -------------------------------------------------------------------------------
**/

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
}
.lds-ellipsis div {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  right: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  right: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  right: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  right: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-24px, 0);
  }
}

/**
 * -------------------------------------------------------------------------------
 *  swal2
 * -------------------------------------------------------------------------------
**/

.swal2-confirm.btn.btn-success {
    margin-right: 10px;
    margin-left: 10px;
}

.swal2-html-container{
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.4285714;
}
/**
 * -------------------------------------------------------------------------------
 *  Choices
 * -------------------------------------------------------------------------------
**/

.choices {
    position: relative;
    margin-bottom: 24px;
    font-size: 16px
}

.choices:focus {
    outline: none
}

.choices:last-child {
    margin-bottom: 0
}

.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input {
    background-color: #eaeaea;
    cursor: not-allowed;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.choices.is-disabled .choices__item {
    cursor: not-allowed
}

.choices [hidden] {
    display: none!important
}

.choices[data-type*=select-one] {
    cursor: pointer
}

.choices[data-type*=select-one] .choices__inner {
    padding-bottom: 7.5px
}

.choices[data-type*=select-one] .choices__input {
    display: block;
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    margin: 0
}

.choices[data-type*=select-one] .choices__button {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
    padding: 0;
    background-size: 8px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -10px;
    margin-left: 25px;
    height: 20px;
    width: 20px;
    border-radius: 10em;
    opacity: .5
}

.choices[data-type*=select-one] .choices__button:focus,.choices[data-type*=select-one] .choices__button:hover {
    opacity: 1
}

.choices[data-type*=select-one] .choices__button:focus {
    box-shadow: 0 0 0 2px #00bcd4
}

.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
    display: none
}

.choices[data-type*=select-one]:after {
    content: "\f107";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 13.5px;
    top: 9px;
    pointer-events: none;
    transition: .3s ease
}

.choices[data-type*=select-one].is-open:after {
    transform: rotate(-180deg)
}

.choices[data-type*=select-one][dir=rtl]:after {
    right: 11.5px;
    left: auto
}

.choices[data-type*=select-one][dir=rtl] .choices__button {
    left: auto;
    right: 0;
    margin-right: 25px;
    margin-left: 0
}

.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner {
    cursor: text
}

.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button {
    position: relative;
    display: inline-block;
    margin: 0 8px 0 -6px;
    padding-right: 17px;
    border-right: 1px solid hsla(0,0%,100%,.3);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
    background-size: 8px;
    width: 8px;
    line-height: 1;
    opacity: .75;
    border-radius: 0;
    transition: all .2s ease-in-out
}

.choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=text] .choices__button:focus,.choices[data-type*=text] .choices__button:hover {
    opacity: 1
}

.choices__inner {
    display: flex;
    align-items: center;
    vertical-align: top;
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid #d2d6da;
    border-radius: .5rem;
    font-size: 14px;
    min-height: 40px;
    overflow: hidden
}

.is-open .choices__inner {
    border-radius: 2.5px 2.5px 0 0
}

.is-flipped.is-open .choices__inner {
    border-radius: 0 0 2.5px 2.5px
}

.choices__list {
    margin: 0;
    padding-right: 0;
    list-style: none
}

.choices__list--single {
    display: inline-block;
    width: 100%
}

[dir=rtl] .choices__list--single {
    padding-left: 4px;
    padding-right: 16px
}

.choices__list--single .choices__item {
    width: 100%
}

.choices__list--multiple {
    display: inline
}

.choices__list--multiple .choices__item {
    display: inline-block;
    vertical-align: middle;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 3.75px;
    margin-bottom: 3.75px;
    background-color: #3a416f;
    border: 1px solid #3a416f;
    color: #fff;
    word-break: break-all;
    box-sizing: border-box
}

.choices__list--multiple .choices__item[data-deletable] {
    padding-left: 5px
}

[dir=rtl] .choices__list--multiple .choices__item {
    margin-left: 0;
    margin-right: 3.75px
}

.choices__list--multiple .choices__item.is-highlighted {
    background-color: #00a5bb;
    border: 1px solid #008fa1
}

.is-disabled .choices__list--multiple .choices__item {
    background-color: #aaa;
    border: 1px solid #919191
}

.choices__list--dropdown {
    visibility: hidden;
    z-index: 1;
    position: absolute;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ddd;
    top: 100%;
    margin-top: -1px;
    border-bottom-right-radius: 2.5px;
    border-bottom-left-radius: 2.5px;
    word-break: break-all;
    will-change: visibility
}

.choices__list--dropdown.is-active {
    visibility: visible
}

.is-open .choices__list--dropdown {
    border-color: #b7b7b7
}

.is-flipped .choices__list--dropdown {
    top: auto;
    bottom: 200%;
    margin-top: 0;
    margin-bottom: -1px;
    border-radius: .5rem
}

.choices__list--dropdown .choices__list {
    position: relative;
    max-height: 300px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position
}

.choices__list--dropdown .choices__item {
    position: relative;
    padding: .3rem 1rem;
    font-size: .875rem;
    border-radius: .5rem;
    transition: background-color .3s ease,color .3s ease
}

[dir=rtl] .choices__list--dropdown .choices__item {
    text-align: left
}

@media (min-width: 640px) {
    .choices__list--dropdown .choices__item--selectable {
        padding-left:100px
    }

    .choices__list--dropdown .choices__item--selectable:after {
        content: attr(data-select-text);
        font-size: 12px;
        opacity: 0;
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        transition: opacity .3s ease
    }

    [dir=rtl] .choices__list--dropdown .choices__item--selectable {
        text-align: left;
        padding-right: 100px;
        padding-left: 10px
    }

    [dir=rtl] .choices__list--dropdown .choices__item--selectable:after {
        left: auto;
        right: 10px
    }
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #f2f2f2
}

.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
    opacity: .5
}

.choices__item {
    cursor: default
}

.choices__item--selectable {
    cursor: pointer
}

.choices__item--disabled {
    cursor: not-allowed;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: .5
}

.choices__heading {
    font-weight: 600;
    font-size: 12px;
    padding: 10px;
    border-bottom: 1px solid #f7f7f7;
    color: gray
}

.choices__button {
    text-indent: -9999px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer
}

.choices__button:focus {
    outline: none
}

.choices__input {
    display: inline-block;
    vertical-align: baseline;
    background-color: #fff;
    font-size: 14px;
    margin-bottom: 5px;
    border: 0;
    border-radius: 0;
    max-width: 100%;
    padding: 4px 2px 4px 0
}

.choices__input:focus {
    outline: 0
}

[dir=rtl] .choices__input {
    padding-left: 2px;
    padding-right: 0
}

.choices__placeholder {
    opacity: .5
}

.is-open .choices__inner {
    border-radius: .5rem
}

.choices__list--dropdown {
    display: block;
    opacity: 0;
    top: 19px;
    transform-origin: 50% 0;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform,box-shadow;
    border: none;
    border-radius: .5rem;
    box-shadow: 0 8px 26px -4px hsla(0,0%,8%,.15),0 8px 9px -5px hsla(0,0%,8%,.06);
    transform: perspective(999px) rotateX(-10deg) translateZ(0) translate3d(0,37px,0)!important;
    padding: 1rem .5rem;
    transition: visibility .25s,opacity .25s,transform .25s
}

.choices__list--dropdown.is-active {
    transform: perspective(999px) rotateX(0deg) translateZ(0) translate3d(0,37px,5px)!important;
    opacity: 1;
    display: block;
    pointer-events: auto
}

.choices__list--dropdown.is-active:before {
    top: -20px
}

.choices__list--dropdown:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f0d8";
    position: absolute;
    top: 0;
    right: 28px;
    left: auto;
    font-size: 22px;
    color: #fff;
    transition: top .35s ease;
}

.choices[data-type*=select-one] .choices__input {
   border: 1px dashed #ddd;
   border-radius: .5rem;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: #e9ecef;
    color: #252f40
}

.is-focused .choices__inner,.is-open .choices__inner {
    box-shadow: 0 0 0 2px #e9aede;
    border-color: #e293d3
}

.choices-primary {
    background-color: #cb0c9f
}

.choices-secondary {
    background-color: #8392ab
}

.choices-success {
    background-color: #82d616
}

.choices-info {
    background-color: #17c1e8
}

.choices-warning {
    background-color: #f53939
}

.choices-danger {
    background-color: #ea0606
}

.choices-light {
    background-color: #e9ecef
}

.choices-dark {
    background-color: #3a416f
}

.choices-white {
    background-color: #fff
}

/**
 * -------------------------------------------------------------------------------
 *  Theme Dark
 * -------------------------------------------------------------------------------
**/

.theme-dark .form-fieldset, .theme-dark .list-group-item{
    border-color: rgba(101,109,119,.16);
}

.theme-dark .text-body{
    color: #fff !important;
}

.theme-dark .footer {
    border-top: 1px solid rgba(101,109,119,.16);
}

.theme-dark a.card{
    box-shadow: rgb(30 41 59 / 4%) 0 2px 4px 0;
    border: 1px solid rgba(98,105,118,.16);
    color: inherit;
    transition: box-shadow .3s;
}

.theme-dark a.card:hover {
    box-shadow: 0 2px 16px 0 rgb(0 0 0 / 16%)!important;
}

/**
 * -------------------------------------------------------------------------------
 *  Dropzone
 * -------------------------------------------------------------------------------
**/

.remote-box,
.dropzone {
    border: 1px dashed rgba(0,0,0,.3) !important;
    background: #fafbfb !important;
}

.remote-box{
    min-height: 150px;
    padding: 20px 20px;
}

.theme-dark .remote-box,
.theme-dark .dropzone {
    background: var(--tblr-border-color-light) !important;
    border: 1px solid var(--tblr-border-color) !important;
}

.theme-dark .remote-box h3.text-muted,
.theme-dark .dropzone h3.text-muted{
    color: white !important;
}

#preview-image #image{
    max-width: 100% !important;
}

#preview-image{
    max-width: 100%;
}

.image-container{
    overflow-x: hidden;
}

.image-wrapper {
    flex-direction: row;
    transition: transform 0.35s cubic-bezier(0.15, 0.3, 0.25, 1) 0s, height 0.35s cubic-bezier(0.15, 0.3, 0.25, 1) 0s;
    direction: rtl;
    display: flex;
    will-change: transform;
    transform: translate(0%, 0px);
}

.show-remote-box{
    transform: translate(100%, 0px);
}

.remote-box,
.local-image-box{
    width: 100%;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    overflow: auto hidden;
}

/**
 * -------------------------------------------------------------------------------
 *  Toast
 * -------------------------------------------------------------------------------
**/

#toast-container>div{
  box-shadow: none !important;
}

#toast-container>div:hover{
  box-shadow: none !important;
}

.toast-success {
  background-color: var(--tblr-success) !important;
}

.toast-info {
  background-color: var(--tblr-primary) !important;
}

.toast-warning {
  background-color: var(--tblr-warning) !important;
}

.toast-error {
  background-color: var(--tblr-danger) !important;
}

.toast-default {
  background-color: var(--tblr-text) !important;
}

/**
 * -------------------------------------------------------------------------------
 *  noUi
 * -------------------------------------------------------------------------------
**/

.noUi-target,.noUi-target * {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    touch-action: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
    box-sizing: border-box
}

.noUi-target {
    position: relative
}

.noUi-base,.noUi-connects {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1
}

.noUi-connects {
    overflow: hidden;
    z-index: 0
}

.noUi-connect,.noUi-origin {
    will-change: transform;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -ms-transform-origin: 100% 0;
    -webkit-transform-origin: 100% 0;
    -webkit-transform-style: preserve-3d;
    transform-origin: 100% 0;
    transform-style: flat
}

.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
    right: 0;
    left: auto
}

.noUi-vertical .noUi-origin {
    top: -100%;
    width: 0
}

.noUi-horizontal .noUi-origin {
    height: 0
}

.noUi-handle {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute
}

.noUi-touch-area {
    height: 100%;
    width: 100%
}

.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin {
    transition: transform .3s
}

.noUi-state-drag * {
    cursor: inherit!important
}

.noUi-horizontal {
    height: 18px
}

.noUi-horizontal .noUi-handle {
    width: 34px;
    height: 28px;
    left: -17px;
    top: -6px
}

.noUi-vertical {
    width: 18px
}

.noUi-vertical .noUi-handle {
    width: 28px;
    height: 34px;
    left: -6px;
    bottom: -17px
}

.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
    right: -17px;
    left: auto
}

.noUi-target {
    background: #fafafa;
    border-radius: 4px;
    border: 1px solid #d3d3d3;
    box-shadow: inset 0 1px 1px #f0f0f0,0 3px 6px -5px #bbb
}

.noUi-connects {
    border-radius: 3px
}

.noUi-connect {
    background: #3fb8af
}

.noUi-draggable {
    cursor: ew-resize
}

.noUi-vertical .noUi-draggable {
    cursor: ns-resize
}

.noUi-handle {
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    background: #fff;
    cursor: default;
    box-shadow: inset 0 0 1px #fff,inset 0 1px 7px #ebebeb,0 3px 6px -3px #bbb
}

.noUi-active {
    box-shadow: inset 0 0 1px #fff,inset 0 1px 7px #ddd,0 3px 6px -3px #bbb
}

.noUi-handle:after,.noUi-handle:before {
    content: "";
    display: block;
    position: absolute;
    height: 14px;
    width: 1px;
    background: #e8e7e6;
    right: 14px;
    top: 6px
}

.noUi-handle:after {
    right: 17px
}

.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before {
    width: 14px;
    height: 1px;
    right: 6px;
    top: 14px
}

.noUi-vertical .noUi-handle:after {
    top: 17px
}

[disabled] .noUi-connect {
    background: #b8b8b8
}

[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target {
    cursor: not-allowed
}

.noUi-pips,.noUi-pips * {
    box-sizing: border-box
}

.noUi-pips {
    position: absolute;
    color: #999
}

.noUi-value {
    position: absolute;
    white-space: nowrap;
    text-align: center
}

.noUi-value-sub {
    color: #ccc;
    font-size: 10px
}

.noUi-marker {
    position: absolute;
    background: #ccc
}

.noUi-marker-sub {
    background: #aaa
}

.noUi-marker-large {
    background: #aaa
}

.noUi-pips-horizontal {
    padding: 10px 0;
    height: 80px;
    top: 100%;
    right: 0;
    width: 100%
}

.noUi-value-horizontal {
    transform: translate(50%,50%)
}

.noUi-rtl .noUi-value-horizontal {
    transform: translate(-50%,50%)
}

.noUi-marker-horizontal.noUi-marker {
    margin-right: -1px;
    width: 2px;
    height: 5px
}

.noUi-marker-horizontal.noUi-marker-sub {
    height: 10px
}

.noUi-marker-horizontal.noUi-marker-large {
    height: 15px
}

.noUi-pips-vertical {
    padding: 0 10px;
    height: 100%;
    top: 0;
    right: 100%
}

.noUi-value-vertical {
    transform: translate(0,-50%);
    padding-right: 25px
}

.noUi-rtl .noUi-value-vertical {
    transform: translate(0,50%)
}

.noUi-marker-vertical.noUi-marker {
    width: 5px;
    height: 2px;
    margin-top: -1px
}

.noUi-marker-vertical.noUi-marker-sub {
    width: 10px
}

.noUi-marker-vertical.noUi-marker-large {
    width: 15px
}

.noUi-tooltip {
    display: block;
    position: absolute;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    background: #fff;
    color: #000;
    padding: 5px;
    text-align: center;
    white-space: nowrap
}

.noUi-horizontal .noUi-tooltip {
    transform: translate(50%,0);
    right: 50%;
    bottom: 120%
}

.noUi-vertical .noUi-tooltip {
    transform: translate(0,-50%);
    top: 50%;
    left: 120%
}

.noUi-horizontal .noUi-origin>.noUi-tooltip {
    transform: translate(-50%,0);
    right: auto;
    bottom: 10px
}

.noUi-vertical .noUi-origin>.noUi-tooltip {
    transform: translate(0,-18px);
    top: auto;
    left: 28px
}

.noUi-target {
    border: 0;
    box-shadow: none;
    background: 100% 0;
    border-radius: 0;
    color: #206bc4
}

.noUi-horizontal {
    height: 1.25rem;
    padding: .5rem 0
}

.noUi-base {
    background: #e2e8f0;
    border-radius: 1rem
}

.noUi-handle {
    width: 1rem;
    height: 1rem;
    border: 2px solid #fff;
    box-shadow: 0 .1rem .25rem rgba(0,0,0,.1);
    border-radius: 1rem;
    background: currentColor;
    outline: 0
}

.noUi-handle:after,.noUi-handle:before {
    content: none
}

.noUi-horizontal .noUi-handle {
    width: 1rem;
    height: 1rem;
    top: -.5rem;
    left: -.5rem;
    margin: 1px 0 0 1px
}

.noUi-handle.noUi-active,.noUi-handle:focus {
    box-shadow: 0 0 0 1px #f8fafc,0 0 0 .25rem rgba(32,107,196,.25)
}

.noUi-connect {
    background: currentColor
}

@media (max-width: 767.98px) {
    .w-md-100 {
        width: 100%;
    }
}

/**
 * -------------------------------------------------------------------------------
 *  ribbon-wrapper
 * -------------------------------------------------------------------------------
**/

.ribbon-wrapper {
    --d: 6px;
    --c: var(--danger);
    --f: 10px;
  display: inline-block;
}

.ribbon-wrapper::before {
  content: attr(data-ribbon);
  position: absolute;
  font-size: var(--f);
  top: 0;
  left: 0;
  transform: translate(-29.29%, -100%) rotate(-45deg);
  color: #fff;
  text-align: center;
  border: 1px solid transparent;
  border-bottom: 0;
  transform-origin: bottom right;
  padding: 2px 25px calc(var(--d) + 2px);
  background: linear-gradient(rgba(0, 0, 0, 0.5) 0 0) bottom/100% var(--d) no-repeat var(--c);
  background-clip: padding-box;
  clip-path: polygon(0 0,100% 0,100% 100%,calc(100% - var(--d)) calc(100% - var(--d)),var(--d) calc(100% - var(--d)),0 100%);
  -webkit-mask: linear-gradient(135deg,transparent calc(50% - var(--d) * 0.707),#fff 0) bottom left,
    linear-gradient(-135deg, transparent calc(50% - var(--d) * 0.707), #fff 0)bottom right;
  -webkit-mask-size: 300vmax 300vmax;
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
}
/* =====================================================================
   AVUIS · MODERN UI 2026 — DESIGN TOKENS  (Upwork-inspired green system)
   Light theme is the source of truth. Dark overrides live further below
   under `body.theme-dark`. All recurring values are tokens so the whole
   system stays consistent and maintainable.
   ===================================================================== */
:root{
    /* --- Brand (light green family) --- */
    --brand:            #23b24a;
    --brand-hover:      #1c9a3f;
    --brand-active:     #178435;
    --brand-subtle:     #e6f7ea;
    --brand-subtle-2:   #c7ecd1;
    --brand-ring:       rgba(35,178,74,.30);

    /* --- Surfaces & background (soft light-green tint) --- */
    --background:       #eef7f1;
    --surface:          #ffffff;
    --surface-subtle:   #e9f5ed;
    --surface-hover:    #e1f0e5;

    /* --- Borders --- */
    --border:           #dce9de;
    --border-strong:    #cae0cf;

    /* --- Text --- */
    --text-primary:     #001e00;
    --text-secondary:   #5e6d55;
    --text-muted:       #7c8a77;
    --text-on-brand:    #ffffff;

    /* --- Semantic states --- */
    --success:          #23b24a;
    --warning:          #f5a623;
    --danger:           #e5484d;

    /* --- Radius --- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* --- Shadows (soft, low) --- */
    --shadow-sm: 0 1px 2px rgba(0,30,0,.04), 0 1px 3px rgba(0,30,0,.06);
    --shadow-md: 0 4px 16px rgba(0,30,0,.06);
    --shadow-lg: 0 12px 32px rgba(0,30,0,.08);

    /* --- Spacing scale --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* --- Motion --- */
    --ease: cubic-bezier(.4,0,.2,1);
    --dur-fast: 150ms;
    --dur: 180ms;

    /* --- Legacy aliases kept so existing rules adopt the new palette --- */
    --avuis-primary: var(--brand);
    --avuis-brand:   var(--brand);
    --avuis-dark:    var(--text-primary);
    --avuis-bg:      var(--surface-subtle);
    --avuis-line:    var(--border);
    --avuis-light:   var(--brand-subtle);

    /* --- Remap the Tabler/Bootstrap theme to the Upwork palette.
           These load after the framework, so they win by source order
           and recolor buttons, links, badges & focus rings globally. --- */
    --tblr-primary:        #23b24a;
    --tblr-primary-rgb:    35,178,74;
    --tblr-primary-fg:     #ffffff;
    --tblr-success:        #23b24a;
    --tblr-success-rgb:    35,178,74;
    --tblr-success-fg:     #ffffff;

    --tblr-border-radius:      10px;
    --tblr-border-radius-sm:   8px;
    --tblr-border-radius-lg:   14px;

    /* NOTE: --tblr-body-bg / --tblr-body-color / --tblr-border-color are
       intentionally NOT remapped here — they carry .theme-dark variants and
       overriding them on :root would clobber dark mode. Light background &
       text are set on `body:not(.theme-dark)` in the design-system section. */

    --tblr-font-sans-serif: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --tblr-link-color:       #1c9a3f;
    --tblr-link-hover-color: #178435;
}



/* ======================================================================
   ▄▄▄  MODERN UI 2026 · DESIGN SYSTEM  (Avuis / SumoWebTools)  ▄▄▄
   UI-only layer. Targets existing Tabler/Bootstrap + theme classes.
   No markup, IDs, data-attributes or JS hooks are changed by this CSS.
   Loads after main.*.min.css, so it wins by source order (few !important).
   ====================================================================== */

/* ----------------------------------------------------------------------
   1 · Base & typography
   ---------------------------------------------------------------------- */
body{
    font-family: var(--tblr-font-sans-serif);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.006em;
}
body:not(.theme-dark){
    background: var(--background);
    color: var(--text-primary);
}
.page{ background: transparent; }

h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5,
.card-title,.navbar-brand{
    letter-spacing: -0.02em;
}
h1,.h1{ font-weight: 700; line-height: 1.15; }
h2,.h2{ font-weight: 700; line-height: 1.2; }
h3,.h3,h4,.h4{ font-weight: 600; line-height: 1.3; }

body:not(.theme-dark) h1,
body:not(.theme-dark) h2,
body:not(.theme-dark) h3,
body:not(.theme-dark) h4{ color: var(--text-primary); }

.text-muted{ color: var(--text-muted) !important; }
.text-secondary{ color: var(--text-secondary) !important; }

/* Content links adopt the brand green via Tabler's own --tblr-link-color
   remap (set in :root). We deliberately DON'T add a broad `a{color}` rule
   here — it would out-specify .btn / .nav-link and repaint their text. */

/* ----------------------------------------------------------------------
   2 · Global layout — centered container, consistent rhythm
   ---------------------------------------------------------------------- */
.container,
.container-xl{
    max-width: 1240px;
    padding-inline: 24px;
}
@media (max-width: 991.98px){
    .container,.container-xl{ padding-inline: 20px; }
}
@media (max-width: 575.98px){
    .container,.container-xl{ padding-inline: 16px; }
}

/* ----------------------------------------------------------------------
   3 · Cards & surfaces
   ---------------------------------------------------------------------- */
.card{
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
}
.card-header{
    border-bottom: 1px solid var(--border);
    padding: 20px 24px;
    background: transparent;
}
.card-header .card-title{ margin-bottom: 2px; font-weight: 700; }
.card-body{ padding: 24px; }
@media (max-width: 575.98px){
    .card-body{ padding: 18px; }
    .card-header{ padding: 16px 18px; }
}

/* ----------------------------------------------------------------------
   4 · Buttons — clear hierarchy, brand-green primary
   ---------------------------------------------------------------------- */
.btn{
    --tblr-btn-border-radius: 10px;
    font-weight: 600;
    padding-inline: 1.05rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    box-shadow: none !important;      /* drop Tabler's inset gloss for a flat, modern face */
    transition: background-color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.btn:active{ transform: translateY(1px); }

/* btn-icon stays square/compact (used for copy, paste, toggles, search) */
.btn-icon{
    min-height: 0;
    padding: .4rem;
}

/* Primary CTA = brand green */
.btn-primary{
    --tblr-btn-bg: var(--brand);
    --tblr-btn-hover-bg: var(--brand-hover);
    --tblr-btn-active-bg: var(--brand-active);
    --tblr-btn-color:#fff; --tblr-btn-hover-color:#fff; --tblr-btn-active-color:#fff;
    --tblr-btn-disabled-bg: var(--brand); --tblr-btn-disabled-color:#fff;
    --tblr-btn-border-color:transparent;
    --tblr-btn-hover-border-color:transparent;
    --tblr-btn-active-border-color:transparent;
}

/* The tool primary actions use .btn-info / .btn-cyan — bring them on-brand */
.btn-info,
.btn-cyan{
    --tblr-btn-bg: var(--brand);
    --tblr-btn-hover-bg: var(--brand-hover);
    --tblr-btn-active-bg: var(--brand-active);
    --tblr-btn-color:#fff; --tblr-btn-hover-color:#fff; --tblr-btn-active-color:#fff;
    --tblr-btn-disabled-bg: var(--brand); --tblr-btn-disabled-color:#fff;
    --tblr-btn-border-color:transparent;
    --tblr-btn-hover-border-color:transparent;
    --tblr-btn-active-border-color:transparent;
}

/* Success stays green (harmonised with brand) */
.btn-success{
    --tblr-btn-bg: var(--brand);
    --tblr-btn-hover-bg: var(--brand-hover);
    --tblr-btn-active-bg: var(--brand-active);
    --tblr-btn-color:#fff; --tblr-btn-hover-color:#fff; --tblr-btn-active-color:#fff;
    --tblr-btn-disabled-bg: var(--brand); --tblr-btn-disabled-color:#fff;
    --tblr-btn-border-color:transparent;
}

/* Secondary / neutral actions: white surface with border */
.btn-default,
.btn-white,
.btn-secondary,
.btn-light{
    --tblr-btn-bg: var(--surface);
    --tblr-btn-color: var(--text-primary);
    --tblr-btn-border-color: var(--border-strong);
    --tblr-btn-hover-bg: var(--surface-hover);
    --tblr-btn-hover-color: var(--text-primary);
    --tblr-btn-hover-border-color: var(--border-strong);
    --tblr-btn-active-bg: var(--surface-hover);
    --tblr-btn-active-color: var(--text-primary);
}

/* Destructive stays red, kept for genuinely destructive actions */
.btn-danger{
    --tblr-btn-bg: var(--danger);
    --tblr-btn-hover-bg: #d13b40;
    --tblr-btn-active-bg: #c23438;
    --tblr-btn-color:#fff; --tblr-btn-hover-color:#fff;
}

/* Focus ring — visible for keyboard users */
.btn:focus-visible{
    outline: none;
    box-shadow: 0 0 0 .25rem var(--brand-ring) !important;
}

/* ----------------------------------------------------------------------
   5 · Forms & inputs
   ---------------------------------------------------------------------- */
.form-control,
.form-select{
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    min-height: 46px;
    padding: .6rem .85rem;
    color: var(--text-primary);
    background-color: var(--surface);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
textarea.form-control{ min-height: 120px; line-height: 1.6; }
.form-control::placeholder{ color: var(--text-muted); opacity: 1; }
.form-control:hover,
.form-select:hover{ border-color: var(--text-muted); }
.form-control:focus,
.form-select:focus{
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem var(--brand-ring);
    background-color: var(--surface);
}
.form-control:disabled,
.form-control[readonly]{
    background-color: var(--surface-subtle);
    color: var(--text-secondary);
    opacity: 1;
}
.form-label{ font-weight: 600; color: var(--text-primary); margin-bottom: .4rem; }

/* Range inputs / switches adopt the brand */
.form-range::-webkit-slider-thumb{ background: var(--brand); }
.form-range::-moz-range-thumb{ background: var(--brand); }
.form-check-input:checked{
    background-color: var(--brand);
    border-color: var(--brand);
}
.form-check-input:focus{ box-shadow: 0 0 0 .2rem var(--brand-ring); border-color: var(--brand); }

/* Input with leading icon (search boxes) */
.input-icon .input-icon-addon{ color: var(--text-muted); }

/* ----------------------------------------------------------------------
   6 · Header / navigation
   ---------------------------------------------------------------------- */
header.navbar{
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    padding-block: .5rem;
    min-height: 64px;
}
header.navbar.sticky-top{
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    backdrop-filter: saturate(180%) blur(8px);
    background: rgba(255,255,255,.92);
}
.theme-dark header.navbar.sticky-top{ background: rgba(26,34,52,.92); }
/* Keep sticky sidebar widgets & in-page anchor targets clear of the header */
.sidebars .sticky-top{ top: 76px; }
.category-box .card-title,
#content-box .card-header .card-title,
#tool-box .card-header .card-title{ scroll-margin-top: 84px; }

.navbar-brand-image{ height: 32px; width: auto; object-fit: contain; }
/* Text + icon brand mark (replaces the uploaded logo image) */
.navbar-brand-avuis{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -.02em;
    color: var(--text-primary);
    text-decoration: none;
}
.navbar-brand-avuis:hover{ color: var(--text-primary); }
.navbar-brand-avuis .brand-mark{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--brand);
    color: #fff;
    box-shadow: var(--shadow-sm);
    flex: 0 0 auto;
}
.navbar-brand-avuis .brand-word{ color: var(--text-primary); }
body.theme-dark .navbar-brand-avuis,
body.theme-dark .navbar-brand-avuis .brand-word{ color: #f4f7f4; }
.navbar .navbar-nav .nav-link{
    color: var(--text-secondary);
    font-weight: 500;
    border-radius: 8px;
    padding: .5rem .75rem;
    transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus-visible{
    color: var(--text-primary);
    background: var(--surface-subtle);
}
.navbar .dropdown-menu{
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 6px;
}
.navbar .dropdown-item{ border-radius: 8px; padding: .5rem .65rem; }
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus{ background: var(--surface-subtle); color: var(--text-primary); }
.btn-toggle-mode{ color: var(--text-secondary); }
.btn-toggle-mode:hover{ color: var(--text-primary); background: var(--surface-subtle); }

/* Header search popover (non-hero) */
.search-box{
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    background: var(--surface);
    padding: 10px;
    min-width: 320px;
    margin-top: 8px;
}
.search-box input[type="text"]{
    border: 1px solid var(--border-strong);
    border-radius: 8px;
}

/* ----------------------------------------------------------------------
   7 · Hero + prominent search
   ---------------------------------------------------------------------- */
.hero{
    background:
        radial-gradient(1200px 380px at 50% -120px, var(--brand-subtle) 0%, transparent 70%),
        var(--background);
    padding: 72px 0 56px;
    border-bottom: 1px solid var(--border);
}
.hero-kicker{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    color: var(--brand-hover);
    padding: 6px 14px;
    border: 1px solid var(--brand-subtle-2);
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 18px;
}
.hero-title{
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: var(--text-primary);
    margin: 0 0 14px;
}
.hero-sub{
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.55;
    max-width: 620px;
    margin: 0 auto 26px;
}
.hero-search{ max-width: 640px; margin: 0 auto; }
.hero-search-input{
    flex: 1 1 auto;
    min-height: 56px;
    border-radius: var(--radius-pill);
    padding: 14px 22px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font-size: 16px;
}
.hero-search-input:focus{
    border-color: var(--brand);
    box-shadow: 0 0 0 .25rem var(--brand-ring);
}
/* When the hero search is an attached input+button pair (static form) */
.hero-search .hero-search-input{
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    box-shadow: none;
}
.hero-search-btn{
    border-radius: var(--radius-pill);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    padding-inline: 30px;
    min-height: 56px;
    background: var(--brand);
    border: none;
    color: #fff;
    font-weight: 600;
}
.hero-search-btn:hover{ background: var(--brand-hover); }
/* Livewire hero search (single rounded field with icon) */
.hero-search-live .input-icon .hero-search-input{
    border-radius: var(--radius-pill);
    padding-inline-start: 46px;
    box-shadow: var(--shadow-sm);
}
.hero-search-live .input-icon .input-icon-addon{
    inset-inline-start: 6px;
    width: 40px;
    color: var(--text-muted);
}
.hero-search-live .list-group-item{ border: 0; border-radius: 8px; padding: .6rem .75rem; }
.hero-search-live .list-group-item:hover{ background: var(--surface-subtle); }

.hero-chips{ gap: 8px; margin-top: 20px; }
.chip{
    display: inline-flex;
    align-items: center;
    background: var(--surface);
    padding: 7px 15px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.chip:hover{
    color: var(--brand-hover);
    border-color: var(--brand-subtle-2);
    background: var(--brand-subtle);
    cursor: pointer;
}

@media (max-width: 767.98px){
    .hero{ padding: 48px 0 36px; }
    .hero-title{ font-size: 32px; }
    .hero-sub{ font-size: 16px; }
    .hero-search-input,
    .hero-search-btn{ min-height: 50px; }
    .hero-search-btn{ padding-inline: 20px; }
}

/* Parallax hero banner (non-home pages, e.g. tool pages).
   The overlay colours (.mask) are admin settings that ship red/orange as an
   INLINE gradient — override to a brand-green gradient, and restore white
   heading text (our global heading colour had darkened it on the banner). */
#parallax .mask{
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-active) 100%) !important;
}
#parallax h1,
#parallax h2,
#parallax h3,
#parallax .display-5,
#parallax .display-6,
#parallax .card-title{
    color: #fff !important;
}

/* ----------------------------------------------------------------------
   8 · Homepage tool directory — category sections, cards, grid
   ---------------------------------------------------------------------- */
/* ---- Unified section-header banners --------------------------------
   The theme lets admins tint these headers (default bg-teal, sometimes
   red/other). To keep ONE color scheme we neutralise every section
   banner to the same clean light treatment, overriding both the
   contextual background AND the .text-white that ships with a tint. */
.category-box,
.related-tools-box,
#content-box > .card > .card-header,
#tool-box > .card > .card-header,
.sidebars .card > .card-header{
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: 1px solid var(--border);
}
.category-box, .category-box .card-title, .category-box .card-title a,
.related-tools-box, .related-tools-box .card-title,
#content-box > .card > .card-header, #content-box > .card > .card-header .card-title,
#tool-box > .card > .card-header, #tool-box > .card > .card-header .card-title,
.sidebars .card > .card-header, .sidebars .card > .card-header .card-title{
    color: var(--text-primary) !important;
}
.category-box span,
.related-tools-box span,
#content-box > .card > .card-header p,
#tool-box > .card > .card-header p{
    color: var(--text-secondary) !important;
}
.category-box .card-title{ font-size: 20px; font-weight: 700; }
.category-box .card-title a{ text-decoration: none; }
.category-box .card-title a:hover{ color: var(--brand-hover) !important; }

/* Tool tiles used across home + related + search results (.item-box) */
a.item-box.card{
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: none;
    height: 100%;
    overflow: hidden;               /* clip the decorative "New" corner ribbon */
    transition: transform var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}
a.item-box.card .card-body{ padding: 16px 18px; }
a.item-box.card:hover{
    transform: translateY(-2px);
    border-color: var(--brand-subtle-2);
    box-shadow: var(--shadow-md);
}
a.item-box .fw-medium{ color: var(--text-primary); font-weight: 600; }
.item-box .avatar{ border-radius: 10px; }
/* Let long tool names wrap instead of overflowing the tile */
.item-box .d-flex{ min-width: 0; }
.item-box .fw-medium{ min-width: 0; overflow-wrap: anywhere; }

/* Custom homepage tools-grid + tool-card (home.blade fallback layout) */
.tools-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.tool-card{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: var(--surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: transform var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}
.tool-card:hover{
    transform: translateY(-2px);
    border-color: var(--brand-subtle-2);
    box-shadow: var(--shadow-md);
}
.tool-icon img{ width: 44px; height: 44px; border-radius: 10px; }
.tool-title{ font-size: 15px; margin: 0; font-weight: 600; color: var(--text-primary); }
.tool-desc{ margin: 3px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.tool-arrow{ margin-inline-start: auto; color: var(--text-muted); font-size: 22px; line-height: 1; }
.tool-card:hover .tool-arrow{ color: var(--brand); }

@media (max-width: 991.98px){ .tools-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px){ .tools-grid{ grid-template-columns: 1fr; } }

/* Popular tools sidebar (home.blade) */
.popular-sidebar{
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.popular-sidebar h4{ margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.popular-sidebar ul{ list-style: none; padding: 0; margin: 0; }
.popular-sidebar li{ padding: 9px 0; border-top: 1px solid var(--border); }
.popular-sidebar li:first-child{ border-top: none; }
.popular-sidebar a{ color: var(--text-secondary); text-decoration: none; font-weight: 500; }
.popular-sidebar a:hover{ color: var(--brand-hover); }

/* ----------------------------------------------------------------------
   9 · Individual tool page workspace
   ---------------------------------------------------------------------- */
#tool-box .card,
#content-box .card{ box-shadow: var(--shadow-sm); }
#tool-box > .card > .card-header .card-title{ font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
#tool-box > .card > .card-header p{ color: var(--text-secondary); }

/* Related tools */
.related-tools-box .card-title{ font-size: 18px; font-weight: 700; }

/* Breadcrumb (tool pages) */
.tool-breadcrumb .breadcrumb{ margin: 0; font-size: 13px; }
.tool-breadcrumb .breadcrumb-item a{ color: var(--text-secondary); text-decoration: none; }
.tool-breadcrumb .breadcrumb-item a:hover{ color: var(--brand-hover); }
.tool-breadcrumb .breadcrumb-item.active{ color: var(--text-primary); }
.tool-breadcrumb .breadcrumb-item + .breadcrumb-item::before{ color: var(--text-muted); }

/* Hide empty headings (e.g. a blank hero subtitle) — cleaner DOM & SEO */
#parallax h1:empty, #parallax h2:empty,
#content-box .card-header h2:empty,
#tool-box .card-header h2:empty{ display: none; }

/* ----------------------------------------------------------------------
   10 · Sidebar cards (Popular Tools / Recent Posts / author)
   ---------------------------------------------------------------------- */
.sidebars .card-header .card-title{ font-size: 16px; font-weight: 700; }
.list-group-hoverable .list-group-item{ transition: background var(--dur-fast) var(--ease); }
.list-group-item{ padding: .7rem 1.1rem; }
.list-group-item-action:hover{ background: var(--surface-subtle); }
.list-group-item a.text-body:hover{ color: var(--brand-hover) !important; }

/* ----------------------------------------------------------------------
   11 · Badges & alerts
   ---------------------------------------------------------------------- */
.badge{ font-weight: 600; border-radius: 7px; padding: .35em .6em; }
.alert{ border-radius: var(--radius-md); border: 1px solid var(--border); }

/* ----------------------------------------------------------------------
   12 · File upload / dropzone
   ---------------------------------------------------------------------- */
.remote-box,
.dropzone{
    border: 2px dashed var(--border-strong) !important;
    background: var(--surface-subtle) !important;
    border-radius: var(--radius-lg) !important;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dropzone:hover,
.dropzone.dz-drag-hover,
.remote-box:hover{
    border-color: var(--brand) !important;
    background: var(--brand-subtle) !important;
}
.dropzone .dz-message{ color: var(--text-secondary); }

/* ----------------------------------------------------------------------
   13 · Cookie banner
   ---------------------------------------------------------------------- */
.cookies-wrapper{
    position: fixed;
    z-index: 1050;
    inset-inline: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 14px 24px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}
.cookies-inner{
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}
.cookies-inner.text-center{ justify-content: center; }
.cookies-inner.text-end{ justify-content: flex-end; }
.cookies-icon{ flex: none; width: 28px; height: 28px; }
.cookies-text{ flex: 1 1 auto; color: var(--text-secondary); font-size: .875rem; line-height: 1.4; }
.cookies-btn{ flex: none; white-space: nowrap; padding: .5rem 1.25rem; }
@media (max-width: 575.98px){
    .cookies-wrapper{ padding: 12px 16px; }
    .cookies-inner{ flex-wrap: wrap; row-gap: 10px; }
    .cookies-text{ flex: 1 1 100%; }
    .cookies-btn{ flex: 1 1 100%; }
}

/* ----------------------------------------------------------------------
   14 · Footer
   ---------------------------------------------------------------------- */
.footer{
    background: var(--surface);
    border-top: 1px solid var(--border);
    margin-top: 48px !important;
    padding-top: 40px !important;
    padding-bottom: 24px;
    color: var(--text-secondary);
}
.footer h1,.footer h2,.footer h3,.footer h4,.footer h5{
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-primary);
    margin-bottom: 14px;
}
.footer a{ color: var(--text-secondary); text-decoration: none; }
.footer a:hover{ color: var(--brand-hover); }
.footer ul{ list-style: none; padding: 0; }
.footer li{ margin-bottom: 8px; }
.footer .text-sm{ color: var(--text-muted); }
.footer hr.horizontal{ margin-bottom: 32px !important; opacity: 1; border-color: var(--border); }

/* ----------------------------------------------------------------------
   15 · Back-to-top
   ---------------------------------------------------------------------- */
#backtotop .backtotop{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: var(--shadow-md);
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
#backtotop .backtotop:hover{ background: var(--brand-hover); transform: translateY(-2px); }

/* ----------------------------------------------------------------------
   16 · Blog reading experience
   ---------------------------------------------------------------------- */
.blog-content,
.post-content,
article .card-body{ font-size: 16px; line-height: 1.75; }
article .card-body p{ margin-bottom: 1.1rem; }
article img,
.card-body img{ border-radius: var(--radius-md); max-width: 100%; height: auto; }

/* ----------------------------------------------------------------------
   17 · Accessibility — visible keyboard focus everywhere
   ---------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.list-group-item-action:focus-visible,
.item-box:focus-visible,
.tool-card:focus-visible,
.chip:focus-visible{
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.item-box:focus-visible,
.tool-card:focus-visible{ border-radius: var(--radius-md); }

/* ----------------------------------------------------------------------
   18 · Motion — subtle, and respectful of user preference
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .tool-card:hover,
    a.item-box.card:hover{ transform: none; }
}

/* ----------------------------------------------------------------------
   18b · Color-scheme unification — social buttons & "New" ribbon
   ---------------------------------------------------------------------- */
/* Social share / "Follow us" / author buttons ship in each network's brand
   colour (Pinterest/YouTube/Reddit red, Facebook/Twitter/LinkedIn blue),
   which breaks the single-green scheme. Neutralise them to one calm chip
   that turns brand-green on hover. `.btn-simple` is social-only in this
   theme. The [class] / .share-icons prefixes match the theme's own
   per-network specificity so these win without over-reaching. */
.share-icons .btn.btn-simple[class],
.share-icons-sm .btn.btn-simple[class],
.btn.btn-simple[class]{
    background: var(--surface-subtle) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
.share-icons .btn.btn-simple[class]:hover,
.share-icons .btn.btn-simple[class]:focus,
.share-icons .btn.btn-simple[class]:active,
.share-icons-sm .btn.btn-simple[class]:hover,
.share-icons-sm .btn.btn-simple[class]:focus,
.share-icons-sm .btn.btn-simple[class]:active,
.btn.btn-simple[class]:hover,
.btn.btn-simple[class]:focus,
.btn.btn-simple[class]:active{
    background: var(--brand-subtle) !important;
    color: var(--brand-hover) !important;
    border-color: var(--brand-subtle-2) !important;
}
.btn.btn-simple[class] i{ color: inherit !important; }

/* The "New" corner ribbon uses the Modern-UI danger token (see :root --danger),
   so every colour on the page traces back to the same token set. */
.ribbon-wrapper{ --c: var(--danger); }

/* ----------------------------------------------------------------------
   19 · Dark mode — keep the redesign compatible with the existing toggle
   ---------------------------------------------------------------------- */
body.theme-dark{
    --border:         rgba(255,255,255,.10);
    --border-strong:  rgba(255,255,255,.16);
    --surface:        #1e2636;
    --surface-subtle: #222b3d;
    --surface-hover:  #263044;
    --text-primary:   #f4f7f4;
    --text-secondary: #aeb7c2;
    --text-muted:     #8792a2;
    --brand-subtle:   rgba(35,178,74,.16);
    --brand-subtle-2: rgba(35,178,74,.32);
    --background:     #1a2234;
}
body.theme-dark .hero{
    background:
        radial-gradient(1200px 380px at 50% -120px, rgba(35,178,74,.14) 0%, transparent 70%),
        var(--tblr-body-bg);
}
body.theme-dark .card,
body.theme-dark header.navbar,
body.theme-dark .footer,
body.theme-dark .popular-sidebar,
body.theme-dark .hero-kicker,
body.theme-dark .chip{ background: var(--tblr-body-bg); }
body.theme-dark .hero-title,
body.theme-dark .tool-title,
body.theme-dark a.item-box .fw-medium{ color: var(--text-primary); }
/* Brighter green for links on dark surfaces (contrast) */
body.theme-dark{ --tblr-link-color: #33c94f; --tblr-link-hover-color: #57d96e; }
body.theme-dark .chip,
body.theme-dark .popular-sidebar a:hover,
body.theme-dark .footer a:hover{ color: #57d96e; }
/* Navbar links need explicit dark values (Tabler's own navbar rule ties on
   specificity, so we win with a theme-scoped, higher-specificity rule) */
body.theme-dark .navbar .navbar-nav .nav-link{ color: #aeb7c2; }
body.theme-dark .navbar .navbar-nav .nav-link:hover,
body.theme-dark .navbar .navbar-nav .nav-link:focus-visible{ color: #f4f7f4; background: rgba(255,255,255,.06); }

/* ======================================================================
   END · MODERN UI 2026 DESIGN SYSTEM
   ====================================================================== */


/* ======================================================================
   PREMIUM POLISH PASS (2026-08-28)
   Restraint, deliberate rhythm, refined affordances. Pushes the existing
   system toward a Stripe/Linear/Vercel level of finish. Styling only.
   ====================================================================== */

/* --- Deliberate vertical rhythm: let content sections breathe.
       (!important overrides Bootstrap's py-*/mb-* utilities, which are !important.) --- */
.page-content > .container.py-4{ padding-top: 40px !important; padding-bottom: 48px !important; }
#tools-box > .card.mb-3,
#tool-box > .card.mb-3,
#tool-box > section > .card.mb-3,
#content-box.mb-3{ margin-bottom: 28px !important; }
@media (max-width: 575.98px){
    .page-content > .container.py-4{ padding-top: 24px !important; padding-bottom: 32px !important; }
    #tools-box > .card.mb-3,
    #tool-box > .card.mb-3{ margin-bottom: 20px !important; }
}

/* --- Hero: cleaner, tighter, more premium --- */
.hero{ padding: 84px 0 64px !important; }
.hero-title{ letter-spacing: -0.035em; }
.hero-kicker{ box-shadow: var(--shadow-sm); }
@media (max-width: 767.98px){ .hero{ padding: 52px 0 40px !important; } }

/* --- Tool tiles: more room, a crisp brand accent + affordance on hover --- */
a.item-box.card .card-body{ padding: 18px 20px; }
a.item-box.card{ position: relative; }
a.item-box.card:hover{
    border-color: var(--brand);
    box-shadow: 0 6px 20px rgba(0,30,0,.07);
}
/* subtle "open" affordance that fades in on hover/focus */
a.item-box.card::after{
    content: "";
    position: absolute;
    inset-inline-end: 16px;
    top: 50%;
    width: 7px; height: 7px;
    border-top: 2px solid var(--brand);
    border-right: 2px solid var(--brand);
    transform: translateY(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity var(--dur) var(--ease), inset-inline-end var(--dur) var(--ease);
}
[dir="rtl"] a.item-box.card::after{ transform: translateY(-50%) rotate(225deg); }
a.item-box.card:hover::after,
a.item-box.card:focus-visible::after{ opacity: .8; inset-inline-end: 13px; }
a.item-box.card:hover .d-flex,
a.item-box.card:focus-visible .d-flex{ padding-inline-end: 14px; }

/* --- Category section header: a small brand accent for scannability --- */
.category-box .card-title{ display: inline-flex; align-items: center; letter-spacing: -0.01em; }
.category-box .card-title::before{
    content: "";
    width: 4px; height: 18px;
    border-radius: 2px;
    background: var(--brand);
    margin-inline-end: 10px;
    flex: 0 0 auto;
}

/* --- Buttons: firmer press feedback, consistent icon gap --- */
.btn-primary:hover,
.btn-info:hover,
.btn-success:hover{ box-shadow: 0 2px 10px rgba(35,178,74,.18) !important; }

/* --- Inputs: a hair more padding for a premium feel --- */
.form-control, .form-select{ padding-inline: .9rem; }

/* --- Related tools & sidebar cards share the exact tile finish --- */
.related-tools-box + .card-body .item-box.card:hover{ border-color: var(--brand); }

/* --- Selection colour on-brand --- */
::selection{ background: var(--brand-subtle-2); color: var(--text-primary); }

/* ======================================================================
   END · PREMIUM POLISH PASS
   ====================================================================== */


/* ======================================================================
   ENTERPRISE NAVBAR REFINEMENT (2026-08-28)
   Presentation only — no links, actions, dropdown or search behaviour
   change. Turns the generic Bootstrap header into a poised, well-aligned,
   professional navigation bar.
   ====================================================================== */

/* --- Bar: a touch taller, airier, crisply aligned --- */
header.navbar{ min-height: 68px; padding-block: .4rem; }
header.navbar > .container-xl{ align-items: center; column-gap: 6px; }

/* --- Brand lockup: refined, sits clean --- */
.navbar-brand-avuis{ font-size: 21px; }
.navbar-brand-avuis .brand-mark{
    width: 36px; height: 36px; border-radius: 10px;
    box-shadow: 0 2px 8px rgba(35,178,74,.30);
}

/* --- Primary nav: deliberate rhythm, muted → hover pill --- */
#navbar-menu .navbar-nav{ align-items: center; column-gap: 2px; }
.navbar .navbar-nav .nav-link{
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    padding: .55rem .8rem;
    border-radius: 9px;
    color: var(--text-secondary);
    transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus-visible{ color: var(--text-primary); background: var(--surface-subtle); }
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .show > .nav-link{ color: var(--brand-hover); background: var(--brand-subtle); }

/* --- Refined chevron: clean line-drawn caret instead of the solid triangle --- */
.navbar .dropdown-toggle::after{
    display: inline-block;
    width: .42em; height: .42em;
    margin-left: .5em; margin-top: -.18em;
    border: 0;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
    vertical-align: middle;
    transition: transform var(--dur-fast) var(--ease);
    opacity: .7;
}
.navbar .dropdown-toggle[aria-expanded="true"]::after{ transform: rotate(-135deg); margin-top: .05em; }

/* --- Utility icon buttons (search, theme): equal size, subtle hover pill --- */
.navbar-nav.order-lg-last .btn-icon{
    width: 40px; height: 40px;
    min-height: 0;
    padding: 0;
    border-radius: 10px;
    color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.navbar-nav.order-lg-last .btn-icon:hover,
.navbar-nav.order-lg-last .btn-icon:focus-visible{ color: var(--text-primary); background: var(--surface-subtle); }

/* --- Right cluster: aligned, evenly spaced --- */
.navbar-nav.order-lg-last{ align-items: center; column-gap: 6px; }
.navbar-nav.order-lg-last > .nav-item,
.navbar-nav.order-lg-last > div{ display: inline-flex; align-items: center; margin-inline-end: 0 !important; }

/* --- A quiet divider separating utilities from the auth actions --- */
.navbar-nav.order-lg-last .nav-item:has(.btn-toggle-mode){
    border-inline-end: 1px solid var(--border);
    padding-inline-end: 10px;
    margin-inline-end: 8px !important;
}

/* --- Language switcher: tidy flag + label + caret --- */
.lang-menu > .nav-link{
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 500; color: var(--text-secondary);
}
.lang-menu .lang-image{ border-radius: 3px; box-shadow: 0 0 0 1px var(--border); }
.lang-menu .dropdown-menu .dropdown-item{ display: inline-flex; align-items: center; gap: 8px; }

/* --- Auth buttons: a refined ghost + solid pair --- */
.navbar .btn-default,
.navbar .btn-success.border-0{
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent !important;
}
.navbar .btn-default:hover,
.navbar .btn-success.border-0:hover{ background: var(--surface-subtle); color: var(--text-primary); }
.navbar .nav-item .btn-primary{ font-weight: 600; padding-inline: 1.2rem; }

/* --- Sticky bar reads crisply over content --- */
header.navbar.sticky-top{ box-shadow: 0 1px 0 var(--border); }

/* --- Mobile: the collapsed menu becomes a clean panel --- */
@media (max-width: 991.98px){
    header.navbar > .container-xl{ column-gap: 0; }
    #navbar-menu{
        margin-top: 10px;
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--surface);
        box-shadow: var(--shadow-md);
    }
    #navbar-menu .navbar-nav{ align-items: stretch; gap: 2px; }
    .navbar .navbar-nav .nav-link{ padding: .7rem .8rem; }
    .navbar-toggler{ border: 1px solid var(--border); border-radius: 9px; padding: 6px 9px; }
}

/* ======================================================================
   END · ENTERPRISE NAVBAR REFINEMENT
   ====================================================================== */

/* ======================================================================
   AUTH PAGES & HEADER POLISH (2026-08-28)
   Presentation only — no auth logic, validation, or submit behaviour.
   ====================================================================== */

/* #4 Password show/hide toggle icon states */
.pw-toggle{ display: inline-flex; align-items: center; cursor: pointer; color: var(--text-muted); }
.pw-toggle:hover{ color: var(--text-secondary); }
.pw-toggle .icon-eye-off{ display: none; }
.pw-toggle.is-visible .icon-eye{ display: none; }
.pw-toggle.is-visible .icon-eye-off{ display: inline-flex; }
.input-group-flat .input-group-text{ background: var(--surface); }

/* #6 Reserved inline field-message slot (no layout shift when errors appear) */
.auth-field-msg{ min-height: 1.15rem; font-size: 12.5px; line-height: 1.15rem; margin-top: 5px; }
/* #5 Register password helper */
.auth-pw-hint{ font-size: 12.5px; margin-top: 6px; color: var(--text-muted); }

/* Auth card refinement */
#login-page .card-md,
#register-page .card-md{ border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
#login-page .card-header h2,
#register-page .card-header h2{ font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
#login-page .card-header p,
#register-page .card-header p{ color: var(--text-secondary); }
#login-page .form-label-description a,
#register-page .form-label-description a{ color: var(--brand-hover); text-decoration: none; }

/* #10 Active language row in the switcher */
.lang-menu .dropdown-item.active{ background: var(--brand-subtle); color: var(--brand-hover); font-weight: 600; }
.lang-menu .dropdown-item.active .lang-check{ color: var(--brand); }
.lang-menu .dropdown-item:hover{ background: var(--surface-subtle); }

/* #8 Hide dead placeholder footer links (href="#") so no dead links show,
   especially on the auth pages where trust matters. Real links unaffected. */
.footer li:has(> a[href="#"]),
.footer li:has(> a[href="/#"]){ display: none; }

/* ======================================================================
   BLOG POLISH (2026-08-28) — styling/markup only
   ====================================================================== */
/* Index post cards */
.post-card.card-plain{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); height: 100%; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.post-card.card-plain:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-subtle-2); }
.post-card .card-image{ overflow: hidden; }
.post-card .card-image img{ aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.post-card .card-body{ padding: 16px 18px 18px; }
.post-card .title{ margin-bottom: 6px; }
.post-card .title a{ color: var(--text-primary); text-decoration: none; font-size: 17px; letter-spacing: -.01em; }
.post-card .title a:hover{ color: var(--brand-hover); }
.post-card .card-body > p{ color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.post-card-meta{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; margin-bottom: 8px; }
.post-card-meta .icon{ width: 15px; height: 15px; }

/* Post header: breadcrumb + byline + back-to-blog */
.blog-post-head .breadcrumb{ margin-bottom: 0; }
.post-byline{ display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.back-to-blog{ display: inline-flex; align-items: center; gap: 6px; }

/* #1 Comfortable reading width + reserved content region, and the author bio
      rendered as a clearly distinct card rather than the article body. */
.page-post #content-box .card-body{ min-height: 140px; }
.page-post #content-box .card-body .author-box{
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    margin-top: 28px !important;
}
.page-post #content-box .card-body hr.horizontal{ display: none; }

/* #7 De-emphasise the footer when it sits beneath editorial content */
.page-post .footer,
.page-post .footer h1, .page-post .footer h2, .page-post .footer h3,
.page-post .footer h4, .page-post .footer h5{ color: var(--text-muted); }
.page-post .footer{ font-size: 14px; }


/* ======================================================================
   AVUIS · FORMAL DESIGN TOKEN LAYER  (foundation for classic → modern)
   ----------------------------------------------------------------------
   Single source of truth for every later component prompt.
   TOKENS ONLY — deliberately NOT applied to any component here.
   The existing sage/mint identity is formalised, not replaced: the
   existing semantic tokens still drive the UI and map onto this scale:
     --brand          == --green-500   (#23b24a, rgb 35,178,74)
     --brand-hover    == --green-600     --brand-active == --green-700
     --background     == --green-50    (#eef7f1, rgb 238,247,241)
     --text-primary   == --gray-900    (#001e00, rgb 0,30,0)
     --text-secondary == --gray-600      --text-muted   == --gray-500
     --border         == --gray-200      --border-strong== --gray-300
   ====================================================================== */
:root{
    /* ---- Primary scale (sage/mint green; 500 = brand) ---------------- */
    --green-50:  #eef7f1;   /* = page background */
    --green-100: #d9f0e0;
    --green-200: #b6e4c4;
    --green-300: #83d09b;
    --green-400: #4ec06e;
    --green-500: #23b24a;   /* = brand accent */
    --green-600: #1c9a3f;   /* = brand hover  */
    --green-700: #178435;   /* = brand active */
    --green-800: #12662a;
    --green-900: #0d4a1f;

    /* ---- Neutral / gray scale (sage-tinted; text + borders) --------- */
    --gray-50:  #f6faf7;
    --gray-100: #eef4ef;
    --gray-200: #dce9de;   /* = border */
    --gray-300: #cae0cf;   /* = border-strong */
    --gray-400: #a7bbab;
    --gray-500: #7c8a77;   /* = text-muted */
    --gray-600: #5e6d55;   /* = text-secondary */
    --gray-700: #43503c;
    --gray-800: #23301f;
    --gray-900: #001e00;   /* = text-primary */

    /* ---- Semantic result states: solid / soft tint / foreground ----- */
    --success:      #1fa348;   --success-tint: #e6f7ea;   --success-fg: #0d5b25;
    --warning:      #f59e0b;   --warning-tint: #fdf1dc;   --warning-fg: #7a4d05;
    --error:        #e5484d;   --error-tint:   #fdecec;   --error-fg:   #8f1d21;
    --info:         #2f7fd6;   --info-tint:    #e6f0fb;   --info-fg:    #124a80;

    /* ---- Eight DISTINCT category accents (icon chips): solid + soft tint.
           One hue per category — no collisions (canonical source of truth). -- */
    --cat-text:        #3b82f6;       --cat-text-tint:        #e4effe;   /* blue   */
    --cat-images:      #a855f7;       --cat-images-tint:      #f4e9fe;   /* violet */
    --cat-calculators: #f59e0b;       --cat-calculators-tint: #fdf0d9;   /* amber  */
    --cat-converters:  #14b8a6;       --cat-converters-tint:  #dcf6f3;   /* teal   */
    --cat-binary:      #64748b;       --cat-binary-tint:      #e9edf2;   /* slate  */
    --cat-website:     #ec4899;       --cat-website-tint:     #fde7f1;   /* pink   */
    --cat-developer:   #6366f1;       --cat-developer-tint:   #e8e9fd;   /* indigo */
    --cat-other:       var(--brand);  --cat-other-tint:       var(--brand-subtle); /* brand green */

    /* ---- Type scale (Inter): size + matched line-height ------------- */
    --font-size-xs:  12px;  --line-height-xs:  18px;
    --font-size-sm:  14px;  --line-height-sm:  21px;
    --font-size-md:  16px;  --line-height-md:  25.6px;   /* base body */
    --font-size-lg:  20px;  --line-height-lg:  28px;
    --font-size-xl:  24px;  --line-height-xl:  32px;
    --font-size-2xl: 32px;  --line-height-2xl: 40px;
    --font-size-3xl: 40px;  --line-height-3xl: 46px;
    --font-size-4xl: 56px;  --line-height-4xl: 62px;

    /* ---- Radius scale (sm/md/lg reuse existing values, + new xl) ---- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* ---- Elevation (soft, colored-neutral — exact existing values) -- */
    --shadow-sm: 0 1px 2px rgba(0,30,0,.04), 0 1px 3px rgba(0,30,0,.06);
    --shadow-md: 0 4px 16px rgba(0,30,0,.06);
    --shadow-lg: 0 12px 32px rgba(0,30,0,.08);

    /* ---- Motion (reuse the easing already on tool cards) ------------ */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 150ms;
    --transition-base: 250ms;

    /* ---- Font stacks ------------------------------------------------ */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

/* ----------------------------------------------------------------------
   Dark-mode token overrides — matches the current toggle (body.theme-dark).
   Gray ramp is flipped (50 = darkest, 900 = lightest) so "gray-900 = text /
   gray-200 = border" reads correctly in both themes; tints become
   translucent; shadows deepen. Green/type/radius/motion are mode-agnostic.
   ---------------------------------------------------------------------- */
body.theme-dark{
    --gray-50:  #10181a;
    --gray-100: #16211d;
    --gray-200: #24312b;   /* = border (dark) */
    --gray-300: #31423a;
    --gray-400: #55685e;
    --gray-500: #8a988a;   /* = text-muted (dark) */
    --gray-600: #aab6a8;   /* = text-secondary (dark) */
    --gray-700: #c9d2c7;
    --gray-800: #e4e9e2;
    --gray-900: #f4f7f4;   /* = text-primary (dark) */

    --green-50:  rgba(35,178,74,.12);
    --green-100: rgba(35,178,74,.18);

    --success-tint: rgba(31,163,72,.18);
    --warning-tint: rgba(245,158,11,.18);
    --error-tint:   rgba(229,72,77,.18);
    --info-tint:    rgba(47,127,214,.18);

    /* Category accents + tints — dark variants (brighter accents for contrast) */
    --cat-text:        #60a5fa;   --cat-text-tint:        rgba(59,130,246,.22);
    --cat-images:      #c084fc;   --cat-images-tint:      rgba(168,85,247,.22);
    --cat-calculators: #fbbf3f;   --cat-calculators-tint: rgba(245,158,11,.20);
    --cat-converters:  #2dd4bf;   --cat-converters-tint:  rgba(20,184,166,.22);
    --cat-binary:      #94a3b8;   --cat-binary-tint:      rgba(100,116,139,.24);
    --cat-website:     #f472b6;   --cat-website-tint:     rgba(236,72,153,.22);
    --cat-developer:   #818cf8;   --cat-developer-tint:   rgba(99,102,241,.22);
    --cat-other:       #33c94f;   --cat-other-tint:       rgba(35,178,74,.18);

    /* NOTE: --shadow-* deliberately NOT overridden here — they're already
       applied to components, and this prompt must not restyle. A later
       prompt can adopt darker dark-mode shadows when components are reworked. */
}
/* ================= END · FORMAL DESIGN TOKEN LAYER ==================== */

/* ======================================================================
   STAGE 1 · HEADER / NAV MODERNIZATION (2026-08-29) — token-driven, UI only
   No route/dropdown-data/auth-link/breakpoint changes.
   ====================================================================== */

/* #1 Depth: replace the flat 1px bottom border with the soft shadow token,
      keep the existing glass (backdrop blur + translucency). */
header.navbar{
    border-bottom: 0;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base) var(--ease);
}
header.navbar.sticky-top{ box-shadow: var(--shadow-sm); }
.theme-dark header.navbar{ box-shadow: var(--shadow-sm); }

/* #6 Scroll state: elevation steps up once the page is scrolled (JS toggles
      .is-scrolled on the header — purely presentational). */
header.navbar.sticky-top.is-scrolled,
header.navbar.is-scrolled{ box-shadow: var(--shadow-md); }

/* #5 Icon + toggle buttons on the new radius/motion tokens */
.navbar-nav.order-lg-last .btn-icon{
    border-radius: var(--radius-md);
    transition: color var(--transition-fast) var(--ease),
                background-color var(--transition-fast) var(--ease),
                transform var(--transition-fast) var(--ease);
}
.navbar-nav.order-lg-last .btn-icon:active{ transform: scale(.94); }
.navbar-toggler{
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast) var(--ease),
                border-color var(--transition-fast) var(--ease);
}

/* #3 Category quick-links: per-category accent color-coding preview.
      href-based (no markup change); a resting accent dot + tinted hover. */
.hero-chips .chip{ position: relative; transition: color var(--transition-fast) var(--ease), border-color var(--transition-fast) var(--ease), background var(--transition-fast) var(--ease); }
.hero-chips .chip::before{
    content: "";
    width: 15px; height: 15px; border-radius: 0;
    background: var(--chip-accent, var(--gray-400));
    -webkit-mask: var(--chip-icon, url('../img/tool-icon.svg')) center / contain no-repeat;
            mask: var(--chip-icon, url('../img/tool-icon.svg')) center / contain no-repeat;
    margin-inline-end: 8px;
    flex: 0 0 auto;
}
.hero-chips .chip:hover{
    color: var(--chip-accent, var(--brand-hover));
    border-color: var(--chip-accent, var(--brand-subtle-2));
    background: var(--chip-tint, var(--brand-subtle));
}
.chip[href="#text-content-tools"]{       --chip-accent: var(--cat-text);        --chip-tint: var(--cat-text-tint);        --chip-icon: url('../img/cat/text.svg'); }
.chip[href="#images-editing-tools"]{     --chip-accent: var(--cat-images);      --chip-tint: var(--cat-images-tint);      --chip-icon: url('../img/cat/images.svg'); }
.chip[href="#online-calculators"]{       --chip-accent: var(--cat-calculators); --chip-tint: var(--cat-calculators-tint); --chip-icon: url('../img/cat/calc.svg'); }
.chip[href="#unit-converter-tools"]{     --chip-accent: var(--cat-converters);  --chip-tint: var(--cat-converters-tint);  --chip-icon: url('../img/cat/convert.svg'); }
.chip[href="#development-tools"]{         --chip-accent: var(--cat-developer);   --chip-tint: var(--cat-developer-tint);   --chip-icon: url('../img/cat/developer.svg'); }
.chip[href="#website-management-tools"]{ --chip-accent: var(--cat-website);     --chip-tint: var(--cat-website-tint);     --chip-icon: url('../img/cat/website.svg'); }

/* #4 Language switcher active row on the new green scale tokens */
.lang-menu .dropdown-item.active{
    background: var(--green-100);
    color: var(--green-700);
    font-weight: 600;
}
.lang-menu .dropdown-item.active .lang-check{ color: var(--green-600); }
body.theme-dark .lang-menu .dropdown-item.active{ background: var(--green-100); color: #bff3cc; }
/* ================= END · STAGE 1 HEADER/NAV ========================== */


/* ======================================================================
   STAGE 2 · TOOL-DISCOVERY LAYOUT (2026-08-29) — token-driven, UI only
   No tool/href/grid-breakpoint changes.
   ====================================================================== */

/* ---- Per-category accent mapping (data-cat on blocks + quicknav chips) - */
.category-block[data-cat="text-content-tools"],       .qnav-chip[data-cat="text-content-tools"]{       --cat-accent: var(--cat-text);        --cat-accent-tint: var(--cat-text-tint); }
.category-block[data-cat="images-editing-tools"],     .qnav-chip[data-cat="images-editing-tools"]{     --cat-accent: var(--cat-images);      --cat-accent-tint: var(--cat-images-tint); }
.category-block[data-cat="online-calculators"],       .qnav-chip[data-cat="online-calculators"]{       --cat-accent: var(--cat-calculators); --cat-accent-tint: var(--cat-calculators-tint); }
.category-block[data-cat="unit-converter-tools"],     .qnav-chip[data-cat="unit-converter-tools"]{     --cat-accent: var(--cat-converters);  --cat-accent-tint: var(--cat-converters-tint); }
.category-block[data-cat="binary-converter-tools"],   .qnav-chip[data-cat="binary-converter-tools"]{   --cat-accent: var(--cat-binary);      --cat-accent-tint: var(--cat-binary-tint); }
.category-block[data-cat="website-management-tools"], .qnav-chip[data-cat="website-management-tools"]{ --cat-accent: var(--cat-website);     --cat-accent-tint: var(--cat-website-tint); }
.category-block[data-cat="development-tools"],         .qnav-chip[data-cat="development-tools"]{         --cat-accent: var(--cat-developer);   --cat-accent-tint: var(--cat-developer-tint); }
.category-block[data-cat="other-tools"],              .qnav-chip[data-cat="other-tools"]{              --cat-accent: var(--cat-other);       --cat-accent-tint: var(--cat-other-tint); }

/* ---- #1 Tool icon as a category-colored chip -------------------------- */
.category-block .item-box .avatar{
    width: 42px; height: 42px;
    padding: 9px;
    border-radius: var(--radius-md);
    background: var(--cat-accent-tint, var(--surface-subtle));
    object-fit: contain;
    flex: 0 0 auto;
}

/* ---- #2 Hover/focus: lift with shadow-md + scale(1.02) ---------------- */
a.item-box.card{ transition: transform var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease), border-color var(--transition-fast) var(--ease); }
a.item-box.card:hover,
a.item-box.card:focus-visible{
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
    border-color: var(--cat-accent, var(--brand-subtle-2));
    z-index: 1;
}

/* ---- #4 Section rhythm + per-category heading accent ------------------ */
#tools-box .category-block.card.mb-3{ margin-bottom: 40px !important; }
.category-block .category-box .card-title::before{ background: var(--cat-accent, var(--brand)); }
.category-block .category-box .card-title a:hover{ color: var(--cat-accent, var(--brand-hover)) !important; }
/* subtle divider under each category heading in its accent */
.category-block .category-box{ border-bottom: 2px solid var(--cat-accent-tint, var(--border)) !important; }
/* anchor targets clear both the header and the sticky quick-nav */
.category-block .category-box .card-title{ scroll-margin-top: 132px; }

/* ---- #5 Sticky category quick-nav ------------------------------------- */
.category-quicknav{
    position: sticky;
    top: 66px;
    z-index: 1020;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 24px;
    background: rgba(255,255,255,.9);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    backdrop-filter: saturate(180%) blur(8px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    scrollbar-width: thin;
}
body.theme-dark .category-quicknav{ background: rgba(26,34,52,.9); }
.qnav-chip{
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 13.5px; font-weight: 500;
    text-decoration: none; white-space: nowrap;
    transition: color var(--transition-fast) var(--ease), border-color var(--transition-fast) var(--ease), background var(--transition-fast) var(--ease);
}
.qnav-chip::before{ content: ""; width: 15px; height: 15px; background: var(--cat-accent, var(--gray-400)); -webkit-mask: var(--cat-icon, url('../img/tool-icon.svg')) center / contain no-repeat; mask: var(--cat-icon, url('../img/tool-icon.svg')) center / contain no-repeat; flex: 0 0 auto; }
.qnav-chip:hover,
.qnav-chip:focus-visible{ color: var(--cat-accent, var(--brand-hover)); border-color: var(--cat-accent, var(--brand-subtle-2)); background: var(--cat-accent-tint, var(--brand-subtle)); }

/* ---- #3 Popular Tools — larger, higher-priority featured tier --------- */
.popular-strip{ margin-top: 4px; }
.popular-strip-title{
    display: flex; align-items: center; gap: 10px;
    font-size: var(--font-size-xl); line-height: var(--line-height-xl);
    font-weight: 800; letter-spacing: -.02em;
    color: var(--text-primary); margin-bottom: 16px;
}
.popular-strip-title::before{
    content: "";
    width: 24px; height: 24px; border-radius: var(--radius-sm);
    background: var(--brand);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2l2.9 6.3 6.9.6-5.2 4.6 1.6 6.8L12 17.3 5.8 20.9l1.6-6.8L2.2 8.9l6.9-.6z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2l2.9 6.3 6.9.6-5.2 4.6 1.6 6.8L12 17.3 5.8 20.9l1.6-6.8L2.2 8.9l6.9-.6z'/%3E%3C/svg%3E") center/contain no-repeat;
    flex: 0 0 auto;
}
.popular-strip-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}
.popular-card{
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none; color: var(--text-primary);
    transition: transform var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease), border-color var(--transition-fast) var(--ease);
}
.popular-card:hover,
.popular-card:focus-visible{ transform: scale(1.02); box-shadow: var(--shadow-md); border-color: var(--brand-subtle-2); }
.popular-card-icon{
    width: 46px; height: 46px; border-radius: var(--radius-md);
    background: var(--brand-subtle);
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.popular-card-icon img{ width: 26px; height: 26px; object-fit: contain; }
.popular-card-title{ font-size: 16px; font-weight: 600; line-height: 1.3; }

/* ---- #6 Hero search as an elevated "command palette" input ------------ */
.hero-search-live{ max-width: 640px; margin: 0 auto; }
.hero-search-live .input-icon .hero-search-input,
.hero-search .hero-search-input{
    min-height: 60px;
    font-size: 17px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-strong);
    padding-inline-start: 52px;
}
.hero-search-live .input-icon .input-icon-addon{ inset-inline-start: 10px; }
.hero-search-live .input-icon .hero-search-input:focus,
.hero-search .hero-search-input:focus{
    box-shadow: 0 0 0 .28rem var(--brand-ring), var(--shadow-lg);
    border-color: var(--brand);
}

/* ---- #7 Remove the leftover "A Custom Link → google.com" tile --------- */
.item-box[href*="google.com"]{ display: none !important; }
.category-block .card-body .col-12:has(> .item-box[href*="google.com"]){ display: none !important; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 575.98px){
    .category-quicknav{ top: 62px; border-radius: var(--radius-md); }
    .popular-strip-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .hero-search-live .input-icon .hero-search-input{ min-height: 52px; font-size: 16px; }
}
/* ================= END · STAGE 2 TOOL DISCOVERY ====================== */


/* ======================================================================
   STAGE 3 · TOOL WORKSPACE COMPONENTS (2026-08-29) — token-driven, UI only
   No calc/convert/encode/image logic touched. Targets the Bootstrap classes
   every one of the 149 tool views shares, so the restyle cascades globally.
   Scoped to #tool-box so admin/other forms are unaffected.
   ====================================================================== */

/* ---- #9 Form elements: consistent radius/border tokens ---------------- */
#tool-box .form-control,
#tool-box .form-select,
#tool-box input[type="text"],
#tool-box input[type="number"],
#tool-box input[type="url"],
#tool-box input[type="email"],
#tool-box textarea{
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease);
}
#tool-box .form-control:focus,
#tool-box .form-select:focus{
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem var(--brand-ring);
}

/* ---- #1 Checkboxes → toggle switches ---------------------------------- */
#tool-box .form-check{
    display: flex; align-items: center; gap: .65rem;
    padding-left: 0; min-height: auto; margin-bottom: .5rem;
}
#tool-box .form-check .form-check-input[type="checkbox"]{
    flex: 0 0 auto;
    width: 2.5em; height: 1.4em;
    margin: 0; float: none;
    border: none;
    background-color: var(--gray-300);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E");
    background-position: left center;
    background-repeat: no-repeat;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease), background-position var(--transition-fast) var(--ease);
}
#tool-box .form-check .form-check-input[type="checkbox"]:checked{
    background-color: var(--brand);
    background-position: right center;
}
#tool-box .form-check .form-check-input:focus{ box-shadow: 0 0 0 .2rem var(--brand-ring); }
#tool-box .form-check .form-check-label{ cursor: pointer; user-select: none; }

/* ---- #2 Native selects: restyled (kept native for long lists) --------- */
#tool-box .form-select,
#tool-box select.form-control{
    background-color: var(--surface);
    padding-block: .55rem;
}

/* ---- #3 Live stats → prominent stat pills ---------------------------- */
#tool-box .badge{
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: .4em .7em;
    border-radius: var(--radius-sm);
    color: #fff;
}

/* ---- #4 / #8 Input vs Output panels + labels ------------------------- */
/* Input panel */
#tool-box #input{ background: var(--surface); }
/* Output panel — visually distinct tinted surface, elevated */
#tool-box #result,
#tool-box .result{
    background: var(--surface-subtle);
    box-shadow: var(--shadow-sm);
}
/* A left accent stripe marks the output panel as the distinct result region */
#tool-box #result,
#tool-box .result{ border-inline-start: 3px solid var(--brand) !important; }

/* ---- #5 Button hierarchy: primary lift + ghost secondaries ----------- */
#tool-box .btn-info:hover,
#tool-box .btn-cyan:hover,
#tool-box .btn-success:hover,
#tool-box .btn-primary:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow-md) !important;
}
#tool-box .btn-info:active,
#tool-box .btn-cyan:active,
#tool-box .btn-primary:active{ transform: translateY(0); }
/* Sample / Reset-style secondary actions → ghost/outline */
#tool-box .btn-secondary,
#tool-box .btn-light,
#tool-box .btn-outline-secondary,
#tool-box .btn-outline-primary{
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
    box-shadow: none !important;
}
#tool-box .btn-secondary:hover,
#tool-box .btn-light:hover,
#tool-box .btn-outline-secondary:hover,
#tool-box .btn-outline-primary:hover{
    background: var(--surface-subtle);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

/* ---- #7 Upload drop zone: larger, illustrated, drag-active ----------- */
#tool-box .dropzone,
#tool-box .remote-box,
.dropzone, .remote-box{
    border: 2px dashed var(--border-strong) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--surface-subtle) !important;
    min-height: 200px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: 28px 20px;
    transition: border-color var(--transition-base) var(--ease), background var(--transition-base) var(--ease);
}
#tool-box .dropzone::before,
.dropzone.dz-clickable::before{
    content: "";
    width: 44px; height: 44px; margin-bottom: 10px;
    background: var(--brand);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2'/%3E%3Cpath d='M7 9l5 -5l5 5'/%3E%3Cpath d='M12 4l0 12'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2'/%3E%3Cpath d='M7 9l5 -5l5 5'/%3E%3Cpath d='M12 4l0 12'/%3E%3C/svg%3E") center/contain no-repeat;
    opacity: .85;
}
.dropzone.dz-drag-hover,
#tool-box .dropzone:hover,
#tool-box .remote-box:hover{
    border-color: var(--brand) !important;
    background: var(--brand-subtle) !important;
}

/* ---- #8 Result / preview surfaces as elevated cards ------------------ */
#tool-box #preview-image,
#tool-box .image-container,
#tool-box .qr-code,
#tool-box .result-box{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 16px;
}
/* ================= END · STAGE 3 TOOL WORKSPACE ====================== */

/* ======================================================================
   STAGE 4 · FOOTER MODERNIZATION (2026-08-29) — token-driven, UI only
   ====================================================================== */

/* #1 Column rhythm — more air so it doesn't read as a dense link wall */
.footer{ padding-top: 48px !important; margin-top: 56px !important; }
.footer .container > .row{ row-gap: 16px; }
.footer .container > .row > [class*="col-"]{ padding-bottom: 12px; }
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5{
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    letter-spacing: .06em;
    margin-bottom: 18px;
}
.footer li{ margin-bottom: 11px; }
.footer a{ font-size: var(--font-size-sm); line-height: var(--line-height-sm); }
.footer .text-sm, .footer p.text-sm{ font-size: var(--font-size-xs); line-height: var(--line-height-sm); }
.footer hr.horizontal{ margin-bottom: 40px !important; }

/* #2 Social / share icon rows — rounded chips with a hover-lift */
.share-icons,
.share-icons-sm{ display: inline-flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.btn.btn-simple[class]{
    border-radius: var(--radius-md) !important;
    transition: transform var(--transition-fast) var(--ease),
                box-shadow var(--transition-fast) var(--ease),
                background var(--transition-fast) var(--ease),
                color var(--transition-fast) var(--ease),
                border-color var(--transition-fast) var(--ease) !important;
}
.btn.btn-simple[class]:hover,
.btn.btn-simple[class]:focus-visible{
    transform: translateY(-2px);
    box-shadow: var(--shadow-md) !important;
}

/* #3 Condensed footer on tool pages — a focused-app tail, not boilerplate.
      Hide the 5 widget columns + "Follow us" + divider; keep the copyright. */
body.page-tool .footer .social-share,
body.page-tool .footer hr.horizontal,
body.page-tool .footer .container > .row > .mb-3{ display: none !important; }
body.page-tool .footer{
    margin-top: 32px !important;
    padding-top: 20px !important;
    padding-bottom: 10px;
    background: transparent;
    color: var(--text-muted);
}
body.page-tool .footer .text-sm{ margin-block: 10px !important; }
/* ================= END · STAGE 4 FOOTER ============================= */

/* ======================================================================
   STAGE 5 · DARK-MODE COMPLETION + MOTION (2026-08-29) — presentation only
   ====================================================================== */

/* #1 Dark-mode gaps: visible elevation + legible/vivid category accents --- */
body.theme-dark{
    --shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30);
    --shadow-md: 0 6px 18px rgba(0,0,0,.48), 0 2px 6px rgba(0,0,0,.36);
    --shadow-lg: 0 14px 36px rgba(0,0,0,.58);
    /* (dark category accents now live in the formal token layer above) */
}

/* #3 Homepage grid entrance motion (progressive-enhancement: the js-reveal
      class is only added by JS, so content is fully visible without it, and
      the initial hidden state is scoped to users who allow motion). */
@media (prefers-reduced-motion: no-preference){
    #tools-box.js-reveal .popular-strip,
    #tools-box.js-reveal .category-block{
        opacity: 0;
        transform: translateY(14px);
        transition: opacity var(--transition-base) var(--ease), transform var(--transition-base) var(--ease);
        will-change: opacity, transform;
    }
    #tools-box.js-reveal .popular-strip.in-view,
    #tools-box.js-reveal .category-block.in-view{ opacity: 1; transform: none; }
}

/* #4 Tool action buttons: press feedback, loading + success micro-states --- */
#tool-box .btn{ transition: transform var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease), background-color var(--transition-fast) var(--ease), color var(--transition-fast) var(--ease); }
#tool-box .btn:active{ transform: scale(.97); }
#tool-box .btn:disabled,
#tool-box .btn[disabled]{ opacity: .72; cursor: progress; }
#tool-box .btn.action-done{ position: relative; overflow: hidden; }
#tool-box .btn.action-done::after{
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background: var(--brand-active) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center/22px no-repeat;
    animation: avuis-done .95s var(--ease);
    pointer-events: none;
}
@keyframes avuis-done{ 0%{opacity:0} 12%{opacity:1} 68%{opacity:1} 100%{opacity:0} }

/* #5 prefers-reduced-motion: disable every new hover-lift, entrance, flash -- */
@media (prefers-reduced-motion: reduce){
    a.item-box.card:hover, .popular-card:hover, .tool-card:hover,
    .btn.btn-simple[class]:hover, .chip:hover, .hero-chips .chip:hover,
    #tool-box .btn:active{ transform: none !important; }
    #tools-box.js-reveal .category-block,
    #tools-box.js-reveal .popular-strip{ opacity: 1 !important; transform: none !important; }
    #tool-box .btn.action-done::after{ animation: none; opacity: 0; }
}
/* ================= END · STAGE 5 DARK + MOTION ====================== */

/* ======================================================================
   STAGE 6 · COMPACT TOOL HEADER (2026-08-29) — replaces the parallax hero
   on tool pages so the tool is visible immediately. UI only.
   ====================================================================== */
.tool-header{
    padding: 4px 0 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.tool-header-crumb .breadcrumb{ margin-bottom: 10px; font-size: var(--font-size-xs); line-height: 1.4; }
.tool-header-crumb .breadcrumb-item a{ color: var(--text-secondary); text-decoration: none; }
.tool-header-crumb .breadcrumb-item a:hover{ color: var(--brand-hover); }
.tool-header-crumb .breadcrumb-item.active{ color: var(--text-muted); }
.tool-header-row{ display: flex; align-items: center; gap: 14px; }
.tool-header-icon{
    width: 46px; height: 46px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-subtle);
    border: 1px solid var(--brand-subtle-2);
    border-radius: var(--radius-md);
}
.tool-header-icon img{ width: 28px; height: 28px; object-fit: contain; }
.tool-header-text{ min-width: 0; }
.tool-header-title{
    font-size: 26px; font-weight: 800; letter-spacing: -.02em;
    line-height: 1.2; margin: 0; color: var(--text-primary);
    overflow-wrap: anywhere;
}
.tool-header-desc{
    margin: 3px 0 0; color: var(--text-secondary);
    font-size: var(--font-size-sm); line-height: 1.4;
}
@media (max-width: 575.98px){
    .tool-header-title{ font-size: 22px; }
    .tool-header-icon{ width: 40px; height: 40px; }
    .tool-header-icon img{ width: 24px; height: 24px; }
}
/* ================= END · STAGE 6 COMPACT TOOL HEADER ================= */

/* ======================================================================
   STAGE 7 · HOMEPAGE ICON SYSTEM + CATEGORY REDESIGN (2026-08-29)
   One stroke-icon language, per-category accent + icon. Visual/markup only.
   ====================================================================== */

/* --- Category palette is defined canonically in the FORMAL TOKEN LAYER
       (:root light accents + tints, body.theme-dark dark accents + tints).
       The earlier duplicate block that lived here was removed so there is a
       single source of truth and no hue collisions (Text≠Website, Images≠Developer). --- */

/* --- Per-category stroke icon (used as a mask, tinted by --cat-accent) -- */
.category-block[data-cat="text-content-tools"],       .qnav-chip[data-cat="text-content-tools"]{       --cat-icon: url('../img/cat/text.svg'); }
.category-block[data-cat="images-editing-tools"],     .qnav-chip[data-cat="images-editing-tools"]{     --cat-icon: url('../img/cat/images.svg'); }
.category-block[data-cat="online-calculators"],       .qnav-chip[data-cat="online-calculators"]{       --cat-icon: url('../img/cat/calc.svg'); }
.category-block[data-cat="unit-converter-tools"],     .qnav-chip[data-cat="unit-converter-tools"]{     --cat-icon: url('../img/cat/convert.svg'); }
.category-block[data-cat="binary-converter-tools"],   .qnav-chip[data-cat="binary-converter-tools"]{   --cat-icon: url('../img/cat/binary.svg'); }
.category-block[data-cat="website-management-tools"], .qnav-chip[data-cat="website-management-tools"]{ --cat-icon: url('../img/cat/website.svg'); }
.category-block[data-cat="development-tools"],         .qnav-chip[data-cat="development-tools"]{         --cat-icon: url('../img/cat/developer.svg'); }
.category-block[data-cat="other-tools"],              .qnav-chip[data-cat="other-tools"]{              --cat-icon: url('../img/cat/other.svg'); }

/* --- #6/#3a Category header: light accent tint + accent icon + heading -- */
.category-block .category-box{
    background: var(--cat-accent-tint, var(--surface-subtle)) !important;
    background-image: none !important;
    border-bottom: 0 !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 16px 20px;
}
.category-block .category-box .card-title{
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 20px; font-weight: 700; margin: 0;
}
.category-block .category-box .card-title::before{
    content: ""; width: 30px; height: 30px; flex: 0 0 auto;
    background: var(--cat-accent, var(--brand));
    -webkit-mask: var(--cat-icon, url('../img/tool-icon.svg')) center / contain no-repeat;
            mask: var(--cat-icon, url('../img/tool-icon.svg')) center / contain no-repeat;
}
.category-block .category-box span{ display: block; margin-top: 6px; }

/* --- #1/#2/#3c Tool-card icons: one masked stroke icon in an accent chip - */
.category-block .item-box .avatar{ display: none; }   /* hide the old multicolor illustration */
.tool-ico{
    width: 44px; height: 44px; flex: 0 0 auto;
    margin-inline-end: 1rem;
    border-radius: var(--radius-md);
    background: var(--cat-accent-tint, var(--brand-subtle));
    display: inline-flex; align-items: center; justify-content: center;
}
.tool-ico::before{
    content: ""; width: 24px; height: 24px;
    background: var(--cat-accent, var(--brand));
    -webkit-mask: var(--tool-icon, var(--cat-icon, url('../img/tool-icon.svg'))) center / contain no-repeat;
            mask: var(--tool-icon, var(--cat-icon, url('../img/tool-icon.svg'))) center / contain no-repeat;
}

/* --- #3b Quick-nav chips: accent icon instead of a plain dot ----------- */
.qnav-chip::before{
    content: ""; width: 15px; height: 15px; border-radius: 0;
    background: var(--cat-accent, var(--gray-400));
    -webkit-mask: var(--cat-icon, url('../img/tool-icon.svg')) center / contain no-repeat;
            mask: var(--cat-icon, url('../img/tool-icon.svg')) center / contain no-repeat;
}

/* --- #4 Popular Tools: curated-shortlist treatment -------------------- */
.popular-card{ border-color: var(--brand-subtle-2); box-shadow: inset 3px 0 0 var(--brand), var(--shadow-sm); }
.popular-card:hover{ box-shadow: inset 3px 0 0 var(--brand), var(--shadow-md); }
.popular-card-icon::before{
    content: ""; width: 26px; height: 26px;
    background: var(--brand);
    -webkit-mask: var(--tool-icon, url('../img/tool-icon.svg')) center / contain no-repeat;
            mask: var(--tool-icon, url('../img/tool-icon.svg')) center / contain no-repeat;
}

/* --- #5 Hamburger toggle: stroke icon matching the header controls ----- */
.navbar-toggler .navbar-toggler-icon{ display: none; }
.navbar-toggler{ display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.navbar-toggler .icon-menu{ width: 24px; height: 24px; }
/* ================= END · STAGE 7 ICON SYSTEM ======================== */

/* ======================================================================
   STAGE 8.1 · DISTINCTIVE ICON SYSTEM — gradient circular chips + hover life
   (builds on Stage 7's unified masked stroke icons) — visual/motion only
   ====================================================================== */

/* Gradient-tinted CIRCULAR chip with a soft colored glow + glass top edge */
.tool-ico{
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--cat-accent-tint, var(--brand-subtle)), var(--surface));
    box-shadow: inset 0 1px 1px rgba(255,255,255,.55), 0 5px 14px -6px var(--cat-accent, var(--brand));
    transition: transform var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease);
}
.popular-card-icon{
    border-radius: 50% !important;
    background: linear-gradient(140deg, var(--brand-subtle), var(--surface)) !important;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.55), 0 5px 14px -6px var(--brand);
    transition: transform var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease);
}
/* Compact tool-header chip gets the same treatment for consistency */
.tool-header-icon{
    border-radius: 50%;
    background: linear-gradient(140deg, var(--brand-subtle), var(--surface));
    box-shadow: inset 0 1px 1px rgba(255,255,255,.55), 0 5px 14px -6px var(--brand);
}

/* Dark mode: dim the glass edge, keep the accent glow (accents already glow-tuned) */
body.theme-dark .tool-ico,
body.theme-dark .popular-card-icon,
body.theme-dark .tool-header-icon{ box-shadow: inset 0 1px 1px rgba(255,255,255,.10), 0 5px 16px -6px var(--cat-accent, var(--brand)); }

/* Hover life: the icon gives a subtle bounce + tilt as its card lifts */
@media (prefers-reduced-motion: no-preference){
    a.item-box.card:hover .tool-ico,
    a.item-box.card:focus-visible .tool-ico{
        transform: scale(1.09) rotate(-5deg);
        box-shadow: inset 0 1px 1px rgba(255,255,255,.55), 0 8px 20px -5px var(--cat-accent, var(--brand));
    }
    .popular-card:hover .popular-card-icon{ transform: scale(1.07) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce){
    a.item-box.card:hover .tool-ico,
    .popular-card:hover .popular-card-icon{ transform: none; }
}
/* ================= END · STAGE 8.1 ICON SYSTEM ====================== */

/* ======================================================================
   STAGE 8.2 · CATEGORY SECTION REDESIGN — gradient bands, wavy dividers,
   scroll-spy quick-nav. Visual/motion only.
   ====================================================================== */

/* Category header: flat tint band → soft diagonal gradient band --------- */
.category-block .category-box{
    background: linear-gradient(100deg, var(--cat-accent-tint, var(--surface-subtle)) 0%, var(--surface) 78%) !important;
    background-image: linear-gradient(100deg, var(--cat-accent-tint, var(--surface-subtle)) 0%, var(--surface) 78%) !important;
}
.category-block .category-box .card-title::before{ width: 34px; height: 34px; }

/* Subtle wavy SVG divider in the gap between consecutive sections -------- */
.category-block + .category-block{ position: relative; }
.category-block + .category-block::before{
    content: ""; position: absolute; left: 6%; right: 6%; top: -24px; height: 14px;
    background: var(--border);
    -webkit-mask: url('../img/wave.svg') repeat-x center / 120px 14px;
            mask: url('../img/wave.svg') repeat-x center / 120px 14px;
    opacity: .75; pointer-events: none;
}

/* Scroll-spy: the in-view category's quick-nav chip fills with its color -- */
.qnav-chip.active{
    color: #fff;
    background: var(--cat-accent, var(--brand));
    border-color: var(--cat-accent, var(--brand));
}
.qnav-chip.active::before{ background: #fff; }
body.theme-dark .qnav-chip.active{ color: #0f1720; }
body.theme-dark .qnav-chip.active::before{ background: #0f1720; }
/* ================= END · STAGE 8.2 CATEGORY REDESIGN ================ */

/* ======================================================================
   STAGE 8.3 · HERO — aurora mesh, floating icons, glass command-palette
   search, count-up stat strip. Decorative/motion only; all motion is
   disabled under prefers-reduced-motion (see block at end).
   ====================================================================== */

/* Hero becomes a clipped, layered stage ------------------------------- */
#hero.hero{ position: relative; overflow: hidden; isolation: isolate; }
#hero.hero > .container{ position: relative; z-index: 2; }

/* --- Aurora gradient mesh (blurred colour blobs) --------------------- */
.hero-aurora{
    position: absolute; inset: -28%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(38% 44% at 22% 30%, rgba(35,178,74,.30) 0%, transparent 70%),
        radial-gradient(34% 40% at 82% 22%, rgba(20,166,180,.24) 0%, transparent 72%),
        radial-gradient(40% 46% at 70% 84%, rgba(99,102,241,.18) 0%, transparent 72%),
        radial-gradient(32% 38% at 30% 80%, rgba(245,158,11,.16) 0%, transparent 72%);
    filter: blur(46px) saturate(118%);
    opacity: .95;
    will-change: transform;
    animation: heroAurora 24s ease-in-out infinite alternate;
}
@keyframes heroAurora{
    0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
    50%  { transform: translate3d(1.8%, 1.6%, 0) scale(1.08); }
    100% { transform: translate3d(-1%, 1.2%, 0) scale(1.04); }
}

/* --- Floating category-icon cluster --------------------------------- */
.hero-float{ position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-float-ico{
    position: absolute; width: 48px; height: 48px; border-radius: 15px;
    background: linear-gradient(140deg, var(--cat-accent-tint, var(--brand-subtle)), var(--surface));
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md), inset 0 1px 1px rgba(255,255,255,.6);
    opacity: .92;
    will-change: transform;
    animation: heroFloat 7.5s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
.hero-float-ico::before{
    content: ""; position: absolute; inset: 0; margin: auto; width: 24px; height: 24px;
    background: var(--cat-accent, var(--brand));
    -webkit-mask: var(--cat-icon, url('../img/tool-icon.svg')) center / contain no-repeat;
            mask: var(--cat-icon, url('../img/tool-icon.svg')) center / contain no-repeat;
}
@keyframes heroFloat{
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50%      { transform: translateY(-15px) rotate(5deg); }
}
/* per-icon colour + glyph + placement */
.hero-float-ico[data-cat="text-content-tools"]{       --cat-icon: url('../img/cat/text.svg');      --cat-accent: var(--cat-text);        --cat-accent-tint: var(--cat-text-tint);        top: 20%; inset-inline-start: 7%; }
.hero-float-ico[data-cat="images-editing-tools"]{     --cat-icon: url('../img/cat/images.svg');    --cat-accent: var(--cat-images);      --cat-accent-tint: var(--cat-images-tint);      top: 13%; inset-inline-end: 9%; }
.hero-float-ico[data-cat="online-calculators"]{       --cat-icon: url('../img/cat/calc.svg');      --cat-accent: var(--cat-calculators); --cat-accent-tint: var(--cat-calculators-tint); top: 54%; inset-inline-start: 5%; }
.hero-float-ico[data-cat="unit-converter-tools"]{     --cat-icon: url('../img/cat/convert.svg');   --cat-accent: var(--cat-converters);  --cat-accent-tint: var(--cat-converters-tint);  bottom: 16%; inset-inline-end: 7%; }
.hero-float-ico[data-cat="development-tools"]{        --cat-icon: url('../img/cat/developer.svg'); --cat-accent: var(--cat-developer);   --cat-accent-tint: var(--cat-developer-tint);   bottom: 13%; inset-inline-start: 13%; }
.hero-float-ico[data-cat="website-management-tools"]{ --cat-icon: url('../img/cat/website.svg');   --cat-accent: var(--cat-website);     --cat-accent-tint: var(--cat-website-tint);     top: 42%; inset-inline-end: 4%; }
/* keep the cluster from crowding the copy on smaller viewports */
@media (max-width: 1199.98px){ .hero-float{ display: none; } }

/* --- Glassmorphic command-palette search ---------------------------- */
.hero-search{ position: relative; }
.hero-search-live .input-icon .hero-search-input,
.hero-search .hero-search-input{
    background: rgba(255,255,255,.72);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
            backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255,255,255,.75);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.7);
    padding-inline-end: 52px;
}
.hero-search-live .input-icon .hero-search-input:focus,
.hero-search .hero-search-input:focus{
    background: var(--surface);
    border-color: var(--brand);
    box-shadow: var(--shadow-lg), 0 0 0 .25rem var(--brand-ring);
}
.hero-search-hint{
    position: absolute; top: 27px; inset-inline-end: 16px; transform: translateY(-50%);
    pointer-events: none; z-index: 3; opacity: 1;
    transition: opacity var(--transition-fast) var(--ease);
}
.hero-search-hint kbd{
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1;
    color: var(--text-muted); background: var(--surface-subtle);
    border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px;
}
.hero-search:focus-within .hero-search-hint{ opacity: 0; }
@media (max-width: 575.98px){ .hero-search-hint{ display: none; } }

/* --- Count-up stat strip -------------------------------------------- */
.hero-stats{
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 10px 44px; margin-top: 32px;
}
.hero-stat{ display: flex; flex-direction: column; align-items: center; min-width: 80px; }
.hero-stat-num{
    font-size: 30px; font-weight: 800; line-height: 1;
    letter-spacing: -0.02em; color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
    .hero-stat-num{
        /* Vertical gradient: clip samples the text HEIGHT (equal for all numbers),
           so "8", "150+" and "100%" render identically regardless of width. */
        background: linear-gradient(180deg, var(--brand) 0%, #17a5b0 100%);
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
.hero-stat-label{ margin-top: 7px; font-size: 13px; font-weight: 500; color: var(--text-secondary); }
@media (max-width: 575.98px){
    .hero-stats{ gap: 8px 30px; margin-top: 24px; }
    .hero-stat-num{ font-size: 24px; }
}

/* --- Dark mode: blobs read as glow, glass darkens ------------------- */
body.theme-dark .hero-aurora{
    background:
        radial-gradient(38% 44% at 22% 30%, rgba(45,214,96,.24) 0%, transparent 70%),
        radial-gradient(34% 40% at 82% 22%, rgba(34,197,214,.20) 0%, transparent 72%),
        radial-gradient(40% 46% at 70% 84%, rgba(129,140,248,.18) 0%, transparent 72%),
        radial-gradient(32% 38% at 30% 80%, rgba(251,191,63,.14) 0%, transparent 72%);
    filter: blur(52px) saturate(125%);
    opacity: .6;
}
body.theme-dark .hero-float-ico{
    background: linear-gradient(140deg, var(--cat-accent-tint, rgba(255,255,255,.05)), rgba(255,255,255,.02));
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 8px 22px -8px var(--cat-accent, var(--brand)), inset 0 1px 1px rgba(255,255,255,.10);
}
body.theme-dark .hero-search-live .input-icon .hero-search-input,
body.theme-dark .hero-search .hero-search-input{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
}
body.theme-dark .hero-search-live .input-icon .hero-search-input:focus,
body.theme-dark .hero-search .hero-search-input:focus{
    background: rgba(255,255,255,.09);
    border-color: var(--brand);
}

/* --- Kill ALL hero decorative motion under reduced-motion ----------- */
@media (prefers-reduced-motion: reduce){
    .hero-aurora, .hero-float-ico{ animation: none !important; }
    .hero-aurora, .hero-float{ translate: none !important; }
}
/* ==================== END · STAGE 8.3 HERO ========================= */

/* ======================================================================
   STAGE 8.4 · Token rollout completion
   - Task 2: tool-page header icon uses the unified category-tinted stroke
     glyph (replaces the per-tool random-palette raster/vector icon).
   - Task 4: --font-mono applied to the input/output panes of code-facing
     tools (plain-textarea tools only; the JSON editor is ACE-based and
     already monospace — left untouched to preserve its cursor metrics).
   ====================================================================== */

/* --- Task 2: tool-header icon → category stroke glyph ---------------- */
.tool-header[data-cat="text-content-tools"]{       --cat-accent: var(--cat-text);        --cat-accent-tint: var(--cat-text-tint);        --cat-icon: url('../img/cat/text.svg'); }
.tool-header[data-cat="images-editing-tools"]{     --cat-accent: var(--cat-images);      --cat-accent-tint: var(--cat-images-tint);      --cat-icon: url('../img/cat/images.svg'); }
.tool-header[data-cat="online-calculators"]{       --cat-accent: var(--cat-calculators); --cat-accent-tint: var(--cat-calculators-tint); --cat-icon: url('../img/cat/calc.svg'); }
.tool-header[data-cat="unit-converter-tools"]{     --cat-accent: var(--cat-converters);  --cat-accent-tint: var(--cat-converters-tint);  --cat-icon: url('../img/cat/convert.svg'); }
.tool-header[data-cat="binary-converter-tools"]{   --cat-accent: var(--cat-binary);      --cat-accent-tint: var(--cat-binary-tint);      --cat-icon: url('../img/cat/binary.svg'); }
.tool-header[data-cat="website-management-tools"]{ --cat-accent: var(--cat-website);     --cat-accent-tint: var(--cat-website-tint);     --cat-icon: url('../img/cat/website.svg'); }
.tool-header[data-cat="development-tools"]{        --cat-accent: var(--cat-developer);   --cat-accent-tint: var(--cat-developer-tint);   --cat-icon: url('../img/cat/developer.svg'); }
.tool-header[data-cat="other-tools"]{              --cat-accent: var(--cat-other);       --cat-accent-tint: var(--cat-other-tint);       --cat-icon: url('../img/cat/other.svg'); }

.tool-header-icon{
    background: linear-gradient(140deg, var(--cat-accent-tint, var(--brand-subtle)), var(--surface));
    box-shadow: inset 0 1px 1px rgba(255,255,255,.55), 0 5px 14px -6px var(--cat-accent, var(--brand));
}
.tool-header-icon::before{
    content: ""; width: 26px; height: 26px; flex: 0 0 auto;
    background: var(--cat-accent, var(--brand));
    -webkit-mask: var(--tool-icon, var(--cat-icon, url('../img/tool-icon.svg'))) center / contain no-repeat;
            mask: var(--tool-icon, var(--cat-icon, url('../img/tool-icon.svg'))) center / contain no-repeat;
}
@media (max-width: 575.98px){ .tool-header-icon::before{ width: 22px; height: 22px; } }
body.theme-dark .tool-header-icon{ box-shadow: inset 0 1px 1px rgba(255,255,255,.10), 0 5px 16px -6px var(--cat-accent, var(--brand)); }

/* --- Task 4: monospace panes for code-facing tools ------------------ */
#tool-box[data-tool="css-beautifier"] textarea,
#tool-box[data-tool="css-minifier"] textarea,
#tool-box[data-tool="html-beautifier"] textarea,
#tool-box[data-tool="html-minifier"] textarea,
#tool-box[data-tool="javascript-beautifier"] textarea,
#tool-box[data-tool="javascript-minifier"] textarea,
#tool-box[data-tool="csv-to-json"] textarea,
#tool-box[data-tool="xml-to-json"] textarea,
#tool-box[data-tool="tsv-to-json"] textarea,
#tool-box[data-tool="json-to-csv"] textarea,
#tool-box[data-tool="json-to-xml"] textarea,
#tool-box[data-tool="json-to-text"] textarea,
#tool-box[data-tool="json-to-tsv"] textarea{
    font-family: var(--font-mono) !important;
    font-variant-ligatures: none;
}
/* ==================== END · STAGE 8.4 ============================== */

/* ======================================================================
   STAGE 8.5 · CONSTELLATION HERO (Part 1)
   - Task 1: multi-hue mesh -> single green-family glow.
   - Task 2: floating category chips -> a low-opacity "tool constellation"
     ring of category glyphs around the search, with staggered load-in,
     independent slow drift, and mouse parallax (reused). All motion is
     motion-safe only; reduced-motion renders the ring at rest.
   ====================================================================== */

/* --- Task 1: single-family (green) background ----------------------- */
.hero-aurora{
    background: radial-gradient(58% 52% at 50% 20%, rgba(35,178,74,.14) 0%, transparent 70%) !important;
    filter: blur(34px);
}
body.theme-dark .hero-aurora{
    background: radial-gradient(58% 52% at 50% 20%, rgba(35,178,74,.16) 0%, transparent 72%) !important;
    opacity: .85;
}

/* --- Task 2: constellation glyphs (strip the chip; just a faint glyph) - */
.hero-float-ico{
    width: 52px; height: 52px;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.hero-float-ico::before{
    width: 100%; height: 100%;
    opacity: .18;                 /* resting faintness (15-20%) */
}
body.theme-dark .hero-float-ico::before{ opacity: .24; }

/* one glyph per category: accent + icon + ring position + entrance vector */
.hero-float-ico[data-cat="text-content-tools"]{       --cat-icon:url('../img/cat/text.svg');      --cat-accent:var(--cat-text);        top:14%; inset-inline-start:19%; --ex:-18px; --ey:-14px; }
.hero-float-ico[data-cat="images-editing-tools"]{     --cat-icon:url('../img/cat/images.svg');    --cat-accent:var(--cat-images);      top:9%;  inset-inline-start:46%; --ex:2px;   --ey:-22px; }
.hero-float-ico[data-cat="online-calculators"]{       --cat-icon:url('../img/cat/calc.svg');      --cat-accent:var(--cat-calculators); top:16%; inset-inline-start:73%; --ex:18px;  --ey:-14px; }
.hero-float-ico[data-cat="unit-converter-tools"]{     --cat-icon:url('../img/cat/convert.svg');   --cat-accent:var(--cat-converters);  top:45%; inset-inline-start:84%; --ex:24px;  --ey:0; }
.hero-float-ico[data-cat="binary-converter-tools"]{   --cat-icon:url('../img/cat/binary.svg');    --cat-accent:var(--cat-binary);      top:71%; inset-inline-start:74%; --ex:18px;  --ey:16px; }
.hero-float-ico[data-cat="website-management-tools"]{ --cat-icon:url('../img/cat/website.svg');   --cat-accent:var(--cat-website);     top:78%; inset-inline-start:46%; --ex:0;     --ey:22px; }
.hero-float-ico[data-cat="development-tools"]{        --cat-icon:url('../img/cat/developer.svg'); --cat-accent:var(--cat-developer);   top:70%; inset-inline-start:18%; --ex:-18px; --ey:16px; }
.hero-float-ico[data-cat="other-tools"]{              --cat-icon:url('../img/cat/other.svg');     --cat-accent:var(--cat-other);       top:44%; inset-inline-start:8%;  --ex:-24px; --ey:0; }

/* show the ring on desktop; hide below lg to protect the copy on phones */
@media (min-width: 992px){ .hero-float{ display: block !important; } }
@media (max-width: 991.98px){ .hero-float{ display: none !important; } }

@keyframes constelIn{
    from{ opacity: 0; transform: translate(var(--ex,0), var(--ey,0)) scale(.8); }
    to{   opacity: 1; transform: none; }
}
@keyframes constelDrift{
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: no-preference){
    /* staggered load-in from further out (element), independent slow drift (glyph) */
    .hero-float-ico{ animation: constelIn .9s var(--ease) var(--edelay, 0s) both; }
    .hero-float-ico::before{ animation: constelDrift var(--fdur, 8s) ease-in-out var(--fdelay, 0s) infinite; }
}
@media (prefers-reduced-motion: reduce){
    .hero-float-ico, .hero-float-ico::before{ animation: none !important; transform: none !important; }
}
/* ==================== END · STAGE 8.5 CONSTELLATION ================= */

/* ======================================================================
   STAGE 8.6 · PER-TOOL ICON SET — each tool gets a function-specific modern
   stroke glyph (assets/img/toolset/*.svg) instead of the generalized category
   glyph. Driven by [data-tool] on the icon chip; category glyph is the fallback.
   ====================================================================== */
[data-tool="ascii-to-binary"],[data-tool="ascii-to-text"],[data-tool="binary-to-ascii"],[data-tool="binary-to-decimal"],[data-tool="binary-to-hex"],[data-tool="binary-to-octal"],[data-tool="binary-to-text"],[data-tool="decimal-to-binary"],[data-tool="decimal-to-hex"],[data-tool="decimal-to-octal"],[data-tool="decimal-to-text"],[data-tool="hex-to-binary"],[data-tool="hex-to-decimal"],[data-tool="hex-to-octal"],[data-tool="hex-to-text"],[data-tool="octal-to-binary"],[data-tool="octal-to-decimal"],[data-tool="octal-to-hex"],[data-tool="octal-to-text"],[data-tool="text-to-ascii"],[data-tool="text-to-binary"],[data-tool="text-to-decimal"],[data-tool="text-to-hex"],[data-tool="text-to-octal"]{ --tool-icon: url('../img/toolset/binary.svg'); }
[data-tool="apparent-power-converter"],[data-tool="charge-converter"],[data-tool="current-converter"],[data-tool="energy-converter"],[data-tool="frequency-converter"],[data-tool="power-converter"],[data-tool="reactive-energy-converter"],[data-tool="reactive-power-converter"],[data-tool="voltage-converter"]{ --tool-icon: url('../img/toolset/bolt.svg'); }
[data-tool="json-editor"],[data-tool="json-formatter"],[data-tool="json-minify"],[data-tool="json-validator"],[data-tool="json-viewer"]{ --tool-icon: url('../img/toolset/braces.svg'); }
[data-tool="average-calculator"],[data-tool="confidence-interval-calculator"],[data-tool="probability-calculator"]{ --tool-icon: url('../img/toolset/calc.svg'); }
[data-tool="age-calculator"],[data-tool="days-calculator"],[data-tool="hours-calculator"],[data-tool="month-calculator"]{ --tool-icon: url('../img/toolset/calendar.svg'); }
[data-tool="srt-to-vtt"],[data-tool="vtt-to-srt"]{ --tool-icon: url('../img/toolset/captions.svg'); }
[data-tool="case-converter"]{ --tool-icon: url('../img/toolset/case.svg'); }
[data-tool="time-converter"]{ --tool-icon: url('../img/toolset/clock.svg'); }
[data-tool="base64-decode"],[data-tool="base64-encode"],[data-tool="html-decode"],[data-tool="html-encode"]{ --tool-icon: url('../img/toolset/code.svg'); }
[data-tool="currency-converter"],[data-tool="loan-calculator"],[data-tool="paypal-fee-calculator"],[data-tool="stripe-fee-calculator"]{ --tool-icon: url('../img/toolset/coins.svg'); }
[data-tool="word-counter"]{ --tool-icon: url('../img/toolset/counter.svg'); }
[data-tool="image-cropper"]{ --tool-icon: url('../img/toolset/crop.svg'); }
[data-tool="random-word-generator"]{ --tool-icon: url('../img/toolset/dice.svg'); }
[data-tool="digital-converter"],[data-tool="each-converter"],[data-tool="illuminance-converter"],[data-tool="pace-converter"],[data-tool="parts-per-converter"],[data-tool="pressure-converter"],[data-tool="speed-converter"],[data-tool="torque-converter"],[data-tool="volumetric-flow-rate-converter"]{ --tool-icon: url('../img/toolset/exchange.svg'); }
[data-tool="css-beautifier"],[data-tool="css-minifier"],[data-tool="html-beautifier"],[data-tool="html-minifier"],[data-tool="javascript-beautifier"],[data-tool="javascript-deobfuscator"],[data-tool="javascript-minifier"],[data-tool="javascript-obfuscator"]{ --tool-icon: url('../img/toolset/filecode.svg'); }
[data-tool="disclaimer-generator"],[data-tool="lorem-ipsum-generator"],[data-tool="privacy-policy-generator"],[data-tool="terms-and-condition-generator"]{ --tool-icon: url('../img/toolset/filetext.svg'); }
[data-tool="flip-image"]{ --tool-icon: url('../img/toolset/flip.svg'); }
[data-tool="ip-address-lookup"],[data-tool="what-is-my-ip"]{ --tool-icon: url('../img/toolset/globe.svg'); }
[data-tool="md5-generator"]{ --tool-icon: url('../img/toolset/hash.svg'); }
[data-tool="calorie-calculator"],[data-tool="tdee-calculator"]{ --tool-icon: url('../img/toolset/health.svg'); }
[data-tool="find-facebook-id"],[data-tool="uuid-generator"]{ --tool-icon: url('../img/toolset/idcard.svg'); }
[data-tool="base64-to-image"],[data-tool="image-to-base64"]{ --tool-icon: url('../img/toolset/imgcode.svg'); }
[data-tool="url-decode"],[data-tool="url-encode"],[data-tool="url-parser"],[data-tool="utm-builder"]{ --tool-icon: url('../img/toolset/link.svg'); }
[data-tool="comma-separator"],[data-tool="number-to-word-converter"],[data-tool="remove-line-breaks"],[data-tool="word-to-number-converter"]{ --tool-icon: url('../img/toolset/list.svg'); }
[data-tool="password-generator"]{ --tool-icon: url('../img/toolset/lock.svg'); }
[data-tool="color-converter"],[data-tool="hex-to-rgb"],[data-tool="rgb-to-hex"]{ --tool-icon: url('../img/toolset/palette.svg'); }
[data-tool="cpm-calculator"],[data-tool="discount-calculator"],[data-tool="gst-calculator"],[data-tool="margin-calculator"],[data-tool="percentage-calculator"],[data-tool="sales-tax-calculator"]{ --tool-icon: url('../img/toolset/percent.svg'); }
[data-tool="ico-converter"],[data-tool="ico-to-png"],[data-tool="image-converter"],[data-tool="jpg-converter"],[data-tool="jpg-to-bmp"],[data-tool="jpg-to-gif"],[data-tool="jpg-to-ico"],[data-tool="jpg-to-png"],[data-tool="jpg-to-webp"],[data-tool="png-to-bmp"],[data-tool="png-to-gif"],[data-tool="png-to-ico"],[data-tool="png-to-jpg"],[data-tool="png-to-webp"],[data-tool="webp-to-jpg"],[data-tool="webp-to-png"]{ --tool-icon: url('../img/toolset/photo.svg'); }
[data-tool="youtube-thumbnail-downloader"]{ --tool-icon: url('../img/toolset/play.svg'); }
[data-tool="qr-code-decoder"],[data-tool="qr-code-generator"]{ --tool-icon: url('../img/toolset/qr.svg'); }
[data-tool="text-repeater"]{ --tool-icon: url('../img/toolset/repeat.svg'); }
[data-tool="image-enlarger"],[data-tool="image-resizer"]{ --tool-icon: url('../img/toolset/resize.svg'); }
[data-tool="number-to-roman-numerals"],[data-tool="roman-numerals-to-number"]{ --tool-icon: url('../img/toolset/roman.svg'); }
[data-tool="rotate-image"]{ --tool-icon: url('../img/toolset/rotate.svg'); }
[data-tool="angle-converter"],[data-tool="area-converter"],[data-tool="length-converter"],[data-tool="volume-converter"],[data-tool="weight-converter"]{ --tool-icon: url('../img/toolset/ruler.svg'); }
[data-tool="text-to-slug"]{ --tool-icon: url('../img/toolset/slug.svg'); }
[data-tool="text-sorter"]{ --tool-icon: url('../img/toolset/sort.svg'); }
[data-tool="csv-to-json"],[data-tool="json-to-csv"],[data-tool="json-to-text"],[data-tool="json-to-tsv"],[data-tool="json-to-xml"],[data-tool="tsv-to-json"],[data-tool="xml-to-json"]{ --tool-icon: url('../img/toolset/table.svg'); }
[data-tool="temperature-converter"]{ --tool-icon: url('../img/toolset/thermo.svg'); }