@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');
html {overflow-x: hidden;scroll-padding-top: 120px;}
body {margin: 0;padding: 0;font-family: "Red Hat Display", sans-serif; overflow: hidden; background: #f7f7f8;font-size: 18px;line-height: normal;color: #504E4E;overflow-x: hidden;cursor: none;}
html {cursor: none;}
ul, ol, p, form, input, textarea, select, pre, em, sub, sup, canvas, section, article, aside, img, a, li, iframe, table, nav, header, footer, body, menu, button {margin: 0;padding: 0;vertical-align: baseline;box-sizing: border-box;-webkit-box-sizing: border-box;list-style: none;text-decoration: none;outline: none;border: 0;border-spacing: 0;border-collapse: collapse;}
*, after, before {box-sizing: border-box;-webkit-box-sizing: border-box;}
h1, h2, h3, h4, h5, h6 {margin: 0;padding: 0;font-weight: normal;}
body {line-height: 1;}
select{background-image: none !important;}
a {color: var(--black-color);text-decoration: none;transition: all 0.2s ease-in-out 0s;-webkit-transition: all 0.2s ease-in-out 0s;}
a:hover {text-decoration: none;color: var(--blue-color);}
p {line-height: 1.6;font-size: 18px;color: var(--black-color);font-family: "Red Hat Display", sans-serif;}
b, strong {font-weight: 600;}
a:focus {background: none;}
u {text-decoration: underline;}
i, em {font-style: italic;}
img {max-width: 100%;}
input[type="button"], input[type="submit"], input[type="reset"], input[type="text"] {appearance: none;-webkit-appearance: none;-webkit-appearance: none;}
input[type="button"], input[type="submit"], input[type="reset"] {cursor: pointer;font-size: 14px;}
.clearfix {clear: both;}
::-moz-selection {color: #fff;background: var(--blue-color);}
::selection {color: #fff;background: var(--blue-color);}
:root {--black-color: #000;--white-color: #fff;--blue-color: #2895FC;}

@media screen and (min-width:1500px) {
    .container {max-width: 1470px !important;}
}

.btn {border: 1px solid transparent;padding: 10px 20px;font-size: 18px;font-weight: 600;color: rgba(0, 0, 0, 1);transition: 0.4s;-webkit-transition: 0.4s;background: transparent;border-radius: 10px;text-align: center;}
.btn:focus{box-shadow: none; outline: none;}
.btn-primaryx{background: rgba(212, 78, 82, 1); color: #fff;}
.btn-primaryx:hover,
.btn-primaryx:focus{background: transparent; color: rgba(212, 78, 82, 1); border-color: rgba(212, 78, 82, 1);}
.btn-defaultx{background: transparent; color: rgba(0, 0, 0, 1); border-color: rgba(212, 78, 82, 1);}
.btn-defaultx:hover,
.btn-defaultx:focus{background: rgba(212, 78, 82, 1); color: #fff; border-color: rgba(212, 78, 82, 1);}

.logo img {max-width: 130px;}
header.header {position: fixed;top: 20px;left: 0;right: 0;width: 100%; z-index: 9;}
.header-bg-effect{background: rgba(255, 255, 255, 1);border-radius: 50px;padding: 13px 20px;box-shadow: 0 4px 34px rgb(0 0 0 / 6%);}
.header-menu ul {display: flex;align-items: center;justify-content: center;gap: 40px;}
.header-btn ul {display: flex;align-items: center;justify-content: end;gap: 10px;}
.header-menu ul li a {color: rgba(0, 0, 0, 1);font-size: 18px;font-weight: 600;line-height: 1.4;margin: 0;}
header.header.is-sticky {top: 0;background: #fff;box-shadow: 0 4px 34px rgb(0 0 0 / 6%); animation: slideDown 0.35s ease-out;}
@keyframes slideDown {
  from {transform: translateY(-100%);}
  to {transform: translateY(0);}
}
header.header.is-sticky .header-bg-effect {box-shadow: none;}
section.banner-section{background: url(../images/banner-bg-image.png); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; padding: 10rem 0;}
.main-banner-content-wrapper {max-width: 1050px;margin: 0 auto;}
.banner-content-wrapper {text-align: center;}
.banner-content-wrapper h1 {color: rgba(0, 0, 0, 1);font-size: 59px;font-weight: 900;line-height: 1.1;margin: 0 0 10px;}
.banner-content-wrapper h1 strong{color: rgba(212, 78, 82, 1); font-style: italic; font-weight: 900;}
.banner-content-wrapper p{color: rgba(139, 139, 158, 1); font-size: 18px; font-weight: 500; line-height: 1.6; margin: 0;}
.banner-btn-parent ul {margin: 2rem 0 0;display: flex;align-items: center;justify-content: center;gap: 15px;}
.banner-btn-parent ul li .btn{min-width: 200px;}
.banner-textarea-wrapper {margin: 3rem 0 0;}
.banner-textarea-wrapper strong {color: rgba(0, 0, 0, 1);font-size: 18px;font-weight: 600;line-height: 1.4;margin: 0;}

.main-textarea-box-wrapper {margin: 1rem 0 0;background: rgba(255, 255, 255, 0.26);border: 3px solid rgba(255, 255, 255, 1);border-radius: 20px; position: relative;}
.banner-textarea-header {background: rgba(255, 255, 255, 1);padding: 15px 15px;border-bottom: 1px solid rgba(255, 255, 255, 1);display: flex;align-items: center;justify-content: flex-start;}
.banner-textarea-header ul {display: flex;align-items: center;justify-content: flex-start;gap: 5px; margin-right: 10px;}
.banner-textarea-header ul li {width: 10px;height: 10px;border-radius: 50%;background: #000;}
.banner-textarea-header span {color: rgba(131, 131, 131, 1);font-size: 14px;font-weight: 500;line-height: 1.4;margin: 0;display: inline-block;}
.banner-textarea-header ul li.red{background: rgba(212, 78, 82, 1);}
.banner-textarea-header ul li.yellow{background: rgba(255, 157, 0, 1);}
.banner-textarea-header ul li.green{background: rgba(57, 190, 97, 1);}
.main-textarea-box-wrapper textarea {background: rgba(255, 255, 255, 0.26);width: 100%;height: 200px;padding: 15px;color: rgba(0, 0, 0, 1);font-size: 18px;font-weight: 600;line-height: 1.4;margin: 0;}
.textarea-bottom-fixed-box {display: flex;align-items: center;justify-content: space-between;position: absolute;bottom: 10px;left: 10px;right: 10px;}
.add-category-parent {display: flex;align-items: center;justify-content: flex-start;}
.add-category ul {display: flex;align-items: center;justify-content: flex-start;gap: 8px;margin-left: 20px;}
.add-category ul li {display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 0.24); padding: 10px 10px; border-radius: 20px; font-size: 16px; color: rgba(0, 0, 0, 1); font-weight: 600; box-shadow: 0 4px 64px rgba(0, 0, 0, 0.06); }
.add-category ul li figure {margin: 0;}
.add-category ul li figure img, .add-category ul li a img {max-height: 16px;}
.textarea-right-btn .btn.btn-primaryx {padding: 8px 15px;font-size: 15px;}
.add-category.category-main-parent-wrapper ul {justify-content: center;margin: 1rem 0 0;gap: 20px;}
.add-category ul li a {font-size: 16px;color: rgba(0, 0, 0, 1);font-weight: 600;}
.add-category ul li a img{vertical-align: middle; margin-right: 5px;}
.header-btn ul li .btn {padding: 7px 20px;}

.technologies-main-wrapper ul {display: flex;justify-content: center;flex-wrap: wrap;gap: 10px;}
.technologies-main-wrapper ul li {width: 19%;}
.technologies-main-wrapper ul li a {border: 4px solid rgba(255, 255, 255, 1);background: #eee;display: inline-block;width: 100%;border-radius: 20px;height: 100%;padding: 15px;}
section.same-section {padding: 5rem 0;}
section.same-section.technologies-section {margin-top: -9rem;}
.technologies-main-wrapper {border: 9px solid rgba(255, 255, 255, 1);background: rgba(255, 255, 255, 0);border-radius: 20px;padding: 50px 20px;}
.technologies-main-wrapper ul li a figure {margin: 0 0 15px;}
.technologies-main-wrapper ul li a span {color: rgba(0, 0, 0, 1);font-size: 16px;font-weight: 600;line-height: 1.4;margin: 0;display: block;}
.technologies-main-wrapper ul li a.colorone {background: rgba(212, 78, 82, 0.2);}
.technologies-main-wrapper ul li a.colortwo {background: rgba(239, 187, 91, 0.29);}
.technologies-main-wrapper ul li a.colorthree {background: rgba(81, 117, 179, 0.15);}
.technologies-main-wrapper ul li a.colorfour {background: rgba(177, 223, 218, 0.6);}
.technologies-main-wrapper ul li a.colorfive {background: rgba(237, 215, 233, 0.6);}
.technologies-main-wrapper ul li a.colorsix {background: rgba(255, 177, 148, 0.5);}
.technologies-main-wrapper ul li a.colorseven {background: rgba(249, 193, 220, 0.6);}
.technologies-main-wrapper ul li a.coloreight {background: rgba(180, 221, 242, 0.6);}
.technologies-main-wrapper ul li a.colornine {background: rgba(249, 214, 215, 0.6);}

section.same-section.module-section {background: url(../images/module-bg.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;}
.module-box-parent {background: rgba(255, 255, 255, 0.71);box-shadow: 0 4px 64px rgba(0, 0, 0, 0.06);padding: 15px;position: relative;height: 100%;}
.module-box-parent figure {width: 50px;height: 50px;background: rgba(212, 78, 82, 0.06);margin: 0 0 15px;display: flex;align-items: center;justify-content: center;border-radius: 8px;}
.module-box-parent h2 {color: rgba(0, 0, 0, 1);font-size: 36px;font-weight: 800;line-height: 1.4;margin: 0 0 5px;}
.module-box-parent p {color: rgba(131, 131, 131, 1);font-size: 18px;font-weight: 600;line-height: 1.4;margin: 0;}
.module-box-parent:after {content: "";position: absolute;right: -1px;top: 50%;transform: translateY(-50%);border-right: 2px solid rgba(212, 78, 82, 1);width: 1px;height: 110px;background: rgba(212, 78, 82, 1);}
.module-box-parent:before {content: "";position: absolute;left: -1px;top: 50%;transform: translateY(-50%);border-right: 2px solid rgba(212, 78, 82, 1);width: 1px;height: 110px;background: rgba(212, 78, 82, 1);}

.same-heading-parent span {border: 1px solid rgba(212, 78, 82, 0.13);border-radius: 30px;background: rgba(212, 78, 82, 0.1);padding: 8px 15px;color: rgba(212, 78, 82, 1);font-size: 16px;font-weight: 600;line-height: 1.4;display: inline-block; margin: 0 0 15px;}
.same-heading-parent span img{margin: 0 5px; vertical-align: middle;}
.same-heading-parent h2 {color: rgba(0, 0, 0, 1);font-size: 44px;font-weight: 800;line-height: 1.4;margin: 0 0 8px;}
.same-heading-parent h2 strong {color: rgba(212, 78, 82, 1);font-style: italic;font-weight: 800;}
.same-heading-parent p {color: rgba(131, 131, 131, 1);font-size: 20px;font-weight: 700;line-height: 1.4;margin: 0;}
.fixed-box-content-parent .fixed-right-box a {border: 1px solid rgba(255, 255, 255, 1);padding: 10px 15px;background: rgba(255, 255, 255, 0.44);display: inline-block;margin: 10px 0 0;color: rgba(44, 196, 160, 1);font-size: 14px;font-weight: 500;border-radius: 30px;}
.fixed-box-content-parent .fixed-right-box p {color: rgba(0, 0, 0, 1);font-size: 16px;font-weight: 400;line-height: 1.6;margin: 0;}
.fixed-box-content-parent .fixed-right-box h3 {color: rgba(212, 78, 82, 1);font-size: 22px;font-weight: 700;line-height: 1.4;margin: 0;}
.fixed-box-content-parent .fixed-left-box figure {width: 70px;height: 70px;background: rgba(212, 78, 82, 1);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 20px;}
.fixed-box-content-parent .fixed-left-box span {color: rgba(0, 0, 0, 1);font-size: 18px;font-weight: 700;line-height: 1.4;margin: 0;text-align: center;}
.fixed-box-content-parent .fixed-left-box {width: 50%;text-align: center;}
.fixed-section-wrapper .fixed-box-content-parent{display: flex;border: 7px solid rgba(255, 255, 255, 1);background: rgba(255, 255, 255, 0);padding: 20px 20px;border-radius: 20px;}
.fixed-right-box {padding-left: 30px;border-left: 1px solid rgba(217, 217, 217, 1);}
section.same-section.appstore-section .row {margin-top: 4rem;}
.fixed-section-wrapper .fixed-box-content-parent + .fixed-box-content-parent {margin-top: 1rem;}
.animated-box-parent .same-heading-parent {justify-content: center;display: flex;align-items: center;flex-wrap: wrap;gap: 15px; margin: 40px 0 0;}
.animated-box-parent .same-heading-parent span {margin: 0;}
.animated-box-parent {border: 7px solid rgba(255, 255, 255, 1);background: rgba(255, 255, 255, 0);padding: 20px 20px;border-radius: 20px; background: url(../images/animation-box-bg.png); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; padding-bottom: 100px;}
.animated-image-box {position: relative;height: 400px;overflow: hidden;}
.animated-box-box img {position: absolute;top: 100%;transform: translate(-50%, -50%);left: 50%; user-select: none;}

/*.animated-box-box img{animation: circle-rotate 20s linear infinite;}*/
.animation-img01{animation: circle-rotate 20s linear infinite;}
.animation-img02{animation: circle-rotatetwo 20s linear infinite;}
.animation-img03{animation: circle-rotateone 20s linear infinite;}

@keyframes circle-rotate {
  from {transform: translate(-50%, -50%) rotate(45deg);}
  to {transform: translate(-50%, -50%) rotate(405deg);}
}

@-webkit-keyframes circle-rotate {
  from {-webkit-transform: translate(-50%, -50%) rotate(45deg);}
  to {-webkit-transform: translate(-50%, -50%) rotate(405deg);}
}

@keyframes circle-rotatetwo {
  from {transform: translate(-50%, -50%) rotate(45deg);}
  to {transform: translate(-50%, -50%) rotate(405deg);}
}

@-webkit-keyframes circle-rotatetwo {
  from {-webkit-transform: translate(-50%, -50%) rotate-45deg);}
  to {-webkit-transform: translate(-50%, -50%) rotate-405deg);}
}

@keyframes circle-rotateone {
  from {transform: translate(-50%, -50%) rotate(-45deg);}
  to {transform: translate(-50%, -50%) rotate(-405deg);}
}

@-webkit-keyframes circle-rotateone {
  from {-webkit-transform: translate(-50%, -50%) rotate(-45deg);}
  to {-webkit-transform: translate(-50%, -50%) rotate(-405deg);}
}

section.same-section.appstore-section {padding-bottom: 1rem;}
.real-app-wrapper {border: 7px solid rgba(255, 255, 255, 1);border-radius: 20px;padding: 20px 20px 0;height: 100%;position: relative; background: url(../images/real-app-bg01.png); background-size: cover; background-position: center; background-repeat: no-repeat;}
.real-app-header-parent {position: relative;padding-left: 5rem;margin-bottom: 2rem;}
.real-app-header-parent figure {position: absolute;left: 0;top: 0;margin: 0;width: 70px;height: 70px;}
.real-app-header-parent p {color: rgba(0, 0, 0, 1);font-size: 16px;font-weight: 400;line-height: 1.6;margin: 0;}
.real-app-header-parent h3 {color: rgba(0, 0, 0, 1);font-size: 26px;font-weight: bold;line-height: 1.4;margin: 0;}
section.same-section.real-app-section .same-heading-parent.text-center + .row {margin-top: 3rem;}
.real-app-image-parent img {margin-bottom: -3px;}

.real-app-wrapper.bgtwo {background: url(../images/real-app-bg02.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
.real-app-wrapper.bgthree{background: url(../images/real-app-bg03.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
.real-app-wrapper.bgfour{background: url(../images/real-app-bg04.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
.real-app-wrapper.bgfive{background: url(../images/real-app-bg05.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
.real-app-wrapper.bgsix{background: url(../images/real-app-bg06.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
.real-app-wrapper.bgfive .real-app-header-parent.aws-depoloyment-parent figure {position: initial;margin: 0 0 15px;}
.real-app-wrapper.bgfive .real-app-header-parent.aws-depoloyment-parent {padding: 0;}
section.same-section.real-app-section .col-lg-7 .row.bottom-row-center-box {margin-top: 30px;}
section.same-section.real-app-section .col-lg-7 .row.bottom-row-center-box .col-lg-6 .col-lg-12:last-child {margin-top: 30px;}

.main-table-wrapper {border: 8px solid rgba(255, 255, 255, 1);border-radius: 20px;padding: 20px;background: rgba(255, 255, 255, 0.22);margin: 3rem 0 0;}
.main-table-wrapper table {width: 100%;}
.main-table-wrapper table tr td:first-child {width: 35%;}
.main-table-wrapper table tr th {color: rgba(0, 0, 0, 1);font-size: 20px;font-weight: 600;line-height: 1.4;margin: 0;padding: 15px;}
.table-text-parent p {color: rgba(131, 131, 131, 1);font-size: 16px;font-weight: 500;line-height: 1.4;margin: 0;}
.table-text-parent h3 {font-size: 20px;font-weight: 700;color: rgba(0, 0, 0, 1);line-height: 1.4;margin: 0;}
.main-table-wrapper table tr td {padding: 15px; font-size: 20px; font-weight: 500; line-height: 1.4;}
.main-table-wrapper table {width: 100%;background: rgba(255, 255, 255, 1);border-radius: 20px;}
.main-table-wrapper table tr:nth-child(even) {background: rgba(255, 255, 255, 0.22);}
.main-table-wrapper table tr:nth-child(even) td {background: rgb(241 241 241 / 22%);}

.main-table-wrapper table tr:nth-child(odd){background: rgba(255, 255, 255, 0.52);}
.main-table-wrapper table tr:nth-child(odd) td{background: rgba(255, 255, 255, 0.52);}
.main-table-wrapper table tr th:nth-child(2) {background: rgba(14, 164, 126, 0.05);border-left: 1px solid rgba(14, 164, 126, 0.33);border-right: 1px solid rgba(14, 164, 126, 0.33);color: rgba(14, 164, 126, 1);border-bottom: 1px solid rgba(14, 164, 126, 0.33);}
.main-table-wrapper table tr:nth-child(even) td:nth-child(2) {background: rgba(14, 164, 126, 0.05);}
.main-table-wrapper table tr td:nth-child(2) {border-left: 1px solid rgba(14, 164, 126, 0.33);border-right: 1px solid rgba(14, 164, 126, 0.33);color: rgba(14, 164, 126, 1);}
.main-table-wrapper table tr td.redtext {color: rgba(212, 78, 82, 1);}

.clients-content-wrapper ul {display: flex;align-items: center;justify-content: flex-start;margin: 0 0 20px; gap:5px;}
.clients-content-wrapper img {width: auto !important;}
.clients-content-wrapper {border: 7px solid rgba(255, 255, 255, 1);border-radius: 20px;background: rgba(255, 255, 255, 0.22);padding: 20px;}
.client-header-info {border: 1px solid rgba(255, 255, 255, 1);background: rgba(255, 255, 255, 0.22);border-radius: 13px;padding: 15px;box-shadow: 0 4px 64px rgba(0, 0, 0, 0.06); position: relative; padding-left: 85px;}
.client-header-info p {color: rgba(131, 131, 131, 1);font-size: 16px;font-weight: 500;line-height: 1.6;margin: 0;}
.client-header-info figure {width: 60px;height: 60px;margin: 0;position: absolute;left: 15px;top: 50%;transform: translateY(-50%);}
.clients-content-wrapper .client-header-info + p {color: rgba(0, 0, 0, 1);font-size: 20px;font-weight: 400;line-height: 1.4;margin: 20px 0 0;}
.clients-content-wrapper .client-header-info + p strong {color: rgba(212, 78, 82, 1);font-weight: 400;}
.client-header-info h3 {color: rgba(0, 0, 0, 1);font-size: 20px;font-weight: bold;line-height: 1.4;margin: 0;}
.home-review-wrapper {margin-top: 3rem; margin-right: -20%;}

.home-review-wrapper .owl-nav button {width: 50px; height: 50px;border-radius: 50%;display: flex !important;align-items: center;justify-content: center;border: 1px solid rgba(255, 255, 255, 1) !important;background-color: rgba(255, 255, 255, 0.22) !important;opacity: 1;}
.home-review-wrapper .owl-nav button.owl-prev {background-image: url(../images/arrow-left.png) !important;background-repeat: no-repeat !important;background-position: center !important;background-size: 15px !important;}
.home-review-wrapper .owl-nav button.owl-next {background-image: url(../images/arrow-right.png) !important;background-repeat: no-repeat !important;background-position: center !important;background-size: 15px !important;}
.home-review-wrapper .owl-nav {margin: 0;position: absolute;top: -40%;left: 77%;display: flex !important;align-items: center;justify-content: end;}
.home-review-wrapper .owl-nav button span{display: none;}
.home-review-wrapper .owl-nav button:hover {border-color: rgba(212, 78, 82, 1) !important;}

section.same-section.plan-section {background: url(../images/plan-bg-img.png);background-size: 100% 100%;background-position: center;background-repeat: no-repeat;}
.plan-includes-label {margin: 0 0 10px;font-size: 13px;font-weight: 700;text-transform: uppercase;letter-spacing: 0.04em;color: rgba(100, 100, 100, 1);}
.plan-comparison-table {margin-top: 2.5rem;}
.plan-comparison-table table {border-collapse: collapse;border-spacing: 0;overflow: hidden;}
.plan-comparison-table table tr th,
.plan-comparison-table table tr td {text-align: center;vertical-align: middle;border-bottom: 1px solid rgba(232, 232, 232, 1);}
.plan-comparison-table table tr th:first-child,
.plan-comparison-table table tr td:first-child {text-align: left;width: 28%;border-left: 0;}
.plan-comparison-table table tr th:not(:first-child),
.plan-comparison-table table tr td:not(:first-child) {border-left: 1px solid rgba(228, 228, 228, 1);}
.plan-comparison-table table tr th:last-child,
.plan-comparison-table table tr td:last-child {border-right: 1px solid rgba(228, 228, 228, 1);}
.plan-comparison-table thead tr {background: #fff !important;}
.plan-comparison-table thead tr th {padding: 18px 15px 16px;background: #fff !important;}
.plan-comparison-table tbody tr:nth-child(even) td {background: rgba(248, 248, 248, 1) !important;}
.plan-comparison-table tbody tr:nth-child(odd) td {background: #fff !important;}
.plan-comparison-table.main-table-wrapper table tr th:nth-child(2),
.plan-comparison-table.main-table-wrapper table tr td:nth-child(2),
.plan-comparison-table.main-table-wrapper table tr:nth-child(even) td:nth-child(2),
.plan-comparison-table.main-table-wrapper table tr:nth-child(odd) td:nth-child(2) {background: inherit !important;color: rgba(0, 0, 0, 1) !important;border-left: 1px solid rgba(228, 228, 228, 1) !important;border-right: 1px solid rgba(228, 228, 228, 1) !important;border-bottom: 1px solid rgba(232, 232, 232, 1) !important;}
.plan-comparison-table.main-table-wrapper thead tr th:nth-child(2) {background: #fff !important;}
.plan-comparison-table.main-table-wrapper tbody tr:nth-child(even) td:nth-child(2) {background: rgba(248, 248, 248, 1) !important;}
.plan-comparison-table.main-table-wrapper tbody tr:nth-child(odd) td:nth-child(2) {background: #fff !important;}
.plan-comparison-table.main-table-wrapper .plan-compare-col-name,
.plan-comparison-table.main-table-wrapper .plan-compare-col-price {color: rgba(0, 0, 0, 1);}
.plan-comparison-table.main-table-wrapper thead th:nth-child(2) .plan-compare-col-price {color: rgba(100, 100, 100, 1);}
.plan-comparison-table .plan-compare-col-head {display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 8px;min-height: 88px;}
.plan-comparison-table .plan-compare-col-name {display: block;font-size: 20px;font-weight: 700;line-height: 1.2;color: rgba(0, 0, 0, 1);}
.plan-comparison-table .plan-compare-col-price {display: block;font-size: 15px;font-weight: 600;color: rgba(100, 100, 100, 1);}
.plan-comparison-table .plan-compare-popular-badge {margin: 0;padding: 5px 10px;font-size: 11px;font-weight: 700;letter-spacing: 0.03em;border-radius: 6px;}
.plan-comparison-table .plan-compare-check {color: rgba(14, 164, 126, 1);font-weight: 700;font-size: 22px;line-height: 1;}
.plan-comparison-table .plan-compare-dash {color: rgba(160, 160, 160, 1);}
.plan-comparison-table thead th.plan-compare-col-featured .plan-compare-col-name {color: rgba(212, 78, 82, 1);}
.plan-comparison-table .table-text-parent h3 {font-size: 18px;font-weight: 600;}
.compare-plans-modal .plan-comparison-table {margin-top: 1.5rem;}
.compare-plans-modal.compare-plans-modal--two .modal-dialog.modal-dialog-centered {max-width: 980px;}
.compare-plans-modal.compare-plans-modal--two .plan-main-wrapper > .row {max-width: 100%;}
.compare-plans-modal.compare-plans-modal--two .plan-comparison-table table {table-layout: fixed;width: 100%;}
.compare-plans-modal.compare-plans-modal--two .plan-comparison-table.plan-cols-2 th:first-child,
.compare-plans-modal.compare-plans-modal--two .plan-comparison-table.plan-cols-2 td:first-child {width: 36%;}
.compare-plans-modal.compare-plans-modal--two .plan-comparison-table.plan-cols-2 th:not(:first-child),
.compare-plans-modal.compare-plans-modal--two .plan-comparison-table.plan-cols-2 td:not(:first-child) {width: 32%;}
.compare-plans-notice {margin: 12px 0 0;padding: 12px 14px;font-size: 14px;line-height: 1.5;color: rgba(80, 80, 80, 1);background: rgba(212, 78, 82, 0.06);border: 1px solid rgba(212, 78, 82, 0.18);border-radius: 8px;}
.plan-main-content-parent {border: 7px solid rgba(255, 255, 255, 1);border-radius: 20px;height: 100%;padding: 15px;background: rgba(255, 255, 255, 0.22);box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04);}
.plan-main-content-parent p {color: rgba(0, 0, 0, 1);font-size: 17px;font-weight: 800;line-height: 1.4;margin: 0;padding: 0 0 10px;border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.plan-tier-label {display: flex;align-items: center;justify-content: space-between;gap: 10px;}
.plan-popular-badge {display: inline-block;padding: 4px 12px;font-size: 12px;font-weight: 600;line-height: 1.4;border-radius: 20px;background: rgba(212, 78, 82, 0.12);color: rgba(212, 78, 82, 1);white-space: nowrap;}
.plan-main-content-parent.colorfullbox .plan-popular-badge {background: rgba(255, 255, 255, 0.22);color: rgba(255, 255, 255, 1);}
.plan-price {margin: 20px 0;}
.plan-price h3 {color: rgba(212, 78, 82, 1);font-size: 50px;font-weight: 800;line-height: 1.4;margin: 0;}
.plan-price h3 strong {color: rgba(0, 0, 0, 1);font-size: 19px;font-weight: 500;line-height: 1.4;margin: 0;}
.plan-main-content-parent .btn.btn-defaultx {background: rgba(115, 115, 115, 0.17);border-color: rgba(115, 115, 115, 0.17);color: rgba(0, 0, 0, 1);width: 100%;padding: 8px 15px;font-size: 18px;font-weight: 700;}
.plan-main-content-parent .btn.btn-defaultx:hover{background: transparent;}
.plan-list-parent{margin: 20px 0 0;}
.plan-list-parent p {color: rgba(0, 0, 0, 1);font-size: 18px;font-weight: 600;line-height: 1.4;margin: 0;border: none;padding: 0;}
.plan-list-parent ul{margin: 10px 0 0;}
.plan-list-parent ul li{color: rgba(0, 0, 0, 1); font-size: 18px; font-weight: 600; line-height: 1.4; margin: 0;}
.plan-list-parent ul li + li{margin-top: 10px;}
.plan-list-parent ul li img {max-height: 15px;margin-right: 7px;}
.plan-main-wrapper {margin: 4rem 0 0;}
.plan-main-wrapper > .row {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 20px;margin: 0;}
.plan-main-wrapper.plan-count-2 > .row {grid-template-columns: repeat(2, minmax(0, 1fr));max-width: 920px;margin-left: auto;margin-right: auto;}
.plan-main-wrapper.plan-count-1 > .row {grid-template-columns: minmax(0, 1fr);max-width: 420px;margin-left: auto;margin-right: auto;}
.plan-main-wrapper > .row > [class*="col-"],
.plan-main-wrapper > .row > .plan-card-col {max-width: none;width: auto;flex: none;padding: 0;margin: 0;display: flex;}
.plan-main-content-parent {display: flex;flex-direction: column;width: 100%;}
.plan-list-parent {flex: 1;}
.plan-section .plan-comparison-table table {table-layout: fixed;width: 100%;}
.plan-section .plan-comparison-table th:first-child,
.plan-section .plan-comparison-table td:first-child {width: 28%;}
.plan-section .plan-comparison-table th:nth-child(2),
.plan-section .plan-comparison-table th:nth-child(3),
.plan-section .plan-comparison-table th:nth-child(4),
.plan-section .plan-comparison-table td:nth-child(2),
.plan-section .plan-comparison-table td:nth-child(3),
.plan-section .plan-comparison-table td:nth-child(4) {width: calc(72% / 3);}
@media (max-width: 991px) {
  .plan-main-wrapper > .row {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 16px;}
  .plan-main-wrapper.plan-count-2 > .row {max-width: 100%;}
}
@media (max-width: 575px) {
  .plan-main-wrapper > .row,
  .plan-main-wrapper.plan-count-2 > .row,
  .plan-main-wrapper.plan-count-1 > .row {grid-template-columns: 1fr;gap: 14px;max-width: 100%;}
}

.plan-main-content-parent.colorfullbox {background: rgba(212, 78, 82, 1);border-color: rgba(212, 78, 82, 1);}
.plan-main-content-parent.colorfullbox p {color: rgba(255, 255, 255, 1);border-color: rgba(255, 255, 255, 0.31);}
.plan-main-content-parent.colorfullbox .plan-price h3 {color: rgba(255, 255, 255, 1);}
.plan-main-content-parent.colorfullbox .plan-price h3 strong {color: rgba(255, 255, 255, 1);}
.plan-main-content-parent.colorfullbox .btn.btn-defaultx {background: rgba(255, 255, 255, 1);border-color: rgba(255, 255, 255, 1);color: #d44e52;}
.plan-main-content-parent.colorfullbox .btn.btn-defaultx:hover{background: transparent; color: #fff;}
.plan-main-content-parent.colorfullbox ul li {color: rgba(255, 255, 255, 1);}
.plan-main-content-parent.colorfullbox ul li img {filter: brightness(0) invert(1);}
.cta-wrapper {background: url(../images/cta-bg.png);background-repeat: no-repeat;background-size: cover;background-position: center;padding: 80px 30px;border-radius: 25px;text-align: center;border: 10px solid rgba(255, 255, 255, 1);}
.cta-wrapper .same-heading-parent p {color: rgba(74, 74, 74, 1);}
.cta-access-parent {display: flex;align-items: center;justify-content: center;margin: 30px 0;}
.cta-access-parent ul{display: flex;align-items: center;justify-content: center;}
.cta-access-parent ul li + li{margin-left: -10px;}
.cta-access-parent ul li:nth-child(2){position: relative;z-index: 1;}
.cta-access-parent ul li:nth-child(3){position: relative;z-index: 2;}
.cta-access-parent ul li:nth-child(4){position: relative;z-index: 3;}
.cta-access-parent p {color: rgba(74, 74, 74, 1);font-size: 16px;font-weight: 500;line-height: 1.4;margin-left: 10px;}
.cta-btn-parent .btn {min-width: 210px;}
.cta-btn-parent .btn + .btn{margin-left: 10px;}

footer {background: rgba(180, 180, 180, 0.12);padding: 25px 0;}
.footer-menu ul {display: flex;align-items: center;justify-content: center;}
.footer-menu ul li + li{margin-left: 30px;}
.footer-menu ul li a{color: rgba(74, 74, 74, 1); font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0;}
.footer-menu ul li a:hover{color: rgba(212, 78, 82, 1);}
.footer-light p {text-align: center;color: rgba(74, 74, 74, 1);font-size: 16px;font-weight: 600;line-height: 1.6;margin: 0;}
.footer-social {display: flex;align-items: center;justify-content: right;gap: 12px;flex-wrap: wrap;}
.footer-social a {display: inline-flex;align-items: center;justify-content: center;width: 38px;height: 38px;border-radius: 50%;background: rgba(255, 255, 255, 1);color: rgba(74, 74, 74, 1);box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;}
.footer-social a svg {width: 18px;height: 18px;fill: currentColor;transition: fill 0.3s ease;}
.footer-social a:hover, .footer-social a:focus-visible {background: rgba(212, 78, 82, 1);color: rgba(255, 255, 255, 1);transform: translateY(-2px);box-shadow: 0 6px 16px rgba(212, 78, 82, 0.35);}

.modal.login-model-parent .modal-dialog {max-width: 500px;}
.modal.login-model-parent .modal-dialog .modal-content{border: 5px solid rgba(255, 255, 255, 1);border-radius: 20px;background: rgba(242, 242, 245, 1);box-shadow: 0 4px 64px rgba(0, 0, 0, 0.23);}
.modal.login-model-parent .modal-dialog .modal-content {border: none;}
.modal.login-model-parent .modal-dialog .modal-content .modal-header {border: none;padding: 0;}

.modal.login-model-parent .modal-dialog .modal-content .modal-header button.btn-close {width: 30px; height: 30px; padding: 0; margin: 0 0 0 auto; display: flex; align-items: center; justify-content: center; opacity: 1; box-shadow: none; outline: none; position: absolute; top: 5px; right: 5px; background-size: 14px; z-index: 1;}
.login-modal-content {padding: 50px 0 30px;text-align: center;}
.login-modal-content h2 {color: rgba(0, 0, 0, 1);font-size: 22px;font-weight: bold;line-height: 1.4;margin: 0 0 10px;}
.login-modal-content strong {color: rgba(212, 78, 82, 1);font-weight: bold;}
.login-modal-content ul {margin: 30px 0 0;}
.login-modal-content ul li a,
.login-modal-content ul li button {display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255, 255, 255, 1); background: rgba(247, 247, 248, 1); padding: 10px 15px; border-radius: 13px; color: rgba(0, 0, 0, 1); font-size: 18px; font-weight: 600; line-height: 1.4; gap: 15px; width: 100%;}
.login-modal-content ul li + li {margin-top: 15px;}
.login-modal-content figure {margin: 0 0 25px;}
.modal.login-model-parent {padding-right: 0 !important;}
.back-btn-paent a {display: flex;align-items: center;justify-content: flex-start;gap: 10px;margin: 0 0 20px;color: rgba(212, 78, 82, 1);font-size: 16px;font-weight: 500;line-height: 1.4;}
.modal-form-parent .form-group label {color: rgba(0, 0, 0, 1);font-size: 16px;font-weight: 500;line-height: 1.4;margin: 0 0 5px;display: block;text-align: left;}
.form-control {border: 1px solid rgba(210, 210, 210, 1);background: rgba(255, 255, 255, 1);padding: 10px 15px;border-radius: 10px;color: rgba(0, 0, 0, 1);font-size: 16px;font-weight: 500;line-height: 1.4;margin: 0;}
.form-control:focus{border-color: rgba(212, 78, 82, 1); box-shadow: none; outline: none;}
.modal-form-parent .form-group {margin: 0 0 25px;}
.password-fields {position: relative;}
.password-fields .toggle-password {position: absolute;top: 50%;right: 10px;transform: translateY(-50%);cursor: pointer;color: rgba(0, 0, 0, 0.45);}

.checkbox-parent .form-check {padding: 0;margin: 0;position: relative;text-align: left;padding-left: 25px;}
.checkbox-parent .form-check input {margin: 0; position: absolute; left: 0; top: 39%; transform: translateY(-50%); background: rgba(217, 217, 217, 1); width: 20px; height: 20px; border-color: transparent; box-shadow: none !important; outline: none;}
.checkbox-parent .form-check label.form-check-label {margin: 0;color: rgba(0, 0, 0, 1);font-size: 14px;font-weight: 500;line-height: 1.4; cursor: pointer;}
.checkbox-parent .form-check label.form-check-label a{color: rgba(212, 78, 82, 1);}
.checkbox-parent .form-check .form-check-input:checked[type=checkbox] {background-color: rgba(212, 78, 82, 1);}
.sucess-icon-parent{position: relative;}
.sucess-icon-parent img {position: absolute;top: 50%;transform: translateY(-50%);right: 10px;max-height: 15px;}
.sucess-icon-parent input {padding-right: 35px;}
.form-group .btn {width: 100%;}
.form-bottom-content p {color: rgba(0, 0, 0, 1);font-size: 14px;font-weight: 500;line-height: 1.4;margin: 0;}
.form-bottom-content p a{color: rgba(212, 78, 82, 1);}
.forgot-password {text-align: right;margin: 5px 0 0;}
.forgot-password a {color: rgba(0, 0, 0, 1);font-size: 14px;font-weight: 500;line-height: 1.4;margin: 0;}

section.same-section.privacy-policy-section {padding-top: 9rem; background: url(../images/privacy-policy-bg.png); background-position: center; background-repeat: no-repeat; background-size: cover;}
.privacy-policy-wrapper p {color: rgba(0, 0, 0, 1);font-size: 20px;font-weight: bold;line-height: 1.6;margin: 0;}
.privacy-policy-content {margin: 3rem 0 0;border: 9px solid rgba(255, 255, 255, 1);background: rgba(255, 255, 255, 0);border-radius: 20px;padding: 25px 25px;}
.privacy-policy-content p {color: rgba(0, 0, 0, 1);font-weight: 500;font-size: 20px;line-height: 1.6;margin: 0;}
.privacy-policy-content p + p{margin-top: 30px;}
.footer-logo img {max-width: 130px;}
.animation-banner-text-wrapper {position: relative;transform: skew(-20deg);flex: 0 0 auto;min-width: 520px;margin: 2px;}
.animation-banner-text-wrapper:after {content: "";position: absolute;right: 0;top: 0;bottom: 0;width: 10px;background: rgba(212, 78, 82, 1);}
.animation-banner-text-wrapper:before {content: "";position: absolute;left: 0;top: 0;bottom: 0;width: 10px;background: rgba(212, 78, 82, 1);}
.animation-banner-text-wrapper p span {width: 15px;height: 15px;background: rgba(212, 78, 82, 0.2);display: inline-block;border-radius: 50%;margin: 0 5px;}
.animation-banner-text-wrapper p {color: rgba(212, 78, 82, 0.34);font-size: 24px;font-weight: 700;line-height: 1.4;margin: 0;border: 1px solid rgba(0, 0, 0, 0.15);background: rgba(255, 255, 255, 1);padding: 10px;}
.animated-box-wrapper {position: relative;overflow: hidden;width: 100%;margin: 3rem 0;}
.animation-banner-track {display: flex;align-items: center;flex-wrap: nowrap;width: max-content;animation: marquee 30s linear infinite;will-change: transform;}
.animation-banner-group {display: flex;align-items: center;flex-wrap: nowrap;gap: 10px;flex-shrink: 0;}
@keyframes marquee {
  from {transform: translate3d(0, 0, 0);}
  to {transform: translate3d(-50%, 0, 0);}
}
:root{--gold:#000;}
#cur{position:fixed;width:8px;height:8px;background:var(--gold);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .12s;}
#cur-r{position:fixed;width:32px;height:32px;border:1px solid #000;border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .25s,height .25s,border-color .25s;}
.auth-google-hidden {position: fixed !important;left: -10000px !important;top: 0 !important;width: 0 !important;height: 0 !important;overflow: hidden !important;opacity: 0 !important;visibility: hidden !important;pointer-events: none !important;z-index: -1 !important;}
.auth-google-hidden iframe,
.auth-google-hidden div[role="button"] {width: 0 !important;height: 0 !important;min-width: 0 !important;min-height: 0 !important;overflow: hidden !important;visibility: hidden !important;}
.auth-field-error {color: rgba(212, 78, 82, 1);font-size: 13px;font-weight: 500;line-height: 1.4;margin: 6px 0 0;text-align: left;}
.auth-error,
.auth-saved-note {font-size: 14px;font-weight: 500;line-height: 1.4;margin: 0 0 10px;}
.auth-error {color: rgba(212, 78, 82, 1);}
.auth-saved-note {color: rgba(74, 74, 74, 1);}
.app-toast {position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; align-items: center; gap: 10px; padding: 14px 22px; background: #1a1a1a; color: #fff; font-size: 15px; font-weight: 500; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); animation: app-toast-in 0.3s ease; pointer-events: none; }
.app-toast-icon {display: flex;align-items: center;justify-content: center;width: 22px;height: 22px;border-radius: 50%;background: #22c55e;font-size: 12px;font-weight: 700;flex-shrink: 0;}
@keyframes app-toast-in {
  from {opacity: 0;transform: translateX(-50%) translateY(12px);}
  to {opacity: 1;transform: translateX(-50%) translateY(0);}
}
.auth-login-form .form-control.field-has-error {border-color: rgba(212, 78, 82, 1);background-image: none;padding-right: 15px;}
.auth-login-form .form-control:focus.field-has-error {border-color: rgba(212, 78, 82, 1);box-shadow: none;}
.login-page {position: relative;background: #f8fafc;font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;}
.login-page-backdrop {position: fixed;inset: 0;background: rgba(15, 23, 42, 0.08);pointer-events: none;}
.login-card {max-width: 480px;z-index: 1;background: #fff;}
.login-logo-mark {width: 40px;height: 40px;background: #e11d48;color: #fff;font-size: 0.75rem;font-weight: 800;}
.login-input {border-radius: 10px !important;border-color: #e2e8f0;background: #f8fafc;background-image: none !important;}
.login-input:focus {border-color: #fda4af;box-shadow: 0 0 0 0.2rem rgba(225, 29, 72, 0.15);background: #fff;}
.login-submit {background: #e11d48;border-color: #e11d48;font-weight: 600;}
.login-submit:hover:not(:disabled) {background: #be123c;border-color: #be123c;}
.login-link {color: #e11d48 !important;font-weight: 600;}
.login-close {z-index: 2;}
.login-google-wrap > div {width: 100% !important;}
@media (max-width: 576px) {
  .login-card .card-body {padding: 1.25rem !important;}
}
.same-section.real-app-section .col-lg-5 {margin: 30px 0 0;}
.plan-main-content-parent.colorfullbox p.plan-tier-label {justify-content: flex-start;}
.plan-main-content-parent.colorfullbox p.plan-tier-label span.plan-popular-badge {background: #932C2F;padding: 6px 6px;border-radius: 5px;}

/*===============================Dashboard CSS Start=============================*/

.logout-box.sidebar-menu li a {background: rgba(212, 78, 82, 1);display: flex;align-items: center;justify-content: center;color: #fff !important;}
section.same-section.login-page {padding: 50px 0;}
section.same-section.login-page .container-fluid > .row {max-width: 1800px;margin: 0 auto;}
.picture {width: 100%;background: transparent;display: flex;align-items: center;justify-content: center;color: #aaa;border: 1px dashed #B1B1B1;cursor: pointer;transition: color 300ms ease-in-out, background 300ms ease-in-out;outline: none;overflow: hidden;border-radius: 26px;height: 150px;color: #000 !important;font-size: 14px !important;font-weight: 400 !important;}
.picture__img {max-width: 100%;}

#menu-toggle {display: none;}
#menu-toggle:checked ~ .sidebar {left: -250px;}
#menu-toggle:checked ~ .main-content {margin-left: 0;width: 100vw;}
.overlay {position: fixed;width: 100%;height: 100%;left: 0;top: 0;z-index: 10;display: none;background-color: rgb(0 0 0 / 17%);}
.sidebar {width: 250px; height: 100%; position: fixed; top: 0; left: 0; bottom: 0; padding: 1rem 0; transition: width 300ms ease, left 300ms; background: #F8F8F8; overflow-y: auto; overflow-x: hidden; border-right: 1px solid rgb(0 0 0 / 9%); z-index: 200; }
.sidebar-container {position: relative;height: 100%;width: 100%;background-color: transparent;overflow-y: auto;}
.sidebar-container::-webkit-scrollbar {width: 0;}
.logout-box {padding: 20px 0 0;margin: 200px 0 0;}
.sidebar-container::-webkit-scrollbar-track {box-shadow: var(--shadow);}
.sidebar-container::-webkit-scrollbar-thumb {background-color: var(--main-accent);outline: 1px solid #ccc;border-radius: 2px;}
.brand {padding-top: 1rem;display: flex;align-items: center;justify-content: start;margin: 0 0 17px;padding: 0 15px;}
.brand img {max-width: 110px;}
.sidebar-menu ul li a, .logout-box ul li a {display: flex;align-items: center;justify-content: start;color: #0F1A33;font-size: 17px;font-weight: 400;margin: 0; position: relative;}
.sidebar-menu ul li a .arrow {position: absolute;right: 15px;top: 50%;transform: translateY(-50%);transition: 0.4s;-webkit-transition: 0.4s;transform: rotate(-90deg);}
.sidebar-menu ul li a:hover img,
.logout-box ul li a:hover img,
.sidebar-menu ul li a.active img,
.logout-box ul li a.active img{filter: none;}
.logout-box ul li a span{margin-right: 0.8rem;}
.sidebar-menu ul li a.active, .sidebar-menu ul li a:hover, .logout-box ul li a:hover, .logout-box ul li a.active {color: rgba(212, 78, 82, 1);}
.sidebar-menu a {color: var(--main-text);display: block;padding: 10px 15px; border-radius: 13px;}
.sidebar-menu .menu {display: none;}
.sidebar-menu a span:first-child {display: inline-block;margin-right: 0.8rem;font-size: 1.5rem;color: var(--color-main);}
.sidebar-card {background-color: var(--main-accent);padding: 1rem;margin-top: 2rem;box-shadow: var(--shadow);text-align: center;border-radius: 7px;}
.main-content-wrapper {background: url(../images/dashboard-bg.png) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 100% 100% !important; height: 100%; padding: 1rem 2rem 1.2rem 2rem; border-radius: 20px 0 0 20px; overflow: hidden; overflow-y: auto; position: relative; }
.main-content-wrapper .add-category.category-main-parent-wrapper ul {gap: 10px;flex-wrap: wrap;}
.main-content {margin-left: 345px;width: calc(100vw - 345px);transition: margin-left 300ms ease, width 300ms ease;height: 100vh;overflow-y: auto;background: #F8F8F8;}
header {display: flex;padding-top: 0.5rem;justify-content: space-between;}
.header-action .header-login {position: relative;padding-left: 75px;}
.header-action .header-login img {position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
.header-action .header-login h4 {color: #121212;font-size: 18px;font-weight: 600;line-height: 1.4;margin: 0;}
.header-action .header-login p {font-size: 16px;font-weight: 400;line-height: 1.6;margin: 0;color: #797979;}
.sidebar-menu ul li a img, .logout-box ul li a img {filter: brightness(0);}
.header-wrapper {display: flex;align-items: center;justify-content: start;}
.header-wrapper label {display: inline-block;color: var(--color-main);margin-right: 2rem;font-size: 1.8rem;}
.header-wrapper label span:hover {cursor: pointer;}
.header-title h1 {color: #629E27;font-weight: 600;font-size: 35px;line-height: 1.4;margin: 0;}
.header-title p {color: #666;font-size: 0.9rem;}
.header-title p span {color: red;font-size: 1.2rem;display: inline-block;margin-left: 0.5rem;}
.header-action button {padding: 0.85rem 2rem;font-size: 1rem;}
main {padding: 2.5rem 0;}
.section-head {font-size: 1.4rem;color: var(--main);font-weight: 600;margin-bottom: 1rem;}
.block-grid {display: grid;grid-gap: 3rem;grid-template-columns: 30% auto;}
.rev-content {background-color: #fff;box-shadow: var(--shadow);border-radius: 15px;padding: 1rem 2rem;text-align: center;}
.rev-content img {width: 180px;margin: 1.5rem 0;border-radius: 50%;}
.rev-info {margin-bottom: 1rem;}
.rev-info h3,
.rev-sum h4 {font-weight: 600;color: var(--main);}
.rev-info h1,
.rev-sum h2 {font-weight: 400;margin-top: 0.4rem;color: #555;}
.rev-info h1 small {font-size: 1rem;}
.rev-sum {background-color: var(--main-accent);border: 1px solid var(--color-main);padding: 1rem;border-radius: 10px;}
.graph-content {border-radius: 15px;box-shadow: var(--shadow);padding: 1rem;background-color: #fff;}
.graph-head {display: flex;justify-content: space-between;align-items: center;}
.icon-wrapper {display: flex;align-items: center;}
.icon {height: 40px;width: 40px;border-radius: 7px;background-color: #eee;display: grid;place-items: center;font-size: 1.2rem;margin-right: 0.8rem;}
.graph-head select {outline: none;background-color: #eee;height: 35px;border-radius: 10px;padding: 0.5rem 1rem;border: none;}
.overlay label {display: block;height: 100%;width: 100%;}

.header-wrapper label {
    display: inline-block;
    color: var(--color-main);
    margin-right: 2rem;
    font-size: 1.8rem;
}


@media only screen and (max-width: 1199px) {
  .main-content {width: 100vw;margin-left: 0;}
  #menu-toggle:checked ~ .sidebar {left: 0;}
  #menu-toggle:checked ~ .overlay {display: block;text-align: right;}
}
@media only screen and (max-width: 860px) {
  .analytics {grid-template-columns: repeat(2, 1fr);}
  .block-grid {grid-template-columns: 100%;}
  .revenue-card {order: 2;}
}
@media only screen and (max-width: 580px) {
  .analytics {grid-template-columns: 100%;}
}
@media only screen and (max-width: 500px) {
  .header,
  .header-wrapper {align-items: center;}
  .header-title h1 {font-size: 1.2em;}
  .header-title p {display: none;}
}

.sidebar-container .logout-box.sidebar-menu {bottom: 20px;left: 15px;position: absolute;right: 15px;}
.sidebar-container .logout-box.sidebar-menu li a {color: #FF0000;}
.sidebar-container .logout-box.sidebar-menu li a img{filter: none;}
.sidebar-container .logout-box.sidebar-menu a span {margin-right: 5px;}
.login-box-parent a {border-top: 1px solid rgb(0 0 0 / 10%); border-bottom: 1px solid rgb(0 0 0 / 10%); padding: 22px 15px; display: flex; align-items: center; justify-content: flex-start; position: relative; padding-left: 60px; color: rgba(0, 0, 0, 1); font-size: 20px; font-weight: 600; margin: 0 0 20px; }
.login-box-parent a figure {width: 40px; height: 40px; border-radius: 50%; background: rgba(212, 78, 82, 1); display: flex; align-items: center; justify-content: center; color: #fff; margin: 0; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
.login-box-parent a figure.has-avatar-image {background: transparent; overflow: hidden;}
.login-box-parent a figure .sidebar-user-avatar {width: 100%; height: 100%; object-fit: cover; border-radius: 50%;}
.dropdownmenu.active img.arrow {transform: rotate(0deg);}
.sidebar-desktop-only {display: none;}
.sidebar-mobile-only {display: block;}
.sidebar-logout-icon {display: none;}

@media (min-width: 1200px) {
  .sidebar-desktop-only {display: block;}
  .sidebar-mobile-only {display: none !important;}
  body.sidebar-collapsed .sidebar,
  body.sidebar-collapsed .sidebar.sidebar-collapsed {width: 72px;overflow: hidden;transition: width 0.28s ease, box-shadow 0.28s ease;z-index: 250;}
  body.sidebar-collapsed .sidebar.is-expanded,
  body.sidebar-collapsed .sidebar.sidebar-collapsed.is-expanded {width: 250px;overflow-y: auto;overflow-x: hidden;box-shadow: 6px 0 24px rgb(0 0 0 / 10%);}
  body.sidebar-collapsed .main-content {margin-left: 72px;width: calc(100vw - 72px);}
  body.sidebar-collapsed .sidebar:not(.is-expanded) .brand {justify-content: center;padding: 0 10px;}
  body.sidebar-collapsed .sidebar:not(.is-expanded) .brand img {max-width: 36px;width: 36px;height: 36px;object-fit: cover;object-position: left center;}
  body.sidebar-collapsed .sidebar:not(.is-expanded) .sidebar-label {display: none !important;}
  body.sidebar-collapsed .sidebar:not(.is-expanded) .login-box-parent a {justify-content: center;padding: 16px 10px;padding-left: 10px;margin: 0 0 16px;}
  body.sidebar-collapsed .sidebar:not(.is-expanded) .login-box-parent a figure {position: static;transform: none;}
  body.sidebar-collapsed .sidebar:not(.is-expanded) .sidebar-menu ul li a,
  body.sidebar-collapsed .sidebar:not(.is-expanded) .logout-box ul li a {justify-content: center;padding: 10px;}
  body.sidebar-collapsed .sidebar:not(.is-expanded) .sidebar-menu a span:first-child {margin-right: 0;}
  body.sidebar-collapsed .sidebar:not(.is-expanded) .sidebar-submenu {display: none !important;}
  body.sidebar-collapsed .sidebar:not(.is-expanded) .sidebar-container .logout-box.sidebar-menu {left: 8px;right: 8px;}
  body.sidebar-collapsed .sidebar:not(.is-expanded) .sidebar-container .logout-box.sidebar-menu ul li .btn.btn-defaultx {padding: 10px;display: flex;align-items: center;justify-content: center;}
  body.sidebar-collapsed .sidebar:not(.is-expanded) .sidebar-logout-icon {display: inline-block;font-size: 18px;}
  body.sidebar-collapsed .sidebar:not(.is-expanded) .logout-box ul li a span:first-child {margin-right: 0;}
  body.sidebar-collapsed .sidebar.is-expanded .brand img {max-width: 110px;width: auto;height: auto;object-fit: initial;}
  body.sidebar-collapsed .sidebar.is-expanded .login-box-parent a {padding: 22px 15px;padding-left: 60px;}
  body.sidebar-collapsed .sidebar.is-expanded .login-box-parent a figure {position: absolute;left: 10px;top: 50%;transform: translateY(-50%);}
  body.sidebar-collapsed .sidebar.is-expanded .sidebar-container .logout-box.sidebar-menu {left: 15px;right: 15px;}
}

@media (max-width: 1199px) {
  body.sidebar-collapsed .sidebar,
  body.sidebar-collapsed .sidebar.sidebar-collapsed {width: 345px;overflow-y: auto;}
  body.sidebar-collapsed .brand img {max-width: 110px;width: auto;height: auto;object-fit: initial;}
  .sidebar-desktop-only {display: none !important;}
  .sidebar-mobile-only {display: block !important;}
}

.sidebar-menu ul li ul.menu {margin-left: 10px;}
.header-title {text-align: center;}
.header-title h3 {color: rgba(0, 0, 0, 1);font-size: 28px;font-weight: 600;line-height: 1.4;margin: 0;}
.main-banner-content-wrapper .banner-textarea-wrapper {margin: 1rem 0 0;}
.header-dashboard-content-wrapper {margin: 12rem 0;}
.main-content-section .main-banner-content-wrapper .textarea-right-btn .btn.btn-primaryx {width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;padding: 0;border-radius: 5px;}
.main-content-section .main-banner-content-wrapper .textarea-right-btn .btn.btn-primaryx:hover{border-color: #000;}
.main-content-section .main-banner-content-wrapper .textarea-right-btn .btn.btn-primaryx:hover img {filter: invert(1);}
.dashboaed-header-parent {display: flex;align-items: center;justify-content: flex-start;gap: 20px;}
.dashboaed-header-parent figure {margin: 0;}
.dashboaed-header-parent figure img {max-height: 30px;}
.dashboaed-header-parent h2 {margin: 0;}
.modal-body.dashboard-login-box .login-modal-content {padding: 10px 0 15px 0;}
.modal-body.dashboard-login-box .login-modal-content .form-group {margin: 0 0 20px;}
.modal-body.dashboard-login-box .login-modal-content .modal-form-parent {margin: 2rem 0 0;}
.modal-body.dashboard-login-box .login-modal-content .modal-form-parent .form-group:last-child {margin: 0;text-align: right;}
.modal-body.dashboard-login-box .login-modal-content .modal-form-parent .form-group:last-child .btn.btn-primaryx {min-width: 100px;width: auto;margin-left: auto;padding: 8px 10px;font-size: 14px;}
.modal.login-model-parent.dashboard-listing-modal .modal-dialog.modal-dialog-centered {max-width: 650px;}
.modal.login-model-parent.dashboard-listing-modal .modal-dialog.modal-dialog-centered .modal-form-parent ul {display: flex;justify-content: flex-start;gap: 10px;flex-wrap: wrap;}
.modal.login-model-parent.dashboard-listing-modal .modal-dialog.modal-dialog-centered .modal-form-parent ul li + li {margin: 0;}
.modal.login-model-parent.dashboard-listing-modal .modal-dialog.modal-dialog-centered .modal-form-parent ul li a {font-size: 14px;padding: 7px 10px;border-radius: 7px;color: rgba(0, 0, 0, 1);font-weight: 400;}
.modal.login-model-parent.dashboard-listing-modal .modal-dialog.modal-dialog-centered .modal-form-parent ul li a:hover{color: #fff; background:rgba(212, 78, 82, 1); border-color: rgba(212, 78, 82, 1);}
.modal-body.dashboard-login-box .login-modal-content .modal-form-parent .form-group:last-child .dashboard-modal-btn {display: flex;align-items: center;justify-content: space-between; margin: 40px 0 0;}
.modal-body.dashboard-login-box .login-modal-content .modal-form-parent .form-group .dashboard-modal-btn .btn{min-width: 100px;width: auto;padding: 8px 10px;font-size: 14px;border-radius: 6px;}
.modal-body.dashboard-login-box .login-modal-content .modal-form-parent .form-group .dashboard-modal-btn .btn-defaultx{background:rgba(131, 131, 131, 0.11); border-color: rgba(131, 131, 131, 0.11); color: #000;}
.modal-body.dashboard-login-box .login-modal-content .modal-form-parent .form-group .dashboard-modal-btn .btn-defaultx:hover{background:transparent; border-color: #000; color: #000;}
.modal.login-model-parent.dashboard-listing-modal.dashboard-plan-modal .modal-dialog.modal-dialog-centered {max-width: 1500px;}
.modal.login-model-parent.dashboard-listing-modal.dashboard-plan-modal .modal-dialog.modal-dialog-centered .dashboaed-header-parent {gap: 0;flex-wrap: wrap;justify-content: center;text-align: center;margin: 30px 0 0;}
.modal.login-model-parent.dashboard-listing-modal.dashboard-plan-modal .modal-dialog.modal-dialog-centered .plan-main-wrapper {margin: 2rem 0 0;}
.modal.login-model-parent.dashboard-listing-modal.dashboard-plan-modal .modal-dialog.modal-dialog-centered .dashboaed-header-parent h2 {color: rgba(0, 0, 0, 1);font-size: 32px;font-weight: 700;line-height: 1.4;display: block;width: 100%;margin: 0;}
.modal.login-model-parent.dashboard-listing-modal.dashboard-plan-modal .modal-dialog.modal-dialog-centered .dashboaed-header-parent p{color: rgba(131, 131, 131, 1); font-size: 16px; font-weight: 500; line-height: 1.6; margin: 0;}
.modal.login-model-parent.dashboard-listing-modal.dashboard-plan-modal .modal-dialog.modal-dialog-centered .modal-body {padding: 1rem 3rem 3rem;}
 
.project-header-wrapper h1 {color: rgba(0, 0, 0, 1);font-size: 28px;font-weight: bold;line-height: 1.4;margin: 0;display: flex;align-items: center;justify-content: flex-start;gap: 15px;}
.project-header-wrapper h1 img {max-height: 24px;}
.project-header-with-actions {display: flex;align-items: center;justify-content: space-between;gap: 16px;flex-wrap: wrap;}
.project-header-with-actions h1 {flex: 1;min-width: 0;}
.project-search-bar-wrapper {display: flex;align-items: center;justify-content: space-between;margin: 1.25rem 0 0;gap: 16px;flex-wrap: wrap;}
.poject-search-bar{position: relative;flex: 1;min-width: 220px;max-width: 420px;}
.poject-search-bar input {width: 100%;min-width: 0;border: 1px solid rgba(232, 232, 232, 1);padding: 10px 40px 10px 12px;border-radius: 9px;color: rgba(0, 0, 0, 1);font-size: 14px;line-height: 1.4;margin: 0;font-weight: 600;}
.poject-search-bar img {position: absolute;top: 50%;transform: translateY(-50%);right: 13px;cursor: pointer;pointer-events: none;}
.poject-search-bar.poject-select-bar {flex: 0 0 auto;min-width: 160px;max-width: 200px;}
.poject-search-bar.poject-select-bar select {width: 100%;border: 1px solid rgba(232, 232, 232, 1);padding: 10px 36px 10px 12px;border-radius: 9px;color: rgba(0, 0, 0, 1);font-size: 14px;line-height: 1.4;margin: 0;font-weight: 600;appearance: none;}
.poject-search-bar.poject-select-bar img{user-select: none;pointer-events: none;}
.select-bar-wrapper {display: flex;align-items: center;justify-content: flex-end;gap: 10px;flex-shrink: 0;}
.category-wrapper ul {display: flex;align-items: center;justify-content: end;background: rgba(232, 232, 232, 1);padding: 1px;border-radius: 8px;overflow: hidden;margin: 0;}
.category-wrapper ul li a {background: rgba(232, 232, 232, 1);width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;overflow: hidden;border-radius: 8px;}
.category-wrapper {margin-left: 0;}
.category-wrapper ul li a.active,
.category-wrapper ul li a:hover{background: rgba(255, 255, 255, 1);}
.project-table-wrapper {margin-top: 0;border: 1px solid rgba(232, 232, 232, 1);border-radius: 12px;overflow: auto;background: #fff;}
.project-table {width: 100%;table-layout: fixed;border-collapse: collapse;background: #fff;}
.project-table .col-name {width: 36%;}
.project-table .col-access {width: 12%;}
.project-table .col-status {width: 18%;}
.project-table .col-opened {width: 17%;}
.project-table .col-created {width: 17%;}
.project-table th,
.project-table td {padding: 14px 16px;text-align: left;font-size: 14px;border-bottom: 1px solid rgba(238, 238, 238, 1);vertical-align: middle;color: rgba(40, 40, 40, 1);}
.project-table th {font-weight: 700;color: rgba(80, 80, 80, 1);background: rgba(251, 251, 251, 1);white-space: nowrap;}
.project-table tbody tr:last-child td {border-bottom: 0;}
.project-table-row {cursor: pointer;transition: background 0.15s ease;}
.project-table-row:hover {background: rgba(212, 78, 82, 0.05);}
.project-table-name {max-width: 0;}
.project-table-name-text {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;font-weight: 600;color: rgba(0, 0, 0, 1);line-height: 1.4;}
.project-table-status {text-align: center;color: rgba(130, 130, 130, 1);padding: 2rem 1rem;}
.project-table-wrapper tbody td.nodata-parent {width: 100%;text-align: center;}
.project-status-badge {display: inline-block;padding: 4px 10px;border-radius: 999px;font-size: 12px;font-weight: 600;text-transform: capitalize;background: rgba(232, 232, 232, 1);color: rgba(80, 80, 80, 1);white-space: nowrap;}
.project-status-badge.draft {background: rgba(255, 189, 46, 0.22);color: #8c5a00;}
.project-status-badge.published {background: rgba(57, 190, 97, 0.16);color: #1a7a3a;}
.project-main-page-wrapper {flex: 1;display: flex;flex-direction: column;min-height: 0;background: #fff;border-radius: 14px;border: 1px solid rgba(232, 232, 232, 1);padding: 20px 24px 24px;overflow: hidden;}
.project-page-body {flex: 1;min-height: 0;overflow: auto;margin-top: 16px;}
.project-grid-view {display: grid;grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));gap: 16px;}
.project-grid-card {display: flex;flex-direction: column;align-items: flex-start;gap: 8px;padding: 16px;border: 1px solid rgba(232, 232, 232, 1);border-radius: 12px;background: #fff;cursor: pointer;text-align: left;transition: border-color 0.15s ease, box-shadow 0.15s ease;width: 100%;}
.project-grid-card:hover {border-color: rgba(212, 78, 82, 0.35);box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);}
.project-grid-card strong {font-size: 15px;line-height: 1.4;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;color: rgba(0, 0, 0, 1);}
.project-grid-card span {font-size: 12px;font-weight: 600;padding: 4px 10px;border-radius: 999px;background: rgba(255, 189, 46, 0.22);color: #8c5a00;}
.project-grid-card small {font-size: 12px;color: rgba(130, 130, 130, 1);}
.project-grid-loading,
.project-grid-empty {padding: 2rem;text-align: center;color: rgba(130, 130, 130, 1);}
body.app-body:has(.project-main-page-wrapper) .main-content-wrapper {display: flex;flex-direction: column;padding: 12px 16px;overflow: hidden;}
body.app-body:has(.project-main-page-wrapper) main {padding: 0;flex: 1;min-height: 0;display: flex;flex-direction: column;overflow: hidden;}
body.app-body:has(.project-main-page-wrapper) .main-content-section {flex: 1;min-height: 0;display: flex;flex-direction: column;overflow: hidden;}
.no-data {padding: 30px 15px;}
.no-data figure {margin: 0 0 10px;}
.no-data h4 {color: rgba(0, 0, 0, 1);font-size: 24px;line-height: 1.4;font-weight: 700;margin: 0 0 5px;}
.no-data p {color: rgba(0, 0, 0, 1);font-size: 16px;font-weight: 600;line-height: 1.6;margin: 0;}
.no-data figure img {max-height: 80px;}

.profile-upload-wrapper .avatar-upload {width: 80px;height: 80px;overflow: hidden;padding: 0;border: 1px solid transparent;margin-right: 10px;}
.profile-upload-wrapper {display: flex;align-items: center;justify-content: start;}
.avatar-upload { & .avatar-edit { & input { + label {display: inline-block;width: 25px;height: 25px;margin-bottom: 0;background: #fff url(../images/upload-icon.png);background-size: cover;background-position: center;background-repeat: no-repeat;cursor: pointer;font-weight: normal;transition: all .2s ease-in-out;border-radius: 50%;box-shadow: 0 0 10px rgb(0 0 0 / 17%);background-size: 15px;}}}}
.profile-image-upload-parent .profile-upload-wrapper .avatar-upload .avatar-edit {position: absolute;bottom: 10px;right: 10px;z-index: 1;}
.avatar-preview {position: relative;height: 100%;> div {width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-position: center;}}}
.profile-image-upload-content p {color: #9B9B9B;font-size: 15px;font-weight: 400;line-height: 1.6;margin: 0;}
.profile-image-upload-content h4 {color: #383838;font-size: 20px;font-weight: 500;line-height: 1.4;margin: 0;}
.profile-upload-bottom-box .form-group label {color: rgba(0, 0, 0, 1);font-size: 18px;font-weight: 500;line-height: 1.4;margin: 0 0 5px;}
.profile-upload-bottom-box .form-group {margin: 0 0 25px;}
.profile-upload-bottom-box .col-lg-6:last-child .form-group label {color: #888888;text-transform: uppercase;margin: 0 0 5px;}
.account-data-wrapper {background: #F8F8F8;border: 1px solid #EAEAEA;padding: 25px;border-radius: 8px;height: 100%;}
.account-data-wrapper .account-data-inner + .account-data-inner {padding-top: 15px;margin-top: 15px;border-top: 1px solid #dfdfdf;}
.account-data-wrapper .account-data-inner span {color: #191919;font-size: 18px;font-weight: 500;line-height: 1.4;margin: 0 0 5px;}
.account-data-wrapper .account-data-inner p {color: #629E27;font-weight: 500;font-size: 18px;line-height: 1.4;margin: 0;}
.profile-upload-bottom-box .form-group .url-filds.form-control input {color: rgba(131, 131, 131, 1);}
.profile-upload-bottom-box .form-group .updatebtn .btn.btn-primaryx {width: auto;min-width: 200px;padding: 8px 15px;font-size: 16px;}
.profile-upload-bottom-box .form-group .url-filds + p {font-size: 16px;color: rgba(131, 131, 131, 1);font-weight: 400;line-height: 1.4;margin: 7px 0 0;}
.profile-upload-bottom-box .notify-parent label {color: #888888;text-transform: uppercase;margin: 0 0 5px;}
.profile-upload-bottom-box .notify-parent .notify-innner-parent {padding: 25px 15px;background: #F8F8F8;border-radius: 8px;display: flex;align-items: start;justify-content: space-between;}
.profile-upload-bottom-box .notify-parent .notify-innner-parent .notify-content {position: relative;padding-left: 60px;}
.profile-upload-bottom-box .notify-parent .notify-innner-parent .notify-content figure {margin: 0;position: absolute;left: 0;top: 0;}
.profile-upload-bottom-box .notify-parent .notify-innner-parent .notify-content h4 {color: #191919;font-size: 20px;font-weight: 500;line-height: 1.4;margin: 0;}
.profile-upload-bottom-box .notify-parent .notify-innner-parent .notify-content p {color: #535353;font-size: 18px;font-weight: 400;line-height: 1.6;margin: 0;}
.avatar-upload .avatar-edit input {position: absolute;left: 0;top: 0;bottom: 0;right: 0;width: 100%;height: 100%;opacity: 0;cursor: pointer;z-index: 1;}
.avatar-upload .avatar-preview {width: 100%;height: 80px;position: relative;border-radius: 100%;box-shadow: none;}
.avatar-upload .avatar-preview > div {width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-position: center;}
.avatar-upload {position: relative;max-width: 100%;border-radius: 13px;border: 1px dashed #D0D0D0;padding: 5px;}
.profile-image-upload-parent {background: rgba(255, 255, 255, 1);height: 100%;padding: 20px;border-radius: 20px;display: flex;align-items: center;justify-content: center;gap: 10px;}
.profile-image-upload-parent .profile-upload-wrapper .avatar-upload {margin: 0 auto;width: 120px;height: 120px;border-radius: 50%;border: 3px solid #fff;box-shadow: 0px 4px 84px 0px rgba(0, 0, 0, 0.13);}
.profile-image-upload-parent .profile-upload-wrapper .avatar-upload .avatar-preview {width: 100%;height: 100%;}
.profile-image-upload-parent .profile-upload-wrapper {flex-wrap: wrap;justify-content: center;text-align: center;}
.profile-image-upload-parent .profile-upload-wrapper .profile-image-upload-content {width: 100%;margin: 20px 0 0;}
.profile-image-upload-parent .profile-upload-wrapper .profile-image-upload-content .btn.btn-primaryx {padding: 8px 15px;min-width: 200px;font-size: 15px;background: transparent;border-color: rgba(212, 78, 82, 1);color: rgba(212, 78, 82, 1);font-weight: 700;}
.profile-image-upload-parent .profile-upload-wrapper .profile-image-upload-content .btn.btn-primaryx:hover{background: rgba(212, 78, 82, 1); color: #fff;}
.profile-image-upload-parent .profile-upload-wrapper .profile-image-upload-content {width: 100%;margin: 20px 0 0;}
.update-user-details-wrapper {margin: 4rem 0 0;}
.user-detils-main-parent {display: flex;align-items: center;justify-content: space-between;}
.user-detils-left label {color: rgba(0, 0, 0, 1);font-size: 18px;font-weight: 600;line-height: 1.4;margin: 0 0 5px;}
.user-detils-left p {color: rgba(131, 131, 131, 1);font-size: 16px;font-weight: 400;line-height: 1.4;margin: 0;}
.user-detils-left .updatprofilebtn {color: rgba(40, 40, 40, 1);font-size: 16px;font-weight: 600;line-height: 1.4;margin: 0;display: flex;align-items: center;justify-content: center;gap: 5px;border: 1px solid rgba(210, 210, 210, 1);padding: 6px 20px;border-radius: 5px;}
.user-detils-left .updatprofilebtn:hover{background: #000; color: #fff; border-color: transparent;}
.update-user-details-parent {background: rgba(255, 255, 255, 1);padding: 15px 15px;border: 1px solid rgba(238, 238, 238, 1);border-radius: 5px;}

.update-user-details-box {margin-top: 1rem; display: none;}
.update-user-details-box h3 {color: rgba(0, 0, 0, 1);font-size: 18px;font-weight: 500;line-height: 1.4;margin: 0 0 10px;}
.update-user-details-box .form-group label {color: rgba(0, 0, 0, 1);font-size: 16px;font-weight: 500;line-height: 1.4;margin: 0 0 5px;}
.form-control input {width: 100%;}
.update-user-details-box .row {align-items: end;}
.user-profile-update-btn{text-align: right;}
.user-profile-update-btn .btn {padding: 9px 10px;font-size: 16px;border-radius: 7px;min-width: 100px;}

.update-user-details-parent + .update-user-details-parent {margin-top: 2rem;}
.update-user-details-parent.update-user-details-delete-parent .user-detils-left {min-width: 270px;margin-left: 15px;}
.update-user-details-parent.update-user-details-delete-parent .user-detils-left .updatprofilebtn {padding: 10px 10px;}
.update-user-details-parent.update-user-details-delete-parent .user-detils-left .updatprofilebtn img{max-height: 15px;}
.update-user-details-parent.update-user-details-delete-parent .user-detils-left .updatprofilebtn:hover img,
.user-profile-update-btn .btn:hover img{filter: invert(1);}
.update-user-details-parent.update-user-details-delete-parent {margin-top: 4rem;}
.modal-body.dashboard-login-box.delet-user-box-content .login-modal-content .dashboaed-header-parent {flex-wrap: wrap;text-align: left;gap: 0;}
.modal-body.dashboard-login-box.delet-user-box-content .login-modal-content .dashboaed-header-parent p {color: rgba(131, 131, 131, 1);font-size: 18px;font-weight: 500;line-height: 1.6;margin: 5px 0 0;}
.modal-body.dashboard-login-box.delet-user-box-content + .modal-footer .btn {padding: 5px 10px;font-size: 16px;border-radius: 5px;min-width: 80px;display: flex;align-items: center;justify-content: center;gap: 5px;}
.modal-body.dashboard-login-box.delet-user-box-content + .modal-footer .btn img{max-height: 15px; filter: invert(1);}
.modal-body.dashboard-login-box.delet-user-box-content + .modal-footer .btn:hover img{filter: none;}
.modal-body.dashboard-login-box.delet-user-box-content + .modal-footer {border: none;padding-top: 0;}

.billing-page-content-parent {margin: 2rem 0 0;}
.billing-page-content-parent p {color: rgba(0, 0, 0, 1);font-size: 16px;font-weight: 500;line-height: 1.4;margin: 0;}
.billing-page-content-parent p a{color: rgba(212, 78, 82, 1); text-decoration: underline; font-weight: 500;}
.billing-content-box {border: 1px solid rgba(210, 210, 210, 1);background: rgba(255, 255, 255, 1);padding: 10px 15px;border-radius: 5px;height: 100%;}
.billing-content-box h3 {color: rgba(0, 0, 0, 1);font-size: 18px;font-weight: 600;line-height: 1.4;margin: 0 0 5px;}
.billing-content-box p {color: rgba(0, 0, 0, 1);font-size: 16px;font-weight: 400;line-height: 1.6;margin: 0;}
.billing-page-content-parent .row {margin-top: 1rem;}
.billing-content-box .billing-plan-meta {color: rgba(131, 131, 131, 1);font-size: 14px;font-weight: 400;margin-top: 4px;}
.billing-plan-meta.billing-plan-expired {color: rgba(212, 78, 82, 1);}
.billing-payment-details-box {margin-top: 0;}
.billing-payment-details-box h4 {color: rgba(0, 0, 0, 1);font-size: 16px;font-weight: 600;margin: 1.25rem 0 0.75rem;}
.billing-payment-summary {display: grid;grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));gap: 16px 24px;margin-top: 0.5rem;}
.billing-payment-label {display: block;color: rgba(131, 131, 131, 1);font-size: 13px;font-weight: 500;margin-bottom: 4px;}
.billing-payment-summary strong {color: rgba(0, 0, 0, 1);font-size: 16px;font-weight: 600;line-height: 1.4;}
.billing-payment-id {font-size: 13px;font-weight: 500;word-break: break-all;}
.billing-benefits-list {list-style: none;margin: 0;padding: 0;}
.billing-benefits-list li {display: flex;align-items: flex-start;gap: 8px;color: rgba(0, 0, 0, 1);font-size: 15px;line-height: 1.5;margin: 0 0 8px;}
.billing-benefits-list li img {width: 16px;height: 16px;margin-top: 3px;flex-shrink: 0;}
.billing-benefits-list--spaced {margin-top: 12px;}
.billing-history-table-wrap {overflow-x: auto;margin-top: 0.5rem;}
.billing-history-table {width: 100%;border-collapse: collapse;font-size: 14px;}
.billing-history-table th,
.billing-history-table td {padding: 12px 10px;text-align: left;border-bottom: 1px solid rgba(238, 238, 238, 1);vertical-align: top;}
.billing-history-table th {color: rgba(131, 131, 131, 1);font-size: 13px;font-weight: 600;text-transform: uppercase;letter-spacing: 0.02em;}
.billing-history-table td strong {display: block;color: rgba(0, 0, 0, 1);font-weight: 600;}
.billing-history-benefits {list-style: none;margin: 6px 0 0;padding: 0;}
.billing-history-benefits li {color: rgba(131, 131, 131, 1);font-size: 12px;line-height: 1.4;margin: 0 0 2px;}
.billing-status-badge {display: inline-block;padding: 3px 10px;border-radius: 999px;font-size: 12px;font-weight: 600;}
.billing-status-badge.active {background: rgba(57, 190, 97, 0.16);color: #1a7a3a;}
.billing-status-badge.inactive {background: rgba(120, 120, 120, 0.14);color: rgba(90, 90, 90, 1);}
.billing-status-badge.expired {background: rgba(212, 78, 82, 0.12);color: rgba(212, 78, 82, 1);}
.billing-page-content-parent a {color: rgba(212, 78, 82, 1);text-decoration: underline;font-weight: 500;}
.billing-back-link {display: inline-block;margin-bottom: 10px;color: rgba(131, 131, 131, 1);font-size: 14px;font-weight: 600;text-decoration: none;}
.billing-back-link:hover {color: rgba(212, 78, 82, 1);}
.billing-invoices-lead {color: rgba(131, 131, 131, 1);font-size: 15px;font-weight: 500;margin: 8px 0 0;max-width: 720px;line-height: 1.5;}
.invoice-table .col-invoice {width: 16%;}
.invoice-table .col-paid {width: 14%;}
.invoice-table .col-plan {width: 14%;}
.invoice-table .col-amount {width: 12%;}
.invoice-table .col-expires {width: 14%;}
.invoice-table .col-status {width: 12%;}
.invoice-table .col-action {width: 8%;}
.invoice-table-row {transition: background 0.15s ease;}
.invoice-table-row.is-expanded {background: rgba(212, 78, 82, 0.04);}
.invoice-table-row:hover {background: rgba(212, 78, 82, 0.05);}
.invoice-table-number,
.invoice-table-plan {font-weight: 600;color: rgba(0, 0, 0, 1);}
.invoice-table-amount {color: rgba(0, 0, 0, 1);font-weight: 700;}
.invoice-table-action {text-align: center;}
.invoice-view-btn {display: inline-flex;align-items: center;justify-content: center;width: 36px;height: 36px;border: 1px solid rgba(210, 210, 210, 1);border-radius: 8px;background: #fff;color: rgba(80, 80, 80, 1);cursor: pointer;transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;}
.invoice-view-btn:hover,
.invoice-view-btn.is-active {background: rgba(212, 78, 82, 1);border-color: rgba(212, 78, 82, 1);color: #fff;}
.invoice-view-btn .fa {font-size: 16px;line-height: 1;}
.invoice-detail-row td {padding: 0 !important;background: rgba(251, 251, 251, 1);border-bottom: 1px solid rgba(238, 238, 238, 1) !important;}
.invoice-detail-panel {padding: 18px 20px 20px;}
.invoice-detail-panel-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));gap: 16px 24px;}
.invoice-detail-panel-grid strong {display: block;color: rgba(0, 0, 0, 1);font-size: 15px;font-weight: 600;line-height: 1.4;margin-top: 4px;}
.invoice-detail-panel-wide {grid-column: 1 / -1;}
.invoice-detail-benefits {margin-top: 18px;padding-top: 18px;border-top: 1px solid rgba(232, 232, 232, 1);}
.invoice-detail-benefits h4 {margin: 0 0 12px;font-size: 15px;font-weight: 600;color: rgba(0, 0, 0, 1);}
.sidebar-menu ul li ul.menu li a {font-size: 15px;padding: 8px 15px;}
.sidebar-menu ul li ul.menu li a span:first-child img {max-height: 18px;width: auto;}
.project-main-page-wrapper.settings-page-wrapper {overflow-x: hidden;overflow-y: auto;}
.settings-page-body,
.user-profiile-details-wrapper {flex: 1;min-height: 0;}
.user-profiile-details-wrapper {margin-top: 1rem;}
.update-user-details-parent.update-user-details-delete-parent {margin-top: 2rem;}
.update-user-details-parent.update-user-details-delete-parent .user-detils-main-parent .user-detils-left {margin-left: 0;}
.update-user-details-parent.update-user-details-delete-parent .user-detils-main-parent .user-detils-left:last-child{min-width: 100px;}
.sidebar-container .logout-box.sidebar-menu ul li .btn.btn-defaultx {margin: 0 0 15px;color: rgba(212, 78, 82, 1) !important;border-color: rgba(212, 78, 82, 1);background: transparent;}
.user-profiile-details-wrapper .update-user-details-parent.update-user-details-delete-parent .user-detils-main-parent .user-detils-left:last-child {min-width: 240px;margin-left: 15px;}

/* ===== Prompt composer (dashboard + chat) ===== */
.prompt-composer {margin: 0;background: rgba(255, 255, 255, 0.26);border: 3px solid rgba(255, 255, 255, 1);border-radius: 20px;position: relative;overflow: hidden;}
.prompt-composer .p-textarea,
.prompt-composer textarea {background: rgba(255, 255, 255, 0.26);width: 100%;min-height: 140px;padding: 15px 15px 72px;color: rgba(0, 0, 0, 1);font-size: 18px;font-weight: 600;line-height: 1.5;resize: vertical;white-space: pre-wrap;}
.prompt-composer.home-chat-composer .home-chat-composer-input,
.prompt-composer.compare-chat-composer-box .compare-chat-composer-input {min-height: 110px;padding-bottom: 64px;}
.prompt-composer .banner-textarea-header {border-bottom: 1px solid rgba(238, 238, 238, 1);}
.prompt-composer .textarea-bottom-fixed-box {position: absolute;bottom: 10px;left: 10px;right: 10px;}
.prompt-add-file-btn {background: transparent;border: 0;padding: 0;cursor: pointer;display: inline-flex;align-items: center;justify-content: center;}
.prompt-add-file-btn:disabled {opacity: 0.45;cursor: not-allowed;}
.prompt-add-file-btn img {max-height: 18px;}
.prompt-file-input {position: absolute;width: 1px;height: 1px;opacity: 0;pointer-events: none;}
.prompt-composer.prompt-drop-active {border-color: rgba(212, 78, 82, 0.65);box-shadow: 0 0 0 3px rgba(212, 78, 82, 0.12);}
.prompt-composer.has-attachments .home-chat-composer-input,
.prompt-composer.has-attachments .p-textarea {padding-top: 8px;}
.prompt-attachments-preview {display: flex;flex-wrap: wrap;gap: 8px;padding: 10px 12px 0;}
.prompt-preview-thumb {position: relative;width: 56px;height: 56px;border-radius: 10px;overflow: hidden;margin: 0;border: 1px solid rgba(232, 232, 232, 1);}
.prompt-preview-thumb img {width: 100%;height: 100%;object-fit: cover;}
.prompt-preview-remove {position: absolute;top: 2px;right: 2px;width: 18px;height: 18px;border-radius: 50%;background: rgba(0,0,0,0.55);color: #fff;font-size: 11px;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.prompt-preview-loading {position: absolute;inset: 0;display: flex;align-items: center;justify-content: center;background: rgba(255,255,255,0.7);font-size: 12px;}
.prompt-file-chip {display: inline-flex;align-items: center;gap: 6px;border: 1px solid rgba(255, 255, 255, 1);background: rgba(255, 255, 255, 0.24);padding: 8px 10px;border-radius: 20px;font-size: 14px;color: rgba(0, 0, 0, 1);font-weight: 600;box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);}
.prompt-file-chip.uploading {opacity: 0.7;}
.prompt-file-chip.error {border-color: rgba(212, 78, 82, 0.45);color: rgba(212, 78, 82, 1);}
.prompt-file-name {max-width: 140px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.prompt-file-size {font-size: 12px;color: rgba(131, 131, 131, 1);font-weight: 500;}
.prompt-submit-ready.btn.btn-primaryx {box-shadow: 0 8px 24px rgba(212, 78, 82, 0.28);}
.home-chat-composer-form {margin: 0;}
.ws-credits-banner {margin: 0 0 10px;padding: 10px 14px;border-radius: 10px;background: rgba(212, 78, 82, 0.08);border: 1px solid rgba(212, 78, 82, 0.18);color: rgba(0, 0, 0, 1);font-size: 14px;font-weight: 500;}
.ws-credits-banner button {background: none;border: 0;color: rgba(212, 78, 82, 1);font-weight: 700;cursor: pointer;text-decoration: underline;padding: 0;margin-left: 4px;}

/* ===== Active home / project chat ===== */
.main-content-section:has(.chat-active),
.main-content-section:has(.compare-chat-page) {display: flex;flex-direction: column;min-height: calc(100vh - 40px);}
.header-dashboard-content-wrapper.chat-active {margin: 1rem auto 0;max-width: 1200px;width: 100%;padding: 0 20px 20px;flex: 1;min-height: 0;display: flex;flex-direction: column;}
.app-home-chat {display: flex;flex-direction: column;flex: 1;min-height: 0;}
.app-home-chat-top {display: flex;align-items: center;justify-content: space-between;gap: 12px;margin-bottom: 12px;flex-shrink: 0;}
.home-new-chat-btn {padding: 8px 14px;font-size: 14px;border-radius: 8px;min-width: auto;}
.home-saved-badge {color: rgba(131, 131, 131, 1);font-size: 13px;font-weight: 500;}
.app-home-messages {flex: 1;min-height: 0;overflow-y: auto;padding: 4px 0 16px;}
.app-home-messages-inner {margin: 0 auto;width: 100%;}
.app-home-composer-wrap {flex-shrink: 0;padding-top: 8px;}
.app-home-loading,
.compare-chat-loading,
.app-page-loader {display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 12px;min-height: 100vh;text-align: center;padding: 4rem 1rem;color: rgba(131, 131, 131, 1);font-weight: 600;background: #f7f7f8;}
.app-page-loader .fa {font-size: 28px;color: rgba(212, 78, 82, 1);}

.home-msg {margin: 0 0 1.25rem;}
.home-msg-user {display: flex;flex-direction: column;align-items: flex-end;}
.home-msg-bubble {background: rgba(212, 78, 82, 1);color: #fff;padding: 12px 16px;border-radius: 18px 18px 4px 18px;max-width: min(720px, 88%);font-size: 16px;font-weight: 500;line-height: 1.55;word-break: break-word;white-space: pre-wrap;box-shadow: 0 8px 24px rgba(212, 78, 82, 0.18);}
.home-msg-user-quote {margin-bottom: 14px;padding: 12px 14px;border-radius: 14px;background: rgba(212, 78, 82, 0.08);border: 1px solid rgba(212, 78, 82, 0.14);}
.home-msg-user-quote-label {display: block;font-size: 11px;font-weight: 700;text-transform: uppercase;letter-spacing: .05em;color: rgba(212, 78, 82, 1);margin-bottom: 6px;}
.home-msg-user-quote p {margin: 0;font-size: 15px;line-height: 1.55;color: rgba(40, 40, 40, 1);white-space: pre-wrap;word-break: break-word;}
.ws-design-prompt {margin-bottom: 14px;padding: 12px 14px;border-radius: 14px;background: rgba(212, 78, 82, 0.08);border: 1px solid rgba(212, 78, 82, 0.14);}
.ws-design-prompt-label {display: block;font-size: 11px;font-weight: 700;text-transform: uppercase;letter-spacing: .05em;color: rgba(212, 78, 82, 1);margin-bottom: 6px;}
.ws-design-prompt-text {margin: 0;font-size: 15px;line-height: 1.55;color: rgba(40, 40, 40, 1);white-space: pre-wrap;word-break: break-word;}
.home-msg-time {margin-top: 6px;font-size: 12px;color: rgba(131, 131, 131, 1);font-weight: 500;}
.home-msg-assistant {background: rgba(255, 255, 255, 1);border: 1px solid rgba(238, 238, 238, 1);border-radius: 14px;padding: 16px 18px;box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);}
.home-msg-assistant-head {display: flex;align-items: center;gap: 8px;color: rgba(0, 0, 0, 1);font-size: 15px;font-weight: 700;margin-bottom: 10px;}
.home-msg-assistant-head .fa {color: rgba(212, 78, 82, 1);}
.home-msg-assistant-body {color: rgba(40, 40, 40, 1);font-size: 15px;line-height: 1.65;}
.home-msg-assistant-body p {font-size: 15px;color: rgba(40, 40, 40, 1);}
.home-msg-lead {font-weight: 600;margin-bottom: 10px;}
.home-msg-hook {margin-top: 12px;padding: 12px 14px;border-radius: 10px;background: rgba(212, 78, 82, 0.06);border: 1px solid rgba(212, 78, 82, 0.12);}
.home-msg-action {margin-top: 14px;padding: 8px 16px;font-size: 14px;border-radius: 8px;min-width: auto;}
.home-platform-choice {display: flex;flex-wrap: wrap;gap: 10px;margin-top: 14px;}
.home-platform-btn {display: inline-flex;align-items: center;gap: 8px;}
.ws-canvas-published-link {align-items: center;flex-wrap: wrap;}
.ws-canvas-published-link a {color: rgba(212, 78, 82, 1);font-weight: 600;word-break: break-all;}
.ws-canvas-published-copy {flex: 1;min-width: 220px;}
.ws-canvas-publish-visit {display: inline-flex;align-items: center;justify-content: center;padding: 6px 12px;border-radius: 8px;background: rgba(26, 122, 58, 1);color: #fff !important;font-size: 12px;font-weight: 700;text-decoration: none !important;white-space: nowrap;}
.ws-canvas-publish-visit:hover {opacity: 0.92;color: #fff !important;}
.publish-current-url {margin: 8px 0 0;font-size: 12px;color: rgba(110, 110, 110, 1);word-break: break-all;}
.publish-current-url a {color: rgba(212, 78, 82, 1);font-weight: 600;}
.home-msg-checkpoint {display: flex;align-items: center;gap: 8px;margin-top: 12px;font-size: 13px;color: rgba(57, 190, 97, 1);font-weight: 600;}
.home-msg-project {display: flex;align-items: flex-start;gap: 8px;margin-top: 12px;padding: 10px 12px;border-radius: 10px;background: rgba(251, 251, 251, 1);border: 1px solid rgba(232, 232, 232, 1);font-size: 14px;}
.home-msg-project a {color: rgba(212, 78, 82, 1);font-weight: 600;text-decoration: underline;}
.home-feature-list {margin: 0;padding: 0;list-style: none;}
.home-feature-list li {padding: 12px 0;border-top: 1px solid rgba(238, 238, 238, 1);}
.home-feature-list li:first-child {border-top: 0;padding-top: 0;}
.home-feature-priority {display: inline-block;margin-left: 8px;padding: 2px 8px;border-radius: 999px;background: rgba(212, 78, 82, 0.1);color: rgba(212, 78, 82, 1);font-size: 11px;font-weight: 700;text-transform: uppercase;}
.home-formatted-answer p {margin: 0 0 10px;}
.home-formatted-answer p:last-child {margin-bottom: 0;}
.home-answer-list {margin: 0 0 10px 1.2rem;padding: 0;}
.home-msg-planning .home-msg-assistant-head {margin-bottom: 0;}

/* ===== Build ready options (post-build chat menu) ===== */
.build-ready-options {background: rgba(255, 250, 250, 1);border-color: rgba(238, 220, 220, 1);}
.build-ready-options-subtitle {margin: 0 0 14px;color: rgba(100, 100, 100, 1);font-size: 14px;}
.build-ready-options-list {margin: 0;padding: 0;list-style: none;display: flex;flex-direction: column;gap: 10px;}
.build-ready-option {display: flex;align-items: center;gap: 12px;padding: 12px 14px;border-radius: 12px;background: #fff;border: 1px solid rgba(238, 238, 238, 1);}
.build-ready-option-highlight {padding: 14px;}
.build-ready-option-apk {background: rgba(255, 245, 245, 1);border-color: rgba(212, 78, 82, 0.28);}
.build-ready-option-advisor {background: rgba(245, 252, 247, 1);border-color: rgba(57, 190, 97, 0.28);}
.build-ready-option-icon {flex-shrink: 0;width: 40px;height: 40px;display: inline-flex;align-items: center;justify-content: center;border-radius: 10px;background: rgba(212, 78, 82, 0.1);color: rgba(212, 78, 82, 1);font-size: 18px;}
.build-ready-option-icon-green {background: rgba(57, 190, 97, 0.12);color: rgba(57, 190, 97, 1);}
.build-ready-option-copy {flex: 1;min-width: 0;}
.build-ready-option-copy strong {display: block;font-size: 14px;font-weight: 700;color: rgba(0, 0, 0, 1);margin-bottom: 2px;}
.build-ready-option-copy p {margin: 0;font-size: 13px;line-height: 1.45;color: rgba(100, 100, 100, 1);}
.build-ready-option-btn {flex-shrink: 0;display: inline-flex;align-items: center;gap: 6px;padding: 8px 14px;border-radius: 8px;font-size: 13px;font-weight: 700;cursor: pointer;white-space: nowrap;transition: background .15s, border-color .15s, color .15s;}
.build-ready-option-btn .fa-arrow-right {font-size: 11px;}
.build-ready-option-btn:disabled {opacity: .7;cursor: not-allowed;}
.build-ready-option-btn-outline {border: 1px solid rgba(212, 78, 82, 0.35);background: #fff;color: rgba(212, 78, 82, 1);}
.build-ready-option-btn-outline:hover:not(:disabled) {background: rgba(212, 78, 82, 0.06);}
.build-ready-option-btn-solid {border: 1px solid rgba(212, 78, 82, 1);background: rgba(212, 78, 82, 1);color: #fff;}
.build-ready-option-btn-solid:hover:not(:disabled) {background: rgba(190, 60, 64, 1);border-color: rgba(190, 60, 64, 1);}
.build-ready-option-btn-outline-green {border: 1px solid rgba(57, 190, 97, 0.45);background: #fff;color: rgba(57, 190, 97, 1);}
.build-ready-option-btn-outline-green:hover:not(:disabled) {background: rgba(57, 190, 97, 0.08);}
.build-ready-document-content {margin: 0;white-space: pre-wrap;word-break: break-word;font-family: inherit;font-size: 13px;line-height: 1.55;color: rgba(40, 40, 40, 1);max-height: 420px;overflow: auto;background: rgba(255, 255, 255, 0.85);padding: 12px 14px;border-radius: 8px;border: 1px solid rgba(238, 238, 238, 1);}
.build-ready-document-pdf-note {margin: 0 0 12px;font-size: 14px;color: rgba(60, 60, 60, 1);}
.build-ready-document-download-btn {display: inline-flex;align-items: center;gap: 8px;padding: 10px 16px;border-radius: 8px;border: 1px solid rgba(212, 78, 82, 0.35);background: #fff;color: rgba(212, 78, 82, 1);font-size: 14px;font-weight: 700;cursor: pointer;transition: background .15s;}
.build-ready-document-download-btn:hover {background: rgba(212, 78, 82, 0.06);}
.ws-tools-code-btn-locked {opacity: 0.85;}
.ws-canvas-download-blocked {background: rgba(255, 248, 240, 1);border-color: rgba(255, 193, 120, 0.45);color: rgba(120, 80, 20, 1);}

/* ===== Compare chat workspace ===== */
.compare-chat-page {display: flex;gap: 0;min-height: calc(100vh - 60px);margin: -1rem -10px 0;background: rgba(247, 247, 248, 1);border-radius: 16px;overflow: hidden;border: 1px solid rgba(232, 232, 232, 1);}
.compare-chat-sidebar {width: 280px;flex-shrink: 0;background: rgba(255, 255, 255, 1);border-right: 1px solid rgba(232, 232, 232, 1);display: flex;flex-direction: column;min-height: 0;}
.compare-chat-sidebar-head {padding: 16px;border-bottom: 1px solid rgba(238, 238, 238, 1);}
.compare-chat-brand {display: flex;align-items: center;gap: 8px;color: rgba(0, 0, 0, 1);font-weight: 700;font-size: 16px;margin-bottom: 12px;}
.compare-chat-brand-mark {width: 28px;height: 28px;display: inline-flex;align-items: center;justify-content: center;border-radius: 8px;background: rgba(212, 78, 82, 0.1);color: rgba(212, 78, 82, 1);font-size: 14px;}
.compare-chat-new-btn {width: 100%;padding: 8px 12px;font-size: 14px;border-radius: 8px;}
.compare-chat-usage {margin: 12px;padding: 12px;border-radius: 10px;background: rgba(251, 251, 251, 1);border: 1px solid rgba(232, 232, 232, 1);font-size: 13px;color: rgba(40, 40, 40, 1);}
.compare-chat-usage .plan-label {display: inline-block;font-weight: 700;margin-right: 6px;color: rgba(212, 78, 82, 1);}
.compare-chat-usage.pro .plan-label {color: rgba(57, 190, 97, 1);}
.compare-chat-upgrade-btn {margin-top: 8px;width: 100%;padding: 6px 10px;font-size: 13px;border-radius: 8px;}
.compare-chat-sidebar-section {padding: 12px 12px 0;overflow: hidden;}
.compare-chat-sidebar-section h4 {font-size: 11px;text-transform: uppercase;letter-spacing: 0.06em;color: rgba(131, 131, 131, 1);margin: 0 0 8px;font-weight: 700;}
.compare-chat-list {flex: 1;overflow-y: auto;padding-bottom: 12px;min-height: 0;}
.compare-chat-nav-item {display: block;width: 100%;text-align: left;padding: 10px 12px;border-radius: 8px;border: 1px solid transparent;background: transparent;color: rgba(40, 40, 40, 1);font-size: 14px;font-weight: 500;cursor: pointer;transition: 0.2s;}
.compare-chat-nav-item:hover,
.compare-chat-row.active .compare-chat-nav-item,
.compare-chat-nav-item.active {background: rgba(212, 78, 82, 0.08);border-color: rgba(212, 78, 82, 0.14);color: rgba(212, 78, 82, 1);}
.compare-chat-row {display: flex;align-items: center;gap: 4px;}
.compare-chat-row .compare-chat-nav-item {flex: 1;min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.compare-chat-delete {width: 28px;height: 28px;border-radius: 6px;border: 0;background: transparent;color: rgba(131, 131, 131, 1);font-size: 18px;line-height: 1;cursor: pointer;flex-shrink: 0;}
.compare-chat-delete:hover {background: rgba(212, 78, 82, 0.1);color: rgba(212, 78, 82, 1);}
.compare-chat-empty {font-size: 13px;color: rgba(131, 131, 131, 1);padding: 4px 8px 12px;}
.compare-chat-sidebar-footer {margin-top: auto;padding: 12px;border-top: 1px solid rgba(238, 238, 238, 1);display: flex;flex-direction: column;gap: 8px;}
.compare-chat-user {font-size: 13px;color: rgba(131, 131, 131, 1);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.compare-chat-main {flex: 1;display: flex;flex-direction: column;min-width: 0;min-height: 0;background: rgba(247, 247, 248, 1);}
.compare-chat-main-header {display: flex;align-items: center;justify-content: space-between;gap: 12px;padding: 16px 20px 0;flex-shrink: 0;}
.compare-chat-main-header h1 {font-size: 22px;font-weight: 700;color: rgba(0, 0, 0, 1);margin: 0;}
.compare-chat-plan-badge {padding: 4px 10px;border-radius: 999px;background: rgba(212, 78, 82, 0.1);color: rgba(212, 78, 82, 1);font-size: 12px;font-weight: 700;}
.model-bar {display: flex;align-items: center;justify-content: space-between;gap: 12px;padding: 12px 20px;flex-wrap: wrap;flex-shrink: 0;}
.model-bar-free {background: rgba(255, 255, 255, 1);border-bottom: 1px solid rgba(238, 238, 238, 1);margin: 8px 20px 0;border-radius: 12px;border: 1px solid rgba(232, 232, 232, 1);}
.model-bar .free-badge {font-size: 12px;font-weight: 700;color: rgba(212, 78, 82, 1);text-transform: uppercase;}
.model-bar .free-hint {font-size: 13px;color: rgba(131, 131, 131, 1);}
.model-bar .upgrade-link {border: 0;background: none;color: rgba(212, 78, 82, 1);font-weight: 700;cursor: pointer;font-size: 13px;}
.model-bar-left {display: flex;align-items: center;gap: 10px;}
.model-bar .super-fiesta {border: 1px solid rgba(232, 232, 232, 1);background: #fff;padding: 8px 12px;border-radius: 999px;font-size: 13px;font-weight: 600;cursor: pointer;}
.model-bar .super-fiesta.on {background: rgba(212, 78, 82, 1);border-color: rgba(212, 78, 82, 1);color: #fff;}
.model-toggles {display: flex;flex-wrap: wrap;gap: 8px;}
.model-chip {border: 1px solid rgba(232, 232, 232, 1);background: #fff;padding: 7px 12px;border-radius: 999px;font-size: 13px;font-weight: 600;cursor: pointer;display: inline-flex;align-items: center;gap: 6px;}
.model-chip.on {border-color: var(--c, rgba(212, 78, 82, 1));box-shadow: inset 0 0 0 1px var(--c, rgba(212, 78, 82, 1));color: rgba(0,0,0,1);}
.model-chip.locked {opacity: 0.45;cursor: not-allowed;}
.model-chip .pro-tag {font-size: 10px;font-weight: 800;color: rgba(212, 78, 82, 1);}
.compare-chat-error {margin: 0 20px;padding: 10px 14px;border-radius: 10px;background: rgba(212, 78, 82, 0.08);border: 1px solid rgba(212, 78, 82, 0.2);color: rgba(212, 78, 82, 1);font-size: 14px;font-weight: 600;}
.compare-view {flex: 1;overflow-y: auto;padding: 16px 20px;min-height: 0;}
.compare-empty {max-width: 720px;margin: 2rem auto;text-align: center;padding: 2rem;background: #fff;border: 1px solid rgba(238, 238, 238, 1);border-radius: 16px;}
.compare-empty h2 {font-size: 24px;font-weight: 700;color: rgba(0, 0, 0, 1);margin: 0 0 10px;}
.compare-empty p {font-size: 15px;color: rgba(131, 131, 131, 1);}
.compare-empty .empty-models {display: flex;flex-wrap: wrap;justify-content: center;gap: 8px;margin-top: 16px;}
.compare-empty .empty-models span {padding: 6px 12px;border-radius: 999px;border: 1px solid rgba(232, 232, 232, 1);background: #fff;font-size: 13px;font-weight: 600;}
.compare-view .turn {margin-bottom: 1.5rem;}
.compare-view .user-bubble {max-width: min(720px, 90%);margin-left: auto;margin-bottom: 12px;background: rgba(212, 78, 82, 1);color: #fff;padding: 12px 16px;border-radius: 18px 18px 4px 18px;}
.compare-view .user-bubble .role-label {display: block;font-size: 11px;opacity: 0.8;margin-bottom: 4px;text-transform: uppercase;letter-spacing: 0.04em;}
.compare-view .assistant-grid {display: grid;gap: 12px;}
.compare-view .assistant-card {background: #fff;border: 1px solid rgba(238, 238, 238, 1);border-top: 3px solid rgba(212, 78, 82, 1);border-radius: 12px;overflow: hidden;box-shadow: 0 8px 24px rgba(0,0,0,0.04);}
.compare-view .assistant-card header {padding: 10px 14px;border-bottom: 1px solid rgba(238, 238, 238, 1);font-size: 13px;font-weight: 700;}
.compare-view .assistant-body {padding: 14px;font-size: 14px;line-height: 1.6;color: rgba(40, 40, 40, 1);}
.compare-view .loading-row {text-align: center;padding: 1rem;color: rgba(131, 131, 131, 1);font-weight: 600;}
.compare-view .pulse {animation: chatPulse 1.2s ease-in-out infinite;}
@keyframes chatPulse {0%,100%{opacity:0.45;}50%{opacity:1;}}
.compare-chat-composer {flex-shrink: 0;padding: 0 20px 20px;}
.compare-chat-composer-hint {margin: 8px 4px 0;font-size: 12px;color: rgba(131, 131, 131, 1);}
.upgrade-modal-root .modal-content {border-radius: 16px !important;overflow: hidden;}
.upgrade-modal-content .upgrade-logo-mark {width: 48px;height: 48px;background: rgba(212, 78, 82, 0.1);color: rgba(212, 78, 82, 1);}
.upgrade-features li {padding: 6px 0;font-size: 15px;}
.upgrade-features li::before {content: "✓ ";color: rgba(212, 78, 82, 1);font-weight: 700;}

.onboarding-role-hint {color: rgba(131, 131, 131, 1);font-size: 14px;font-weight: 500;line-height: 1.5;margin: 0 0 4px;}
.onboarding-role-list,
.profile-role-list {display: flex;flex-wrap: wrap;gap: 10px;list-style: none;margin: 12px 0 0;padding: 0;}
.onboarding-role-list li,
.profile-role-list li {margin: 0;}
.onboarding-role-chip,
.profile-role-chip {display: inline-flex;align-items: center;justify-content: center;border: 1px solid rgba(210, 210, 210, 1);background: #fff;color: rgba(40, 40, 40, 1);padding: 8px 14px;border-radius: 999px;font-size: 14px;font-weight: 600;line-height: 1.3;cursor: pointer;transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;}
.onboarding-role-chip:hover:not(:disabled),
.profile-role-chip:hover:not(:disabled) {border-color: rgba(212, 78, 82, 0.5);}
.onboarding-role-chip.active,
.profile-role-chip.active {border: 2px solid rgba(212, 78, 82, 1);background: rgba(212, 78, 82, 0.08);color: rgba(212, 78, 82, 1);box-shadow: 0 0 0 1px rgba(212, 78, 82, 1);}
.onboarding-role-chip:disabled,
.profile-role-chip:disabled {opacity: 0.6;cursor: not-allowed;}

/* ===== Build workspace (Continue building) ===== */
body.app-body .main-content-wrapper > header {position: static;width: auto;z-index: auto;top: auto;left: auto;right: auto;}
body.app-body:has(.workspace-active) .main-content {overflow: hidden;}
body.app-body:has(.workspace-active) .main-content-wrapper {display: flex;flex-direction: column;overflow: hidden;padding: 12px 16px;height: 100%;}
body.app-body:has(.workspace-active) main {padding: 0;flex: 1;min-height: 0;overflow: hidden;display: flex;flex-direction: column;}
body.app-body:has(.workspace-active) .main-content-section {flex: 1;min-height: 0;overflow: hidden;display: flex;flex-direction: column;}
body.app-body:has(.workspace-active) .header-dashboard-content-wrapper.chat-active {margin: 0;max-width: none;width: 100%;padding: 0;}
.header-dashboard-content-wrapper.workspace-active {margin: 0;max-width: none;width: 100%;padding: 0;flex: 1;min-height: 0;display: flex;flex-direction: column;overflow: hidden;}
.app-workspace-main {flex: 1;min-height: 0;display: flex;flex-direction: column;width: 100%;overflow: hidden;}
.app-workspace {flex: 1;min-height: 0;display: flex;flex-direction: column;background: rgba(247, 247, 248, 1);border-radius: 14px;overflow: hidden;border: 1px solid rgba(232, 232, 232, 1);}
.app-workspace--chat-mode {background: transparent;border: 0;border-radius: 0;overflow: visible;}
.app-workspace-chat-only {overflow: hidden;}
@media (min-width: 992px) {
  body.app-body:has(.workspace-active) .main-content-wrapper > header {display: none;}
}
.ws-topbar {display: flex;align-items: center;justify-content: space-between;gap: 16px;padding: 14px 18px;background: #fff;border-bottom: 1px solid rgba(238, 238, 238, 1);flex-shrink: 0;}
.ws-topbar-left {display: flex;align-items: center;gap: 14px;min-width: 0;flex: 1;}
.ws-project-name {margin: 0;font-size: 18px;font-weight: 700;color: rgba(0, 0, 0, 1);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 320px;}
.ws-progress {flex: 1;max-width: 220px;height: 8px;background: rgba(232, 232, 232, 1);border-radius: 999px;overflow: hidden;}
.ws-progress-bar {height: 100%;background: rgba(212, 78, 82, 1);border-radius: 999px;transition: width 0.3s ease;}
.ws-progress-label {font-size: 13px;font-weight: 600;color: rgba(100, 100, 100, 1);white-space: nowrap;}
.ws-topbar-right {display: flex;align-items: center;gap: 8px;flex-shrink: 0;}
.ws-credits-pill {font-size: 12px;font-weight: 600;padding: 6px 10px;border-radius: 999px;background: rgba(212, 78, 82, 0.08);color: rgba(212, 78, 82, 1);}
.ws-topbar-btn {border: 1px solid rgba(232, 232, 232, 1);background: #fff;color: rgba(40, 40, 40, 1);padding: 8px 14px;border-radius: 8px;font-size: 13px;font-weight: 600;cursor: pointer;}
.ws-topbar-btn.ghost {background: transparent;}
.ws-topbar-btn.primary {background: rgba(212, 78, 82, 1);border-color: rgba(212, 78, 82, 1);color: #fff;}
.ws-topbar-btn.primary:disabled {opacity: 0.45;cursor: not-allowed;}
.ws-body {display: grid;grid-template-columns: minmax(300px, 1fr) minmax(340px, 1.15fr);flex: 1;min-height: 0;overflow: hidden;}
.ws-body--chat-mode {display: flex;flex-direction: column;grid-template-columns: none;}
.ws-chat-home {flex: 1;min-height: 0;display: flex;flex-direction: column;overflow: hidden;}
.ws-chat-home .app-home-chat {flex: 1;min-height: 0;}
.ws-canvas-deferred {display: none !important;}
.ws-tasks {display: flex;flex-direction: column;gap: 12px;padding: 16px;background: #fff;border-right: 1px solid rgba(238, 238, 238, 1);min-height: 0;}
.ws-tasks-version {display: flex;flex-direction: column;gap: 4px;}
.ws-tasks-label {font-size: 12px;font-weight: 700;text-transform: uppercase;color: rgba(130, 130, 130, 1);}
.ws-tasks-status {font-size: 14px;font-weight: 600;color: rgba(0, 0, 0, 1);}
.ws-tasks-status.working {color: rgba(212, 78, 82, 1);}
.ws-new-task-btn {width: 100%;padding: 10px 12px;border: 1px dashed rgba(212, 78, 82, 0.35);background: rgba(212, 78, 82, 0.04);color: rgba(212, 78, 82, 1);border-radius: 8px;font-weight: 600;cursor: pointer;}
.ws-tasks-meta {display: flex;flex-direction: column;gap: 6px;font-size: 13px;color: rgba(100, 100, 100, 1);}
.ws-tasks-ready {color: rgba(57, 190, 97, 1);font-weight: 600;}
.ws-tasks-footer {margin-top: auto;display: flex;flex-direction: column;gap: 8px;}
.ws-tasks-filter,
.ws-tasks-board {text-align: left;padding: 8px 10px;border: 1px solid rgba(232, 232, 232, 1);background: #fff;border-radius: 8px;font-size: 13px;cursor: pointer;}
.ws-chat {display: flex;flex-direction: column;min-height: 0;overflow: hidden;border-right: 1px solid rgba(238, 238, 238, 1);background: rgba(250, 250, 250, 1);}
.ws-chat-header {display: flex;align-items: center;justify-content: space-between;gap: 12px;padding: 12px 16px;border-bottom: 1px solid rgba(238, 238, 238, 1);font-size: 13px;font-weight: 600;color: rgba(80, 80, 80, 1);flex-shrink: 0;min-width: 0;}
.ws-chat-header-title {flex: 1;min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 15px;font-weight: 700;color: rgba(0, 0, 0, 1);}
.ws-chat-header-actions {flex-shrink: 0;}
.ws-chat-header-btn {padding: 6px 12px;border: 1px solid rgba(232, 232, 232, 1);background: #fff;border-radius: 8px;font-size: 13px;font-weight: 600;cursor: pointer;}
.ws-chat-messages {flex: 1;min-height: 0;overflow-y: auto;padding: 12px 16px;}
.ws-chat-composer {flex-shrink: 0;padding: 12px 16px 16px;border-top: 1px solid rgba(238, 238, 238, 1);background: #fff;}
.ws-chat-locked .ws-chat-messages {pointer-events: auto;opacity: 1;overflow-y: auto;}
.ws-chat-locked .ws-chat-composer,
.home-chat-composer-locked,
.app-home-composer-locked {pointer-events: none;opacity: 0.65;}
.ws-chat-locked-notice {margin: 0 0 10px;padding: 10px 12px;border-radius: 8px;background: rgba(0, 0, 0, 0.04);color: rgba(80, 80, 80, 1);font-size: 13px;font-weight: 500;}
.ws-chat-locked .ws-chat-header-btn:disabled {opacity: 0.5;cursor: not-allowed;}
.ws-chat-welcome {padding: 24px 8px;text-align: center;color: rgba(100, 100, 100, 1);}
.ws-chat-welcome h3 {margin: 0 0 8px;color: rgba(0, 0, 0, 1);}
.ws-canvas {display: flex;flex-direction: column;min-height: 0;overflow: hidden;background: #fff;}
.ws-canvas-tabs {display: flex;gap: 4px;padding: 10px 12px 0;border-bottom: 1px solid rgba(238, 238, 238, 1);flex-shrink: 0;}
.ws-canvas-tab {padding: 8px 12px;border: 0;background: transparent;font-size: 13px;font-weight: 600;color: rgba(130, 130, 130, 1);cursor: pointer;border-bottom: 2px solid transparent;}
.ws-canvas-tab.active {color: rgba(212, 78, 82, 1);border-bottom-color: rgba(212, 78, 82, 1);}
.ws-canvas-subbar {display: flex;align-items: center;justify-content: space-between;gap: 12px;padding: 10px 14px;border-bottom: 1px solid rgba(238, 238, 238, 1);flex-shrink: 0;min-width: 0;}
.ws-canvas-crumb {flex: 1;font-size: 13px;font-weight: 600;color: rgba(80, 80, 80, 1);min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.ws-canvas-actions {display: flex;gap: 8px;flex-wrap: wrap;flex-shrink: 0;}
.ws-canvas-action {padding: 6px 12px;border: 1px solid rgba(232, 232, 232, 1);background: #fff;border-radius: 8px;font-size: 12px;font-weight: 600;cursor: pointer;}
.ws-canvas-action.active {border-color: rgba(212, 78, 82, 1);color: rgba(212, 78, 82, 1);background: rgba(212, 78, 82, 0.06);}
.ws-canvas-action.primary {background: rgba(212, 78, 82, 1);border-color: rgba(212, 78, 82, 1);color: #fff;}
.ws-canvas-action.publish {background: rgba(26, 122, 58, 1);border-color: rgba(26, 122, 58, 1);color: #fff;}
.ws-canvas-action:disabled,
.ws-canvas-action.primary:disabled,
.ws-canvas-action.publish:disabled {opacity: 0.45;cursor: not-allowed;}
.ws-canvas-publish-banner {display: flex;align-items: flex-start;gap: 10px;padding: 12px 14px;background: rgba(26, 122, 58, 0.08);border-bottom: 1px solid rgba(26, 122, 58, 0.18);font-size: 13px;font-weight: 600;color: rgba(26, 90, 45, 1);flex-shrink: 0;line-height: 1.45;}
.ws-canvas-publish-banner .fa {font-size: 16px;margin-top: 1px;color: rgba(26, 122, 58, 1);}
.publish-destination-modal {z-index: 1060;}
.publish-destination-modal + .modal-backdrop {z-index: 1055;}
.publish-destination-content {border-radius: 16px;overflow: hidden;background: #fff;}
.publish-destination-lead {color: rgba(110, 110, 110, 1);font-size: 14px;font-weight: 500;line-height: 1.5;}
.publish-slug-label {display: block;margin: 18px 0 8px;font-size: 14px;font-weight: 600;color: rgba(50, 50, 50, 1);text-align: left;}
.publish-slug-row {display: flex;align-items: stretch;gap: 0;border: 1px solid rgba(232, 232, 232, 1);border-radius: 12px;overflow: hidden;background: #fff;}
.publish-slug-base {display: flex;align-items: center;padding: 10px 12px;background: rgba(246, 246, 248, 1);color: rgba(80, 80, 80, 1);font-size: 13px;font-weight: 600;white-space: nowrap;user-select: all;max-width: 58%;overflow: hidden;text-overflow: ellipsis;border-right: 1px solid rgba(232, 232, 232, 1);}
.publish-slug-input {border: 0 !important;border-radius: 0 !important;box-shadow: none !important;font-size: 14px;font-weight: 600;min-width: 0;}
.publish-slug-input:focus {outline: none;box-shadow: none !important;}
.publish-final-url {margin: 12px 0 0;font-size: 13px;color: rgba(70, 70, 70, 1);line-height: 1.45;word-break: break-all;}
.publish-final-url span {color: rgba(26, 122, 58, 1);font-weight: 600;}
.publish-slug-status {min-height: 20px;margin: 8px 0 16px;font-size: 12px;font-weight: 600;color: rgba(120, 120, 120, 1);}
.publish-slug-status.is-ok {color: rgba(26, 122, 58, 1);}
.publish-slug-status.is-error {color: rgba(212, 78, 82, 1);}
.publish-destination-actions {display: flex;justify-content: flex-end;gap: 10px;}
.publish-destination-actions .btn {min-width: 110px;}
@media (max-width: 640px) {
  .publish-slug-row {flex-direction: column;}
  .publish-slug-base {max-width: 100%;border-right: 0;border-bottom: 1px solid rgba(232, 232, 232, 1);white-space: normal;}
}
.ws-canvas-edit-banner {display: flex;align-items: center;justify-content: space-between;gap: 12px;padding: 10px 14px;background: rgba(212, 78, 82, 0.08);border-bottom: 1px solid rgba(212, 78, 82, 0.15);font-size: 13px;font-weight: 600;color: rgba(80, 40, 40, 1);flex-shrink: 0;}
.ws-canvas-edit-banner button {border: 0;background: transparent;color: rgba(212, 78, 82, 1);font-weight: 700;cursor: pointer;}
.ws-canvas-wireframe-wrap {display: flex;flex-direction: column;align-items: center;gap: 16px;width: 100%;}
.ws-canvas-wireframe-hint {margin: 0;font-size: 14px;color: rgba(100, 100, 100, 1);text-align: center;}
.ws-tools-panel {width: 100%;display: flex;flex-direction: column;gap: 20px;}
.ws-tools-section h4 {margin: 0 0 10px;font-size: 12px;font-weight: 700;text-transform: uppercase;letter-spacing: 0.05em;color: rgba(130, 130, 130, 1);}
.ws-tools-list {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 8px;}
.ws-tools-file {width: 100%;display: flex;align-items: flex-start;gap: 10px;padding: 12px;border: 1px solid rgba(232, 232, 232, 1);border-radius: 10px;background: #fff;cursor: pointer;text-align: left;}
.ws-tools-file:hover {border-color: rgba(212, 78, 82, 0.35);background: rgba(212, 78, 82, 0.03);}
.ws-tools-file strong {display: block;font-size: 14px;color: rgba(0, 0, 0, 1);}
.ws-tools-file small {display: block;margin-top: 4px;font-size: 12px;color: rgba(100, 100, 100, 1);font-weight: 400;}
.ws-tools-modules {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 10px;}
.ws-tools-modules li {padding: 12px;border: 1px solid rgba(238, 238, 238, 1);border-radius: 10px;background: #fff;}
.ws-tools-modules strong {display: block;font-size: 14px;margin-bottom: 4px;}
.ws-tools-modules p {margin: 0;font-size: 13px;color: rgba(100, 100, 100, 1);line-height: 1.45;}
.ws-tools-priority {display: inline-block;margin-bottom: 6px;padding: 2px 8px;border-radius: 999px;font-size: 10px;font-weight: 700;text-transform: uppercase;background: rgba(232, 232, 232, 1);color: rgba(80, 80, 80, 1);}
.ws-tools-priority.must-have {background: rgba(212, 78, 82, 0.12);color: rgba(212, 78, 82, 1);}
.ws-tools-priority.recommended {background: rgba(255, 189, 46, 0.2);color: rgba(140, 90, 0, 1);}
.ws-canvas-floatbar button.active {border-color: rgba(212, 78, 82, 1);color: rgba(212, 78, 82, 1);background: rgba(212, 78, 82, 0.06);}
.ws-canvas-floatbar button:disabled {opacity: 0.45;cursor: not-allowed;}
.ws-canvas-edit-mode .app-preview-editing .app-preview-device {outline: 2px dashed rgba(212, 78, 82, 0.55);outline-offset: 4px;}
.design-preview-shell {width: 100%;display: flex;flex-direction: column;gap: 12px;}
.design-preview-toolbar {display: flex;flex-wrap: wrap;align-items: center;gap: 10px 14px;padding: 10px 12px;background: rgba(255, 255, 255, 1);border: 1px solid rgba(232, 232, 232, 1);border-radius: 12px;}
.design-preview-toolbar-label {font-size: 12px;font-weight: 700;color: rgba(80, 80, 80, 1);text-transform: uppercase;letter-spacing: 0.04em;}
.design-preview-device-select {min-height: 36px;padding: 6px 10px;border-radius: 8px;border: 1px solid rgba(210, 210, 210, 1);font-size: 13px;font-weight: 600;background: #fff;color: rgba(30, 30, 30, 1);min-width: 200px;}
.design-preview-toolbar-size {font-size: 12px;font-weight: 600;color: rgba(120, 120, 120, 1);}
.design-preview-viewport {width: 100%;display: flex;justify-content: center;align-items: flex-start;min-height: 200px;padding: 12px 16px 24px;overflow-x: hidden;overflow-y: visible;}
.design-preview-viewport--phone {background: rgba(245, 245, 247, 1);border-radius: 16px;padding: 20px 16px;}
.design-preview-viewport--tablet {background: rgba(245, 245, 247, 1);border-radius: 16px;padding: 20px 16px;}
.design-preview-scale-slot {position: relative;flex-shrink: 0;margin: 0 auto;overflow: visible;}
.design-preview-scale-inner {position: relative;transform-origin: top left;}
.design-preview-frame {box-sizing: border-box;display: flex;justify-content: center;align-items: flex-start;flex-shrink: 0;overflow: hidden;}
.design-preview-frame--phone {background: #1a1a1a;border-radius: 32px;box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;}
.design-preview-frame--tablet {background: #2a2a2a;border-radius: 20px;box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);}
.design-preview-frame--desktop {background: rgba(245, 245, 247, 1);border-radius: 12px;border: 1px solid rgba(232, 232, 232, 1);}
.design-preview-frame--full {width: 100%;background: rgba(245, 245, 247, 1);border-radius: 12px;border: 1px solid rgba(232, 232, 232, 1);overflow: hidden;}
.design-preview-iframe {border: 0;background: #fff;display: block;flex-shrink: 0;overflow: auto;pointer-events: auto;touch-action: pan-y;}
.design-preview-iframe--phone {border-radius: 22px;}
.design-preview-iframe--tablet {border-radius: 8px;}
.design-preview-iframe--full {width: 100%;height: 72vh;min-height: 480px;border-radius: 10px;}
.ws-design-format-select {padding: 6px 10px;border: 1px solid rgba(232, 232, 232, 1);border-radius: 8px;font-size: 12px;font-weight: 600;background: #fff;cursor: pointer;}
.ws-tools-format-badge {margin-left: 8px;padding: 2px 8px;border-radius: 999px;font-size: 10px;background: rgba(212, 78, 82, 0.1);color: rgba(212, 78, 82, 1);vertical-align: middle;}
.ws-tools-empty {font-size: 14px;color: rgba(100, 100, 100, 1);line-height: 1.5;}
.ws-tools-file.active {border-color: rgba(212, 78, 82, 1);background: rgba(212, 78, 82, 0.05);}
.ws-tools-screen-btn {width: 100%;display: block;padding: 0;border: 0;background: transparent;text-align: left;cursor: pointer;}
.ws-tools-screen-btn strong {display: block;font-size: 14px;margin-bottom: 4px;}
.ws-tools-screen-btn small {display: block;font-size: 11px;color: rgba(120, 120, 120, 1);margin-bottom: 4px;}
.ws-tools-screen-btn.active strong {color: rgba(212, 78, 82, 1);}
.ws-tools-modules li:has(.ws-tools-screen-btn.active) {border-color: rgba(212, 78, 82, 1);background: rgba(212, 78, 82, 0.05);}
.ws-tools-code-section {min-height: 0;}
.ws-tools-code-head {display: flex;align-items: center;justify-content: space-between;gap: 12px;margin-bottom: 8px;}
.ws-tools-code-actions {display: flex;gap: 8px;}
.ws-tools-code-btn {padding: 4px 10px;border: 1px solid rgba(232, 232, 232, 1);border-radius: 6px;background: #fff;font-size: 12px;font-weight: 600;cursor: pointer;}
.ws-tools-code {max-height: 320px;overflow: auto;padding: 12px;border: 1px solid rgba(238, 238, 238, 1);border-radius: 10px;background: rgba(250, 250, 250, 1);font-size: 12px;line-height: 1.45;white-space: pre-wrap;word-break: break-word;}
.ws-tools-file i.fa {flex-shrink: 0;width: 18px;margin-top: 2px;color: rgba(212, 78, 82, 0.85);font-size: 16px;}
.ws-canvas-stage {flex: 1;min-height: 0;overflow: auto;padding: 16px;position: relative;background: rgba(251, 251, 251, 1);display: flex;flex-direction: column;align-items: center;}
.ws-canvas-stage > .ws-design-prompt {width: 100%;margin-left: auto;margin-right: auto;}
.ws-canvas-stage > .design-preview-shell {width: 100%;margin: 0 auto;}
.ws-canvas-stage > .ws-canvas-status,
.ws-canvas-stage > .ws-tools-panel {width: 100%;margin: 0 auto;}
.ws-canvas-status,
.ws-canvas-empty {display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 12px;min-height: 280px;text-align: center;color: rgba(100, 100, 100, 1);padding: 24px;}
.ws-canvas-building-overlay {position: absolute;inset: 0;z-index: 20;display: flex;align-items: center;justify-content: center;background: rgba(255, 255, 255, 0.82);backdrop-filter: blur(2px);}
.ws-canvas-building-overlay-inner {display: flex;flex-direction: column;align-items: stretch;gap: 12px;padding: 24px 32px;min-width: min(360px, 90vw);border-radius: 16px;background: #fff;border: 1px solid rgba(232, 232, 232, 1);box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);color: rgba(60, 60, 60, 1);font-weight: 600;}
.ws-build-progress {width: 100%;max-width: 420px;text-align: center;display: flex;flex-direction: column;align-items: center;gap: 12px;}
.ws-build-progress-indeterminate .ws-build-progress-label {font-weight: 600;font-size: 15px;color: rgba(60, 60, 60, 1);}
.ws-build-progress-spinner {width: 40px;height: 40px;border-radius: 50%;border: 3px solid rgba(232, 232, 232, 1);border-top-color: rgba(212, 78, 82, 1);animation: ws-build-spin 0.9s linear infinite;}
@keyframes ws-build-spin {to {transform: rotate(360deg);}}
.ws-build-progress-compact {max-width: 320px;}
.ws-build-progress-head {display: flex;align-items: center;justify-content: space-between;gap: 12px;margin-bottom: 10px;font-size: 14px;color: rgba(60, 60, 60, 1);}
.ws-build-progress-label {font-weight: 600;}
.ws-build-progress-screen {margin: 0;font-size: 14px;font-weight: 600;line-height: 1.4;color: rgba(212, 78, 82, 1);}
.ws-build-progress-pct {font-size: 15px;font-weight: 700;color: rgba(212, 78, 82, 1);}
.ws-build-progress-track {height: 8px;border-radius: 999px;background: rgba(232, 232, 232, 1);overflow: hidden;}
.ws-build-progress-fill {height: 100%;border-radius: 999px;background: linear-gradient(90deg, rgba(212, 78, 82, 1), rgba(230, 120, 100, 1));transition: width 0.45s ease;}
.ws-build-progress-meta {margin: 0;font-size: 12px;font-weight: 500;line-height: 1.45;color: rgba(110, 110, 110, 1);}
.ws-canvas-status .ws-build-progress {align-items: center;}
.home-msg-loading .home-msg-assistant-head {margin-bottom: 0;}
.ws-canvas-empty figure {font-size: 42px;color: rgba(212, 78, 82, 0.35);margin: 0;}
.ws-canvas-generate-btn {margin-top: 8px;}
.ws-wireframe {border: 1px solid rgba(232, 232, 232, 1);border-radius: 12px;overflow: hidden;background: #fff;min-height: 320px;}
.ws-wire-header {height: 48px;background: rgba(240, 240, 240, 1);}
.ws-wire-body {display: grid;grid-template-columns: 80px 1fr 120px;min-height: 280px;}
.ws-wire-sidebar {background: rgba(245, 245, 245, 1);border-right: 1px solid rgba(238, 238, 238, 1);}
.ws-wire-main {padding: 16px;}
.ws-wire-hero {height: 80px;background: rgba(232, 232, 232, 1);border-radius: 8px;margin-bottom: 12px;}
.ws-wire-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 8px;}
.ws-wire-grid div {height: 56px;background: rgba(238, 238, 238, 1);border-radius: 6px;}
.ws-wire-panel {padding: 12px;display: flex;flex-direction: column;gap: 8px;border-left: 1px solid rgba(238, 238, 238, 1);background: rgba(248, 248, 248, 1);}
.ws-wire-panel div {height: 40px;background: rgba(232, 232, 232, 1);border-radius: 6px;}
.ws-canvas-floatbar {display: flex;align-items: center;gap: 6px;padding: 10px 12px;border-top: 1px solid rgba(238, 238, 238, 1);background: #fff;flex-shrink: 0;flex-wrap: wrap;}
.ws-canvas-floatbar button {padding: 6px 10px;border: 1px solid rgba(232, 232, 232, 1);background: #fff;border-radius: 8px;font-size: 12px;cursor: pointer;}
.ws-canvas-floatbar button.primary {background: rgba(212, 78, 82, 1);border-color: rgba(212, 78, 82, 1);color: #fff;}
.ws-float-divider {width: 1px;height: 20px;background: rgba(232, 232, 232, 1);}
@media (max-width: 1200px) {
  .ws-body {grid-template-columns: 1fr;grid-template-rows: auto minmax(360px, 1fr);}
  .ws-chat {border-right: 0;border-bottom: 1px solid rgba(238, 238, 238, 1);max-height: 42vh;}
  .ws-canvas {min-height: 360px;}
  .design-preview-viewport {padding: 12px 8px 20px;}
  .design-preview-viewport--phone {padding: 16px 8px;}
}

/* ===== App preview (design canvas) ===== */
.app-preview {display: flex;justify-content: center;align-items: flex-start;width: 100%;--preview-accent: rgba(212, 78, 82, 1);--preview-hero: linear-gradient(180deg, rgba(212, 78, 82, 0.08) 0%, rgba(255, 255, 255, 0) 100%);}
.app-preview--healthcare {--preview-accent: #0d9488;--preview-hero: linear-gradient(180deg, rgba(13, 148, 136, 0.12) 0%, rgba(255, 255, 255, 0) 100%);}
.app-preview--dating {--preview-accent: #e11d48;--preview-hero: linear-gradient(180deg, rgba(225, 29, 72, 0.12) 0%, rgba(255, 255, 255, 0) 100%);}
.app-preview--ecommerce {--preview-accent: #ea580c;--preview-hero: linear-gradient(180deg, rgba(234, 88, 12, 0.12) 0%, rgba(255, 255, 255, 0) 100%);}
.app-preview--fintech {--preview-accent: #059669;--preview-hero: linear-gradient(180deg, rgba(5, 150, 105, 0.12) 0%, rgba(255, 255, 255, 0) 100%);}
.app-preview--logistics {--preview-accent: #2563eb;--preview-hero: linear-gradient(180deg, rgba(37, 99, 235, 0.12) 0%, rgba(255, 255, 255, 0) 100%);}
.app-preview--social {--preview-accent: #7c3aed;--preview-hero: linear-gradient(180deg, rgba(124, 58, 237, 0.12) 0%, rgba(255, 255, 255, 0) 100%);}
.app-preview--education {--preview-accent: #4f46e5;--preview-hero: linear-gradient(180deg, rgba(79, 70, 229, 0.12) 0%, rgba(255, 255, 255, 0) 100%);}
.app-preview--saas {--preview-accent: #334155;--preview-hero: linear-gradient(180deg, rgba(51, 65, 85, 0.1) 0%, rgba(255, 255, 255, 0) 100%);}
.app-preview-device {width: 100%;max-width: 420px;border-radius: 16px;overflow: hidden;border: 1px solid rgba(220, 220, 220, 1);box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);background: #fff;}
.app-preview-chrome {display: flex;align-items: center;gap: 6px;padding: 10px 14px;background: rgba(245, 245, 245, 1);border-bottom: 1px solid rgba(232, 232, 232, 1);}
.app-preview-chrome span {width: 10px;height: 10px;border-radius: 50%;background: rgba(210, 210, 210, 1);}
.app-preview-chrome span:nth-child(1) {background: rgba(255, 95, 86, 1);}
.app-preview-chrome span:nth-child(2) {background: rgba(255, 189, 46, 1);}
.app-preview-chrome span:nth-child(3) {background: rgba(39, 201, 63, 1);}
.app-preview-chrome em {margin-left: auto;font-size: 12px;font-style: normal;font-weight: 600;color: rgba(100, 100, 100, 1);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 200px;}
.app-preview-screen {display: flex;flex-direction: column;min-height: 480px;background: #fff;}
.app-preview-nav {display: flex;align-items: center;justify-content: space-between;gap: 12px;padding: 14px 16px;border-bottom: 1px solid rgba(238, 238, 238, 1);}
.app-preview-nav strong {font-size: 15px;font-weight: 700;color: rgba(0, 0, 0, 1);min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.app-preview-nav-links {display: flex;gap: 10px;font-size: 11px;font-weight: 600;color: rgba(130, 130, 130, 1);flex-shrink: 0;}
.app-preview-hero {padding: 24px 16px 20px;background: var(--preview-hero);}
.app-preview-tag {margin: 0 0 8px;font-size: 11px;font-weight: 700;text-transform: uppercase;letter-spacing: 0.04em;color: var(--preview-accent);display: flex;align-items: center;gap: 6px;}
.app-preview-tag .fa {font-size: 12px;}
.app-preview-hero h3 {margin: 0 0 8px;font-size: 19px;line-height: 1.35;font-weight: 700;color: rgba(0, 0, 0, 1);}
.app-preview-subline {margin: 0 0 14px;font-size: 12px;line-height: 1.45;color: rgba(100, 100, 100, 1);}
.app-preview-cta {padding: 10px 16px;border: 0;border-radius: 8px;background: var(--preview-accent);color: #fff;font-size: 13px;font-weight: 700;cursor: pointer;}
.app-preview-body {padding: 0 16px 20px;}
.app-preview-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 10px;}
.app-preview-grid-compact {margin-top: 10px;}
.app-preview-card {padding: 12px;border: 1px solid rgba(238, 238, 238, 1);border-radius: 10px;background: rgba(250, 250, 250, 1);}
.app-preview-card .fa {display: block;margin-bottom: 8px;color: var(--preview-accent);font-size: 14px;}
.app-preview-card h4 {margin: 0 0 6px;font-size: 13px;font-weight: 700;color: rgba(0, 0, 0, 1);}
.app-preview-card p {margin: 0;font-size: 12px;line-height: 1.45;color: rgba(100, 100, 100, 1);}
.app-preview-card-featured {grid-column: 1 / -1;background: color-mix(in srgb, var(--preview-accent) 6%, white);border-color: color-mix(in srgb, var(--preview-accent) 22%, white);}
.app-preview-list {display: flex;flex-direction: column;gap: 8px;}
.app-preview-list-item {display: flex;gap: 12px;align-items: flex-start;padding: 12px;border: 1px solid rgba(238, 238, 238, 1);border-radius: 10px;background: #fff;}
.app-preview-list-item .fa {margin-top: 2px;color: var(--preview-accent);font-size: 16px;flex-shrink: 0;}
.app-preview-list-item h4 {margin: 0 0 4px;font-size: 13px;font-weight: 700;}
.app-preview-list-item p {margin: 0;font-size: 12px;line-height: 1.45;color: rgba(100, 100, 100, 1);}

/* ===== Mobile/tablet scroll fix ===== */
/* The desktop layout locks the viewport height and hides overflow, relying on
   inner panels for scrolling. On touch devices that leaves content unreachable,
   so below 1200px we let the page flow and scroll naturally. */
@media (max-width: 1199px) {
  html, body {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-content,
  .main-content-wrapper {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body.app-body:has(.workspace-active) .main-content,
  body.app-body:has(.workspace-active) .main-content-wrapper,
  body.app-body:has(.workspace-active) main,
  body.app-body:has(.workspace-active) .main-content-section,
  body.app-body:has(.workspace-active) .header-dashboard-content-wrapper.workspace-active,
  body.app-body:has(.workspace-active) .app-workspace-main,
  body.app-body:has(.workspace-active) .app-workspace,
  body.app-body:has(.project-main-page-wrapper) .main-content-wrapper,
  body.app-body:has(.project-main-page-wrapper) main,
  body.app-body:has(.project-main-page-wrapper) .main-content-section,
  body.app-body:has(.project-main-page-wrapper) .project-main-page-wrapper {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .project-page-body {
    overflow: visible;
  }

  .compare-chat-page,
  .main-content-section:has(.compare-chat-page) {
    min-height: 0;
  }
}