*{
    box-sizing: border-box;
    scrollbar-width: thin;
}
:root{
    --header-height: 60px;
}

body{
    margin: 0;
    font-family: "Poppins", sans-serif;
    overflow-x: hidden;
}


h1,h2,h3,h5,h5{margin: 0;}

header{
    background-color: #ffffff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 20;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    height: var(--header-height);
}

.header-right-panel .log-area li a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.container{
    width: calc(100% - 40px);
    margin: 0 auto;
    max-width: 100%;
}

.row {
    display: flex;
    flex-wrap: wrap;
}
.row.justify-between {
    justify-content: space-between;
    align-items: center;
}

.right-side-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px 0px 0px 0px;
}

.logo-container {
    font-size: 27px;
    padding: 5px 0px;
    color: #fff;
    width: 125px;
}

ul{margin: 0;padding: 0;}
li{list-style: none;}

.right-side-navigation ul li {
    display: inline-block;
}

.right-side-navigation ul li a {
    padding: 10px;
    display: block;
    font-size: 18px;
    text-decoration: none;
    color: #000;
    border: 1px solid #000;
}
img{max-width: 100%;}
.tumb-container {
    display: flex;
    flex-wrap: wrap;
    gap:10px;
    margin: 30px 0px 0px 0px;
}
.tumb-image {
    max-width: 100px;
    position: relative;
}

.tumb-image img {
    object-fit: cover;
    height: 100%;
}
.tumb-container .thumb_headline, .tumb-container .thumb_sub_headline, .tumb-container p , .tumb-container img{
    display: none;
}

.tabs-button-area {
    display: flex;
    flex-wrap: wrap;
    margin: 30px 0px 10px 0px;
    justify-content: center;
    background-color: #f1f1f1;
}
.tabs-button-area .tabs-item {
    background-color: #f2f2f2;
    padding: 10px 16px;
    color: #000;
    cursor: pointer;
    font-size: 12px;
}
.tabs-button-area .tabs-item:not(:last-child){
    border-right: 1px solid #ececec;
}
.tabs-button-area .tabs-item:first-child{
    border-top-left-radius: 4px;
}
.tabs-button-area .tabs-item:last-child{
    border-top-right-radius: 4px;
}
.form-group-setting , .form-group{
    max-width: 550px;
    margin: 0 auto;
}
.form-heading {
    font-size: 14px;
    display: block;
    margin: 5px 0px 5px 0px;
}
.form-input input {
    width: 100%;
    padding: 10px 10px;
    font-size: 13px;
    outline: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.tabs-container {
    padding: 24px 0px 0px 0px;
    display: none;
}
.tabs-container.active{display: block}
.form-input {
    margin: 0px 0px 16px 0px;
}

.button-submit-group {
    max-width: 553px;
    width: 100%;
    margin: 25px auto 0 auto;
    text-align: right;
}

.button-submit-group button {
    outline: 0;
    font-size: 13px;
    cursor: pointer;
    background-color: #eb3b6f;
    border: 0;
    color: #fff;
    padding: 10px 15px;
    border-radius: 4px;
}

.tabs-button-area .tabs-item.active {
background-color: #7c3aed;
    color: #fff;
    border: 0;
}
.form-group.file_upload {
    border: 1px solid #ddd;
    padding: 15px 10px 20px 15px;
    display: grid
;
    margin: 0px auto 20px auto;
    row-gap: 15px;
}
.upload-grid-row {
    display: grid
;
    grid-template-columns: 1fr 120px;
    column-gap: 10px;
}
.form-group.file_upload .form-heading {
    font-size: 13px;
    border-bottom: 1px solid #ddd;
    margin: 10px 0px 10px 0px;
    padding: 0px 0px 5px 0px;
    flex: 0 0 100%;
}
.form-group.file_upload input[type='text']{
    width: 100%;
    padding: 5px 10px;
    font-size: 14px;
    border: 1px solid #5d5d5d;
}
.form-group.file_upload button {
    min-width: 100px;
    border: 1px solid #5d5d5d;
    border-left: 0;
    cursor: pointer;
    background-color: #ddd;
    white-space: nowrap;
}


.voice-form {
    border: 1px solid #ddd;
    padding: 15px 10px 20px 15px;
    display: flex;
    flex-wrap: wrap;
    max-width: 553px;
    margin: 20px auto 60px auto;
}
.form-group.voice-selection {
    flex: 0 0 100%;
    margin: 0px 0px 20px 0px;
}

.form-group.voice-selection select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #5d5d5d;
    outline: 0;
}


.voice-form .button-submit-group {
    text-align: left;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
}

.voice-form .button-submit-group button {
    width: 150px;
}
.form-group select {
    width: 100%;
    padding: 6px 10px;
    font-size: 15px;
    outline: 0;
}
.form-group input[type="color"] {
    width: 100%;
    height: 43px;
    border: 0;
    padding: 5px;
}

.tabs-container h2 {
    text-align: center;
    margin: 0px 0px 20px 0px;
    font-weight: 500;
    background-color: #ddd;
    padding: 10px;
    font-size: 20px;
    border-radius: 4px;
}
.form-group.voice-speed input[type="range"] {
    width: 90%;
    height: 5px;
}

.form-group.voice-speed .form-heading {
    font-size: 15px;
    text-align: left;
}


.form-input input:disabled, .tabs-form input[type='text']:read-only , textarea:disabled , select:disabled{
    background-color: #ddd;
}
.voice-test-area {
    flex: 0 0 100%;
}

.voice-test-area textarea{
    width: 100%;
    height: 150px;
    outline: 0;
    resize: none;
}
.header-right-panel .log-area {
       gap: 0px 16px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    scroll-behavior: smooth;
}
.header-right-panel .log-area::-webkit-scrollbar {
    height: 4px;
}
.header-right-panel .log-area::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}

.text-summ-row {
    display: flex;
    flex-wrap: wrap;
    margin: 30px 0px 0px 0px;
}
.right-col , .left-col{
    width: calc(50% - 10px)
}

.text-summ-row textarea {
    width: 100%;
    height: 300px;
    outline: 0;
    margin: 10px 0px 10px 0px;
}
.images-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0px 20px 0px;
}
.images-container .image_thumb {
    width: 100px;
    height: 150px;
    position: relative;
}

.images-container .image_thumb img, .images-container .image_thumb video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.images-container .image_thumb input[type="checkbox"] {
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 0;
    margin: 0;
}

.search-area button {
    width: 80px;
    border: 0;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    outline: 0;
}
.form-group .search-area input[type="text"][type="text"] {
    width: calc(100% - 80px);
    padding: 8px 10px;
    font-size: 14px;
    border: 0;
    outline: 0;
    border-radius: 4px;
    text-transform: capitalize;
}

.search-area {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #000;
    border-radius: 4px;
    margin: 30px 0px 0px 0px;
    width: 400px;
}
.right-side-navigation h1 {
    text-transform: capitalize;
    font-weight: 600;
    font-size: 20px;
}
.header-right-panel .log-area li, .header-right-panel .log-area li a {
    color: #000;
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}
.header-right-panel .log-area li a{
    border-right: 1px solid #ddd;
    padding-right: 10px;
}
 .log-area .btn.btn-link {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    outline: 0;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    color: #374151;
    font: inherit;
    font-size: 13px;
}
 .log-area .btn.btn-link:hover { background-color: #f9fafb; }
.log-area li {
    display: inline-block;
}

.form-group.voice-speed {
    flex: 0 0 50%;
}

audio {
    margin: 20px auto 0px auto;
}

.logo-container a {
    color: #000;
    text-decoration: none;
    line-height: 1;
    font-size: 22px;
}

.login-area {
    max-width: 550px;
    margin: 50px auto 0px auto;
    position: relative;
    border: 1px solid #d8d8d8;
    padding: 40px;
    border-radius: 4px;
}

.login-area h2 {
    font-size: 22px;
    font-family: sans-serif;
    font-weight: 500;
    text-align: center;
    margin: 0px 0px 20px 0px;
    background-color: #ddd;
    padding: 10px;
}

.login-area input {
    width: 100%;
    padding: 5px 12px;
    outline: 0;
}

.login-area .login-form {
    margin: 0px 0px 16px 0px;
}

.login-area .lable-name {
    font-family: sans-serif;
    margin: 0px 0px 10px 0px;
}

.login-area button {
    width: 180px;
    height: 40px;
    display: block;
    margin: 30px auto 0px auto;
    cursor: pointer;
    border: 1px solid #5d5d5d;
    background-color: #3d3b3b;
    color: #fff;
    border-radius: 4px;
    font-size: 17px;
}
.login-area .error {
    margin: 20px 0px 0px 0px;
    text-align: center;
    border-radius: 4px;
}
.error-container {
    margin: 20px 0px 0px 0px;
    background-color: #dd7373;
    display: inline-block;
    color: #ffffff;
    padding: 5px 10px;
    line-height: 1;
    font-size: 12px;
    border: 1px solid #c30606;
}
.generate-video-container {
    max-width: 553px;
    width: calc(100% - 40px);
    margin: 20px auto 0px auto;
    text-align: center;
}

.generate-video-container button {
    height: 50px;
    width: auto;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #000;
    background-color: #2c2c2c;
    color: #fff;
    font-size: 18px;
    outline: 0;
    padding: 0px 20px;
}


.generate-video-container button.active {
    cursor: not-allowed;
    background-color: #ddd;
    color: #a5a5a5;
    border-color: #ddd;
    pointer-events: none;
}

.video-container {
    max-width: 320px;
    width: 100%;
    margin: 20px 0px 60px 0px;
}

.video-container video {
    object-fit: cover;
    background-color: #000;
    border-radius: 4px;
    height: auto;
    max-width: 100%;
    margin-bottom: 15px
}
.video-container a {
    background-color: #101010;
    color: #fff;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 4px;
}


#cont_proccess {
    margin: 0px 0px 60px 0px;
    background-color: #242424;
    color: #fff;
    border: 0;
    width: 200px;
    height: 40px;
    font-size: 20px;
    border-radius: 4px;
    cursor: pointer;
}
.loader {
    flex-wrap: wrap;
    position: fixed;
    z-index: 99;
    top: 0;
    background-color: rgb(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: none;
}
.loader.active{display: flex;}

.loader .loader-container {
    background-color: #f2f2f2;
    padding: 5px 20px;
    font-size: 19px;
    display: block;
    line-height: 30px;
    border-radius: 4px;
}

.row.space-between {
    justify-content: space-between;
}

.inner-tabs-area {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: flex-start;
}

.left-inner-tab-panel {
    border-right: 1px solid #ddd;
}

.left-inner-tab-panel ul li{
    font-size: 13px;
    border-bottom: 1px solid #ddd;
    padding: 10px 10px;
    cursor: pointer;
}

.right-inner-tab-panel {
    padding: 0px 0px 60px 10px;
    min-width: 0;
}

.left-inner-tab-panel ul li:last-child{border-bottom: 0;}
.left-inner-tab-panel ul li.active{
    font-weight: 600;
    color: #000;
    border-right: 2px solid #000;
    background-color: #1fdff4;
}

.tabs-form label {
    font-size: 13px;
    display:block;
    margin-bottom: 5px;
}

.tabs-form input[type='text'], .tabs-form input[type='password'], .tabs-form select{
    padding: 10px 15px;
    border: 1px solid #ddd;
    font-size: 13px;
    outline: 0;
    border-radius: 4px;
    width: 100%;
}

.tabs-form input.password-fieald{
    -webkit-text-security: square;
    color: #ada4a4;
}

.tabs-form input.password-fieald:focus{
    -webkit-text-security: none;
    color: #000;
}
input[type="range"] {
    height: 5px;
    margin-top: 10px;
    cursor: pointer;
}

.tabs-form-group {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    gap:10px;
}

.button {
    cursor: pointer;
    border: 0;
    font-size: 11px;
    padding: 10px 15px;
    outline: 0;
    border-radius: 4px;
    background-color: #9cacf1;
    color: #fff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
}

 table {
    border-collapse: collapse;
    margin-top: 10px;
    max-width: 100%;
    width: 100%;
}

 table th{
    text-align: left;
    padding: 5px 10px;
    font-size: 12px;
    text-transform: uppercase;
    color: #000;
    white-space: nowrap;
    border: 1px solid #d1d1d1;
}
table  td{
    font-size: 12px;
    padding: 5px 10px;
    white-space: nowrap;
    border: 1px solid #d1d1d1;
        text-overflow: ellipsis;
    overflow: hidden
}

 table button{
    border: 1px solid #ddd;
    font-size: 12px;
    text-transform: capitalize;
    line-height: 1;
    border-radius: 2px;
    cursor: pointer;
    padding: 4px 8px;
}
.inner-tabs {
    display: none;
    max-width: 100%;
}
.inner-tabs.active {
    display: block;
}

.tabs-form {
    display: inline-block;
    align-content: flex-end;
}
.tabs-form-group select{
    border: 1px solid #ddd;
    padding: 10px 10px;
    font-size: 12px;
    outline: 0;
    border-radius: 4px;
    width: 100%;
}
.tabs-form.width-100 {
    display: block;
    margin-bottom: 15px;
    flex: 0 0 100%;
}
.tabs-form.width-large {
    width: 50%;
}
.tabs-form.width-100 input[type="text"] {
    width: 60%;
}

.table-responsive {
    max-width: 100%;
    overflow: auto;
}

fieldset {
    border: 1px solid #e6e6e6;
    position: relative;
    width: auto;
    min-width: 0;
    display: block;
    border-radius: 4px;
    margin: 10px 0px 20px 0px;
    padding-top: 15px;
}

legend {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
    background-color: #e6e6e6;
    color: #1d1d1d;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid #9d9d9d;
}

.dark-table thead th {
background-color: #d4ebe3;
    border-color: #909090;
}
table thead tr {
    border-width: 0px;
}
table tr {
    border-bottom: 0px solid #f7f7f7;
}
.form-group-setting {
    max-width: 100%;
    display: inline-block;
}

.width-50 {
    width: calc(calc(550px / 2) - 5px);
    margin-bottom: 5px;
}
.row.space-center {
    justify-content: center;
}

.form-group input[type='text'] {
    font-size: 16px;
    padding: 5px 10px;
    width: 100%;
    outline: 0;
}
.form-heading.small-text {
    font-size: 11px;
    margin-bottom: 8px;
}
.gap-column-5 {
    column-gap: 5px;
}


.form-group.file_upload button {
    border-left: 1px solid #000;
}

.error-message {
    border: 1px solid #4fef4f;
    background-color: #86f786;
    color: #000;
    font-size: 14px;
    padding: 4px 10px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    z-index: 9;
    right: 10px;
    top: calc(var(--header-height) + 30px);
    transition: all 0.4s;
}

.error-message.updated-message {
    background-color: #e9e933;
    border-color: #7c7c0a;
    color: #000;
}

.error {
    border: 1px solid red;
    padding: 5px 10px;
    max-width: 553px;
    width: 100%;
    margin: 10px auto 0px auto;
    background-color: #fba3a3;
    color: #000;
    font-size: 13px;
    line-height: 1;
}
.error.success {
    background-color: #a7e9a7;
    border-color: #16b616;
}



#audio_volume {
    font-size: 12px;
    font-weight: 600;
}

.error-message svg {
    position: absolute;
    width: 18px;
    height: 18px;
    right: 5px;
    top: -12px;
    background-color: #000;
    fill: #fff;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
}

.column-gap-10{column-gap: 10px;}

.error-message.delete-message {
    background-color: #e53d3d;
    border-color: #de3c3c;
    color: #fff;
}
.create-message {
    font-size: 11px;
    background-color: #ddd;
    display: inline-block;
    padding: 4px 6px;
    line-height: 1;
}
input:disabled{
    background-color: #ddd;
    border-color: #bebebe;
    outline: 0;
    border: 0;
}
.button:disabled {
    opacity: 0.7;
    cursor: default;
}

.tabs-form-group select:disabled {
    background-color: #ddd;
    border-color: #bebebe;
}

.inner-tabs table td ul li{
    display: inline-block;
    background-color: #ddd;
    padding: 3px 5px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    cursor: default;
}
.row-gap-10 {
    row-gap: 10px;
}

fieldset h3 {
    flex: 0 0 100%;
    display: block;
    font-size: 14px;
    font-weight: 400;
    background-color: #6184ba;
    color: #fff;
    padding: 5px 10px;
    line-height: 1;
    margin-bottom: 10px;
}

.inner-tabs table td ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 5px;
}

.text-right{text-align: right;}

.no-plateform-message, .voice-error {
    font-style: italic;
    font-size: 11px;
    margin: 10px 0px;
    background-color: #e64343;
    color: #fff;
    padding: 3px 10px;
}

.download-link {
    flex: 0 0 100%;
    margin: 10px 0px 0px 0px;
}  
.download-link  a{
    color: #000;
    font-size: 14px;
}

.table-responsive.table-center table {
    margin: 20px auto 20px auto;
    width: 550px;
    max-width: 100%;
}

table caption {
    font-size: 12px;
    text-align: left;
    color: #000;
    padding: 0;
    margin-bottom: 5px;
    font-style: italic;
    text-decoration: underline;
    font-weight: 500;
    text-underline-offset: 4px;
}
.category-form {
    display: grid;
    grid-template-columns: 1fr auto;
}
.error-small-text {
    font-size: 13px;
    margin-top: 5px;
    font-style: italic;
    color: red;
    display: none;
}
.button-submit-group button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}


.short-video-wrapper {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 10px;
    margin: 30px 0px;
}


.data-wrapper {
    width: calc(20% - 10px);
    background-color: #f1f1f1;
}

.data-wrapper ._date {
    font-size: 12px;
    background-color: #ddd;
    color: #000;
    padding: 5px 10px;
    line-height: 1;
}

.data-wrapper h2 {
    font-size: 16px;
    margin: 10px 0px 0px 0px;
    font-weight: 600;
    padding: 0px 10px 10px 10px;
}
.data-wrapper a{
    text-decoration: none;
    color: #000;
}

.data-wrapper ._tag {
    padding: 5px;
    font-size: 12px;
    font-weight: 600;
    background-color: #1dbd83;
    color: #000;
    line-height: 16px;
    text-align: center;
}



.data-for {
    flex: 0 0 100%;
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    margin: 10px 0px;
   
}
.data-for span {
    font-weight: 400;
    background-color: #eb3b6f;
    color: #fff;
    padding: 5px 10px;
}

.data-wrapper img {
    width: 100%;
}

.process-btn {
    background-color: #18aa60;
    box-shadow: 4px 3px 9px 0px #95dca6;
    border: 0;
}
.data-loader-wrapper {
    width: 100%;
    height: 100%;
    margin: 20px 0px;
    padding: 5px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.data-loader span {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><linearGradient id="a11"><stop offset="0" stop-color="%23FFFFFF" stop-opacity="0"></stop><stop offset="1" stop-color="%23FFFFFF"></stop></linearGradient><circle fill="none" stroke="url(%23a11)" stroke-width="25" stroke-linecap="round" stroke-dasharray="0 44 0 44 0 44 0 44 0 360" cx="100" cy="100" r="70" transform-origin="center"><animateTransform type="rotate" attributeName="transform" calcMode="discrete" dur="2" values="360;324;288;252;216;180;144;108;72;36" repeatCount="indefinite"></animateTransform></circle></svg>');
    display: inline-block;
    width: 24px;
    height: 24px;
    position: relative;
}
.data-loader-wrapper.no-active{display: none;}
.data-loader {
    font-size: 16px;
    line-height: 1;
    display: flex
;
    color: #fff;
    text-align: center;
    background-color: #000;
    padding: 10px 20px;
    align-items: center;
    column-gap: 10px;
}
.row-data {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    align-items: flex-end;
}
.row-data label {
    display: block;
    font-size: 12px;
    margin-bottom: 5px;
    font-weight: 600;
    text-align: right;
}
.row-data select{
    width: 400px;
    display: none;
}
table tr.no-active td {
    background-color: #fbe2e2;
}

.tabs-form.flx-100 {
    width: 100%;
    margin-bottom: 20px;
}

.tabs-form-group-checkbox {
    display: flex;
    flex-wrap: wrap;
    column-gap: 15px;
}

._form-group {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    font-size: 13px;
}

.tabs-form-group-checkbox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 20px;
}


.margin-left-20 {
    margin-left: 20px;
}

.tabs-form.flx-100 .fleadset-lable {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 10px;
    line-height: 1;
    font-weight: 600;
    font-size: 12px;
}

._form-group div {
    font-size: 12px;
}

input, select{transition: border-color 0.3s, box-shadow 0.3s;width: 100%;}

input:not(input[type='range']):focus, select:focus{
    border-color: rgba(204, 0, 0, 1) !important;
    box-shadow: 0 0 0 0.2rem rgb(204 0 0 / 25%);
}
input[type="checkbox"] , input[type="file"], input[type="radio"]{
    width: auto;
    accent-color: #000;
}

.form-group.file_upload button:disabled {
    border-color: #ddd;
    pointer-events: none;
    user-select: none;
}

.margin-10 {
    margin: 5px 0px 10px 0px;
}

.caption-small-text {
    display: inline-block;
    flex: 0 0 100%;
    font-size: 11px;
    margin: 4px;
    color: #605d5d;
}

.status-active {
    width: 20px;
    height: 20px;
    fill: #1bab1b;
}

.status-deactive {
    fill: red;
    stroke: red;
}
._form-group .helper-text {
    flex: 0 0 100%;
    font-size: 11px;
    font-style: italic;
    font-weight: 600;
}
.helper-text-margin {
    margin-left: 30px;
}

select {
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9l6 6 6-6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    appearance: none;
    -webkit-appearance: none;
    background-size: 17px;
    background-position: calc(100% - 10px) center;
    padding-right: 40px !important;
}

.message-voice {
    font-size: 12px;
    font-style: italic;
    margin-top: 5px;
    color: #fff;
    background-color: #f73838;
    padding: 3px 10px;
}

.voice-process-area {
    width: 100%;
    display: none;
}

.voice-loader {
    margin-top: 10px;
    font-size: 13px;
    text-align: center;
    text-transform: capitalize;
    display: none;
}
.voice-process-area[plateform="OPEN_AI"] .speed-not-support {
    
}

.loading-button {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
  }

  .loading-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid white;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  
  .auth-message {
    color: #000;
    font-size: 13px;
    margin-top: 10px;
    font-weight: 400;
    width: 100%;
    display: block;
    background-color: #a8ffa8;
    padding: 5px 10px;
    border-left: 2px solid green;
}
.auth-message.error {
    color: #c0392b;
    background: #fdf0ef;
    border-left: 3px solid #c0392b;
    padding: 6px 10px;
    max-width: 100%;
    border-radius: 3px;
}

.heading-seprate {
    margin: 15px 0px;
    padding: 0px 0px 7px 0px;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid #ddd;
}

.video-effact-setting-container {
    background-color: #fff;
    border: 0;
}

.video-effact-setting-container legend {
    border-radius: 0;
    background-color: transparent;
    border: 0;
    font-size: 18px;
    border-bottom: 1px solid #000;
    display: block;
    width: 100%;
    padding: 0px 0px 5px 0px;
    text-transform: capitalize;
    font-weight: 500;
    margin-bottom: 10px;
}


.grid-row {
    display: grid;
    column-gap: 10px;
    row-gap: 10px;
    background-color: #f5f5f5;
    padding: 15px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}


.grid-row input, .grid-row select {
    width: 100%;
    border: 1px solid #ddd;
    padding: 10px 10px;
    font-size: 12px;
    outline: 0;
    min-width: 180px;
    border-radius: 4px;
    min-width: auto;
}

.grid-row input[type="color"] {
    padding: 0px;
    border: 0;
    outline: 0;
    
}
.video-effact-row {
    display: grid;
    grid-template-columns: auto 320px;
    width: 100%;
    max-width: 100%;
    column-gap: 20px;
}

.video-effct-panel-right video {
    background-color: #d7d7d7;
    width: 100%;
}

.video-effct-panel-right .tabs-form {
    width: 100%;
}

.video-prev-note {
    font-size: 13px;
    line-height: 19px;
    margin: 5px 0px 10px 0px;
    text-align: right;
}

.aspect-ration-9X16 {
    aspect-ratio: 9 / 16;
}

.tabs-form-group.right-side {
    justify-content: flex-end;
    column-gap: 15px;
}

.error.left-side {
    margin: 10px 0px;
}

.notes-line {
    font-size: 12px;
    font-style: italic;
    background-color: #f4f8c6;
    padding: 3px 15px;
    margin-bottom: 20px;
    color: #000;
    width: auto;
    display: block;
}

.small-text {
    font-size: 11px;
    margin-top: 3px;
    font-weight: 600;
    text-transform: capitalize;
}

.video_setting_error_box {
    margin: 0 0px 20px 0px;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 500;
    display: none;
}
.video_setting_error_box.active{display: block;}

.loader-effact {
    position: relative;
}
hr {
    margin: 15px 0px;
    border: 0;
    border-top: 1px solid #ddd;
}
.loader-effact.active{
padding: 20px;
}

.loader-effact.active::after{
    content: '';
    background-color: rgb(0 0 0 / 50%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.logo-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: 15px;
    align-items: flex-start;
}


.grid-column-row{
    display: grid;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    gap: 15px;
}


.folder-container {
    margin: 0 auto;
    width: calc(100% - 20px);
    text-align: right;
}
.margin-top-30 {
    margin-top: 30px;
}
.column-gap-30 {
    column-gap: 30px;
}
.pop-up {
    position: fixed;
    z-index: 9;
    width: 100%;
    height: 100%;
    top: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background-color: rgb(0, 0, 0, 0.5);
    left: 0;
}
.pop-up.active{display: flex;}

.pop-up-container {
    max-width: 500px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    text-align: left;
}
.pop-header {
    border-bottom: 1px solid #000;
    padding-bottom: 5px;
}

.pop-up-container label {
    display: block;
    font-size: 12px;
    margin-bottom: 5px;
    font-weight: 700;
}

.pop-up-container select, .pop-up-container input , .pop-up-container textarea{
    display: block;
    width: 100%;
    outline: 0;
}
.pop-up-container textarea {
    max-height: 80px;
    resize: auto;
}
.pop-up-container  .model-popup-footer {
    border-top: 1px solid #000;
    padding-top: 10px;
}

.pop-up-container .close-button {
    font-size: 32px;
    line-height: 1;
    font-weight: 400;
    cursor: pointer;
}
.pop-up-container .form-group {
    width: 100%;
    max-width: 100%;
}

.pop-up-container .model-popup-body {
    padding: 20px 0px;
}
.model-popup-body .form-group:not(:last-child){
    margin-bottom: 10px;
}
.model-popup-body small {
    font-size: 10px;
    display: block;
    margin: 2px 0px 0px 0px;
    font-style: italic;
}

.align-items-center {
    align-items: center;
}

.pop-header .pop-up-heading {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}
.folder-list-wrapper {
    width: 300px;
}

.folder-list-wrapper ul li {
    display: flex;
    align-items: center;
    column-gap: 10px;
    row-gap: 10px;
}

.folder-list-wrapper ul li a {
    text-decoration: none;
    color: #000;
    font-size: 14px;
    text-transform: capitalize;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 5px;
    line-height: 1;
}
.folder-list-wrapper ul li a svg {
    width: 30px;
    height: 30px;
}
.folder-list-wrapper ul li a span{
    font-size: 18px;
    display: inline-block;
    line-height: 31px;
}
.folder-list-wrapper ul {
    display: flex
;
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 15px;
    margin-top: 10px;
    border-top: 1px solid #ddd;
    padding-top: 15px;
}
.folder-image-view {
    width: calc(100% - 300px);
    padding-left: 20px;
}

.folder-view-row {
    display: flex;
    padding-top: 20px;
    text-align: left;
}
.image-upload-container {
    padding: 10px 10px;
    background-color: #ddd;
    margin: 10px 0px;
}

.c-heading {
    font-size: 18px;
    font-weight: 500;
}


.folder-image-list {
    display: grid;
    column-gap: 10px;
    row-gap: 10px;
    margin-top: 10px;
    margin-bottom: 30px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.no-image-list {
    font-size: 12px;
    font-style: italic;
}

.folder-list-wrapper.full-width {
    width: 100%;
}

.back-link {
    margin-bottom: 10px;
    text-align: left;
}

.back-link  a{
    text-decoration: none;
    color: #000;
    font-weight: 600;
    position: relative;
    display: inline-block;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5" /><path d="M12 19l-7-7 7-7" /></svg>');
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 30px;
}

.folder-list-wrapper ul li a.folder-delete {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /><path d="M10 11v6" /><path d="M14 11v6" /><path d="M5 6l1 14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-14" /></svg>');
    width: 16px;
    height: 16px;
    background-size: 16px;
    display: inline-block;
    background-position: center center;
}

.folder-list-wrapper:not(.full-width) ul li a svg {
    width: 24px;
    height: 24px;
}


.folder-list-wrapper:not(.full-width) ul li a span {
    font-size: 14px;
    line-height: 26px;
}
.broadcomp ul li {
    display: inline-block;
}
.broadcomp ul li:not(:first-child)::before{
    content: '/';
    width: 10px;
    position: relative;
    display: inline-block;
    text-align: center;
}

.broadcomp ul li, .broadcomp ul li a{
    text-decoration: none;
    color: #000;
    font-size: 13px;
    font-weight: 500;
}

.message-box {
    background-color: #f91717;
    display: inline-block;
    color: #fff;
    padding: 5px 50px 5px 10px;
    font-size: 13px;
    position: relative;
    border-radius: 4px;
}

.message-box.success {
    background-color: #008f00;
}

.message-close {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
    width: 20px;
    text-align: center;
}

.message-box span {
    font-weight: 600;
    display: inline-block;
    color: #000;
}

.folder-list-wrapper .edit-folder-input {
    outline: 0;
}

.folder-list-wrapper .edit-folder-input:focus {
    border-color: #000 !important;
    box-shadow: 0px 0px 0px 0px #000;
    border-width: 1px;
}

.images-menu {
    display: grid;
    grid-template-columns: 100px 200px;
    column-gap: 10px;
    row-gap: 10px;
    margin: 20px 10px 0px 10px;
    justify-content: flex-end;
}

.images-menu button {
    border: 1px solid #404040;
    outline: 0;
    background-color: #404040;
    color: #fff;
    padding: 0;
    height: 30px;
    cursor: pointer;
    border-radius: 4px;
}

.images-menu button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}


.folder-image-list li {
    position: relative;
    aspect-ratio: 16 / 9;
    cursor: pointer;
    background-color: #f1f1f1;
    padding: 5px;
    text-align: center;
    align-content: center;
}

.folder-image-list li.no-image-list {
    font-size: 12px;
    font-style: italic;
    background-color: #f8ffaf;
    aspect-ratio: auto;
}

.folder-image-list li input {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 1;
}

.folder-image-list .image-blur::before{
    content: '';
    background-color: rgb(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.folder-image-list.no-image-list {
    grid-template-columns: 1fr;
}

.circle-progress-bar-container {
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
}
.circle-progress-bar-container.active { display: flex; }

/* Pending spinner — shown before task starts */
.circle-progress-bar-container .pending-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
.circle-progress-bar-container .pending-indicator .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Progress ring — hidden until task actually starts */
.circle-progress-bar {
    display: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}
.circle-progress-bar.visible { display: flex; }

.circle-progress-bar .progress-text {
    width: 43px;
    height: 43px;
    text-align: center;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
}
.circle-progress-bar .progress-text::after {
    content: attr(data-value) "%";
}

.folder-image-list li img {
    display: block;
}

.small-text.small-gray {
    color: #413e3e;
    font-weight: 500;
    font-style: italic;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.error-box {
    padding: 10px;
}

.error-box .error-headline{
    color: #000;
    padding: 5px 10px;
    line-height: 1;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 15px;
    background-color: #ffd4d4;
    border: 1px solid #f35a5a;
}
.error-box ul li{
    font-size: 13px;
    line-height: 26px;
}


.tabs-form-group.sites-category-feald select {
    min-width: 250px;
    width: 100% !important;
}

.category-site-added-button {
    display: grid;
    grid-template-columns: auto 1fr;
    place-items: center;
    margin-top: 30px;
    border-top: 1px dashed #000;
    padding-top: 30px;
    font-size: 13px;
    font-weight: 500;
}



@media (max-width:920px) {
    .video-effact-row{
        grid-template-columns: 1fr;
        row-gap: 30px;
    }
}


.data-loader-wrapper.categoryloader .data-loader {
    padding: 5px 10px;
    border-radius: 99999px;
    font-size: 12px;
}

.data-loader-wrapper.categoryloader {
height: auto;
    width: auto;
    display: inline-flex
;
    align-items: flex-start;
}

.data-loader-wrapper.no-active.categoryloader{
    display: none;
}
.remove-button {
    cursor: pointer;
    border: 1px solid #ddd;
    font-size: 11px;
    padding: 7px 11px;
    outline: 0;
    border-radius: 4px;
    color: #000;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 500;
    background-color: transparent;
}
.category-site-added-button form {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
    margin-left: auto;
}



.select2-container--default .select2-selection--multiple .select2-selection__choice:has(.user-select-category){
    background-color: #1c1c1c;
    color: #fff;
    border-color: #000;
}

#siteTableBody .button {
    border: 1px solid #ddd;
    font-size: 11px;
    padding: 7px 11px;
    background-color: #fff;
    color: #000;
}


.template-save-popup {
    position: fixed;
    top: 0;
    backdrop-filter: blur(10px);
    width: 100%;
    height: 100%;
    display: none;
    place-content: center;
    left: 0;
    z-index: 20;
}
.template-save-popup.active{display: grid;}

.template-pop-up-inner-container {
    border-radius: 8px;
    background-color: #fff;
    padding: 40px;
    width: 920px;
    margin-inline: auto;
    max-width: 420px;
    border: 1px solid #e1e1e1;
}

.template-pop-up-header {
    font-size: 19px;
    font-weight: 600;
    border-bottom: 1px solid #d1d1d1;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.template-popup-body .tabs-form {
    display: block;
}

.template-popup-body label {
    font-size: 16px;
}

.template-popup-footer {
    margin-top: 10px;
    border-top: 1px solid #d1d1d1;
    padding-top: 15px;
}

.template-button-group {
    display: grid
;
    grid-template-columns: 50px 50px;
    justify-content: flex-end;
    column-gap: 10px;
}

.template_error {
    font-size: 12px;
    color: red;
    font-weight: 500;
}


.template_error.success {
    color: #109310;
}

#voice_custom_select_wrapper {
    width: 100%;
}

.language-loading{display: none;}

.template-list {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin: 30px 0px 80px 0px;
}

.template-item{
    position: relative;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
}

.template-list-item {
    text-decoration: none;
    color: #000;
    display: block;
}

.template-item button {
    margin-bottom: 15px;
    cursor: pointer;
}

.template-item-name {
    font-size: 15px;
    text-transform: capitalize;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0px 10px 10px 10px;
}


.template-item-type {
   text-align: center;
    background-color: #1f1e1e;
    text-transform: uppercase;
    color: #fff;
    position: absolute;
    top: 0;
    z-index: 1;
    left: 0;
    font-size: 12px;
    padding: 5px 10px;
    line-height: 1;
    border-top-left-radius: 4px;
}

.header-logo svg{
    max-width: 100%;
    height: 100%;
}

a{display: inline-block;}
.table-logo-img {
    max-width: 30px;
}
table tr.social-plateform-disabled td {
    background-color: #fbe9e9;
    pointer-events: none;
    opacity: 0.6;
}
.row-area {
    display: flex;
    align-items: flex-end;
    gap: 15px;
}
.row-area .tabs-form-group {
    margin: 0;
}

.left-inner-tab-panel ul li.no-active {
    opacity: 0.7;
    pointer-events: none;
    background-color: #ddd;
}

.header-row {
    display: grid;
    align-items: center;
    gap: 10px;
    width: 100%;
    /* minmax(0, 1fr) — not "auto" — lets this column shrink below its
       content's natural width. With "auto", a grid track never shrinks
       past its content's min-content size, so once the nav (.header-right-panel)
       grew past ~8 links it overflowed the row instead of scrolling within
       its own box (which .log-area's overflow:auto already supports). */
    grid-template-columns: 125px minmax(0, 1fr) auto;
    column-gap: 24px;
}

.header-end {
    text-align: right;
}

.messages {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color: #fff;
    padding: 10px;
    z-index: 1;
    display: grid;
    grid-gap: 10px;
}

.messages .alert {
    line-height: 1;
    padding: 5px 10px;
    border-radius: 3px;
}

.messages .alert.error {
    background-color: #f08080;
}

.messages  .alert.alert-success{
    background-color: #a6efa6;
}

.messages  .alert.alert-info {
    background-color: #fbfbaa;
}
.inner-tabs table td ul li a {
    text-decoration: none;
    color: inherit;
}
table tr.is-trash {
    pointer-events: none;
    opacity: 0.3;
}

/* Pending Actions Notifications */
.pending-actions-notification {
    background-color: #fef3c7;
    border-top: 3px solid #f59e0b;
    border-bottom: 1px solid #e5d4b8;
    padding: 16px 0;
    margin-top: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pending-actions-notification .container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notification-item {
    background-color: #fff8e1;
    border-left: 4px solid #f59e0b;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 14px;
}

.notification-item.notification-warning {
    background-color: #fef3c7;
    border-left-color: #f59e0b;
}

.notification-header {
    font-weight: 600;
    color: #92400e;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-content {
    color: #78350f;
    line-height: 1.5;
}

.notification-content ul {
    margin: 8px 0;
    padding-left: 20px;
    list-style-type: disc;
}

.notification-content ul li {
    margin: 4px 0;
    color: #78350f;
}

.notification-content ul li strong {
    color: #92400e;
    font-weight: 600;
}

@media (max-width: 768px) {
    .pending-actions-notification {
        padding: 12px 0;
    }
    
    .notification-item {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* Notification Bell in Header */
.notification-bell-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.notification-bell {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: all 0.3s ease;
    color: #4F46E5;
    position: relative;
}

.notification-bell:hover {
    background-color: rgba(79, 70, 229, 0.1);
    color: #06B6D4;
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ef4444;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* Notification Panel Dropdown */
.notification-panel {
    position: absolute;
    top: 100%;
    right: 0;
    width: 400px;
    max-height: 500px;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    margin-top: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.notification-panel.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.notification-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #f3f4f6;
    background-color: #f9fafb;
}

.notification-panel-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.close-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: #6b7280;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.close-btn:hover {
    color: #111827;
}

.notification-panel-content {
    overflow-y: auto;
    padding: 12px 0;
    flex: 1;
}

.notification-panel-content .notification-item {
    margin: 8px 12px;
    border-radius: 6px;
}

/* Notification Items */
.notification-item {
    background-color: #fff8e1;
    border-left: 4px solid #f59e0b;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 8px;
}

.notification-item.notification-warning {
    background-color: #fef3c7;
    border-left-color: #f59e0b;
}

.notification-item.notification-success {
    background-color: #dcfce7;
    border-left-color: #22c55e;
}

.notification-header {
    font-weight: 600;
    color: #92400e;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-item.notification-success .notification-header {
    color: #166534;
}

.notification-content {
    color: #78350f;
    line-height: 1.5;
}

.notification-item.notification-success .notification-content {
    color: #166534;
}

.notification-content ul {
    margin: 8px 0;
    padding-left: 20px;
    list-style-type: disc;
}

.notification-content ul li {
    margin: 4px 0;
    color: #78350f;
}

.notification-item.notification-success .notification-content ul li {
    color: #166534;
}

.notification-content ul li strong {
    color: #92400e;
    font-weight: 600;
}
.log-area {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: flex-end;
}

.button.no-fill {
    background-color: #f1f1f1;
    color: #000;
    border: 1px solid #9d9d9d;
    border-radius: 0;
    padding: 5px;
    text-transform: capitalize;
}

.site-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.site-modal-overlay.open {
    display: flex;
}
.site-modal {
    background: #fff;
    border-radius: 6px;
    width: 680px;
    max-width: 96vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
    overflow: auto;
}
.site-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
    border-bottom: 1px solid #e0e0e0;
}
.site-modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}
.site-modal-header .modal-close-btn {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #555;
    line-height: 1;
    padding: 0 4px;
}
.site-modal-tabs {
    padding: 0 18px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    gap: 0;
    margin-top: 10px;
}
.site-modal-tabs ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4px;
}
.site-modal-tabs ul li {
    padding: 10px 18px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    color: #666;
    margin-bottom: -1px;
}
.site-modal-tabs ul li.active {
    border-bottom: 2px solid #9cacf1;
    color: #000;
    font-weight: 600;
}
.site-modal-url-row {
    padding: 12px 18px 0;
}
.site-modal-url-row label {
    font-size: 12px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}
.site-modal-url-row select {
    border: 1px solid #ddd;
    padding: 8px 10px;
    font-size: 12px;
    outline: 0;
    border-radius: 4px;
    width: 100%;
}
.site-modal-body {
    overflow-y: auto;
    padding: 12px 18px 18px;
    flex: 1;
}
.modal-tab-content {
    display: none;
}
.modal-tab-content.active {
    display: block;
}
.modal-tab-content .row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.modal-footer {
    padding: 12px 18px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.auth-model-row{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
}

.auth-model-row .form-group.file_upload{width: 100%;margin: 0px;max-width: 100%;}
table td .select2-container {
    width: auto !important;
}
.tabs-form.full-width {
    display: block;
    width: auto;
}
.tabs-form.full-width input {
    max-width: 553px;
}

.button.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.button.loading::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -8px 0 0 -8px;
    border: 2px solid #000;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.select2-container .select2-selection__rendered {
    font-size: 12px;
}
.select2-container .select2-selection--single{height: auto;padding: 2px 0px;}

.select2-container {
    width: 100% !important;
}

.captions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: start;
    max-height: calc(100dvh - 330px);
    overflow: auto;
    padding-right: 10px;
}

.caption-item {
    border: 1px solid #d1d1d1;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    flex: 0 0 100%;
    font-size: 13px;
    text-transform: capitalize;
}

.property-group input, .property-group select {
    padding: 10px 15px;
    border: 1px solid #ddd;
    font-size: 13px;
    outline: 0;
    border-radius: 4px;
    width: 100%;
}

.property-group label {
    font-size: 13px;
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
}

.property-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #888;
    margin: 14px 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #f0f0f4;
}

.property-group input[type='range'] {
    padding: 0;
    accent-color: #393d39;
}

 .image_thumb {
    transition: all 0.3s ease; /* Smooth transition for animation */
    opacity: 1;
}

.image_thumb.dragging {
    opacity: 0.5; /* Slightly transparent while dragging */
    transform: scale(1.05); /* Scale the image slightly to show dragging effect */
}

.image_thumb {
    cursor: grab; /* Change cursor to indicate draggable */
}

.image_thumb.dragging {
    cursor: grabbing; /* Change cursor to grabbing when the drag starts */
}

.dashboard-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 30px 0px;
}

.summary-tile {
    display: block;
    min-width: 130px;
    padding: 12px 16px;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
}
.summary-tile .tile-count {
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.2;
}
.summary-tile .tile-label {
    display: block;
    font-size: 0.8rem;
    opacity: 0.9;
}
.badge-secondary { background: #6c757d; }
.badge-info { background: #0dcaf0; color: #000; }
.badge-warning { background: #ffc107; color: #000; }
.badge-primary { background: #0d6efd; }
.badge-success { background: #198754; }
.badge-dark { background: #343a40; }
.badge-danger { background: #dc3545; }

.summary-section {
    margin-bottom: 24px;
}
.summary-section h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}
.quota-bar-track {
    display: inline-block;
    width: 100px;
    height: 8px;
    background: #444;
    border-radius: 4px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 8px;
}
.quota-bar-fill {
    height: 100%;
    background: #0d6efd;
}
.quota-bar-fill.is-full {
    background: #dc3545;
}
.log-row-ERROR, .log-row-CRITICAL { color: #ff6b6b; }
.log-row-WARNING { color: #ffc107; }


.fleadset-lable {
    font-size: 13px;
    display: block;
    margin-bottom: 5px;
}



.tvb-field { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
                              .tvb-field label { font-size:12px; font-weight:600; color:#374151; }
                              .tvb-field select, .tvb-field input[type=file] {
                                padding:5px 8px; border:1px solid #d1d5db; border-radius:5px;
                                font-size:13px; background:#fff;
                              }
                              .tvb-slide-card {
                                border:1px solid #d1d5db; border-radius:7px;
                                padding:10px 14px; background:#f9fafb; margin-bottom:8px;
                              }
                              .tvb-slide-card p { margin:0 0 6px; font-size:12px; font-weight:700; color:#6366f1; }
                              .tvb-slide-card small { color:#6b7280; font-size:11px; }
                              .tvb-slide-row { display:flex; gap:12px; flex-wrap:wrap; }
                              .tvb-slide-row .tvb-field { flex:1; min-width:180px; }
                              .tvb-build-btn {
                                padding:8px 24px; font-size:13px; font-weight:700;
                                background:#6366f1; color:#fff; border:none; border-radius:6px;
                                cursor:pointer; transition:opacity .15s;
                              }
                              .tvb-build-btn:disabled { opacity:.45; cursor:not-allowed; }
                              #tvb_result { margin-top:12px; display:none; }
                              #tvb_result video { width:100%; max-height:400px; border-radius:6px; background:#000; }
                              .tvb-msg { padding:8px 12px; border-radius:5px; font-size:13px; margin-top:8px; display:none; }
                              .tvb-msg-ok  { background:#d1fae5; color:#065f46; }
                              .tvb-msg-err { background:#fee2e2; color:#991b1b; }
                              .tvb-info-row { font-size:12px; color:#6b7280; margin-bottom:6px; }


               
 .site-data-table .site-url-coloumn {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}

 .site-data-table .site-url-coloumn  ul{
    overflow: hidden;
}
 .site-data-table .site-url-coloumn a{
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100px;
 }
 .pagination {
    display: flex;
    margin: 30px 0px;
    gap: 10px;
}

.pagination li a {
    border-radius: 3px;
    text-decoration: none;
    background-color: #3bb0de;
    padding: 5px 10px;
    line-height: 1;
    color: #fff;
}

.error-items {
    padding: 8px 12px;
    border-bottom: 1px solid #ebebeb;
}



/* Responsive Design */


@media (max-width: 1024px) {
    .notification-panel {
        width: 350px;
    }
}

@media (max-width: 768px) {
    .notification-panel {
        position: fixed;
        top: 60px;
        right: 10px;
        left: 10px;
        width: auto;
        max-height: calc(100vh - 100px);
    }
    
    .notification-bell {
        width: 28px;
        height: 28px;
    }
    
    .notification-badge {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }
}

/* ============ Pending Uploads page (members/pending_videos.html) ============ */
.pv, .pv-modal {
    --pv-border: #e5e7eb; --pv-line: #f1f2f4; --pv-text: #111827; --pv-muted: #6b7280; --pv-faint: #9ca3af;
    --pv-primary: #4f46e5; --pv-primary-hover: #4338ca; --pv-primary-soft: #eef2ff;
    --pv-danger: #dc2626; --pv-danger-soft: #fef2f2;
    --pv-warning: #d97706; --pv-warning-soft: #fffbeb;
    --pv-success: #16a34a; --pv-success-soft: #f0fdf4;
    color: var(--pv-text); font-family: 'Poppins', system-ui, sans-serif; font-size: 14px;
}
.pv *, .pv *::before, .pv *::after,
.pv-modal *, .pv-modal *::before, .pv-modal *::after { box-sizing: border-box; }
/* Component display rules below would otherwise override the hidden attribute. */
.pv [hidden], .pv-modal [hidden] { display: none !important; }

.pv { max-width: 1280px; margin: 24px auto 48px; padding: 0 16px; }

/* Header */
.pv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.pv-head-title { margin: 0 0 2px; font-size: 1.35rem; font-weight: 600; }
.pv-head-sub { margin: 0; color: var(--pv-muted); font-size: .85rem; }
.pv-count { padding: 4px 12px; border-radius: 999px; background: var(--pv-primary-soft); color: var(--pv-primary); font-size: .78rem; font-weight: 500; white-space: nowrap; }

/* Empty state */
.pv-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 56px 16px; background: #fff;
            border: 1px dashed var(--pv-border); border-radius: 12px; text-align: center; }
.pv-empty-icon { color: var(--pv-success); margin-bottom: 6px; }
.pv-empty-title { font-weight: 500; font-size: 1rem; }
.pv-empty-text { color: var(--pv-muted); font-size: .85rem; }

/* Card grid */
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.pv-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pv-border); border-radius: 12px;
           overflow: hidden; transition: box-shadow .15s ease, border-color .15s ease; }
.pv-card:hover { border-color: #d1d5db; box-shadow: 0 6px 20px rgba(17, 24, 39, .06); }

.pv-media { background: #0b0b0f; aspect-ratio: 9 / 16; max-height: 440px; display: flex; align-items: center; justify-content: center; }
.pv-video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.pv-media-missing { color: #6b7280; font-size: .8rem; }

.pv-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 10px; flex: 1; min-width: 0; }
.pv-title { margin: 0; font-size: .92rem; font-weight: 500; line-height: 1.45; overflow: hidden;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.pv-date { font-size: .74rem; color: var(--pv-faint); }
.pv-desc { margin: 0; font-size: .78rem; color: var(--pv-muted); line-height: 1.5; overflow: hidden;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }

.pv-platforms { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-pill { display: inline-block; max-width: 100%; padding: 2px 9px; border-radius: 999px; font-size: .7rem; font-weight: 500;
           background: #f3f4f6; color: #4b5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-pill-yt { background: #fef2f2; color: #b91c1c; }
.pv-pill-fb { background: #eff6ff; color: #1d4ed8; }

/* Actions */
.pv-actions { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--pv-line); }
.pv-actions-row { display: flex; gap: 8px; }
.pv-actions-row .pv-btn { flex: 1 1 0; }

.pv-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px;
          border: 1px solid var(--pv-border); border-radius: 8px; background: #fff; color: var(--pv-text);
          font: inherit; font-size: .8rem; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
          transition: background .15s ease, border-color .15s ease, color .15s ease; }
.pv-btn:hover { background: #f9fafb; border-color: #d1d5db; }
.pv-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pv-primary-soft); border-color: var(--pv-primary); }
.pv-btn:disabled { opacity: .6; cursor: default; }
.pv-btn-block { width: 100%; }
.pv-btn-sm { height: 28px; padding: 0 10px; font-size: .74rem; }
.pv-btn-primary { background: var(--pv-primary); border-color: var(--pv-primary); color: #fff; }
.pv-btn-primary:hover { background: var(--pv-primary-hover); border-color: var(--pv-primary-hover); }
.pv-btn-warning { background: var(--pv-warning); border-color: var(--pv-warning); color: #fff; }
.pv-btn-warning:hover { background: #b45309; border-color: #b45309; }
.pv-btn-danger { color: var(--pv-danger); }
.pv-btn-danger:hover { background: var(--pv-danger-soft); border-color: #fecaca; }
.pv-btn.is-loading { pointer-events: none; }
.pv-btn-label { font-variant-numeric: tabular-nums; }
/* Upload progress along the bottom edge of the Upload button */
.pv-btn-progress { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 3px; border: 0; border-radius: 0 0 8px 8px;
                   background: rgba(255, 255, 255, .25); overflow: hidden; -webkit-appearance: none; appearance: none; }
.pv-btn-progress::-webkit-progress-bar { background: rgba(255, 255, 255, .25); }
.pv-btn-progress::-webkit-progress-value { background: #fff; transition: width .3s ease; }
.pv-btn-progress::-moz-progress-bar { background: #fff; }
.pv-btn.is-loading:disabled { opacity: 1; }
.pv-btn.is-loading::before, .pv-spinner { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent;
                                          border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }

/* Feedback */
.pv-alert { padding: 8px 10px; border-radius: 8px; font-size: .76rem; line-height: 1.45; word-break: break-word; }
.pv-alert-error { background: var(--pv-danger-soft); color: #b91c1c; border: 1px solid #fecaca; }
.pv-alert-warning { background: var(--pv-warning-soft); color: #92400e; border: 1px solid #fde68a; }

.pv-card-done { justify-content: center; min-height: 160px; }
.pv-result { margin: 16px; padding: 18px; border-radius: 10px; text-align: center; font-weight: 500; font-size: .88rem; }
.pv-result-success { background: var(--pv-success-soft); color: #15803d; }
.pv-result-warning { background: var(--pv-warning-soft); color: #92400e; }
.pv-result-muted { background: #f3f4f6; color: var(--pv-muted); }

/* Modal */
body.pv-modal-open { overflow: hidden; }
.pv-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px;
            background: rgba(17, 24, 39, .55); }
.pv-modal.is-open { display: flex; }
.pv-modal-dialog { display: flex; flex-direction: column; width: 100%; max-width: 720px; max-height: 90vh; background: #fff;
                   border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.pv-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--pv-line); }
.pv-modal-title { font-weight: 600; font-size: 1rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pv-modal-close { width: 32px; height: 32px; flex-shrink: 0; border: 0; border-radius: 8px; background: transparent; color: var(--pv-muted);
                  font-size: 1.4rem; line-height: 1; cursor: pointer; }
.pv-modal-close:hover { background: #f3f4f6; color: var(--pv-text); }
.pv-modal-body { flex: 1; overflow-y: auto; padding: 20px; }
.pv-modal-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 0; color: var(--pv-muted); }
.pv-modal-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--pv-line); background: #fafafa; }

/* Form */
.pv-field { margin-bottom: 16px; min-width: 0; }
.pv-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pv-label { display: block; margin-bottom: 6px; font-size: .78rem; font-weight: 500; color: #374151; }
.pv-input { width: 100%; padding: 8px 10px; border: 1px solid var(--pv-border); border-radius: 8px; background: #fff; color: var(--pv-text);
            font: inherit; font-size: .84rem; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.pv-input:focus { border-color: var(--pv-primary); box-shadow: 0 0 0 3px var(--pv-primary-soft); }
.pv-textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.pv-textarea-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; }
.pv-hint { margin-top: 5px; font-size: .74rem; color: var(--pv-faint); }
.pv-seo-hint em { font-style: normal; color: var(--pv-muted); }

.pv-tag-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pv-tag { padding: 2px 10px; border-radius: 999px; background: var(--pv-primary-soft); color: var(--pv-primary); font-size: .72rem; }

/* Assets list in modal */
.pv-assets-head { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; padding-top: 16px; border-top: 1px solid var(--pv-line); font-weight: 600; font-size: .88rem; }
.pv-assets-count { padding: 1px 8px; border-radius: 999px; background: #f3f4f6; color: var(--pv-muted); font-size: .72rem; font-weight: 500; }
.pv-assets { display: flex; flex-direction: column; gap: 8px; }
.pv-asset { padding: 10px 12px; border: 1px solid var(--pv-border); border-radius: 10px; font-size: .78rem; line-height: 1.5; }
.pv-asset-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-weight: 600; }
.pv-asset-lang { padding: 0 7px; border-radius: 999px; background: #f3f4f6; color: var(--pv-muted); font-size: .68rem; font-weight: 500; text-transform: uppercase; }
.pv-asset-row { word-break: break-word; }
.pv-asset-text { margin-top: 6px; max-height: 90px; overflow: auto; white-space: pre-wrap; color: var(--pv-muted); word-break: break-word; }
.pv-asset-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

@media (max-width: 640px) {
    .pv-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .pv-field-row { grid-template-columns: 1fr; gap: 0; }
    .pv-modal { padding: 0; align-items: flex-end; }
    .pv-modal-dialog { max-height: 92vh; border-radius: 14px 14px 0 0; }
    .pv-modal-footer .pv-btn { flex: 1 1 auto; }
}
@media (max-width: 420px) {
    .pv-grid { grid-template-columns: 1fr; }
}

/* ============ Folders page (folders/folder_list.html) ============ */
.fd, .fd-modal {
    --fd-border: #e5e7eb; --fd-line: #f1f2f4; --fd-text: #111827; --fd-muted: #6b7280; --fd-faint: #9ca3af;
    --fd-primary: #4f46e5; --fd-primary-hover: #4338ca; --fd-primary-soft: #eef2ff;
    --fd-danger: #dc2626; --fd-danger-soft: #fef2f2;
    --fd-folder: #f59e0b; --fd-folder-soft: #fffbeb;
    color: var(--fd-text); font-family: 'Poppins', system-ui, sans-serif; font-size: 14px;
}
.fd *, .fd *::before, .fd *::after,
.fd-modal *, .fd-modal *::before, .fd-modal *::after { box-sizing: border-box; }
/* Component display rules below would otherwise override the hidden attribute. */
.fd [hidden], .fd-modal [hidden] { display: none !important; }

.fd { max-width: 1280px; margin: 24px auto 48px; padding: 0 16px; }

/* Header */
.fd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.fd-head-title { margin: 0 0 2px; font-size: 1.35rem; font-weight: 600; }
.fd-head-sub { margin: 0; color: var(--fd-muted); font-size: .85rem; }

/* Buttons */
.fd-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px;
          border: 1px solid var(--fd-border); border-radius: 8px; background: #fff; color: var(--fd-text);
          font: inherit; font-size: .82rem; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
          transition: background .15s ease, border-color .15s ease, color .15s ease; }
.fd-btn:hover { background: #f9fafb; border-color: #d1d5db; }
.fd-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--fd-primary-soft); border-color: var(--fd-primary); }
.fd-btn:disabled { opacity: .5; cursor: default; }
.fd-btn-sm { height: 30px; padding: 0 11px; font-size: .76rem; }
.fd-btn-primary { background: var(--fd-primary); border-color: var(--fd-primary); color: #fff; }
.fd-btn-primary:hover { background: var(--fd-primary-hover); border-color: var(--fd-primary-hover); }
.fd-btn-primary:disabled:hover { background: var(--fd-primary); }
.fd-btn-danger-ghost { color: var(--fd-danger); }
.fd-btn-danger-ghost:hover { background: var(--fd-danger-soft); border-color: #fecaca; }
.fd-btn.is-loading { pointer-events: none; }
.fd-btn.is-loading::before, .fd-spinner { content: ""; width: 13px; height: 13px; border: 2px solid currentColor; border-top-color: transparent;
                                          border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; flex-shrink: 0; }

.fd-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; flex-shrink: 0;
               border: 0; border-radius: 7px; background: transparent; color: var(--fd-muted); cursor: pointer; text-decoration: none;
               transition: background .15s ease, color .15s ease; }
.fd-icon-btn:hover { background: #f3f4f6; color: var(--fd-text); }
.fd-icon-btn-danger:hover { background: var(--fd-danger-soft); color: var(--fd-danger); }

/* Alerts */
.fd-messages { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.fd-messages:empty { display: none; }
.fd-alert { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid;
            font-size: .82rem; line-height: 1.45; word-break: break-word; }
.fd-alert-text { flex: 1; }
.fd-alert-close { border: 0; background: none; color: inherit; opacity: .6; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.fd-alert-close:hover { opacity: 1; }
.fd-alert-success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.fd-alert-error { background: var(--fd-danger-soft); color: #b91c1c; border-color: #fecaca; }
.fd-alert-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.fd-alert-info { background: var(--fd-primary-soft); color: #3730a3; border-color: #c7d2fe; }

/* Empty state */
.fd-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 56px 16px; background: #fff;
            border: 1px dashed var(--fd-border); border-radius: 12px; text-align: center; }
.fd-empty-compact { padding: 36px 16px; }
.fd-empty-icon { color: var(--fd-folder); margin-bottom: 6px; }
.fd-empty-title { font-weight: 500; font-size: .98rem; }
.fd-empty-text { color: var(--fd-muted); font-size: .84rem; }

/* All-folders grid */
.fd-folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.fd-folder-card { position: relative; display: flex; align-items: center; background: #fff; border: 1px solid var(--fd-border); border-radius: 12px;
                  transition: border-color .15s ease, box-shadow .15s ease; }
.fd-folder-card:hover { border-color: #c7d2fe; box-shadow: 0 6px 18px rgba(17, 24, 39, .06); }
.fd-folder-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 14px 12px 14px 14px; color: inherit; text-decoration: none; }
.fd-folder-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0;
                  border-radius: 10px; background: var(--fd-folder-soft); color: var(--fd-folder); }
.fd-folder-info { display: flex; flex-direction: column; min-width: 0; }
.fd-folder-name { font-weight: 500; font-size: .9rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fd-folder-meta { font-size: .74rem; color: var(--fd-faint); }
.fd-folder-actions { display: flex; gap: 2px; padding-right: 8px; opacity: 0; transition: opacity .15s ease; }
.fd-folder-card:hover .fd-folder-actions, .fd-folder-card:focus-within .fd-folder-actions { opacity: 1; }
.fd-rename-input { height: 30px; padding: 4px 8px; font-size: .86rem; }

/* Inside a folder */
.fd-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.fd-sidebar { position: sticky; top: 80px; background: #fff; border: 1px solid var(--fd-border); border-radius: 12px; padding: 12px 8px;
              max-height: calc(100vh - 100px); overflow-y: auto; }
.fd-sidebar-title { padding: 0 8px 8px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fd-faint); }
.fd-side-list { margin: 0; padding: 0; list-style: none; }
.fd-side-link { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; color: #374151; text-decoration: none; font-size: .82rem; }
.fd-side-link:hover { background: #f9fafb; }
.fd-side-icon { color: var(--fd-folder); flex-shrink: 0; }
.fd-side-name { flex: 1; min-width: 0; font-weight: 400; font-size: .82rem; }
.fd-side-count { font-size: .7rem; color: var(--fd-faint); }
.fd-side-item.is-active .fd-side-link { background: var(--fd-primary-soft); color: var(--fd-primary); font-weight: 500; }
.fd-side-item.is-active .fd-side-count { color: var(--fd-primary); }

.fd-main { background: #fff; border: 1px solid var(--fd-border); border-radius: 12px; padding: 16px 18px 20px; min-width: 0; }
.fd-crumbs { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--fd-faint); margin-bottom: 6px; min-width: 0; }
.fd-crumb-link { color: var(--fd-muted); text-decoration: none; }
.fd-crumb-link:hover { color: var(--fd-primary); }
.fd-crumb-current { color: var(--fd-text); font-weight: 400; font-size: .76rem; }
.fd-main-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.fd-main-title { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; font-size: 1.15rem; font-weight: 600; }
.fd-main-title .fd-folder-name { font-size: 1.15rem; font-weight: 600; }

/* Upload */
.fd-upload { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-bottom: 18px; }
.fd-dropzone { position: relative; display: flex; align-items: center; gap: 12px; flex: 1 1 320px; min-height: 64px; padding: 12px 16px;
               border: 1.5px dashed #d1d5db; border-radius: 10px; background: #fafafa; color: var(--fd-muted); font-size: .82rem;
               cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.fd-dropzone:hover, .fd-dropzone.is-dragging { border-color: var(--fd-primary); background: var(--fd-primary-soft); }
.fd-dropzone.has-files { border-style: solid; border-color: #c7d2fe; background: var(--fd-primary-soft); }
.fd-dropzone-icon { color: var(--fd-primary); flex-shrink: 0; }
.fd-dropzone-text strong { color: var(--fd-primary); font-weight: 500; }
.fd-dropzone-files { margin-left: auto; font-weight: 500; color: var(--fd-primary); white-space: nowrap; }
.fd-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fd-upload > .fd-btn { align-self: center; }
.fd-upload-progress { display: flex; align-items: center; gap: 10px; flex-basis: 100%; }
.fd-progress { flex: 1; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: #eef0f3; appearance: none; }
.fd-progress::-webkit-progress-bar { background: #eef0f3; border-radius: 999px; }
.fd-progress::-webkit-progress-value { background: var(--fd-primary); border-radius: 999px; transition: width .2s ease; }
.fd-progress::-moz-progress-bar { background: var(--fd-primary); border-radius: 999px; }
.fd-progress-text { font-size: .76rem; color: var(--fd-muted); min-width: 36px; text-align: right; }

/* Toolbar */
.fd-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 0 12px;
              border-top: 1px solid var(--fd-line); }
.fd-images-count { font-size: .8rem; color: var(--fd-muted); }
.fd-selected-count { color: var(--fd-primary); font-weight: 500; }
.fd-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Image grid */
.fd-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.fd-image { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #f3f4f6; cursor: pointer;
            outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .15s ease; }
.fd-image-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease, filter .2s ease; }
.fd-image:hover .fd-image-img { transform: scale(1.03); }
.fd-image-check { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
                  border: 2px solid #fff; border-radius: 6px; background: rgba(17, 24, 39, .25); color: transparent;
                  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); opacity: 0; transition: opacity .15s ease, background .15s ease; }
.fd-image:hover .fd-image-check { opacity: 1; }
.fd-image.is-selected { outline-color: var(--fd-primary); }
.fd-image.is-selected .fd-image-check { opacity: 1; background: var(--fd-primary); border-color: var(--fd-primary); color: #fff; }
.fd-image.is-selected .fd-image-img { transform: scale(.94); }

/* Copy-link button: always visible on every tile */
.fd-image-copy { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 7px; border: 0; border-radius: 6px;
                 background: rgba(17, 24, 39, .6); color: #fff; font: inherit; font-size: .68rem; font-weight: 500; cursor: pointer;
                 box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: background .15s ease; }
.fd-image-copy:hover { background: rgba(17, 24, 39, .85); }
.fd-image-copy:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.fd-image-copy.is-copied { background: #059669; }
.fd-image.is-pending .fd-image-copy, .fd-image.is-processing .fd-image-copy { display: none; }

/* Enhancement status overlay */
.fd-image-status { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(17, 24, 39, .55); color: #fff; }
.fd-image.is-pending, .fd-image.is-processing { cursor: default; }
.fd-image.is-pending .fd-image-status, .fd-image.is-processing .fd-image-status { display: flex; }
.fd-image.is-pending .fd-image-img, .fd-image.is-processing .fd-image-img { filter: blur(2px); }
.fd-image-pending { display: none; align-items: center; gap: 8px; font-size: .78rem; font-weight: 500; }
.fd-image.is-pending .fd-image-pending { display: flex; }
.fd-ring { position: relative; display: none; width: 58px; height: 58px; }
.fd-image.is-processing .fd-ring { display: block; }
.fd-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fd-ring-track, .fd-ring-value { fill: none; stroke-width: 3.5; }
.fd-ring-track { stroke: rgba(255, 255, 255, .25); }
.fd-ring-value { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset .3s ease; }
.fd-ring-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 600; }

/* Create-folder modal */
body.fd-modal-open { overflow: hidden; }
.fd-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px;
            background: rgba(17, 24, 39, .55); }
.fd-modal.is-open { display: flex; }
.fd-modal-dialog { display: flex; flex-direction: column; width: 100%; max-width: 480px; max-height: 90vh; margin: 0; background: #fff;
                   border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.fd-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--fd-line); }
.fd-modal-title { font-weight: 600; font-size: 1rem; }
.fd-modal-close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--fd-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.fd-modal-close:hover { background: #f3f4f6; color: var(--fd-text); }
.fd-modal-body { flex: 1; overflow-y: auto; padding: 18px 20px 4px; }
.fd-modal-body .fd-alert { margin-bottom: 14px; }
.fd-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--fd-line); background: #fafafa; }

.fd-field { margin-bottom: 16px; }
.fd-label { display: block; margin-bottom: 6px; font-size: .78rem; font-weight: 500; color: #374151; }
.fd-input { width: 100%; padding: 8px 10px; border: 1px solid var(--fd-border); border-radius: 8px; background: #fff; color: var(--fd-text);
            font: inherit; font-size: .86rem; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.fd-input:focus { border-color: var(--fd-primary); box-shadow: 0 0 0 3px var(--fd-primary-soft); }
.fd-textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.fd-hint { margin-top: 5px; font-size: .74rem; color: var(--fd-faint); }

@media (max-width: 860px) {
    .fd-layout { grid-template-columns: 1fr; }
    .fd-sidebar { position: static; max-height: none; padding: 8px; }
    .fd-sidebar-title { display: none; }
    .fd-side-list { display: flex; gap: 6px; overflow-x: auto; }
    .fd-side-item { flex-shrink: 0; }
    .fd-side-link { border: 1px solid var(--fd-border); border-radius: 999px; padding: 5px 12px; }
    .fd-side-name { max-width: 160px; }
}
@media (max-width: 640px) {
    .fd-main { padding: 14px 12px 16px; }
    .fd-image-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
    .fd-folder-actions { opacity: 1; }
    .fd-dropzone-files { display: none; }
    .fd-upload > .fd-btn { flex: 1 1 100%; }
    .fd-modal { padding: 0; align-items: flex-end; }
    .fd-modal-dialog { max-width: none; border-radius: 14px 14px 0 0; }
}
@media (hover: none) {
    .fd-folder-actions, .fd-image-check { opacity: 1; }
}

/* ============ Short Video Data page (members/sites-add.html) ============ */
.sv, .sv-modal {
    --sv-border: #e5e7eb; --sv-line: #f1f2f4; --sv-text: #111827; --sv-muted: #6b7280; --sv-faint: #9ca3af;
    --sv-primary: #4f46e5; --sv-primary-hover: #4338ca; --sv-primary-soft: #eef2ff;
    --sv-danger: #dc2626; --sv-danger-soft: #fef2f2;
    color: var(--sv-text); font-family: 'Poppins', system-ui, sans-serif; font-size: 14px;
}
.sv *, .sv *::before, .sv *::after,
.sv-modal *, .sv-modal *::before, .sv-modal *::after { box-sizing: border-box; }
/* Component display rules below would otherwise override the hidden attribute. */
.sv [hidden], .sv-modal [hidden] { display: none !important; }

.sv { max-width: 1200px; margin: 24px auto 48px; padding: 0 16px; }
.sv-muted { color: var(--sv-faint); font-size: .78rem; }

/* Header + tabs */
.sv-head { margin-bottom: 16px; }
.sv-head-title { margin: 0 0 2px; font-size: 1.35rem; font-weight: 600; }
.sv-head-sub { margin: 0; color: var(--sv-muted); font-size: .85rem; }

.sv-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; background: #f3f4f6; border-radius: 10px; }
.sv-tab { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent;
          color: var(--sv-muted); font: inherit; font-size: .84rem; font-weight: 500; cursor: pointer; transition: background .15s ease, color .15s ease; }
.sv-tab:hover { color: var(--sv-text); }
.sv-tab.is-active { background: #fff; color: var(--sv-text); box-shadow: 0 1px 3px rgba(17, 24, 39, .1); }
.sv-tab-count { padding: 0 7px; border-radius: 999px; background: #e5e7eb; color: var(--sv-muted); font-size: .7rem; line-height: 1.6; }
.sv-tab.is-active .sv-tab-count { background: var(--sv-primary-soft); color: var(--sv-primary); }

.sv-panel { display: flex; flex-direction: column; gap: 16px; }

/* Cards */
.sv-card { background: #fff; border: 1px solid var(--sv-border); border-radius: 12px; padding: 18px 20px; }
.sv-card-flush { padding: 0; overflow: hidden; }
.sv-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sv-card-head-pad { align-items: center; margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--sv-line); }
.sv-card-title { margin: 0; font-size: 1rem; font-weight: 600; }
.sv-card-sub { margin: 2px 0 0; color: var(--sv-faint); font-size: .78rem; }

/* Form */
.sv-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 16px; }
.sv-field { display: flex; flex-direction: column; min-width: 0; }
.sv-field-wide { grid-column: span 2; }
.sv-field-toggle { justify-content: flex-end; }
.sv-label { display: block; margin-bottom: 6px; font-size: .78rem; font-weight: 500; color: #374151; }
.sv-input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--sv-border); border-radius: 8px; background: #fff; color: var(--sv-text);
            font: inherit; font-size: .85rem; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.sv-input:focus { border-color: var(--sv-primary); box-shadow: 0 0 0 3px var(--sv-primary-soft); }
.sv-select { padding-right: 28px; }
.sv-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; }
.sv-hint { margin-top: 5px; font-size: .74rem; color: var(--sv-faint); line-height: 1.45; }
.sv-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sv-inline .sv-input { flex: 1 1 240px; }
.sv-inline .sv-test-site { flex: 0 1 220px; }

/* select2 inside the site popup, matched to .sv-input */
.sv-modal .select2-container--default .select2-selection--multiple { min-height: 38px; border: 1px solid var(--sv-border); border-radius: 8px; padding: 2px 4px; }
.sv-modal .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--sv-primary); box-shadow: 0 0 0 3px var(--sv-primary-soft); }
.sv-modal .select2-container--default .select2-selection--multiple .select2-selection__choice { border: 0; border-radius: 999px; background: var(--sv-primary-soft);
                                                                                               color: var(--sv-primary); font-size: .76rem; padding: 1px 8px; }

/* Toggle switch */
.sv-switch { display: inline-flex; align-items: center; gap: 10px; height: 38px; cursor: pointer; user-select: none; }
.sv-switch-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sv-switch-track { position: relative; width: 38px; height: 22px; flex-shrink: 0; border-radius: 999px; background: #d1d5db; transition: background .15s ease; }
.sv-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
                          box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s ease; }
.sv-switch-input:checked + .sv-switch-track { background: var(--sv-primary); }
.sv-switch-input:checked + .sv-switch-track::after { transform: translateX(16px); }
.sv-switch-input:focus-visible + .sv-switch-track { box-shadow: 0 0 0 3px var(--sv-primary-soft); }
.sv-switch-label { font-size: .84rem; font-weight: 500; }

/* Buttons */
.sv-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px;
          border: 1px solid var(--sv-border); border-radius: 8px; background: #fff; color: var(--sv-text);
          font: inherit; font-size: .82rem; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
          transition: background .15s ease, border-color .15s ease; }
.sv-btn:hover { background: #f9fafb; border-color: #d1d5db; }
.sv-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sv-primary-soft); border-color: var(--sv-primary); }
.sv-btn:disabled { opacity: .6; cursor: default; }
.sv-btn-sm { height: 30px; padding: 0 11px; font-size: .76rem; }
.sv-btn-primary { background: var(--sv-primary); border-color: var(--sv-primary); color: #fff; }
.sv-btn-primary:hover { background: var(--sv-primary-hover); border-color: var(--sv-primary-hover); }
.sv-btn.is-loading { pointer-events: none; }
.sv-btn.is-loading::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent;
                             border-radius: 50%; animation: spin .8s linear infinite; }
.sv-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 7px;
               background: transparent; color: var(--sv-muted); cursor: pointer; transition: background .15s ease, color .15s ease; }
.sv-icon-btn:hover { background: #f3f4f6; color: var(--sv-text); }
.sv-icon-btn-danger:hover { background: var(--sv-danger-soft); color: var(--sv-danger); }

/* Alerts */
.sv-alert { margin-top: 12px; padding: 9px 12px; border-radius: 8px; border: 1px solid; font-size: .8rem; line-height: 1.45; }
.sv-alert-error { background: var(--sv-danger-soft); color: #b91c1c; border-color: #fecaca; }
.sv-alert-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }

/* Site + category boxes */
.sv-delete-form { display: none; }
.sv-site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 0; padding: 16px 20px 20px; list-style: none; }
.sv-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 0; padding: 16px 20px 20px; list-style: none; }

.sv-box { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; background: #fff; border: 1px solid var(--sv-border);
          border-radius: 10px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.sv-box:hover { border-color: #c7d2fe; box-shadow: 0 4px 14px rgba(17, 24, 39, .06); }
.sv-box:focus-visible { outline: none; border-color: var(--sv-primary); box-shadow: 0 0 0 3px var(--sv-primary-soft); }
.sv-box.is-editing { border-color: var(--sv-primary); background: #fafaff; box-shadow: 0 0 0 3px var(--sv-primary-soft); }
.sv-box.is-inactive { background: #fafafa; }
.sv-box.is-inactive .sv-box-title, .sv-box.is-inactive .sv-box-url { color: var(--sv-faint); }
.sv-box.is-trash .sv-box-title { color: var(--sv-faint); text-decoration: line-through; }

.sv-box-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sv-box-title { min-width: 0; font-weight: 600; font-size: .88rem; line-height: 1.35; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sv-box-url { padding: 6px 8px; border-radius: 6px; background: #f9fafb; color: #4b5563; font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
              font-size: .74rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sv-box-cats { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; }
.sv-box-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--sv-line); }

.sv-cat-box { flex-direction: row; align-items: center; gap: 8px; padding: 10px 8px 10px 12px; }
.sv-cat-box-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.sv-cat-box .sv-code { align-self: flex-start; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.sv-cat-link { display: inline-block; max-width: 100%; padding: 1px 8px; border-radius: 999px; background: #f3f4f6; color: #374151;
               font-size: .72rem; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sv-cat-link:hover { background: var(--sv-primary-soft); color: var(--sv-primary); }
.sv-row-actions { display: inline-flex; align-items: center; gap: 4px; }
.sv-code { padding: 1px 6px; border-radius: 5px; background: #f3f4f6; color: #374151; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .75rem; }

.sv-pill { display: inline-block; padding: 1px 9px; border-radius: 999px; background: #f3f4f6; color: #4b5563; font-size: .7rem; font-weight: 500; white-space: nowrap; }
.sv-pill-type-short { background: #eef2ff; color: #4338ca; }
.sv-pill-type-photo { background: #ecfeff; color: #0e7490; }
.sv-pill-type-news { background: #fef3c7; color: #92400e; }
.sv-status { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 500; white-space: nowrap; }
.sv-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.sv-status-on { color: #15803d; }
.sv-status-on::before { background: #16a34a; }
.sv-status-off { color: var(--sv-faint); }
.sv-status-off::before { background: #d1d5db; }

.sv-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 16px; text-align: center; }
.sv-empty-title { font-weight: 500; }
.sv-empty-text { color: var(--sv-muted); font-size: .84rem; }

/* Test tools + results */
.sv-test-row { padding: 16px 20px 18px; border-top: 1px solid var(--sv-line); background: #fcfcfd; }
.sv-test-output { margin-top: 12px; max-height: 320px; overflow: auto; padding: 10px 12px; border: 1px solid var(--sv-border); border-radius: 8px; background: #fff; font-size: .78rem; }
.sv-test-output-error { background: var(--sv-danger-soft); border-color: #fecaca; color: #b91c1c; }
.sv-test-output-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.sv-test-title { font-weight: 600; }
.sv-test-list { margin: 8px 0 0; padding-left: 20px; }
.sv-test-list > .sv-test-item { list-style: decimal; padding: 6px 0; border-top: 1px solid var(--sv-line); }
.sv-test-field { display: flex; gap: 8px; line-height: 1.5; }
.sv-test-key { flex: 0 0 96px; color: var(--sv-faint); }
.sv-test-value { flex: 1; min-width: 0; word-break: break-word; }

/* Site tags modal */
body.sv-modal-open { overflow: hidden; }
.sv-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(17, 24, 39, .55); }
.sv-modal.is-open { display: flex; }
.sv-modal-dialog { display: flex; flex-direction: column; width: 100%; max-width: 760px; max-height: 92vh; background: #fff;
                   border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.sv-modal-form { display: flex; flex-direction: column; min-height: 0; flex: 1; margin: 0; }
.sv-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--sv-line); }
.sv-modal-title { font-weight: 600; font-size: 1rem; }
.sv-modal-close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--sv-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.sv-modal-close:hover { background: #f3f4f6; color: var(--sv-text); }
.sv-modal-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.sv-modal-body > .sv-field { margin-bottom: 14px; }
.sv-modal-dialog-md { max-width: 620px; }
.sv-modal-dialog-md .sv-form-grid { grid-template-columns: 1fr 1fr; }
.sv-alert-inset { margin: 12px 20px 0; }
.sv-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--sv-line); background: #fafafa; }

.sv-subtabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--sv-border); }
.sv-subtab { margin-bottom: -1px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--sv-muted);
             font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer; }
.sv-subtab:hover { color: var(--sv-text); }
.sv-subtab.is-active { border-bottom-color: var(--sv-primary); color: var(--sv-primary); }
.sv-modal-pane { display: none; }
.sv-modal-pane.is-active { display: block; }
.sv-modal-pane .is-off { display: none; }
.sv-modal-test { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--sv-border); }

@media (max-width: 720px) {
    .sv-field-wide { grid-column: auto; }
    .sv-card { padding: 16px; }
    .sv-card-head-pad { padding: 12px 16px; }
    .sv-site-grid, .sv-cat-grid { padding: 12px 16px 16px; }
    .sv-modal-dialog-md .sv-form-grid { grid-template-columns: 1fr; }
    .sv-inline .sv-test-site { flex: 1 1 100%; }
    .sv-site-grid { grid-template-columns: 1fr; }
    .sv-tabs { display: flex; }
    .sv-tab { flex: 1; justify-content: center; }
    .sv-modal { padding: 0; align-items: flex-end; }
    .sv-modal-dialog { max-height: 94vh; border-radius: 14px 14px 0 0; }
}

/* ============ Services Manager page (dashboard/services.html) ============ */
.srv {
    --srv-border: #e5e7eb; --srv-line: #f1f2f4; --srv-text: #111827; --srv-muted: #6b7280; --srv-faint: #9ca3af;
    --srv-primary: #4f46e5; --srv-primary-soft: #eef2ff;
    --srv-green: #16a34a; --srv-green-soft: #f0fdf4; --srv-red: #dc2626; --srv-red-soft: #fef2f2;
    max-width: 1280px; margin: 24px auto 48px; padding: 0 16px;
    color: var(--srv-text); font-family: 'Poppins', system-ui, sans-serif; font-size: 14px;
}
.srv *, .srv *::before, .srv *::after { box-sizing: border-box; }
.srv [hidden] { display: none !important; }

/* Header */
.srv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.srv-head-title { margin: 0 0 2px; font-size: 1.35rem; font-weight: 600; }
.srv-head-sub { margin: 0; color: var(--srv-muted); font-size: .85rem; }
.srv-summary { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--srv-border); border-radius: 999px;
               background: #fff; font-size: .8rem; font-weight: 500; color: #374151; }
.srv-summary-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }
.srv-summary.is-all .srv-summary-dot { background: var(--srv-green); }

/* Layout */
.srv-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }

/* Service list */
.srv-nav { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 4px; padding: 8px; background: #fff;
           border: 1px solid var(--srv-border); border-radius: 12px; }
.srv-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent;
                color: #374151; font: inherit; text-align: left; cursor: pointer; transition: background .15s ease; }
.srv-nav-item:hover { background: #f9fafb; }
.srv-nav-item.is-active { background: var(--srv-primary-soft); color: var(--srv-primary); }
.srv-nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0;
                border-radius: 8px; background: #f3f4f6; font-size: 1rem; }
.srv-nav-item.is-active .srv-nav-icon { background: #fff; }
.srv-nav-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.srv-nav-label { font-size: .82rem; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.srv-nav-meta { font-size: .7rem; color: var(--srv-faint); }

/* Status dot: red when stopped, pulsing green when running */
.srv-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--srv-red); }
.is-running .srv-dot { background: var(--srv-green); animation: srv-pulse 1.6s ease-in-out infinite; }
@keyframes srv-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); } 50% { box-shadow: 0 0 0 4px rgba(22, 163, 74, 0); } }

/* Cards */
.srv-panels { min-width: 0; }
.srv-panel { display: flex; flex-direction: column; gap: 16px; }
.srv-card { background: #fff; border: 1px solid var(--srv-border); border-radius: 12px; padding: 18px 20px; min-width: 0; }
.srv-card-title { margin: 0 0 14px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--srv-muted); }

.srv-detail-head { display: flex; align-items: flex-start; gap: 14px; }
.srv-detail-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0;
                   border-radius: 12px; background: #f3f4f6; font-size: 1.5rem; }
.srv-detail-text { flex: 1; min-width: 0; }
.srv-detail-title { margin: 0 0 3px; font-size: 1.1rem; font-weight: 600; }
.srv-detail-desc { margin: 0; color: var(--srv-muted); font-size: .82rem; line-height: 1.5; }
.srv-status-block { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.srv-badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; background: var(--srv-red-soft);
             color: #b91c1c; font-size: .78rem; font-weight: 600; }
.is-running .srv-badge { background: var(--srv-green-soft); color: #15803d; }
.srv-pid { font-size: .72rem; color: var(--srv-faint); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

/* Buttons */
.srv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--srv-line); }
.srv-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px;
           border: 1px solid var(--srv-border); border-radius: 8px; background: #fff; color: var(--srv-text);
           font: inherit; font-size: .82rem; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
           transition: background .15s ease, border-color .15s ease, opacity .15s ease; }
.srv-btn:hover { background: #f9fafb; border-color: #d1d5db; }
.srv-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--srv-primary-soft); border-color: var(--srv-primary); }
.srv-btn:disabled { opacity: .4; cursor: not-allowed; }
.srv-btn-sm { height: 28px; padding: 0 10px; font-size: .74rem; }
.srv-btn-start { background: var(--srv-green); border-color: var(--srv-green); color: #fff; }
.srv-btn-start:hover { background: #15803d; border-color: #15803d; }
.srv-btn-stop { color: var(--srv-red); }
.srv-btn-stop:hover { background: var(--srv-red-soft); border-color: #fecaca; }
.srv-btn-link { margin-left: auto; color: var(--srv-primary); }
.srv-btn-link:hover { background: var(--srv-primary-soft); border-color: #c7d2fe; }
.srv-btn-danger { background: var(--srv-red); border-color: var(--srv-red); color: #fff; }
.srv-btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.srv-btn-dark { background: #1e293b; border-color: #334155; color: #cbd5e1; }
.srv-btn-dark:hover { background: #334155; border-color: #475569; }
.srv-btn.is-loading { pointer-events: none; }
.srv-btn.is-loading::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent;
                              border-radius: 50%; animation: spin .8s linear infinite; }
.srv-btn.is-loading > svg { display: none; }
.srv-link-btn { padding: 0; border: 0; background: none; color: var(--srv-primary); font: inherit; font-size: .76rem; font-weight: 500; cursor: pointer; }
.srv-link-btn:hover { text-decoration: underline; }

/* Alerts */
.srv-alert { margin-top: 14px; padding: 9px 12px; border-radius: 8px; border: 1px solid; font-size: .8rem; line-height: 1.45; word-break: break-word; }
.srv-alert-ok { background: var(--srv-green-soft); color: #15803d; border-color: #bbf7d0; }
.srv-alert-err { background: var(--srv-red-soft); color: #b91c1c; border-color: #fecaca; }

/* Worker config */
.srv-cfg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.srv-field { display: flex; flex-direction: column; min-width: 0; }
.srv-label { display: block; margin-bottom: 6px; font-size: .78rem; font-weight: 500; color: #374151; }
.srv-flag { padding: 0 5px; border-radius: 4px; background: #f3f4f6; color: var(--srv-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
            font-size: .7rem; font-weight: 400; }
.srv-input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--srv-border); border-radius: 8px; background: #fff; color: var(--srv-text);
             font: inherit; font-size: .85rem; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.srv-input:focus { border-color: var(--srv-primary); box-shadow: 0 0 0 3px var(--srv-primary-soft); }

.srv-queues-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 18px; }
.srv-queue-count { margin-left: 4px; font-weight: 400; color: var(--srv-faint); }
.srv-queues-tools { display: inline-flex; gap: 12px; }
.srv-queue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.srv-queue { position: relative; display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; border: 1px solid var(--srv-border); border-radius: 9px;
             background: #fff; cursor: pointer; user-select: none; transition: border-color .15s ease, background .15s ease; }
.srv-queue:hover { border-color: #c7d2fe; }
.srv-queue.is-selected { border-color: var(--srv-primary); background: var(--srv-primary-soft); }
.srv-queue-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.srv-queue-check { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px;
                   border: 1.5px solid #d1d5db; border-radius: 5px; background: #fff; color: transparent; transition: background .15s ease, border-color .15s ease; }
.srv-queue.is-selected .srv-queue-check { border-color: var(--srv-primary); background: var(--srv-primary); color: #fff; }
.srv-queue-input:focus-visible + .srv-queue-check { box-shadow: 0 0 0 3px var(--srv-primary-soft); }
.srv-queue-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.srv-queue-name { font-size: .8rem; font-weight: 500; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; word-break: break-all; }
.srv-queue.is-selected .srv-queue-name { color: var(--srv-primary); }
.srv-queue-desc { font-size: .72rem; color: var(--srv-muted); line-height: 1.4; }

.srv-cmd-label { margin-top: 18px; }
.srv-cmd { margin: 0; padding: 12px 14px; border-radius: 8px; background: #0f172a; color: #c7d2fe; font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
           font-size: .76rem; line-height: 1.7; white-space: pre-wrap; word-break: break-all; }

/* Flower links */
.srv-link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.srv-link-card { display: flex; flex-direction: column; gap: 3px; padding: 12px; border: 1px solid var(--srv-border); border-radius: 10px;
                 color: inherit; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.srv-link-card:hover { border-color: #c7d2fe; background: #fafaff; }
.srv-link-name { font-weight: 600; font-size: .84rem; color: var(--srv-primary); }
.srv-link-desc { font-size: .75rem; color: var(--srv-muted); line-height: 1.4; }
.srv-link-url { margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .7rem; color: var(--srv-faint);
                overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Warning card (weed cleanup) */
.srv-card-warn { background: #fffbeb; border-color: #fde68a; }
.srv-warn-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.srv-warn-title { margin-bottom: 4px; color: #92400e; }
.srv-warn-text { margin: 0; font-size: .8rem; color: #78350f; }

/* Log */
.srv-card-log { padding: 0; overflow: hidden; background: #0f172a; border-color: #1e293b; }
.srv-log-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #1e293b; }
.srv-log-title { display: inline-flex; align-items: center; gap: 8px; color: #e2e8f0; font-size: .82rem; font-weight: 600; }
.srv-live { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: srv-pulse 1.6s ease-in-out infinite; }
.srv-live-text { color: #22c55e; font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.srv-log-tools { display: inline-flex; gap: 6px; }
.srv-log { height: 420px; overflow-y: auto; padding: 12px 14px; color: #94a3b8; font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
           font-size: .74rem; line-height: 1.55; white-space: pre-wrap; word-break: break-all; }

/* Danger zone */
.srv-danger { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding: 16px 20px;
              background: #fff; border: 1px solid #fecaca; border-radius: 12px; }
.srv-danger-text { flex: 1 1 420px; min-width: 0; }
.srv-danger-title { margin: 0 0 4px; font-size: .9rem; font-weight: 600; color: #991b1b; }
.srv-danger-desc { margin: 0; font-size: .78rem; line-height: 1.55; color: var(--srv-muted); }

@media (max-width: 900px) {
    .srv-layout { grid-template-columns: 1fr; }
    .srv-nav { position: static; flex-direction: row; overflow-x: auto; padding: 6px; }
    .srv-nav-item { flex: 0 0 auto; width: auto; }
    .srv-nav-label { max-width: 150px; }
}
@media (max-width: 640px) {
    .srv-cfg-grid { grid-template-columns: 1fr; }
    .srv-detail-head { flex-wrap: wrap; }
    .srv-status-block { flex-direction: row; align-items: center; width: 100%; }
    .srv-btn-link { margin-left: 0; }
    .srv-log { height: 320px; }
}

/* ============ Header logo (master.html .hd-logo) ============ */
/* Rest: same look as the old static mark. Load: ring spins in, play pops.
   Hover/focus: reel spins, flow trails stream behind the play button, "Flow" shimmers.
   Press: small squash. */
.hd-logo:focus-visible { outline: 2px solid #4f46e5; outline-offset: 4px; border-radius: 8px; }
.hd-logo-mark { flex-shrink: 0; overflow: visible; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.hd-logo:active .hd-logo-mark { transform: scale(.88); }

.hd-logo-ring { stroke-dasharray: 21 4; transform-box: fill-box; transform-origin: center;
                animation: hd-logo-ring-in .9s cubic-bezier(.22, 1, .36, 1) both; }
.hd-logo-glow { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.6);
                transition: opacity .3s ease, transform .3s ease; }
.hd-logo-play { transform-box: fill-box; transform-origin: center;
                animation: hd-logo-play-in .5s .45s cubic-bezier(.34, 1.56, .64, 1) both;
                transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.hd-logo-flow { opacity: 0; transform: translateX(4px); transition: opacity .25s ease, transform .3s ease; }
.hd-logo-flow-line { stroke-dasharray: 5 5; stroke-dashoffset: 0; }

.hd-logo:hover .hd-logo-ring, .hd-logo:focus-visible .hd-logo-ring { animation: hd-logo-spin 2.4s linear infinite; }
.hd-logo:hover .hd-logo-glow, .hd-logo:focus-visible .hd-logo-glow { opacity: .14; transform: scale(1); }
.hd-logo:hover .hd-logo-play, .hd-logo:focus-visible .hd-logo-play { transform: translateX(2px) scale(1.08); }
.hd-logo:hover .hd-logo-flow, .hd-logo:focus-visible .hd-logo-flow { opacity: 1; transform: translateX(0); }
.hd-logo:hover .hd-logo-flow-line, .hd-logo:focus-visible .hd-logo-flow-line { animation: hd-logo-stream .7s linear infinite; }
.hd-logo:hover .hd-logo-flow-line:nth-child(2), .hd-logo:focus-visible .hd-logo-flow-line:nth-child(2) { animation-delay: -.25s; }
.hd-logo:hover .hd-logo-flow-line:nth-child(3), .hd-logo:focus-visible .hd-logo-flow-line:nth-child(3) { animation-delay: -.5s; }

.hd-logo .hd-logo-accent { background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 50%, #4f46e5 100%); background-size: 200% 100%;
                           -webkit-background-clip: text; background-clip: text; color: transparent; }
.hd-logo:hover .hd-logo-accent, .hd-logo:focus-visible .hd-logo-accent { animation: hd-logo-shimmer 1.6s linear infinite; }

@keyframes hd-logo-ring-in { from { opacity: 0; transform: rotate(-200deg) scale(.7); } to { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes hd-logo-play-in { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes hd-logo-spin { to { transform: rotate(360deg); } }
/* Dashes travel left-to-right, toward the play button. */
@keyframes hd-logo-stream { from { stroke-dashoffset: 10; } to { stroke-dashoffset: 0; } }
@keyframes hd-logo-shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
    .hd-logo-ring, .hd-logo-play, .hd-logo-flow-line, .hd-logo-accent,
    .hd-logo:hover .hd-logo-ring, .hd-logo:hover .hd-logo-flow-line, .hd-logo:hover .hd-logo-accent { animation: none !important; }
    .hd-logo-mark, .hd-logo-glow, .hd-logo-play, .hd-logo-flow { transition: none; }
}

/* ============ Subscriptions page (dashboard/subscriptions.html) ============ */
.sb {
    --sb-border: #e5e7eb; --sb-line: #f1f2f4; --sb-text: #111827; --sb-muted: #6b7280; --sb-faint: #9ca3af;
    --sb-primary: #4f46e5; --sb-primary-hover: #4338ca; --sb-primary-soft: #eef2ff;
    --sb-danger: #dc2626; --sb-danger-soft: #fef2f2;
    max-width: 1200px; margin: 24px auto 48px; padding: 0 16px;
    color: var(--sb-text); font-family: 'Poppins', system-ui, sans-serif; font-size: 14px;
}
.sb *, .sb *::before, .sb *::after { box-sizing: border-box; }
.sb-muted { font-size: .72rem; color: var(--sb-faint); }

/* Header + rules */
.sb-head { margin-bottom: 12px; }
.sb-head-title { margin: 0 0 2px; font-size: 1.35rem; font-weight: 600; }
.sb-head-sub { margin: 0; color: var(--sb-muted); font-size: .85rem; }
.sb-rules { margin-bottom: 18px; font-size: .8rem; color: var(--sb-muted); }
.sb-rules-summary { display: inline-flex; align-items: center; gap: 6px; color: var(--sb-primary); font-weight: 500; cursor: pointer; }
.sb-rules-list { margin: 8px 0 0; padding: 12px 14px 12px 30px; border: 1px solid var(--sb-border); border-radius: 10px; background: #fff; line-height: 1.7; }
.sb-rules-list li { list-style: disc; }

/* Stats */
.sb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 26px; }
.sb-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: #fff; border: 1px solid var(--sb-border); border-radius: 12px;
           color: inherit; text-decoration: none; }
.sb-stat-link { transition: border-color .15s ease, box-shadow .15s ease; }
.sb-stat-link:hover { border-color: #c7d2fe; box-shadow: 0 4px 14px rgba(17, 24, 39, .05); }
.sb-stat-link.is-active { border-color: var(--sb-primary); box-shadow: 0 0 0 3px var(--sb-primary-soft); }
.sb-stat-label { font-size: .74rem; font-weight: 500; color: var(--sb-muted); }
.sb-stat-value { font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.sb-stat-standard .sb-stat-value { color: #4b5563; }
.sb-stat-normal .sb-stat-value { color: #1d4ed8; }
.sb-stat-enterprise .sb-stat-value { color: #6d28d9; }
.sb-stat-alert { background: #fffbeb; border-color: #fde68a; }
.sb-stat-alert .sb-stat-value { color: #b45309; }

/* Sections */
.sb-section { margin-bottom: 26px; }
.sb-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1rem; font-weight: 600; }
.sb-count { padding: 0 8px; border-radius: 999px; background: var(--sb-primary); color: #fff; font-size: .7rem; line-height: 1.7; }
.sb-card { background: #fff; border: 1px solid var(--sb-border); border-radius: 12px; overflow: hidden; }
.sb-empty { padding: 28px 16px; border: 1px dashed var(--sb-border); border-radius: 12px; background: #fff; color: var(--sb-muted); font-size: .85rem; text-align: center; }
.sb-card .sb-empty { border: 0; border-radius: 0; }

/* Shared bits */
.sb-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sb-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
             background: linear-gradient(135deg, #4f46e5, #06b6d4); color: #fff; font-size: .85rem; font-weight: 600; }
.sb-user-text { display: flex; flex-direction: column; min-width: 0; }
.sb-user-name { font-weight: 500; font-size: .86rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sb-user-email { font-size: .76rem; color: var(--sb-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.sb-plan { display: inline-flex; align-self: flex-start; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: #f3f4f6; color: #4b5563; }
.sb-plan-normal { background: #eff6ff; color: #1d4ed8; }
.sb-plan-enterprise { background: #f5f3ff; color: #6d28d9; }

.sb-input { height: 36px; padding: 0 10px; border: 1px solid var(--sb-border); border-radius: 8px; background: #fff; color: var(--sb-text);
            font: inherit; font-size: .82rem; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.sb-input:focus { border-color: var(--sb-primary); box-shadow: 0 0 0 3px var(--sb-primary-soft); }
.sb-select { width: auto; padding-right: 26px; }

.sb-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px;
          border: 1px solid var(--sb-border); border-radius: 8px; background: #fff; color: var(--sb-text);
          font: inherit; font-size: .8rem; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
          transition: background .15s ease, border-color .15s ease; }
.sb-btn:hover { background: #f9fafb; border-color: #d1d5db; }
.sb-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sb-primary-soft); border-color: var(--sb-primary); }
.sb-btn:disabled { opacity: .5; cursor: not-allowed; }
.sb-btn-sm { height: 30px; padding: 0 10px; font-size: .76rem; }
.sb-btn-primary { background: var(--sb-primary); border-color: var(--sb-primary); color: #fff; }
.sb-btn-primary:hover { background: var(--sb-primary-hover); border-color: var(--sb-primary-hover); }
.sb-btn-primary:disabled:hover { background: var(--sb-primary); }
.sb-btn-danger-ghost { color: var(--sb-danger); }
.sb-btn-danger-ghost:hover { background: var(--sb-danger-soft); border-color: #fecaca; }
.sb-btn.is-loading { pointer-events: none; }
.sb-btn.is-loading::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent;
                             border-radius: 50%; animation: spin .8s linear infinite; }

/* Pending request cards */
.sb-req-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.sb-req { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #fff; border: 1px solid var(--sb-border); border-radius: 12px;
          transition: opacity .2s ease; }
.sb-req.is-done { opacity: .5; }
.sb-req-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sb-req-time { flex-shrink: 0; font-size: .72rem; color: var(--sb-faint); }
.sb-req-change { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: #f9fafb; }
.sb-req-plan { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sb-req-caption { font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sb-faint); }
.sb-req-arrow { flex-shrink: 0; color: var(--sb-faint); }
.sb-req-amount { margin-left: auto; font-size: 1rem; font-weight: 600; white-space: nowrap; }
.sb-req-effect { padding-left: 10px; border-left: 3px solid var(--sb-border); font-size: .78rem; line-height: 1.5; color: #374151; }
.sb-req-effect-extend { border-left-color: #3b82f6; }
.sb-req-effect-upgrade { border-left-color: #8b5cf6; }
.sb-req-effect-downgrade { border-left-color: #ef4444; }
.sb-req-effect.is-blocked { color: #b91c1c; }
.sb-req-note { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--sb-primary-soft); color: #3730a3; font-size: .78rem;
               line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.sb-req-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sb-line); }
.sb-req-admin-note { width: 100%; }
.sb-req-buttons { display: flex; justify-content: flex-end; gap: 8px; }

/* Recent decisions */
.sb-recent { margin-top: 14px; }
.sb-recent-summary { font-size: .84rem; font-weight: 500; cursor: pointer; }
.sb-recent-list { margin: 10px 0 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--sb-border); border-radius: 12px; overflow: hidden; }
.sb-recent-item { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px;
                  border-bottom: 1px solid var(--sb-line); font-size: .8rem; }
.sb-recent-item:last-child { border-bottom: 0; }
.sb-recent-main { min-width: 0; }
.sb-recent-note { display: block; color: var(--sb-muted); font-size: .74rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sb-recent-meta { font-size: .72rem; color: var(--sb-faint); white-space: nowrap; }
.sb-status { display: inline-flex; justify-content: center; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 600; background: #f3f4f6; color: var(--sb-muted); }
.sb-status-approved { background: #f0fdf4; color: #15803d; }
.sb-status-rejected { background: var(--sb-danger-soft); color: #b91c1c; }

/* Users list */
.sb-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--sb-line); }
.sb-search { position: relative; flex: 1 1 260px; min-width: 0; }
.sb-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--sb-faint); pointer-events: none; }
.sb-search-input { width: 100%; padding-left: 32px; }
.sb-filter-plan { flex: 0 0 160px; width: 160px; }
.sb-result-count { margin-left: auto; font-size: .78rem; color: var(--sb-muted); white-space: nowrap; }

.sb-list-head, .sb-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) 130px minmax(0, 1.5fr); gap: 16px; align-items: center; }
.sb-list-head { padding: 9px 16px; background: #fafafa; border-bottom: 1px solid var(--sb-line); color: var(--sb-faint);
                font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.sb-list { margin: 0; padding: 0; list-style: none; }
.sb-row { padding: 12px 16px; border-bottom: 1px solid var(--sb-line); transition: background .12s ease; }
.sb-row:last-child { border-bottom: 0; }
.sb-row:hover { background: #fcfcfd; }
.sb-plan-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sb-queued { font-size: .72rem; color: #6d28d9; line-height: 1.4; }
.sb-change { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Toggle switch */
.sb-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.sb-switch-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sb-switch-track { position: relative; width: 36px; height: 20px; flex-shrink: 0; border-radius: 999px; background: #d1d5db; transition: background .15s ease; }
.sb-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
                          box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s ease; }
.sb-switch-input:checked + .sb-switch-track { background: var(--sb-primary); }
.sb-switch-input:checked + .sb-switch-track::after { transform: translateX(16px); }
.sb-switch-input:focus-visible + .sb-switch-track { box-shadow: 0 0 0 3px var(--sb-primary-soft); }
.sb-switch-input:disabled + .sb-switch-track { opacity: .5; }
.sb-switch-label { font-size: .78rem; color: var(--sb-muted); }

/* Pagination */
.sb-pages { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 14px 16px; border-top: 1px solid var(--sb-line); }
.sb-page { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--sb-border);
           border-radius: 8px; background: #fff; color: #374151; font-size: .8rem; font-weight: 500; text-decoration: none; transition: background .15s ease, border-color .15s ease; }
.sb-page:hover { background: #f9fafb; border-color: #d1d5db; }
.sb-page.is-current { background: var(--sb-primary); border-color: var(--sb-primary); color: #fff; }
.sb-page.is-disabled { color: #d1d5db; pointer-events: none; }
.sb-page-nav { padding: 0 12px; }
.sb-page-gap { padding: 0 4px; color: var(--sb-faint); }

/* Toasts (Toastify element, styled by className) */
.toastify.sb-toast { border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); font-family: 'Poppins', system-ui, sans-serif; font-size: .82rem; }
.toastify.sb-toast-ok { background: #15803d; color: #fff; }
.toastify.sb-toast-err { background: #fbbf24; color: #111827; }

@media (max-width: 960px) {
    .sb-list-head { display: none; }
    .sb-row { grid-template-columns: 1fr 1fr; gap: 12px; }
    .sb-change { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 640px) {
    .sb-row { grid-template-columns: 1fr; }
    .sb-req-grid { grid-template-columns: 1fr; }
    .sb-req-change { flex-wrap: wrap; }
    .sb-recent-item { grid-template-columns: 1fr; gap: 4px; }
    .sb-filter-plan { flex: 1 1 auto; width: auto; }
    .sb-result-count { margin-left: 0; width: 100%; }
    .sb-page-nav { flex: 1 1 100%; }
}

/* ============ Settings > Admin tab: users (members/index.html #admin) ============ */
.au, .au-drawer {
    --au-border: #e5e7eb; --au-line: #f1f2f4; --au-text: #111827; --au-muted: #6b7280; --au-faint: #9ca3af;
    --au-primary: #4f46e5; --au-primary-hover: #4338ca; --au-primary-soft: #eef2ff;
    --au-danger: #dc2626; --au-danger-soft: #fef2f2;
    color: var(--au-text); font-family: 'Poppins', system-ui, sans-serif; font-size: 14px;
}
.au *, .au *::before, .au *::after, .au-drawer *, .au-drawer *::before, .au-drawer *::after { box-sizing: border-box; }
.au [hidden], .au-drawer [hidden] { display: none !important; }
.au-muted { font-size: .72rem; color: var(--au-faint); }

.au-head { margin-bottom: 14px; }
.au-title { margin: 0 0 2px; font-size: 1.05rem; font-weight: 600; }
.au-sub { margin: 0; color: var(--au-muted); font-size: .82rem; }
.au-card { background: #fff; border: 1px solid var(--au-border); border-radius: 12px; overflow: hidden; }

.au-input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--au-border); border-radius: 8px; background: #fff; color: var(--au-text);
            font: inherit; font-size: .84rem; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.au-input:focus { border-color: var(--au-primary); box-shadow: 0 0 0 3px var(--au-primary-soft); }
.au-input.is-invalid { border-color: var(--au-danger); }
.au-input:disabled { background: #f9fafb; color: var(--au-muted); }

.au-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--au-line); }
.au-search { position: relative; flex: 1 1 260px; min-width: 0; }
.au-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--au-faint); pointer-events: none; }
.au-search .au-search-input { padding-left: 32px; }
.au-filters .au-select { flex: 0 0 150px; width: 150px; }
.au-count { margin-left: auto; font-size: .78rem; color: var(--au-muted); white-space: nowrap; }

.au-list-head, .au-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.1fr) 70px; gap: 14px; align-items: center; }
.au-list-head { padding: 9px 16px; background: #fafafa; border-bottom: 1px solid var(--au-line); color: var(--au-faint);
                font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.au-list { margin: 0; padding: 0; list-style: none; }
.au-row { padding: 11px 16px; border-bottom: 1px solid var(--au-line); cursor: pointer; transition: background .12s ease; }
.au-row:last-child { border-bottom: 0; }
.au-row:hover { background: #fafaff; }
.au-row:focus-visible { outline: 2px solid var(--au-primary); outline-offset: -2px; }
.au-row.is-inactive .au-user-name { color: var(--au-muted); }

.au-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.au-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
             background: linear-gradient(135deg, #4f46e5, #06b6d4); color: #fff; font-size: .85rem; font-weight: 600; }
.au-avatar-lg { width: 46px; height: 46px; font-size: 1.1rem; }
.au-user-text { display: flex; flex-direction: column; min-width: 0; }
.au-user-name { font-weight: 500; font-size: .86rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.au-user-meta { font-size: .74rem; color: var(--au-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.au-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.au-badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 500; white-space: nowrap; }
.au-badge-on { background: #f0fdf4; color: #15803d; }
.au-badge-off { background: #f3f4f6; color: var(--au-muted); }
.au-badge-staff { background: var(--au-primary-soft); color: var(--au-primary); }
.au-badge-warn { background: #fffbeb; color: #b45309; }
.au-badge-pending { background: #fff7ed; color: #c2410c; }
.au-row-actions { gap: 6px; }

.au-plan-cell, .au-activity { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .76rem; }
.au-plan { display: inline-flex; align-self: flex-start; padding: 1px 9px; border-radius: 999px; font-size: .7rem; font-weight: 600; background: #f3f4f6; color: #4b5563; }
.au-plan-normal { background: #eff6ff; color: #1d4ed8; }
.au-plan-enterprise { background: #f5f3ff; color: #6d28d9; }
.au-row-actions { display: flex; justify-content: flex-end; }

.au-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px;
          border: 1px solid var(--au-border); border-radius: 8px; background: #fff; color: var(--au-text);
          font: inherit; font-size: .8rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.au-btn:hover { background: #f9fafb; border-color: #d1d5db; }
.au-btn:disabled { opacity: .55; cursor: not-allowed; }
.au-btn-sm { height: 28px; padding: 0 11px; font-size: .74rem; }
.au-btn-primary { background: var(--au-primary); border-color: var(--au-primary); color: #fff; }
.au-btn-primary:hover { background: var(--au-primary-hover); border-color: var(--au-primary-hover); }
.au-btn.is-loading { pointer-events: none; }
.au-btn.is-loading::before, .au-spinner { content: ""; width: 13px; height: 13px; border: 2px solid currentColor; border-top-color: transparent;
                                          border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; flex-shrink: 0; }
.au-icon-btn { width: 34px; height: 34px; flex-shrink: 0; border: 0; border-radius: 8px; background: transparent; color: var(--au-muted);
               font-size: 1.4rem; line-height: 1; cursor: pointer; }
.au-icon-btn:hover { background: #f3f4f6; color: var(--au-text); }
.au-btn-danger-ghost { color: var(--au-danger); }
.au-btn-danger-ghost:hover { background: var(--au-danger-soft); border-color: #fecaca; }
.au-foot-left { margin-right: auto; }
.au-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.au-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Staff edit requests awaiting super admin approval (Settings > Approvals tab) */
.au-tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px;
                background: #ef4444; color: #fff; font-size: .68rem; font-weight: 600; line-height: 1; vertical-align: middle; }
.au-tab-count[hidden] { display: none; }
.au-requests { margin-bottom: 14px; border-color: #fde68a; }
.au-requests-head { padding: 10px 16px; background: #fffbeb; border-bottom: 1px solid #fde68a; color: #92400e; font-size: .82rem; font-weight: 600; }
.au-requests-list { margin: 0; padding: 0; list-style: none; }
.au-req { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--au-line); }
.au-req:last-child { border-bottom: 0; }
.au-req-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .84rem; }
.au-req-who { margin-right: auto; }
.au-req-changes { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.au-req-change { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .8rem; }
.au-req-label { min-width: 130px; color: var(--au-muted); }
.au-req-old { color: var(--au-faint); text-decoration: line-through; overflow-wrap: anywhere; }
.au-req-arrow { color: var(--au-faint); }
.au-req-new { font-weight: 600; overflow-wrap: anywhere; }
.au-req-actions { display: flex; justify-content: flex-end; gap: 8px; }
.au-req-status-pending { background: #fff7ed; color: #c2410c; }
.au-req-status-approved { background: #ecfdf5; color: #047857; }
.au-req-status-denied { background: var(--au-danger-soft); color: #b91c1c; }

.au-empty, .au-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 32px 16px; color: var(--au-muted); font-size: .84rem; }
.au-pages { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 14px 16px; border-top: 1px solid var(--au-line); }
.au-page { min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--au-border); border-radius: 8px; background: #fff; color: #374151;
           font: inherit; font-size: .8rem; font-weight: 500; cursor: pointer; }
.au-page:hover:not(:disabled) { background: #f9fafb; }
.au-page.is-current { background: var(--au-primary); border-color: var(--au-primary); color: #fff; }
.au-page:disabled { color: #d1d5db; cursor: default; }
.au-page-gap { padding: 0 4px; color: var(--au-faint); }

/* Drawer */
body.au-drawer-open { overflow: hidden; }
.au-drawer { position: fixed; inset: 0; z-index: 1000; display: none; justify-content: flex-end; background: rgba(17, 24, 39, .45); }
.au-drawer.is-open { display: flex; }
.au-drawer-panel { display: flex; flex-direction: column; width: 100%; max-width: 560px; height: 100%; background: #fff;
                   box-shadow: -12px 0 40px rgba(0, 0, 0, .18); animation: au-slide-in .22s ease-out; }
@keyframes au-slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.au-drawer-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--au-line); }
.au-drawer-id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.au-drawer-name { font-weight: 600; font-size: 1rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.au-drawer-email { font-size: .78rem; color: var(--au-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.au-drawer-tabs { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--au-border); }
.au-drawer-tab { margin-bottom: -1px; padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--au-muted);
                 font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer; }
.au-drawer-tab:hover { color: var(--au-text); }
.au-drawer-tab.is-active { border-bottom-color: var(--au-primary); color: var(--au-primary); }
.au-drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.au-drawer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--au-line); background: #fafafa; }
.au-pane { display: none; margin: 0; }
.au-pane.is-active { display: block; }
.au-pane.is-loading { opacity: .4; pointer-events: none; }

.au-alert { margin-bottom: 14px; padding: 9px 12px; border: 1px solid; border-radius: 8px; font-size: .8rem; line-height: 1.45; }
.au-alert-error { background: var(--au-danger-soft); color: #b91c1c; border-color: #fecaca; }
.au-alert-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }

.au-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.au-field { display: flex; flex-direction: column; min-width: 0; }
.au-label { display: block; margin-bottom: 6px; font-size: .78rem; font-weight: 500; color: #374151; }
.au-label small { font-weight: 400; color: var(--au-faint); }
.au-field-error { min-height: 0; margin-top: 4px; font-size: .74rem; color: var(--au-danger); }
.au-field-error:empty { display: none; }
.au-field-password { margin-top: 16px; }

.au-switches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; padding: 14px; border: 1px solid var(--au-line); border-radius: 10px; background: #fafafa; }
.au-switch { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.au-switch .au-switch-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.au-switch-track { position: relative; width: 36px; height: 20px; flex-shrink: 0; border-radius: 999px; background: #d1d5db; transition: background .15s ease; }
.au-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
                          box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s ease; }
.au-switch .au-switch-input:checked + .au-switch-track { background: var(--au-primary); }
.au-switch .au-switch-input:checked + .au-switch-track::after { transform: translateX(16px); }
.au-switch .au-switch-input:focus-visible + .au-switch-track { box-shadow: 0 0 0 3px var(--au-primary-soft); }
.au-switch .au-switch-input:disabled + .au-switch-track { opacity: .5; }
.au-switch-text { display: flex; flex-direction: column; font-size: .8rem; font-weight: 500; line-height: 1.3; }
.au-switch-text small { font-size: .7rem; font-weight: 400; color: var(--au-faint); }

.au-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--au-line); }
.au-facts dt { font-size: .7rem; color: var(--au-faint); text-transform: uppercase; letter-spacing: .04em; }
.au-facts dd { margin: 2px 0 0; font-size: .82rem; }
.au-hint { margin: 14px 0 0; font-size: .76rem; color: var(--au-muted); }
.au-hint a { color: var(--au-primary); }

/* Related pane */
.au-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.au-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--au-border); border-radius: 10px; }
.au-stat.is-zero .au-stat-value { color: #d1d5db; }
.au-stat-value { font-size: 1.15rem; font-weight: 600; line-height: 1.1; }
.au-stat-label { font-size: .68rem; color: var(--au-muted); line-height: 1.3; }
.au-section-title { margin: 16px 0 8px; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--au-muted); }
.au-mini-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--au-line); border-radius: 10px; overflow: hidden; }
.au-mini { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--au-line); font-size: .78rem; }
.au-mini:last-child { border-bottom: 0; }
.au-mini-stack { flex-direction: column; align-items: flex-start; gap: 2px; }
.au-mini-main { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.au-mini-wrap { white-space: normal; word-break: break-word; }
.au-mini-link { color: var(--au-primary); text-decoration: none; }
.au-mini-link:hover { text-decoration: underline; }
.au-mini-meta { flex-shrink: 0; font-size: .7rem; color: var(--au-faint); }
.au-mini-empty { padding: 10px; font-size: .78rem; color: var(--au-faint); }
.au-mini-tag { flex-shrink: 0; padding: 0 7px; border-radius: 999px; background: #f3f4f6; color: var(--au-muted); font-size: .68rem; font-weight: 600; }
.au-mini-tag-youtube { background: #fef2f2; color: #b91c1c; }
.au-mini-tag-facebook { background: #eff6ff; color: #1d4ed8; }
.au-mini-tag-approved { background: #f0fdf4; color: #15803d; }
.au-mini-tag-rejected { background: var(--au-danger-soft); color: #b91c1c; }
.au-mini-tag-pending { background: #fffbeb; color: #b45309; }

@media (max-width: 960px) {
    .au-list-head { display: none; }
    .au-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
    .au-badges { grid-column: 1; }
    .au-plan-cell, .au-activity { grid-column: 1; }
    .au-row-actions { grid-column: 2; grid-row: 1; }
}
@media (max-width: 560px) {
    .au-form-grid, .au-switches, .au-facts { grid-template-columns: 1fr; }
    .au-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .au-count { margin-left: 0; width: 100%; }
    .au-filters .au-select { flex: 1 1 auto; width: auto; }
}

/* ============ Settings > Profile tab: password (members/index.html #user_details) ============ */
.pf-card { max-width: 640px; margin-top: 28px; padding: 18px 20px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
           font-family: 'Poppins', system-ui, sans-serif; }
.pf-card [hidden] { display: none !important; }
.pf-card-head { margin-bottom: 14px; }
.pf-card-title { margin: 0 0 3px; font-size: 1rem; font-weight: 600; color: #111827; }
.pf-card-sub { margin: 0; font-size: .8rem; color: #6b7280; line-height: 1.5; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pf-field { display: flex; flex-direction: column; min-width: 0; }
.pf-field-full { grid-column: 1 / -1; }
.pf-label { margin-bottom: 6px; font-size: .78rem; font-weight: 500; color: #374151; }
.pf-input-wrap { position: relative; }
.pf-card .pf-input { width: 100%; height: 40px; padding: 0 64px 0 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #111827;
                     font: inherit; font-size: .86rem; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.pf-card .pf-input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px #eef2ff; }
.pf-card .pf-input.is-invalid { border-color: #dc2626; }
.pf-reveal { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 28px; padding: 0 8px; border: 0; border-radius: 6px;
             background: transparent; color: #4f46e5; font: inherit; font-size: .74rem; font-weight: 500; cursor: pointer; }
.pf-reveal:hover { background: #eef2ff; }
.pf-error { margin-top: 4px; font-size: .74rem; color: #dc2626; }
.pf-error:empty { display: none; }
.pf-strength { height: 4px; margin-top: 6px; border-radius: 999px; background: #f3f4f6; overflow: hidden; }
.pf-strength-bar { display: block; width: 0; height: 100%; border-radius: 999px; transition: width .2s ease, background .2s ease; }
.pf-strength-1 { width: 25%; background: #ef4444; }
.pf-strength-2 { width: 50%; background: #f59e0b; }
.pf-strength-3 { width: 75%; background: #84cc16; }
.pf-strength-4 { width: 100%; background: #16a34a; }
.pf-alert { margin-top: 14px; padding: 9px 12px; border: 1px solid; border-radius: 8px; font-size: .8rem; }
.pf-alert-ok { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.pf-alert-error { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.pf-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.pf-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 1px solid #4f46e5; border-radius: 8px;
          background: #4f46e5; color: #fff; font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer; }
.pf-btn:hover { background: #4338ca; }
.pf-btn:disabled { opacity: .6; cursor: default; }
.pf-btn.is-loading::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent;
                             border-radius: 50%; animation: spin .8s linear infinite; }
.pf-btn-ghost { background: #fff; color: #4f46e5; }
.pf-btn-ghost:hover { background: #eef2ff; }
.pf-actions { gap: 8px; }
.pf-status { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: .7rem; font-weight: 600; vertical-align: middle; }
.pf-status-ok { background: #ecfdf5; color: #047857; }
.pf-status-warn { background: #fffbeb; color: #b45309; }
.pf-email-code { max-width: 220px; }
.pf-card .pf-input-code { padding-right: 12px; letter-spacing: .2em; }
.login-button-area { margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 10px 20px; }
.login-area input { font-size: 16px; }
body{-webkit-text-size-adjust: 100%;}



@media (max-width: 560px) {
    .pf-grid { grid-template-columns: 1fr; }
}



/* ============ Landing page (landing.html, scoped: lp-*) ============ */
.lp {
    --lp-border: #e5e7eb; --lp-text: #111827; --lp-muted: #6b7280;
    --lp-primary: #4f46e5; --lp-primary-hover: #4338ca; --lp-primary-soft: #eef2ff; --lp-accent: #06b6d4;
    background: #fff; color: var(--lp-text); font-family: 'Poppins', system-ui, sans-serif; font-size: 15px; line-height: 1.6;
}
.lp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

header.lp-hd { display: block; height: auto; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(8px);
               border-bottom: 1px solid var(--lp-border); box-shadow: none; z-index: 50; }
.lp-hd-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; }
.lp-logo { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; color: var(--lp-text); font-size: 1.02rem; font-weight: 600; text-decoration: none; }
.lp-logo-word b { font-weight: 600; }
.lp-hd-end { display: flex; align-items: center; gap: 8px; min-width: 0; }

.lp-user { display: inline-flex; align-items: center; gap: 8px; height: 36px; min-width: 0; padding: 0 12px 0 4px; border: 1px solid var(--lp-border);
           border-radius: 999px; background: #fff; font-size: .84rem; font-weight: 500; }
.lp-av { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--lp-primary-soft);
         color: var(--lp-primary); font-size: .78rem; font-weight: 600; text-transform: uppercase; }
.lp-uname { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lp-btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px;
          font-size: .84rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.lp-btn:focus-visible { outline: 2px solid var(--lp-primary); outline-offset: 2px; }
.lp-btn-primary { background: var(--lp-primary); color: #fff; }
.lp-btn-primary:hover { background: var(--lp-primary-hover); }
.lp-btn-ghost { color: var(--lp-text); }
.lp-btn-ghost:hover { background: #f3f4f6; }
.lp-btn-outline { border-color: var(--lp-border); background: #fff; color: var(--lp-text); }
.lp-btn-outline:hover { border-color: var(--lp-primary); color: var(--lp-primary); }
.lp-btn-lg { height: 46px; padding: 0 24px; border-radius: 10px; font-size: .95rem; }

.lp-hero { background: radial-gradient(900px 420px at 50% -10%, var(--lp-primary-soft), transparent 70%); text-align: center; }
.lp-hero-in { padding-top: 84px; padding-bottom: 76px; }
.lp-eyebrow { display: inline-block; margin-bottom: 18px; padding: 4px 12px; border-radius: 999px; background: var(--lp-primary-soft);
              color: var(--lp-primary); font-size: .78rem; font-weight: 600; }
.lp-title { max-width: 800px; margin: 0 auto; font-size: clamp(2rem, 5vw, 3.3rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.lp-title-accent { background: linear-gradient(90deg, var(--lp-primary), var(--lp-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-lead { max-width: 640px; margin: 20px auto 0; color: var(--lp-muted); font-size: 1.05rem; }
.lp-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.lp-note { margin: 16px 0 0; color: var(--lp-muted); font-size: .88rem; }

.lp-section { padding: 68px 0; }
.lp-section-alt { background: #f9fafb; border-top: 1px solid var(--lp-border); }
.lp-h2 { margin-bottom: 36px; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600; text-align: center; letter-spacing: -.01em; }
.lp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lp-card { padding: 22px; border: 1px solid var(--lp-border); border-radius: 14px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.lp-card:hover { border-color: #c7d2fe; box-shadow: 0 8px 24px rgba(79, 70, 229, .08); }
.lp-card-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 10px; background: var(--lp-primary-soft); color: var(--lp-primary); }
.lp-card-title { margin-bottom: 6px; font-size: 1rem; font-weight: 600; }
.lp-card-text { margin: 0; color: var(--lp-muted); font-size: .9rem; }

.lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; }
.lp-step { text-align: center; }
.lp-step-num { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 50%;
               background: linear-gradient(135deg, var(--lp-primary), var(--lp-accent)); color: #fff; font-weight: 600; }

.lp-h2-tight { margin-bottom: 8px; }
.lp-sub { max-width: 560px; margin: 0 auto 36px; color: var(--lp-muted); text-align: center; }
.lp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.lp-plan { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; border: 1px solid var(--lp-border); border-radius: 14px; background: #fff; }
.lp-plan-featured { border-color: var(--lp-primary); box-shadow: 0 10px 30px rgba(79, 70, 229, .12); }
.lp-plan-badge { position: absolute; top: -11px; left: 22px; padding: 2px 10px; border-radius: 999px; background: var(--lp-primary); color: #fff; font-size: .7rem; font-weight: 600; }
.lp-plan-name { font-size: 1.05rem; font-weight: 600; }
.lp-plan-price { margin: 8px 0 16px; font-size: 1.7rem; font-weight: 700; letter-spacing: -.01em; }
.lp-plan-per { color: var(--lp-muted); font-size: .84rem; font-weight: 400; }
.lp-plan-list { flex: 1; margin-bottom: 20px; border-top: 1px solid var(--lp-border); }
.lp-plan-item { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--lp-border); color: var(--lp-muted); font-size: .88rem; }
.lp-plan-item strong { color: var(--lp-text); font-weight: 600; }
.lp-btn-block { width: 100%; height: 42px; }
.lp-note-center { text-align: center; margin-top: 22px; }
.lp [id] { scroll-margin-top: 76px; }

.lp-trial { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 30px; padding: 16px 20px; border: 1px solid #c7d2fe; border-radius: 14px;
            background: linear-gradient(90deg, var(--lp-primary-soft), #ecfeff); }
.lp-trial-badge { flex-shrink: 0; padding: 4px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--lp-primary), var(--lp-accent)); color: #fff; font-size: .8rem; font-weight: 600; }
.lp-trial-text { flex: 1 1 260px; margin: 0; font-size: .92rem; }
.lp-plan-free { margin: -8px 0 16px; color: #15803d; font-size: .82rem; font-weight: 500; }

.lp-foot { border-top: 1px solid var(--lp-border); color: var(--lp-muted); font-size: .84rem; }
.lp-foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 22px; padding-bottom: 22px; }
.lp-foot-links { display: inline-flex; gap: 18px; }
.lp-foot-links a { color: var(--lp-muted); text-decoration: none; }
.lp-foot-links a:hover { color: var(--lp-primary); }

/* Privacy policy (policy.html, scoped: lp-policy-*) */
.lp-policy { padding: 56px 0 72px; }
.lp-policy-in { max-width: 800px; }
.lp-policy-title { font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 700; letter-spacing: -.01em; }
.lp-policy-meta { margin: 6px 0 28px; color: var(--lp-muted); font-size: .88rem; }
.lp-policy-section { margin-top: 34px; }
.lp-policy-h2 { margin-bottom: 10px; font-size: 1.15rem; font-weight: 600; }
.lp-policy-text { margin: 0 0 12px; color: #374151; }
.lp-policy-list { margin: 0 0 12px; padding-left: 20px; list-style: disc; color: #374151; }
.lp-policy-item { margin-bottom: 8px; }
.lp-policy-item strong { color: var(--lp-text); font-weight: 600; }
.lp-policy-link { color: var(--lp-primary); text-decoration: underline; overflow-wrap: anywhere; }
.lp-policy-link:hover { color: var(--lp-primary-hover); }

@media (max-width: 860px) {
    .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-plans { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}
@media (max-width: 560px) {
    .lp-hero-in { padding-top: 56px; padding-bottom: 52px; }
    .lp-section { padding: 48px 0; }
    .lp-grid, .lp-steps { grid-template-columns: 1fr; }
    .lp-hd-end { gap: 4px; }
    .lp-logo-word, .lp-uname { display: none; }
    .lp-user { padding: 0 4px; }
    .lp-btn { padding: 0 12px; }
    .lp-btn-lg { width: 100%; }
}

/* ============ Sign-in pages (registration/_auth_base.html, scoped: ax-*) ============ */
.ax {
    --ax-border: #e5e7eb; --ax-text: #111827; --ax-muted: #6b7280;
    --ax-primary: #4f46e5; --ax-primary-hover: #4338ca; --ax-primary-soft: #eef2ff; --ax-danger: #b91c1c; --ax-danger-soft: #fef2f2;
    min-height: 100vh; background: radial-gradient(900px 480px at 50% -10%, var(--ax-primary-soft), transparent 70%) #f9fafb;
    color: var(--ax-text); font-family: 'Poppins', system-ui, sans-serif; font-size: 15px; line-height: 1.55;
}
.ax-page { display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 48px 16px 32px; }
.ax-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; color: var(--ax-text); font-size: 1.2rem; font-weight: 600; text-decoration: none; }
.ax-logo-word b { font-weight: 600; }

.ax-card { width: 100%; max-width: 420px; padding: 32px 30px; border: 1px solid var(--ax-border); border-radius: 16px; background: #fff;
           box-shadow: 0 10px 30px rgba(17, 24, 39, .06); }
.ax-title { margin-bottom: 6px; font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em; }
.ax-sub { margin: 0 0 24px; color: var(--ax-muted); font-size: .9rem; }
.ax-strong { color: var(--ax-text); font-weight: 600; overflow-wrap: anywhere; }

.ax-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: 10px;
          font: inherit; font-size: .92rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.ax-btn:focus-visible { outline: 2px solid var(--ax-primary); outline-offset: 2px; }
.ax-btn-primary { background: var(--ax-primary); color: #fff; }
.ax-btn-primary:hover { background: var(--ax-primary-hover); }
.ax-btn-social { border-color: var(--ax-border); background: #fff; color: var(--ax-text); }
.ax-btn-social:hover { border-color: #d1d5db; background: #f9fafb; }
.ax-social { display: grid; gap: 10px; }
.ax-social-icon { flex-shrink: 0; }

.ax-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--ax-muted); font-size: .78rem; }
.ax-divider::before, .ax-divider::after { content: ""; flex: 1; height: 1px; background: var(--ax-border); }

.ax-form { display: grid; gap: 16px; }
.ax-field { display: grid; gap: 6px; }
.ax-label { font-size: .84rem; font-weight: 500; }
.ax-input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #d1d5db; border-radius: 10px; background: #fff; color: var(--ax-text);
            font: inherit; font-size: .95rem; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.ax-input::placeholder { color: #9ca3af; }
/* The global input:focus rule sets a red border with !important, so this one has to match it. */
.ax .ax-input:focus { border-color: var(--ax-primary) !important; box-shadow: 0 0 0 3px var(--ax-primary-soft); }
.ax-input-code { height: 52px; font-size: 1.4rem; font-weight: 600; letter-spacing: .5em; text-align: center; text-indent: .5em; }
.ax-input-code::placeholder { font-weight: 400; }

.ax-alert { padding: 10px 12px; border: 1px solid #fecaca; border-radius: 10px; background: var(--ax-danger-soft); color: var(--ax-danger); font-size: .86rem; }
.ax-alert .error { max-width: none; margin: 0; padding: 0; border: 0; background: none; color: inherit; font-size: inherit; line-height: inherit; }
.ax-alt { margin: 18px 0 0; color: var(--ax-muted); font-size: .86rem; text-align: center; }
.ax-status { margin: 10px 0 0; color: #15803d; font-size: .86rem; text-align: center; }
.ax-status.is-error { color: var(--ax-danger); }
.ax [hidden] { display: none; }
.ax-link { color: var(--ax-primary); font-weight: 500; text-decoration: none; }
.ax-link:hover { text-decoration: underline; }
.ax-link-btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 500; cursor: pointer; }
.ax-link-btn:disabled { opacity: .5; cursor: default; }
.ax-foot { margin: 20px 0 0; color: var(--ax-muted); font-size: .88rem; }

@media (max-width: 480px) {
    .ax-page { padding-top: 28px; }
    .ax-card { padding: 26px 20px; }
}