/* ═══════════════════════════════════════════════════════════════════════════════
 *
 *  EL MATAJER - ADMIN DASHBOARD STYLESHEET
 *  Premium Dark Theme Dashboard
 *  Last Updated: 2026-05-11
 *
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 *  📑 TABLE OF CONTENTS:
 *  ───────────────────────────────────────────────────────────────────────────
 *
 *  🔷 SECTION A: FOUNDATIONS
 *  ├─ A1. Fonts & Imports
 *  ├─ A2. CSS Variables & Design Tokens (:root)
 *  ├─ A3. Theme Variables (Dark / Light Mode)
 *  └─ A4. Bootstrap Overrides & Global Resets
 *
 *  🔷 SECTION B: LAYOUT COMPONENTS
 *  ├─ B1. Sidebar (base styles + clean stable version)
 *  ├─ B2. Header / Topbar
 *  ├─ B3. Page Content & Wrappers
 *  └─ B4. Mobile & Responsive
 *
 *  🔷 SECTION C: UI COMPONENTS
 *  ├─ C1. Cards & Surfaces
 *  ├─ C2. Forms & Inputs
 *  ├─ C3. Buttons & Interactions
 *  ├─ C4. Tables & DataTables
 *  ├─ C5. Dropdowns & Modals
 *  ├─ C6. Badges & Notifications
 *  └─ C7. Dashboard Widgets
 *
 *  🔷 SECTION D: FEATURE PAGES
 *  ├─ D1. Auth Pages (Login / Register)
 *  ├─ D2. POS System
 *  ├─ D3. Settings Pages
 *  └─ D4. Error Pages
 *
 *  🔷 SECTION E: PREMIUM COMPONENTS
 *  ├─ E1. Premium Sidebar (Floating Design)
 *  ├─ E1-A. Premium Topbar
 *  ├─ E2. Dashboard Design System
 *  ├─ E3. Merged Admin Components
 *  └─ E4. Role-Based / Enterprise Components
 *
 *  🔷 SECTION F: UTILITIES & EFFECTS
 *  ├─ F1. Animations & Keyframes
 *  ├─ F2. Tooltips & Popovers
 *  ├─ F3. Scrollbars & Custom Styling
 *  └─ F4. RTL Support
 *
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens: moved to tokens.css (loaded before this file) ── */
/* All :root variables, dark mode, and light mode overrides live in tokens.css */

*:not(.fa):not(.fas):not(.far):not(.fal):not(.fad):not(.fab):not([class*="fa-"]):not(.icofont):not(.glyphicon) {
    font-family: 'Zain', sans-serif !important;
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

.direction-ltr {
  direction: ltr;
}

.direction-rtl {
  direction: rtl;
}

.justify-items-end {
  justify-items: end !important;
}

.justify-items-center {
  justify-items: center !important;
}

.fs-7 {
  font-size: 14px !important;
}

.fs-8 {
  font-size: 12px !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-500 {
  font-weight: 500 !important;
}

.w-100vw {
  width: 100vw;
}

.h-100vh {
  height: 100vh;
}

.h-fit-content {
  height: fit-content;
}

.box-shadow {
  box-shadow: 0 6px 30px rgb(182 186 203 / 30%);
}

.d-content {
  display: contents;
}

.object-fit-cover {
  object-fit: cover;
  object-position: center;
}

.object-fit-contain {
  object-fit: contain;
}

h1,

h2,

h3,

h4,

h5,

h6,

p {
  margin: 0;
}

.btn-rounded {
  border-radius: 30px;
}

.form-group,

.form-check {
  margin-bottom: 0.8rem;
}

/* Suppress browser default outline only for pointer/touch interactions.
   Keyboard navigation (:focus-visible) retains a visible focus ring — a11y fix. */
*:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

input::placeholder {
  font-size: 14px;
}

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

li {
  list-style: none;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary);
  color: #fff;
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--bs-primary);
  color: #fff;
  border-color: var(--bs-primary);
}

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: #f15a1f20 !important;
  box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0 var(--bs-accordion-border-color);
}

.form-switch-success .form-check-input:checked {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}

.form-check-input-secondary:checked {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.cursor-pointer {
  cursor: pointer;
}

.dn {
  display: none;
}

.hw-70 {
  height: 70px;
}

.h-40 {
  height: 40px;
}

.overflow-auto {
  overflow: auto;
}

.loader {
  width: 20px;
  height: 20px;
  border: 2px solid var(--bs-secondary);
  border-bottom-color: transparent;
  border-radius: 10px;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Auth Pages */

.bg-primary-light {
  background-color: rgba(var(--bs-secondary-rgb), 0.25);
}

.social-list-item {
  height: 2rem;
  width: 2rem;
  line-height: calc(2rem - 0px);
  display: block;
  border-radius: 50%;
  color: var(--bs-white);
  text-align: center;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.bg-facebook {
  background-color: #1773EA;
}

.bg-google {
  background-color: #d24639;
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * 🔷 SECTION B1: SIDEBAR
 * ═══════════════════════════════════════════════════════════════════════════════ */

/*==================Sidebar new=============================*/

/* ================= SIDEBAR CLEAN STABLE VERSION ================= */

/* الأساس العام */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: var(--sidebar-width);
  min-height: 100vh;
  background: #0f172a;
  color: #f8fafc;
  padding: 16px 12px;
  z-index: var(--z-sidebar);
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  border-inline-end: 1px solid #1e293b;
  transition: width .25s ease, transform .25s ease;
  will-change: transform;
}


/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar {
  width: var(--scrollbar-width);
}
.sidebar::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15);
  border-radius: 20px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.25);
}


/*==================Sidebar=============================*/

/* Default */

.main-content {
  margin-left: var(--content-offset);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left .25s ease;
}

.main-content-rtl {
  margin-right: var(--content-offset-rtl);
  margin-left: 0;
  transition: margin-right .25s ease;
}

/* Sidebar-collapsed state — toggled via JS body class */
body.sidebar-collapsed .main-content {
  margin-left: var(--sidebar-collapsed-width);
}
body.sidebar-collapsed .main-content-rtl {
  margin-right: var(--sidebar-collapsed-width);
}
body.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed-width);
}

.page-content {
  padding: var(--space-6) var(--space-6) calc(var(--space-16) + var(--space-4));
  flex: 1;
}

/* Dashboard page */

.dashboard-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-card .card-icon {
  width: 3rem;
  height: 3rem;
  background-color: var(--bs-secondary);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--bs-white);
}

/* User Page */

.search-box {
  display: inline-block;
  padding: 0 10px;
}

.search-box .form-control {
  border-radius: 30px;
  padding-left: 40px;
}

.search-box .search-icon {
  font-size: 16px;
  position: absolute;
  left: 13px;
  top: 0;
  line-height: 38px;
}

/* Pricing Plan page*/

.theme-selection li {
  display: inline-block;
  /* margin: 10px 5px;
  width: 165px; */
}

.theme-selection li input[type=checkbox],

.theme-selection li input[type=radio] {
  display: none;
}

.theme-selection li label {
  padding: 5px;
  display: block;
  position: relative;
  cursor: pointer;
  width: 100%;
  margin: auto;
  border-radius: 5px;
}

.theme-selection li input:checked+label::before {
  content: "✓";
  transform: scale(1);
  z-index: 2;
}

.theme-selection li label::before {
  font-size: 15px;
  background-color: var(--bs-white);
  color: var(--bs-primary);
  content: "";
  display: block;
  border-radius: 50%;
  border: 1px solid var(--bs-primary);
  position: absolute;
  top: -6px;
  right: -6px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  transition-duration: 0.4s;
  transform: scale(0);
}

.theme-selection li input:checked+label img {
  z-index: -1;
  /* transition: 0.5s all ease-in-out; */
  border: 2px dotted var(--bs-primary);
}

.theme-selection li label:hover img {
  object-position: bottom;
}

.theme-selection li label img {
  width: 100%;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
  object-fit: cover;
  object-position: top;
  height: 300px;
  transition: 2s all ease-in-out;
}

.available-btn {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 5%;
}

/* Setting Page */

.settings .card-sticky-top {
  position: sticky;
  top: 80px;
  z-index: 1020;
  max-height: 78vh;
  overflow-y: auto;
}

.settings .list-item-secondary.active,
.settings .list-item-secondary.active a {
  z-index: 2;
  font-weight: 500;
  color: #FFFFFF;
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary);
}

.settings .list-item-primary.active,
.settings .list-item-primary.active a {
  z-index: 2;
  color: #FFFFFF;
  font-weight: 500;
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary);
}

.list-options {
  --bs-list-group-color: #000 !important;
}

.settings .list-group-item .tab:hover,

.settings .list-group-item .tab.active {
  color: var(--bs-white);
}

.payments .card .cod-card,

.payments .card .wallet-card {
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  display: flex;
  justify-content: space-between;
}

/* Pricing plan checkout page */

.stripe-form #card-element .__PrivateStripeElement iframe {
  height: 40px !important;
  width: 100% !important;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
  display: block;
  padding: 10px;
  margin-bottom: 16px;
}

/* Business Page */

.contact-info-modal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
}

.contact-info-item {
  border: var(--bs-border);
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 5px;
  outline: none !important;
  overflow: visible;
  padding: 1rem;
  text-align: center;
  transition: .3s;
  width: auto;
  box-shadow: var(--bs-box-shadow);
}

.contact-info-modal .contact-info-item:hover {
  background-color: #e6ecfd;
}

.contact-info-modal .contact-info-item i {
  font-size: 22px;
  margin: 5px 0;
}

#service_repeater .img-overlay,

#services_card .img-overlay,

#testimonials_info .img-overlay,

#testimonial_repeater .img-overlay {
  position: absolute;
  top: 2%;
  right: 2%;
}

#reorder_section ul.list-group li.list-group-item {
  cursor: move;
}

/* Switch On/Off */

.checkbox-switch {
  display: none;
}

.switch {
  align-items: center;
  background-color: gray;
  border-radius: 500px;
  cursor: pointer;
  display: flex;
  height: 30px;
  justify-content: space-between;
  position: relative;
  user-select: none;
  width: 60px;
}

.checkbox-switch:checked~.switch {
  background-color: var(--bs-primary);
}

.checkbox-switch:not(:checked)~.switch {
  background-color: gray;
}

.switch__left,
.switch__right {
  color: white;
  font-size: small;
  text-transform: uppercase;
}

.checkbox-switch:checked~.switch .switch__left {
  visibility: hidden;
}

.checkbox-switch:not(:checked)~.switch .switch__right {
  visibility: hidden;
}

.switch__circle {
  height: 30px;
  padding: 5px;
  position: absolute;
  transition: all 0.1s linear;
  width: 30px;
}

.switch__circle-rtl {
  height: 30px;
  padding: 5px;
  position: absolute;
  transition: all 0.1s linear;
  width: 30px;
}

.checkbox-switch:checked~.switch .switch__circle {
  left: 0;
  right: calc(100% - 30px);
}

.checkbox-switch:checked~.switch .switch__circle-rtl {
  left: calc(100% - 30px);
  right: 0;
}

.checkbox-switch:not(:checked)~.switch .switch__circle {
  left: calc(100% - 30px);
  right: 0;
}

.checkbox-switch:not(:checked)~.switch .switch__circle-rtl {
  right: calc(100% - 30px);
  left: 0;
}

.switch__circle-inner {
  background-color: white;
  border-radius: 50%;
  display: block;
  height: 100%;
  width: 100%;
}

.hw-50 {
  width: 50px;
  height: 50px;
}

.service-image {
  height: 150px;
}


/* tracking-bar-start */

.progress-barrr {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
}

.progress-step {
  text-align: center;
  position: relative;
  z-index: 1;
}

.progress-step:before,

.progress-step:after {
  background-color: var(--bs-secondary);
  content: "";
  height: 2px;
  position: absolute;
  z-index: -1;
  top: 15px;
}

.progress-step:after {
  left: 50%;
  width: 100%;
}

.progress-step:last-of-type.is-active:after {
  background-color: var(--bs-secondary);
}

.progress-step:last-of-type:after {
  left: 50%;
  width: 50%;
}

.progress-step .step-count {
  background-color: #fff;
  height: 35px;
  width: 35px;
  margin: 0 auto;
  border-radius: 50%;
  color: var(--bs-secondary);
  line-height: 35px;
  z-index: 100;
  border: 1px solid var(--bs-secondary);
  font-size: 1rem;
  font-weight: 500;
}

.progress-step.is-active~.progress-step:not(.is-active) .step-count {
  background-color: #fff;
  height: 35px;
  width: 35px;
  margin: 0 auto;
  border-radius: 50%;
  color: gray;
  line-height: 35px;
  z-index: 100;
  border: 1px solid gray;
  font-size: 1rem;
  font-weight: 500;
}

.progress-step.is-active .step-description {
  font-weight: 500;
}

.progress-step.is-active:after {
  background-color: gray;
}

.progress-step.is-active~.progress-step .step-count {
  background-color: #fff;
}

.progress-step.is-active~.progress-step:after {
  background-color: gray;
}

.step-description {
  font-size: 0.8rem;
}

@media screen and (min-width: 640px) {
  .progress-step:first-of-type:before {
    right: 50%;
    width: 50%;
  }
}

@media screen and (max-width: 640px) {
  .progress-step:first-of-type:before,
  .progress-step:last-of-type:after {
    display: none !important;
  }
}

/* RTL */

.progress-step-rtl {
  text-align: center;
  position: relative;
  z-index: 1;
}

.progress-step-rtl:before,

.progress-step-rtl:after {
  background-color: var(--bs-secondary);
  content: "";
  height: 2px;
  position: absolute;
  z-index: -1;
  top: 15px;
}

.progress-step-rtl:after {
  right: 50%;
  width: 100%;
}

.progress-step-rtl:last-of-type.is-active:after {
  background-color: var(--bs-secondary);
}

.progress-step-rtl:last-of-type:after {
  left: 50%;
  width: 50%;
}

.progress-step-rtl .step-count {
  background-color: #fff;
  height: 35px;
  width: 35px;
  margin: 0 auto;
  border-radius: 50%;
  color: var(--bs-secondary);
  line-height: 35px;
  z-index: 100;
  border: 1px solid var(--bs-secondary);
  font-size: 1rem;
  font-weight: 500;
}

.progress-step-rtl.is-active~.progress-step-rtl:not(.is-active) .step-count {
  background-color: #fff;
  height: 35px;
  width: 35px;
  margin: 0 auto;
  border-radius: 50%;
  color: gray;
  line-height: 35px;
  z-index: 100;
  border: 1px solid gray;
  font-size: 1rem;
  font-weight: 500;
}

.progress-step-rtl.is-active .step-description {
  font-weight: 500;
}

.progress-step-rtl.is-active:after {
  background-color: gray;
}

.progress-step-rtl.is-active~.progress-step-rtl .step-count {
  background-color: #fff;
}

.progress-step-rtl.is-active~.progress-step-rtl:after {
  background-color: gray;
}

@media screen and (min-width: 640px) {
  .progress-step-rtl:first-of-type:before {
    left: 50%;
    width: 50%;
  }
}

@media screen and (max-width: 640px) {
  .progress-step-rtl:first-of-type:before,
  .progress-step-rtl:last-of-type:after {
    display: none !important;
  }
}

/* tracking-bar-end */

/* FOR_ERRORS_PAGE_START */

.error-content {
  font-size: 30px;
  font-weight: bold;
}

@media (max-width:767px) {
  .error-sec-order {
    order: 2;
  }
}

/* FOR_ERRORS_PAGE_END */

/* -----------------------------------------------------------------------------

------------------------- EXTRA-CSS-BY-RAHUL ----  END -------------------------

-------------------------------------------------------------------------------- */

/* New login form */

/* New login form  start */

.login-page-img {
  width: 100%;
}

.login-form-bg-color {
  background-color: white;
}

.login-form-bottom-icon {
  gap: 5px;
}

.login-with-bottom-title {
  font-family: var(--bs-body-font-family);
  font-weight: 500;
}

.icon-btn-facebook {
  background-color: #3d5a9e !important;
  border: none !important;
}

.icon-btn-twitter {
  background-color: #1ba1f4 !important;
  border: none !important;
}

.icon-btn-google {
  background-color: #d82433 !important;
  border: none !important;
}

.dropdown-hover a:hover {
  background-color: white !important;
}

.login-imag {
  width: 120px;
  height: 120px;
}

/* New login form  End */

.dropdown-menu-language {
  position: absolute !important;
  left: -60px !important;
  top: 15px !important;
  box-shadow: 0px 0px 13px -3px rgb(0 0 0 / 10%);
}

/* admin rtl css */
.main-content-rtl {
  margin-right: 16.5rem;
}

.dropdown-toggle-rtl {
  white-space: nowrap;
}

.dropdown-toggle-rtl::after {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.accordion-button-rtl {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  font-size: 1rem;
  color: var(--bs-accordion-btn-color);
  text-align: left;
  background-color: var(--bs-accordion-btn-bg);
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: var(--bs-accordion-transition);
}

.accordion-button-rtl::after {
  flex-shrink: 0;
  width: var(--bs-accordion-btn-icon-width);
  height: var(--bs-accordion-btn-icon-width);
  margin-right: auto;
  content: "";
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-size: var(--bs-accordion-btn-icon-width);
  transition: var(--bs-accordion-btn-icon-transition);
}

.accordion-button-rtl:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: #f15a1f20 !important;
  box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0 var(--bs-accordion-border-color);
}

.input-group-rtl {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group-icon-rtl {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.breadcrumb-rtl::before {
  float: right !important;
  padding-left: var(--bs-breadcrumb-item-padding-x) !important;
  padding-right: var(--bs-breadcrumb-item-padding-x) !important;
  color: var(--bs-breadcrumb-divider-color) !important;
  content: var(--bs-breadcrumb-divider, "/") !important;
}

div.dataTables_wrapper div.dataTables_filter input {
  margin-right: 5px !important;
}

/* EXTRA-CSS-BY-KISHOR START*/

.drop-menu {
  top: 7px !important;
}

/* EXTRA-CSS-BY-KISHOR END*/

.icon-bar {
  position: fixed;
  top: 90%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 100;
  right: 2%;
}

/*=========================================================================== 
                                      POS
=============================================================================*/

/*================= pos section header start =================*/

.pos-header {
  position: sticky;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  background-color: var(--bs-white);
  box-shadow: var(--bs-box-shadow);
  padding: 5px 0px;
}

.pos-header img {
  width: 145px;
  object-fit: cover;
  object-position: center;
}

/*================= pos section search box start =================*/

.search-input {
  background-color: transparent;
  border: none;
  border-radius: 5px;
  width: 100%;
  position: relative;
}

.pos-card-input i {
  color: #c3c8da;
}

.pos-card-input {
  background-color: var(--bs-body-bg);
  display: flex;
  align-items: center;
  border: none;
  box-shadow: none;
}

.card-body .search-button {
  right: 20px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  border: none;
  padding: 15px 50px;
  border-radius: 6px;
  background-color: var(--bs-primary);
  cursor: pointer;
}

/*================= pos categorys start =================*/

.pos-categorys .scroll-wrapper {
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100%;
  height: auto;
  background-color: #fff;
  padding: 16px;
}

.pos-categorys .scroll-wrapper ul li {
  display: inline-block;
}

.pos-categorys .scroll-wrapper .cats,
.pos-categorys .scroll-wrapper .cats:focus {
  width: auto;
  text-transform: capitalize;
  padding: 5px 10px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 5px;
  display: block;
  margin: 7px 0px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px !important;
}

/*----- Pos header active class -----*/

.pos-categorys .scroll-wrapper ul li .active {
  background-color: var(--bs-primary);
  color: #fff;
}

/*----- Pos header active class -----*/

/* .offcanvas {
  max-width: 100% !important;
} */

/*================= pos menu start =================*/
.pos-menu {
  overflow-y: auto;
  overflow-x: hidden;
  height: 73vh;
  padding: 0px 10px;
}

.pos-menu .pro-img img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
}

.pos-menu .pro-title {
  font-size: 16px;
  font-weight: 400;
  color: #000;
  margin-bottom: 10px;
}
.pos-menu .pro-title,
.pos-menu p {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical; /* stylelint-disable-line */
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.pos-menu p {
  font-weight: 300;
  font-size: 14px;
}

.pos-menu .pro-price {
  font-size: 18px;
  font-weight: 500;
  color: var(--bs-primary);
}

.pos-img img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  object-fit: cover;
}

/*------- pos invoice css -------*/

.pos-modal {
  color: #000;
}

.pos-modal .order-details,
.pos-modal .store-details {
  border-bottom: 2px dotted lightgray;
}

.pos-modal .items-details .items,
.pos-modal .total-amount .items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px dotted lightgray;
}

.pos-menu .pagination .page-item input {
  max-width: 60px;
  width: 100%;
  text-align: center;
}

.righ-side .input-group span,
.righ-side .input-group input {
  background-color: var(--bs-body-bg) !important;
}

/*=========================== righ-side ===========================*/
.righ-side {
  margin-left: auto;
}

/*================ price-range ================*/

.righ-side .price-range .circle,
.offcanvas .offcanvas-body .price-range .circle,
.modal .modal-footer .price-range .circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
}

.righ-side .price-range .fa-minus,
.righ-side .price-range .fa-plus,
.offcanvas .offcanvas-body .price-range .fa-minus,
.offcanvas .offcanvas-body .price-range .fa-plus,
.modal .modal-footer .price-range .fa-minus,
.modal .modal-footer .price-range .fa-plus {
  font-weight: 400 !important;
}

.righ-side .price-range .circle:hover,
.offcanvas .offcanvas-body .price-range .circle:hover,
.modal .modal-footer .price-range .circle:hover {
  background-color: var(--bs-primary);
  color: #fff;
}

.righ-side.righ-side .price-range input,
.offcanvas .offcanvas-body .price-range input,
.modal .modal-footer .price-range input {
  width: 20%;
  margin: 0px 5px;
  border: none;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  background-color: transparent;
}

/*================ total-sec ================*/
.righ-side .total-sec h6,
.offcanvas .offcanvas-body .total-sec h6 {
  color: #000;
  font-weight: 400;
  font-size: 14px;
}

.righ-side .total-sec span,
.offcanvas .offcanvas-body .total-sec span {
  color: #000;
  font-weight: 600;
  font-size: 14px;
}

/*================ pro-itmes ================*/
.offcanvas .offcanvas-body .pro-itmes .m-scroll {
  height: calc(38vh + (100 - 44) * ((100vw - 320px) / (1920 - 320)));
  overflow: auto;
  margin: 10px 0px;
}

.m-empty-scroll {
  height: 80vh;
}

.righ-side .pro-itmes .d-scroll {
  height: calc(44vh + (100 - 44) * ((100vw - 320px) / (1920 - 320)));
  overflow: auto;
}

.empty-scroll {
  height: calc(77vh + (100 - 44) * ((100vw - 320px) / (1920 - 320)));
  overflow: auto;
}

#cartview .card .desktop-card-body {
  overflow-y: auto;
  overflow-x: hidden;
  height: 93vh;
}

.righ-side .payment-option .payment-title h5,
.offcanvas .offcanvas-body .payment-option .payment-title h5 {
  color: #000;
}

.righ-side .pro-itmes .card,
.righ-side .total-sec .card,
.offcanvas .offcanvas-body .pro-itmes .card,
.offcanvas .offcanvas-body .total-sec .card {
  background-color: var(--bs-body-bg);
}

.righ-side .pro-itmes .card .card-body,
.offcanvas .offcanvas-body .pro-itmes .card .card-body {
  padding: 12px;
}

.pro-itmes .pro-title {
  font-size: 14px;
  font-weight: 400;
  color: #000;
  margin-bottom: 15px;
}

.pro-itmes .card .pro-price {
  font-size: 16px;
  font-weight: 500;
  color: var(--bs-primary);
}

/*================= payment-option =================*/
.righ-side .payment-option label,
.offcanvas .offcanvas-body .payment-option label {
  width: 100%;
}

.righ-side .payment-option .card-input-element,
.offcanvas .offcanvas-body .payment-option .card-input-element {
  display: none;
}

.righ-side .payment-option .card,
.offcanvas .offcanvas-body .payment-option .card {
  cursor: pointer;
}

.righ-side .payment-option .card-input-element:checked+.card,
.offcanvas .offcanvas-body .payment-option .card-input-element:checked+.card {
  box-shadow: 0 0 1px 1px #000;
}

/*----------------- Scrollbar css -----------------*/

.pos-categorys .scroll-wrapper::-webkit-scrollbar,
.pos-menu::-webkit-scrollbar,
.desktop-card-body::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.pos-categorys .scroll-wrapper::-webkit-scrollbar-track,
.pos-menu::-webkit-scrollbar-track,
.desktop-card-body::-webkit-scrollbar-track {
  background-color: transparent !important;
}

.pos-categorys .scroll-wrapper::-webkit-scrollbar-thumb,
.pos-menu::-webkit-scrollbar-thumb,
.desktop-card-body::-webkit-scrollbar-thumb {
  background: lightgray !important;
  border-radius: 10px !important;
}

/*----------------- Scrollbar css -----------------*/

.currency input {
  background-color: #ecf0fa;
}

/*---------------- floating-label ----------------*/

/* .floating-label {} */

.floating-label {
  width: 60px;
  height: 60px;
  position: fixed;
  bottom: 5%;
  left: 5%;
  border: 2px solid var(--bs-primary);
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  box-shadow: 0px 0px 10px 2px var(--bs-primary);
  color: var(--bs-primary);
  font-size: 18px;
}

.variants .title {
  text-transform: capitalize;
  font-weight: 500;
  font-size: 16px;
  color: var(--bs-primary);
}

.pos-menu .card .active {
  border: 1px solid grey;
  border-radius: var(--bs-border-radius-xl) !important;
}

/*********************** load css ***********************/

.load {
  width: 20px;
  height: 20px;
  border: solid 3px #000;
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  -webkit-transition: all 0.5s ease-in;
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 1.0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  transition: all 0.5s ease-in;
  animation-name: rotate;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  margin: 0px 8px !important;
}

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

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

.h-24 {
  height: 24px;
}

.card .pro-content .fa-circle-plus {
  font-size: 24px;
}

/*********************** pos btn css ***********************/

/* .righ-side .btn.active,
.righ-side .btn:active,
.righ-side .btn:focus {
  color: #fff !important;
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
} */

.cuppon-offer {
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
  font-weight: 500;
  color: #17b31b;
  cursor: pointer;
}

.coupon_codewrapper {
  position: relative;
  overflow: hidden;
}

.coupon_codewrapper .coupon_circle1 {
  left: -6px;
  border: 1px solid var(--bs-primary);
  height: 12px;
  width: 12px;
  background-color: #fff;
  position: absolute;
  top: 12px;
  border-radius: 50%;
  z-index: 1;
}

.coupon_codewrapper .coupon_circle2 {
  right: -6px;
  border: 1px solid var(--bs-primary);
  height: 12px;
  width: 12px;
  background-color: #fff;
  position: absolute;
  top: 12px;
  border-radius: 50%;
  z-index: 1;
}

.coupon_codewrapper .coupon_couponcode {
  padding: 5px 12px;
  border: 1px solid var(--bs-primary);
  border-radius: 2px;
  color: #000;
}

.plan-card-active {
  border: 1px solid var(--bs-primary) !important;
}

/* share css */
div#social-links {
  margin: 0 auto;
  max-width: 500px;
}

div#social-links ul li {
  display: inline-block;
}

div#social-links ul li a .fa-facebook-square {
  color: #3b5998;
}

div#social-links ul li a .fa-twitter {
  color: #00acee;
}

div#social-links ul li a .fa-linkedin {
  color: #0072b1;
}

div#social-links ul li a .fa-telegram {
  color: #0088cc;
}

div#social-links ul li a .fa-whatsapp {
  color: #25D366;
}

div#social-links ul li a .fa-reddit {
  color: #FF4500;
}

div#social-links ul li a {
  padding: 12px;
  margin: 4px;
  font-size: 30px;
}

#DataTables_Table_0_length {
  margin-bottom: 10px;
  text-align: end;
  margin-right: 10px;
}

/* START TOOLTIP STYLES */
[tooltip] {
  position: relative;
}

[tooltip]::before,
[tooltip]::after {
  text-transform: none;
  font-weight: 200;
  font-size: 13px;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}

[tooltip]::before {
  content: '';
  border: 5px solid transparent;
  z-index: 1001;
}

[tooltip]::after {
  content: attr(tooltip);
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000;
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="down"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}

[tooltip]:not([flow])::after,
[tooltip][flow^="down"]::after {
  bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

.input-custom {
  padding: .675rem 1.1rem;
  font-size: 18px;
  border-radius: 8px;
  color: #000;
  text-transform: capitalize;
}

.login-btn {
  padding: .675rem 1.1rem !important;
  text-transform: capitalize;
  font-size: 18px;
}

.logo-h-45-px {
  width: 145px;
}

.page-topbar .dropdown-toggle::after {
  display: none;
}

.bg-gradient-color {
  background-image: linear-gradient(to right, var(--bs-secondary), var(--bs-primary));
}

.subtitle {
  line-height: 30px;
  font-size: 18px;
  transition: .2s all ease;
}

.lag-img {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50%;
  object-fit: cover !important;
}

.theme-label {
  color: var(--white);
  /* background: var(--bs-secondary); */
  width: auto;
  height: auto;
  cursor: pointer;
  z-index: 1024;
  border-radius: 8px 8px 0 0;
  padding: 8px 40px;
  position: fixed;
  top: 50%;
  right: -64px;
  transform: rotate(270deg);
  display: flex;
  align-items: center;
  transition: .3s all ease;
}

.theme-label-name {
  color: #fff;
  margin-left: 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  text-transform: capitalize;
}

.them-name-images {
  width: 100%;
  transform-origin: 50% 50%;
  object-fit: cover;
  object-position: top;
  height: 200px;
  transition: 2s all ease-in-out;
  cursor: pointer;
  border-radius: 2rem;
  border: 1px solid #000;
}

.them-name-images:hover {
  object-position: bottom;
}

.offcanvas-body .card-title {
  font-size: 18px;
  margin: 0px;
}

.admin-menu {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: .5rem;
  flex-wrap: wrap;
  color: #fff;
}

.admin-menu li a {
  color: #fff;
  font-weight: 500;
}

.sidebar-max-w {
  max-width: 400px;
}

.form-h {
  height: calc(100vh - 68px);
}

.overflow-x-auto {
  overflow-x: scroll;
}

.overflow-x-auto::-webkit-scrollbar {
  display: none;
}

/* ── Hide main page scrollbar only (html + body) ── */
html, body {
  scrollbar-width:    none !important;   /* Firefox */
  -ms-overflow-style: none !important;   /* IE / Edge legacy */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none !important;
  width:   0    !important;
  height:  0    !important;
}

/* ── Inner elements keep their scrollbar (sidebar, tables, modals…) ── */
*::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; }

/* top btn hover */
.btn-hover:is(:hover, :active, :focus, .show) {
  background-color: transparent !important;
  color: var(--bs-primary) !important;
  border: 1px solid var(--bs-primary);
}

.btn-hover i {
  color: var(--bs-primary) !important;
}

.payment-accordian .accordion-button::after {
  display: none !important;
}

.sort_menu .card .card-header {
  color: #000;
  background-color: var(--bs-secondary) !important;
  /* background-color: rgb(from var(--bs-secondary) r g b / .2); */
  box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0 var(--bs-accordion-border-color);
  font-size: 18px;
  padding: 16px 20px;
}

.theme-selection li:hover img {
  object-position: bottom;
}

#themeinfo .theme-selection:hover img {
  object-position: bottom;
}

.theme-selection img {
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
  object-fit: cover;
  object-position: top;
  height: 300px;
  transition: 2s all ease-in-out;
}

.w-70px {
  width: 90px;
  height: 70px;
}

.item-stock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.3);
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 9;
  border-radius: 10px;
}

.table-responsive {
  padding-bottom: 10px;
}

.payment_description {
  height: 250px;
  overflow: auto;
}

.plan-themes:hover img {
  object-position: bottom;
}

.plan-themes img {
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
  object-fit: cover;
  object-position: top;
  height: 300px;
  transition: 2s all ease-in-out;
}

/* new one */
.one-card {
  background-color: #eff3f6;
  height: 100%;
  width: 200px;
  padding: 0px;
  border: none;
  border-radius: 0px;
  position: relative;
}

.one-card .one-img {
  height: 200px;
  overflow: hidden;
}

.one-card img {
  height: 200px;
}

.one-card .card-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
}

.one-card .card-footer {
  border: none;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
}

.one-card .card-footer p {
  font-weight: 600;
  text-transform: capitalize;
  color: #000;
  display: -webkit-box;
  -webkit-box-orient: vertical; /* stylelint-disable-line */
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  padding-bottom: 1px;
  word-break: break-all;
  font-size: 14px;
}

.one-card .dropdown {
  position: absolute;
  top: 8px;
  right: 8px;
}

.one-card .one-card-dropdown,
.one-card .one-card-dropdown:is(:hover, :active, :focus, .show) {
  width: 25px;
  height: 25px;
  background-color: var(--bs-secondary) !important;
  color: #fff;
  font-size: 15px;
  border-radius: 0px;
  cursor: pointer;
  border: none !important;
  padding-top: 2px;
}

.one-card .dropdown-toggle::after {
  display: none;
}

.one-card .dropdown-menu {
  min-width: fit-content;
  border-radius: 0px;
  border: none;
  margin-top: 2px !important;
}

.one-card .dropdown-menu li .dropdown-item {
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.one-card .dropdown-item:hover {
  background-color: var(--bs-secondary);
  color: #fff;
}

.dropdown-menu.ltr {
  top: 0px !important;
  right: 0px !important;
}

.dropdown-menu.rtl {
  top: 0px !important;
  left: 0px !important;
}

/*--- recharge payment option ---*/
.recharge_payment_option label.radio-card .card-content-wrapper {
  border-radius: 0px;
  padding: 0px;
  border: 2px solid rgba(219, 215, 215, 0.04);
  transition: 200ms linear;
  cursor: pointer;
}

.recharge_payment_option label.radio-card .check-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  border: solid 2px var(--bs-secondary);
  border-radius: 50%;
  transition: 200ms linear;
  position: absolute;
  top: 8px;
  right: 8px;
}

.recharge_payment_option label.radio-card .check-icon:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.93552 4.58423C0.890286 4.53718 0.854262 4.48209 0.829309 4.42179C0.779553 4.28741 0.779553 4.13965 0.829309 4.00527C0.853759 3.94471 0.889842 3.88952 0.93552 3.84283L1.68941 3.12018C1.73378 3.06821 1.7893 3.02692 1.85185 2.99939C1.91206 2.97215 1.97736 2.95796 2.04345 2.95774C2.11507 2.95635 2.18613 2.97056 2.2517 2.99939C2.31652 3.02822 2.3752 3.06922 2.42456 3.12018L4.69872 5.39851L9.58026 0.516971C9.62828 0.466328 9.68554 0.42533 9.74895 0.396182C9.81468 0.367844 9.88563 0.353653 9.95721 0.354531C10.0244 0.354903 10.0907 0.369582 10.1517 0.397592C10.2128 0.425602 10.2672 0.466298 10.3112 0.516971L11.0651 1.25003C11.1108 1.29672 11.1469 1.35191 11.1713 1.41247C11.2211 1.54686 11.2211 1.69461 11.1713 1.82899C11.1464 1.88929 11.1104 1.94439 11.0651 1.99143L5.06525 7.96007C5.02054 8.0122 4.96514 8.0541 4.90281 8.08294C4.76944 8.13802 4.61967 8.13802 4.4863 8.08294C4.42397 8.0541 4.36857 8.0122 4.32386 7.96007L0.93552 4.58423Z' fill='white'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: center center;
  transform: scale(1.6);
  transition: 200ms linear;
  opacity: 0;
}

.recharge_payment_option label.radio-card input[type=checkbox] {
  appearance: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.recharge_payment_option label.radio-card input[type=checkbox]:checked+.card-content-wrapper {
  border: 1px solid var(--bs-primary);
}

.recharge_payment_option label.radio-card input[type=checkbox]:checked+.card-content-wrapper .check-icon {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  transform: scale(1.2);
}

.recharge_payment_option label.radio-card input[type=checkbox]:checked+.card-content-wrapper .check-icon:before {
  transform: scale(1);
  opacity: 1;
}

#rechargewallet .radio-card input {
  padding: 0px !important;
}

#rechargewallet .payment_option_img img {
  width: 40px;
  height: 40px;
}

#rechargewallet .card-content p {
  margin-bottom: 0px;
  font-size: 16px;
  font-weight: 600;
}

#rechargewallet .card-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wallet-sec .transaction-card .wallet_icon_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(60px + (70 - 60) * ((100vw - 320px) / (2560 - 320)));
  height: calc(60px + (70 - 60) * ((100vw - 320px) / (2560 - 320)));
  margin: auto;
}

.wallet-sec .transaction-card .wallet_icon_box i {
  font-size: 30px;
}

.wallet-sec .transaction-card h5 {
  font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (2560 - 320)));
}

.modal-w {
  --bs-modal-width: 90%;
}

#oneaddimg .one-card {
  width: 192px;
}

@media (max-width:1186px) {
  #oneaddimg .one-card {
    width: 190px;
  }
}

@media (max-width:768px) {
  #oneaddimg .one-card {
    width: 204px;
  }
}

@media (max-width:576px) {
  #oneaddimg .one-card {
    width: 228px;
  }
}

@media (max-width:425px) {
  #oneaddimg .one-card {
    width: 175px;
  }
}

@media (max-width:375px) {
  #oneaddimg .one-card {
    width: 150px;
    height: 160px !important;
  }
}

@media (max-width:320px) {
  #oneaddimg .one-card {
    width: 122px;
    height: 140px !important;
  }
}

#oneaddimg .modal-body {
  overflow-y: auto;
  height: 80vh;
}

#oneaddimg .modal-body::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

#oneaddimg .modal-body::-webkit-scrollbar-track {
  background-color: transparent !important;
}

#oneaddimg .modal-body::-webkit-scrollbar-thumb {
  background: lightgray !important;
  border-radius: 10px !important;
}

/*----- new login page -----*/

.login-right-content {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.register-padding {
  padding: 48px;
}

.login-forgot-padding {
  padding: 48px;
}

.login-right-content::-webkit-scrollbar {
  display: none;
}

/* ====== login title ======= */
.title-text {
  font-size: 35px;
}

.text-decoration {
  text-decoration: underline !important;
}

.login-with-border {
  height: 1px;
  width: 100%;
  background-color: #B8B8B8;
}

.text-color {
  color: #121212;
}

.icon-btn-google {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #d82433 !important;
  border: none !important;
}

.icon-btn-facebook {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #3d5a9e !important;
  border: none !important;
}

.btn-primary.padding,
.btn-secondary.padding {
  padding: 13px 26px;
}

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

/* ============== Dhruvil desai =============== */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-focus-shadow-rgb: 91, 61, 245;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-hover);
  --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: 44, 31, 113;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #31d2f2;
  --bs-btn-hover-border-color: #25cff2;
  --bs-btn-focus-shadow-rgb: 11, 172, 204;
  --bs-btn-active-color: ##fff;
  --bs-btn-active-bg: #3dd5f3;
  --bs-btn-active-border-color: #25cff2;
  --bs-btn-active-shadow: inset 0 3px 5px #fff(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0dcaf0;
  --bs-btn-disabled-border-color: #0dcaf0;
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: 45, 41, 66;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-secondary);
  --bs-gradient: none
}

.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-focus-shadow-rgb: 91, 61, 245;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--primary);
  --bs-gradient: none;
}

.btn.hov:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.card {
  --bs-card-bg: var(--card-bg);
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.form-select {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--bg-secondary);
  border-color: var(--primary);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px var(--brand-light);
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--bg-light);
  opacity: 0.7;
  cursor: not-allowed;
}

.btn-outline-info {
  --bs-btn-hover-color: #fff;
}

.form-control {
  font-size: 14px;
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.pagination {
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
}

.progress {
  --bs-progress-bar-bg: var(--bs-primary);
}

.border-primary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important
}

.active>.page-link,
.page-link.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff !important;
}

.text-primary {
  --bs-text-opacity: 1;
  color: var(--bs-primary) !important
}

a {
  color: var(--bs-link-color);
  text-decoration: none
}

.nav-tabs {
  --bs-nav-tabs-link-active-bg: #fff !important;
}

.table {
  --bs-table-bg: transparent !important;
}

.list-group {
  --bs-list-group-bg: #fff !important;
}

.list-group-item {
  background-color: var(--bs-list-group-bg) !important;
}

.form-check-input:checked {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.checkbox-reviw input[type='checkbox'] {
  accent-color: #000;
}

.custom-control-input[type=checkbox]:indeterminate {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.lag-img {
  width: 25px !important;
  height: 25px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50%;
}

.min-dropdown-ltr {
  position: absolute !important;
  left: -93px !important;
}

.min-dropdown-rtl {
  position: absolute !important;
  left: 0px !important;
}

.icon_box {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000 !important;
}

.fs-15 {
  font-size: 15px !important;
}

.fs-13 {
  font-size: 13px !important;
}

.login-admin .image-1 {
  width: 100%;
  height: 100%;
}

.img-logo img {
  height: 60px;
}

.login-admin .row {
  width: 100%;
  height: 100%;
}

.object {
  object-fit: cover !important;
  object-position: center !important;
}

.login-admin .image-1 img {
  width: 100%;
  height: 100%;
}

.text-muted {
  --bs-text-opacity: 1;
  color: #848c92 !important;
}

.dataTables_empty {
  font-size: 15px;
  font-weight: 600;
}

.dataTables_info {
  font-size: 14px;
  font-weight: 500;
  color: #000;
}

.sorting {
  font-size: 15px !important;
  font-weight: 500;
}

.form-group label,
.form-label {
  font-size: 15px !important;
  font-weight: 400;
  color: #000;
  /* margin: 0px !important; */
}

.filter-option {
  font-size: 14px !important;
}

.form-group input {
  font-size: 14px !important;
}

.form-group .form-select {
  font-size: 14px !important;
}

.form-group textarea {
  font-size: 14px !important;
}

.dataTables_paginate .pagination .page-item .page-link {
  font-size: 14px !important;
  font-weight: 500;
}

.pagination .page-item .page-link {
  font-size: 14px !important;
  font-weight: 500;
}

.fs-16 {
  font-size: 16px !important;
}

.header-bar .navbar .min-dropdown-ltr {
  position: absolute !important;
  left: -128px !important;
  top: 100% !important;
}

.header-bar .navbar .min-dropdown-rtl {
  position: absolute !important;
  left: 0px !important;
  top: 100% !important;
}

.hov {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hight-50 {
  height: 50px !important;
}

.card-title {
  color: #000;
}

.modal-content {
  background-color: #fff;
}

.header-btn-icon {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left-side {
  border-right: 2px dotted rgb(215, 214, 214);
  padding-right: 1px;
}

.right-side {
  border-left: 2px dotted rgb(215, 214, 214);
  padding-left: 1px;
}

.right-side {
  /* width: 40% !important; */
  position: relative;
}

/* ======== Alert Warning ======= */
.alert-warning {
  --bs-alert-color: var(--bs-primary);
  --bs-alert-bg: rgb(from var(--bs-secondary) r g b / .2);
  --bs-alert-border-color: rgb(from var(--bs-secondary) r g b / .2);
  --bs-alert-link-color: var(--bs-warning-text-emphasis);
}

.coupon .coupn-circle-up-left {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgb(215, 214, 214);
  border-radius: 100%;
  left: -11px;
}

.coupon .coupn-circle-up-right {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgb(215, 214, 214);
  border-radius: 100%;
  right: -11px;
}

.bg-gray {
  background-color: rgb(229 229 229);
}

.form-check-input:focus {
  border-color: var(--bs-border-color);
}

.text-dark {
  color: #000 !important;
}

.btn-light {
  --bs-btn-color: #000000;
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #ffffff;
  --bs-btn-hover-border-color: #ffffff;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-check-label {
  font-size: 15px !important;
  margin-inline-start: 20px;
  /* زود أو قلل الرقم براحتك */
}

/*.settings-color {*/
/*  color: #000;*/
/*}*/

.bootstrap-select>.dropdown-toggle {
  padding: .375rem .75rem;
}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--bs-dropdown-link-active-color) !important;
  text-decoration: none;
  background-color: #000000;
}

.sub-plan {
  padding: 16px 20px;
}

/* ========= */
.dasbord-img {
  width: 35px;
  height: 35px;
}

.quer-code {
  width: 100px;
  height: 100px;
}

/* ── Multi-line text-clamp utilities ─────────────────────────────────────────
   These use the -webkit- prefixed form which is still required for cross-browser
   multi-line truncation (Chrome/Edge/Safari/Firefox all honour -webkit-line-clamp).
   The unprefixed `line-clamp` is added as the forward-compatible standard.
   ─────────────────────────────────────────────────────────────────────────── */
.line-1, .line-2, .line-3 {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical; /* stylelint-disable-line */
}
.line-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.line-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.line-3 { -webkit-line-clamp: 3; line-clamp: 3; }

.h-10-px {
  height: 10px;
}

.gradient-6 {
  background-image: linear-gradient(135deg, #97ABFF 10%, #123597 100%);
}

.rainbowText {
  font-family: arial black;
  font-size: 12px;
  background-image:
    linear-gradient(to right, red, orange, rgb(255, 234, 0), green, rgb(0, 0, 255), rgb(149, 0, 255), violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: move 1000s linear infinite;
}

@keyframes move {
  to {
    background-position: 4500vh;
  }
}

/* ================ New Pos Dhruvil Desai start=================== */

.logo-size {
  height: 50px;
}

.product-text-size {
  font-size: .75rem !important;
}

.sidebares {
  position: fixed;
  left: 0;
  z-index: 100;
  padding: 30px 0;
  border-right: 1px solid var(--bs-secondary);
  background-color: var(--bg-white);
  overflow: auto;
  /* display: flex; */
  width: auto;
  transition: all 0.3s;
  padding: 20px;
}

.sidebares .nav-item {
  display: inline-block;
}

.catagory-size {
  width: 45px;
  height: 45px;
}

.sidebr-box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  border: 1px solid #c9c9c9;
  transition: all .3s ease-in-out;
  padding: 5px;
  color: var(--text-secondary);
}

.main-product {
  margin-left: 150px;
}

.underline {
  border-bottom: 1px solid var(--bs-secondary);
}

::-webkit-scrollbar {
  width: 2px !important;
  height: 2px;
}

::-webkit-scrollbar-track {
  background: #d2d2d2;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--bs-secondary);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bs-secondary);
}

.actives {
  /* box-shadow: 1px 1px 15px 1px rgb(144, 144, 144); */
  border-radius: 10px;
  border: 1px solid var(--bs-secondary);
  transition: all .3s ease-in-out;
  background-color: var(--bs-secondary-rgb);
  color: var(--bs-secondary) !important;
}

.product-name {
  font-size: calc(14px + (18 - 13) * ((100vw - 320px) / (1920 - 320))) !important;
}

.font-8px {
  font-size: 8px;
}

.checkbox-inline input {
  display: none;
}

.pro-text {
  padding-right: 0;
  color: var(--bs-secondary);
  margin: 0;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 600;
}

.pro-modal .pro-org-value {
  font-size: 16px;
  font-weight: 500;
  margin: 0px 7px;
  text-decoration: line-through;
  color: lightslategrey !important;
}

.extra-food li {
  position: relative;
  margin-bottom: 8px !important;
}

.extra-food li {
  position: relative;
  margin-bottom: 8px !important;
}

.extra-food li input {
  position: absolute;
  top: 1px;
  left: 0;
  opacity: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin-bottom: 0;
}

.extra-food li p {
  padding-left: 26px;
  /* padding-top: 5px; */
  position: relative;
  font-size: 14px;
}

.extra-title {
  font-size: 16px;
  color: #121212;
}

.extra-food li p::before {
  content: "";
  top: 1px;
  left: 0;
  width: 18px;
  height: 18px;
  position: absolute;
  border-radius: 5px;
  border: 1px solid var(--bs-secondary);
}

.extra-food {
  margin-right: 60px;
}

.extra-food li input:checked+p::after {
  opacity: 1;
}

.extra-food li p::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 3px;
  width: 12px;
  height: 12px;
  opacity: 0;
  border-radius: 3px;
  transition: all 0.5s;
  background-color: var(--bs-primary);
}

.size-variation .checkbox-inline {
  padding: 6px 15px;
  border: 1px solid var(--bs-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  color: var(--bs-primary);
  border-radius: 6px;
}

.product-variations-wrapper .active {
  border-color: var(--bs-primary) !important;
  background-color: var(--bs-primary);
  color: #fff !important;
}

.qty-input2 {
  border: 1px solid var(--bs-primary);
  flex-wrap: nowrap;
  padding: 5px;
  justify-content: space-between;
}

.qty-input2 .change-qty-2 {
  margin: 0;
  font-size: 10px;
  height: 28px;
  width: 40px;
  font-weight: 500;
  color: #fff !important;
  border: 0;
  background: var(--bs-primary);
  border-radius: 6px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qty-input2 input {
  border-radius: 0% !important;
  font-size: 16px;
  padding: 0;
  margin: 0;
  color: #121212;
  line-height: 20px;
  border: 0 !important;
  width: 56.4% !important;
  margin: 0px 5px !important;
}

.btn-check:checked+.btn,
.btn.active,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
  background-color: var(--bs-primary);
  border-color: var(--bs-btn-active-border-color);
}

.btn-store,
.btn-store:is(:hover, :focus, :active) {
  padding: 12px 24px;
  border-radius: 6px;
  background-color: var(--bs-primary) !important;
  color: #fff !important;
  z-index: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: capitalize;
  margin: 0px;
  font-weight: 500;
}

.badge.text-bg-primary {
  background-color: var(--bs-secondary) !important;
  color: var(--bs-primary) !important;
  font-weight: 600 !important;
}

.offer-box {
  width: 65px;
  top: 10px;
  display: flex;
  justify-content: center;
  left: 10px;
  padding: 3px;
  border-radius: 12px;
  font-size: 11px !important;
  border: 1px solid #000;
  font-weight: 600 !important;
  background-color: var(--bs-secondary);
  color: var(--bs-primary) !important;
}

.offer-box h6 {
  line-height: 1;
}

.cart-btn {
  right: 10px;
  bottom: 20px;
  width: 70px;
  height: 70px;
  border: none;
  background-color: var(--bs-secondary);
  animation: mymove 2s infinite;
}

@keyframes mymove {
  50% {
    box-shadow: 0px 0px 10px 5px #00000052;
  }
}

.cart-count {
  position: absolute;
  top: -13px;
  width: 30px;
  height: 30px;
  right: 0px;
}

.price-total {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

.closing-button-1 {
  position: absolute;
  right: 100%;
  width: 50px;
  height: 50px;
  border: 1px solid var(--bs-secondary);
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

.imgs {
  height: 230px;
}

.qty-container .qty-btn-minus {
  margin-right: -1px;
}

.qty-container .qty-btn-minus,
.qty-container .qty-btn-plus {
  border: 1px solid #d4d4d4;
  font-size: 10px;
  height: 18px;
  margin: 0px 0px;
  width: 18px;
  border-radius: 50%;
  transition: 0.3s;
}

.button-modal {
  width: 100%;
  padding: 12px 0.75rem;
  font-size: 16px;
  border-radius: 0.375rem;
  background-color: var(--bs-primary);
}

.qty-container .input-qty {
  text-align: center;
  max-height: 50px;
  background-color: transparent;
  border: none;
  max-width: 30px;
}

.text-sm {
  font-size: .790rem;
}

.underline-2 {
  border-top: 2px dotted #808080;
  border-bottom: 2px dotted #808080;
}

.offcanvas {
  background-color: var(--bs-white) !important;
}

.total-pay {
  width: 100%;
  padding: 10px;
}

.bg-primary {
  background-color: #000 !important;
}

.box-product-2 {
  width: 100%;
  max-height: 190px !important;
  overflow-y: scroll;
}

.notes-box {
  border: 2px dotted var(--bg-date);
}

.modal-price {
  font-size: 13px !important;
}

.from-name {
  font-size: 13px !important;
}

.customer::placeholder {
  font-size: 13px !important;
}

.closing-button-2 {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.total-pay1 {
  padding: 10px;
}

.thanks-order-btn {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}

.modal-img {
  width: 90px;
  height: 90px;
  border-radius: 10px;
}

.font-8px {
  font-size: 10px;
}

.cursor-pointer {
  cursor: pointer;
}

.category-name {
  background-color: #C8C8C8;
  font-size: 22px;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.extra-padding {
  padding: 13px 26px !important;
}

.lag-btn .dropdown-menu {
  --bs-dropdown-min-width: 8rem !important;
  padding: 0px 0px !important;
  overflow: hidden !important;
  font-size: 12px !important;
}

/*=============================*/

.user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.user-pro-card {
  background: linear-gradient(180deg, #ffffff, #fafafa);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #eee;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .06);
  transition: .3s;
  position: relative;
}

.user-pro-header {
  height: 110px;
  background: linear-gradient(135deg, #6366F1, #14b8a6);
  position: relative;
}

.user-pro-avatar {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
  position: absolute;
  bottom: -40px;
  left: 20px;
  background: white;
}

.status-pill {
  position: absolute;
  right: 15px;
  top: 15px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: #fff;
}

.status-pill.active {
  background: #22c55e
}

.status-pill.inactive {
  background: #ef4444
}

.user-pro-body {
  padding: 55px 18px 10px 18px;
}

.user-name {
  font-weight: 700;
  margin-bottom: 3px;
}

.user-email {
  color: #6b7280;
  font-size: 13px;
  margin-bottom: 10px;
}

.user-meta {
  font-size: 13px;
  color: #374151;
}

.user-meta i {
  width: 16px;
  text-align: center;
  margin-right: 4px;
}

.user-pro-footer {
  padding: 12px 14px 16px 14px;
  display: flex;
  gap: 8px;
  border-top: 1px solid #eee;
}

.icon-btn {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 14px;
  transition: .2s;
}

.icon-btn:hover {
  background: #f3f4f6;
  transform: translateY(-2px);
}

.icon-btn.delete {
  color: #ef4444
}

.icon-btn.edit {
  color: #2563eb
}

.icon-btn.view {
  color: #0f172a
}

.icon-btn.password {
  color: #16a34a
}

.icon-btn.login {
  color: #6b21a8
}

.badge-days {
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.badge-days.positive {
  background: #e8fff1;
  color: #16a34a;
}

.badge-days.negative {
  background: #ffe9e9;
  color: #dc2626;
}

.badge-days.neutral {
  background: #fff7e6;
  color: #b45309;
}

[tooltip] {
  position: relative;
}

[tooltip]::after {
  content: attr(tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: #111827;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: .15s ease-in-out;
  z-index: 50;
}

[tooltip]::before {
  content: '';
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #111827;
  opacity: 0;
  transition: .15s ease-in-out;
  z-index: 50;
}

[tooltip]:hover::after,
[tooltip]:hover::before {
  opacity: 1;
  bottom: 135%;
}

.user-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-info-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #111827;
}

.user-info-list i {
  width: 18px;
  text-align: center;
  font-size: 14px;
  opacity: .8;
}

/* ألوان مميزة للأيقونات */
.text-plan {
  color: #6366F1;
}

.text-time {
  color: #EA580C;
}

/* البادجات بتاعة الوقت */
.badge-days {
  padding: 3px 10px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 600;
}

.badge-days.positive {
  background: #ECFDF5;
  color: #16A34A;
}

.badge-days.neutral {
  background: #FEF9C3;
  color: #B45309;
}

.badge-days.negative {
  background: #FEE2E2;
  color: #DC2626;
}

.user-title-box {
  margin-top: 8px;
  margin-bottom: 6px;
}

.user-name {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-name i {
  color: #4f46e5;
  font-size: 16px;
  opacity: .9;
}

.user-email {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  word-break: break-all;
}

.user-email i {
  font-size: 13px;
  color: #6b7280;
}

/* Block header bar */
.d-flex.flex-wrap.gap-2.justify-content-between.align-items-center.mb-3 {
  background: var(--card-bg);
  padding: 10px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

/* Add button */
.btn-add {
  background: linear-gradient(135deg, var(--primary), #8B5CF6);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  padding: 10px 20px;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 20px rgba(91, 61, 245, .3);
  transition: var(--transition);
}

.btn-add:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(91, 61, 245, .45);
  color: #fff;
}

.btn-add:active {
  transform: translateY(0);
}

.btn-add i {
  font-size: 15px;
}

/* Ghost action buttons (import / export) */
.btn.btn-secondary {
  background: var(--bg-light);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.btn.btn-secondary:hover {
  background: var(--bg-secondary);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn.btn-secondary i {
  color: var(--primary);
}

/*========================*/
/* Orders Premium Design */
.orders-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 28px;
    padding: 40px;
    margin-bottom: 35px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.4);
}

.orders-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, rgba(255,255,255,0) 50%);
    animation: rotateBg 20s linear infinite;
    pointer-events: none;
}

@keyframes rotateBg {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.header-content {
    position: relative;
    z-index: 2;
}

.chart-card {
    background: var(--card-bg);
    border-radius: 28px;
    padding: 28px;
    height: 100%;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chart-card:hover {
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

.filter-btn {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 12px 24px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.filter-btn:hover {
    background: #6366f1;
    border-color: #6366f1;
    transform: translateY(-3px);
    color: #fff;
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
}

.filter-container {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    position: relative;
    z-index: 2;
}

.filter-input {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 14px;
    padding: 14px 18px;
    font-weight: 500;
    transition: all 0.3s;
}

.filter-input:focus {
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3) !important;
    border-color: #6366f1 !important;
}

body.dark-mode .chart-card {
    background: #1e293b;
    border-color: #334155;
}

/* Statistics Cards */
.premium-stat-card {
    background: #ffffff;
    border-radius: 28px;
    padding: 28px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    z-index: 1;
}

.premium-stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(var(--card-color-rgb), 0.05) 0%, rgba(255,255,255,0) 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.premium-stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(var(--card-color-rgb), 0.2);
    border-color: rgba(var(--card-color-rgb), 0.3);
}

.premium-stat-card:hover::after {
    opacity: 1;
}

.stat-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 24px;
    background: rgba(var(--card-color-rgb), 0.1);
    color: var(--card-color);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 16px rgba(var(--card-color-rgb), 0.1);
}

.premium-stat-card:hover .stat-icon-wrapper {
    transform: scale(1.1) rotate(8deg);
    background: var(--card-color);
    color: #fff;
    box-shadow: 0 12px 24px rgba(var(--card-color-rgb), 0.3);
}

.stat-info .label {
    font-size: 14px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-info .value {
    font-size: 36px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    font-family: 'Tajawal', sans-serif;
    letter-spacing: -1px;
}

.stat-total { --card-color: #6366f1; --card-color-rgb: 99, 102, 241; }
.stat-revenue { --card-color: #8b5cf6; --card-color-rgb: 139, 92, 246; }
.stat-completed { --card-color: #10b981; --card-color-rgb: 16, 185, 129; }
.stat-pending { --card-color: #f59e0b; --card-color-rgb: 245, 158, 11; }
.stat-confirmed { --card-color: #0ea5e9; --card-color-rgb: 14, 165, 233; }
.stat-on-way { --card-color: #f43f5e; --card-color-rgb: 244, 63, 94; }
.stat-cancelled { --card-color: #64748b; --card-color-rgb: 100, 116, 139; }

body.dark-mode .premium-stat-card {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .stat-info .value { color: #f8fafc; }
body.dark-mode .stat-info .label { color: #94a3b8; }

/* Orders Table */
.order-table-container {
    background: #ffffff;
    border-radius: 28px;
    padding: 30px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
}

.table-responsive {
    border-radius: 16px;
    overflow: visible;
}

.custom-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 16px;
}

.custom-table thead th {
    background: #f8fafc;
    color: #475569;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 18px 24px;
    border: none;
}

.custom-table thead th:first-child { border-radius: 16px 0 0 16px; }
.custom-table thead th:last-child { border-radius: 0 16px 16px 0; }

.custom-table tbody tr {
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-table tbody tr:hover {
    transform: translateY(-4px) scale(1.002);
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(99, 102, 241, 0.4);
    background: #f8fafc;
}

.custom-table tbody td {
    padding: 20px 24px;
    vertical-align: middle;
    font-size: 15px;
    font-weight: 500;
    color: #334155;
    border: none;
}

.custom-table tbody td:first-child { border-radius: 16px 0 0 16px; }
.custom-table tbody td:last-child { border-radius: 0 16px 16px 0; }

.order-id-badge {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    padding: 8px 16px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s;
    display: inline-block;
    font-family: 'Tajawal', sans-serif;
}

.order-id-badge:hover {
    background: #6366f1;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(99, 102, 241, 0.3);
}

.price-tag {
    font-weight: 800;
    color: var(--text-primary);
    font-size: 16px;
    background: var(--bg-secondary);
    padding: 8px 14px;
    border-radius: 12px;
    font-family: 'Tajawal', sans-serif;
    border: 1px solid var(--border-soft);
}

.status-badge {
    padding: 8px 18px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.status-badge i { font-size: 10px; }

.status-1 { background: rgba(245, 158, 11, 0.12); color: #f59e0b; } 
.status-2 { background: rgba(14, 165, 233, 0.12); color: #0ea5e9; } 
.status-3 { background: rgba(16, 185, 129, 0.12); color: #10b981; } 
.status-4 { background: rgba(34, 197, 94, 0.12); color: #22c55e; } 
.status-5 { background: rgba(239, 68, 68, 0.12); color: #ef4444; } 

body.dark-mode .status-1 { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
body.dark-mode .status-2 { background: rgba(14, 165, 233, 0.2); color: #38bdf8; }
body.dark-mode .status-3 { background: rgba(16, 185, 129, 0.2); color: #34d399; }
body.dark-mode .status-4 { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
body.dark-mode .status-5 { background: rgba(239, 68, 68, 0.2); color: #f87171; } 

.action-btn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
    border: none;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 18px;
}

.action-btn:hover {
    background: #6366f1;
    color: #fff;
    transform: translateY(-3px) rotate(5deg);
    box-shadow: 0 8px 15px rgba(99, 102, 241, 0.3);
}

.action-btn-pay:hover {
    background: #10b981;
    color: #fff;
    box-shadow: 0 8px 15px rgba(16, 185, 129, 0.3);
}

.source-badge {
    font-size: 12px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.source-facebook { background: #1877F2; color: #fff; box-shadow: 0 4px 10px rgba(24, 119, 242, 0.3); }
.source-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; box-shadow: 0 4px 10px rgba(220, 39, 67, 0.3); }
.source-direct { background: #64748b; color: #fff; box-shadow: 0 4px 10px rgba(100, 116, 139, 0.3); }

/* Custom Pagination */
.pagination { gap: 8px; margin-bottom: 0; }
.page-link {
    border-radius: 12px !important;
    border: none;
    padding: 10px 18px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    transition: all 0.3s;
}
.page-item.active .page-link {
    background: #6366f1;
    color: #fff;
    box-shadow: 0 8px 15px rgba(99, 102, 241, 0.3);
}
.page-link:hover {
    background: #e2e8f0;
    color: #0f172a;
    transform: translateY(-2px);
}

body.dark-mode .order-table-container { background: #1e293b; border-color: #334155; }
body.dark-mode .custom-table tbody tr { background: #1e293b; color: #f1f5f9; box-shadow: inset 0 0 0 1px #334155; }
body.dark-mode .custom-table tbody td { color: #f1f5f9; }
body.dark-mode .custom-table thead th { background: #0f172a; color: #94a3b8; }
/* ═══════════════════════════════════════════════════════════════════════════════
 * 🔷 SECTION E1: SIDEBAR V2 — Premium SaaS  (Linear / Stripe / Vercel aesthetic)
 * ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Dimensions ── */
  --sb-w:          240px;
  --sb-c:          64px;
  --sb-width:      var(--sb-w);      /* legacy alias */
  --sb-collapsed:  var(--sb-c);      /* legacy alias */

  /* ── Motion ── */
  --sb-transition: width 220ms cubic-bezier(0.4,0,0.2,1),
                   inset-inline-start 220ms cubic-bezier(0.4,0,0.2,1);

  /* ── Dark-mode palette (defaults) ── */
  --sb-bg:          #111113;
  --sb-border:      rgba(255,255,255,.07);
  --sb-text:        #e4e4e7;
  --sb-text-muted:  #71717a;
  --sb-hover:       rgba(255,255,255,.05);

  /* ── Role-adaptive (resolved from tokens-roles.css body.role-* class) ── */
  --sb-active:       var(--role-accent,      #2563EB);
  --sb-active-light: var(--role-accent-soft, rgba(37,99,235,.09));
}

body:not(.dark-mode) {
  --sb-bg:         #ffffff;
  --sb-border:     #e5e7eb;
  --sb-text:       #111827;
  --sb-text-muted: #9ca3af;
  --sb-hover:      rgba(0,0,0,.04);
}

/* ── SIDEBAR SHELL ───────────────────────────────────────────── */
.sidebar {
  position: fixed !important;
  top: 10px !important;
  bottom: 10px !important;
  inset-inline-start: 10px !important;
  width: var(--sb-w) !important;
  background: var(--sb-bg) !important;
  border: 1px solid var(--sb-border) !important;
  border-radius: 16px !important;
  z-index: 1050 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06) !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: 'Zain', sans-serif !important;
}
body.dark-mode .sidebar {
  box-shadow: 0 4px 32px rgba(0,0,0,.32), 0 1px 6px rgba(0,0,0,.16) !important;
}
body.ready .sidebar {
  transition: var(--sb-transition) !important;
}

/* ── BRAND HEADER ────────────────────────────────────────────── */
.sb-header {
  height: 58px;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 14px;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.sb-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-logo img { width: 32px; height: 32px; object-fit: contain; border-radius: 8px; }
.sb-logo-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--sb-active, #2563EB);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
}
.sb-brand-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.sb-brand-name {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--sb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.sb-brand-role {
  display: block;
  font-size: 10px;
  color: var(--sb-text-muted);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.sb-toggle {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--sb-border);
  background: transparent;
  color: var(--sb-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
  line-height: 1;
}
.sb-toggle:hover {
  background: var(--sb-hover);
  color: var(--sb-text);
  border-color: var(--sb-active);
}
.sb-toggle:focus-visible {
  outline: 2px solid var(--sb-active);
  outline-offset: 2px;
}

/* ── SCROLL AREA ─────────────────────────────────────────────── */
.sb-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 8px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-border) transparent;
}
.sb-scroll::-webkit-scrollbar { width: 3px; }
.sb-scroll::-webkit-scrollbar-thumb {
  background: var(--sb-border);
  border-radius: 3px;
}

/* ── NAV LIST ────────────────────────────────────────────────── */
.sidebar .sd-nav {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.sidebar .sd-item {
  margin-bottom: 1px !important;
  list-style: none !important;
}

/* ── NAV LINK ────────────────────────────────────────────────── */
.sidebar .sd-link {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  color: var(--sb-text) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease !important;
  white-space: nowrap;
  position: relative;
}
.sidebar .sd-link:focus-visible {
  outline: 2px solid var(--sb-active) !important;
  outline-offset: 1px !important;
}

/* ── ICON (first icon in the link) ──────────────────────────── */
.sidebar .sd-link > i,
.sidebar .sd-link > i.fa-solid,
.sidebar .sd-link > i.fa-brands,
.sidebar .sd-link > i.fa-regular {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  text-align: center !important;
  color: var(--sb-text-muted) !important;
  background: transparent !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
  transition: color .15s ease !important;
}

/* ── HOVER ───────────────────────────────────────────────────── */
.sidebar .sd-link:hover {
  background: var(--sb-hover) !important;
  color: var(--sb-text) !important;
}
.sidebar .sd-link:hover > i,
.sidebar .sd-link:hover > i.fa-solid,
.sidebar .sd-link:hover > i.fa-brands,
.sidebar .sd-link:hover > i.fa-regular {
  color: var(--sb-active) !important;
}

/* ── ACTIVE ──────────────────────────────────────────────────── */
.sidebar .sd-link.active {
  background: var(--sb-active-light) !important;
  color: var(--sb-active) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.sidebar .sd-link.active > i,
.sidebar .sd-link.active > i.fa-solid,
.sidebar .sd-link.active > i.fa-brands,
.sidebar .sd-link.active > i.fa-regular {
  color: var(--sb-active) !important;
  background: transparent !important;
}
/* Active accent bar (on the start side — right in RTL, left in LTR) */
.sidebar .sd-link.active::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--sb-active);
  border-radius: 0 3px 3px 0;
}
html[dir="ltr"] .sidebar .sd-link.active::after {
  border-radius: 3px 0 0 3px;
}

/* ── SECTION TITLE ───────────────────────────────────────────── */
.sidebar .nav-title {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  color: var(--sb-text-muted) !important;
  margin: 18px 0 3px !important;
  padding: 0 10px !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Remove dot/color-coding — clean, uniform */
.sidebar .nav-title::before { display: none !important; }
.sidebar .nav-title[data-c] { color: var(--sb-text-muted) !important; }
body:not(.dark-mode) .sidebar .nav-title[data-c] { color: var(--sb-text-muted) !important; }
.sidebar .sd-nav > .nav-title:first-child { margin-top: 8px !important; }

/* ── ITEM ENTRANCE ANIMATION ─────────────────────────────────── */
@keyframes sbFadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sidebar .sd-item {
  animation: sbFadeIn 200ms ease both !important;
  animation-delay: calc(var(--i, 0) * 20ms) !important;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar .sd-item { animation: none !important; }
}

/* ── SUBMENU ─────────────────────────────────────────────────── */
.sidebar .collapse-menu {
  padding-inline-start: 31px !important;
  padding-inline-end: 0 !important;
}
.sidebar .collapse-menu .sd-link {
  font-size: 12.5px !important;
  padding: 5px 10px !important;
  min-height: 30px !important;
  color: var(--sb-text-muted) !important;
  font-weight: 500 !important;
}
.sidebar .collapse-menu .sd-link.active {
  background: var(--sb-active-light) !important;
  color: var(--sb-active) !important;
  font-weight: 600 !important;
}
.sidebar .collapse-menu .sd-link:hover {
  background: var(--sb-hover) !important;
  color: var(--sb-text) !important;
}
.sidebar .collapse-menu .sd-link.active::after { display: none !important; }
/* Suppress old bullet-dot from legacy CSS */
.sidebar .collapse-menu .sd-link::before      { display: none !important; content: none !important; }

/* ── NAV TEXT — fills flex space so chevron stays at the far end ── */
.sidebar .sd-link .nav-text {
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

/* ── DROPDOWN CHEVRON ────────────────────────────────────────── */
.sidebar .dropdown-toggle::after {
  margin-inline-start: auto !important;
  flex-shrink: 0 !important;
  border: none !important;
  /* fa-angle-down (\f107) rotated to point inward — direction-aware */
  content: "\f107" !important;
  font-family: "Font Awesome 6 Pro" !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  /* default (collapsed, LTR): rotate -90deg → points right */
  transform: rotate(-90deg) !important;
  transition: transform .22s ease !important;
  color: var(--sb-text-muted) !important;
  display: inline-block !important;
}
/* RTL collapsed: rotate +90deg → points left */
html[dir="rtl"] .sidebar .dropdown-toggle::after {
  transform: rotate(90deg) !important;
}
/* Expanded (both directions): point downward */
.sidebar .dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(0deg) !important;
}
.sidebar .sd-link.active.dropdown-toggle::after {
  color: var(--sb-active) !important;
}

/* ── PROFILE FOOTER ──────────────────────────────────────────── */
.sb-foot {
  padding: 8px 10px;
  border-top: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.sb-foot-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s ease;
  outline: none;
}
.sb-foot-link:hover { background: var(--sb-hover); }
.sb-foot-link:focus-visible {
  outline: 2px solid var(--sb-active);
  outline-offset: 1px;
}
.sb-foot-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--sb-border);
}
.sb-foot-avatar-placeholder {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--sb-active-light);
  color: var(--sb-active);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.sb-foot-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.sb-foot-name {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.sb-foot-role {
  display: block;
  font-size: 10.5px;
  color: var(--sb-text-muted);
  font-weight: 500;
  line-height: 1.3;
}
.sb-foot-icon {
  color: var(--sb-text-muted);
  font-size: 9px;
  flex-shrink: 0;
  opacity: .7;
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * 🔷 SECTION E2: DASHBOARD DESIGN SYSTEM
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ============ DASHBOARD DESIGN SYSTEM ============ */
.dash-page {
  padding: 24px;
  font-family: 'Zain', sans-serif;
  background: #F8FAFC;
  min-height: 100vh;
}

.dash-welcome {
  margin-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
}

.dash-welcome h1 {
  font-size: 28px;
  font-weight: 900;
  color: #0F172A;
  margin: 0;
  line-height: 1.1;
}

.dash-welcome h1 span {
  color: #4F46E5;
}

.dash-welcome p {
  font-size: 14px;
  color: #64748B;
  margin: 4px 0 0;
  max-width: 640px;
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.dash-stat-card {
  background: var(--card-bg);
  border-radius: 22px;
  padding: 24px;
  border: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  min-height: 136px;
}

.dash-stat-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: var(--brand-color);
}

.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 700;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.stat-number {
  font-size: 34px;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}

.stat-unit {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  margin-left: 6px;
}

.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 10px;
}

.trend-up {
  color: #10B981;
}

.trend-down {
  color: #EF4444;
}

.stat-spark {
  width: 100px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
}

.dash-grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.dash-grid-1-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.dash-card {
  background: var(--card-bg);
  border-radius: 24px;
  padding: 24px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
}

.dash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}

.dash-card-title {
  font-size: 16px;
  font-weight: 900;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-card-title i {
  color: var(--brand-color);
  font-size: 18px;
}

.dash-card-action {
  font-size: 13px;
  color: #4F46E5;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.2px;
  transition: color 0.2s ease;
}

.dash-card-action:hover {
  text-decoration: underline;
  color: #3730A3;
}

.overview-list {
  display: grid;
  gap: 14px;
}

.overview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid #F8FAFC;
}

.overview-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ov-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ov-label i {
  font-size: 16px;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  padding: 6px;
  background: rgba(79, 70, 229, 0.08);
  color: #4F46E5;
}

.ov-label span {
  font-size: 14px;
  color: #475569;
  font-weight: 700;
}

.ov-value {
  font-size: 16px;
  font-weight: 900;
  color: #0F172A;
}

.ov-trend {
  font-size: 12px;
  font-weight: 700;
  margin-right: 8px;
}

.dash-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.dash-table th {
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 800;
  color: #64748B;
  text-transform: uppercase;
  border-bottom: 1px solid #EFF6FF;
  text-align: start;
}

.dash-table td {
  padding: 14px 16px;
  font-size: 13px;
  color: #334155;
  font-weight: 600;
  border-bottom: 1px solid #F8FAFC;
  vertical-align: middle;
}

.dash-table tr:last-child td {
  border-bottom: none;
}

.dash-table tr:hover td {
  background: #F8FAFC;
}

.status-pill {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.pill-green {
  background: #ECFDF5;
  color: #047857;
}

.pill-yellow {
  background: #FEF3C7;
  color: #B45309;
}

.pill-blue {
  background: #EFF6FF;
  color: #1D4ED8;
}

.pill-purple {
  background: #EEF2FF;
  color: #4338CA;
}

.pill-red {
  background: #FEE2E2;
  color: #B91C1C;
}

.view-btn {
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  background: #F8FAFC;
  color: #475569;
  text-decoration: none;
  font-weight: 700;
  transition: background 0.2s ease;
}

.view-btn:hover {
  background: #E2E8F0;
  color: #334155;
}

.top-product-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}

.top-product-item+.top-product-item {
  border-top: 1px solid #F8FAFC;
}

.tp-rank {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tp-rank-1 {
  background: #FEF3C7;
  color: #B45309;
}

.tp-rank-2 {
  background: #E0E7FF;
  color: #3730A3;
}

.tp-rank-3 {
  background: #FEE2E2;
  color: #B91C1C;
}

.tp-rank-default {
  background: #F1F5F9;
  color: #64748B;
}

.tp-img {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid #EEF2FF;
}

.tp-info {
  flex: 1;
  overflow: hidden;
}

.tp-name {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tp-sales {
  font-size: 12px;
  color: #64748B;
}

.channel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.channel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.channel-name {
  font-size: 13px;
  color: #64748B;
  flex: 1;
}

.channel-pct {
  font-size: 14px;
  font-weight: 800;
  color: #0F172A;
}

@media (max-width: 1200px) {
  .dash-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-grid-2-1,
  .dash-grid-1-1 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dash-stats {
    grid-template-columns: 1fr;
  }
  .dash-page {
    padding: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * 🔷 SECTION D1: AUTH PAGES (Premium Design)
 * ═══════════════════════════════════════════════════════════════════════════════ */

/*========================*/
/* Auth Premium Design */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
}

.auth-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    min-height: 85vh;
    border-radius: 32px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.15);
    animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(40px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.login-right-content {
    padding: 40px;
}

.title-text {
    font-size: 36px;
    font-weight: 900;
    color: #0F172A;
    letter-spacing: -1px;
}

.form-control {
    height: 60px;
    border-radius: 16px;
    border: 2px solid #F1F5F9;
    background: #F8FAFC;
    font-size: 16px;
    transition: all 0.3s;
    font-weight: 500;
    color: #334155;
    padding: 0 20px;
}

.form-control:focus {
    background: #ffffff;
    border-color: #6366F1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.password-input {
    display: flex;
    align-items: center;
    border: 2px solid #F1F5F9;
    background: #F8FAFC;
    border-radius: 16px;
    height: 60px;
    padding: 0 20px;
    transition: all 0.3s;
}

.password-input:focus-within {
    background: #ffffff;
    border-color: #6366F1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.password-input input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    background: transparent;
    font-weight: 500;
    color: #334155;
}

.eye-icon {
    cursor: pointer;
    color: #94A3B8;
    display: flex;
    align-items: center;
    font-size: 18px;
    transition: color 0.3s;
}

.eye-icon:hover {
    color: #6366F1;
}

/* Auth-page button variants — scoped to avoid global override */
.auth-card .btn-primary,
.auth-page .btn-primary {
    height: 52px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary), #8B5CF6);
    border: none;
    font-weight: 700;
    font-size: 15px;
    transition: var(--transition);
    box-shadow: 0 8px 20px rgba(91, 61, 245, 0.35);
    color: #fff;
}

.auth-card .btn-primary:hover,
.auth-page .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(91, 61, 245, 0.45);
}

.btn-outline {
    height: 52px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    transition: var(--transition);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.or-divider {
    position: relative;
    text-align: center;
    margin: 24px 0;
}

.or-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #E2E8F0;
}

.or-divider span {
    position: relative;
    background: #fff;
    padding: 0 16px;
    color: #94A3B8;
    font-size: 14px;
    font-weight: 600;
}

.reveal {
    opacity: 0;
    transform: translateY(20px);
    animation: revealUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reveal.delay-1 { animation-delay: 0.1s; }
.reveal.delay-2 { animation-delay: 0.2s; }
.reveal.delay-3 { animation-delay: 0.3s; }
.reveal.delay-4 { animation-delay: 0.4s; }
.reveal.delay-5 { animation-delay: 0.5s; }

@keyframes revealUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.otp-image-wrap {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 32px 0 0 32px;
}

html[dir="rtl"] .otp-image-wrap {
    border-radius: 32px 0 0 32px;
}

html[dir="ltr"] .otp-image-wrap {
    border-radius: 0 32px 32px 0;
}

.otp-image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.4) 0%, rgba(139, 92, 246, 0.6) 100%);
    mix-blend-mode: multiply;
}

.otp-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 10s ease;
}

.auth-card:hover .otp-image-wrap img {
    transform: scale(1.05);
}

@media (max-width: 1199px) {
    .auth-page { padding: 20px; align-items: flex-start; }
    .auth-card { border-radius: 24px; min-height: auto; height: auto; }
    .otp-image-wrap { height: 350px !important; border-radius: 24px 24px 0 0; }
    html[dir="rtl"] .otp-image-wrap { border-radius: 24px 24px 0 0; }
    .auth-card .row { flex-direction: column-reverse; }
}

@media (max-width: 768px) {
    .auth-page { padding: 15px; }
    .auth-card { border-radius: 20px; }
    .otp-image-wrap { height: 250px !important; border-radius: 20px 20px 0 0; }
    html[dir="rtl"] .otp-image-wrap { border-radius: 20px 20px 0 0; }
    .title-text { font-size: 28px; }
    .auth-card .form-control, .auth-card .password-input,
    .auth-card .btn-primary, .auth-card .btn-outline { height: 48px; font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * 🔷 SECTION E2-B: DASHBOARD HERO / SLIDER  (dh-* system)
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   NEW  dh-*  PREMIUM HERO SYSTEM
   All classes prefixed dh- to avoid any legacy conflict.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── OUTER SHELL ──────────────────────────────────────────────────────────────*/
.dh {
  position:     relative;
  overflow:     hidden;
  border-radius: 22px;
  border:       1px solid rgba(255,255,255,.07);
  background:   #070d1a;
  min-height:   260px;
}
body:not(.dark-mode) .dh {
  background:   linear-gradient(135deg, #1e40af 0%, #2563eb 55%, #0ea5e9 100%);
  border-color: rgba(255,255,255,.15);
}
/* ── Admin (purple) hero variant ── */
.dh.dh--admin {
  background: linear-gradient(135deg, #2e1065 0%, #4c1d95 40%, #7c3aed 100%);
}
body:not(.dark-mode) .dh.dh--admin {
  background: linear-gradient(135deg, #3b0764 0%, #6d28d9 55%, #8b5cf6 100%);
}
.dh.dh--admin .dh-glow-a {
  background: radial-gradient(circle, rgba(167,139,250,.2) 0%, transparent 70%);
}
.dh.dh--admin .dh-glow-b {
  background: radial-gradient(circle, rgba(139,92,246,.14) 0%, transparent 70%);
}

/* ── RADIAL GLOW SPOTS ────────────────────────────────────────────────────────*/
.dh-glow {
  position:  absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index:   0;
}
.dh-glow-a {
  width:  500px; height: 500px;
  top:    -160px; inset-inline-end: 5%;
  background: radial-gradient(circle, rgba(99,102,241,.22) 0%, transparent 70%);
}
.dh-glow-b {
  width:  320px; height: 320px;
  bottom: -100px; inset-inline-start: 20%;
  background: radial-gradient(circle, rgba(14,165,233,.16) 0%, transparent 70%);
}

/* ── GRID OVERLAY ─────────────────────────────────────────────────────────────*/
.dh-grid {
  position:   absolute;
  inset:      0;
  z-index:    0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ── INNER 2-COLUMN GRID ──────────────────────────────────────────────────────*/
.dh-inner {
  position:  relative;
  z-index:   1;
  display:   grid;
  grid-template-columns: 1fr 420px;
  align-items: center;
  gap:       0;
  padding:   44px 48px;
  min-height: 260px;
}

/* ══════════════════════════════════
   LEFT PANEL
   ══════════════════════════════════*/
.dh-left {
  display:        flex;
  flex-direction: column;
  gap:            18px;
  padding-inline-end: 32px;
}

/* Live badge */
.dh-live-badge {
  display:     inline-flex;
  align-items: center;
  gap:         7px;
  font-size:   .72rem;
  font-weight: 600;
  color:       rgba(255,255,255,.5);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.dh-live-dot {
  width:        8px;
  height:       8px;
  border-radius: 50%;
  background:   #10b981;
  box-shadow:   0 0 0 3px rgba(16,185,129,.2);
  animation:    dh-pulse 2.2s ease-in-out infinite;
  flex-shrink:  0;
}
@keyframes dh-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
  50%      { box-shadow: 0 0 0 7px rgba(16,185,129,.05); }
}
.dh-live-sep { opacity: .3; }
body:not(.dark-mode) .dh-live-badge { color: rgba(255,255,255,.7); }

/* Title block */
.dh-title-block { display: flex; flex-direction: column; gap: 2px; }
.dh-greeting {
  font-size:   1rem;
  font-weight: 500;
  color:       rgba(255,255,255,.55);
  line-height: 1;
}
.dh-name {
  font-size:   2.4rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  background:  linear-gradient(90deg, #fff 0%, #a5b4fc 60%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body:not(.dark-mode) .dh-name {
  background:  linear-gradient(90deg, #fff 0%, rgba(255,255,255,.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body:not(.dark-mode) .dh-greeting { color: rgba(255,255,255,.75); }

/* Subtitle */
.dh-subtitle {
  font-size:   .88rem;
  color:       rgba(255,255,255,.4);
  margin:      0;
  line-height: 1.5;
}
body:not(.dark-mode) .dh-subtitle { color: rgba(255,255,255,.7); }

/* KPI pill row */
.dh-kpi-row {
  display:  flex;
  gap:      10px;
  flex-wrap: wrap;
}
.dh-kpi-pill {
  display:      flex;
  align-items:  center;
  gap:          10px;
  padding:      10px 16px;
  border-radius: 12px;
  background:   rgba(255,255,255,.05);
  border:       1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:   background .18s ease, border-color .18s ease;
}
.dh-kpi-pill:hover {
  background:   rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.15);
}
body:not(.dark-mode) .dh-kpi-pill {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.25);
}
body:not(.dark-mode) .dh-kpi-pill:hover {
  background: rgba(255,255,255,.22);
}
.dh-kpi-pill-ico {
  width:        32px;
  height:       32px;
  border-radius: 8px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  flex-shrink:  0;
  font-size:    .82rem;
}
.dh-kpi-v {
  font-size:   .95rem;
  font-weight: 800;
  color:       #fff;
  line-height: 1.1;
  white-space: nowrap;
}
.dh-kpi-l {
  font-size:   .65rem;
  font-weight: 600;
  color:       rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
body:not(.dark-mode) .dh-kpi-l { color: rgba(255,255,255,.65); }

/* CTA buttons */
.dh-ctas {
  display:     flex;
  gap:         10px;
  flex-wrap:   wrap;
  align-items: center;
}
.dh-btn-primary,
.dh-btn-outline {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         10px 24px;
  border-radius:   11px;
  font-size:       .875rem;
  font-weight:     700;
  text-decoration: none;
  transition:      background .16s ease, box-shadow .16s ease, transform .1s ease, border-color .16s ease;
  white-space:     nowrap;
}
.dh-btn-primary:active,
.dh-btn-outline:active { transform: scale(.97); }

.dh-btn-primary {
  background:  #6366f1;
  color:       #fff !important;
  border:      1px solid rgba(99,102,241,.5);
  box-shadow:  0 4px 20px rgba(99,102,241,.35);
}
.dh-btn-primary:hover {
  background: #4f46e5;
  box-shadow: 0 8px 28px rgba(99,102,241,.45);
  color:      #fff !important;
}
.dh-btn-outline {
  background:  rgba(255,255,255,.09);
  color:       rgba(255,255,255,.85) !important;
  border:      1px solid rgba(255,255,255,.18);
}
.dh-btn-outline:hover {
  background:  rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.3);
  color:       #fff !important;
}
body:not(.dark-mode) .dh-btn-outline {
  background:  rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
  color: #fff !important;
}

/* ══════════════════════════════════
   RIGHT PANEL  (layered)
   ══════════════════════════════════*/
.dh-right {
  position: relative;
  padding:  28px 12px 28px 0;
}
[dir="ltr"] .dh-right { padding: 28px 0 28px 12px; }

/* ── FLOATING WIDGETS (absolutely positioned, overlap the card) ──────────────*/
.dh-widget {
  position:     absolute;
  display:      flex;
  align-items:  center;
  gap:          10px;
  padding:      10px 14px;
  border-radius: 14px;
  background:   rgba(15,23,42,.75);
  border:       1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  box-shadow:   0 8px 32px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
  z-index:      10;
  white-space:  nowrap;
  animation:    dh-float 4s ease-in-out infinite;
}
body:not(.dark-mode) .dh-widget {
  background:   rgba(255,255,255,.7);
  border-color: rgba(255,255,255,.5);
  box-shadow:   0 8px 32px rgba(0,0,0,.12);
}

.dh-widget-top {
  top:               -2px;
  inset-inline-start: -24px;
  animation-delay:   0s;
}
.dh-widget-bottom {
  bottom:           -2px;
  inset-inline-end: -24px;
  animation-delay:  -2s;
}
[dir="ltr"] .dh-widget-top    { inset-inline-start: auto; inset-inline-end: -24px; }
[dir="ltr"] .dh-widget-bottom { inset-inline-end: auto; inset-inline-start: -24px; }

@keyframes dh-float {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-6px); }
}

.dh-widget-ico {
  width:        36px;
  height:       36px;
  border-radius: 10px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  font-size:    .88rem;
  flex-shrink:  0;
}
.dh-widget-val {
  font-size:   .92rem;
  font-weight: 800;
  color:       #fff;
  line-height: 1.1;
}
.dh-widget-lbl {
  font-size:   .62rem;
  font-weight: 600;
  color:       rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .04em;
}
body:not(.dark-mode) .dh-widget-val { color: #1e293b; }
body:not(.dark-mode) .dh-widget-lbl { color: #64748b; }

.dh-widget-tag {
  display:      flex;
  align-items:  center;
  justify-content: center;
  width:        22px;
  height:       22px;
  border-radius: 6px;
  background:   rgba(16,185,129,.15);
  color:        #10b981;
  font-size:    .7rem;
  margin-inline-start: 4px;
}

/* ── MAIN ANALYTICS CARD ─────────────────────────────────────────────────────*/
.dh-card {
  border-radius: 18px;
  background:   rgba(255,255,255,.05);
  border:       1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow:   0 20px 60px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:     hidden;
}
body:not(.dark-mode) .dh-card {
  background:   rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.4);
  box-shadow:   0 20px 60px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5);
}

/* Card header */
.dh-card-head {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       14px 18px 10px;
}
.dh-card-title {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-size:   .8rem;
  font-weight: 700;
  color:       rgba(255,255,255,.8);
}
.dh-card-dot {
  width:     7px;
  height:    7px;
  border-radius: 50%;
  background: #818cf8;
  flex-shrink: 0;
}
body:not(.dark-mode) .dh-card-title { color: rgba(255,255,255,.9); }

/* Period tabs */
.dh-card-tabs {
  display:  flex;
  gap:      4px;
}
.dh-tab {
  padding:      3px 10px;
  border-radius: 6px;
  font-size:    .65rem;
  font-weight:  700;
  color:        rgba(255,255,255,.35);
  cursor:       pointer;
  transition:   background .15s ease, color .15s ease;
}
.dh-tab.active,
.dh-tab:hover {
  background: rgba(255,255,255,.1);
  color:      rgba(255,255,255,.85);
}

/* Chart area */
.dh-chart-wrap {
  padding:    0 12px;
  height:     110px;
  position:   relative;
}

/* Bottom KPI strip */
.dh-card-strip {
  display:       grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items:   center;
  padding:       12px 18px;
  border-top:    1px solid rgba(255,255,255,.07);
  background:    rgba(0,0,0,.15);
}
body:not(.dark-mode) .dh-card-strip {
  background: rgba(0,0,0,.07);
  border-top-color: rgba(255,255,255,.15);
}
.dh-strip-sep {
  width:    1px;
  height:   28px;
  background: rgba(255,255,255,.1);
}
.dh-strip-kpi {
  display:     flex;
  flex-direction: column;
  align-items: center;
  gap:         2px;
}
.dh-strip-val {
  font-size:   .95rem;
  font-weight: 800;
  color:       #fff;
  line-height: 1;
}
.dh-strip-lbl {
  font-size:   .6rem;
  font-weight: 600;
  color:       rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .04em;
}
body:not(.dark-mode) .dh-strip-lbl { color: rgba(255,255,255,.65); }

/* ══════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════*/
@media (max-width: 1200px) {
  .dh-inner { grid-template-columns: 1fr 360px; padding: 36px 36px; }
  .dh-name  { font-size: 2rem; }
}

@media (max-width: 992px) {
  .dh-inner {
    grid-template-columns: 1fr;
    padding: 32px 28px;
    gap: 28px;
  }
  .dh-left { padding-inline-end: 0; gap: 16px; }
  .dh-right { padding: 0; }
  .dh-widget-top    { top: -14px; inset-inline-start: 12px; }
  .dh-widget-bottom { bottom: -14px; inset-inline-end: 12px; }
  [dir="ltr"] .dh-widget-top    { inset-inline-start: auto; inset-inline-end: 12px; }
  [dir="ltr"] .dh-widget-bottom { inset-inline-end: auto; inset-inline-start: 12px; }
  .dh-name { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .dh-inner  { padding: 24px 22px; gap: 22px; }
  .dh-name   { font-size: 1.5rem; }
  .dh-subtitle { display: none; }
  .dh-kpi-row  { gap: 8px; }
  .dh-kpi-pill { padding: 8px 12px; }
  .dh-kpi-v    { font-size: .85rem; }
  .dh-widget   { display: none; }
}

@media (max-width: 576px) {
  .dh-inner   { padding: 20px 16px; gap: 18px; }
  .dh-name    { font-size: 1.35rem; }
  .dh-right   { display: none; }
  .dh-kpi-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .dh-kpi-row::-webkit-scrollbar { display: none; }
  .dh-ctas    { gap: 8px; }
  .dh-btn-primary, .dh-btn-outline { padding: 9px 18px; font-size: .82rem; }
  .dh { min-height: unset; }
}

/* ─ END legacy noop (kept to not break CSS parse) ── */
.dash-hero-legacy-noop {
  position:        relative;
  overflow:        hidden;
  border-radius:   24px;
  border:          1px solid rgba(99,102,241,.18);
  background:      linear-gradient(135deg, #0c1445 0%, #13204a 40%, #0e1b3e 70%, #0b1230 100%);
  min-height:      220px;
  container-type:  inline-size;
}
body:not(.dark-mode) .dash-hero {
  background:      linear-gradient(135deg, #1d4ed8 0%, #2563eb 40%, #0ea5e9 80%, #06b6d4 100%);
  border-color:    rgba(255,255,255,.2);
}

/* ── DECORATIVE BLOBS ────────────────────────────────────────────────────────── */
.dash-hero-blob {
  position:   absolute;
  border-radius: 50%;
  filter:     blur(60px);
  pointer-events: none;
  z-index:    0;
}
.dash-hero-blob-1 {
  width: 380px; height: 380px;
  top: -120px; inset-inline-end: 10%;
  background: rgba(99,102,241,.2);
}
.dash-hero-blob-2 {
  width: 280px; height: 280px;
  bottom: -80px; inset-inline-start: 30%;
  background: rgba(14,165,233,.15);
}
.dash-hero-blob-3 {
  width: 200px; height: 200px;
  top: 20px; inset-inline-start: -60px;
  background: rgba(59,130,246,.12);
}

/* ── INNER LAYOUT ────────────────────────────────────────────────────────────── */
.dash-hero-inner {
  position:  relative;
  z-index:   1;
  display:   flex;
  align-items: center;
  gap:       32px;
  padding:   40px 44px;
  min-height: 220px;
}

/* ── LEFT CONTENT ────────────────────────────────────────────────────────────── */
.dash-hero-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dash-hero-eyebrow {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   .78rem;
  font-weight: 600;
  color:       rgba(255,255,255,.55);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dash-hero-live-dot {
  width:      8px;
  height:     8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.25);
  animation:  dash-hero-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes dash-hero-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,.25); }
  50%       { box-shadow: 0 0 0 6px rgba(16,185,129,.1); }
}

.dash-hero-title {
  font-size:   2rem;
  font-weight: 800;
  color:       #fff;
  line-height: 1.2;
  margin:      0;
  letter-spacing: -0.02em;
}
.dash-hero-name {
  color: rgba(165,180,252,1); /* indigo-300 */
}
body:not(.dark-mode) .dash-hero-name { color: rgba(255,255,255,.9); }

.dash-hero-sub {
  font-size:   .9rem;
  color:       rgba(255,255,255,.5);
  margin:      0;
  line-height: 1.5;
}
body:not(.dark-mode) .dash-hero-sub { color: rgba(255,255,255,.75); }

/* ── QUICK STATS ROW ─────────────────────────────────────────────────────────── */
.dash-hero-stats {
  display:     flex;
  align-items: center;
  gap:         0;
  flex-wrap:   wrap;
  background:  rgba(255,255,255,.06);
  border:      1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  overflow:    hidden;
  width:       fit-content;
  max-width:   100%;
}
body:not(.dark-mode) .dash-hero-stats {
  background: rgba(0,0,0,.12);
  border-color: rgba(255,255,255,.2);
}
.dash-hero-stat {
  display:     flex;
  flex-direction: column;
  padding:     14px 24px;
  gap:         3px;
}
.dash-hero-stat-sep {
  width:  1px;
  align-self: stretch;
  background: rgba(255,255,255,.12);
}
.dash-hero-stat-val {
  font-size:   1.1rem;
  font-weight: 800;
  color:       #fff;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.dash-hero-stat-label {
  font-size:   .68rem;
  font-weight: 600;
  color:       rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
body:not(.dark-mode) .dash-hero-stat-val   { color: #fff; }
body:not(.dark-mode) .dash-hero-stat-label { color: rgba(255,255,255,.65); }

/* ── CTAs ────────────────────────────────────────────────────────────────────── */
.dash-hero-actions {
  display:  flex;
  flex-wrap: wrap;
  gap:      10px;
  align-items: center;
}
.dash-hero-btn-primary,
.dash-hero-btn-secondary,
.dash-hero-btn-ghost {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         10px 22px;
  border-radius:   12px;
  font-size:       .875rem;
  font-weight:     700;
  text-decoration: none;
  transition:      background-color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
  white-space:     nowrap;
}
.dash-hero-btn-primary:active,
.dash-hero-btn-secondary:active,
.dash-hero-btn-ghost:active { transform: scale(.97); }

.dash-hero-btn-primary {
  background:  #6366f1;
  color:       #fff;
  border:      1px solid rgba(99,102,241,.4);
  box-shadow:  0 4px 16px rgba(99,102,241,.3);
}
.dash-hero-btn-primary:hover {
  background: #4f46e5;
  box-shadow: 0 8px 24px rgba(99,102,241,.4);
  color:      #fff;
}

.dash-hero-btn-secondary {
  background:  rgba(255,255,255,.1);
  color:       #fff;
  border:      1px solid rgba(255,255,255,.2);
}
.dash-hero-btn-secondary:hover {
  background: rgba(255,255,255,.18);
  color:      #fff;
  border-color: rgba(255,255,255,.35);
}

.dash-hero-btn-ghost {
  background:  transparent;
  color:       rgba(255,255,255,.65);
  border:      1px solid rgba(255,255,255,.12);
  padding:     10px 16px;
}
.dash-hero-btn-ghost:hover {
  color:       rgba(255,255,255,.9);
  background:  rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.25);
}

/* ── RIGHT VISUAL PANEL ──────────────────────────────────────────────────────── */
.dash-hero-visual {
  position:   relative;
  width:      340px;
  flex-shrink: 0;
  display:    flex;
  flex-direction: column;
  gap:        12px;
}

/* ── FLOATING KPI CHIPS ──────────────────────────────────────────────────────── */
.dash-hero-chip {
  display:      flex;
  align-items:  center;
  gap:          12px;
  padding:      12px 16px;
  border-radius: 16px;
  background:   rgba(255,255,255,.07);
  border:       1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:   0 4px 24px rgba(0,0,0,.2);
  animation:    dash-chip-float 4s ease-in-out infinite;
}
.dash-hero-chip-2 { animation-delay: -2s; }

@keyframes dash-chip-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

body:not(.dark-mode) .dash-hero-chip {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.35);
  box-shadow:   0 4px 24px rgba(0,0,0,.12);
}

.dash-hero-chip-icon {
  width:        36px;
  height:       36px;
  border-radius: 10px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  font-size:    .9rem;
  flex-shrink:  0;
}
.dash-hero-chip-label {
  font-size:   .7rem;
  font-weight: 600;
  color:       rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dash-hero-chip-val {
  font-size:   1rem;
  font-weight: 800;
  color:       #fff;
}

/* ── MINI CHART CARD ─────────────────────────────────────────────────────────── */
.dash-hero-chart-card {
  background:   rgba(255,255,255,.07);
  border:       1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding:      16px 18px 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body:not(.dark-mode) .dash-hero-chart-card {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.35);
}
.dash-hero-chart-top {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dash-hero-chart-title {
  font-size:   .8rem;
  font-weight: 700;
  color:       rgba(255,255,255,.8);
}
.dash-hero-chart-period {
  font-size:   .68rem;
  font-weight: 600;
  color:       rgba(255,255,255,.4);
}
.dash-hero-chart-area {
  height:   80px;
  position: relative;
}
.dash-hero-chart-footer {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  margin-top:    10px;
  padding-top:   8px;
  border-top:    1px solid rgba(255,255,255,.08);
}
.dash-hero-products-count {
  font-size:   .72rem;
  font-weight: 600;
  color:       rgba(255,255,255,.45);
  display:     flex;
  align-items: center;
  gap:         5px;
}
.dash-hero-trend-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       3px 10px;
  border-radius: 20px;
  font-size:     .68rem;
  font-weight:   700;
  background:    rgba(16,185,129,.15);
  color:         #10b981;
  border:        1px solid rgba(16,185,129,.2);
}

/* ── VENDOR DASHBOARD responsive ─────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .dash-hero-visual { width: 300px; }
  .dash-hero-title  { font-size: 1.75rem; }
}

@media (max-width: 992px) {
  .dash-hero-inner  { flex-direction: column; padding: 32px 28px; gap: 24px; }
  .dash-hero-visual { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .dash-hero-chip   { flex: 1; min-width: 160px; animation: none; }
  .dash-hero-chart-card { flex: 2; min-width: 240px; }
  .dash-hero-title  { font-size: 1.6rem; }
}

@media (max-width: 768px) {
  .dash-hero-inner  { padding: 24px 20px; gap: 20px; }
  .dash-hero-title  { font-size: 1.35rem; }
  .dash-hero-sub    { display: none; }
  .dash-hero-stat   { padding: 10px 16px; }
  .dash-hero-stat-val { font-size: .95rem; }
  .dash-hero-btn-ghost { display: none; }
  .dash-hero-chip   { min-width: 140px; }
}

@media (max-width: 576px) {
  .dash-hero-inner  { padding: 20px 16px; }
  .dash-hero-title  { font-size: 1.2rem; }
  .dash-hero-stats  { width: 100%; }
  .dash-hero-stat   { padding: 8px 12px; }
  .dash-hero-visual { display: none; }
  .dash-hero-eyebrow { font-size: .7rem; }
  .dash-hero-actions { gap: 8px; }
  .dash-hero-btn-primary,
  .dash-hero-btn-secondary { padding: 9px 18px; font-size: .82rem; }
}

/* ── vd-* component responsive (inside style.css, not responsive.css) ─────────── */
@media (max-width: 576px) {
  .vd-kpi-card   { padding: 1rem 1rem 0; }
  .vd-kpi-icon   { width: 38px; height: 38px; font-size: 1rem; margin-bottom: .75rem; }
  .vd-kpi-value  { font-size: 1.2rem; }
  .vd-kpi-spark  { height: 36px; margin: 0 -1rem; }
  .vd-card       { padding: 1rem; }
  .vd-card-head  { margin-bottom: 1rem; padding-bottom: .75rem; }
  .vd-table th, .vd-table td { padding: .6rem .75rem; font-size: .8rem; }
  .vd-status-name { width: 70px; font-size: .75rem; }
  .vd-product-row { gap: .5rem; padding: .5rem; }
  .vd-product-img { width: 34px; height: 34px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * 🔷 SECTION E3: MERGED ADMIN.CSS COMPONENTS
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ============================================================ */
/* =================== MERGED FROM ADMIN.CSS =================== */
/* ============================================================ */

/* Base styles and variables for .pro-table dark-mode surface colours */
body.dark-mode {
    --body-bg: #121212;
    --body-color: #e0e0e0;
    --surface-bg: #1e1e1e;
    --surface-alt-bg: #2a2a2a;
    --link-color: #60a5fa;
    --link-hover: #93c5fd;
    --scrollbar-thumb: #333333;
    --scrollbar-track: #1e1e1e;
    /* NOTE: --primary and --secondary removed — owned by tokens.css */
}

/* Modern Table Design */
.pro-table {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
}

.pro-table thead td,
.pro-table thead th {
    padding: 14px 12px;
    font-weight: 800;
    color: var(--body-color);
    background: var(--surface-bg);
    border: 0 !important;
}

.pro-table tbody tr {
    background: var(--surface-bg);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .06);
    border-radius: 14px;
    transition: .25s;
}

.pro-table tbody tr:hover {
    transform: translateY(-3px);
}

.pro-table tbody td {
    padding: 14px 12px;
    border: 0 !important;
}

/* DataTables layout adjustments */
.dataTables_wrapper .row:first-child {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.dt-buttons {
    order: 0;
    margin-left: 0 !important;
    margin-right: auto !important;
    display: flex;
    justify-content: flex-start;
    direction: ltr !important;
}

.dataTables_length { order: 2; }
.dataTables_filter { order: 3; margin-right: 10px; }

@media(max-width:768px) {
    .dataTables_wrapper .row:first-child { display: block !important; }
    .dataTables_length, .dt-buttons, .dataTables_filter {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 8px;
    }
    .dataTables_filter input { width: 100% !important; }
}

/* Table container utilities */
.card .dataTables_wrapper { padding: 0 5px; }
.table-responsive { width: 100%; overflow-x: auto; }
.dataTables_wrapper { width: 100% !important; }

/* Language Switcher */
.lang-switcher { display: flex; align-items: center; gap: 0.5rem; }
.lang-switcher .header-action-btn {
    display: flex; align-items: center; gap: 0.25rem;
    padding: 0.25rem 0.5rem; border: 1px solid var(--border-color);
    border-radius: 0.5rem; background: var(--surface-bg);
    color: var(--body-color); transition: background 0.3s, color 0.3s;
}
.lang-switcher .header-action-btn:hover { background: var(--surface-alt-bg); }
.lang-switcher .dropdown-item img.lang-flag {
    width: 20px; height: 20px; border-radius: 50%;
    object-fit: cover; border: 1px solid var(--border-color);
    margin-right: 0.5rem;
}

/* Utility classes */
.text-xs { font-size: 12px; }
.text-slate-400 { color: #94A3B8; }
.text-slate-500 { color: #64748B; }
.action-icon-btn:hover {
    background: var(--brand-color);
    color: #fff;
}

/* Tokens removed — now owned by tokens.css (absorbed in Phase A cleanup 2026-05-25) */

/* =================================================================
   REUSABLE SAAS COMPONENTS
   ================================================================= */

/* --- Layout --- */
body { background-color: var(--bg-body) !important; }
.content-wrapper { background-color: var(--bg-body); }

/* --- Stat Cards --- */
.saas-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
    z-index: 1;
}
.saas-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-color), #60a5fa);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.saas-stat-card:hover { 
    transform: translateY(-5px); 
    box-shadow: var(--shadow-lg); 
    border-color: var(--brand-light);
}
.saas-stat-card:hover::before {
    opacity: 1;
}
.saas-stat-card::after {
    content: '';
    position: absolute;
    top: -50%; right: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, var(--brand-light) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
    pointer-events: none;
}
.saas-stat-card:hover::after {
    opacity: 0.5;
}
body.dark-mode .saas-stat-card {
    background: linear-gradient(145deg, var(--card-bg) 0%, #171f2e 100%);
}
.saas-stat-icon {
    width: 52px; height: 52px;
    border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin-bottom: 1.25rem;
    background: var(--brand-light);
    color: var(--brand-color);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.1);
    transition: transform 0.3s ease;
}
.saas-stat-card:hover .saas-stat-icon {
    transform: scale(1.1) rotate(-5deg);
}
.saas-stat-label {
    font-size: 0.875rem; font-weight: 600;
    color: var(--text-secondary);
    display: block; margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}
.saas-stat-value {
    font-size: 1.875rem; font-weight: 800;
    color: var(--text-primary); margin: 0; line-height: 1.2;
    letter-spacing: -0.02em;
}

/* --- Cards --- */
.saas-card {
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    box-shadow: var(--shadow-md);
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.saas-card:hover {
    box-shadow: var(--shadow-lg);
}
.saas-card-header {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-soft);
}
.saas-card-title {
    display: flex; align-items: center; gap: 0.75rem;
    font-size: 1.125rem; font-weight: 700;
    color: var(--text-primary); margin: 0;
    letter-spacing: -0.01em;
}
.saas-card-title h5 { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--text-primary); }

/* --- Tables --- */
.saas-table-wrap { width: 100%; overflow-x: auto; }
.saas-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.saas-table th {
    padding: 0.875rem 1rem;
    font-size: 0.6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
}
.saas-table td {
    padding: 0.875rem 1rem;
    font-size: 0.875rem; color: var(--text-primary);
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}
.saas-table tr:last-child td { border-bottom: none; }
.saas-table tbody tr { transition: background 0.15s; }
.saas-table tbody tr:hover td { background: var(--bg-secondary); }

/* --- Badges --- */
.saas-badge {
    padding: 0.3125rem 0.75rem; border-radius: 2rem;
    font-size: 0.6875rem; font-weight: 700;
    display: inline-flex; align-items: center; gap: 0.25rem;
    white-space: nowrap;
}

/* --- Buttons --- */
.btn-saas-primary {
    background: linear-gradient(135deg, var(--brand-color), #3b82f6); color: #fff !important;
    border: none; border-radius: var(--radius-md);
    padding: 0.625rem 1.25rem;
    font-weight: 600; font-size: 0.875rem;
    display: inline-flex; align-items: center; gap: 0.5rem;
    cursor: pointer; text-decoration: none;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 6px rgba(29, 110, 245, 0.2);
}
.btn-saas-primary:hover {
    background: linear-gradient(135deg, var(--brand-hover), #2563eb); color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(29, 110, 245, 0.3);
    text-decoration: none;
}
.btn-saas-light {
    background: var(--bg-secondary); color: var(--text-primary);
    border: 1px solid var(--border-soft); border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    font-weight: 600; font-size: 0.8125rem;
    display: inline-flex; align-items: center; gap: 0.5rem;
    cursor: pointer; text-decoration: none;
    transition: all 0.2s;
}
.btn-saas-light:hover { 
    background: var(--card-bg); 
    border-color: var(--brand-color); 
    color: var(--brand-color); 
    text-decoration: none; 
    box-shadow: var(--shadow-sm);
}

/* --- Avatar --- */
.saas-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-light), rgba(29, 110, 245, 0.2)); 
    color: var(--brand-color);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.875rem; flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: var(--shadow-sm);
}
body.dark-mode .saas-avatar { border-color: var(--card-bg); }

/* --- Wave --- */
.wave { display: inline-block; animation: wave-anim 2.5s infinite; transform-origin: 70% 70%; }
@keyframes wave-anim {
    0%,60%,100% { transform: rotate(0deg); }
    10%,30%      { transform: rotate(14deg); }
    20%          { transform: rotate(-8deg); }
    40%          { transform: rotate(-4deg); }
    50%          { transform: rotate(10deg); }
}

/* =================================================================
   DARK MODE — Global overrides using new tokens
   ================================================================= */
body.dark-mode .card,
body.dark-mode .bg-white,
body.dark-mode .customers-card,
body.dark-mode .widget-card,
body.dark-mode .preview-panel,
body.dark-mode .offcanvas,
body.dark-mode .saas-card,
body.dark-mode .saas-stat-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-primary) !important;
}
body.dark-mode .bg-light { background-color: var(--bg-secondary) !important; }
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text {
    background-color: var(--bg-body) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-primary) !important;
}
body.dark-mode .dropdown-menu {
    background-color: var(--card-bg) !important;
    border-color: var(--border-soft) !important;
}
body.dark-mode .dropdown-item { color: var(--text-primary) !important; }
body.dark-mode .dropdown-item:hover { background-color: var(--bg-secondary) !important; }
body.dark-mode .saas-stat-value,
body.dark-mode .saas-card-title h5 { color: var(--text-primary) !important; }
body.dark-mode .saas-stat-label { color: var(--text-secondary) !important; }
body.dark-mode .btn-saas-light { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-soft); }
body.dark-mode .saas-avatar { background: var(--bg-secondary); }
body.dark-mode .saas-table th { background: var(--bg-secondary); }
body.dark-mode .saas-table td { border-bottom-color: rgba(255,255,255,0.04); }
/* body.dark-mode .page-topbar handled by --tb-bg token in SECTION E1-A */
body.dark-mode .modal-content { background-color: var(--card-bg) !important; border-color: var(--border-soft) !important; color: var(--text-primary) !important; }
body.dark-mode .modal-header,
body.dark-mode .modal-footer { border-color: var(--border-soft) !important; }
body.dark-mode .dataTables_filter input,
body.dark-mode .dataTables_length select { background: var(--bg-body) !important; border-color: var(--border-soft) !important; color: var(--text-primary) !important; }
body.dark-mode table th { color: var(--text-secondary) !important; }
body.dark-mode table td { color: var(--text-primary) !important; }
body.dark-mode .alert-warning { background-color: rgba(245,158,11,0.15) !important; border-color: rgba(245,158,11,0.3) !important; color: #fbbf24 !important; }
/* Prof-card dark compat */
body.dark-mode .prof-card { background: var(--card-bg); border-color: var(--border-soft); }
body.dark-mode .prof-table th { background-color: rgba(255,255,255,0.02); color: var(--text-secondary); }
body.dark-mode .prof-table td { border-bottom-color: rgba(255,255,255,0.03); color: var(--text-primary); }
body.dark-mode .table-container { background: var(--card-bg); border-color: var(--border-soft); }
body.dark-mode .filter-input { background: var(--bg-body); border-color: var(--border-soft); color: var(--text-primary); }
body.dark-mode .text-slate-400,
body.dark-mode .text-slate-500 { color: var(--text-muted) !important; }
body.dark-mode .text-slate-900 { color: var(--text-primary) !important; }
body.dark-mode .text-indigo-600 { color: #6366f1 !important; }

/* --- Notification dropdown dark mode --- */
body.dark-mode .notification-dropdown { background-color: var(--card-bg) !important; border-color: var(--border-soft) !important; }
body.dark-mode .notification-item { border-bottom-color: var(--border-soft) !important; color: var(--text-primary) !important; }
body.dark-mode .notification-item:hover { background: var(--bg-secondary) !important; }
body.dark-mode .notification-item.unread { background: rgba(59,130,246,0.08) !important; }
body.dark-mode .noti-icon { background: var(--bg-secondary) !important; }
body.dark-mode .p-3.bg-light.border-bottom { background-color: var(--bg-secondary) !important; border-color: var(--border-soft) !important; color: var(--text-primary) !important; }
body.dark-mode .p-2.border-top.bg-light { background-color: var(--bg-secondary) !important; border-color: var(--border-soft) !important; }

/* --- Right admin panel sidebar (role-based) --- */
body.dark-mode #adminRightSidebar,
body.dark-mode .admin-right-panel,
body.dark-mode [class*="role-sidebar"] { background-color: var(--card-bg) !important; border-color: var(--border-soft) !important; }

/* --- Welcome heading text color fix --- */
.dash-page h1 { color: var(--text-primary); }
.dash-page p { color: var(--text-secondary); }
body.dark-mode .dash-page h1 { color: var(--text-primary) !important; }
body.dark-mode .dash-page p { color: var(--text-secondary) !important; }

/* --- Topbar toggle dark icon fix --- */
body.dark-mode #themeToggle .dark-icon { display: none; }
body.dark-mode #themeToggle .light-icon { display: inline-block !important; }
body:not(.dark-mode) #themeToggle .light-icon { display: none; }
body:not(.dark-mode) #themeToggle .dark-icon { display: inline-block; }

/* --- Page topbar header items dark --- */
body.dark-mode .page-topbar .topbar-title { color: var(--text-primary); }
body.dark-mode .page-topbar .header-action-btn { color: var(--text-secondary) !important; }
body.dark-mode .page-topbar .header-action-btn:hover { color: var(--text-primary) !important; background: var(--bg-secondary) !important; }

/* --- Transition on theme switch for smooth UX --- */
body, .saas-card, .saas-stat-card, .page-topbar, .card, .sidebar, .modal-content, .form-control, .form-select {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease;
}

/* ================================================================
   RTL / LTR VENDOR DASHBOARD FIXES
   ================================================================ */
/* Product row hover direction */
[dir="ltr"] .vd-product-row:hover { transform: translateX(3px); }
[dir="rtl"] .vd-product-row:hover { transform: translateX(-3px); }

/* Link button arrow flip */
[dir="ltr"] .vd-link-btn .fa-arrow-left { transform: rotate(180deg); }
[dir="rtl"] .vd-link-btn .fa-arrow-left { transform: none; }

/* Table alignment */
[dir="rtl"] .vd-table th,
[dir="rtl"] .vd-table td { text-align: right; }
[dir="ltr"] .vd-table th,
[dir="ltr"] .vd-table td { text-align: left; }

/* Status bar direction */
[dir="rtl"] .vd-status-bar { margin-right: 0; }

/* ================================================================
   VENDOR DASHBOARD — Component Definitions
   Migrated from partials/body.blade.php embedded <style> block.
   ================================================================ */

/* --- Layout --- */
.vd-topbar { padding: .5rem 0 .25rem; }
.vd-greeting { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
.vd-name { color: var(--brand-color); }
.vd-subtext { font-size: .875rem; color: var(--text-secondary); margin-top: .2rem; }

/* --- Buttons --- */
.vd-btn-primary { display: inline-flex; align-items: center; gap: .5rem; background: var(--brand-color); color: #fff; border: none; border-radius: .625rem; padding: .625rem 1.25rem; font-size: .875rem; font-weight: 600; text-decoration: none; transition: background .2s, transform .2s, box-shadow .2s; }
.vd-btn-primary:hover { background: var(--brand-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(29,110,245,.3); }
.vd-btn-outline { display: inline-flex; align-items: center; gap: .5rem; background: transparent; color: var(--brand-color); border: 1.5px solid var(--brand-color); border-radius: .625rem; padding: .575rem 1.2rem; font-size: .875rem; font-weight: 600; text-decoration: none; transition: background .2s, color .2s; }
.vd-btn-outline:hover { background: var(--brand-color); color: #fff; }

/* --- KPI Cards --- */
.vd-kpi-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 1.25rem; padding: 1.5rem 1.5rem 0; position: relative; overflow: hidden; transition: transform .3s cubic-bezier(0.4,0,0.2,1), box-shadow .3s, border-color .3s; z-index: 1; }
.vd-kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); opacity: .3; transition: opacity .3s; }
.vd-kpi-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.vd-kpi-card:hover::before { opacity: 1; }
.vd-kpi-icon { width: 52px; height: 52px; border-radius: .875rem; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1.25rem; transition: transform .3s, background .3s, color .3s; }
.vd-kpi-card:hover .vd-kpi-icon { transform: scale(1.1) rotate(-5deg); background: var(--accent); color: #fff; }
.vd-kpi-body { margin-bottom: 1rem; }
.vd-kpi-label { display: block; font-size: .75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .25rem; }
.vd-kpi-value { font-size: 1.625rem; font-weight: 900; color: var(--text-primary); line-height: 1.1; letter-spacing: -0.02em; }
.vd-kpi-spark { height: 42px; margin: 0 -1.5rem; opacity: .7; }
.vd-kpi-card.card-pixel { --accent: #0891b2; --accent-bg: rgba(8,145,178,.1); }

/* --- Generic Card --- */
.vd-card { background: var(--card-bg); border: 1px solid var(--border-soft); border-radius: 1.25rem; padding: 1.5rem; box-shadow: var(--shadow-md); transition: box-shadow .3s; }
.vd-card:hover { box-shadow: var(--shadow-lg); }
.vd-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-soft); }
.vd-card-title { display: flex; align-items: center; gap: .75rem; font-size: 1.0625rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; }
.vd-select { border: 1px solid var(--border-soft); border-radius: .625rem; padding: .4rem .8rem; font-size: .8125rem; font-weight: 600; color: var(--text-primary); background: var(--bg-secondary); cursor: pointer; transition: border-color .2s; }
.vd-select:hover { border-color: var(--brand-color); }
.vd-link-btn { font-size: .875rem; font-weight: 700; color: var(--brand-color); text-decoration: none; display: flex; align-items: center; gap: .4rem; transition: gap .2s, color .2s; }
.vd-link-btn:hover { gap: .6rem; color: var(--brand-hover); }

/* --- Status rows --- */
.vd-status-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.vd-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.vd-status-name { font-size: .8rem; font-weight: 600; color: var(--text-primary); width: 90px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-status-bar-wrap { flex: 1; height: 5px; background: var(--bg-secondary); border-radius: 10px; overflow: hidden; }
.vd-status-bar { height: 100%; border-radius: 10px; transition: width .6s ease; }
.vd-status-count { font-size: .75rem; font-weight: 700; width: 28px; text-align: end; flex-shrink: 0; }

/* --- Table --- */
.vd-table-wrap { overflow-x: auto; width: 100%; }
.vd-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.vd-table th { padding: .75rem 1rem; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); background: var(--bg-secondary); border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.vd-table td { padding: .875rem 1rem; font-size: .875rem; color: var(--text-primary); border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.vd-table tr:last-child td { border-bottom: none; }
.vd-table tbody tr { transition: background .15s; }
.vd-table tbody tr:hover td { background: var(--bg-secondary); }
.vd-order-num { font-weight: 800; color: var(--brand-color); font-size: .875rem; }
.vd-amount { font-weight: 800; color: var(--text-primary); }
.vd-time { font-size: .8rem; color: var(--text-muted); }
.vd-badge { display: inline-flex; align-items: center; padding: .3rem .75rem; border-radius: 2rem; font-size: .6875rem; font-weight: 700; white-space: nowrap; }

/* --- Avatar --- */
.vd-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-light), rgba(29,110,245,.2)); color: var(--brand-color); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .875rem; flex-shrink: 0; border: 2px solid var(--card-bg); box-shadow: var(--shadow-sm); }

/* --- Rank badge --- */
.vd-rank { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--bg-secondary), var(--card-bg)); color: var(--text-primary); border: 1.5px solid var(--border-soft); display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 800; flex-shrink: 0; box-shadow: var(--shadow-sm); }

/* --- Top Products --- */
.vd-products-list { display: flex; flex-direction: column; gap: .5rem; }
.vd-product-row { display: flex; align-items: center; gap: .75rem; padding: .625rem; border-radius: .75rem; border: 1px solid var(--border-soft); background: var(--bg-body); transition: background .2s, border-color .2s, transform .2s; }
.vd-product-img { width: 40px; height: 40px; border-radius: .625rem; object-fit: cover; flex-shrink: 0; }
.vd-product-info { flex: 1; min-width: 0; }
.vd-product-name { font-size: .8125rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-product-sold { font-size: .75rem; color: var(--text-muted); }
.vd-product-bar-wrap { width: 50px; height: 5px; background: var(--bg-secondary); border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.vd-product-bar { height: 100%; background: linear-gradient(90deg, var(--brand-color), #a5b4fc); border-radius: 10px; }

/* --- Responsive --- */
@media (max-width: 768px) {
  .vd-kpi-card { padding: 1.25rem 1.25rem 0; }
  .vd-kpi-icon { width: 42px; height: 42px; font-size: 1.15rem; margin-bottom: 1rem; }
  .vd-kpi-label { font-size: .7rem; }
  .vd-kpi-value { font-size: 1.4rem; }
  .vd-kpi-spark { margin: 0 -1.25rem; }
  .vd-card { padding: 1.25rem; }
}

/* --- Blue dashboard sidebar active --- */
.sidebar .navbar-nav .nav-item .nav-link.active {
  background: var(--brand-color) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(29,110,245,.3);
}
.sidebar .navbar-nav .nav-item .nav-link:hover {
  background: rgba(29,110,245,.15) !important;
  color: #fff !important;
}

/* --- Brand-primary btn --- */
.btn-saas-primary { background: var(--primary); }
.btn-saas-primary:hover { background: var(--primary-hover); box-shadow: 0 4px 12px rgba(91,61,245,.3); }

/* --- Dark mode --- */
body.dark-mode .vd-kpi-card,
body.dark-mode .vd-card { background: var(--card-bg); border-color: var(--border-soft); }
body.dark-mode .vd-kpi-icon { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
body.dark-mode .vd-greeting { color: var(--text-primary); }
body.dark-mode .vd-subtext { color: var(--text-secondary); }
body.dark-mode .vd-kpi-label { color: var(--text-secondary); }
body.dark-mode .vd-kpi-value { color: var(--text-primary); }
body.dark-mode .vd-card-title { color: var(--text-primary); }
body.dark-mode .vd-select { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-soft); }
body.dark-mode .vd-table th { background: var(--bg-secondary); color: var(--text-secondary); }
body.dark-mode .vd-table td { color: var(--text-primary); border-color: var(--border-soft); }
body.dark-mode .vd-table tbody tr:hover td { background: var(--bg-secondary); }
body.dark-mode .vd-product-row { background: var(--bg-body); border-color: var(--border-soft); }
body.dark-mode .vd-product-row:hover { background: var(--bg-secondary); }
body.dark-mode .vd-product-name { color: var(--text-primary); }
body.dark-mode .vd-product-bar-wrap,
body.dark-mode .vd-status-bar-wrap { background: var(--bg-secondary); }
body.dark-mode .vd-rank { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-soft); }

/* ================================================================
   TABLE & LIST UTILITIES
   Migrated from: orderstable, product, customers pages
   ================================================================ */

/* Action button (icon-only) */
.btn-action {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: none;
  transition: transform var(--duration-fast) var(--ease-base), filter var(--duration-fast);
  font-size: .9375rem;
}
.btn-action:hover { transform: translateY(-2px); filter: brightness(.95); }

/* Clickable table row */
.clickable-row { transition: background var(--duration-fast) var(--ease-base); }
.clickable-row:hover { background-color: var(--accent-soft) !important; }

/* Product / item thumbnail */
.product-thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 2px solid var(--bg-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-base), box-shadow var(--duration-fast);
}
.product-thumb:hover { transform: scale(1.1); box-shadow: var(--shadow-md); }

/* User / customer avatar */
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-base), box-shadow var(--duration-fast);
}
.avatar:hover { transform: scale(1.1); box-shadow: var(--shadow-md); }

/* Stats card icon */
.stats-card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background-color: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

/* Mobile card-stack table — opt-in via .table-card-mobile on the <table> */
@media (max-width: 768px) {
  .table-card-mobile thead { display: none; }
  .table-card-mobile tr {
    display: block;
    margin-bottom: var(--space-6);
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
  }
  .table-card-mobile td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    padding: var(--space-3) 0;
  }
  .table-card-mobile td::before {
    content: attr(data-label);
    font-weight: 800;
    color: var(--text-primary);
    font-size: .75rem;
    text-transform: uppercase;
  }
  .table-card-mobile td.col-actions {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-soft);
    justify-content: center;
    gap: var(--space-3);
  }
}

/* .page-topbar shell → SECTION E1-A */
.page-topbar .container-fluid { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.topbar-left { display: flex; align-items: center; gap: .75rem; }
.topbar-right { display: flex; align-items: center; gap: .5rem; }

/* Toggle button */
#mainSidebarToggle {
    width: 36px; height: 36px; border-radius: .5rem;
    background: var(--bg-secondary); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); font-size: .9rem;
    transition: all .2s;
}
#mainSidebarToggle:hover { background: var(--brand-color); color: #fff; }

/* Page breadcrumb/title */
.topbar-title {
    font-size: .9375rem; font-weight: 700; color: var(--text-primary);
    padding: .2rem .7rem; background: var(--bg-secondary);
    border-radius: .5rem; border: 1px solid var(--border-soft);
}

/* Store link */
.header-store-link {
    display: inline-flex; align-items: center; gap: .375rem;
    font-size: .8125rem; font-weight: 600;
    color: var(--text-secondary); text-decoration: none;
    padding: .35rem .75rem; border-radius: .5rem;
    border: 1px solid var(--border-soft); background: var(--bg-secondary);
    transition: all .2s;
}
.header-store-link:hover { background: var(--brand-color); color: #fff; border-color: var(--brand-color); }

/* Generic header action button */
.header-action-btn {
    width: 38px; height: 38px; border-radius: .75rem;
    background: var(--bg-secondary); border: 1px solid var(--border-soft);
    color: var(--text-secondary); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; text-decoration: none;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1); position: relative;
    overflow: hidden;
}
.header-action-btn:hover { background: var(--brand-light); color: var(--brand-color); border-color: var(--brand-light); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* Dark/light toggle icon state */
#themeToggle .dark-icon, #themeToggle .light-icon {
    position: absolute;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}
body:not(.dark-mode) #themeToggle .light-icon { opacity: 0; transform: rotate(90deg) scale(0.5); }
body:not(.dark-mode) #themeToggle .dark-icon  { opacity: 1; transform: rotate(0) scale(1); }
body.dark-mode       #themeToggle .dark-icon  { opacity: 0; transform: rotate(-90deg) scale(0.5); }
body.dark-mode       #themeToggle .light-icon { opacity: 1; transform: rotate(0) scale(1); }

/* Dropdown animation */
.notif-dropdown {
    transform-origin: top right;
    animation: dropdownFadeIn 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}
html[dir="rtl"] .notif-dropdown { transform-origin: top left; }
@keyframes dropdownFadeIn {
    0% { opacity: 0; transform: translateY(12px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Language switcher pill */
.lang-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .65rem; border-radius: .5rem;
    background: var(--bg-secondary); border: 1px solid var(--border-soft);
    color: var(--text-secondary); font-size: .8125rem; font-weight: 700;
    cursor: pointer; transition: all .2s; white-space: nowrap;
}
.lang-pill img { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; }
.lang-pill .lang-code { font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.lang-pill:hover { background: var(--brand-color); color: #fff; border-color: var(--brand-color); }
.lang-dropdown .dropdown-item {
    display: flex; align-items: center; gap: .625rem;
    padding: .6rem 1rem; font-size: .8125rem; font-weight: 600;
    color: var(--text-primary);
}
.lang-dropdown .dropdown-item img { width: 22px; height: 16px; border-radius: 2px; object-fit: cover; }
.lang-dropdown .dropdown-item .lang-code-sm { font-size: .7rem; font-weight: 800; text-transform: uppercase; color: var(--text-muted); }
.lang-dropdown .dropdown-item:hover { background: var(--bg-secondary); }
.lang-dropdown .dropdown-item.active { background: var(--brand-light); color: var(--brand-color); }

/* Header user button */
.header-user-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--bg-secondary); border: 1px solid var(--border-soft);
    border-radius: 2rem; padding: .25rem .75rem .25rem .25rem;
    cursor: pointer; transition: all .2s;
}
.header-user-btn:hover { border-color: var(--brand-color); box-shadow: 0 0 0 3px var(--brand-light); }
.header-user-btn img {
    width: 30px; height: 30px; border-radius: 50%;
    object-fit: cover; object-position: center;
    border: 2px solid var(--brand-color);
}
.user-name { font-size: .8125rem; font-weight: 700; color: var(--text-primary); }

/* Dark header overrides */
/* body.dark-mode .page-topbar handled by --tb-bg token in SECTION E1-A */
body.dark-mode .topbar-title { color: var(--text-primary); background: var(--bg-secondary); border-color: var(--border-soft); }
body.dark-mode #mainSidebarToggle { background: var(--bg-secondary); color: var(--text-secondary); }
body.dark-mode .header-action-btn { background: var(--bg-secondary); border-color: var(--border-soft); color: var(--text-secondary); }
body.dark-mode .header-action-btn:hover { background: rgba(255,255,255,0.05); color: #f8fafc; border-color: var(--border-soft); }
body.dark-mode .header-store-link { background: var(--bg-secondary); border-color: var(--border-soft); color: var(--text-secondary); }
body.dark-mode .header-user-btn { background: var(--bg-secondary); border-color: var(--border-soft); }
body.dark-mode .user-name { color: var(--text-primary); }
body.dark-mode .lang-pill { background: var(--bg-secondary); border-color: var(--border-soft); color: var(--text-secondary); }

/* --- Phase 2: Final UI Consistency Fixes --- */
.dash-alert-btn { background: var(--brand-color) !important; color: #fff !important; border: none !important; }
.dash-alert-btn:hover { background: var(--brand-hover) !important; }
body.dark-mode .dash-card, body.dark-mode .chart-container, body.dark-mode .saas-card { background-color: var(--card-bg) !important; }
body.dark-mode label, body.dark-mode .form-label, body.dark-mode .col-form-label { color: var(--text-primary) !important; }
.prof-badge { padding: 4px 10px; border-radius: 8px; font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }
.prof-badge.bg-primary { background-color: rgba(29, 110, 245, 0.1) !important; color: var(--brand-color) !important; }
body.dark-mode .prof-badge.bg-primary { background-color: rgba(29, 110, 245, 0.2) !important; color: #60a5fa !important; }
body.dark-mode .text-warning { color: #fbbf24 !important; }
body.dark-mode .text-info { color: #38bdf8 !important; }
body.dark-mode .text-success { color: #4ade80 !important; }
body.dark-mode .text-danger { color: #f87171 !important; }

/* ==========================================================================
   ENTERPRISE TEAM MANAGEMENT & PREMIUM SAAS EXTENSION
   ========================================================================== */

/* --primary / --accent removed — owned by tokens.css.
   --primary-soft / --accent-soft kept scoped here as -ext aliases. */
:root {
    --primary-soft-ext: rgba(29, 110, 245, 0.1);
    --bg-main-ext: #f0f4fa;
    --bg-card-ext: #ffffff;
    --bg-soft-ext: #f4f6fb;
    --text-primary-ext: #0f172a;
    --text-secondary-ext: #475569;
    --text-muted-ext: #94a3b8;
    --border-soft-ext: #e2e8f0;
    --radius-xl-ext: 20px;
    --radius-lg-ext: 14px;
    --radius-md-ext: 10px;
    --font-heading-ext: 'Zain', sans-serif;
    --font-body-ext: 'Zain', sans-serif;
}

body.dark-mode {
    --primary-soft-ext: rgba(59, 130, 246, 0.12);
    --bg-main-ext: #18181b;
    --bg-card-ext: #27272a;
    --bg-soft-ext: #27272a;
    --text-primary-ext: #f4f4f5;
    --text-secondary-ext: #a1a1aa;
    --text-muted-ext: #71717a;
    --border-soft-ext: #3f3f46;
}

/* Base Ext */
.premium-body {
    font-family: var(--font-body-ext);
    background-color: var(--bg-main-ext);
    color: var(--text-primary-ext);
}

.premium-heading {
    font-family: var(--font-heading-ext);
    letter-spacing: -0.025em;
}

/* Layout */
.premium-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
}

.page-header-ext {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.5rem;
}

/* Stats */
.stats-grid-ext {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 3rem;
}

.stat-card-ext {
    background: var(--bg-card-ext);
    border: 1px solid var(--border-soft-ext);
    border-radius: var(--radius-lg-ext);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.stat-card-ext:hover {
    border-color: var(--primary);
    box-shadow: 0 10px 20px -10px rgba(99, 102, 241, 0.2);
}

.stat-icon-ext {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Role Cards */
.roles-grid-ext {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
}

.role-card-ext {
    background: var(--bg-card-ext);
    border: 1px solid var(--border-soft-ext);
    border-radius: var(--radius-xl-ext);
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.role-card-ext:hover {
    transform: translateY(-6px);
    border-color: var(--primary);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
}

.role-card-top-ext {
    padding: 1.75rem;
    border-bottom: 1px solid var(--border-soft-ext);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.role-icon-wrapper-ext {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.perm-tag-ext {
    padding: 4px 10px;
    background: var(--bg-soft-ext);
    border: 1px solid var(--border-soft-ext);
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary-ext);
    white-space: nowrap;
}

.perm-tag-ext.count {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: transparent;
}

.role-card-footer-ext {
    padding: 1rem 1.75rem;
    background: rgba(0,0,0,0.01);
    border-top: 1px solid var(--border-soft-ext);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Builder */
.builder-toolbar-ext {
    position: sticky;
    top: 1.5rem;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-soft-ext);
    border-radius: 20px;
    padding: 1.25rem 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05);
}

.dark-mode .builder-toolbar-ext {
    background: rgba(15, 23, 42, 0.8);
}

.perm-category-card-ext {
    background: var(--bg-card-ext);
    border: 1px solid var(--border-soft-ext);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.perm-category-header-ext {
    padding: 1.25rem 1.75rem;
    background: var(--bg-soft-ext);
    border-bottom: 1px solid var(--border-soft-ext);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.perm-grid-dense-ext {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding: 1.75rem;
}

.perm-item-compact-ext {
    background: var(--bg-soft-ext);
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.perm-item-compact-ext:hover {
    border-color: var(--primary);
    background: var(--bg-card-ext);
}

/* Buttons */
.btn-premium-ext {
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.switch-compact-ext {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.slider-compact-ext {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #cbd5e1;
    transition: .4s;
    border-radius: 34px;
}

.slider-compact-ext:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider-compact-ext { background-color: #10b981; }
input:checked + .slider-compact-ext:before { transform: translateX(16px); }

/* ==========================================================================
   PREMIUM SIDEBAR V2 - SAAS NAVIGATION SYSTEM
   ========================================================================== */
:root {
    --sb-width: 280px;
    --sb-width-collapsed: 88px;
    --sb-bg: #ffffff;
    --sb-border: #e2e8f0;
    --sb-text: #475569;
    --sb-text-hover: #0f172a;
    /* Role-adaptive — picks up --role-accent from tokens-roles.css */
    --sb-active-bg:   var(--role-accent-soft,  rgba(37, 99, 235, 0.08));
    --sb-active-text: var(--role-accent,        #2563EB);
    --sb-active-glow: var(--role-accent-focus,  rgba(37, 99, 235, 0.2));
    --sb-icon-size: 20px;
    --sb-item-gap: 4px;
    --sb-section-gap: 24px;
    --sb-radius: 12px;
    --sb-shadow: 10px 0 30px -10px rgba(0,0,0,0.05);
}

.dark-mode {
    --sb-bg: #18181b;
    --sb-border: #27272a;
    --sb-text: #e4e4e7;
    --sb-text-hover: #f4f4f5;
    /* Role-adaptive — picks up --role-accent from tokens-roles.css */
    --sb-active-bg:   var(--role-accent-soft,  rgba(37, 99, 235, 0.12));
    --sb-active-text: var(--role-accent,        #2563EB);
    --sb-active-glow: var(--role-accent-focus,  rgba(37, 99, 235, 0.2));
    --sb-shadow: 10px 0 40px -15px rgba(0,0,0,0.7);
}

/* Sidebar Wrapper */
.sidebar {
    width: var(--sb-width);
    height: 100vh;
    background: var(--sb-bg);
    border-right: 1px solid var(--sb-border);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--sb-shadow);
    backdrop-filter: blur(10px);
}

.dark-mode .sidebar {
    background: rgba(2, 6, 23, 0.9);
}

.sidebar-collapsed .sidebar {
    width: var(--sb-width-collapsed);
}

/* Scrollable area */
.sb-scroll {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 16px;
    padding-bottom: 40px;
}

.sb-scroll::-webkit-scrollbar { width: 4px; }
.sb-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.05); border-radius: 10px; }
.dark-mode .sb-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.05); }

/* Brand Area */
.sb-brand {
    height: 88px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    transition: all 0.3s;
}

.sidebar-collapsed .sb-brand {
    padding: 0;
    justify-content: center;
}

.sb-brand-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), #4f46e5);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.sb-brand-text {
    transition: all 0.3s;
    opacity: 1;
    transform: translateX(0);
}

.sidebar-collapsed .sb-brand-text {
    opacity: 0;
    display: none;
}

/* Navigation List */
.sd-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Section Titles */
.nav-title {
    font-family: var(--font-heading-ext);
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-muted-ext);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: var(--sb-section-gap) 0 12px 12px;
    transition: all 0.3s;
}

.sidebar-collapsed .nav-title {
    opacity: 0;
    margin: 12px 0;
    height: 1px;
    background: var(--sb-border);
    overflow: hidden;
}

/* Navigation Items */
.sd-item {
    margin-bottom: var(--sb-item-gap);
}

.sd-link {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    color: var(--sb-text);
    text-decoration: none !important;
    border-radius: var(--sb-radius);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    white-space: nowrap;
}

.sd-link i {
    width: var(--sb-icon-size);
    height: var(--sb-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-right: 14px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.sidebar-collapsed .sd-link i {
    margin-right: 0;
}

.sd-link .nav-text {
    opacity: 1;
    transition: opacity 0.3s;
}

.sidebar-collapsed .sd-link .nav-text {
    opacity: 0;
    width: 0;
    display: none;
}

/* Hover State */
.sd-link:hover {
    color: var(--sb-text-hover);
    background: rgba(0,0,0,0.02);
    transform: translateX(4px);
}

.dark-mode .sd-link:hover {
    background: rgba(255,255,255,0.03);
}

.sidebar-collapsed .sd-link:hover {
    transform: none;
}

/* Active State */
.sd-link.active {
    color: var(--sb-active-text);
    background: var(--sb-active-bg);
}

.sd-link.active::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: var(--sb-active-text);
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 10px var(--sb-active-glow);
}

.sd-link.active i {
    transform: scale(1.1);
    color: var(--sb-active-text);
}

/* Submenu Dropdown Toggle */
.sd-link.dropdown-toggle::after {
    display: block;
    margin-left: auto;
    border: none;
    font-family: "Font Awesome 6 Free";
    content: "\f107";
    font-weight: 900;
    font-size: 0.75rem;
    transition: transform 0.3s;
    opacity: 0.5;
}

.sidebar-collapsed .sd-link.dropdown-toggle::after {
    display: none;
}

.sd-link.dropdown-toggle:not(.collapsed)::after {
    transform: rotate(-180deg);
}

/* Submenu Container */
.collapse-menu {
    padding-left: 36px;
    margin-top: 2px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.collapse-menu::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 10px;
    width: 1.5px;
    background: var(--sb-border);
    opacity: 0.3;
}

.collapse-menu .sd-link {
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 8px;
    margin-bottom: 2px;
    opacity: 0.8;
}

.collapse-menu .sd-link:hover {
    transform: translateX(4px);
    opacity: 1;
    background: rgba(99, 102, 241, 0.03);
}

.collapse-menu .sd-link.active {
    opacity: 1;
    background: transparent;
    color: var(--sb-active-text);
    font-weight: 700;
}

.sidebar-collapsed .collapse-menu {
    display: none !important;
}

/* Profile Section */
.sb-profile {
    border-top: 1px solid var(--sb-border);
    background: var(--sb-bg);
    transition: all 0.3s;
    padding: 20px 16px;
}

.sidebar-collapsed .sb-profile {
    padding: 20px 0;
}

.sb-profile .glass {
    transition: all 0.3s;
}

.sidebar-collapsed .sb-profile .glass {
    padding: 8px !important;
    justify-content: center;
}

.sidebar-collapsed .sb-profile-info,
.sidebar-collapsed .sb-profile i {
    display: none;
}

.sidebar-collapsed .sb-profile-avatar {
    width: 38px !important;
    height: 38px !important;
}

/* Animations */
@keyframes sbFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.ready .sd-item {
    animation: sbFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.ready .sd-item:nth-child(n) { animation-delay: calc(var(--i, 0) * 0.03s); }

/* Responsive Overlays */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        width: 280px !important;
    }
    .sidebar-open .sidebar {
        transform: translateX(0);
    }
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        backdrop-filter: blur(4px);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
    }
    .sidebar-open .sidebar-overlay {
        opacity: 1;
        visibility: visible;
    }
}

/* ============================================================
   GLOBAL DARK MODE — Cairo + Slate Theme
   ============================================================ */

body.dark-mode {
    color-scheme: dark;
}

/* Cards & surfaces */
body.dark-mode .card,
body.dark-mode .card-body,
body.dark-mode .card-header,
body.dark-mode .card-footer {
    background-color: var(--card-bg);
    border-color: var(--border-soft);
}

/* Tables dark */
body.dark-mode table,
body.dark-mode .table {
    --bs-table-bg: var(--card-bg);
    --bs-table-border-color: var(--border-soft);
    color: var(--text-primary);
}
body.dark-mode .table thead th,
body.dark-mode .table > :not(caption) > * > * {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    border-color: var(--border-soft);
}
body.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(91,61,245,.06);
}

/* Inputs — dark-mode overrides (cascade over theme bridge) */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text {
    background-color: var(--bg-secondary);
    border-color: var(--border-soft);
    color: var(--text-primary);
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--brand-light);
}
body.dark-mode .form-control::placeholder { color: var(--text-muted); }

/* Modals */
body.dark-mode .modal-content {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-soft) !important;
}
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: var(--border-soft) !important;
}
body.dark-mode .modal-title { color: var(--text-primary) !important; }

/* Dropdowns */
body.dark-mode .dropdown-menu {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-soft) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
}
body.dark-mode .dropdown-item {
    color: var(--text-secondary) !important;
}
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: rgba(59,130,246,.1) !important;
    color: #60a5fa !important;
}
body.dark-mode .dropdown-divider { border-color: var(--border-soft) !important; }

/* Badges */
body.dark-mode .bg-light { background-color: var(--bg-secondary) !important; }
body.dark-mode .text-dark { color: var(--text-primary) !important; }
body.dark-mode .border { border-color: var(--border-soft) !important; }
body.dark-mode .border-bottom,
body.dark-mode .border-top { border-color: var(--border-soft) !important; }

/* Nav tabs */
body.dark-mode .nav-tabs { border-color: var(--border-soft) !important; }
body.dark-mode .nav-tabs .nav-link { color: var(--text-secondary) !important; }
body.dark-mode .nav-tabs .nav-link.active {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-soft) var(--border-soft) var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* List groups */
body.dark-mode .list-group-item {
    background-color: var(--card-bg) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-primary) !important;
}

/* Offcanvas */
body.dark-mode .offcanvas,
body.dark-mode .offcanvas-body {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Alerts — handled in theme bridge with body.dark-mode selectors */

/* Buttons dark overrides — use CSS variables, no !important needed */
body.dark-mode .btn-light,
body.dark-mode .btn-outline-secondary {
    background-color: var(--bg-secondary);
    border-color: var(--border-soft);
    color: var(--text-secondary);
}
body.dark-mode .btn-outline-primary {
    border-color: var(--primary);
    color: var(--primary);
}
body.dark-mode .btn-outline-primary:hover {
    background-color: var(--primary);
    color: #fff;
}

/* Text colors */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: var(--text-primary) !important;
}
body.dark-mode p, body.dark-mode span, body.dark-mode div { color: inherit; }
body.dark-mode .text-muted { color: var(--text-muted) !important; }
body.dark-mode .text-secondary { color: var(--text-secondary) !important; }
body.dark-mode a:not(.btn):not(.dropdown-item):not(.nav-link):not(.tb-dd-item) {
    color: #ffffff;
}

/* Sidebar profile name visible in dark */
body.dark-mode .sb-profile-name { color: var(--sb-text) !important; }

/* Page background */
body.dark-mode .page-content,
body.dark-mode .main-content,
body.dark-mode .main-content-rtl { background-color: var(--bg-primary) !important; }

/* DataTables */
body.dark-mode .dataTables_wrapper .dataTables_filter input,
body.dark-mode .dataTables_wrapper .dataTables_length select {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-primary) !important;
}
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-secondary) !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--brand-color) !important;
    border-color: var(--brand-color) !important;
    color: #fff !important;
}

/* Select2 / Bootstrap-select */
body.dark-mode .bootstrap-select .dropdown-menu,
body.dark-mode .select2-dropdown {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-soft) !important;
}
body.dark-mode .bootstrap-select > .dropdown-toggle {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════
   THEME BRIDGE — Bootstrap components → design tokens
   Uses CSS variables so dark/light switches automatically.
   !important only where Bootstrap inline-styles fight back.
═══════════════════════════════════════════════════════════ */

/* Body & layout */
body { background-color: var(--bg-primary); color: var(--text-primary); }
.page-content, .main-content, .main-content-rtl { background-color: var(--bg-primary); }

/* Cards */
.card { background-color: var(--card-bg); border-color: var(--border-color); color: var(--text-primary); }
.card-header, .card-footer { background-color: var(--bg-secondary); border-color: var(--border-color); }

/* Forms — already normalized above; these add cascade safety */
.form-control, .form-select {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.form-control:focus, .form-select:focus {
    background-color: var(--bg-secondary);
    border-color: var(--primary);
    color: var(--text-primary);
    box-shadow: 0 0 0 3px var(--brand-light);
}
.form-control::placeholder, .form-select::placeholder { color: var(--text-muted); }
.input-group-text {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
.form-label, label { color: var(--text-secondary); }
.form-check-label { color: var(--text-secondary); }
.form-text { color: var(--text-muted); }

/* Tables */
.table { color: var(--text-primary); border-color: var(--border-color); }
.table > :not(caption) > * > * { background-color: var(--card-bg); color: var(--text-primary); border-color: var(--border-color); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(0,0,0,.02); }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(0,0,0,.03); }
thead th, .table thead th {
    background-color: var(--bg-secondary);
    color: var(--text-muted);
    border-color: var(--border-color);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* Modals */
.modal-content { background-color: var(--card-bg); border-color: var(--border-color); }
.modal-header, .modal-footer { border-color: var(--border-color); background-color: var(--bg-secondary); }
.modal-title { color: var(--text-primary); }

/* Dropdowns */
.dropdown-menu { background-color: var(--card-bg); border-color: var(--border-color); box-shadow: var(--shadow-md); }
.dropdown-item { color: var(--text-secondary); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--brand-light); color: var(--primary); }
.dropdown-divider { border-color: var(--border-color); }
.dropdown-header { color: var(--text-muted); }

/* Navs */
.nav-tabs { border-color: var(--border-color); }
.nav-tabs .nav-link { color: var(--text-secondary); }
.nav-tabs .nav-link.active { background-color: var(--card-bg); border-color: var(--border-color) var(--border-color) var(--card-bg); color: var(--text-primary); }
.nav-pills .nav-link { color: var(--text-secondary); }
.nav-pills .nav-link.active { background-color: var(--primary); color: #fff; }

/* List groups */
.list-group-item { background-color: var(--card-bg); border-color: var(--border-color); color: var(--text-primary); }
.list-group-item.active { background-color: var(--primary); border-color: var(--primary); }

/* Accordion */
.accordion-item { background-color: var(--card-bg); border-color: var(--border-color); }
.accordion-button { background-color: var(--bg-secondary); color: var(--text-primary); }
.accordion-button:not(.collapsed) { background-color: var(--brand-light); color: var(--primary); box-shadow: none; }
.accordion-body { background-color: var(--card-bg); color: var(--text-primary); }

/* Alerts — light-mode base; dark-mode overridden below */
.alert-warning { background-color: rgba(245,158,11,.1);  border-color: rgba(245,158,11,.25); color: #92400e; }
.alert-danger  { background-color: rgba(239,68,68,.1);   border-color: rgba(239,68,68,.25);  color: #991b1b; }
.alert-success { background-color: rgba(22,163,74,.1);   border-color: rgba(22,163,74,.25);  color: #14532d; }
.alert-info    { background-color: rgba(14,165,233,.1);  border-color: rgba(14,165,233,.25); color: #0c4a6e; }
body.dark-mode .alert-warning { background-color: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: #fbbf24; }
body.dark-mode .alert-danger  { background-color: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.3);  color: #f87171; }
body.dark-mode .alert-success { background-color: rgba(22,163,74,.12);  border-color: rgba(22,163,74,.3);  color: #34d399; }
body.dark-mode .alert-info    { background-color: rgba(14,165,233,.12); border-color: rgba(14,165,233,.3); color: #38bdf8; }

/* Misc */
.bg-light { background-color: var(--bg-light); color: var(--text-primary); }
.text-dark { color: var(--text-primary); }
hr { border-color: var(--border-color); opacity: 1; }
.text-muted { color: var(--text-muted); }
h1,h2,h3,h4,h5,h6 { color: var(--text-primary); }

/* Buttons */
.btn-light { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-secondary); }
.btn-light:hover { background-color: var(--bg-light); border-color: var(--border-color); color: var(--text-primary); }

/* Pagination */
.page-link { background-color: var(--card-bg); border-color: var(--border-color); color: var(--text-secondary); }
.page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); color: #fff !important; }
.page-item.disabled .page-link { background-color: var(--bg-secondary); color: var(--text-muted); }

/* Offcanvas */
.offcanvas, .offcanvas-body { background-color: var(--card-bg); color: var(--text-primary); }
.offcanvas-header { border-color: var(--border-color); }

/* Tooltips & Popovers */
.tooltip-inner { background-color: var(--card-bg); color: var(--text-primary); border: 1px solid var(--border-color); }
.popover { background-color: var(--card-bg); border-color: var(--border-color); }
.popover-header { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); }
.popover-body { color: var(--text-primary); }

/* Bootstrap-Select & Select2 */
.bootstrap-select .dropdown-menu,
.select2-dropdown { background-color: var(--card-bg); border-color: var(--border-color); }
.bootstrap-select > .dropdown-toggle { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); }

/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--text-secondary); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--primary); border-color: var(--primary); color: #fff !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
 * PHASE 2 — NORMALIZED COMPONENT SYSTEM
 * Single canonical definitions. All values use design tokens.
 * These rules come last so they win the cascade cleanly.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── BUTTONS — unified height / padding / radius / transition ──────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    height: 38px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: var(--transition);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    vertical-align: middle;
}

.btn-sm {
    height: 30px;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: var(--radius-sm);
}

.btn-lg {
    height: 46px;
    padding: 12px 28px;
    font-size: 16px;
    border-radius: var(--radius-lg);
}

/* Disabled state — unified */
.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Focus ring — unified (replaces *:focus { box-shadow: none } for buttons) */
.btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: none;
}

/* ─── FORMS — unified height / focus / placeholder ─────────────────────────── */
.form-control,
.form-select {
    height: 38px;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: border-color var(--transition), box-shadow var(--transition);
    width: 100%;
}

textarea.form-control {
    height: auto;
    min-height: 80px;
    resize: vertical;
}

.form-control-sm,
.form-select-sm {
    height: 30px;
    padding: 4px 8px;
    font-size: 12px;
}

.form-control-lg,
.form-select-lg {
    height: 46px;
    padding: 12px 16px;
    font-size: 16px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--brand-light);
    outline: none;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.form-control::placeholder { color: var(--text-muted); font-size: 13px; }

.input-group .form-control { border-radius: 0; }
.input-group .form-control:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .form-control:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: block;
}

/* ─── CARDS — unified padding / shadow / radius ─────────────────────────────── */
.card {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    transition: background-color var(--transition), border-color var(--transition);
}

.card-header {
    padding: 16px 20px;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
}

.card-body {
    padding: 20px;
}

.card-footer {
    padding: 12px 20px;
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.card-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 0;
}

/* Stat / KPI card */
.stat-card {
    border-radius: var(--radius-md);
    padding: 20px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.stat-card .stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
}

.stat-card .stat-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ─── TABLES — unified spacing / responsive / header ───────────────────────── */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    color: var(--text-primary);
    font-size: 14px;
}

.table thead th {
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    vertical-align: middle;
}

.table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    color: var(--text-primary);
    background-color: var(--card-bg);
}

.table tbody tr:last-child td { border-bottom: none; }

.table-hover tbody tr:hover td {
    background-color: var(--bg-light);
}

body.dark-mode .table-hover tbody tr:hover td {
    background-color: rgba(91,61,245,.05);
}

/* ─── MODALS — unified padding / spacing ────────────────────────────────────── */
.modal-content {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    box-shadow: var(--shadow-md);
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    gap: 8px;
}

.modal-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

/* ─── SPACING HELPERS (complement Bootstrap) ───────────────────────────────── */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

.p-section { padding: var(--space-6); }

/* ─── LAYOUT STABILITY ──────────────────────────────────────────────────────── */
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto   { overflow-y: auto; }
.min-w-0 { min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════════
 * PHASE 3 — COMPONENT EXTRACTION + LAYOUT STABILITY + UI SCALABILITY
 * Single source of truth for repeated UI patterns.
 * All values use design tokens. No hardcoded colors or px magic numbers.
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 *  § 3.1  Scroll System
 *  § 3.2  Z-Index Normalization
 *  § 3.3  Grid System
 *  § 3.4  Page Header Component
 *  § 3.5  Action Bar Component
 *  § 3.6  Filter / Search Bar Component
 *  § 3.7  Stat / KPI Widget Component
 *  § 3.8  Dashboard Grid Layouts
 *  § 3.9  Data Table Wrapper Component
 *  § 3.10 Form Group Component
 *  § 3.11 Empty State Component
 *  § 3.12 Overlay & Mobile Sidebar Drawer
 *  § 3.13 Scrollbar Normalization
 *  § 3.14 Dark Mode Completeness Pass
 * ═══════════════════════════════════════════════════════════════════════════════ */


/* ─── § 3.1  SCROLL SYSTEM ───────────────────────────────────────────────────── */

/* Global scroll behaviour */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* Prevent body double-scroll when modal open */
body.modal-open { overflow: hidden; padding-right: 0 !important; }

/* Scrollable container utility */
.scroll-y {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.scroll-both {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Page content area — the only thing that scrolls vertically */
.page-content {
    overflow-x: hidden;
}


/* ─── § 3.2  Z-INDEX NORMALIZATION ──────────────────────────────────────────── */

/* Re-assign scattered z-index values to the token scale */
.page-topbar           { z-index: var(--z-topbar);  }
.sidebar               { z-index: var(--z-sidebar); }
.sidebar-overlay       { z-index: calc(var(--z-sidebar) - 1); }
.dropdown-menu         { z-index: var(--z-dropdown); }
.sticky-header         { z-index: var(--z-sticky);  }
.modal-backdrop        { z-index: calc(var(--z-modal) - 10); }
.modal                 { z-index: var(--z-modal);   }
.offcanvas-backdrop    { z-index: calc(var(--z-overlay) - 1); }
.offcanvas             { z-index: var(--z-overlay); }
.toast-container       { z-index: var(--z-toast);   }
.tooltip               { z-index: var(--z-popover); }
.popover               { z-index: var(--z-popover); }


/* ─── § 3.3  GRID SYSTEM ─────────────────────────────────────────────────────── */

/* Auto-fill responsive grid — cards stack naturally */
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-6);
}

.grid-auto-sm {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

/* Fixed column grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

/* Asymmetric dashboard layouts */
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr;     gap: var(--space-6); }
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr;     gap: var(--space-6); }
.grid-3-1 { display: grid; grid-template-columns: 3fr 1fr;     gap: var(--space-6); }

/* KPI stats row — 4 across on desktop */
.grid-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

/* Consistent card gap */
.cards-row { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.cards-row > * { flex: 1 1 280px; min-width: 0; }


/* ─── § 3.4  PAGE HEADER COMPONENT ─────────────────────────────────────────── */

/*
  Usage:
  <div class="page-header">
    <div class="page-header-left">
      <h4 class="page-title">Title</h4>
      <p class="page-subtitle">Subtitle or breadcrumb</p>
    </div>
    <div class="page-header-actions">
      <button class="btn btn-primary">Action</button>
    </div>
  </div>
*/
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-5) 0 var(--space-6);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
}

.page-header-left { min-width: 0; }

.page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.page-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 4px 0 0;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    flex-shrink: 0;
}


/* ─── § 3.5  ACTION BAR COMPONENT ──────────────────────────────────────────── */

/*
  Usage:
  <div class="action-bar">
    <div class="action-bar-start"> search / filters </div>
    <div class="action-bar-end"> add button / export </div>
  </div>
*/
.action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.action-bar-start {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

.action-bar-end {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}


/* ─── § 3.6  FILTER / SEARCH BAR COMPONENT ─────────────────────────────────── */

.filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-4);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.filter-bar .filter-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.filter-bar .filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Search input with icon */
.search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrap .form-control {
    padding-inline-start: 36px;
    border-radius: var(--radius-lg);
}

.search-input-wrap .search-icon {
    position: absolute;
    inset-inline-start: 12px;
    color: var(--text-muted);
    font-size: 14px;
    pointer-events: none;
    z-index: var(--z-base);
}


/* ─── § 3.7  STAT / KPI WIDGET COMPONENT ───────────────────────────────────── */

/*
  Usage:
  <div class="kpi-card">
    <div class="kpi-icon" style="--kpi-color:#5B3DF5;--kpi-bg:rgba(91,61,245,.1)">
      <i class="fas fa-shopping-cart"></i>
    </div>
    <div class="kpi-body">
      <div class="kpi-value">1,234</div>
      <div class="kpi-label">Total Orders</div>
      <div class="kpi-trend up">+12% this month</div>
    </div>
  </div>
*/
.kpi-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}

.kpi-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--kpi-bg, rgba(91,61,245,.1));
    color: var(--kpi-color, var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.kpi-body { min-width: 0; flex: 1; }

.kpi-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -.02em;
}

.kpi-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.kpi-trend {
    font-size: 12px;
    font-weight: 600;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.kpi-trend.up   { color: var(--success); }
.kpi-trend.down { color: var(--danger);  }
.kpi-trend.flat { color: var(--text-muted); }

/* Compact horizontal variant */
.kpi-card-sm {
    padding: var(--space-4);
    gap: var(--space-3);
}
.kpi-card-sm .kpi-icon { width: 38px; height: 38px; font-size: 16px; }
.kpi-card-sm .kpi-value { font-size: 20px; }


/* ─── § 3.8  DASHBOARD GRID LAYOUTS ────────────────────────────────────────── */

.dash-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.dash-row {
    display: grid;
    gap: var(--space-6);
}

/* Common dashboard section heading */
.dash-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.dash-section-title::before {
    content: '';
    display: block;
    width: 3px;
    height: 16px;
    background: var(--primary);
    border-radius: 2px;
}


/* ─── § 3.9  DATA TABLE WRAPPER COMPONENT ──────────────────────────────────── */

/*
  Usage:
  <div class="data-table-wrap">
    <div class="data-table-toolbar"> ... filters / search ... </div>
    <div class="table-responsive">
      <table class="table data-table">...</table>
    </div>
    <div class="data-table-footer"> ... pagination ... </div>
  </div>
*/
.data-table-wrap {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.data-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.data-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.data-table-footer .dataTables_info {
    font-size: 13px;
    color: var(--text-muted);
}

/* Table inside wrapper — no extra borders */
.data-table-wrap .table {
    margin-bottom: 0;
    border-radius: 0;
}

.data-table-wrap .table-responsive {
    border-radius: 0;
}


/* ─── § 3.10 FORM GROUP COMPONENT ──────────────────────────────────────────── */

.form-group-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-4);
}

.form-group .form-label {
    margin-bottom: 0;
}

/* Inline form group (label + input side by side) */
.form-group-inline {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.form-group-inline .form-label {
    white-space: nowrap;
    margin-bottom: 0;
    min-width: 120px;
}

/* Field help text */
.field-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Required marker */
.required::after {
    content: ' *';
    color: var(--danger);
}

/* Validation states */
.form-control.is-valid   { border-color: var(--success); }
.form-control.is-invalid { border-color: var(--danger);  }
.valid-feedback   { color: var(--success); font-size: 12px; }
.invalid-feedback { color: var(--danger);  font-size: 12px; }


/* ─── § 3.11 EMPTY STATE COMPONENT ─────────────────────────────────────────── */

/*
  Usage:
  <div class="empty-state">
    <div class="empty-state-icon"><i class="fas fa-inbox"></i></div>
    <h5 class="empty-state-title">No Data Found</h5>
    <p class="empty-state-text">Start by adding your first item.</p>
    <button class="btn btn-primary">Add Item</button>
  </div>
*/
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-6);
    text-align: center;
    gap: var(--space-3);
}

.empty-state-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.empty-state-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.empty-state-text {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    max-width: 340px;
}


/* ─── § 3.12 OVERLAY & MOBILE SIDEBAR DRAWER ───────────────────────────────── */

/* Backdrop for mobile sidebar */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: calc(var(--z-sidebar) - 1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .25s ease;
}

body.sidebar-open .sidebar-overlay {
    display: block;
    opacity: 1;
}

/* Mobile: sidebar slides in from left/right */
@media (max-width: 991px) {
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width) !important;
    }
    html[dir="rtl"] .sidebar {
        transform: translateX(100%);
    }
    body.sidebar-open .sidebar {
        transform: translateX(0);
        box-shadow: var(--shadow-md);
    }
    .main-content,
    .main-content-rtl {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* ─── § 3.13 SCROLLBAR NORMALIZATION ───────────────────────────────────────── */

/* Global thin scrollbar for webkit */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

/* Table horizontal scrollbar — slightly thicker for usability */
.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-thumb { background: var(--text-muted); }


/* ─── § 3.14 DARK MODE COMPLETENESS PASS ───────────────────────────────────── */

/* Ensure no hardcoded white backgrounds remain visible in dark mode */
body.dark-mode .bg-white,
body.dark-mode [class*="bg-white"] {
    background-color: var(--card-bg) !important;
}

/* Fix hardcoded text colors in dark mode */
body.dark-mode .text-dark,
body.dark-mode .text-black {
    color: var(--text-primary) !important;
}

/* Border utilities in dark mode */
body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-start,
body.dark-mode .border-end {
    border-color: var(--border-color) !important;
}

/* Input group dark */
body.dark-mode .input-group-text {
    background-color: var(--bg-secondary);
    border-color: var(--border-soft);
    color: var(--text-secondary);
}

/* Nav tabs dark */
body.dark-mode .nav-tabs .nav-link { color: var(--text-secondary); }
body.dark-mode .nav-tabs .nav-link:hover { color: var(--text-primary); border-color: var(--border-color); }
body.dark-mode .nav-tabs .nav-link.active {
    background-color: var(--card-bg);
    border-color: var(--border-color) var(--border-color) var(--card-bg);
    color: var(--primary);
}

/* Accordion dark */
body.dark-mode .accordion-button::after {
    filter: invert(1) brightness(.7);
}

/* Select2 dark */
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple {
    background-color: var(--bg-secondary);
    border-color: var(--border-soft);
    color: var(--text-primary);
}
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
}

/* Sidebar in light mode — use theme tokens */
body:not(.dark-mode) .sidebar {
    background: #1e2536;
    border-inline-end-color: #2d3748;
}

/* Topbar icons dark mode */
body.dark-mode .page-topbar .header-item { color: var(--text-secondary); }
body.dark-mode .page-topbar .header-item:hover { color: var(--text-primary); }

/* DataTables dark */
body.dark-mode .dataTables_wrapper .dataTables_length select,
body.dark-mode .dataTables_wrapper .dataTables_filter input {
    background-color: var(--bg-secondary);
    border-color: var(--border-soft);
    color: var(--text-primary);
}

/* Badges dark compat */
body.dark-mode .badge.bg-light { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; }

/* KPI card dark */
body.dark-mode .kpi-card { box-shadow: none; }

/* Empty state dark */
body.dark-mode .empty-state-icon { background: var(--bg-secondary); }

/* Page header dark border */
body.dark-mode .page-header { border-bottom-color: var(--border-color); }

/* Action bar dark */
body.dark-mode .action-bar,
body.dark-mode .filter-bar { background: var(--card-bg); border-color: var(--border-color); }

/* Data table wrapper dark */
body.dark-mode .data-table-wrap { background: var(--card-bg); border-color: var(--border-color); }
body.dark-mode .data-table-toolbar,
body.dark-mode .data-table-footer { background: var(--bg-secondary); border-color: var(--border-color); }

/* ═══════════════════════════════════════════════════════════════════════════════
 * PHASE 4 — PERFORMANCE OPTIMIZATION + CSS HARDENING + PRODUCTION READINESS
 *
 *  § 4.1  Transition Hardening (GPU-safe property-specific transitions)
 *  § 4.2  CSS Containment & Rendering Hints
 *  § 4.3  Accessibility — Focus System
 *  § 4.4  Accessibility — prefers-reduced-motion (WCAG 2.1 §2.3.3)
 *  § 4.5  Responsive Hardening — Edge Cases
 *  § 4.6  Dark Mode Hardening — Final Pass
 *  § 4.7  Layout Shift Prevention
 *  § 4.8  Production Theming Layer (White-Label Support)
 *  § 4.9  Print Optimization
 *  § 4.10 CSS Architecture — Maintenance Utilities
 * ═══════════════════════════════════════════════════════════════════════════════ */


/* ─── § 4.1  TRANSITION HARDENING ───────────────────────────────────────────── */

/*
  "transition: all" animates every CSS property including layout-triggering ones
  (width, height, top, left, padding, margin) causing expensive repaints and
  potential jank. The global transition override below limits animation to only
  GPU-compositable properties where the element is not specifically overridden.
*/

/* Targeted transition system — compositable properties only */
.btn {
    transition:
        background-color var(--duration-base) var(--ease-base),
        border-color     var(--duration-base) var(--ease-base),
        color            var(--duration-fast) var(--ease-base),
        box-shadow       var(--duration-base) var(--ease-base),
        transform        var(--duration-base) var(--ease-out),
        opacity          var(--duration-fast) var(--ease-base);
}

.card,
.kpi-card,
.stat-card {
    transition:
        background-color var(--duration-base) var(--ease-base),
        border-color     var(--duration-base) var(--ease-base),
        box-shadow       var(--duration-base) var(--ease-base),
        transform        var(--duration-base) var(--ease-out);
}

.form-control,
.form-select,
.input-group-text {
    transition:
        border-color var(--duration-fast) var(--ease-base),
        box-shadow   var(--duration-fast) var(--ease-base),
        background-color var(--duration-base) var(--ease-base);
}

.nav-link,
.dropdown-item,
.list-group-item {
    transition:
        background-color var(--duration-fast) var(--ease-base),
        color            var(--duration-fast) var(--ease-base);
}

/* Sidebar & topbar — theme-switch transition only (no transform) */
.sidebar,
.page-topbar,
.modal-content,
.offcanvas {
    transition:
        background-color var(--duration-base) var(--ease-base),
        border-color     var(--duration-base) var(--ease-base),
        transform        var(--duration-base) var(--ease-out);
}

/* Hover transforms — GPU safe, use transform not top/left/margin */
.btn:hover,
.kpi-card:hover,
.stat-card:hover {
    transform: translateY(-2px);
}

.btn:active,
.kpi-card:active {
    transform: translateY(0);
}


/* ─── § 4.2  CSS CONTAINMENT & RENDERING HINTS ──────────────────────────────── */

/*
  CSS containment tells the browser a subtree is independent — enabling
  paint/layout optimizations without changing visual behaviour.
  'layout' = internal layout doesn't affect outside.
  'paint'  = no overflow drawn outside bounds.
  'style'  = counters/quotes scoped to subtree.
*/

/* Cards are fully self-contained painting surfaces */
.card,
.kpi-card,
.stat-card,
.data-table-wrap {
    contain: layout style paint;
}

/* Sidebar is an independent layout region */
.sidebar {
    contain: layout style;
}

/* Table rows — prevent row changes from reflowing the entire table */
.table tbody tr {
    contain: layout style;
}

/* GPU promotion for animated elements */
.sidebar,
.page-topbar {
    will-change: transform;
}

.btn:hover,
.kpi-card:hover {
    will-change: transform, box-shadow;
}

/* Hint the browser about scroll container */
.page-content,
.table-responsive,
.scroll-y {
    overflow-anchor: auto;
}


/* ─── § 4.3  ACCESSIBILITY — FOCUS SYSTEM ───────────────────────────────────── */

/*
  WCAG 2.1 §2.4.7 — Focus Visible (Level AA): every keyboard-focusable element
  must have a visible focus indicator that is not just color-dependent.
  We use a 2px outline + 2px offset in the brand color so it's always visible.
*/

/* Remove Bootstrap's box-shadow-only focus (fails WCAG on dark backgrounds) */
.btn:focus,
.form-control:focus,
.form-select:focus,
.nav-link:focus,
.dropdown-item:focus,
.page-link:focus,
.accordion-button:focus,
.list-group-item:focus {
    outline: none;
    box-shadow: none;
}

/* Apply WCAG-compliant focus ring on keyboard navigation only */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible,
.accordion-button:focus-visible,
.list-group-item:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px var(--brand-light);
}

/* Dark mode — make focus ring visible on dark surfaces */
body.dark-mode .btn:focus-visible,
body.dark-mode .form-control:focus-visible,
body.dark-mode a:focus-visible {
    outline-color: #a78bfa;
    box-shadow: 0 0 0 4px rgba(167, 139, 250, .2);
}

/* Skip-to-main link for screen reader users */
.skip-to-main {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: calc(var(--z-toast) + 10);
    background: var(--primary);
    color: #fff;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: top var(--duration-fast);
}
.skip-to-main:focus {
    top: var(--space-2);
}


/* ─── § 4.4  ACCESSIBILITY — prefers-reduced-motion (WCAG 2.1 §2.3.3) ────────── */

/*
  Users who have enabled "Reduce Motion" in their OS accessibility settings
  experience vestibular disorders from animations. WCAG 2.1 Success Criterion
  2.3.3 (Level AAA) requires disabling or substantially reducing animations.
  We target Level AA-compliant essentials here.
*/

@media (prefers-reduced-motion: reduce) {

    /* Kill all CSS animations and transitions globally */
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
        scroll-behavior:           auto   !important;
    }

    /* Disable transform-based hover effects (still show hover state via color) */
    .btn:hover,
    .kpi-card:hover,
    .stat-card:hover,
    .card:hover {
        transform: none !important;
    }

    /* Disable sidebar slide animation */
    .sidebar {
        transition: none !important;
    }

    /* Disable page transition */
    .page-transition {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Disable skeleton shimmer */
    .skeleton {
        animation: none !important;
        background: var(--bg-secondary) !important;
    }

    /* Disable scroll behaviour on sidebar */
    .sidebar {
        scroll-behavior: auto !important;
    }
}


/* ─── § 4.5  RESPONSIVE HARDENING — EDGE CASES ──────────────────────────────── */

/* Prevent horizontal scroll caused by full-width elements */
body,
.main-content,
.page-content {
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure all images are responsive by default */
img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent text from breaking layouts on small screens */
.page-title,
.card-title,
.kpi-value,
.stat-value {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Table overflow — prevent horizontal scroll breaking layouts */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Long URLs and content in cells */
.table td,
.table th {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Never let pre/code break mobile layout */
pre, code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Inputs must not overflow their containers */
input,
select,
textarea {
    max-width: 100%;
    box-sizing: border-box;
}

/* Flex children — prevent them from overflowing */
.d-flex > *,
[class*="flex"] > * {
    min-width: 0;
}

/* Zoomed browser (150-200% zoom) — prevent overflow */
@media (min-resolution: 1.5dppx) {
    .sidebar {
        width: var(--sidebar-width);
    }
}

/* Landscape phones — extra bottom padding for safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .page-content {
        padding-bottom: calc(var(--space-16) + env(safe-area-inset-bottom));
    }
}


/* ─── § 4.6  DARK MODE HARDENING — FINAL PASS ───────────────────────────────── */

/*
  Final sweep to catch any remaining hardcoded light values.
  All rules here are body.dark-mode scoped so they don't affect light mode.
*/

/* Fix any remaining light backgrounds */
body.dark-mode .bg-white,
body.dark-mode .bg-light,
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="background-color: #fff"] {
    background-color: var(--card-bg) !important;
}

/* Fix hardcoded dark text that becomes invisible in dark mode */
body.dark-mode [style*="color: #000"],
body.dark-mode [style*="color:#000"],
body.dark-mode [style*="color: black"],
body.dark-mode [style*="color: #111"],
body.dark-mode [style*="color: #333"] {
    color: var(--text-primary) !important;
}

/* Scrollbar — dark mode */
body.dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.15);
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.25);
}


/* Images — reduce brightness slightly in dark mode */
body.dark-mode img:not([src*=".svg"]):not(.no-dark-filter) {
    filter: brightness(.92) contrast(1.02);
}

/* Skeleton dark mode */
body.dark-mode .skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 25%,
        rgba(255,255,255,.04) 50%,
        var(--bg-secondary) 75%
    );
    background-size: 200% 100%;
}

/* Status badges dark mode — ensure readability */
body.dark-mode .status-badge.active    { background: rgba(22,163,74,.2);  }
body.dark-mode .status-badge.inactive  { background: rgba(239,68,68,.2);  }
body.dark-mode .status-badge.pending   { background: rgba(245,158,11,.2); }
body.dark-mode .status-badge.completed { background: rgba(14,165,233,.2); }

/* Badge dark mode */
body.dark-mode .badge.bg-secondary { background-color: var(--bg-secondary) !important; }

/* Chart containers dark — prevent white flash */
body.dark-mode .chart-container canvas {
    background: transparent;
}

/* Tooltip dark */
body.dark-mode .tooltip-inner {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-soft);
}

/* Footer / bottom bar dark */
body.dark-mode footer,
body.dark-mode .footer {
    background-color: var(--card-bg);
    /* border-top: 1px solid var(--border-color); */
    color: var(--text-secondary);
}


/* ─── § 4.7  LAYOUT SHIFT PREVENTION ────────────────────────────────────────── */

/*
  Cumulative Layout Shift (CLS) occurs when elements move unexpectedly after
  initial render. Common causes: images without dimensions, async content,
  web fonts loading, and dynamic element insertion.
*/

/* Reserve space for images before they load */
img {
    aspect-ratio: attr(width) / attr(height);
}

/* Explicit dimensions for avatar images */
.avatar img,
.user-avatar img,
[class*="avatar"] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

/* Prevent sidebar from causing layout shift on load */
.sidebar {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Topbar — prevent reflow on sticky activate */
.page-topbar {
    backface-visibility: hidden;
}

/* Reserve height for dynamic stat cards */
.kpi-card {
    min-height: 88px;
}

/* Prevent modals from shifting body */
.modal {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Dropdowns — don't affect document flow */
.dropdown-menu {
    position: absolute;
}

/* DataTables — prevent height jump while loading */
.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-sm);
    color: var(--text-muted);
    z-index: var(--z-raised);
    box-shadow: var(--shadow-md);
}


/* ─── § 4.8  PRODUCTION THEMING LAYER (WHITE-LABEL SUPPORT) ─────────────────── */

/*
  White-label support via [data-theme] attribute on <html> or <body>.
  A tenant can inject:
    <html data-theme="custom" style="
      --theme-primary: #E53E3E;
      --theme-primary-hover: #C53030;
      --theme-secondary: #1A202C;
    ">
  and all components update automatically.

  Usage in Laravel:
    <html data-theme="{{ $tenant->theme ?? 'default' }}"
      style="--theme-primary:{{ $tenant->color ?? '#5B3DF5' }}">
*/

/* Activate custom theme tokens when --theme-primary is provided */
:root:has([data-theme="custom"]),
[data-theme="custom"] {
    --primary:        var(--theme-primary,       #5B3DF5);
    --primary-hover:  var(--theme-primary-hover, #4B2DE5);
    --bs-secondary:   var(--theme-secondary,     #2C1F71);
    --brand-color:    var(--primary);
    --brand-hover:    var(--primary-hover);
    --brand-light:    color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Per-tenant sidebar accent colour */
[data-theme] .sidebar .navbar-nav .nav-item .nav-link.active {
    background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #7c3aed));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* Per-tenant btn-primary */
[data-theme] .btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
}

/* Per-tenant pagination active */
[data-theme] .page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Per-tenant focus ring */
[data-theme] :focus-visible {
    outline-color: var(--primary);
}


/* ─── § 4.9  PRINT OPTIMIZATION ─────────────────────────────────────────────── */

@media print {

    /* Reset layout to full-width single column */
    .sidebar,
    .page-topbar,
    .action-bar,
    .filter-bar,
    .data-table-toolbar,
    .data-table-footer,
    .btn,
    .no-print,
    [class*="btn-"],
    .pagination,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        display: none !important;
    }

    .main-content,
    .main-content-rtl {
        margin: 0 !important;
        width: 100% !important;
    }

    .page-content {
        padding: 0 !important;
    }

    /* Cards — no shadow, simple border */
    .card,
    .kpi-card,
    .stat-card,
    .data-table-wrap {
        box-shadow: none !important;
        border: 1px solid #dee2e6 !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Tables — full width, clean borders */
    .table {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    .table th,
    .table td {
        border: 1px solid #dee2e6 !important;
        max-width: none !important;
        white-space: normal !important;
    }

    .table thead th {
        background: #f8f9fa !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Typography — screen-optimised fonts may not print well */
    body {
        font-size: 12pt !important;
        color: #000 !important;
        background: #fff !important;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #000 !important;
        page-break-after: avoid;
    }

    /* Links — show URL in print */
    a[href]:not([href^="#"]):not([href^="javascript"])::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }

    /* Page breaks */
    .page-break-before { page-break-before: always; }
    .page-break-after  { page-break-after:  always; }
    .no-page-break     { page-break-inside: avoid;  }
}


/* ─── § 4.10 CSS ARCHITECTURE — MAINTENANCE UTILITIES ───────────────────────── */

/*
  Developer utilities for maintenance.
  These DO NOT affect production rendering — they help identify issues
  during development and in AI-assisted code reviews.
*/

/* Debug outline toggle — add class="debug-layout" to <body> to see all boxes */
body.debug-layout * {
    outline: 1px solid rgba(255, 0, 0, .2) !important;
}

body.debug-layout .card     { outline-color: rgba(0, 128, 0, .5) !important; }
body.debug-layout .sidebar  { outline-color: rgba(0, 0, 255, .5) !important; }
body.debug-layout .btn      { outline-color: rgba(255, 165, 0, .5) !important; }

/* Spacing consistency — visual grid (add class="debug-grid" to <body>) */
body.debug-grid .page-content {
    background-image:
        linear-gradient(rgba(99, 102, 241, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, .05) 1px, transparent 1px);
    background-size: 8px 8px;
}

/*
  Architecture notes for future maintainers / AI assistants:
  ──────────────────────────────────────────────────────────
  Token hierarchy:
    :root              — global design tokens (color, space, radius, shadow, z, font)
    body.dark-mode     — dark theme overrides
    body:not(.dark-mode) — light theme overrides
    [data-theme]       — per-tenant white-label overrides

  File responsibilities:
    style.css      — all component definitions, design tokens, theme bridge
    responsive.css — ONLY @media max-width rules, no component definitions
    custom.css     — third-party overrides, page-specific patches, utilities

  Naming conventions:
    Component   → .kpi-card, .action-bar, .data-table-wrap
    Modifier    → .kpi-card-sm, .btn-lg, .grid-2
    State       → .is-loading, .is-error, .is-active
    JS hook     → .js-toggle, .js-sidebar-open (never style these)
    Debug       → .debug-layout, .debug-grid (dev only)
    Print       → .no-print, .page-break-before

  Z-index layers (lowest to highest):
    --z-below    (-1)  — behind page content
    --z-base     (1)   — in-flow elements
    --z-raised   (10)  — cards on hover
    --z-dropdown (100) — dropdowns, tooltips
    --z-sticky  (1000) — sticky headers inside content
    --z-topbar  (1030) — main navigation bar
    --z-sidebar (1031) — sidebar (above topbar in mobile)
    --z-overlay (1040) — offcanvas, drawer backdrops
    --z-modal   (1050) — modals and dialogs
    --z-popover (1060) — popovers over modals
    --z-toast   (1070) — toast notifications (always on top)
*/

/* ═══════════════════════════════════════════════════════════════════════════════
 * 🔷 NEW PREMIUM HEADER  (hd-* system — role-adaptive)
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Header variables (dark-first, light override below) ── */
:root {
  --hd-h:            60px;
  --hd-bg:           #18181b;
  --hd-border:       rgba(255,255,255,.07);
  --hd-text:         #e4e4e7;
  --hd-muted:        #71717a;
  --hd-icon-bg:      transparent;
  --hd-icon-hover:   rgba(255,255,255,.06);
  --hd-icon-active:  rgba(255,255,255,.10);
  --hd-search-bg:    rgba(255,255,255,.05);
  --hd-search-focus: rgba(255,255,255,.08);
  --hd-dd-bg:        #27272a;
  --hd-dd-border:    rgba(255,255,255,.08);
  --hd-dd-hover:     rgba(255,255,255,.05);
  --hd-dd-divider:   rgba(255,255,255,.06);
}
body:not(.dark-mode) {
  --hd-bg:           #ffffff;
  --hd-border:       #e5e7eb;
  --hd-text:         #111827;
  --hd-muted:        #6b7280;
  --hd-icon-hover:   rgba(0,0,0,.04);
  --hd-icon-active:  rgba(0,0,0,.08);
  --hd-search-bg:    #f3f4f6;
  --hd-search-focus: #e5e7eb;
  --hd-dd-bg:        #ffffff;
  --hd-dd-border:    #e5e7eb;
  --hd-dd-hover:     #f9fafb;
  --hd-dd-divider:   #e5e7eb;
}

/* ── Main bar ── */
.hd-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  height: var(--hd-h);
  background: var(--hd-bg);
  border-bottom: 1px solid var(--hd-border);
  box-shadow: 0 1px 12px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
}

.hd-inner {
  display: flex;
  align-items: center;
  height: calc(var(--hd-h) - 3px);
  padding-inline: 16px;
  gap: 8px;
  position: relative;  /* anchor for absolutely-centered .hd-center */
}

/* ── Accent bar (role colour) ── */
.hd-accent-bar {
  height: 3px;
  background: var(--role-accent, var(--primary));
  flex-shrink: 0;
}

/* ── Left cluster ── */
.hd-left  { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Center search — absolutely centered in the topbar, not stretched between clusters */
.hd-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 480px;
    padding-inline: 8px;
    z-index: 5;
    pointer-events: none;     /* let clicks pass through outside the input */
}
.hd-center > * { pointer-events: auto; }
.hd-right  { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-inline-start: auto; }
/* Thin vertical separator between icon buttons and avatar button */
.hd-sep { display: block; width: 1px; height: 20px; background: var(--hd-border); opacity: .6; margin-inline: 4px; flex-shrink: 0; }
@media (max-width: 991px) {
    /* On smaller screens drop back to flex layout so it doesn't overlap clusters */
    .hd-center {
        position: static;
        transform: none;
        left: auto; top: auto;
        flex: 1;
        z-index: auto;
        pointer-events: auto;
    }
}

/* ── Hamburger ── */
.hd-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  background: var(--hd-icon-bg);
  cursor: pointer;
  transition: background .15s;
  padding: 0;
  flex-shrink: 0;
}
.hd-hamburger:hover { background: var(--hd-icon-hover); }
.hd-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--hd-text);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
body.sidebar-open .hd-hamburger .hd-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.sidebar-open .hd-hamburger .hd-bar:nth-child(2) { opacity: 0; }
body.sidebar-open .hd-hamburger .hd-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Brand ── */
.hd-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  color: var(--hd-text) !important;
  user-select: none;
}
.hd-brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--role-accent, var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.hd-brand-name {
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--hd-text);
}

/* ── Role badge ── */
.hd-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  text-transform: uppercase;
}
.hd-badge--admin    { background: rgba(225,29,72,.15);  color: #fb7185; border: 1px solid rgba(225,29,72,.2); }
.hd-badge--vendor   { background: rgba(37,99,235,.15);  color: #93c5fd; border: 1px solid rgba(37,99,235,.25); }
.hd-badge--marketer { background: rgba(16,185,129,.15); color: #34d399; border: 1px solid rgba(16,185,129,.2); }
body:not(.dark-mode) .hd-badge--admin    { background: rgba(225,29,72,.08);  color: #e11d48; }
body:not(.dark-mode) .hd-badge--vendor   { background: rgba(37,99,235,.08);  color: #2563EB; border-color: rgba(37,99,235,.2); }
body:not(.dark-mode) .hd-badge--marketer { background: rgba(16,185,129,.08); color: #059669; }

/* ── Search ── */
.hd-search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--hd-search-bg);
  border: 1px solid var(--hd-dd-border);
  border-radius: 10px;
  overflow: hidden;
  transition: background .15s, border-color .15s, box-shadow .15s;
  width: 100%;
}
.hd-search:focus-within {
  background: var(--hd-search-focus);
  border-color: var(--role-accent, var(--primary));
  box-shadow: 0 0 0 3px var(--role-accent-focus, rgba(37,99,235,.12));
}
.hd-search-ico { color: var(--hd-muted); font-size: .75rem; padding-inline: 12px; flex-shrink: 0; }
.hd-search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--hd-text);
  font-size: .85rem;
  padding: 8px 0;
  min-width: 0;
}
.hd-search-input::placeholder { color: var(--hd-muted); }
.hd-search-input:focus { outline: none; box-shadow: none !important; }
.hd-search-kbd {
  display: none;
  align-items: center;
  margin-inline-end: 10px;
  padding: 2px 6px;
  background: var(--hd-dd-bg);
  border: 1px solid var(--hd-dd-border);
  border-radius: 5px;
  font-size: .62rem;
  color: var(--hd-muted);
  white-space: nowrap;
}
@media (min-width: 768px) { .hd-search-kbd { display: flex; } }
@media (max-width: 600px) { .hd-center { max-width: 200px; } }
@media (max-width: 380px) { .hd-center { display: none; } }

/* ── Live search dropdown ───────────────────────────────────── */
.hd-search-wrap { position: relative; }
/* CRITICAL: override the default .hd-search { overflow:hidden } so the dropdown
   below the search input isn't clipped by the rounded container */
.hd-search.hd-search-wrap { overflow: visible !important; }
.hd-search.is-open { border-radius: 10px 10px 0 0; }
.hd-search-results {
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-start: 0;
    inset-inline-end: 0;
    background: var(--hd-dd-bg, #1e1e22);
    border: 1px solid var(--hd-dd-border, rgba(255,255,255,.08));
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
    max-height: 420px;
    overflow-y: auto;
    z-index: 1050;
    pointer-events: auto !important;     /* always clickable, even when parent uses pointer-events:none */
}
.hd-search-item { pointer-events: auto !important; }
body:not(.dark-mode) .hd-search-results {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 12px 32px rgba(15,23,42,.1);
}
.hd-search-results[hidden] { display: none !important; }
.hd-search-list { list-style: none; padding: 6px; margin: 0; }
.hd-search-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--hd-text, #e4e4e7);
    font-size: .82rem;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.hd-search-item:hover,
.hd-search-item.is-focused {
    background: var(--role-accent-soft, rgba(37,99,235,.1));
    color: var(--role-accent, var(--primary));
}
.hd-search-item i {
    width: 18px; text-align: center;
    color: var(--hd-muted, #94a3b8);
    font-size: .78rem;
    flex-shrink: 0;
}
.hd-search-item:hover i,
.hd-search-item.is-focused i { color: var(--role-accent, var(--primary)); }
.hd-search-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-search-item-arrow {
    font-size: .65rem;
    color: var(--hd-muted, #94a3b8);
    opacity: 0;
    transition: opacity .12s;
}
.hd-search-item:hover .hd-search-item-arrow,
.hd-search-item.is-focused .hd-search-item-arrow { opacity: 1; }
html[dir="rtl"] .hd-search-item-arrow { transform: scaleX(-1); }
.hd-search-item-highlight {
    background: transparent;
    color: var(--role-accent, var(--primary));
    font-weight: 800;
}
.hd-search-empty {
    padding: 14px 16px;
    color: var(--hd-muted, #94a3b8);
    font-size: .82rem;
    text-align: center;
    display: none;
}
.hd-search-results.is-empty .hd-search-empty { display: block; }
.hd-search-results.is-empty .hd-search-list  { display: none; }

/* ── Icon buttons ── */
.hd-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: none;
  background: var(--hd-icon-bg);
  color: var(--hd-muted);
  cursor: pointer;
  font-size: .95rem;
  transition: background .15s, color .15s;
  position: relative;
  text-decoration: none !important;
  flex-shrink: 0;
}
.hd-icon-btn:hover { background: var(--hd-icon-hover); color: var(--hd-text); }
.hd-icon-btn:active, .hd-icon-btn--active { background: var(--hd-icon-active); color: var(--hd-text); }
.hd-back-admin { color: #fb7185 !important; }
.hd-back-admin:hover { background: rgba(251,113,133,.1) !important; }

/* ── Notification bell — full text color, visible in both modes ── */
.no-caret::after,
.no-caret::before { display: none !important; }
#hd-notif-btn {
  color: var(--hd-text);
}
#hd-notif-btn:hover,
#hd-notif-btn[aria-expanded="true"] {
  background: var(--hd-icon-hover);
  color: var(--hd-text);
}

/* ── Store button ── */
.hd-store-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9px;
  border: 1px solid var(--role-accent-focus, rgba(37,99,235,.3));
  background: var(--role-accent-soft, rgba(37,99,235,.08));
  color: #93c5fd;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: all .15s;
  white-space: nowrap;
}
.hd-store-btn:hover {
  background: var(--role-accent-soft, rgba(37,99,235,.15));
  color: #bfdbfe;
  border-color: var(--role-accent, #2563EB);
  opacity: .9;
}
body:not(.dark-mode) .hd-store-btn {
  color: var(--role-accent, #2563EB);
  border-color: var(--role-accent-focus, rgba(37,99,235,.25));
  background: var(--role-accent-soft, rgba(37,99,235,.06));
}

/* ── Notification dot ── */
.hd-dot {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--role-accent, var(--primary));
  border: 2px solid var(--hd-bg);
}
.hd-badge-count {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 50px;
  background: #ef4444;
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--hd-bg);
  line-height: 1;
}

/* ── Notification panel ── */
.hd-notif-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hd-dd-border);
  font-size: .82rem;
  font-weight: 700;
  color: var(--hd-text);
}
.hd-mark-btn {
  border: none;
  background: none;
  color: var(--role-accent, var(--primary));
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}

/* ── Language button ── */
.hd-lang-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 9px;
  border: 1px solid var(--hd-dd-border);
  background: var(--hd-icon-bg);
  color: var(--hd-text);
  cursor: pointer;
  font-size: .8rem;
  transition: all .15s;
}
.hd-lang-btn:hover { background: var(--hd-icon-hover); border-color: var(--role-accent, var(--primary)); }
.hd-lang-code { font-size: .72rem; font-weight: 700; letter-spacing: .04em; }

/* ── Theme toggle — single icon, class swapped by theme-toggle.js ── */
.hd-theme-btn { gap: 0; }
/* Legacy two-icon rules removed — no longer needed. */

/* ── User button ── */
.hd-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid var(--hd-dd-border);
  background: var(--hd-icon-bg);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.hd-user-btn:hover { background: var(--hd-icon-hover); border-color: var(--role-accent, var(--primary)); }
.hd-avatar-wrap { position: relative; flex-shrink: 0; }
.hd-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--role-accent, var(--primary));
}
.hd-avatar--lg { width: 40px; height: 40px; }
.hd-avatar-status {
  position: absolute;
  bottom: 1px;
  right: 1px;    /* physical — always bottom-right regardless of RTL */
  left: auto;
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  border: 2px solid var(--hd-bg);
}
.hd-user-info { text-align: start; }
.hd-user-name { font-size: .8rem; font-weight: 700; color: var(--hd-text); line-height: 1.2; }
.hd-user-role { font-size: .65rem; color: var(--hd-muted); font-weight: 500; }

/* ── Dropdowns ── */
.hd-dropdown {
  background: var(--hd-dd-bg);
  border: 1px solid var(--hd-dd-border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  margin-top: 6px;
}
.hd-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--hd-text) !important;
  font-size: .83rem;
  transition: background .12s;
}
.hd-dd-item:hover { background: var(--hd-dd-hover); }
.hd-dd-item.active { color: var(--role-accent, var(--primary)) !important; background: var(--hd-dd-hover); }
.hd-dd-item i { width: 16px; text-align: center; color: var(--hd-muted); }
.hd-dd-item:hover i { color: var(--role-accent, var(--primary)); }
.hd-logout { color: #fb7185 !important; }
.hd-logout:hover { background: rgba(251,113,133,.08) !important; }
.hd-logout i { color: #fb7185 !important; }
.dropdown-divider { border-color: var(--hd-dd-divider) !important; margin: 2px 0 !important; }

/* ── User panel popup ── */
.hd-user-panel-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 12px 8px;
}
.hd-user-panel-info { flex: 1; min-width: 0; }
.hd-user-panel-name  { font-size: .88rem; font-weight: 700; color: var(--hd-text); line-height: 1.3; }
.hd-user-panel-email { font-size: .72rem; color: var(--hd-muted); word-break: break-all; margin-top: 2px; }

/* ── Notif panel ── */
.hd-notif-panel { padding: 0 !important; overflow: hidden; }

/* ── Topbar sticky offset for content ── */
.main-content, .main-content-rtl {
  padding-top: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
 * 🔷 NEW SIDEBAR  (sb-* + sd-* — role-adaptive colours)
 * ══════════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar variables — colour tokens live in the :root block at the
   top of this file (lines ~4139). This section adds transition + role
   accent aliases only; no bg/border overrides here. ── */
:root {
  --sb-active-bg:   var(--role-accent-soft, rgba(37,99,235,.12));
  --sb-active-text: var(--role-accent, #2563EB);
  --sb-transition:  .2s ease;
  --sb-title-color: var(--hd-muted);
}
body:not(.dark-mode) {
  --sb-active-bg:   var(--role-accent-soft, rgba(37,99,235,.08));
  --sb-active-text: var(--role-accent, #2563EB);
  --sb-title-color: #9ca3af;
}

/* ── Base sidebar — override old fixed positioning to start below topbar ── */
.sidebar {
  background: var(--sb-bg) !important;
  border-inline-end: 1px solid var(--sb-border) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  top: var(--hd-h, 60px) !important;
  height: calc(100vh - var(--hd-h, 60px)) !important;
  min-height: unset !important;
  overflow: hidden !important;
}

/* ── Brand area ── */
.sb-brand {
  display: flex;
  align-items: center;
  padding: 16px 14px;
  border-bottom: 1px solid var(--sb-border);
  gap: 10px;
  min-height: 60px;
  flex-shrink: 0;
}
.sb-brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--role-accent, var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  transition: transform .2s;
}
.sb-brand-icon:hover { transform: scale(1.05); }
.sb-brand-text { flex: 1; min-width: 0; }
.sb-brand-name {
  font-size: .95rem;
  font-weight: 800;
  color: var(--sb-text-active);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Scroll area ── */
.sb-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 8px 16px;
}
.sb-scroll::-webkit-scrollbar { width: 4px; }
.sb-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }
body:not(.dark-mode) .sb-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); }

/* ── Nav items ── */
.sidebar .sd-nav { list-style: none; margin: 0; padding: 0; }

.sidebar .sd-item {
  margin-bottom: 2px;
  animation: sd-in .25s both;
  animation-delay: calc(var(--i, 0) * 30ms);
}
@keyframes sd-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sd-in-rtl {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}
html[dir="rtl"] .sidebar .sd-item {
  animation-name: sd-in-rtl;
}

.sidebar .sd-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--sb-text);
  font-size: .84rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: background var(--sb-transition), color var(--sb-transition);
  cursor: pointer;
  border: none;
  width: 100%;
  background: transparent;
  text-align: start;
}
.sidebar .sd-link i {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  color: var(--sb-text);
  transition: color var(--sb-transition);
}
.sidebar .sd-link:hover {
  background: var(--sb-hover);
  color: var(--sb-text-active);
}
.sidebar .sd-link:hover i { color: var(--role-accent, var(--primary)); }

.sidebar .sd-link.active {
  background: var(--sb-active-bg);
  color: var(--role-accent, var(--primary));
  font-weight: 700;
}
.sidebar .sd-link.active i { color: var(--role-accent, var(--primary)); }

/* Collapse submenu links */
.sidebar .collapse-menu .sd-link {
  padding-inline-start: 42px;
  font-size: .8rem;
  border-radius: 7px;
}
.sidebar .collapse-menu .sd-link::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sb-text);
  flex-shrink: 0;
  margin-inline-end: 4px;
  transition: background var(--sb-transition);
}
.sidebar .collapse-menu .sd-link.active::before,
.sidebar .collapse-menu .sd-link:hover::before {
  background: var(--role-accent, var(--primary));
}

/* Dropdown arrow */
.sidebar .sd-link.dropdown-toggle::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .58rem;
  margin-inline-start: auto;
  transition: transform .2s;
  opacity: .5;
  flex-shrink: 0;
}
.sidebar .sd-link.dropdown-toggle:not(.collapsed)::after {
  transform: rotate(-180deg);
  opacity: 1;
  color: var(--role-accent, var(--primary));
}

/* Nav section titles */
.sidebar .nav-title {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sb-title-color);
  padding: 16px 12px 6px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar .nav-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sb-border);
}
.sidebar .nav-title[data-c="blue"]    { color: #60a5fa; }
.sidebar .nav-title[data-c="green"]   { color: #34d399; }
.sidebar .nav-title[data-c="teal"]    { color: #2dd4bf; }
.sidebar .nav-title[data-c="purple"]  { color: #a78bfa; }
.sidebar .nav-title[data-c="amber"]   { color: #fbbf24; }
.sidebar .nav-title[data-c="gray"]    { color: #9ca3af; }
.sidebar .nav-title[data-c="rose"]    { color: #fb7185; }
body:not(.dark-mode) .sidebar .nav-title[data-c="blue"]   { color: #2563eb; }
body:not(.dark-mode) .sidebar .nav-title[data-c="green"]  { color: #059669; }
body:not(.dark-mode) .sidebar .nav-title[data-c="teal"]   { color: #0d9488; }
body:not(.dark-mode) .sidebar .nav-title[data-c="purple"] { color: #7c3aed; }
body:not(.dark-mode) .sidebar .nav-title[data-c="amber"]  { color: #d97706; }
body:not(.dark-mode) .sidebar .nav-title[data-c="gray"]   { color: #6b7280; }
body:not(.dark-mode) .sidebar .nav-title[data-c="rose"]   { color: #e11d48; }

/* ── Profile area ── */
.sb-profile {
  padding: 10px 8px;
  border-top: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.sb-profile-avatar { border: 2px solid var(--role-accent, var(--primary)); }

/* ── Collapsed state ── */
body.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed-width) !important;
}
body.sidebar-collapsed .sb-brand-text,
body.sidebar-collapsed .nav-text,
body.sidebar-collapsed .nav-title,
body.sidebar-collapsed .sb-profile-info,
body.sidebar-collapsed .collapse-menu,
body.sidebar-collapsed .sd-link.dropdown-toggle::after {
  display: none !important;
}
body.sidebar-collapsed .sb-brand { justify-content: center; padding: 12px; }
body.sidebar-collapsed .sd-link  { justify-content: center; padding: 10px; }
body.sidebar-collapsed .sd-link i { width: auto; font-size: 1.1rem; }
body.sidebar-collapsed .sb-profile { padding: 8px 4px; }
body.sidebar-collapsed .sb-profile > div { justify-content: center; padding: 8px 4px; }
body.sidebar-collapsed .sb-scroll { padding: 8px 4px; }

/* ── Mobile sidebar (off-canvas drawer) ── */
@media (max-width: 991px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  html[dir="rtl"] .sidebar { transform: translateX(100%); }

  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
  }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: calc(var(--z-sidebar) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
  }
  body.sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* Content fills full width on mobile */
  .main-content,
  .main-content-rtl {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    width: 100% !important;
  }
}

/* ── Content offset from sidebar ── */
.main-content     { margin-inline-start: var(--sidebar-width);   transition: margin-inline-start .25s ease; }
.main-content-rtl { margin-inline-end:   var(--sidebar-width);   transition: margin-inline-end .25s ease;   }
body.sidebar-collapsed .main-content     { margin-inline-start: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .main-content-rtl { margin-inline-end:   var(--sidebar-collapsed-width); }


/* ═══════════════════════════════════════════════════════════════════════
   AUTH PAGES  —  Login · OTP  (v5 — premium split layout, dark-first)
   All CSS lives here — zero inline styles in blade files
   Dark default → light override via  body.light-mode
   RTL via  html[dir="rtl"]
═══════════════════════════════════════════════════════════════════════ */

/* ── Global reset for auth pages ── */
body.auth-body {
  margin: 0; padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: 'Zain', sans-serif;
}
body.auth-body > main {
  min-height: 100vh;
  display: flex;
}

/* ══════════════════════════════════════════════════════════════════════════
   AUTH PAGES — StoreHub-style dark split layout
══════════════════════════════════════════════════════════════════════════ */

/* ── CSS tokens ── */
.auth-wrap {
  --af-bg:          #27272A;
  --af-bg2:         #2e2e32;
  --af-card-bg:     rgba(18,18,20,.88);
  --af-text:        #edf0ff;
  --af-muted:       #8a8a9a;
  --af-border:      rgba(255,255,255,.08);
  --af-input-bg:    rgba(255,255,255,.05);
  --af-input-brd:   rgba(255,255,255,.1);
  --af-ctrl-bg:     rgba(255,255,255,.06);
  --af-accent:      #4f6ef7;
  --af-accent2:     #7c9cff;
  --af-btn:         linear-gradient(135deg, #4f6ef7 0%, #3b55e0 100%);
  --af-btn-sh:      0 8px 28px rgba(79,110,247,.4);
  --af-hero-bg:     linear-gradient(105deg, rgba(15,15,18,.55) 0%, transparent 60%);
  --af-radius:      12px;
  --af-trans:       .2s ease;
}
body.light-mode .auth-wrap {
  --af-bg:          #f4f4f5;
  --af-bg2:         #e4e4e7;
  --af-card-bg:     rgba(255,255,255,.9);
  --af-text:        #18181b;
  --af-muted:       #71717a;
  --af-border:      rgba(0,0,0,.09);
  --af-input-bg:    #ffffff;
  --af-input-brd:   #d4d4d8;
  --af-ctrl-bg:     #e4e4e7;
  --af-hero-bg:     linear-gradient(105deg, rgba(0,0,0,.08) 0%, transparent 60%);
}

/* ══════════ LAYOUT ══════════ */
.auth-wrap {
  display: flex; min-height: 100dvh; width: 100%;
  background: var(--af-bg);
  position: relative; overflow: hidden;
}
html[dir="rtl"] .auth-wrap { flex-direction: row-reverse; }

/* ── Moving diagonal lines (full-bg animation) ── */
.auth-wrap::before {
  content: '';
  position: absolute; inset: -150px;
  z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0px, transparent 52px,
    rgba(255,255,255,.022) 52px, rgba(255,255,255,.022) 53px
  );
  animation: bgLinesSlide 28s linear infinite;
}
@keyframes bgLinesSlide {
  from { transform: translate(0,0); }
  to   { transform: translate(75px,75px); }
}
body.light-mode .auth-wrap::before {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0px, transparent 52px,
    rgba(0,0,0,.028) 52px, rgba(0,0,0,.028) 53px
  );
}

/* ── Hero side (LEFT 55%) ── */
.auth-hero-side {
  flex: 0 0 55%; max-width: 55%; min-height: 100dvh;
  background: var(--af-hero-bg);
  display: flex; flex-direction: column;
  padding: 36px 48px 60px;
  position: relative; overflow: hidden;
  z-index: 1;
}
.auth-hero-glow {
  position: absolute; border-radius: 50%;
  filter: blur(120px); pointer-events: none;
}
.auth-hero-glow-1 {
  width: 500px; height: 500px;
  bottom: -100px; inset-inline-start: -100px;
  background: rgba(37,99,235,.5);
  animation: authGlow 12s ease-in-out infinite alternate;
}
.auth-hero-glow-2 {
  width: 300px; height: 300px;
  top: -80px; inset-inline-end: 10%;
  background: rgba(79,110,247,.3);
  animation: authGlow 9s ease-in-out infinite alternate-reverse;
}
@keyframes authGlow {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-25px) scale(1.1); }
}
.auth-hero-dots {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 55% at 15% 88%, rgba(79,110,247,.14) 0%, transparent 60%),
    radial-gradient(ellipse 55% 70% at 88% 8%,  rgba(99,102,241,.1)  0%, transparent 60%);
}

/* Brand top-left */
.auth-hero-brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; position: relative; z-index: 5;
  margin-bottom: 48px;
  opacity: 0; transform: translateY(-12px);
  animation: authFadeUp .5s cubic-bezier(.16,1,.3,1) .1s forwards;
}
.auth-hero-brand-icon {
  width: 40px; height: 40px; border-radius: 11px;
  background: linear-gradient(135deg, #4f6ef7, #3b55e0);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; color: #fff; flex-shrink: 0;
  overflow: hidden;
}
.auth-favicon-img { width: 28px; height: 28px; object-fit: contain; }
.auth-brand-favicon { height: 38px; max-width: 64px; object-fit: contain; flex-shrink: 0; }
.auth-hero-brand-name { font-size: .95rem; font-weight: 800; color: #fff; line-height: 1.2; }
.auth-hero-brand-tag  { font-size: .68rem; color: rgba(255,255,255,.5); font-weight: 500; }

/* Hero body */
.auth-hero-body {
  position: relative; z-index: 5; flex: 1;
  max-width: 520px;
}
.auth-hero-headline {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 900; color: #fff; line-height: 1.2;
  margin-bottom: 16px; letter-spacing: -.02em;
  opacity: 0; transform: translateY(20px);
}
.auth-hero-headline.ah-in { animation: authFadeUp .65s cubic-bezier(.16,1,.3,1) forwards; }
.auth-hero-hl-accent { color: #4f6ef7; }
.auth-hero-desc {
  font-size: .9rem; color: rgba(255,255,255,.6);
  line-height: 1.7; margin-bottom: 32px; font-weight: 400;
  opacity: 0; transform: translateY(16px);
}
.auth-hero-desc.ah-in { animation: authFadeUp .6s cubic-bezier(.16,1,.3,1) forwards; }

/* Feature list */
.auth-hero-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.auth-hero-feat {
  display: flex; align-items: flex-start; gap: 14px;
  opacity: 0; transform: translateY(14px);
}
.auth-hero-feat.ah-in { animation: authFadeUp .55s cubic-bezier(.16,1,.3,1) forwards; }
.auth-hero-feat-ico {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: rgba(79,110,247,.18);
  border: 1px solid rgba(79,110,247,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; color: #7c9cff;
}
.auth-hero-feat-title { font-size: .86rem; font-weight: 700; color: #fff; margin-bottom: 2px; }
.auth-hero-feat-desc  { font-size: .75rem; color: rgba(255,255,255,.5); line-height: 1.5; }

/* ── Device frame mockup ── */
.auth-device-outer {
  position: relative; z-index: 5; margin-top: 32px;
  opacity: 0; transform: translateY(36px);
}
.auth-device-outer.ah-in {
  animation: authFadeUp .8s cubic-bezier(.16,1,.3,1) forwards;
}

.auth-device-frame {
  border-radius: 18px 18px 0 0;
  background: #0b0d16;
  border: 2px solid rgba(255,255,255,.13);
  border-bottom: none;
  padding: 10px 8px 0;
  transform: perspective(700px) rotateX(13deg) rotateY(-4deg);
  transform-origin: center 90%;
  box-shadow:
    0 -8px 60px rgba(0,0,0,.5),
    0 30px 80px rgba(79,110,247,.1),
    inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
  height: 262px;
}
.auth-device-frame::before {
  content: '';
  display: block;
  width: 36px; height: 4px;
  background: rgba(255,255,255,.12);
  border-radius: 2px;
  margin: 0 auto 7px;
}

.auth-device-screen {
  background: #111520;
  border-radius: 11px 11px 0 0;
  overflow: hidden;
  height: 100%;
  display: flex; flex-direction: column;
}

/* ─ Topbar ─ */
.auth-ds-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.auth-ds-topbrand {
  display: flex; align-items: center; gap: 5px;
  font-size: .5rem; font-weight: 700; color: rgba(255,255,255,.8);
}
.auth-ds-topbrand-ico {
  width: 13px; height: 13px; border-radius: 3px;
  background: linear-gradient(135deg, #4f6ef7, #3b55e0);
  flex-shrink: 0;
}
.auth-ds-topright {
  display: flex; align-items: center; gap: 4px;
}
.auth-ds-ticon {
  width: 17px; height: 17px; border-radius: 4px;
  background: rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
  font-size: .43rem; color: rgba(255,255,255,.38);
}
.auth-ds-tavatar {
  width: 17px; height: 17px; border-radius: 50%;
  background: linear-gradient(135deg, #4f6ef7, #7c9cff);
}

/* ─ Stats row ─ */
.auth-ds-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 5px; padding: 6px 8px;
  flex-shrink: 0;
}
.auth-ds-stat {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px; padding: 5px 7px;
}
.auth-ds-stat-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2px;
}
.auth-ds-stat-lbl {
  font-size: .44rem; color: rgba(255,255,255,.45); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 68%;
}
.auth-ds-stat-up {
  font-size: .38rem; font-weight: 700; color: #34d399; flex-shrink: 0;
}
.auth-ds-stat-val {
  font-size: .68rem; font-weight: 900; color: #fff; line-height: 1; margin-bottom: 3px;
}
.auth-ds-spark { width: 100%; height: 18px; display: block; }

/* ─ Body: chart + orders ─ */
.auth-ds-body {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5px; padding: 0 8px 8px;
  flex: 1; min-height: 0; overflow: hidden;
}
.auth-ds-sect-lbl {
  font-size: .44rem; font-weight: 700;
  color: rgba(255,255,255,.35); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 4px;
}
.auth-ds-chart-box { display: flex; flex-direction: column; overflow: hidden; }
.auth-ds-chart { width: 100%; flex: 1; display: block; min-height: 0; }

/* ─ Orders list ─ */
.auth-ds-orders { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.auth-ds-order {
  display: flex; align-items: center; gap: 3px;
  padding: 3px 4px; border-radius: 5px;
  background: rgba(255,255,255,.03);
}
.auth-ds-oid  { font-size: .42rem; font-weight: 700; color: rgba(255,255,255,.5); flex-shrink: 0; }
.auth-ds-onm  {
  font-size: .42rem; font-weight: 600; color: rgba(255,255,255,.75);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-ds-opr  { font-size: .42rem; font-weight: 800; color: #fff; flex-shrink: 0; }
.auth-ds-badge {
  font-size: .36rem; font-weight: 700; border-radius: 3px; padding: 1px 4px;
  flex-shrink: 0; text-transform: uppercase; letter-spacing: .03em;
}
.auth-ds-badge.shipped { background: rgba(52,211,153,.18); color: #34d399; }
.auth-ds-badge.pending { background: rgba(251,191,36,.18);  color: #fbbf24; }

/* ══════════ FORM SIDE (RIGHT 45%) ══════════ */
.auth-form-side {
  flex: 1; min-height: 100dvh;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 36px; overflow-y: auto;
  position: relative; z-index: 1;
}
body.light-mode .auth-form-side { background: transparent; }

/* Inner card */
.auth-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 550px;
  background: var(--af-card-bg);
  border: 1px solid var(--af-border);
  border-radius: 24px;
  padding: 32px 36px 28px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 64px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04);
  animation: authFadeUp .55s cubic-bezier(.16,1,.3,1) .15s both;
}
body.light-mode .auth-inner {
  background: rgba(255,255,255,.92);
  box-shadow: 0 24px 64px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
}

/* Top controls */
.auth-topbar {
  display: flex; align-items: center; justify-content: flex-end;
  margin-bottom: 32px;
}
.auth-controls { display: flex; align-items: center; gap: 7px; }
.auth-ctrl-btn {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--af-border); background: var(--af-ctrl-bg);
  color: var(--af-muted); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--af-trans); font-size: .8rem;
}
.auth-ctrl-btn:hover {
  border-color: var(--af-accent); color: var(--af-accent);
  background: rgba(79,110,247,.1);
}

/* Lang dropdown */
.auth-lang-dd { position: relative; }
.auth-lang-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 140px; background: var(--af-bg2);
  border: 1px solid var(--af-border); border-radius: 12px;
  padding: 5px; box-shadow: 0 16px 40px rgba(0,0,0,.5);
  display: none; z-index: 200;
}
body.light-mode .auth-lang-menu { background: #fff; }
.auth-lang-menu.open { display: block; animation: authDdIn .15s ease both; }
@keyframes authDdIn {
  from { opacity:0; transform:translateY(-6px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.auth-lang-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--af-text); font-size: .8rem; font-weight: 600;
  text-decoration: none; transition: background var(--af-trans);
}
.auth-lang-item:hover  { background: rgba(79,110,247,.1); color: var(--af-accent); }
.auth-lang-item.active { color: var(--af-accent); background: rgba(79,110,247,.08); }
.auth-lang-flag { display: none; }
.auth-lang-item .flag-icon { width: 20px; height: 15px; border-radius: 3px; flex-shrink: 0; }
.auth-lang-flag-btn { width: auto !important; padding: 0 10px !important; gap: 4px; }
.auth-lang-flag-btn .flag-icon { width: 20px; height: 14px; border-radius: 2px; }

/* Logo icon centered */
.auth-form-icon {
  display: flex; justify-content: center; align-items: center; margin-bottom: 24px;
}
.auth-form-logo-img {
  max-height: 64px; max-width: 180px; object-fit: contain; display: block;
  animation: authIconPop .6s cubic-bezier(.34,1.56,.64,1) .3s both;
}
.auth-form-icon-inner {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg,#4f6ef7,#3b55e0);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: #fff;
  box-shadow: 0 8px 32px rgba(79,110,247,.5), 0 0 0 8px rgba(79,110,247,.1);
  animation: authIconPop .6s cubic-bezier(.34,1.56,.64,1) .3s both;
}
@keyframes authIconPop {
  from { opacity:0; transform: scale(.35) rotate(-10deg); }
  to   { opacity:1; transform: scale(1) rotate(0); }
}

/* Heading */
.auth-heading { text-align: center; margin-bottom: 28px; }
.auth-title {
  font-size: 1.65rem; font-weight: 900; color: var(--af-text);
  margin-bottom: 6px; line-height: 1.2; letter-spacing: -.02em;
}
.auth-wave { display: inline-block; animation: authWave 2s ease-in-out infinite; }
@keyframes authWave {
  0%,100% { transform: rotate(0); }
  25%      { transform: rotate(15deg); }
  75%      { transform: rotate(-10deg); }
}
.auth-subtitle { font-size: .84rem; color: var(--af-muted); font-weight: 400; line-height: 1.6; }

/* Fields */
.auth-field { margin-bottom: 16px; }
.auth-field-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.auth-label {
  display: block; font-size: .78rem; font-weight: 600;
  color: var(--af-text); margin-bottom: 7px;
}
.auth-field-header .auth-label { margin-bottom: 0; }
.auth-input-wrap { position: relative; }
.auth-input-ico {
  position: absolute; inset-inline-start: 14px;
  top: 50%; transform: translateY(-50%);
  color: var(--af-muted); font-size: .8rem;
  pointer-events: none; transition: color var(--af-trans);
}
.auth-input {
  width: 100%; padding: 13px 16px 13px 42px;
  background: var(--af-input-bg);
  border: 1px solid var(--af-input-brd);
  border-radius: var(--af-radius); color: var(--af-text);
  font-size: .88rem; font-family: 'Zain', sans-serif; font-weight: 400;
  transition: all var(--af-trans); outline: none; box-sizing: border-box;
}
html[dir="rtl"] .auth-input { padding: 13px 42px 13px 16px; }
.auth-input::placeholder { color: var(--af-muted); opacity: .65; }
.auth-input:focus {
  border-color: var(--af-accent);
  background: rgba(79,110,247,.07);
  box-shadow: 0 0 0 3px rgba(79,110,247,.18);
}
.auth-input-wrap:focus-within .auth-input-ico { color: var(--af-accent); }
body.light-mode .auth-input { background: #fff; color: #0d1230; border-color: #d0d5ee; }
body.light-mode .auth-input:focus { background: #f0f4ff; border-color: #4f6ef7; box-shadow: 0 0 0 3px rgba(79,110,247,.14); }

/* Eye */
.auth-eye {
  position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%);
  color: var(--af-muted); cursor: pointer; font-size: .8rem;
  background: none; border: none; padding: 4px; transition: color var(--af-trans); line-height: 1;
}
.auth-eye:hover { color: var(--af-accent); }

/* Forgot */
.auth-forgot { font-size: .78rem; color: var(--af-accent); font-weight: 600; text-decoration: none; transition: opacity var(--af-trans); }
.auth-forgot:hover { opacity: .75; text-decoration: underline; }

/* Remember row */
.auth-remember-row { margin-bottom: 20px; }
.auth-remember { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.auth-checkbox  { width: 16px; height: 16px; accent-color: var(--af-accent); cursor: pointer; }
.auth-remember-label { font-size: .82rem; color: var(--af-text); font-weight: 500; }

/* reCAPTCHA */
.auth-recaptcha { margin: 14px 0; }

/* Submit */
.auth-btn {
  width: 100%; padding: 14px 20px;
  background: var(--af-btn); border: none; border-radius: var(--af-radius);
  color: #fff; font-size: .95rem; font-weight: 800; font-family: 'Zain', sans-serif;
  cursor: pointer; transition: all .22s cubic-bezier(.16,1,.3,1);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  position: relative; overflow: hidden; letter-spacing: .01em;
  box-shadow: var(--af-btn-sh);
}
.auth-btn::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transition: left .5s ease;
}
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 36px rgba(79,110,247,.55); }
.auth-btn:hover::before { left: 160%; }
.auth-btn:active { transform: translateY(0); }
.auth-btn:disabled { opacity: .7; cursor: not-allowed; transform: none; }
.auth-btn-spinner { display: none; align-items: center; }

/* Social login */
.auth-social { margin-top: 22px; }
.auth-social-sep {
  display: flex; align-items: center; gap: 12px;
  font-size: .76rem; color: var(--af-muted); font-weight: 500;
  margin-bottom: 14px;
}
.auth-social-line { flex: 1; height: 1px; background: var(--af-border); }
.auth-social-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-social-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 44px; border-radius: var(--af-radius);
  border: 1px solid var(--af-border); background: var(--af-ctrl-bg);
  color: var(--af-text); font-size: .85rem; font-weight: 700;
  font-family: 'Zain', sans-serif; cursor: pointer;
  transition: all .18s ease;
}
.auth-social-btn:hover {
  border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.09);
  transform: translateY(-1px);
}
body.light-mode .auth-social-btn { background: #fff; border-color: #d0d5ee; color: #0d1230; }

/* Sign up row */
.auth-signup-row {
  margin-top: 18px; text-align: center;
  font-size: .82rem; color: var(--af-muted); font-weight: 400;
}
.auth-signup-link { color: var(--af-accent); font-weight: 700; text-decoration: none; margin-inline-start: 4px; }
.auth-signup-link:hover { text-decoration: underline; }

/* Trust badges */
.auth-trust {
  display: flex; gap: 0; margin-top: 24px;
  border-top: 1px solid var(--af-border);
  padding-top: 16px;
}
.auth-trust-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 5px; padding: 0 8px;
  border-inline-end: 1px solid var(--af-border);
}
.auth-trust-item:last-child { border-inline-end: none; }
.auth-trust-item > i { font-size: .9rem; color: var(--af-accent); }
.auth-trust-lbl  { font-size: .68rem; font-weight: 700; color: var(--af-text); line-height: 1.2; }
.auth-trust-desc { font-size: .6rem; color: var(--af-muted); line-height: 1.3; }

/* Old CTA (kept for non-login pages) */
.auth-signup { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.auth-signup-divider { display: flex; align-items: center; gap: 12px; }
.auth-signup-divider-line { flex: 1; height: 1px; background: var(--af-border); }
.auth-signup-divider-text { font-size: .7rem; font-weight: 700; color: var(--af-muted); text-transform: uppercase; letter-spacing: .08em; }
.auth-signup-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 46px; padding: 0 16px;
  border-radius: 11px; border: 1.5px solid var(--af-border);
  background: var(--af-ctrl-bg); color: var(--af-text);
  font-size: .9rem; font-weight: 700; text-decoration: none;
  transition: border-color .2s, background .2s, transform .15s;
}
.auth-signup-btn:hover { border-color: var(--af-accent); background: rgba(79,110,247,.06); color: var(--af-text); transform: translateY(-1px); }
.auth-signup-btn-arrow { margin-inline-start: auto; font-size: .75rem; opacity: .5; transition: transform .2s, opacity .2s; }
.auth-signup-btn:hover .auth-signup-btn-arrow { opacity: 1; transform: translateX(3px); }
html[dir="rtl"] .auth-signup-btn:hover .auth-signup-btn-arrow { transform: translateX(-3px); }
.auth-footer { margin-top: 20px; text-align: center; }
.auth-secure {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px; border-radius: 50px;
  border: 1px solid var(--af-border); background: var(--af-ctrl-bg);
  font-size: .69rem; font-weight: 600; color: var(--af-muted);
}
.auth-secure-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; }

/* ══════════ OTP PAGE ══════════ */
.auth-otp-icon {
  width: 70px; height: 70px; border-radius: 20px;
  background: var(--af-btn);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.65rem; color: #fff; margin: 0 auto 24px;
  box-shadow: var(--af-btn-sh), 0 0 0 8px rgba(79,110,247,.1);
  animation: authIconPop .55s cubic-bezier(.34,1.56,.64,1) both;
}
.auth-otp-boxes { display: flex; gap: 10px; justify-content: center; margin-bottom: 24px; direction: ltr; }
.auth-otp-box {
  width: 52px; height: 58px; text-align: center; font-size: 1.45rem; font-weight: 900;
  background: var(--af-input-bg); border: 1.5px solid var(--af-input-brd);
  border-radius: var(--af-radius); color: var(--af-text);
  font-family: 'Zain', monospace; outline: none;
  transition: all var(--af-trans); caret-color: var(--af-accent);
}
.auth-otp-box:focus {
  border-color: var(--af-accent); background: rgba(79,110,247,.07);
  box-shadow: 0 0 0 3px rgba(79,110,247,.18); transform: scale(1.04);
}
body.light-mode .auth-otp-box { background: #fff; border-color: #c6ceee; color: #0d1230; }
body.light-mode .auth-otp-box:focus { background: #f4f6ff; }
.auth-countdown { text-align: center; font-size: .82rem; color: var(--af-muted); margin-bottom: 20px; }
.auth-countdown-time { color: var(--af-accent); font-weight: 800; font-size: .95rem; }
.auth-resend-wrap { text-align: center; margin-bottom: 20px; }
.auth-resend-btn {
  background: none; border: none; color: var(--af-accent); font-size: .84rem; font-weight: 800;
  font-family: 'Zain', sans-serif; cursor: pointer; padding: 6px 14px; border-radius: 8px; transition: all var(--af-trans);
}
.auth-resend-btn:hover { background: rgba(79,110,247,.1); }
.auth-back { display: inline-flex; align-items: center; gap: 7px; color: var(--af-muted); font-size: .82rem; font-weight: 600; text-decoration: none; transition: color var(--af-trans); padding: 5px 0; }
.auth-back:hover { color: var(--af-accent); }
html[dir="rtl"] .auth-back .fa-arrow-left-long { transform: scaleX(-1); }

/* ══════════ ENTRANCE ANIMATIONS ══════════ */
@keyframes authFadeUp {
  from { opacity: 0; transform: translateY(var(--_ty, 18px)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════ RTL OVERRIDES ══════════ */

/* Flip hero overlay gradient — in RTL the hero is on the right so shadow comes from right */
html[dir="rtl"] .auth-hero-side {
  background: linear-gradient(255deg, rgba(15,15,18,.55) 0%, transparent 60%);
}
body.light-mode html[dir="rtl"] .auth-hero-side {
  background: linear-gradient(255deg, rgba(0,0,0,.08) 0%, transparent 60%);
}

/* Mirror the atmospheric glow dots gradient */
html[dir="rtl"] .auth-hero-dots {
  background:
    radial-gradient(ellipse 75% 55% at 85% 88%, rgba(79,110,247,.14) 0%, transparent 60%),
    radial-gradient(ellipse 55% 70% at 12% 8%,  rgba(99,102,241,.1)  0%, transparent 60%);
}

/* Flip device frame 3D Y-rotation for RTL */
html[dir="rtl"] .auth-device-frame {
  transform: perspective(700px) rotateX(13deg) rotateY(4deg);
}

/* Topbar controls — always on the inline-end (right in LTR, left in RTL) */
html[dir="rtl"] .auth-topbar { justify-content: flex-start; }

/* Lines animation direction mirrors in RTL */
html[dir="rtl"] .auth-wrap::before {
  animation: bgLinesSlideRtl 28s linear infinite;
}
@keyframes bgLinesSlideRtl {
  from { transform: translate(0,0); }
  to   { transform: translate(-75px,75px); }
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 1024px) {
  .auth-hero-side { flex: 0 0 50%; max-width: 50%; padding: 32px 36px 0; }
  .auth-hero-headline { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
}
@media (max-width: 900px) {
  .auth-hero-side { display: none; }
  .auth-form-side { flex: 1; max-width: 100%; }
}
@media (max-width: 480px) {
  .auth-form-side { padding: 28px 20px; }
  .auth-otp-box   { width: 44px; height: 52px; font-size: 1.2rem; }
  .auth-otp-boxes { gap: 7px; }
  .auth-title     { font-size: 1.4rem; }
  .auth-topbar    { margin-bottom: 24px; }
  .auth-trust     { flex-direction: column; gap: 12px; }
  .auth-trust-item { flex-direction: row; text-align: start; border-inline-end: none; border-bottom: 1px solid var(--af-border); padding-bottom: 12px; }
  .auth-trust-item:last-child { border-bottom: none; padding-bottom: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   AUTH v6  —  Premium Navy SaaS  |  pn-* classes
   Brand: bg #18181B · surface #27272A · primary #1E2968 · hover #1E3580
   RTL-aware · dark-first · light mode via body.light-mode
═══════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ── */
.pn-wrap {
  --pn-bg:       #18181B;
  --pn-surf:     #27272A;
  --pn-brand:    #1E2968;
  --pn-brand-h:  #1E3580;
  --pn-brand-lt: #2d3f8c;
  --pn-brand-s:  rgba(30,41,104,.13);
  --pn-brand-g:  rgba(30,41,104,.5);
  --pn-text:     #F4F4F5;
  --pn-text-2:   #A1A1AA;
  --pn-muted:    #71717A;
  --pn-border:   rgba(255,255,255,.08);
  --pn-in-bg:    rgba(255,255,255,.05);
  --pn-in-brd:   rgba(255,255,255,.1);
  --pn-err:      #EF4444;
  --pn-ok:       #22C55E;
  --pn-r:        12px;
  --pn-t:        .2s ease;
}
body.light-mode .pn-wrap {
  --pn-bg:      #F4F4F5;
  --pn-surf:    #FFFFFF;
  --pn-text:    #18181B;
  --pn-text-2:  #52525B;
  --pn-muted:   #A1A1AA;
  --pn-border:  rgba(0,0,0,.1);
  --pn-in-bg:   #FFFFFF;
  --pn-in-brd:  #D4D4D8;
}

/* ── Root layout ── */
.pn-wrap {
  display: flex; min-height: 100dvh; width: 100%;
  background: var(--pn-bg); position: relative; overflow: hidden;
}
html[dir="rtl"] .pn-wrap { flex-direction: row-reverse; }

/* Moving diagonal lines (background texture) */
.pn-wrap::before {
  content: '';
  position: absolute; inset: -200px; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0px, transparent 50px,
    rgba(255,255,255,.016) 50px, rgba(255,255,255,.016) 51px
  );
  animation: pnBgSlide 32s linear infinite;
}
@keyframes pnBgSlide {
  from { transform: translate(0,0); }
  to   { transform: translate(72px,72px); }
}
html[dir="rtl"] .pn-wrap::before { animation: pnBgSlideR 32s linear infinite; }
@keyframes pnBgSlideR {
  from { transform: translate(0,0); }
  to   { transform: translate(-72px,72px); }
}
body.light-mode .pn-wrap::before {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0px, transparent 50px,
    rgba(0,0,0,.022) 50px, rgba(0,0,0,.022) 51px
  );
}

/* ══════ BRAND PANEL (LEFT 54%) ══════ */
.pn-brand {
  flex: 0 0 54%; max-width: 54%; min-height: 100dvh;
  background: linear-gradient(148deg, #1E2968 0%, #152056 28%, #0d1438 58%, #18181B 100%);
  display: flex; flex-direction: column; padding: 40px 52px 48px;
  position: relative; overflow: hidden; z-index: 1;
}
html[dir="rtl"] .pn-brand {
  background: linear-gradient(212deg, #1E2968 0%, #152056 28%, #0d1438 58%, #18181B 100%);
}

/* Ambient glow orbs */
.pn-orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px); pointer-events: none; z-index: 0;
}
.pn-orb-1 {
  width: 420px; height: 420px;
  top: -120px; inset-inline-start: -70px;
  background: rgba(30,41,104,.75);
  animation: pnOrbA 15s ease-in-out infinite alternate;
}
.pn-orb-2 {
  width: 260px; height: 260px;
  bottom: -40px; inset-inline-end: -30px;
  background: rgba(30,53,128,.55);
  animation: pnOrbA 12s ease-in-out infinite alternate-reverse;
}
.pn-orb-3 {
  width: 180px; height: 180px;
  top: 42%; inset-inline-end: 16%;
  background: rgba(45,63,140,.38);
  animation: pnOrbA 9s ease-in-out infinite alternate;
}
@keyframes pnOrbA {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-28px) scale(1.1); }
}

/* Floating decorative shapes */
.pn-deco {
  position: absolute; pointer-events: none; z-index: 1;
  backdrop-filter: blur(6px);
}
.pn-deco-sq {
  width: 68px; height: 68px; border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.11);
  top: 18%; inset-inline-end: 9%;
  transform: rotate(14deg);
  animation: pnDecoFloat 11s ease-in-out infinite;
}
.pn-deco-circ {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(30,41,104,.4);
  border: 1px solid rgba(255,255,255,.1);
  bottom: 30%; inset-inline-start: 7%;
  animation: pnDecoFloat 14s ease-in-out infinite reverse;
}
.pn-deco-sm {
  width: 26px; height: 26px; border-radius: 7px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
  top: 55%; inset-inline-end: 24%;
  animation: pnDecoFloat 8s ease-in-out infinite;
  animation-delay: -5s;
}
@keyframes pnDecoFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-13px) rotate(5deg); }
}

/* Brand content wrapper */
.pn-brand-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; height: 100%;
}

/* Brand logo at top */
.pn-brand-logo {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; margin-bottom: 52px;
  opacity: 0; transform: translateY(-10px);
  animation: pnFadeUp .5s .05s both;
}
.pn-brand-logo-wrap {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pn-brand-logo-img { height: 28px; max-width: 36px; object-fit: contain; }
.pn-brand-logo-ico { color: #fff; font-size: .95rem; }
.pn-brand-logo-name { font-size: .98rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }

/* Live badge */
.pn-brand-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.85); font-size: .72rem; font-weight: 600;
  margin-bottom: 20px; width: fit-content;
  opacity: 0; animation: pnFadeUp .5s .12s both;
}
.pn-brand-badge-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #4ade80; box-shadow: 0 0 7px rgba(74,222,128,.8);
  animation: pnBlink 2s ease-in-out infinite;
}
@keyframes pnBlink { 0%,100% { opacity:1; } 50% { opacity:.4; } }

/* Headline */
.pn-brand-headline {
  font-size: clamp(1.85rem, 3.2vw, 2.65rem);
  font-weight: 900; color: #fff; line-height: 1.14;
  letter-spacing: -.03em; margin: 0 0 14px;
  opacity: 0; animation: pnFadeUp .55s .2s both;
}
.pn-brand-grad {
  background: linear-gradient(95deg, #93b4ff 0%, #c4d3ff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pn-brand-sub {
  font-size: .9rem; color: rgba(255,255,255,.58); line-height: 1.72;
  margin: 0 0 34px; max-width: 420px;
  opacity: 0; animation: pnFadeUp .5s .28s both;
}

/* Feature list */
.pn-brand-feats {
  list-style: none; padding: 0; margin: 0 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
.pn-brand-feat {
  display: flex; align-items: flex-start; gap: 14px;
  opacity: 0; animation: pnFadeUp .5s both;
}
.pn-brand-feat:nth-child(1) { animation-delay: .32s; }
.pn-brand-feat:nth-child(2) { animation-delay: .39s; }
.pn-brand-feat:nth-child(3) { animation-delay: .46s; }
.pn-brand-feat:nth-child(4) { animation-delay: .53s; }
.pn-brand-feat-ico {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; color: rgba(255,255,255,.85);
}
.pn-brand-feat-title { font-size: .86rem; font-weight: 700; color: #fff; margin-bottom: 2px; }
.pn-brand-feat-desc  { font-size: .75rem; color: rgba(255,255,255,.5); line-height: 1.5; }

/* Stats row at bottom */
.pn-brand-stats {
  display: flex; align-items: center;
  padding-top: 20px; margin-top: 28px;
  border-top: 1px solid rgba(255,255,255,.1);
  opacity: 0; animation: pnFadeUp .5s .6s both;
}
.pn-brand-stat { flex: 1; }
.pn-brand-stat-val {
  font-size: 1.3rem; font-weight: 900; color: #fff;
  letter-spacing: -.02em; line-height: 1; margin-bottom: 3px;
}
.pn-brand-stat-lbl { font-size: .72rem; color: rgba(255,255,255,.48); font-weight: 500; }
.pn-brand-stat-div { width: 1px; height: 38px; background: rgba(255,255,255,.1); flex-shrink: 0; margin: 0 18px; }

/* ══════ FORM PANEL (RIGHT 46%) ══════ */
.pn-form-panel {
  flex: 1; min-height: 100dvh; background: var(--pn-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 32px; overflow-y: auto;
  position: relative; z-index: 1;
}
body.light-mode .pn-form-panel { background: #F0F0F1; }

/* Top floating controls */
.pn-form-top {
  position: absolute; top: 24px; inset-inline-end: 24px;
  display: flex; align-items: center; gap: 8px; z-index: 10;
}

/* Control buttons */
.pn-ctrl {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--pn-border); background: rgba(255,255,255,.05);
  color: var(--pn-text-2); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .8rem; transition: all var(--pn-t);
  font-family: inherit;
}
.pn-ctrl:hover { border-color: rgba(255,255,255,.2); color: var(--pn-text); background: rgba(255,255,255,.08); }
body.light-mode .pn-ctrl { background: #fff; border-color: #E4E4E7; color: #52525B; }
body.light-mode .pn-ctrl:hover { border-color: var(--pn-brand); color: var(--pn-brand); }
.pn-ctrl.pn-ctrl-lang { width: auto; padding: 0 10px; gap: 5px; }
.pn-ctrl.pn-ctrl-lang .flag-icon { width: 20px; height: 14px; border-radius: 2px; }

/* Language dropdown */
.pn-lang-dd { position: relative; }
.pn-lang-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 148px; background: #1c1c1f;
  border: 1px solid var(--pn-border); border-radius: 12px;
  padding: 5px; z-index: 200; box-shadow: 0 16px 44px rgba(0,0,0,.55);
  display: none;
}
body.light-mode .pn-lang-menu { background: #fff; box-shadow: 0 8px 32px rgba(0,0,0,.12); }
.pn-lang-menu.open { display: block; animation: pnDdIn .15s ease both; }
@keyframes pnDdIn {
  from { opacity:0; transform:translateY(-6px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.pn-lang-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--pn-text); font-size: .8rem; font-weight: 600;
  text-decoration: none; transition: background var(--pn-t);
}
.pn-lang-item:hover  { background: var(--pn-brand-s); color: #fff; }
.pn-lang-item.active { background: var(--pn-brand-s); color: #93b4ff; }
body.light-mode .pn-lang-item { color: #18181B; }
body.light-mode .pn-lang-item:hover { background: rgba(30,41,104,.08); color: var(--pn-brand); }
.pn-lang-item .flag-icon { width: 20px; height: 15px; border-radius: 3px; }

/* ── Card ── */
.pn-card {
  width: 100%; max-width: 420px;
  position: relative; z-index: 1;
  animation: pnCardIn .5s .08s both;
}
@keyframes pnCardIn {
  from { opacity:0; transform: translateY(20px) scale(.98); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

/* Mobile logo (hidden on desktop) */
.pn-card-mlogo {
  display: none; justify-content: center; margin-bottom: 28px;
}
.pn-card-mlogo a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.pn-card-mlogo-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--pn-brand);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pn-card-mlogo-img { height: 26px; max-width: 34px; object-fit: contain; }
.pn-card-mlogo-ico { color: #fff; font-size: .88rem; }
.pn-card-mlogo-name { font-size: .96rem; font-weight: 800; color: var(--pn-text); }

/* Card header */
.pn-card-head { margin-bottom: 28px; }
.pn-card-title {
  font-size: 1.72rem; font-weight: 900; color: var(--pn-text);
  letter-spacing: -.03em; margin: 0 0 6px; line-height: 1.15;
}
.pn-card-sub { font-size: .875rem; color: var(--pn-text-2); line-height: 1.6; margin: 0; }

/* Google social button */
.pn-social { margin-bottom: 20px; }
.pn-g-btn {
  width: 100%; height: 46px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--pn-r);
  border: 1px solid var(--pn-border);
  background: var(--pn-in-bg);
  color: var(--pn-text); font-size: .88rem; font-weight: 600;
  cursor: pointer; transition: all var(--pn-t); font-family: inherit;
}
.pn-g-btn:hover {
  border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}
.pn-g-btn:active { transform: translateY(0); }
body.light-mode .pn-g-btn { background: #fff; border-color: #E4E4E7; color: #18181B; }
body.light-mode .pn-g-btn:hover { border-color: #C8C8CA; background: #FAFAFA; }

/* OR divider */
.pn-sep {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 22px; font-size: .76rem; color: var(--pn-muted); font-weight: 500;
}
.pn-sep::before, .pn-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--pn-border);
}
body.light-mode .pn-sep::before,
body.light-mode .pn-sep::after { background: rgba(0,0,0,.1); }

/* Fields */
.pn-field { margin-bottom: 16px; }
.pn-field-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.pn-lbl { display: block; font-size: .8rem; font-weight: 600; color: var(--pn-text); margin-bottom: 7px; }
.pn-field-hd .pn-lbl { margin-bottom: 0; }
.pn-forgot { font-size: .78rem; color: #7c9cff; font-weight: 600; text-decoration: none; transition: opacity var(--pn-t); }
.pn-forgot:hover { opacity: .75; text-decoration: underline; }
body.light-mode .pn-forgot { color: var(--pn-brand); }

.pn-input-wrap { position: relative; }
.pn-input {
  width: 100%; height: 48px; padding: 0 16px;
  background: var(--pn-in-bg); border: 1px solid var(--pn-in-brd);
  border-radius: var(--pn-r); color: var(--pn-text);
  font-size: .9rem; font-family: inherit; font-weight: 400;
  transition: border-color .22s, box-shadow .22s, background .22s;
  outline: none; box-sizing: border-box;
}
.pn-input::placeholder { color: var(--pn-muted); opacity: .7; }
.pn-input:focus {
  border-color: var(--pn-brand-lt);
  background: rgba(30,41,104,.09);
  box-shadow: 0 0 0 3px rgba(30,41,104,.22), 0 0 0 1px rgba(30,41,104,.45);
}
body.light-mode .pn-input { background: #fff; border-color: #D4D4D8; color: #18181B; }
body.light-mode .pn-input:focus {
  border-color: var(--pn-brand); background: rgba(30,41,104,.04);
  box-shadow: 0 0 0 3px rgba(30,41,104,.14);
}
.pn-input-pw { padding-inline-end: 46px; }

/* Eye toggle */
.pn-eye {
  position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 4px;
  color: var(--pn-muted); cursor: pointer; font-size: .8rem;
  transition: color var(--pn-t); line-height: 1;
}
.pn-eye:hover { color: var(--pn-text); }

/* Remember me — custom checkbox */
.pn-remember-row { margin-bottom: 22px; }
.pn-remember { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.pn-chk-native { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.pn-chk-box {
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
  border: 1.5px solid var(--pn-in-brd); background: var(--pn-in-bg);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
  font-size: .6rem; color: transparent;
}
.pn-chk-native:checked + .pn-chk-box {
  background: var(--pn-brand); border-color: var(--pn-brand); color: #fff;
}
body.light-mode .pn-chk-box { background: #fff; border-color: #D4D4D8; }
.pn-remember-lbl { font-size: .84rem; color: var(--pn-text); font-weight: 500; }

/* reCaptcha */
.pn-recaptcha { margin: 14px 0; }

/* Primary button */
.pn-btn {
  width: 100%; height: 48px;
  background: linear-gradient(135deg, var(--pn-brand) 0%, var(--pn-brand-h) 100%);
  border: none; border-radius: var(--pn-r);
  color: #fff; font-size: .94rem; font-weight: 700; font-family: inherit;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 22px var(--pn-brand-g), 0 1px 3px rgba(0,0,0,.3);
  transition: transform .2s, box-shadow .2s, filter .2s;
  letter-spacing: .005em;
}
.pn-btn::after {
  content: '';
  position: absolute; top: 0; left: -115%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transition: left .55s ease;
}
.pn-btn:hover { transform: translateY(-1px); filter: brightness(1.12); box-shadow: 0 8px 30px var(--pn-brand-g); }
.pn-btn:hover::after { left: 180%; }
.pn-btn:active { transform: translateY(0); filter: none; }
.pn-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; filter: none; }
.pn-btn-spin { display: none; align-items: center; }

/* Footer link */
.pn-card-footer { margin-top: 24px; text-align: center; font-size: .84rem; color: var(--pn-muted); }
.pn-link { color: #7c9cff; font-weight: 700; text-decoration: none; margin-inline-start: 4px; transition: opacity var(--pn-t); }
.pn-link:hover { opacity: .8; text-decoration: underline; }
body.light-mode .pn-link { color: var(--pn-brand); }

/* Trust strip */
.pn-trust {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; margin-top: 28px; flex-wrap: wrap;
  padding-top: 20px; border-top: 1px solid var(--pn-border);
}
.pn-trust-item {
  display: flex; align-items: center; gap: 7px;
  font-size: .74rem; color: var(--pn-muted); font-weight: 500;
}
.pn-trust-item i { font-size: .78rem; color: var(--pn-muted); }

/* Error messages */
.pn-errors {
  margin-bottom: 18px; padding: 11px 14px; border-radius: 10px;
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25);
  font-size: .83rem; color: #fca5a5; line-height: 1.55;
}
.pn-errors ul { margin: 0; padding-inline-start: 16px; }

/* ══════ REGISTER — Account type selector ══════ */
.pn-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.pn-type-card {
  position: relative; display: flex; flex-direction: column;
  align-items: flex-start; gap: 7px;
  padding: 16px; border-radius: 14px;
  border: 1.5px solid var(--pn-border); background: var(--pn-in-bg);
  cursor: pointer; transition: all .26s cubic-bezier(.16,1,.3,1);
  overflow: hidden; text-align: start; user-select: none;
}
.pn-type-card::before {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(135deg, rgba(30,41,104,.12), rgba(30,53,128,.06));
  transition: opacity .25s; z-index: 0;
}
.pn-type-card input[type="radio"] { position: absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.pn-type-card:hover { border-color: rgba(30,41,104,.5); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0,0,0,.28); }
.pn-type-card:hover::before { opacity: 1; }
.pn-type-card.is-sel {
  border-color: var(--pn-brand-lt);
  background: rgba(30,41,104,.13);
  box-shadow: 0 0 0 3px rgba(30,41,104,.2);
  transform: translateY(-1px);
}
.pn-type-card.is-sel::before { opacity: 1; }
.pn-type-card.is-off { opacity: .38; pointer-events: none; }

.pn-type-hd { display: flex; align-items: center; gap: 9px; width: 100%; position: relative; z-index: 1; }
.pn-type-ico {
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; flex-shrink: 0; color: #fff; transition: transform .2s;
}
.pn-type-card:hover .pn-type-ico { transform: scale(1.08); }
.pn-type-ico-v { background: linear-gradient(135deg, var(--pn-brand), var(--pn-brand-h)); }
.pn-type-ico-m { background: linear-gradient(135deg, #5b21b6, #7c3aed); }
.pn-type-name { font-size: .88rem; font-weight: 800; color: var(--pn-text); line-height: 1.2; }
.pn-type-sub  { font-size: .63rem; color: var(--pn-muted); margin-top: 1px; font-weight: 500; }
.pn-type-chk {
  margin-inline-start: auto; width: 19px; height: 19px; border-radius: 50%;
  border: 1.5px solid var(--pn-border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: .56rem; transition: all .18s;
}
.pn-type-card.is-sel .pn-type-chk { border-color: var(--pn-brand-lt); background: var(--pn-brand-lt); color: #fff; }
.pn-type-desc { font-size: .76rem; color: var(--pn-text-2); line-height: 1.45; margin: 0; position: relative; z-index: 1; }
.pn-type-off-lbl {
  position: absolute; top: 9px; inset-inline-end: 10px;
  font-size: .58rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(239,68,68,.12); color: var(--pn-err); z-index: 2;
}

/* Register panes */
.pn-pane { display: none; }
.pn-pane.is-active { display: block; animation: pnFadeUp .3s ease both; }

/* 2-col field grid */
.pn-field-2c { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .pn-field-2c { grid-template-columns: 1fr; } }

/* Marketer button */
.pn-btn-m { background: linear-gradient(135deg, #5b21b6, #7c3aed); box-shadow: 0 4px 22px rgba(124,58,237,.45); }

/* Hint box */
.pn-hint {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 14px; padding: 11px 13px; border-radius: 10px;
  font-size: .8rem; color: var(--pn-text); line-height: 1.55;
  background: rgba(30,41,104,.09); border: 1px solid rgba(30,41,104,.25);
}
.pn-pane[data-pane="marketer"] .pn-hint { background: rgba(124,58,237,.07); border-color: rgba(124,58,237,.22); }
.pn-hint-ico { font-size: .78rem; margin-top: 2px; flex-shrink: 0; color: #93b4ff; }
.pn-pane[data-pane="marketer"] .pn-hint-ico { color: #a78bfa; }
.pn-req { color: var(--pn-err); font-size: .75em; margin-inline-start: 2px; }

/* ══════ ENTRANCE ANIMATIONS ══════ */
@keyframes pnFadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══════ RTL OVERRIDES ══════ */
html[dir="rtl"] .pn-form-top { inset-inline-end: 24px; }
html[dir="rtl"] .pn-lang-menu { inset-inline-end: 0; inset-inline-start: unset; }

/* ══════ RESPONSIVE ══════ */
@media (max-width: 1024px) {
  .pn-brand { flex: 0 0 50%; max-width: 50%; padding: 36px 40px 40px; }
  .pn-brand-headline { font-size: clamp(1.5rem, 2.8vw, 2rem); }
  .pn-brand-stats { display: none; }
}
@media (max-width: 860px) {
  .pn-brand { display: none; }
  .pn-form-panel { flex: 1; padding: 28px 20px; }
  .pn-card-mlogo { display: flex; }
  .pn-form-top { top: 16px; inset-inline-end: 16px; }
  .pn-card { max-width: 100%; }
}
@media (max-width: 480px) {
  .pn-card-title { font-size: 1.45rem; }
  .pn-type-grid { grid-template-columns: 1fr; }
  .pn-form-panel { padding: 24px 16px; }
  .pn-trust { flex-direction: column; align-items: center; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PLAN STATUS CARD  —  Vendor Dashboard subscription widget
═══════════════════════════════════════════════════════════════════════ */
.ps-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--bg-secondary, #1a1f35);
  border: 1px solid var(--border-color, rgba(255,255,255,.08));
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
}

/* ── Left section ── */
.ps-left {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  flex: 0 0 auto;
  border-inline-end: 1px solid var(--border-color, rgba(255,255,255,.07));
}
.ps-plan-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.ps-plan-info { min-width: 0; }
.ps-plan-tag  {
  font-size: .65rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted, #94a3b8);
  margin-bottom: 4px;
}
.ps-plan-name {
  font-size: 1.55rem; font-weight: 900; line-height: 1;
  margin-bottom: 2px;
}
.ps-plan-period {
  font-size: .72rem; color: var(--text-muted, #94a3b8);
  font-weight: 500;
}
.ps-divider {
  width: 1px; height: 60px;
  background: var(--border-color, rgba(255,255,255,.08));
  flex-shrink: 0;
}
.ps-dates { min-width: 0; }
.ps-date-row {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--text-secondary, #94a3b8);
  font-weight: 500; margin-bottom: 8px;
}
.ps-date-row i { font-size: .75rem; }
.ps-ok       .ps-date-row, .ps-date-row.ps-ok   { color: #94a3b8; }
.ps-expiring, .ps-date-row.ps-expiring { color: #f59e0b; }
.ps-expired,  .ps-date-row.ps-expired  { color: #ef4444; }
.ps-renew-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px; border-radius: 10px;
  color: #fff; font-size: .8rem; font-weight: 700;
  text-decoration: none; margin-top: 4px;
  transition: opacity .2s, transform .2s;
}
.ps-renew-btn:hover { opacity: .85; transform: translateY(-1px); color: #fff; }

/* ── Center: circular ring ── */
.ps-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 36px;
  border-inline-end: 1px solid var(--border-color, rgba(255,255,255,.07));
  gap: 8px;
  flex-shrink: 0;
}
.ps-ring-wrap { position: relative; width: 88px; height: 88px; }
.ps-ring-svg  { width: 100%; height: 100%; }
.ps-ring-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
}
.ps-ring-val {
  font-size: 1.4rem; font-weight: 900;
  color: var(--text-primary, #f0f4ff);
  line-height: 1;
}
.ps-ring-sub {
  font-size: .52rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
  margin-top: 2px;
}
.ps-ring-label {
  font-size: .72rem; color: var(--text-muted, #94a3b8);
  font-weight: 600;
}

/* ── Right: stats grid ── */
.ps-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  flex: 1;
  background: var(--border-color, rgba(255,255,255,.07));
}
.ps-stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 22px;
  gap: 6px;
  background: var(--bg-secondary, #1a1f35);
  transition: background .15s;
}
.ps-stat-card:hover { background: var(--bg-hover, rgba(255,255,255,.03)); }
.ps-stat-ico {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
}
.ps-stat-val {
  font-size: 1.35rem; font-weight: 900;
  color: var(--text-primary, #f0f4ff);
  line-height: 1;
}
.ps-stat-lbl {
  font-size: .7rem; font-weight: 600;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase; letter-spacing: .04em;
}

/* ── Light mode ── */
body:not(.dark-mode) .ps-wrap {
  background: #fff;
  border-color: #e5e7eb;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
}
body:not(.dark-mode) .ps-stat-card { background: #fff; }
body:not(.dark-mode) .ps-stat-card:hover { background: #f8fafc; }
body:not(.dark-mode) .ps-ring-val { color: #0f1230; }
body:not(.dark-mode) .ps-plan-name { color: inherit; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .ps-center { padding: 20px 24px; }
  .ps-left   { padding: 20px 20px; gap: 14px; }
}
@media (max-width: 860px) {
  .ps-wrap { flex-direction: column; }
  .ps-left, .ps-center { border-inline-end: none; border-bottom: 1px solid var(--border-color, rgba(255,255,255,.08)); }
  .ps-center { padding: 20px; }
  .ps-right { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 540px) {
  .ps-right { grid-template-columns: 1fr 1fr; }
  .ps-left  { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════
   STORE APPEARANCE — Color picker + Theme mode cards
════════════════════════════════════════════════════════════════ */

/* Color picker */
.appearance-color-input {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 3px solid var(--border-main, rgba(255,255,255,.1));
  cursor: pointer; padding: 3px;
  background: none;
  box-shadow: var(--shadow-sm);
}
.appearance-color-preview {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 3px solid var(--border-main, rgba(255,255,255,.1));
  transition: background .3s;
}
.appearance-color-hex {
  font-family: monospace; font-size: .72rem;
  color: var(--text-muted); margin-top: 4px; text-align: center;
}

/* Swatches */
.appearance-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.appearance-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition: transform .15s, border-color .15s;
}
.appearance-swatch:hover { transform: scale(1.18); }
.appearance-swatch.active {
  border-color: var(--bg-surface, #1e293b);
  box-shadow: 0 0 0 2px currentColor;
  transform: scale(1.18);
}

/* Theme mode grid */
.theme-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.theme-mode-card {
  cursor: pointer;
  border: 2px solid var(--border-main, rgba(255,255,255,.1));
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
  position: relative;
}
.theme-mode-card input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.theme-mode-card.active {
  border-color: var(--primary, #1d6ef5);
  box-shadow: 0 0 0 3px rgba(29,110,245,.18);
}
.theme-mode-card:hover { border-color: var(--primary, #1d6ef5); }

.theme-mode-preview {
  height: 68px;
  display: flex; flex-direction: column;
  justify-content: center; gap: 6px;
  padding: 10px 14px;
}
.theme-preview-dark  { background: #0d1225; }
.theme-preview-light { background: #f0f4f8; }
.theme-preview-auto  { background: linear-gradient(135deg, #0d1225 50%, #f0f4f8 50%); }

.tp-bar {
  height: 5px; border-radius: 4px;
}
.theme-preview-dark  .tp-bar { background: rgba(255,255,255,.18); }
.theme-preview-dark  .tp-bar-1 { width: 70%; background: rgba(29,110,245,.55); }
.theme-preview-light .tp-bar { background: rgba(0,0,0,.12); }
.theme-preview-light .tp-bar-1 { width: 70%; background: rgba(29,110,245,.55); }
.theme-preview-auto  .tp-bar { background: rgba(128,128,128,.2); }
.theme-preview-auto  .tp-bar-1 { width: 70%; background: rgba(29,110,245,.45); }

.theme-mode-label {
  padding: 8px 12px;
  font-size: .8rem; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  color: var(--text-main);
  background: var(--bg-surface);
}
.theme-mode-card.active .theme-mode-label { color: var(--primary, #1d6ef5); }

@media (max-width: 640px) {
  .theme-mode-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   CURRENCY MANAGEMENT PAGE
════════════════════════════════════════════════════════════════ */

.cur-default-banner {
  display: flex; align-items: center; gap: 14px;
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 14px;
  padding: 16px 20px;
}
.cur-default-ico {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(16,185,129,.15);
  color: #10b981;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.cur-default-label { font-size: .72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.cur-default-val   { font-size: .95rem; font-weight: 700; color: var(--text-main); }
.cur-default-note  { margin-inline-start: auto; font-size: .78rem; color: var(--text-muted); max-width: 240px; text-align: end; }

/* Table */
.cur-table { width: 100%; border-collapse: collapse; }
.cur-table thead th {
  padding: 12px 16px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted);
  background: var(--bg-main);
  border-bottom: 1px solid var(--border-main);
  white-space: nowrap;
}
.cur-table tbody tr {
  border-bottom: 1px solid var(--border-soft, rgba(255,255,255,.05));
  transition: background .15s;
}
.cur-table tbody tr:last-child { border-bottom: none; }
.cur-table tbody tr:hover { background: var(--bg-main); }
.cur-table tbody tr.cur-row-default { background: rgba(16,185,129,.04); }
.cur-table td { padding: 12px 16px; vertical-align: middle; }

.cur-badge-default {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(16,185,129,.15); color: #10b981;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .65rem; flex-shrink: 0;
}
.cur-symbol {
  font-weight: 700; font-size: 1rem;
  color: var(--text-main);
}

.cur-rate-input {
  width: 120px;
  background: var(--bg-main);
  border: 1px solid var(--border-main);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text-main);
  font-family: monospace; font-size: .85rem;
  transition: border-color .2s;
}
.cur-rate-input:focus { border-color: var(--primary, #1d6ef5); outline: none; }
.cur-rate-input:disabled { opacity: .5; cursor: not-allowed; }

.cur-rate-save-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(29,110,245,.12);
  border: none; cursor: pointer;
  color: var(--primary, #1d6ef5);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s;
  flex-shrink: 0;
}
.cur-rate-save-btn:hover { background: rgba(29,110,245,.22); }

/* Toggle switch */
.cur-toggle-wrap { display: flex; align-items: center; gap: 8px; }
.cur-toggle {
  position: relative; width: 38px; height: 22px;
  background: var(--border-main, rgba(255,255,255,.15));
  border-radius: 100px; cursor: pointer;
  transition: background .2s;
}
.cur-toggle.active { background: #10b981; }
.cur-toggle-knob {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%; background: #fff;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.cur-toggle.active .cur-toggle-knob { transform: translateX(16px); }
.cur-toggle-label { font-size: .78rem; font-weight: 600; }

.cur-action-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: none; cursor: pointer;
  font-size: .78rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, color .15s;
}
.cur-set-default-btn {
  background: rgba(245,158,11,.1);
  color: #f59e0b;
}
.cur-set-default-btn:hover {
  background: rgba(245,158,11,.2);
}

@media (max-width: 768px) {
  .cur-rate-input { width: 90px; }
  .cur-default-note { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   SUBTLE NEON OVERRIDE — Reduce overly vivid effects
════════════════════════════════════════════════════════════════ */

/* Auth form side: tone down glow */
.auth-form-side::before {
  background:
    radial-gradient(ellipse 60% 40% at 50% -10%, rgba(29,110,245,.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 110%, rgba(99,102,245,.07) 0%, transparent 70%) !important;
}

/* Hero orbs: subtler */
.auth-hero-orb-1 {
  background: radial-gradient(circle, rgba(29,110,245,.15) 0%, transparent 70%) !important;
}
.auth-hero-orb-2 {
  background: radial-gradient(circle, rgba(99,102,241,.12) 0%, transparent 70%) !important;
}

/* Reduce sidebar/nav glows if any */
.sidebar-item.active::before,
.nav-item.active::before {
  opacity: .55 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MASTER LAYOUT FIX — Canonical Sidebar + Header + Content alignment
   This block is LAST in the file and therefore wins all cascade conflicts.
   Do NOT add layout rules above this point.
   ────────────────────────────────────────────────────────────────────────
   Design decisions:
   • Sidebar is FLUSH (no floating-card gap, no border-radius on the inset
     side) so it visually connects with the sticky header above it.
   • One canonical width variable: --sidebar-width (270px) / --sidebar-collapsed-width (60px)
   • margin-inline-start is used on .main-content AND .main-content-rtl so
     RTL and LTR use the same logical property — no dual-class mismatch.
   • Mobile: sidebar slides in via transform, overlay via opacity.
═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. SIDEBAR — flush, full-height below header ───────────────────────── */
.sidebar {
  position:           fixed !important;
  top:                var(--hd-h, 60px) !important;
  bottom:             0 !important;
  height:             calc(100vh - var(--hd-h, 60px)) !important;
  width:              var(--sidebar-width, 270px) !important;
  /* Logical property — auto-flips in RTL (left: 0 in LTR, right: 0 in RTL) */
  inset-inline-start: 0 !important;
  inset-inline-end:   auto !important;
  /* Clear physical left/right that older rules may have set */
  left:               unset !important;
  right:              unset !important;
  border-radius:      0 !important;
  z-index:            1031 !important;
  border:             none !important;
  border-inline-end:  1px solid var(--sb-border, rgba(255,255,255,.08)) !important;
  box-shadow:         2px 0 12px rgba(0,0,0,.12) !important;
  transition:         width .25s ease, transform .25s ease !important;
}

/* RTL box-shadow flips to the left edge */
html[dir="rtl"] .sidebar {
  box-shadow: -2px 0 12px rgba(0,0,0,.12) !important;
}

/* Animate only after page is ready (avoids flash on load) */
body.ready .sidebar {
  transition: width .25s ease, transform .25s ease !important;
}

/* ── 2. MAIN CONTENT — exact sidebar-width offset, logical property ─────── */
.main-content,
.main-content-rtl {
  margin-inline-start: var(--sidebar-width, 270px) !important;
  margin-inline-end:   0 !important;
  width:               calc(100% - var(--sidebar-width, 270px)) !important;
  min-width:           0 !important;
  transition:          margin-inline-start .25s ease, width .25s ease !important;
}

/* ── 3. COLLAPSED SIDEBAR ───────────────────────────────────────────────── */
body.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed-width, 60px) !important;
}

body.sidebar-collapsed .main-content,
body.sidebar-collapsed .main-content-rtl {
  margin-inline-start: var(--sidebar-collapsed-width, 60px) !important;
  width:               calc(100% - var(--sidebar-collapsed-width, 60px)) !important;
}

/* Hide text labels in collapsed mode */
body.sidebar-collapsed .sb-brand-text,
body.sidebar-collapsed .nav-text,
body.sidebar-collapsed .nav-title,
body.sidebar-collapsed .sb-profile-info,
body.sidebar-collapsed .collapse-menu,
body.sidebar-collapsed .sd-link.dropdown-toggle::after {
  display: none !important;
}
body.sidebar-collapsed .sb-brand  { justify-content: center !important; padding: 14px 0 !important; }
body.sidebar-collapsed .sd-link   { justify-content: center !important; padding: 12px !important; }
body.sidebar-collapsed .sd-link i { font-size: 1.1rem !important; width: auto !important; }
body.sidebar-collapsed .sb-scroll { padding: 8px 4px !important; }
body.sidebar-collapsed .sb-profile { padding: 8px 4px !important; }

/* ── 4. MOBILE SIDEBAR — off-canvas drawer ──────────────────────────────── */
@media (max-width: 991px) {

  /* Drawer starts from very top, full-screen height */
  .sidebar {
    top:                0 !important;
    height:             100vh !important;    /* fallback */
    height:             100dvh !important;   /* iOS safe */
    width:              var(--sidebar-width, 270px) !important;
    z-index:            1050 !important;
    /* LTR: hidden off inline-start edge */
    transform:          translateX(-100%) !important;
    inset-inline-start: 0 !important;
    inset-inline-end:   auto !important;
    left:               unset !important;
    right:              unset !important;
    border:             none !important;
    border-inline-end:  1px solid var(--sb-border, rgba(255,255,255,.08)) !important;
    border-radius:      0 !important;
    box-shadow:         none !important;
  }

  /* RTL: slide off the right (inline-start) edge */
  html[dir="rtl"] .sidebar {
    transform: translateX(100%) !important;
  }

  /* Open state */
  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
    box-shadow: 6px 0 32px rgba(0,0,0,.35) !important;
  }

  html[dir="rtl"] body.sidebar-open .sidebar {
    box-shadow: -6px 0 32px rgba(0,0,0,.35) !important;
  }

  /* Content fills full width on mobile */
  .main-content,
  .main-content-rtl {
    margin-inline-start: 0 !important;
    margin-inline-end:   0 !important;
    width:               100% !important;
  }

  /* ── Overlay backdrop ── */
  .sidebar-overlay {
    display:             none;
    position:            fixed;
    inset:               0;
    background:          rgba(0, 0, 0, .52);
    z-index:             1049;
    backdrop-filter:     blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  body.sidebar-open .sidebar-overlay {
    display: block;
  }
}

/* ── 5. SIDEBAR NAV — RTL/LTR arrow + indent fixes ──────────────────────── */

/* Chevron arrow: single rule, direction-neutral */
.sidebar .sd-link.dropdown-toggle::after {
  content:            "\f078" !important;    /* fa-chevron-down */
  font-family:        "Font Awesome 6 Free" !important;
  font-weight:        900 !important;
  font-size:          .58rem !important;
  border:             none !important;
  margin-inline-start: auto !important;
  margin-right:        0 !important;
  margin-left:         0 !important;
  transition:          transform .2s ease !important;
  opacity:             .55 !important;
  flex-shrink:         0 !important;
  color:               var(--sb-text-muted, #94a3b8) !important;
}

/* Open: rotate down → up */
.sidebar .sd-link.dropdown-toggle:not(.collapsed)::after,
.sidebar .sd-link.dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(-180deg) !important;
  opacity:   1 !important;
  color:     var(--role-accent, var(--primary)) !important;
}

/* Submenu indentation — logical property (works in both LTR and RTL) */
.sidebar .collapse-menu {
  padding-inline-start: 36px !important;
  padding-right:  0 !important;         /* clear System-1 override */
  padding-left:   0 !important;
}

/* Submenu dot bullet — keep it aligned */
.sidebar .collapse-menu .sd-link::before {
  content:    "" !important;
  width:       4px !important;
  height:      4px !important;
  min-width:   4px !important;
  border-radius: 50% !important;
  background:  var(--sb-text-muted, #71717a) !important;
  display:     inline-block !important;
  margin-inline-end: 6px !important;
  flex-shrink: 0 !important;
  transition:  background .15s !important;
}
.sidebar .collapse-menu .sd-link.active::before,
.sidebar .collapse-menu .sd-link:hover::before {
  background: var(--role-accent, var(--primary)) !important;
}

/* Active accent bar — always on the OUTER edge */
.sidebar .sd-link.active::after {
  content:  '' !important;
  position: absolute !important;
  inset-inline-end: 0 !important;   /* right in LTR, left in RTL */
  top:      20% !important;
  bottom:   20% !important;
  width:    3px !important;
  background:   var(--role-accent, var(--primary)) !important;
  border-radius: 3px 0 0 3px !important;
}
html[dir="ltr"] .sidebar .sd-link.active::after {
  border-radius: 0 3px 3px 0 !important;
}

/* ── 6. SIDEBAR ENTRANCE ANIMATIONS — direction-aware ───────────────────── */
@keyframes sbSlideInRTL {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sbSlideInLTR {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}

html[dir="rtl"] .sidebar .sd-item {
  animation: sbSlideInRTL .22s cubic-bezier(.25,.46,.45,.94) both !important;
  animation-delay: calc(var(--i, 0) * 22ms) !important;
}
html[dir="ltr"] .sidebar .sd-item {
  animation: sbSlideInLTR .22s cubic-bezier(.25,.46,.45,.94) both !important;
  animation-delay: calc(var(--i, 0) * 22ms) !important;
}

/* ── 7. HEADER — fixed positioning
        (position:sticky is broken by overflow-x:hidden on html/body)     */
.hd-topbar {
  position: fixed !important;
  top:      0 !important;
  left:     0 !important;
  right:    0 !important;
  width:    100% !important;
  z-index:  1030 !important;
  height:   var(--hd-h, 60px) !important;
}

/* Push wrapper down so content is not hidden beneath the fixed header */
.wrapper {
  padding-top: var(--hd-h, 60px) !important;
}

/* ── Avatar: force circular display regardless of global img reset ── */
.hd-avatar {
  display:       inline-block !important;
  width:         32px         !important;
  height:        32px         !important;
  border-radius: 50%          !important;
  object-fit:    cover        !important;
  flex-shrink:   0            !important;
  border:        2px solid var(--role-accent, var(--primary)) !important;
}
.hd-avatar--lg {
  width:  40px !important;
  height: 40px !important;
}

/* Header search: never wider than half viewport on large screens */
@media (min-width: 992px) {
  .hd-center { max-width: 380px; }
}
@media (min-width: 1400px) {
  .hd-center { max-width: 480px; }
}

/* ── 8. RESPONSIVE — full-width layout helpers ──────────────────────────── */
@media (max-width: 1200px) {
  :root {
    --sidebar-width: 250px;
  }
}

/* ── 9. PAGE CONTENT — sensible padding inside main area ────────────────── */
.page-content {
  padding: 20px 24px !important;
  min-height: calc(100vh - var(--hd-h, 60px)) !important;
}

@media (max-width: 768px) {
  .page-content { padding: 16px !important; }
}
@media (max-width: 480px) {
  .page-content { padding: 12px !important; }
}

/* ── 10. SIDEBAR PROFILE AREA — flush bottom ────────────────────────────── */
.sb-profile {
  padding: 10px 8px !important;
  border-top: 1px solid var(--sb-border, rgba(255,255,255,.08)) !important;
  flex-shrink: 0 !important;
  background: var(--sb-bg) !important;
}

/* ── SCROLL FIX — make .main-content the explicit vertical scroll container
   overflow-x:hidden alone causes implicit overflow-y:auto which breaks scroll
   detection; explicit declaration here fixes the issue cleanly. ─────────── */
.main-content,
.main-content-rtl {
  overflow-y: auto         !important;
  overflow-x: hidden       !important;
  height:     calc(100vh - var(--hd-h, 60px)) !important;
  min-height: unset        !important;
  -webkit-overflow-scrolling: touch;
}
html, body {
  overflow-y: hidden       !important;
  overflow-x: hidden       !important;
  height:     100%         !important;
}
.main-content::-webkit-scrollbar,
.main-content-rtl::-webkit-scrollbar { width: 5px; }
.main-content::-webkit-scrollbar-track,
.main-content-rtl::-webkit-scrollbar-track { background: transparent; }
.main-content::-webkit-scrollbar-thumb,
.main-content-rtl::-webkit-scrollbar-thumb { background: rgba(148,163,184,.25); border-radius: 10px; }
.main-content::-webkit-scrollbar-thumb:hover,
.main-content-rtl::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.5); }

/* ── END MASTER LAYOUT FIX ──────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════════════
   DASHBOARD v3  (da3-*)
   Professional SaaS analytics — dark-first, light via body:not(.dark-mode)
   Used by: vendor/body.blade.php  AND  admin/platform-analytics.blade.php
════════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ────────────────────────────────────────────────────────── */
.da3 {
  --da3-card:     #1c1c1f;
  --da3-bd:       rgba(255,255,255,.055);
  --da3-bdr:      rgba(255,255,255,.055);    /* alias — keeps old templates working */
  --da3-bg2:      #111113;                   /* subtle secondary surface (table head, etc.) */
  --da3-shadow:   0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
  --da3-fg1:      #f4f4f5;
  --da3-fg2:      #a1a1aa;
  --da3-fg3:      #52525b;
  --da3-line:     rgba(255,255,255,.06);
  --da3-hover:    rgba(255,255,255,.03);
  --da3-r:        12px;
  --da3-gap:      14px;
  --da3-accent:   var(--role-accent, #2563eb);
  --da3-abg:      var(--role-accent-soft, rgba(37,99,235,.1));
}
body:not(.dark-mode) .da3 {
  --da3-card:   #ffffff;
  --da3-bd:     #e4e4e7;
  --da3-bdr:    #e4e4e7;
  --da3-bg2:    #f9f9fb;
  --da3-shadow: 0 1px 3px rgba(0,0,0,.07), 0 0 0 1px #e4e4e7;
  --da3-fg1:    #09090b;
  --da3-fg2:    #71717a;
  --da3-fg3:    #a1a1aa;
  --da3-line:   #f4f4f5;
  --da3-hover:  rgba(0,0,0,.02);
}

/* ── Spacing helper ── */
.mb-da3 { margin-bottom: var(--da3-gap) !important; }

/* ── Base card ───────────────────────────────────────────────────────────── */
.da3-card {
  background:    var(--da3-card);
  border:        1px solid var(--da3-bd);
  border-radius: var(--da3-r);
  box-shadow:    var(--da3-shadow);
  padding:       20px;
  overflow:      hidden;
}
.da3-card-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
  margin-bottom:   16px;
}
.da3-card-title {
  font-size:   14px;
  font-weight: 600;
  color:       var(--da3-fg1);
  display:     flex;
  align-items: center;
  gap:         7px;
  margin:      0;
}
.da3-tag      { font-size:11px; font-weight:500; color:var(--da3-fg3); white-space:nowrap; }
.da3-link-btn { font-size:12px; font-weight:600; color:var(--da3-accent); text-decoration:none; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; transition:opacity .15s; }
.da3-link-btn:hover { opacity:.7; }
.da3-select   { font-size:12px; padding:4px 8px; border-radius:7px; border:1px solid var(--da3-bd); background:transparent; color:var(--da3-fg2); cursor:pointer; outline:none; }
.da3-select:focus { border-color:var(--da3-accent); }

/* ── Grid ────────────────────────────────────────────────────────────────── */
.da3-grid     { display:grid; gap:var(--da3-gap); margin-bottom:var(--da3-gap); }
.da3-grid-5-3 { grid-template-columns: 5fr 3fr; }
.da3-grid-1-1 { grid-template-columns: 1fr 1fr; }
.da3-grid-3-5 { grid-template-columns: 3fr 5fr; }
@media (max-width:991px) {
  .da3-grid-5-3,.da3-grid-1-1,.da3-grid-3-5 { grid-template-columns:1fr; }
}

/* ── Top bar (greeting + quick stats strip) ──────────────────────────────── */
.da3-top-bar {
  background:    var(--da3-card);
  border:        1px solid var(--da3-bd);
  border-radius: var(--da3-r);
  box-shadow:    var(--da3-shadow);
  margin-bottom: var(--da3-gap);
  overflow:      hidden;
}
.da3-greeting {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  padding:         18px 22px 14px;
  flex-wrap:       wrap;
}
.da3-welcome        { font-size:15px; font-weight:500; color:var(--da3-fg2); margin:0 0 5px; }
.da3-welcome strong { font-size:20px; font-weight:700; color:var(--da3-fg1); display:block; }
.da3-sub-row        { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--da3-fg3); flex-wrap:wrap; }
.da3-live-pill      { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:#10b981; background:rgba(16,185,129,.1); border-radius:20px; padding:2px 9px 2px 7px; }
.da3-live-dot       { width:6px; height:6px; border-radius:50%; background:#10b981; animation:da3pulse 2s ease-in-out infinite; }
@keyframes da3pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(1.35)} }
.da3-divider        { color:var(--da3-fg3); opacity:.35; }
.da3-date           { color:var(--da3-fg2); }
.da3-store-url      { color:var(--da3-fg2); text-decoration:none; display:inline-flex; align-items:center; gap:5px; font-size:12.5px; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .15s; }
.da3-store-url:hover{ color:var(--da3-accent); }
.da3-actions        { display:flex; gap:8px; flex-wrap:wrap; }
.da3-btn            { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600; text-decoration:none; transition:all .15s; white-space:nowrap; border:1px solid transparent; cursor:pointer; }
.da3-btn-primary    { background:var(--da3-accent); color:#fff; border-color:var(--da3-accent); box-shadow:0 2px 8px rgba(37,99,235,.28); }
.da3-btn-primary:hover { filter:brightness(1.1); color:#fff; }
.da3-btn-ghost      { background:transparent; color:var(--da3-fg1); border-color:var(--da3-bd); }
.da3-btn-ghost:hover{ background:var(--da3-abg); color:var(--da3-accent); border-color:var(--da3-accent); }

/* ── Page header ─────────────────────────────────────────────────────────── */
.da3-page-hd    { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.da3-page-title { font-size:22px; font-weight:700; color:var(--da3-fg1); margin:0; line-height:1.2; }
.da3-page-sub   { font-size:12.5px; color:var(--da3-fg3); margin:3px 0 0; }
/* alias: da3-card-hd → same as da3-card-head */
.da3-card-hd { display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* ── Mini stats strip (3-column grid) ────────────────────────────────────── */
.da3-strip-3    { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--da3-gap,16px); }
.da3-strip-item { background:var(--da3-card); border:1px solid var(--da3-bd); border-radius:var(--da3-r); padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
.da3-strip-val  { font-size:20px; font-weight:700; color:var(--da3-fg1); font-variant-numeric:tabular-nums; }
.da3-strip-lbl  { font-size:11px; color:var(--da3-fg3); font-weight:500; text-transform:uppercase; letter-spacing:.4px; }
@media (max-width:480px) { .da3-strip-3 { grid-template-columns:1fr; } }

/* Quick stats strip */
.da3-strip          { display:flex; align-items:stretch; border-top:1px solid var(--da3-line); overflow-x:auto; -webkit-overflow-scrolling:touch; }
.da3-qs             { display:flex; align-items:center; gap:10px; padding:12px 22px; flex:1; min-width:120px; }
.da3-qs-sep         { width:1px; background:var(--da3-line); flex-shrink:0; align-self:stretch; margin:8px 0; }
.da3-qs-ico         { font-size:18px; flex-shrink:0; opacity:.85; }
.da3-qs-val         { font-size:16px; font-weight:700; color:var(--da3-fg1); font-variant-numeric:tabular-nums; line-height:1.2; }
.da3-qs-lbl         { font-size:11px; color:var(--da3-fg3); font-weight:500; margin-top:1px; }

/* ── KPI cards ───────────────────────────────────────────────────────────── */
.da3-kpis {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: var(--da3-gap);
  margin-bottom: var(--da3-gap);
}
@media (max-width:1280px) { .da3-kpis { grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px)  { .da3-kpis { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px)  { .da3-kpis { grid-template-columns:1fr; } }

.da3-kpi {
  background:    var(--da3-card);
  border:        1px solid var(--da3-bd);
  border-radius: var(--da3-r);
  box-shadow:    var(--da3-shadow);
  padding:       18px 20px 12px;
  position:      relative;
  overflow:      hidden;
  transition:    transform .18s ease, box-shadow .18s ease;
}
.da3-kpi:hover { transform:translateY(-2px); box-shadow:var(--da3-shadow), 0 8px 24px rgba(0,0,0,.14); }
/* Top accent stripe */
.da3-kpi::before  { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ic,var(--da3-accent)); border-radius:var(--da3-r) var(--da3-r) 0 0; opacity:.8; }
.da3-kpi-head     { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.da3-kpi-label    { font-size:11px; font-weight:600; color:var(--da3-fg2); text-transform:uppercase; letter-spacing:.06em; }
.da3-kpi-ico      { width:32px; height:32px; border-radius:8px; background:var(--ic-bg,var(--da3-abg)); color:var(--ic,var(--da3-accent)); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.da3-kpi-num      { font-size:26px; font-weight:800; color:var(--da3-fg1); font-variant-numeric:tabular-nums; line-height:1; margin-bottom:8px; }
.da3-kpi-spark    { height:36px; margin:0 -4px -2px; }

/* ── M.1 Vendor "Getting Started" checklist ─────────────────────────────
   Premium activation surface for newly-onboarded vendors. Auto-hides
   at 100% completion. Renders above all other dashboard sections.
   ──────────────────────────────────────────────────────────────────── */
.da3-getting-started {
  background:    var(--da3-card);
  border:        1px solid var(--da3-bd);
  border-radius: var(--da3-r);
  box-shadow:    var(--da3-shadow);
  padding:       20px 22px;
  margin-bottom: var(--da3-gap);
  position:      relative;
  overflow:      hidden;
}
.da3-getting-started::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899, #f59e0b);
  opacity: .85;
}
.da3-gs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.da3-gs-title-wrap {
  display: flex; align-items: center; gap: 14px;
}
.da3-gs-spark {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(139,92,246,.18));
  color: #a78bfa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.da3-gs-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--da3-fg1);
  letter-spacing: -.015em;
  line-height: 1.2;
}
.da3-gs-sub {
  font-size: .82rem;
  color: var(--da3-fg2);
  margin-top: 3px;
  font-weight: 500;
}
.da3-gs-progress-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.da3-gs-progress-num {
  font-variant-numeric: tabular-nums;
  font-size: .85rem;
  color: var(--da3-fg2);
}
.da3-gs-progress-num strong {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--da3-fg1);
  margin-inline-end: 2px;
}
.da3-gs-bar {
  width: 120px;
  height: 6px;
  background: var(--da3-line);
  border-radius: 999px;
  overflow: hidden;
}
.da3-gs-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #ec4899);
  border-radius: inherit;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

/* Step grid */
.da3-gs-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 900px) { .da3-gs-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .da3-gs-steps { grid-template-columns: 1fr; } }

.da3-gs-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--da3-line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--da3-fg1);
  background: var(--da3-card);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.da3-gs-step:hover {
  transform: translateY(-1px);
  border-color: #8b5cf6;
  background: color-mix(in srgb, #8b5cf6 6%, var(--da3-card));
  color: var(--da3-fg1);
}
.da3-gs-step.is-done {
  border-color: rgba(34,197,94,.35);
  background: color-mix(in srgb, #22c55e 6%, var(--da3-card));
}
.da3-gs-step.is-done .da3-gs-step-label {
  color: var(--da3-fg2);
  text-decoration: line-through;
  text-decoration-color: rgba(34,197,94,.55);
  text-decoration-thickness: 1.5px;
}
.da3-gs-step-ico {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(139,92,246,.12);
  color: #a78bfa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
}
.da3-gs-step.is-done .da3-gs-step-ico {
  background: rgba(34,197,94,.18);
  color: #22c55e;
}
.da3-gs-step-label {
  flex: 1;
  font-size: .85rem;
  font-weight: 600;
  color: var(--da3-fg1);
  min-width: 0;
}
.da3-gs-step-arrow {
  color: var(--da3-fg3);
  font-size: .7rem;
  flex-shrink: 0;
  opacity: .55;
  transition: transform .15s, opacity .15s;
}
/* RTL: flip the arrow direction so it points toward the action */
[dir="rtl"] .da3-gs-step-arrow i { transform: scaleX(-1); }
.da3-gs-step:hover .da3-gs-step-arrow {
  opacity: 1;
  transform: translateX(2px);
}
[dir="rtl"] .da3-gs-step:hover .da3-gs-step-arrow { transform: translateX(-2px); }

body:not(.dark-mode) .da3-gs-spark {
  background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(139,92,246,.10));
  color: #7c3aed;
}
body:not(.dark-mode) .da3-gs-step-ico {
  background: rgba(139,92,246,.08);
  color: #7c3aed;
}
body:not(.dark-mode) .da3-gs-step.is-done .da3-gs-step-ico {
  background: rgba(34,197,94,.12);
  color: #15803d;
}

/* ── J.1 Today's Briefing ──────────────────────────────────────────────── */
.da3-briefing {
  background:    var(--da3-card);
  border:        1px solid var(--da3-bd);
  border-radius: var(--da3-r);
  box-shadow:    var(--da3-shadow);
  padding:       16px 20px;
  margin-bottom: var(--da3-gap);
  position:      relative;
  overflow:      hidden;
}
.da3-briefing::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,#f59e0b,#10b981,#3b82f6,#8b5cf6);
  opacity: .9;
}
.da3-briefing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.da3-briefing-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--da3-fg1);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.da3-briefing-title i { color: #f59e0b; }
.da3-briefing-date {
  font-size: 12px;
  color: var(--da3-fg3);
  font-weight: 500;
}
.da3-briefing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .da3-briefing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .da3-briefing-grid { grid-template-columns: 1fr; } }

.da3-brief-cell {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--da3-line);
  border-radius: calc(var(--da3-r) - 4px);
  background: var(--da3-card);
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
a.da3-brief-cell:hover {
  transform: translateY(-1px);
  border-color: var(--c, var(--da3-accent));
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.da3-brief-ico {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--c, var(--da3-accent)) 12%, transparent);
  color: var(--c, var(--da3-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.da3-brief-body { min-width: 0; flex: 1; }
.da3-brief-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--da3-fg1);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.da3-brief-lbl {
  font-size: 11.5px;
  color: var(--da3-fg2);
  font-weight: 600;
  margin: 2px 0 6px;
}
.da3-brief-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
}
.da3-brief-trend.da3-tone-up    { color:#10b981; background:rgba(16,185,129,.10); }
.da3-brief-trend.da3-tone-down  { color:#ef4444; background:rgba(239,68,68,.10); }
.da3-brief-trend.da3-tone-flat  { color:var(--da3-fg3); background:var(--da3-line); }

/* ── Recent activity list (Phase 0 audit feed on dashboard) ───────────── */
.da3-activity {
  list-style: none;
  margin: 0;
  padding: 0;
}
.da3-activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--da3-line);
}
.da3-activity-item:last-child { border-bottom: 0; }
.da3-activity-ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  flex-shrink: 0;
}
.da3-activity-body { min-width: 0; flex: 1; }
.da3-activity-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--da3-fg1);
  font-family: 'SF Mono', 'JetBrains Mono', Consolas, monospace;
}
.da3-activity-meta {
  font-size: .72rem;
  color: var(--da3-fg2);
  margin-top: 2px;
}
.da3-activity-sep { margin: 0 6px; color: var(--da3-fg3); }

/* ── Donut ───────────────────────────────────────────────────────────────── */
.da3-donut        { position:relative; display:flex; align-items:center; justify-content:center; }
.da3-donut-lbl    { position:absolute; text-align:center; pointer-events:none; }
.da3-donut-big    { font-size:22px; font-weight:800; color:var(--da3-fg1); line-height:1; }
.da3-donut-sub    { font-size:10.5px; color:var(--da3-fg3); margin-top:2px; }

/* Status rows */
.da3-srows  { display:flex; flex-direction:column; gap:8px; }
.da3-srow   { display:flex; align-items:center; gap:7px; font-size:12.5px; }
.da3-dot    { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.da3-snm    { flex:1; font-weight:500; color:var(--da3-fg2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.da3-track  { flex:2; height:4px; background:var(--da3-line); border-radius:2px; overflow:hidden; min-width:40px; }
.da3-fill   { height:100%; border-radius:2px; transition:width .4s ease; }
.da3-scnt   { font-weight:700; color:var(--da3-fg1); min-width:24px; text-align:end; font-variant-numeric:tabular-nums; font-size:12px; }

/* ── Chart wrap ── */
.da3-chart  { position:relative; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.da3-tscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.da3-t      { width:100%; border-collapse:collapse; font-size:13px; }
.da3-t th   { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--da3-fg3); padding:7px 10px; border-bottom:1px solid var(--da3-line); white-space:nowrap; text-align:start; }
.da3-t td   { padding:10px 10px; border-bottom:1px solid var(--da3-line); color:var(--da3-fg1); vertical-align:middle; }
.da3-t tr:last-child td { border-bottom:none; }
.da3-t tr:hover td { background:var(--da3-hover); }
.da3-oid    { font-size:12px; font-weight:700; color:var(--da3-accent); background:var(--da3-abg); padding:2px 7px; border-radius:5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.da3-fc     { display:flex; align-items:center; gap:8px; }
.da3-av     { width:28px; height:28px; border-radius:50%; background:var(--da3-abg); color:var(--da3-accent); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; text-transform:uppercase; }
.da3-w6     { font-weight:600; }
.da3-w7     { font-weight:700; }
.da3-mu     { color:var(--da3-fg3); font-size:12px; }
.da3-chip   { display:inline-flex; align-items:center; padding:2px 8px; border-radius:20px; font-size:11.5px; font-weight:600; white-space:nowrap; background:var(--cc-bg, rgba(148,163,184,.12)); color:var(--cc,#94a3b8); }
.da3-empty  { text-align:center; padding:28px 16px !important; color:var(--da3-fg3) !important; font-size:13px; }

/* ── Products list ───────────────────────────────────────────────────────── */
.da3-plist  { display:flex; flex-direction:column; gap:10px; }
.da3-prow   { display:flex; align-items:center; gap:10px; }
.da3-rnk    { width:22px; height:22px; border-radius:6px; background:var(--da3-line); color:var(--da3-fg2); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.da3-pimg   { width:36px; height:36px; border-radius:7px; object-fit:cover; flex-shrink:0; border:1px solid var(--da3-bd); }
.da3-pinfo  { flex:1; min-width:0; }
.da3-pname  { font-size:12.5px; font-weight:600; color:var(--da3-fg1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:4px; }
.da3-pbar-w { height:3px; background:var(--da3-line); border-radius:2px; overflow:hidden; }
.da3-pbar   { height:100%; background:var(--da3-accent); border-radius:2px; transition:width .4s; }
.da3-psold  { font-size:12px; font-weight:700; color:var(--da3-fg1); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.da3-ctag   { display:inline-flex; align-items:center; justify-content:center; padding:2px 10px; border-radius:20px; font-size:12px; font-weight:700; background:var(--da3-abg); color:var(--da3-accent); }
.da3-sep    { height:1px; background:var(--da3-line); margin:12px 0; }

/* ── Overview list (admin metrics panel) ────────────────────────────────── */
.da3-olist  { display:flex; flex-direction:column; gap:0; }
.da3-orow   { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--da3-line); }
.da3-orow:last-child { border-bottom:none; }
.da3-olbl   { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--da3-fg2); font-weight:500; }
.da3-olbl i { width:18px; text-align:center; flex-shrink:0; font-size:14px; }
.da3-oval   { font-size:14px; font-weight:700; color:var(--da3-fg1); font-variant-numeric:tabular-nums; text-align:end; }
.da3-trend-up   { color:#10b981; font-size:12px; font-weight:600; }
.da3-trend-down { color:#ef4444; font-size:12px; font-weight:600; }

/* ── Vendor ranking (admin top vendors) ─────────────────────────────────── */
.da3-vrows  { display:flex; flex-direction:column; gap:0; }
.da3-vrow   { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--da3-line); }
.da3-vrow:last-child { border-bottom:none; }
.da3-vrnk   { width:24px; height:24px; border-radius:7px; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.da3-vrnk-1 { background:rgba(250,204,21,.15); color:#fbbf24; }
.da3-vrnk-2 { background:rgba(148,163,184,.12); color:#94a3b8; }
.da3-vrnk-3 { background:rgba(180,120,80,.12);  color:#cd7f32; }
.da3-vrnk-n { background:var(--da3-line); color:var(--da3-fg3); }
.da3-vname  { flex:1; font-size:13px; font-weight:600; color:var(--da3-fg1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.da3-vamt   { font-size:13px; font-weight:700; color:var(--da3-accent); font-variant-numeric:tabular-nums; white-space:nowrap; }
.da3-vords  { font-size:11px; color:var(--da3-fg3); white-space:nowrap; }

/* ── Section heading ── */
.da3-section-hd { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--da3-fg3); margin:0 0 12px; }

/* ── KPI card extras ── */
.da3-kpi-sub  { font-size:11.5px; color:var(--da3-fg3); margin-top:2px; font-weight:500; }
.da3-kpi-trend { font-size:11px; font-weight:600; margin-top:4px; display:flex; align-items:center; gap:3px; }

/* ── Trend classes ── */
.da3-trend-up   { color:#10b981; }
.da3-trend-down { color:#ef4444; }

/* ── Card footer (chart bottom strip) ── */
.da3-card-foot  { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px solid var(--da3-line); flex-wrap:wrap; gap:8px; }
.da3-foot-lbl   { font-size:11px; color:var(--da3-fg3); margin-bottom:2px; }
.da3-foot-val   { font-size:16px; font-weight:800; color:var(--da3-fg1); font-variant-numeric:tabular-nums; }

/* ─────────────────────────────────────────────────────────────────────────
   ps3  —  Compact plan subscription banner  (da3 token-aware)
───────────────────────────────────────────────────────────────────────── */
.ps3-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 18px;
  background: var(--da3-card);
  border: 1px solid var(--da3-bd);
  border-radius: var(--da3-r);
  box-shadow: var(--da3-shadow);
  margin-bottom: var(--da3-gap);
  flex-wrap: wrap;
}
.ps3-banner.ps3-expiring { border-color: rgba(245,158,11,.35); }
.ps3-banner.ps3-expired  { border-color: rgba(239,68,68,.35);  }

/* tier icon + name */
.ps3-id   { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.ps3-ico  { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.ps3-info { display:flex; flex-direction:column; gap:1px; }
.ps3-name { font-size:14px; font-weight:700; line-height:1.2; }
.ps3-period { font-size:11px; color:var(--da3-fg3); font-weight:500; }

/* vertical separator */
.ps3-vsep { width:1px; height:34px; background:var(--da3-line); flex-shrink:0; }

/* dates */
.ps3-dates { display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
.ps3-drow  { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--da3-fg2); }
.ps3-drow i { font-size:11px; width:13px; text-align:center; flex-shrink:0; }
.ps3-drow.ps3-warn   { color:#f59e0b; }
.ps3-drow.ps3-danger { color:#ef4444; }
.ps3-drow.ps3-ok     { color:var(--da3-fg2); }

/* progress */
.ps3-prog      { flex:1; min-width:100px; }
.ps3-prog-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.ps3-prog-lbl  { font-size:11.5px; color:var(--da3-fg2); }
.ps3-prog-pct  { font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.ps3-bar-w     { height:5px; background:var(--da3-line); border-radius:3px; overflow:hidden; }
.ps3-bar-f     { height:100%; border-radius:3px; transition:width .5s ease; }

/* quick stats */
.ps3-stats  { display:flex; align-items:center; gap:20px; flex-shrink:0; }
.ps3-stat   { display:flex; flex-direction:column; align-items:center; gap:1px; }
.ps3-stat-v { font-size:15px; font-weight:700; color:var(--da3-fg1); font-variant-numeric:tabular-nums; line-height:1.2; }
.ps3-stat-l { font-size:10.5px; color:var(--da3-fg3); font-weight:500; text-transform:uppercase; letter-spacing:.04em; }

/* renew button */
.ps3-renew {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: #fff;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: filter .15s, transform .1s;
}
.ps3-renew:hover { filter:brightness(1.1); color:#fff; transform:translateY(-1px); }
.ps3-renew i { font-size: 11px; }

/* responsive — stack below 640px */
@media (max-width: 640px) {
  .ps3-banner  { gap:12px; padding:12px 14px; }
  .ps3-vsep    { display:none; }
  .ps3-stats   { gap:14px; }
  .ps3-prog    { width:100%; flex-basis:100%; }
  .ps3-renew   { width:100%; justify-content:center; }
}

/* ── END da3 ── */

/* ══════════════════════════════════════════════════════════════════════════════
   EXPLICIT DIRECTION OVERRIDES  — belt-and-suspenders for LTR & RTL
   These rules use physical properties scoped to dir selectors, mirroring
   the proven approach from the pre-refactor CSS. They must appear LAST so
   they win over any conflicting margin-inline-start rules above.
══════════════════════════════════════════════════════════════════════════════ */

/* ── LTR (English, French, …): sidebar on LEFT, content pushed from LEFT ── */
html[dir="ltr"] .sidebar {
  left:  0       !important;
  right: unset   !important;
}

html[dir="ltr"] .main-content,
html[dir="ltr"] .main-content-rtl,
html[dir="ltr"] .content-body {
  margin-left:  var(--sidebar-width, 270px) !important;
  margin-right: 0                           !important;
  width: calc(100% - var(--sidebar-width, 270px)) !important;
}

html[dir="ltr"] body.sidebar-collapsed .main-content,
html[dir="ltr"] body.sidebar-collapsed .main-content-rtl,
html[dir="ltr"] body.sidebar-collapsed .content-body {
  margin-left:  var(--sidebar-collapsed-width, 60px) !important;
  margin-right: 0                                    !important;
  width: calc(100% - var(--sidebar-collapsed-width, 60px)) !important;
}

/* ── RTL (Arabic, Hebrew, …): sidebar on RIGHT, content pushed from RIGHT ── */
html[dir="rtl"] .sidebar {
  right: 0     !important;
  left:  unset !important;
}

html[dir="rtl"] .main-content,
html[dir="rtl"] .main-content-rtl,
html[dir="rtl"] .content-body {
  margin-right: var(--sidebar-width, 270px) !important;
  margin-left:  0                           !important;
  width: calc(100% - var(--sidebar-width, 270px)) !important;
}

html[dir="rtl"] body.sidebar-collapsed .main-content,
html[dir="rtl"] body.sidebar-collapsed .main-content-rtl,
html[dir="rtl"] body.sidebar-collapsed .content-body {
  margin-right: var(--sidebar-collapsed-width, 60px) !important;
  margin-left:  0                                    !important;
  width: calc(100% - var(--sidebar-collapsed-width, 60px)) !important;
}

/* ── Mobile: full-width on both directions ── */
@media (max-width: 991px) {
  html[dir="ltr"] .main-content,
  html[dir="ltr"] .main-content-rtl,
  html[dir="ltr"] .content-body,
  html[dir="rtl"] .main-content,
  html[dir="rtl"] .main-content-rtl,
  html[dir="rtl"] .content-body {
    margin-left:  0   !important;
    margin-right: 0   !important;
    width: 100%       !important;
  }
}

/* ── Sidebar active-link indicator: correct side per direction ── */
html[dir="ltr"] .sidebar .sd-link.active::after {
  inset-inline-end: unset !important;
  left: unset !important;
  right: 0 !important;          /* indicator on the right edge (toward content) */
}
html[dir="rtl"] .sidebar .sd-link.active::after {
  inset-inline-end: unset !important;
  right: unset !important;
  left: 0 !important;           /* indicator on the left edge (toward content) */
}

/* ── END DIRECTION OVERRIDES ── */

/* ══════════════════════════════════════════════════════════════════════════════
   PREMIUM SIDEBAR v2 — sb-* structural + sd-* navigation classes
   Powers sidebar.blade.php + role_slider/*.blade.php
══════════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar: force flex-column so header/scroll/footer stack correctly ── */
.sidebar {
  display:          flex !important;
  flex-direction:   column !important;
  overflow-y:       hidden !important; /* sb-scroll handles internal scrolling */
  /* All other rules (position, width, z-index, bg) already defined above */
}

/* ── Sidebar role-adaptive CSS variables ─────────────────────────────────── */
/* bg / border / text / hover come from :root + body:not(.dark-mode) above.
   Only role-accent aliases and radius live here. */
.sidebar {
  --sb-active:       var(--role-accent,      var(--primary, #5b3df5));
  --sb-active-light: var(--role-accent-soft, rgba(91,61,245,.12));
  --sb-radius:       10px;
}

/* ── Mobile overlay ──────────────────────────────────────────────────────── */
.sidebar-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.55);
  z-index:         calc(var(--z-sidebar, 1031) - 1);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body.sidebar-open .sidebar-overlay { display: block; }

/* ── sb-header: logo + brand info row ───────────────────────────────────── */
.sb-header {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         14px 12px 12px;
  border-bottom:   1px solid var(--sb-border);
  margin-bottom:   4px;
  flex-shrink:     0;
  min-height:      60px;
}

.sb-logo {
  width:           38px;
  height:          38px;
  border-radius:   10px;
  overflow:        hidden;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(255,255,255,.07);
  border:          1px solid var(--sb-border);
}
.sb-logo img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}
.sb-logo-ico {
  color:     var(--sb-active);
  font-size: 16px;
}

.sb-brand-info {
  flex:      1;
  min-width: 0;
  overflow:  hidden;
}
.sb-brand-name {
  display:        block;
  font-size:      13.5px;
  font-weight:    700;
  color:          var(--sb-text);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  line-height:    1.3;
  letter-spacing: -.01em;
}
.sb-brand-role {
  display:       block;
  font-size:     11px;
  font-weight:   500;
  color:         var(--sb-text-muted);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  margin-top:    2px;
  line-height:   1.4;
}

/* Collapsed: center logo, hide text */
body.sidebar-collapsed .sb-header {
  justify-content: center;
  padding:         14px 0 12px;
}
body.sidebar-collapsed .sb-brand-info { display: none; }

/* ── sb-scroll: scrollable nav area ─────────────────────────────────────── */
.sb-scroll {
  flex:           1;
  overflow-y:     auto;
  overflow-x:     hidden;
  padding:        4px 8px 8px;
  min-height:     0; /* critical for flex children to shrink */
  scrollbar-width:     thin;
  scrollbar-color:     rgba(255,255,255,.1) transparent;
}
.sb-scroll::-webkit-scrollbar            { width: 4px; }
.sb-scroll::-webkit-scrollbar-track      { background: transparent; }
.sb-scroll::-webkit-scrollbar-thumb      { background: rgba(255,255,255,.13); border-radius: 4px; }
.sb-scroll::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.22); }

/* Collapsed: remove padding so icons center perfectly */
body.sidebar-collapsed .sb-scroll { padding-left: 0; padding-right: 0; }

/* ── sb-foot: profile footer ─────────────────────────────────────────────── */
.sb-foot {
  border-top:  1px solid var(--sb-border);
  padding:     8px;
  flex-shrink: 0;
}
.sb-foot-link {
  display:         flex;
  align-items:     center;
  gap:             9px;
  padding:         8px 10px;
  border-radius:   var(--sb-radius);
  text-decoration: none;
  color:           var(--sb-text);
  transition:      background .15s;
  overflow:        hidden;
}
.sb-foot-link:hover             { background: var(--sb-hover); color: var(--sb-text); text-decoration: none; }

.sb-foot-avatar {
  width:         32px;
  height:        32px;
  border-radius: 50%;
  object-fit:    cover;
  flex-shrink:   0;
  border:        2px solid var(--sb-active);
  display:       block;
}
.sb-foot-avatar-placeholder {
  width:           32px;
  height:          32px;
  border-radius:   50%;
  background:      var(--sb-active-light);
  border:          1.5px solid var(--sb-active);
  color:           var(--sb-active);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-size:       13px;
  flex-shrink:     0;
}
.sb-foot-info {
  flex:      1;
  min-width: 0;
  overflow:  hidden;
}
.sb-foot-name {
  display:       block;
  font-size:     12.5px;
  font-weight:   700;
  color:         var(--sb-text);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  line-height:   1.3;
}
.sb-foot-role {
  display:       block;
  font-size:     10.5px;
  font-weight:   500;
  color:         var(--sb-text-muted);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  margin-top:    1px;
  line-height:   1.4;
}
.sb-foot-icon {
  color:       var(--sb-text-muted);
  font-size:   11px;
  opacity:     .65;
  flex-shrink: 0;
  transition:  opacity .15s, color .15s;
}
.sb-foot-link:hover .sb-foot-icon { color: var(--sb-active); opacity: 1; }

/* Collapsed: icon-only footer */
body.sidebar-collapsed .sb-foot        { padding: 8px 0; }
body.sidebar-collapsed .sb-foot-link   { justify-content: center; padding: 8px 0; }
body.sidebar-collapsed .sb-foot-info,
body.sidebar-collapsed .sb-foot-icon   { display: none; }

/* ── sd-nav: navigation list ─────────────────────────────────────────────── */
.sd-nav {
  list-style: none;
  padding:    0;
  margin:     0;
}

/* Section headings */
.sd-nav .nav-title {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--sb-text-muted);
  padding:        14px 10px 5px;
  margin:         0;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  opacity:        .75;
  display:        block;
}
body.sidebar-collapsed .sd-nav .nav-title { display: none; }

/* Color variants via data-c */
.sd-nav .nav-title[data-c="green"]  { color: #10b981; }
.sd-nav .nav-title[data-c="blue"]   { color: #3b82f6; }
.sd-nav .nav-title[data-c="teal"]   { color: #0891b2; }
.sd-nav .nav-title[data-c="amber"]  { color: #d97706; }
.sd-nav .nav-title[data-c="pink"]   { color: #db2777; }
.sd-nav .nav-title[data-c="indigo"] { color: #4f46e5; }
.sd-nav .nav-title[data-c="red"]    { color: #dc2626; }
.sd-nav .nav-title[data-c="purple"] { color: #7c3aed; }

.sd-item { margin: 1px 0; }

/* ── sd-link: navigation link ────────────────────────────────────────────── */
.sd-link {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         9px 12px;
  border-radius:   var(--sb-radius);
  text-decoration: none;
  font-size:       13.5px;
  font-weight:     500;
  color:           var(--sb-text);
  transition:      background .15s, color .15s;
  white-space:     nowrap;
  overflow:        hidden;
  min-width:       0;
  cursor:          pointer;
  border:          none;
  background:      none;
  width:           100%;
  text-align:      start;
}
.sd-link > i {
  width:       20px;
  min-width:   20px;
  font-size:   14px;
  text-align:  center;
  flex-shrink: 0;
  color:       var(--sb-text-muted);
  transition:  color .15s;
}
.sd-link .nav-text {
  flex:          1;
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.sd-link:hover             { background: var(--sb-hover); color: var(--sb-text); text-decoration: none; }
.sd-link:hover > i         { color: var(--sb-active); }
.sd-link.active            { background: var(--sb-active-light); color: var(--sb-active); font-weight: 600; }
.sd-link.active > i        { color: var(--sb-active); }

/* Collapsed: icon-only */
body.sidebar-collapsed .sd-link            { justify-content: center; padding: 9px 0; gap: 0; }
body.sidebar-collapsed .sd-link .nav-text  { display: none; }
body.sidebar-collapsed .sd-link > i        { width: auto; font-size: 16px; }
body.sidebar-collapsed .sd-badge           { display: none !important; }

/* ── sd-badge: notification dot/count inside nav link ────────────────────── */
.sd-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       18px;
  height:          18px;
  padding:         0 5px;
  border-radius:   9px;
  background:      var(--sb-active);
  color:           #fff;
  font-size:       10px;
  font-weight:     700;
  flex-shrink:     0;
  margin-inline-start: auto;
  line-height:     1;
}

/* ── Collapse menu (sub-menu items) ──────────────────────────────────────── */
.sidebar .collapse-menu {
  list-style:          none;
  padding:             0;
  margin:              0;
  padding-inline-start: 22px;
}
.sidebar .collapse-menu .sd-item { margin: 0; }
.sidebar .collapse-menu .sd-link {
  font-size:  12.5px;
  padding:    7px 10px;
}

/* ── Mobile: slide sidebar in/out ────────────────────────────────────────── */
@media (max-width: 991px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1) !important;
  }
  html[dir="rtl"] .sidebar {
    transform: translateX(100%);
  }
  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.45);
  }
  html[dir="rtl"] body.sidebar-open .sidebar {
    box-shadow: -4px 0 24px rgba(0,0,0,.45);
  }
}

/* ── END PREMIUM SIDEBAR v2 ── */

/* ═══════════════════════════════════════════════════════════════
   Custom
   Merged from: custom.css
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
 *  EL MATAJER — CUSTOM / PAGE-SPECIFIC OVERRIDES
 *  Use this file for:
 *  – Page-specific one-off overrides that don't belong in style.css
 *  – Quick fixes and temporary patches (tag with TODO if temporary)
 *  – Role-specific tweaks (admin, vendor, customer, driver, marketer)
 *
 *  Rules:
 *  – No component definitions (those go in style.css)
 *  – No media queries (those go in responsive.css)
 *  – No !important unless overriding a Bootstrap or third-party rule
 * ═══════════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────────
 * Utility helpers not covered by Bootstrap
 * ───────────────────────────────────────────────────────────────────────────── */

/* Text */
.text-primary-custom { color: var(--primary) !important; }
.text-success-custom { color: var(--success) !important; }
.text-danger-custom  { color: var(--danger)  !important; }
.text-warning-custom { color: var(--warning) !important; }
.text-muted-custom   { color: var(--text-muted) !important; }

/* Backgrounds */
.bg-primary-custom  { background-color: var(--primary) !important; color: #fff; }
.bg-success-custom  { background-color: var(--success) !important; color: #fff; }
.bg-danger-custom   { background-color: var(--danger)  !important; color: #fff; }
.bg-warning-custom  { background-color: var(--warning) !important; color: #fff; }
.bg-card            { background-color: var(--card-bg) !important; }

/* Borders */
.border-primary-custom { border-color: var(--primary) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }

/* Shadows */
.shadow-sm-custom { box-shadow: var(--shadow-sm) !important; }
.shadow-md-custom { box-shadow: var(--shadow-md) !important; }

/* Spacing extras */
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-6 { gap: var(--space-6) !important; }

/* Sizing */
.w-fit  { width: fit-content !important; }
.h-fit  { height: fit-content !important; }
.min-w-0 { min-width: 0 !important; }

/* Overflow */
.overflow-hidden-x { overflow-x: hidden !important; }
.overflow-hidden-y { overflow-y: hidden !important; }
.overflow-auto-y   { overflow-y: auto   !important; }


/* ─────────────────────────────────────────────────────────────────────────────
 * DataTables — additional styling not covered by theme bridge
 * ───────────────────────────────────────────────────────────────────────────── */

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: var(--text-muted);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  transition: var(--transition);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):hover {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * Select2 overrides (integrate with theme)
 * ───────────────────────────────────────────────────────────────────────────── */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  min-height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary);
  line-height: 36px;
}

.select2-dropdown {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary);
  color: #fff;
}

.select2-container--default .select2-results__option {
  color: var(--text-primary);
}

.select2-search--dropdown .select2-search__field {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}


/* ─────────────────────────────────────────────────────────────────────────────
 * SweetAlert2 overrides (integrate with theme)
 * ───────────────────────────────────────────────────────────────────────────── */

.swal2-popup {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-lg) !important;
}

.swal2-title {
  color: var(--text-primary) !important;
}

.swal2-html-container {
  color: var(--text-muted) !important;
}

.swal2-confirm {
  background-color: var(--primary) !important;
  border-radius: var(--radius-md) !important;
}

.swal2-cancel {
  border-radius: var(--radius-md) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
 * Toastr overrides
 * ───────────────────────────────────────────────────────────────────────────── */

#toast-container > .toast {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}


/* ─────────────────────────────────────────────────────────────────────────────
 * Print helpers
 * ───────────────────────────────────────────────────────────────────────────── */

@media print {
  /* .no-print → utilities.css; .page-topbar class is retired */
  .sidebar,
  .footer {
    display: none !important;
  }

  .main-content {
    margin: 0 !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #dee2e6 !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
 * PHASE 3 — Additional utilities and component helpers
 * ───────────────────────────────────────────────────────────────────────────── */

/* ── Layout helpers ── */
.sidebar-push { transition: margin-left .25s ease; }

/* Page-level max-width containers */
.container-page   { max-width: 1400px; margin: 0 auto; width: 100%; }
.container-narrow { max-width: 900px;  margin: 0 auto; width: 100%; }
.container-wide   { max-width: 100%;   padding: 0 var(--space-6); }

/* ── Avatar system ── */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--brand-light);
    color: var(--primary);
    overflow: hidden;
}
.avatar-xs { width: 24px;  height: 24px;  font-size: 10px; }
.avatar-sm { width: 32px;  height: 32px;  font-size: 12px; }
.avatar-md { width: 40px;  height: 40px;  font-size: 14px; }
.avatar-lg { width: 56px;  height: 56px;  font-size: 18px; }
.avatar-xl { width: 72px;  height: 72px;  font-size: 24px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Badge system ── */
.badge-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.badge-dot.success { background: var(--success); }
.badge-dot.danger  { background: var(--danger);  }
.badge-dot.warning { background: var(--warning); }
.badge-dot.info    { background: var(--info);    }

/* Status pill badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}
.status-badge.active    { background: rgba(22,163,74,.1);  color: var(--success); }
.status-badge.inactive  { background: rgba(239,68,68,.1);  color: var(--danger);  }
.status-badge.pending   { background: rgba(245,158,11,.1); color: var(--warning); }
.status-badge.completed { background: rgba(14,165,233,.1); color: var(--info);    }

/* ── Divider ── */
.divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--space-4) 0;
    border: none;
}
.divider-vertical {
    width: 1px;
    background: var(--border-color);
    align-self: stretch;
    margin: 0 var(--space-3);
}

/* ── Loading skeleton ── */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 25%,
        var(--bg-light) 50%,
        var(--bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text.wide { width: 80%; }
.skeleton-text.narrow { width: 50%; }
.skeleton-title { height: 20px; width: 60%; margin-bottom: 12px; }

/* ── Scroll lock (applied by JS when modal/drawer opens) ── */
body.scroll-locked { overflow: hidden !important; }

/* ── Smooth page transitions ── */
.page-transition {
    animation: pageFadeIn .2s ease both;
}
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── RTL-safe utility: flip horizontal margins/paddings ── */
html[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }
html[dir="rtl"] .me-auto { margin-left:  auto !important; margin-right: 0 !important; }
html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end   { text-align: left  !important; }
html[dir="rtl"] .float-start { float: right !important; }
html[dir="rtl"] .float-end   { float: left  !important; }

/* ── Focus ring for accessibility ── */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * PHASE 4 — Accessibility, Performance & Production Utilities
 * ───────────────────────────────────────────────────────────────────────────── */

/* .sr-only → canonical copy lives in utilities.css */

/* ── Interactive element ARIA states ── */
[aria-disabled="true"],
[disabled] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

[aria-busy="true"] {
    opacity: .7;
    cursor: wait;
}

[aria-invalid="true"] .form-control,
.form-control[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .15);
}

/* ── Loading state indicator ── */
.is-loading {
    position: relative;
    pointer-events: none;
    opacity: .7;
}

.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--card-bg);
    opacity: .5;
    border-radius: inherit;
    z-index: var(--z-raised);
}

/* Button loading spinner */
.btn.is-loading {
    color: transparent !important;
    position: relative;
}

.btn.is-loading::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin .6s linear infinite;
}

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

/* Dark btn spinner */
.btn-outline.is-loading::before,
.btn-light.is-loading::before {
    border-color: rgba(0,0,0,.2);
    border-top-color: var(--primary);
}

/* ── Elevation utilities (use elevation tokens) ── */
.elevation-0 { box-shadow: var(--elevation-0) !important; }
.elevation-1 { box-shadow: var(--elevation-1) !important; }
.elevation-2 { box-shadow: var(--elevation-2) !important; }
.elevation-3 { box-shadow: var(--elevation-3) !important; }
.elevation-4 { box-shadow: var(--elevation-4) !important; }

/* ── Typography utilities using rem scale ── */
.text-xs   { font-size: var(--text-xs)   !important; }
.text-sm   { font-size: var(--text-sm)   !important; }
.text-base { font-size: var(--text-base) !important; }
.text-md   { font-size: var(--text-md)   !important; }
.text-lg   { font-size: var(--text-lg)   !important; }
.text-xl   { font-size: var(--text-xl)   !important; }
.text-2xl  { font-size: var(--text-2xl)  !important; }
.text-3xl  { font-size: var(--text-3xl)  !important; }

.line-tight   { line-height: var(--line-tight)   !important; }
.line-normal  { line-height: var(--line-normal)  !important; }
.line-relaxed { line-height: var(--line-relaxed) !important; }

/* ── Truncation utilities ── */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Pointer utilities ── */
/* .cursor-pointer / .cursor-default / .cursor-not-allowed → utilities.css */
.cursor-grab     { cursor: grab; }

/* ── Select behavior ── */
.user-select-none { user-select: none; }
.user-select-all  { user-select: all;  }

/* ── Visibility ── */
.visible   { visibility: visible !important; }
.invisible { visibility: hidden  !important; }

/* ── Opacity ── */
.opacity-0   { opacity: 0   !important; }
.opacity-25  { opacity: .25 !important; }
.opacity-50  { opacity: .5  !important; }
.opacity-75  { opacity: .75 !important; }
.opacity-100 { opacity: 1   !important; }

/* ── GPU compositing hints ── */
.gpu-layer {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ── Safe area insets (iPhone notch / home bar) ── */
.safe-area-top    { padding-top:    env(safe-area-inset-top);    }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-area-start  { padding-inline-start: env(safe-area-inset-left);  }
.safe-area-end    { padding-inline-end:   env(safe-area-inset-right); }

/* ── Chart containers — stable height prevents CLS ── */
.chart-container {
    position: relative;
    width: 100%;
}

.chart-container canvas {
    display: block !important;
    max-width: 100%;
}

/* Common chart heights */
.chart-sm { height: 160px; }
.chart-md { height: 240px; }
.chart-lg { height: 320px; }
.chart-xl { height: 400px; }

/* ── White-label asset overrides ── */
/* Tenant logo dimensions — prevent CLS on logo load */
.navbar-brand img,
.sidebar-brand img,
.topbar-logo img {
    width: auto;
    height: 36px;
    object-fit: contain;
    aspect-ratio: auto;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════
   UTILITY CLASSES — Migrated from embedded Blade <style> blocks
   (intelligence.blade.php, integrity_dashboard.blade.php,
    sidebar.blade.php, marketer.blade.php)
   ═══════════════════════════════════════════════════════════════════ */

/* Typography */
.extra-small { font-size: .7rem; }

/* Scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Interaction */
.hover-scale { transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hover-scale:hover { transform: scale(1.02); }

.shadow-hover { transition: box-shadow .3s ease, transform .3s ease; }
.shadow-hover:hover { box-shadow: 0 15px 30px -10px rgba(0,0,0,.1) !important; transform: translateY(-4px); }

/* Insight / analytics card */
.insight-card {
    transition: transform .3s cubic-bezier(0.4,0,0.2,1), box-shadow .3s;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
}
.insight-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* Enter animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp .6s cubic-bezier(0.4,0,0.2,1) both; }
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }

/* Pulse blink (for live indicators) */
@keyframes pulse-blink { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.pulse { animation: pulse-blink 2s infinite; }

/* Green live-dot pulse (sidebar brand area) */
@keyframes pulse-green {
    0%   { transform: scale(.95); box-shadow: 0 0 0 0 rgba(16,185,129,.7); }
    70%  { transform: scale(1);   box-shadow: 0 0 0 6px rgba(16,185,129,0); }
    100% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.pulse-green { animation: pulse-green 2s infinite; }

/* Metric / KPI box (financial dashboard) */
.metric-box {
    background: linear-gradient(135deg, rgba(248,249,255,1), #fff);
    border: 1px solid rgba(99,102,241,.12);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
}
body.dark-mode .metric-box {
    background: var(--bg-secondary);
    border-color: var(--border-soft);
}
.metric-val { font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--text-primary); }

/* Financial integrity card */
.fin-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    background: var(--card-bg);
}

/* Soft background utility classes */
.bg-primary-soft   { background: rgba(99,102,241,.1);  color: #6366f1; }
.bg-success-soft   { background: rgba(34,197,94,.1);   color: #22c55e; }
.bg-warning-soft   { background: rgba(245,158,11,.1);  color: #f59e0b; }
.bg-info-soft      { background: rgba(6,182,212,.1);   color: #06b6d4; }
.bg-secondary-soft { background: rgba(100,116,139,.1); color: #64748b; }
.bg-indigo-soft    { background: rgba(79,70,229,.1);   color: #4f46e5; }
.bg-danger-soft    { background: rgba(239,68,68,.1);   color: #ef4444; }

/* ─────────────────────────────────────────────────────────────────────────────
 * Settings page shared components (basic-settings-page, settings-header, settings-card)
 * Used across currencies, basicinfo, and other settings views.
 * ───────────────────────────────────────────────────────────────────────────── */

.basic-settings-page {
 
    margin-inline: auto;
    padding: 8px 0 40px;
}

/* Gradient header strip */
.settings-header {
    background: linear-gradient(135deg, var(--role-accent, #5B3DF5) 0%, color-mix(in srgb, var(--role-accent, #5B3DF5) 60%, #000) 100%);
    border-radius: 18px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.settings-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(255,255,255,.07) 0%, transparent 70%);
    pointer-events: none;
}

/* Settings card */
.settings-card {
    background: var(--card-bg, #1e293b);
    border: 1px solid var(--border-color, rgba(255,255,255,.08));
    border-radius: 16px;
    margin-bottom: 20px;
    overflow: hidden;
}
.settings-card-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,.08));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.settings-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
    margin: 0;
}
.settings-card-body {
    padding: 24px;
}
.settings-card-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color, rgba(255,255,255,.08));
    background: var(--bg-secondary, rgba(255,255,255,.02));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* Light mode */
body:not(.dark-mode) .settings-card {
    background: #ffffff;
    border-color: #e5e7eb;
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
}
body:not(.dark-mode) .settings-card-header {
    border-bottom-color: #e5e7eb;
}
body:not(.dark-mode) .settings-card-title { color: #111827; }
body:not(.dark-mode) .settings-card-body  { background: #fff; }
body:not(.dark-mode) .settings-card-footer {
    border-top-color: #e5e7eb;
    background: #f9fafb;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .settings-header { padding: 20px; flex-direction: column; align-items: flex-start; }
    .settings-card-header { padding: 14px 16px; }
    .settings-card-body   { padding: 16px; }
    .settings-card-footer { padding: 12px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL LAYOUT FIX — main-content width in LTR & RTL
   Ensures the content area always expands to fill available space
   next to the fixed sidebar, in both directions.
═══════════════════════════════════════════════════════════════════════ */
.main-content,
.main-content-rtl {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    overflow-x: hidden;
}

/* ── Page-wrapper utility — no width constraint ── */
.page-wrapper {
    width: 100%;
    min-width: 0;
}

/* ── Soft-bg helpers that respect dark/light mode ── */
.bg-soft-success { background-color: rgba(16,185,129,.12) !important; }
.bg-soft-danger  { background-color: rgba(239,68,68,.12)  !important; }
.bg-soft-warning { background-color: rgba(245,158,11,.12) !important; }
.bg-soft-primary { background-color: rgba(99,102,241,.12) !important; }
.bg-soft-info    { background-color: rgba(6,182,212,.12)  !important; }
.text-success { color: #10b981 !important; }
.text-danger  { color: #ef4444 !important; }
.text-warning { color: #f59e0b !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
 *  MS-EMPTY-STATE — Platform-wide empty state component
 *  Usage:  @include('admin.layout.no_data', ['icon' => 'fa-bag-shopping',
 *                    'title' => 'No orders yet', 'message' => '...', 'action_url' => '...', 'action_label' => '...'])
 *  All props optional except none (graceful fallback).
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ms-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-10, 40px) var(--space-6, 24px);
    gap: 0;
    width: 100%;
}

.ms-empty-state-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-secondary, rgba(255,255,255,.06));
    border: 2px solid var(--border-color, rgba(255,255,255,.08));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.ms-empty-state-icon i {
    font-size: 26px;
    color: var(--text-muted, #6b7280);
    opacity: .7;
}

.ms-empty-state-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #f4f4f5);
    margin: 0 0 6px;
    letter-spacing: -.01em;
}

.ms-empty-state-message {
    font-size: 13px;
    color: var(--text-muted, #71717a);
    margin: 0 0 20px;
    max-width: 320px;
    line-height: 1.6;
}

.ms-empty-state-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: var(--radius-md, 8px);
    background: var(--primary, #6366f1);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .15s ease, transform .15s ease;
    border: none;
    cursor: pointer;
}

.ms-empty-state-action:hover {
    opacity: .88;
    transform: translateY(-1px);
    color: #fff;
}

/* Light mode overrides */
body:not(.dark-mode) .ms-empty-state-icon {
    background: #f3f4f6;
    border-color: #e5e7eb;
}
body:not(.dark-mode) .ms-empty-state-icon i {
    color: #9ca3af;
}
body:not(.dark-mode) .ms-empty-state-title {
    color: #111827;
}
body:not(.dark-mode) .ms-empty-state-message {
    color: #6b7280;
}
.text-info    { color: #06b6d4 !important; }

/* ═══════════════════════════════════════════════════════════════
   Utilities
   Merged from: utilities.css
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
 *
 *  EL MATAJER — UTILITY CLASSES
 *  Stateless, single-purpose helper classes.
 *  These complement Bootstrap utilities and fill gaps not covered elsewhere.
 *
 *  Migration plan:
 *  – Utility classes in style.css (lines ~74-133) will be moved here once
 *    each is confirmed stable after visual testing.
 *  – Classes currently in custom.css (text-*-custom, bg-*-custom, etc.)
 *    will be consolidated here in a future step.
 *
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Accessibility ───────────────────────────────────────────────────────────── */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Text Truncation ─────────────────────────────────────────────────────────── */
.text-truncate-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Cursor Helpers ──────────────────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* ── Transition Helpers ──────────────────────────────────────────────────────── */
.transition-none { transition: none !important; }
.transition-fast { transition: all var(--duration-fast) var(--ease-base); }
.transition-base { transition: all var(--duration-base) var(--ease-base); }

/* ── Focus Ring (WCAG 2.1 AA) ────────────────────────────────────────────────── */
.focus-ring:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Reduced Motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Token-based spacing helpers (missing from Bootstrap gap-*) ──────────────── */
.row-gap-1 { row-gap: var(--space-1); }
.row-gap-2 { row-gap: var(--space-2); }
.row-gap-3 { row-gap: var(--space-3); }
.col-gap-1 { column-gap: var(--space-1); }
.col-gap-2 { column-gap: var(--space-2); }
.col-gap-3 { column-gap: var(--space-3); }

/* ── Logical Direction Helpers (RTL/LTR safe) ────────────────────────────────── */
.ms-auto-logical { margin-inline-start: auto; }
.me-auto-logical { margin-inline-end: auto; }
.ps-logical-1 { padding-inline-start: var(--space-1); }
.ps-logical-2 { padding-inline-start: var(--space-2); }
.ps-logical-3 { padding-inline-start: var(--space-3); }
.pe-logical-1 { padding-inline-end: var(--space-1); }
.pe-logical-2 { padding-inline-end: var(--space-2); }
.pe-logical-3 { padding-inline-end: var(--space-3); }

/* ── Print Utilities ─────────────────────────────────────────────────────────── */
@media print {
  .no-print { display: none !important; }
  .print-only { display: block !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Ui Components
   Merged from: ui-components.css
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
 *
 *  EL MATAJER — UNIFIED UI COMPONENT SYSTEM
 *  Loaded globally via admin/layout/default.blade.php
 *
 *  Covers all <x-ui-*> Blade components:
 *    x-ui-button      x-ui-badge        x-ui-card
 *    x-ui-section     x-ui-empty-state  x-ui-alert
 *    x-ui-kpi-card    x-ui-table        x-ui-input
 *    x-ui-select      x-ui-textarea     x-ui-checkbox
 *    x-ui-radio       x-ui-modal        x-ui-filter-bar
 *
 *  Token contract:
 *    All colours come from --da3g-* (global layout scope) or --primary / --success etc.
 *    (tokens.css).  No hardcoded colours inside component rules.
 *
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   DARK MODE BASE — update global tokens to match design spec
   ───────────────────────────────────────────────────────────────────────────── */
body.dark-mode {
    --ui-bg:        #18181B;
    --ui-surface:   #27272A;
    --ui-border:    rgba(255,255,255,.07);
    --ui-fg1:       var(--da3g-fg1, #f4f4f5);
    --ui-fg2:       var(--da3g-fg2, #a1a1aa);
    --ui-fg3:       var(--da3g-fg3, #71717a);
    --ui-accent:    #3473DA;
    --ui-accent-bg: rgba(52,115,218,.13);
}
body:not(.dark-mode) {
    --ui-bg:        #f8f9fb;
    --ui-surface:   #ffffff;
    --ui-border:    #e4e4e7;
    --ui-fg1:       #09090b;
    --ui-fg2:       #52525b;
    --ui-fg3:       #a1a1aa;
    --ui-accent:    var(--primary, #1d6ef5);
    --ui-accent-bg: rgba(29,110,245,.08);
}

/* ─────────────────────────────────────────────────────────────────────────────
   1. BUTTON SYSTEM  (.x-ui-btn)
   Wraps Bootstrap btn — adds token-aware colours and unified sizing.
   ───────────────────────────────────────────────────────────────────────────── */
.x-ui-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: .875rem;
    border-radius: 10px;
    padding: 9px 20px;
    border: 1px solid transparent;
    transition: background .18s, transform .12s, box-shadow .18s, opacity .18s;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.4;
    text-decoration: none;
}
.x-ui-btn:active { transform: translateY(1px); }
.x-ui-btn i, .x-ui-btn svg { font-size: .85em; flex-shrink: 0; }

/* Size modifiers */
.x-ui-btn.is-sm { padding: 5px 13px; font-size: .8rem; border-radius: 8px; gap: 5px; }
.x-ui-btn.is-lg { padding: 12px 28px; font-size: 1rem; border-radius: 12px; }
.x-ui-btn.is-icon { padding: 8px; width: 36px; height: 36px; justify-content: center; }
.x-ui-btn.is-icon.is-sm { width: 30px; height: 30px; padding: 6px; }
.x-ui-btn.is-block { width: 100%; justify-content: center; }

/* Variants */
.x-ui-btn.is-primary {
    background: var(--ui-accent);
    color: #fff;
    border-color: var(--ui-accent);
    box-shadow: 0 2px 8px var(--ui-accent-bg);
}
.x-ui-btn.is-primary:hover { filter: brightness(1.08); color: #fff; }
.x-ui-btn.is-primary:disabled, .x-ui-btn.is-primary[disabled] { opacity: .55; pointer-events: none; }

.x-ui-btn.is-ghost {
    background: transparent;
    color: var(--ui-fg1);
    border-color: var(--ui-border);
}
.x-ui-btn.is-ghost:hover { background: var(--ui-accent-bg); color: var(--ui-accent); border-color: var(--ui-accent); }

.x-ui-btn.is-secondary {
    background: var(--ui-surface);
    color: var(--ui-fg1);
    border-color: var(--ui-border);
}
.x-ui-btn.is-secondary:hover { background: var(--ui-bg); }

.x-ui-btn.is-danger {
    background: var(--da3g-danger, #ef4444);
    color: #fff;
    border-color: var(--da3g-danger, #ef4444);
}
.x-ui-btn.is-danger:hover { filter: brightness(1.1); color: #fff; }

.x-ui-btn.is-success {
    background: var(--da3g-success, #10b981);
    color: #fff;
    border-color: var(--da3g-success, #10b981);
}
.x-ui-btn.is-success:hover { filter: brightness(1.08); color: #fff; }

.x-ui-btn.is-warning {
    background: var(--da3g-warn, #f59e0b);
    color: #fff;
    border-color: var(--da3g-warn, #f59e0b);
}
.x-ui-btn.is-warning:hover { filter: brightness(1.08); color: #fff; }

.x-ui-btn.is-link {
    background: transparent;
    border-color: transparent;
    color: var(--ui-accent);
    padding-inline: 4px;
}
.x-ui-btn.is-link:hover { text-decoration: underline; }

/* Loading state */
.x-ui-btn.is-loading { pointer-events: none; opacity: .7; }
.x-ui-btn.is-loading::after {
    content: '';
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: uiBtnSpin .6s linear infinite;
    flex-shrink: 0;
}
@keyframes uiBtnSpin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────────────────────
   2. BADGE SYSTEM  (.x-ui-badge)
   ───────────────────────────────────────────────────────────────────────────── */
.x-ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .73rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    letter-spacing: .02em;
}
.x-ui-badge i { font-size: .8em; }

/* Variants */
.x-ui-badge.is-success {
    background: var(--da3g-success-bg, rgba(16,185,129,.12));
    color: var(--da3g-success, #10b981);
}
.x-ui-badge.is-danger {
    background: var(--da3g-danger-bg, rgba(239,68,68,.12));
    color: var(--da3g-danger, #ef4444);
}
.x-ui-badge.is-warning {
    background: var(--da3g-warn-bg, rgba(245,158,11,.12));
    color: var(--da3g-warn, #f59e0b);
}
.x-ui-badge.is-info {
    background: var(--da3g-info-bg, rgba(6,182,212,.12));
    color: var(--da3g-info, #06b6d4);
}
.x-ui-badge.is-primary {
    background: var(--ui-accent-bg);
    color: var(--ui-accent);
}
.x-ui-badge.is-secondary {
    background: var(--ui-border);
    color: var(--ui-fg2);
}
.x-ui-badge.is-muted {
    background: transparent;
    color: var(--ui-fg3);
    border: 1px solid var(--ui-border);
}

/* Dot indicator */
.x-ui-badge .ui-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.x-ui-badge .ui-dot.is-pulse {
    animation: uiDotPulse 1.5s ease infinite;
}
@keyframes uiDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(.7); }
}

/* Size modifiers */
.x-ui-badge.is-lg { padding: 5px 14px; font-size: .82rem; }
.x-ui-badge.is-sm { padding: 2px 7px; font-size: .68rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   3. CARD SYSTEM  (.x-ui-card)
   ───────────────────────────────────────────────────────────────────────────── */
.x-ui-card {
    background: var(--da3g-card, var(--ui-surface));
    border: 1px solid var(--da3g-bd, var(--ui-border));
    border-radius: 14px;
    box-shadow: 0 0 0 1px var(--da3g-bd, var(--ui-border)), 0 2px 8px rgba(0,0,0,.08);
    overflow: hidden;
}
.x-ui-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px 16px;
    border-bottom: 1px solid var(--da3g-line, var(--ui-border));
}
.x-ui-card-head-icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: var(--ui-accent-bg);
    color: var(--ui-accent);
    font-size: .95rem;
    flex-shrink: 0;
}
.x-ui-card-title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--da3g-fg1, var(--ui-fg1));
    margin: 0;
    line-height: 1.3;
}
.x-ui-card-subtitle {
    font-size: .75rem;
    color: var(--da3g-fg3, var(--ui-fg3));
    margin: 2px 0 0;
}
.x-ui-card-body {
    padding: 20px 22px;
}
.x-ui-card-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--da3g-line, var(--ui-border));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* Card variants */
.x-ui-card.is-success { border-color: var(--da3g-success, #10b981); }
.x-ui-card.is-danger  { border-color: var(--da3g-danger, #ef4444); }
.x-ui-card.is-warning { border-color: var(--da3g-warn, #f59e0b); }
.x-ui-card.is-info    { border-color: var(--da3g-info, #06b6d4); }

/* ─────────────────────────────────────────────────────────────────────────────
   4. SECTION  (.x-ui-section)
   ───────────────────────────────────────────────────────────────────────────── */
.x-ui-section {
    margin-bottom: 2rem;
}
.x-ui-section-hdr {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 1.25rem;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--da3g-line, var(--ui-border));
}
.x-ui-section-hdr-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--ui-accent-bg);
    color: var(--ui-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.x-ui-section-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--da3g-fg1, var(--ui-fg1));
    margin: 0 0 3px;
    line-height: 1.3;
}
.x-ui-section-desc {
    font-size: .82rem;
    color: var(--da3g-fg3, var(--ui-fg3));
    margin: 0;
    line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. EMPTY STATE  (.x-ui-empty)
   ───────────────────────────────────────────────────────────────────────────── */
.x-ui-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 56px 24px;
    text-align: center;
}
.x-ui-empty-icon {
    width: 72px; height: 72px;
    border-radius: 18px;
    background: var(--ui-accent-bg);
    color: var(--ui-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 8px;
}
.x-ui-empty-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--da3g-fg1, var(--ui-fg1));
    margin: 0;
}
.x-ui-empty-desc {
    font-size: .85rem;
    color: var(--da3g-fg3, var(--ui-fg3));
    margin: 0;
    max-width: 360px;
    line-height: 1.6;
}
.x-ui-empty-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. ALERT  (.x-ui-alert)
   ───────────────────────────────────────────────────────────────────────────── */
.x-ui-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-size: .875rem;
    line-height: 1.5;
}
.x-ui-alert i { margin-top: 1px; flex-shrink: 0; font-size: 1rem; }
.x-ui-alert-body { flex: 1; min-width: 0; }
.x-ui-alert-title { font-weight: 700; margin: 0 0 3px; font-size: .875rem; }
.x-ui-alert-msg { margin: 0; color: inherit; opacity: .85; }

.x-ui-alert.is-success {
    background: var(--da3g-success-bg, rgba(16,185,129,.10));
    border-color: var(--da3g-success, #10b981);
    color: var(--da3g-success, #10b981);
}
.x-ui-alert.is-danger {
    background: var(--da3g-danger-bg, rgba(239,68,68,.10));
    border-color: var(--da3g-danger, #ef4444);
    color: var(--da3g-danger, #ef4444);
}
.x-ui-alert.is-warning {
    background: var(--da3g-warn-bg, rgba(245,158,11,.10));
    border-color: var(--da3g-warn, #f59e0b);
    color: var(--da3g-warn, #f59e0b);
}
.x-ui-alert.is-info {
    background: var(--da3g-info-bg, rgba(6,182,212,.10));
    border-color: var(--da3g-info, #06b6d4);
    color: var(--da3g-info, #06b6d4);
}
.x-ui-alert.is-primary {
    background: var(--ui-accent-bg);
    border-color: var(--ui-accent);
    color: var(--ui-accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. KPI CARD  (.x-ui-kpi)
   ───────────────────────────────────────────────────────────────────────────── */
.x-ui-kpi {
    background: var(--da3g-card, var(--ui-surface));
    border: 1px solid var(--da3g-bd, var(--ui-border));
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}
.x-ui-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.x-ui-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.x-ui-kpi-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.x-ui-kpi-value {
    font-size: 1.9rem;
    font-weight: 900;
    color: var(--da3g-fg1, var(--ui-fg1));
    line-height: 1;
    letter-spacing: -.03em;
}
.x-ui-kpi-label {
    font-size: .75rem;
    font-weight: 700;
    color: var(--da3g-fg3, var(--ui-fg3));
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 2px;
}
.x-ui-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .73rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    margin-top: 4px;
}
.x-ui-kpi-trend.is-up   { background: var(--da3g-success-bg, rgba(16,185,129,.12)); color: var(--da3g-success, #10b981); }
.x-ui-kpi-trend.is-down { background: var(--da3g-danger-bg, rgba(239,68,68,.12));   color: var(--da3g-danger, #ef4444); }
.x-ui-kpi-trend.is-flat { background: var(--da3g-warn-bg, rgba(245,158,11,.12));   color: var(--da3g-warn, #f59e0b); }

/* KPI accent strip (left border) */
.x-ui-kpi::before {
    content: '';
    position: absolute;
    inset-inline-start: 0; top: 20%; bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ui-kpi-accent, var(--ui-accent));
    opacity: .7;
}
.x-ui-kpi.is-success { --ui-kpi-accent: var(--da3g-success, #10b981); }
.x-ui-kpi.is-danger  { --ui-kpi-accent: var(--da3g-danger, #ef4444); }
.x-ui-kpi.is-warning { --ui-kpi-accent: var(--da3g-warn, #f59e0b); }
.x-ui-kpi.is-info    { --ui-kpi-accent: var(--da3g-info, #06b6d4); }

/* ─────────────────────────────────────────────────────────────────────────────
   8. TABLE SYSTEM  (.x-ui-table-wrap / x-ui-table)
   ───────────────────────────────────────────────────────────────────────────── */
.x-ui-table-wrap {
    background: var(--da3g-card, var(--ui-surface));
    border: 1px solid var(--da3g-bd, var(--ui-border));
    border-radius: 14px;
    overflow: hidden;
}
.x-ui-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.x-ui-table thead th {
    padding: 12px 16px;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--da3g-fg3, var(--ui-fg3));
    background: var(--da3g-bg2, var(--ui-bg));
    border-bottom: 1px solid var(--da3g-line, var(--ui-border));
    white-space: nowrap;
}
.x-ui-table tbody td {
    padding: 14px 16px;
    color: var(--da3g-fg1, var(--ui-fg1));
    border-bottom: 1px solid var(--da3g-line, var(--ui-border));
    vertical-align: middle;
}
.x-ui-table tbody tr:last-child td { border-bottom: none; }
.x-ui-table tbody tr:hover td { background: var(--da3g-hover, rgba(255,255,255,.02)); }
.x-ui-table .x-ui-table-empty td {
    padding: 0;
    border: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. FORM INPUTS  (.x-ui-field)
   ───────────────────────────────────────────────────────────────────────────── */
.x-ui-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 1.25rem;
}
.x-ui-label {
    font-size: .82rem;
    font-weight: 700;
    color: var(--da3g-fg2, var(--ui-fg2));
    display: flex;
    align-items: center;
    gap: 5px;
}
.x-ui-label .req { color: var(--da3g-danger, #ef4444); font-size: .9em; }
.x-ui-hint {
    font-size: .75rem;
    color: var(--da3g-fg3, var(--ui-fg3));
    margin: 0;
    line-height: 1.4;
}
.x-ui-error {
    font-size: .75rem;
    color: var(--da3g-danger, #ef4444);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.x-ui-control {
    width: 100%;
    background: var(--da3g-input-bg, rgba(255,255,255,.03));
    border: 1px solid var(--da3g-bd, var(--ui-border));
    border-radius: 10px;
    padding: 9px 14px;
    font-size: .875rem;
    color: var(--da3g-fg1, var(--ui-fg1));
    outline: none;
    transition: border-color .18s, box-shadow .18s;
    appearance: none;
    -webkit-appearance: none;
}
.x-ui-control:focus {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px var(--ui-accent-bg);
}
.x-ui-control.has-error {
    border-color: var(--da3g-danger, #ef4444);
}
.x-ui-control.has-error:focus {
    box-shadow: 0 0 0 3px var(--da3g-danger-bg, rgba(239,68,68,.12));
}
body:not(.dark-mode) .x-ui-control {
    background: #fff;
    border-color: #d4d4d8;
    color: #09090b;
}
body:not(.dark-mode) .x-ui-control:focus { border-color: var(--ui-accent); }
.x-ui-control[disabled], .x-ui-control:disabled {
    opacity: .55;
    cursor: not-allowed;
    background: var(--ui-bg);
}

/* Textarea specific */
textarea.x-ui-control { resize: vertical; min-height: 90px; line-height: 1.5; }

/* Select specific */
select.x-ui-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a1a1aa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}
html[dir="rtl"] select.x-ui-control {
    background-position: left 14px center;
    padding-right: 14px;
    padding-left: 38px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. CHECKBOX / TOGGLE  (.x-ui-toggle)
   ───────────────────────────────────────────────────────────────────────────── */
.x-ui-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--da3g-line, var(--ui-border));
}
.x-ui-toggle-row:last-child { border-bottom: none; }
.x-ui-toggle-info { flex: 1; min-width: 0; }
.x-ui-toggle-label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--da3g-fg1, var(--ui-fg1));
    margin: 0 0 2px;
}
.x-ui-toggle-desc {
    font-size: .78rem;
    color: var(--da3g-fg3, var(--ui-fg3));
    margin: 0;
}

.x-ui-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.x-ui-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.x-ui-switch-track {
    position: absolute; inset: 0;
    background: var(--da3g-line, #3f3f46);
    border-radius: 999px;
    transition: background .2s;
    cursor: pointer;
}
.x-ui-switch-track::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    left: 3px; top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.x-ui-switch input:checked + .x-ui-switch-track { background: var(--ui-accent); }
.x-ui-switch input:checked + .x-ui-switch-track::before { transform: translateX(20px); }
html[dir="rtl"] .x-ui-switch input:checked + .x-ui-switch-track::before { transform: translateX(-20px); }
.x-ui-switch input:focus-visible + .x-ui-switch-track { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* Standard Checkbox */
.x-ui-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.x-ui-checkbox {
    width: 18px; height: 18px;
    border-radius: 5px;
    border: 2px solid var(--da3g-bd, var(--ui-border));
    background: var(--da3g-input-bg, transparent);
    appearance: none; -webkit-appearance: none;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    position: relative;
    flex-shrink: 0;
}
.x-ui-checkbox:checked {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
}
.x-ui-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 3px; top: 0px;
    width: 8px; height: 12px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg) scale(.9);
}
html[dir="rtl"] .x-ui-checkbox:checked::after {
    left: auto; right: 3px;
}

/* Radio */
.x-ui-radio {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--da3g-bd, var(--ui-border));
    background: var(--da3g-input-bg, transparent);
    appearance: none; -webkit-appearance: none;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    position: relative;
    flex-shrink: 0;
}
.x-ui-radio:checked {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    box-shadow: inset 0 0 0 3px var(--da3g-card, #1c1c1f);
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. MODAL  (.x-ui-modal)
   ───────────────────────────────────────────────────────────────────────────── */
.x-ui-modal-dialog {
    border-radius: 18px;
    background: var(--da3g-card, var(--ui-surface));
    border: 1px solid var(--da3g-bd, var(--ui-border));
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.x-ui-modal-head {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--da3g-line, var(--ui-border));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.x-ui-modal-title {
    font-size: .95rem;
    font-weight: 800;
    color: var(--da3g-fg1, var(--ui-fg1));
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.x-ui-modal-close {
    width: 30px; height: 30px;
    background: transparent;
    border: 1px solid var(--da3g-bd, var(--ui-border));
    border-radius: 7px;
    color: var(--da3g-fg3, var(--ui-fg3));
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.x-ui-modal-close:hover { background: var(--da3g-danger-bg, rgba(239,68,68,.1)); color: var(--da3g-danger, #ef4444); border-color: var(--da3g-danger, #ef4444); }
.x-ui-modal-body { padding: 22px 24px; }
.x-ui-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--da3g-line, var(--ui-border));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. FILTER BAR  (.x-ui-filter-bar)
   ───────────────────────────────────────────────────────────────────────────── */
.x-ui-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 0;
    margin-bottom: 16px;
}
.x-ui-filter-bar-search {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 340px;
}
.x-ui-filter-bar-search i {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%; transform: translateY(-50%);
    color: var(--da3g-fg3, var(--ui-fg3));
    font-size: .85rem;
    pointer-events: none;
}
.x-ui-filter-bar-search input {
    width: 100%;
    padding: 9px 14px 9px 36px;
    border-radius: 10px;
    border: 1px solid var(--da3g-bd, var(--ui-border));
    background: var(--da3g-card, var(--ui-surface));
    color: var(--da3g-fg1, var(--ui-fg1));
    font-size: .875rem;
    outline: none;
    transition: border-color .18s;
}
html[dir="rtl"] .x-ui-filter-bar-search input { padding: 9px 36px 9px 14px; }
.x-ui-filter-bar-search input:focus { border-color: var(--ui-accent); }
.x-ui-filter-bar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }

/* Filter pills */
.x-ui-filter-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.x-ui-filter-pill {
    padding: 5px 13px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    border: 1px solid var(--da3g-bd, var(--ui-border));
    background: transparent;
    color: var(--da3g-fg2, var(--ui-fg2));
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.x-ui-filter-pill:hover,
.x-ui-filter-pill.is-active {
    background: var(--ui-accent-bg);
    color: var(--ui-accent);
    border-color: var(--ui-accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .x-ui-filter-bar { flex-direction: column; align-items: stretch; }
    .x-ui-filter-bar-search { max-width: 100%; }
    .x-ui-filter-bar-actions { margin-inline-start: 0; }
    .x-ui-kpi-value { font-size: 1.5rem; }
    .x-ui-card-head, .x-ui-card-body, .x-ui-card-footer { padding-inline: 16px; }
    .x-ui-modal-head, .x-ui-modal-body, .x-ui-modal-footer { padding-inline: 16px; }
}

@media (max-width: 480px) {
    .x-ui-empty { padding: 36px 16px; }
    .x-ui-modal-footer { flex-direction: column-reverse; }
    .x-ui-modal-footer .x-ui-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   Settings
   Merged from: settings.css
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
 *
 *  EL MATAJER — SETTINGS PAGES (shared layout)
 *
 *  Shared CSS for admin settings pages that use the dashboard "da3" token system.
 *  Each page defines its own --da3-* custom-property scope on a root element, but
 *  the structural patterns below are identical across files.
 *
 *  Files that benefit from this sheet:
 *    1. resources/views/admin/settings/basicinfo.blade.php         (.basic-settings-page)
 *    2. resources/views/admin/settings/profile.blade.php            (.pf-page — partial overlap)
 *    3. resources/views/admin/settings/storefront_branding.blade.php(.sb-page — partial overlap)
 *    4. resources/views/admin/settings/partials/storefront_design.blade.php (.sd-*)
 *    5. resources/views/admin/settings/social_media.blade.php       (.smp)
 *    6. resources/views/admin/otherpages/settings.blade.php         (.sp-wrap)
 *
 *  ─── WHAT IS SHARED ───────────────────────────────────────────────────────
 *
 *  Pattern                         Class              Used by
 *  ─────────────────────────────────────────────────────────────────────────
 *  Page shell / max-width wrapper  .settings-page      basicinfo, social_media
 *  Settings section container      .settings-section   otherpages/settings
 *  Section header (icon + title)   .settings-sec-hdr   otherpages/settings
 *  da3-compatible card             .settings-card      basicinfo, storefront*
 *  Card header                     .settings-card-head basicinfo, social_media
 *  Card body                       .settings-card-body basicinfo, social_media
 *  Field label                     .settings-label     basicinfo, social_media, storefront_design
 *  Text input / select / textarea  .settings-input     basicinfo, social_media, storefront_design
 *  Sticky save / action bar        .settings-actions   storefront_branding, otherpages
 *  Primary action button           .settings-save-btn  social_media, storefront_branding
 *  Hero banner (inline, non-gradient) .settings-hero   social_media
 *  Responsive grid (2-col)         .settings-grid-2    basicinfo, storefront_design, profile
 *
 *  ─── WHAT IS PAGE-SPECIFIC (NOT included here) ──────────────────────────
 *
 *  basicinfo.blade.php
 *    • .bs-grid-row, .bs-storefront-grid  — unique 3-col adaptive grid
 *    • .bs-shell-flow                     — full-width 1600px shell
 *    • .basic-settings-page --da3-* scope — role-aware accent color
 *
 *  profile.blade.php
 *    • .pf-topbar, .pf-state-pill, .pf-save-btn — topbar save row
 *    • .pf-card.is-personal/security/avatar/otp  — per-card accent tints
 *    • .pf-avatar-wrap, .pf-otp-display, .pf-otp-input — avatar + OTP UI
 *    • .pf-modal-backdrop, .pf-modal, .pf-modal-delete  — modal system
 *    • .pf-danger-zone, .pf-danger-row              — danger zone
 *    • .pf-stats-grid                               — stats grid (3-col)
 *
 *  storefront_branding.blade.php
 *    • .sb-topbar strip, .sb-qs-ring                — completion ring
 *    • .sb-font-card, .sb-fonts grid                — font selector grid
 *    • .sb-lang-btn                                 — language cards
 *    • .sb-upload, .sb-preview-wrap                 — image upload + live preview
 *    • .sb-pair-strip                               — paired-page link strip
 *    • .sb-page grid (1fr 380px)                    — two-col layout with sidebar
 *    • --da3-* scope on .sb-page                    — local token scope
 *
 *  storefront_design.blade.php
 *    • .sd-color, .sd-color-presets, .sd-preset     — color picker
 *    • .sd-font-live, .sd-font-card                 — font live preview
 *    • .sd-lang, .sd-lang-btn                       — language toggle
 *    • .sd-upload                                   — image upload
 *    • theme template card grid                     — template selector
 *    • .sd-mode-card                                — theme mode toggle cards
 *
 *  social_media.blade.php
 *    • .smp-tabs, .smp-tab                          — tab navigation
 *    • .smp-seo-preview                             — Google search preview
 *    • .smp-og-zone                                 — OG image upload zone
 *    • .smp-link-list, .smp-link-row, .smp-link-del — social link list
 *    • .smp-icon-grid, .smp-icon-item               — icon picker grid
 *    • .smp-modal                                   — Bootstrap modal overrides
 *
 *  otherpages/settings.blade.php
 *    • .sp-nav (sticky sidebar with scroll-spy)     — settings sidebar nav
 *    • .sp-group                                    — nav section labels
 *    • .sp-link, .sp-link-icon, .sp-link-chevron    — nav items
 *    • .cache-wrap, .cache-grid, .cache-item        — cache management panel
 *    • .sp-nav-card horizontal scroll on mobile     — mobile nav conversion
 *
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. da3 Token scope (dark default, light override) ───────────────────── */
/* Most settings pages define --da3-* on a wrapper element. This provides
   a fallback scope that any page can use without re-declaring the full set. */
.settings-page {
    /* Dark mode surface values (default — matches global dark theme) */
    --da3-card:   var(--card-bg,    #1c1c1f);
    --da3-bd:     var(--border-color, rgba(255,255,255,.055));
    --da3-bg2:    var(--bg-secondary, #111113);
    --da3-shadow: var(--shadow-md,   0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32));
    --da3-fg1:    var(--text-primary,   #f4f4f5);
    --da3-fg2:    var(--text-secondary, #a1a1aa);
    --da3-fg3:    var(--text-muted,     #71717a);
    --da3-line:   rgba(255, 255, 255, 0.06);
    --da3-accent: var(--primary, #3b82f6);
    --da3-abg:    rgba(59, 130, 246, 0.12);
}

body:not(.dark-mode) .settings-page {
    --da3-card:   var(--card-bg,   #ffffff);
    --da3-bd:     var(--border-color, #e4e4e7);
    --da3-bg2:    var(--bg-light,  #f9f9fb);
    --da3-shadow: 0 1px 3px rgba(0,0,0,.07), 0 0 0 1px #e4e4e7;
    --da3-fg1:    var(--text-primary,  #09090b);
    --da3-fg2:    var(--text-secondary,#52525b);
    --da3-fg3:    var(--text-muted,    #a1a1aa);
    --da3-line:   #f4f4f5;
}

/* ── 2. Card ──────────────────────────────────────────────────────────────── */
/* A standard content card matching the da3 card system.
   Works in both stand-alone pages and inside otherpages/settings.blade.php */
.settings-card {
    background: var(--da3-card, var(--card-bg, #fff));
    border: 1px solid var(--da3-bd, var(--border-color));
    border-radius: var(--da3-r, var(--radius-lg, 12px));
    box-shadow: var(--da3-shadow, var(--shadow-sm));
    overflow: hidden;
    margin-bottom: var(--da3-gap, 16px);
}

/* Card header — icon + title + optional subtitle */
.settings-card-head {
    padding: 14px 20px;
    border-bottom: 1px solid var(--da3-line, var(--border-color));
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: transparent;
}

.settings-card-head-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--da3-abg, var(--brand-light));
    color: var(--da3-accent, var(--primary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.settings-card-head h4,
.settings-card-head-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--da3-fg1, var(--text-primary));
    margin: 0;
    flex: 1;
}

.settings-card-head small,
.settings-card-head-sub {
    font-size: 11px;
    color: var(--da3-fg3, var(--text-muted));
    font-weight: 500;
}

/* Card body */
.settings-card-body {
    padding: 16px 20px;
}

/* ── 3. Section wrapper (used in otherpages/settings.blade.php) ───────────── */
.settings-section {
    scroll-margin-top: 80px;
    margin-bottom: 44px;
}

/* ── 4. Section header decoration ────────────────────────────────────────── */
.settings-sec-hdr {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.settings-sec-hdr-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    /* Background/color set inline per section */
}

.settings-sec-hdr-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.settings-sec-hdr-sub {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 2px 0 0;
}

/* ── 5. Inline hero banner (non-gradient, used in social_media.blade.php) ── */
.settings-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--da3-bd, var(--border-color));
    background: var(--da3-bg2, var(--bg-light));
    margin-bottom: 20px;
}

.settings-hero-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary, #3b82f6), #6366f1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 8px 20px -6px rgba(59, 130, 246, 0.45);
}

.settings-hero h1,
.settings-hero-title {
    font-size: 18px;
    font-weight: 900;
    color: var(--da3-fg1, var(--text-primary));
    margin: 0 0 3px;
}

.settings-hero p,
.settings-hero-sub {
    font-size: 12px;
    color: var(--da3-fg3, var(--text-muted));
    margin: 0;
}

/* ── 6. Responsive 2-column field grid ───────────────────────────────────── */
/* Used inside cards for side-by-side form fields.
   Profile (.pf-grid-2), storefront_design (.sd-grid), basicinfo (.sb-grid)
   all share this identical pattern. */
.settings-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

.settings-grid-2-full {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .settings-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ── 7. Form field wrapper ────────────────────────────────────────────────── */
.settings-field {
    display: flex;
    flex-direction: column;
}

.settings-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--da3-fg1, var(--text-primary));
    margin-bottom: 6px;
    display: block;
}

.settings-label .settings-label-opt {
    font-size: 11px;
    color: var(--da3-fg3, var(--text-muted));
    font-weight: 600;
    margin-inline-start: 6px;
}

/* Required marker */
.settings-label.is-required::after {
    content: ' *';
    color: var(--danger, #ef4444);
}

/* ── 8. Input / Select / Textarea ─────────────────────────────────────────── */
.settings-input,
.settings-field input[type="text"],
.settings-field input[type="email"],
.settings-field input[type="url"],
.settings-field input[type="tel"],
.settings-field input[type="password"],
.settings-field select,
.settings-field textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--da3-bg2, var(--bg-secondary));
    border: 1.5px solid var(--da3-bd, var(--border-color));
    border-radius: var(--radius-md, 10px);
    color: var(--da3-fg1, var(--text-primary));
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    outline: none;
    transition: border-color var(--duration-fast, 0.15s), box-shadow var(--duration-fast, 0.15s);
}

.settings-input:focus,
.settings-field input:focus,
.settings-field select:focus,
.settings-field textarea:focus {
    border-color: var(--da3-accent, var(--primary));
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.settings-input::placeholder,
.settings-field input::placeholder,
.settings-field textarea::placeholder {
    color: var(--da3-fg3, var(--text-muted));
}

.settings-field textarea {
    min-height: 88px;
    resize: vertical;
    line-height: 1.6;
}

/* Helper text below a field */
.settings-field-helper {
    font-size: 11px;
    color: var(--da3-fg3, var(--text-muted));
    margin-top: 5px;
    line-height: 1.5;
}

/* ── 9. Sticky save / actions bar ─────────────────────────────────────────── */
/* Used by storefront_branding (.sb-actions) and otherpages/settings sticky patterns */
.settings-actions {
    position: sticky;
    bottom: 14px;
    z-index: var(--z-raised, 10);
    background: var(--da3-card, var(--card-bg));
    border: 1px solid var(--da3-bd, var(--border-color));
    box-shadow: var(--da3-shadow, var(--shadow-md)), 0 -8px 28px rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-lg, 12px);
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color var(--duration-base), box-shadow var(--duration-base);
}

.settings-actions.is-dirty {
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: var(--da3-shadow, var(--shadow-md)), 0 -8px 28px rgba(245, 158, 11, 0.18);
}

.settings-actions-status {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

/* Status dot in the actions bar */
.settings-actions-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-success, #10b981);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
    flex-shrink: 0;
    transition: background var(--duration-base), box-shadow var(--duration-base);
}

.settings-actions.is-dirty .settings-actions-dot {
    background: var(--color-warning, #f59e0b);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22);
    animation: settingsPulse 1.6s ease-in-out infinite;
}

@keyframes settingsPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22); }
    50%       { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.10); }
}

.settings-actions-text {
    font-size: 13px;
    color: var(--da3-fg2, var(--text-secondary));
    font-weight: 600;
}

.settings-actions-text strong {
    color: var(--da3-fg1, var(--text-primary));
    font-weight: 700;
    display: block;
    margin-bottom: 1px;
}

.settings-actions-text small {
    font-size: 11px;
    color: var(--da3-fg3, var(--text-muted));
    font-weight: 500;
    display: block;
}

.settings-btn-group {
    display: flex;
    gap: 8px;
}

/* ── 10. Buttons ──────────────────────────────────────────────────────────── */
/* Ghost/secondary button */
.settings-btn {
    height: 42px;
    padding: 0 20px;
    border-radius: var(--radius-md, 10px);
    border: 1.5px solid var(--da3-bd, var(--border-color));
    background: var(--da3-bg2, var(--bg-secondary));
    color: var(--da3-fg2, var(--text-secondary));
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: inherit;
    transition: filter var(--duration-fast), transform var(--duration-fast), border-color var(--duration-fast);
    text-decoration: none;
}

.settings-btn:hover {
    border-color: var(--da3-accent, var(--primary));
    color: var(--da3-accent, var(--primary));
    text-decoration: none;
}

/* Primary action button (save) */
.settings-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--radius-md, 11px);
    background: linear-gradient(135deg, var(--primary, #3b82f6), #6366f1);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 6px 18px -4px rgba(59, 130, 246, 0.4);
    transition: filter var(--duration-fast), transform var(--duration-fast);
}

.settings-save-btn:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    color: #fff;
}

.settings-save-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* ── 11. Flash / status messages ─────────────────────────────────────────── */
.settings-flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    animation: settingsFlashIn 0.35s ease;
}

@keyframes settingsFlashIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.settings-flash.success {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.32);
    color: var(--color-success, #10b981);
}

.settings-flash.error {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.32);
    color: var(--color-danger, #ef4444);
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  DARK MODE — explicit overrides (most resolve via tokens already)
 * ═════════════════════════════════════════════════════════════════════════ */
body.dark-mode .settings-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .settings-card-head {
    border-bottom-color: var(--border-color);
}

body.dark-mode .settings-hero {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

body.dark-mode .settings-actions {
    background: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .settings-input,
body.dark-mode .settings-field input,
body.dark-mode .settings-field select,
body.dark-mode .settings-field textarea {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  RESPONSIVE
 * ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .settings-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .settings-btn-group {
        justify-content: flex-end;
    }
}

@media (max-width: 640px) {
    .settings-hero {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 18px;
    }

    .settings-hero-icon {
        margin-bottom: 4px;
    }

    .settings-save-btn,
    .settings-btn {
        width: 100%;
        justify-content: center;
    }

    .settings-card-body {
        padding: 14px 16px;
    }

    .settings-sec-hdr-title {
        font-size: 14px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * BASIC INFO PAGE  (.basic-settings-page)
 * ─────────────────────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════
   SETTINGS — mirrors .da3 dashboard token system exactly
   Dark by default · Light override on body:not(.dark-mode)
   Accent = role-aware (admin=rose, vendor=indigo, marketer=emerald)
═══════════════════════════════════════════════════════════════════ */

/* ── Token scope — exact mirror of .da3 (style.css:12787) ── */
.basic-settings-page {
    --da3-card:    #1c1c1f;
    --da3-bd:      rgba(255,255,255,.055);
    --da3-bdr:     rgba(255,255,255,.055);
    --da3-bg2:     #111113;
    --da3-shadow:  0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-fg1:     #f4f4f5;
    --da3-fg2:     #a1a1aa;
    --da3-fg3:     #52525b;
    --da3-line:    rgba(255,255,255,.06);
    --da3-hover:   rgba(255,255,255,.03);
    --da3-r:       12px;
    --da3-gap:     16px;
    --da3-accent:  var(--role-accent, #2563eb);
    --da3-abg:     var(--role-accent-soft, rgba(37,99,235,.12));
    padding-bottom: 120px;
    color: var(--da3-fg1);
}
/* Light mode override — exact mirror of body:not(.dark-mode) .da3 */
body:not(.dark-mode) .basic-settings-page {
    --da3-card:    #ffffff;
    --da3-bd:      #e4e4e7;
    --da3-bdr:     #e4e4e7;
    --da3-bg2:     #f9f9fb;
    --da3-shadow:  0 1px 3px rgba(0,0,0,.07), 0 0 0 1px #e4e4e7;
    --da3-fg1:     #09090b;
    --da3-fg2:     #71717a;
    --da3-fg3:     #a1a1aa;
    --da3-line:    #f4f4f5;
    --da3-hover:   rgba(0,0,0,.02);
}

.basic-settings-page * { box-sizing: border-box; }

/* ── Page shell (full-width dashboard container) ── */
.bs-shell-flow {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 28px;
}
@media (max-width: 1200px) {
    .bs-shell-flow { padding: 0 22px; }
}
@media (max-width: 640px) {
    .bs-shell-flow { padding: 0 14px; }
}

/* ── Dashboard-style grid rows ── */
.bs-grid-row {
    display: grid;
    gap: var(--da3-gap);
    align-items: start;
    margin-bottom: var(--da3-gap);
}
.bs-grid-row:last-child { margin-bottom: 0; }
.bs-grid-row-1col   { grid-template-columns: 1fr; }
.bs-grid-row-2col   { grid-template-columns: 1fr 1fr; }
.bs-grid-row-3col   { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1199px) {
    .bs-grid-row-3col  { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
    .bs-grid-row-2col,
    .bs-grid-row-3col { grid-template-columns: 1fr; }
}

.bs-grid-row > .bs-card { height: 100%; display: flex; flex-direction: column; }
.bs-grid-row > .bs-card > .bs-card-body { flex: 1; }

/* Storefront internal 2x2 grid: Colors+Typography (col 1) | Language+ThemeMode (col 2) */
.bs-storefront-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    gap: var(--da3-gap);
    align-items: start;
}
.bs-storefront-grid > .settings-card { margin: 0 !important; }
@media (max-width: 980px) {
    .bs-storefront-grid {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        grid-template-rows: none;
    }
}

/* ── Legacy .settings-card override — align with da3-card system ── */
.basic-settings-page .settings-card {
    background: var(--da3-card) !important;
    border: 1px solid var(--da3-bd) !important;
    border-radius: var(--da3-r) !important;
    box-shadow: var(--da3-shadow) !important;
    margin-bottom: var(--da3-gap);
    overflow: hidden;
}
.basic-settings-page .settings-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--da3-line);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: transparent;
}
.basic-settings-page .settings-card-header .icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.basic-settings-page .settings-card-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--da3-fg1);
    margin: 0;
}
.basic-settings-page .settings-card-body,
.basic-settings-page .settings-card > .row { padding: 18px 20px; }
.basic-settings-page .settings-card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--da3-line);
    background: var(--da3-bg2);
}



/* ═══ HERO — identical to .da3-top-bar (style.css:12860) ═══ */
.bs-hero {
    background:    var(--da3-card);
    border:        1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow:    var(--da3-shadow);
    margin-bottom: var(--da3-gap);
    overflow:      hidden;
    margin-top:    14px;
}
.bs-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 14px;
    flex-wrap: wrap;
}
@media (max-width: 640px) {
    .bs-hero-inner { padding: 14px 16px 12px; }
}
.bs-hero-left { min-width: 0; }
.bs-hero-crumb {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--da3-fg2);
    margin: 0 0 5px;
    display: inline-flex; align-items: center; gap: 6px;
}
.bs-hero-crumb i { opacity: .45; font-size: 9px; }
.bs-hero-crumb .bs-crumb-active { color: var(--da3-fg3); }
.bs-hero h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--da3-fg1);
    line-height: 1.2;
    display: block;
}
.bs-hero-sub {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--da3-fg3);
    margin: 3px 0 0;
}
.bs-hero-right { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
    .bs-hero h1 { font-size: 17px; }
    .bs-hero-right { width: 100%; }
}

/* ═══ Status Pill ═══ */
.status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid var(--da3-bd);
    background: var(--da3-card);
    color: var(--da3-fg2);
    line-height: 1.4;
}
.status-pill i { font-size: 10px; }
.status-pill.is-active { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.25); color: #047857; }
body.dark-mode .status-pill.is-active { color: #6ee7b7; }
.status-pill.is-locked { background: var(--da3-bg2); color: var(--da3-fg3); }
.status-pill.is-warn   { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.25); color: #b45309; }
body.dark-mode .status-pill.is-warn { color: #fbbf24; }
.status-pill.is-error  { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.25); color: #b91c1c; }
body.dark-mode .status-pill.is-error { color: #fca5a5; }
.status-pill.is-info   { background: var(--da3-abg); border-color: var(--da3-accent); color: var(--da3-accent); }
body.dark-mode .status-pill.is-info { color: var(--da3-accent); }
.status-pill .live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,.22);
}

/* ═══ Section card — identical to .da3-card (style.css:12820) ═══ */
.bs-flow { display: block; }
.bs-card {
    background:    var(--da3-card);
    border:        1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow:    var(--da3-shadow);
    overflow:      hidden;
}
.bs-card-head {
    padding: 20px 22px 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.bs-card-head-ico {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.bs-card-head-txt { flex: 1; min-width: 0; }
.bs-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--da3-fg1);
    margin: 0 0 3px;
    line-height: 1.3;
    display: flex; align-items: center; gap: 7px;
}
.bs-card-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--da3-fg2);
    font-weight: 400;
    margin: 0;
}
.bs-card-body {
    padding: 16px 22px 22px;
    border-top: 1px solid var(--da3-line);
}
@media (max-width: 640px) {
    .bs-card-head { padding: 16px 16px 12px; }
    .bs-card-body { padding: 14px 16px 18px; }
}

/* Hero card — accent icon instead of tinted */
.bs-card.is-hero .bs-card-head-ico {
    width: 36px; height: 36px;
    background: var(--da3-accent);
    color: #fff;
    font-size: 14px;
}
.bs-card.is-hero .bs-card-title { font-size: 15px; }

/* ═══ Form polish ═══ */
.basic-settings-page .form-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--da3-fg1);
    margin-bottom: 7px;
    display: inline-flex; align-items: center; gap: 4px;
}
.basic-settings-page .form-label small.text-muted { font-weight: 500; font-size: 11px; color: var(--da3-fg3) !important; }
.basic-settings-page .form-control,
.basic-settings-page .form-select,
.basic-settings-page select.form-control {
    height: 42px;
    border-radius: 10px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-card);
    color: var(--da3-fg1);
    font-size: 13.5px;
    padding: 6px 12px;
    transition: border-color .15s, box-shadow .15s;
}
.basic-settings-page textarea.form-control { height: auto; min-height: 86px; padding: 10px 12px; }
.basic-settings-page .form-control:focus,
.basic-settings-page .form-select:focus {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px var(--da3-abg);
    outline: none;
}
.basic-settings-page .form-control.is-invalid,
.basic-settings-page .form-select.is-invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.18); }
.basic-settings-page .form-control.is-valid   { border-color: #10b981; }
.basic-settings-page .bs-helper-text {
    display: block; margin-top: 6px;
    font-size: 11.5px;
    color: var(--da3-fg3);
    font-weight: 500;
    line-height: 1.5;
}
.basic-settings-page .form-control-color { padding: 4px; height: 42px; width: 100% !important; cursor: pointer; }

/* Input group (for slug) */
.basic-settings-page .input-group { display: flex; }
.basic-settings-page .input-group-text {
    display: inline-flex; align-items: center;
    padding: 0 12px;
    border: 1px solid var(--da3-bd);
    border-inline-end: 0;
    border-radius: 10px 0 0 10px;
    background: var(--da3-bg2);
    color: var(--da3-fg2);
    font-size: 12.5px;
    font-weight: 600;
    font-family: 'SF Mono', Consolas, monospace;
}
.basic-settings-page .input-group .form-control { border-radius: 0 10px 10px 0; flex: 1; min-width: 0; }
.basic-settings-page .force-ltr,
.basic-settings-page .force-ltr .form-control,
.basic-settings-page .force-ltr .input-group-text { direction: ltr !important; }

/* Logo/Favicon upload tile */
.id-upload {
    display: flex; align-items: center; gap: 14px;
    padding: 14px;
    border: 1.5px dashed var(--da3-bd);
    border-radius: 12px;
    background: var(--da3-bg2);
    cursor: pointer;
    position: relative;
    transition: border-color .2s, background .2s;
    margin: 0;
}
.id-upload:hover { border-color: var(--da3-accent); background: var(--da3-abg); }
body.dark-mode .id-upload:hover { background: var(--da3-abg); }
.id-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.id-upload-preview {
    width: 88px; height: 88px;
    border-radius: 10px;
    background-color: var(--da3-card);
    background-size: contain; background-position: center; background-repeat: no-repeat;
    border: 1px solid var(--da3-bd);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--da3-fg3);
    font-size: 22px;
    position: relative;
}
.id-upload-preview--logo { width: 140px; height: 88px; }
.id-upload-preview-dim {
    position: absolute;
    bottom: -7px;
    inset-inline-end: -6px;
    background: var(--da3-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .03em;
    padding: 2px 6px;
    border-radius: 999px;
    box-shadow: 0 2px 6px var(--da3-abg);
    font-family: 'SF Mono', Consolas, monospace;
    line-height: 1.3;
    white-space: nowrap;
}
.id-upload-info { flex: 1; min-width: 0; }
.id-upload-title { font-size: 13px; font-weight: 800; color: var(--da3-fg1); margin-bottom: 4px; }
.id-upload-sub { font-size: 10.5px; color: var(--da3-fg3); font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.id-upload-sub strong {
    font-weight: 800; color: var(--da3-fg2);
    font-family: 'SF Mono', Consolas, monospace;
    background: var(--da3-card); border: 1px solid var(--da3-bd);
    padding: 1px 6px; border-radius: 4px; font-size: 10px;
}

/* Slug status */
.slug-row { display: flex; flex-direction: column; gap: 6px; direction: ltr !important; unicode-bidi: isolate; }
.slug-input-group { width: 100%; margin: 0 !important; direction: ltr; }
.slug-status {
    font-size: 11.5px; font-weight: 600; line-height: 1.35;
    color: var(--da3-fg2); padding: 0 2px;
    display: inline-flex; align-items: center; gap: 4px;
    direction: rtl; align-self: flex-start;
}
html[dir="ltr"] .slug-status { direction: ltr; }
.slug-status:empty { display: none; }

/* Currency advanced (collapsible) */
.currency-advanced { border-top: 1px dashed var(--da3-bd); padding-top: 14px; margin-top: 4px; }
.currency-advanced > summary {
    cursor: pointer; list-style: none;
    font-size: 12.5px; font-weight: 700;
    color: var(--da3-fg2);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 0;
}
.currency-advanced > summary::-webkit-details-marker { display: none; }
.currency-advanced[open] > summary { color: var(--da3-fg1); }

.currency-suggested-pill {
    display: inline-flex; align-items: center; gap: 4px;
    margin-inline-start: 8px;
    padding: 2px 8px;
    background: rgba(16,185,129,.10);
    color: #047857;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
}
body.dark-mode .currency-suggested-pill { color: #6ee7b7; }

/* ═══ Sticky save bar ═══ */
.bs-savebar {
    position: fixed;
    inset-inline: 0;
    bottom: 16px;
    z-index: 1040;
    display: flex; justify-content: center;
    padding: 0 14px;
    pointer-events: none;
    transform: translateY(20px);
    opacity: 0;
    transition: transform .28s ease, opacity .28s ease;
}
.bs-savebar.is-visible { pointer-events: auto; transform: translateY(0); opacity: 1; }
.bs-savebar-inner {
    pointer-events: auto;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px 10px 18px;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow), 0 8px 24px rgba(0,0,0,.18);
    min-width: 320px;
    max-width: 640px;
    width: 100%;
}
.bs-savebar-msg {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600;
    color: var(--da3-fg1);
    flex: 1; min-width: 0;
}
.bs-savebar-msg i { color: #f59e0b; }
.bs-savebar-actions { display: inline-flex; align-items: center; gap: 8px; }
.bs-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter .15s, background .15s, border-color .15s;
    line-height: 1;
    white-space: nowrap;
}
.bs-btn-primary {
    background: var(--da3-accent);
    color: #fff;
}
.bs-btn-primary:hover { filter: brightness(1.06); }
.bs-btn-primary:disabled { opacity: .65; cursor: wait; }
.bs-btn-ghost {
    background: transparent;
    color: var(--da3-fg2);
    border-color: var(--da3-bd);
}
.bs-btn-ghost:hover { background: var(--da3-bg2); color: var(--da3-fg1); }

@media (max-width: 640px) {
    .bs-savebar { bottom: 10px; padding: 0 8px; }
    .bs-savebar-inner { min-width: 0; padding: 8px 10px; }
    .bs-savebar-msg { font-size: 12.5px; }
    .bs-savebar-msg span { display: none; }
    .bs-btn { height: 36px; padding: 0 12px; }
}

/* ═══ Flash messages ═══ */
.bs-flash {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    border-radius: var(--da3-r);
    margin-bottom: 16px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-card);
    font-size: 13px;
    line-height: 1.45;
    color: var(--da3-fg1);
}
.bs-flash-ico { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.bs-flash-text { flex: 1; min-width: 0; }
.bs-flash-close {
    background: transparent; border: 0; color: var(--da3-fg3);
    font-size: 18px; cursor: pointer; padding: 0 4px;
}
.bs-flash-success { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.24); color: #065f46; }
.bs-flash-success .bs-flash-ico { color: #10b981; }
body.dark-mode .bs-flash-success { color: #6ee7b7; }
.bs-flash-error { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.24); color: #991b1b; }
.bs-flash-error .bs-flash-ico { color: #ef4444; }
body.dark-mode .bs-flash-error { color: #fca5a5; }

/* Mail password input — eye toggle */
.mail-pw-wrap { position: relative; display: flex; align-items: center; }
.mail-pw-input { padding-inline-end: 38px; flex: 1; }
.mail-pw-eye {
    position: absolute;
    inset-inline-end: 0; top: 0; bottom: 0;
    width: 38px;
    background: transparent; border: 0;
    color: var(--da3-fg3);
    cursor: pointer;
    transition: color .15s;
}
.mail-pw-eye:hover { color: var(--da3-fg1); }

/* Order settings store-closed empty state */
.bs-empty-hint {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px dashed var(--da3-bd);
    background: var(--da3-bg2);
    color: var(--da3-fg2);
    font-size: 12.5px;
    display: flex; align-items: center; gap: 10px;
    font-weight: 500;
}
.bs-empty-hint i { color: #f59e0b; font-size: 15px; flex-shrink: 0; }

/* Info box */
.bs-info-box {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px;
    background: var(--da3-abg);
    border: 1px solid var(--da3-accent);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--da3-fg2);
    line-height: 1.55;
}
.bs-info-box i { color: var(--da3-accent); margin-top: 2px; flex-shrink: 0; }

/* Settings form-group (legacy mail markup) */
.basic-settings-page .settings-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--da3-fg1);
    margin-bottom: 7px;
}

/* Sub-section divider within a card body */
.bs-subsection {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--da3-line);
}
.bs-subsection-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--da3-fg1);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 12px;
    display: inline-flex; align-items: center; gap: 8px;
}
.bs-subsection-title i { color: var(--da3-fg3); font-size: 12px; }

/* RTL fixes */
[dir="rtl"] .basic-settings-page .bs-hero-crumb i.fa-chevron-right::before { content: "\f053"; }


/* ═══════════════════════════════════════════════════════════════════════════════
 * PROFILE PAGE  (.pf-page)
 * ─────────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   PERSONAL PROFILE — full-width, dashboard da3-system
   ═══════════════════════════════════════════════════════════ */
.pf-page {
    --da3-card:   #1c1c1f;
    --da3-bd:     rgba(255,255,255,.055);
    --da3-bg2:    #111113;
    --da3-shadow: 0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-fg1:    #f4f4f5;
    --da3-fg2:    #a1a1aa;
    --da3-fg3:    #71717a;
    --da3-line:   rgba(255,255,255,.06);
    --da3-accent: #3b82f6;
    --da3-abg:    rgba(59,130,246,.12);

    width: 100%;
    margin: 0;
    padding-bottom: 24px;
}
body:not(.dark-mode) .pf-page {
    --da3-card:   #ffffff;
    --da3-bd:     #e4e4e7;
    --da3-bg2:    #f9f9fb;
    --da3-shadow: 0 1px 3px rgba(0,0,0,.07), 0 0 0 1px #e4e4e7;
    --da3-fg1:    #09090b;
    --da3-fg2:    #52525b;
    --da3-fg3:    #a1a1aa;
    --da3-line:   #f4f4f5;
}

/* ─── Topbar (Save lives here now) ──────────────────────── */
.pf-topbar {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 12px;
    box-shadow: var(--da3-shadow);
    padding: 14px 20px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.pf-topbar-id  { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.pf-topbar-ico {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.pf-topbar-title { font-size: 17px; font-weight: 700; color: var(--da3-fg1); margin: 0; }
.pf-topbar-sub   { font-size: 11.5px; color: var(--da3-fg3); margin: 2px 0 0; }

.pf-topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pf-state-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    background: rgba(16,185,129,.10);
    border: 1px solid rgba(16,185,129,.28);
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    color: #10b981;
    transition: all .2s;
}
.pf-state-pill .pf-state-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16,185,129,.18);
}
.pf-state-pill.is-dirty {
    background: rgba(245,158,11,.10);
    border-color: rgba(245,158,11,.28);
    color: #f59e0b;
}
.pf-state-pill.is-dirty .pf-state-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245,158,11,.18);
    animation: pfPulse 1.6s ease-in-out infinite;
}
@keyframes pfPulse {
    0%,100% { box-shadow: 0 0 0 2px rgba(245,158,11,.20); }
    50%     { box-shadow: 0 0 0 4px rgba(245,158,11,.08); }
}

.pf-save-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 22px;
    background: var(--da3-accent);
    border: 1.5px solid var(--da3-accent);
    color: #fff !important;
    border-radius: 9px;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: filter .15s, transform .15s;
    box-shadow: 0 2px 8px rgba(59,130,246,.28);
    white-space: nowrap;
}
.pf-save-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pf-save-btn:disabled { opacity: .7; cursor: not-allowed; transform: none; }

@media (max-width: 640px) {
    .pf-state-pill { display: none; }
    .pf-topbar-actions { width: 100%; }
    .pf-save-btn { width: 100%; justify-content: center; }
}

/* ─── Flash messages ──────────────────────────────────────── */
.pf-flash {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 13px; font-weight: 600;
    animation: pfFlashIn .35s ease;
}
@keyframes pfFlashIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.pf-flash.success { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.32); color: #10b981; }
.pf-flash.error   { background: rgba(239,68,68,.08);  border: 1px solid rgba(239,68,68,.32);  color: #ef4444; }

/* ─── Layout (full-width grid) ───────────────────────────── */
.pf-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 14px;
    align-items: start;
}
@media (max-width: 991px) { .pf-grid { grid-template-columns: 1fr; } }

/* ─── Card base ───────────────────────────────────────────── */
.pf-card {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 12px;
    box-shadow: var(--da3-shadow);
    overflow: hidden;
    margin-bottom: 14px;
}
.pf-card-head {
    padding: 12px 18px;
    border-bottom: 1px solid var(--da3-line);
    display: flex; align-items: center; gap: 10px;
}
.pf-card-head .pf-ico {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--card-accent-soft, var(--da3-abg));
    color: var(--card-accent, var(--da3-accent));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.pf-card-head h4 { font-size: 13px; font-weight: 700; color: var(--da3-fg1); margin: 0; flex: 1; }
.pf-card-head small { font-size: 11px; color: var(--da3-fg3); font-weight: 500; }
.pf-card-body { padding: 16px 18px; }

.pf-card.is-personal { --card-accent: #3b82f6; --card-accent-soft: rgba(59,130,246,.14); }
.pf-card.is-security { --card-accent: #ef4444; --card-accent-soft: rgba(239,68,68,.14); }
.pf-card.is-avatar   { --card-accent: #8b5cf6; --card-accent-soft: rgba(139,92,246,.14); }
.pf-card.is-otp      { --card-accent: #f59e0b; --card-accent-soft: rgba(245,158,11,.14); }
.pf-card.is-danger {
    --card-accent: #ef4444; --card-accent-soft: rgba(239,68,68,.14);
    border-color: rgba(239,68,68,.32);
}

/* ─── Form fields ─────────────────────────────────────────── */
.pf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .pf-grid-2 { grid-template-columns: 1fr; } }
.pf-field label {
    display: block;
    font-size: 12px; font-weight: 700;
    color: var(--da3-fg1);
    margin-bottom: 6px;
}
.pf-field label.is-required::after { content: ' *'; color: #ef4444; }
.pf-input,
.pf-field input[type="text"],
.pf-field input[type="email"],
.pf-field input[type="password"],
.pf-field input[type="tel"] {
    width: 100%;
    padding: 10px 14px;
    background: var(--da3-bg2);
    border: 1.5px solid var(--da3-bd);
    border-radius: 9px;
    color: var(--da3-fg1);
    font-size: 13px; font-weight: 500;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    font-family: inherit;
}
.pf-input:focus,
.pf-field input:focus {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.pf-field input::placeholder { color: var(--da3-fg3); }
.pf-input-group { display: flex; align-items: stretch; }
.pf-input-group .pf-input { border-radius: 9px 0 0 9px; }
html[dir="rtl"] .pf-input-group .pf-input { border-radius: 0 9px 9px 0; }
.pf-input-group .pf-input-btn {
    padding: 0 14px;
    background: var(--da3-bg2);
    border: 1.5px solid var(--da3-bd);
    border-inline-start: 0;
    color: var(--da3-fg2);
    cursor: pointer;
    border-radius: 0 9px 9px 0;
    transition: color .15s;
}
html[dir="rtl"] .pf-input-group .pf-input-btn { border-radius: 9px 0 0 9px; }
.pf-input-group .pf-input-btn:hover { color: var(--da3-accent); }
.pf-helper {
    font-size: 10.5px;
    color: var(--da3-fg3);
    margin-top: 5px;
    line-height: 1.5;
}
.pf-helper i { margin-inline-end: 3px; }
.pf-locked-note {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px;
    color: #f59e0b;
    background: rgba(245,158,11,.10);
    border: 1px solid rgba(245,158,11,.25);
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 700;
    margin-inline-start: 6px;
}

/* ─── Avatar card ─────────────────────────────────────────── */
.pf-avatar-wrap {
    width: 110px; height: 110px;
    border-radius: 14px;
    overflow: hidden;
    margin: 0 auto 14px;
    position: relative;
    background: var(--da3-bg2);
    border: 2px solid var(--da3-bd);
}
.pf-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-avatar-empty {
    display: flex; align-items: center; justify-content: center;
    height: 100%;
    color: var(--da3-fg3);
    font-size: 36px;
}
.pf-avatar-edit-btn {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,.65);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    opacity: .9;
}
.pf-user-name  { text-align: center; font-size: 15px; font-weight: 800; color: var(--da3-fg1); margin: 0 0 3px; }
.pf-user-email { text-align: center; font-size: 12px; color: var(--da3-fg3); margin: 0 0 14px; word-break: break-word; }
.pf-info-strip {
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    border-radius: 9px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.pf-info-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; padding: 4px 0; }
.pf-info-row + .pf-info-row { border-top: 1px dashed var(--da3-line); margin-top: 4px; padding-top: 8px; }
.pf-info-row span   { color: var(--da3-fg3); font-weight: 600; }
.pf-info-row strong { color: var(--da3-fg1); font-weight: 700; }

/* ── Account-overview blocks (grouped sections in sidebar) ── */
.pf-info-block {
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    text-align: start;
}
.pf-info-title {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    color: var(--da3-fg3);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--da3-bd);
}
.pf-info-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: none;
}
.pf-info-pill.ok      { background: rgba(16,185,129,.14);  color: #10b981; border: 1px solid rgba(16,185,129,.3); }
.pf-info-pill.warn    { background: rgba(245,158,11,.14);  color: #f59e0b; border: 1px solid rgba(245,158,11,.3); }
.pf-info-pill.danger  { background: rgba(239,68,68,.14);   color: #ef4444; border: 1px solid rgba(239,68,68,.3); }
.pf-info-pill.info    { background: rgba(59,130,246,.14);  color: #3b82f6; border: 1px solid rgba(59,130,246,.3); }

/* Inline text colors used in the info blocks */
.ok-text     { color: #10b981 !important; }
.warn-text   { color: #f59e0b !important; }
.danger-text { color: #ef4444 !important; }
.fg-muted    { color: var(--da3-fg3) !important; }

/* CTA link inside info blocks */
.pf-info-cta {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 10px;
    padding: 6px 12px;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1) !important;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: all .15s;
    width: 100%;
    justify-content: center;
}
.pf-info-cta:hover {
    border-color: var(--da3-accent);
    color: var(--da3-accent) !important;
    background: var(--da3-abg);
}

.pf-info-link {
    color: var(--da3-accent) !important;
    font-weight: 700;
    text-decoration: none;
    font-size: 11px;
}
.pf-info-link:hover { text-decoration: underline; }

/* Stats grid (Products / Orders / Customers) */
.pf-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.pf-stat {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 9px;
    padding: 10px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.pf-stat i {
    font-size: 13px;
    color: var(--da3-accent);
    margin-bottom: 2px;
}
.pf-stat strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--da3-fg1);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.pf-stat span {
    font-size: 9.5px;
    color: var(--da3-fg3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ─── OTP card ────────────────────────────────────────────── */
.pf-otp-display {
    display: flex; align-items: center; gap: 8px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.pf-otp-input {
    flex: 1;
    min-width: 140px;
    background: transparent !important;
    border: 0 !important;
    color: var(--da3-fg1) !important;
    font-family: 'SF Mono', Consolas, monospace !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 8px !important;
    text-align: center !important;
    padding: 4px 8px !important;
    outline: none !important;
    box-shadow: none !important;
    direction: ltr;
    transition: background .15s, box-shadow .15s;
}
.pf-otp-input::placeholder { color: var(--da3-fg3); opacity: .6; letter-spacing: 6px; }
.pf-otp-input:not([readonly]) {
    background: rgba(245,158,11,.06) !important;
    border-radius: 6px !important;
    box-shadow: 0 0 0 2px rgba(245,158,11,.22) !important;
}
.pf-otp-input:focus:not([readonly]) {
    background: rgba(245,158,11,.10) !important;
    box-shadow: 0 0 0 2px rgba(245,158,11,.4) !important;
}

.pf-otp-action {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
    border-radius: 8px;
    font-size: 11.5px; font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.pf-otp-action:hover {
    border-color: var(--da3-accent);
    color: var(--da3-accent);
    background: var(--da3-abg);
}
.pf-otp-action.is-active {
    background: rgba(245,158,11,.12);
    border-color: #f59e0b;
    color: #f59e0b;
}

/* Mode pill row */
.pf-otp-modes {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.pf-otp-mode-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    background: rgba(107,114,128,.10);
    border: 1px solid rgba(107,114,128,.25);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--da3-fg2);
    transition: all .2s;
}
.pf-otp-mode-pill.is-custom {
    background: rgba(245,158,11,.10);
    border-color: rgba(245,158,11,.30);
    color: #f59e0b;
}
.pf-otp-mode-pill.is-generated {
    background: rgba(59,130,246,.10);
    border-color: rgba(59,130,246,.30);
    color: var(--da3-accent);
}
.pf-otp-mode-hint {
    font-size: 11px;
    color: var(--da3-fg3);
    font-weight: 500;
}

/* ─── Danger zone ─────────────────────────────────────────── */
.pf-danger-zone {
    margin-top: 14px;
}
.pf-danger-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(239,68,68,.04);
    border: 1px dashed rgba(239,68,68,.32);
    border-radius: 10px;
}
.pf-danger-info { flex: 1; min-width: 0; }
.pf-danger-info strong { display: block; color: #ef4444; font-size: 13px; font-weight: 800; margin-bottom: 3px; }
.pf-danger-info span   { display: block; color: var(--da3-fg3); font-size: 11.5px; line-height: 1.5; }
.pf-danger-btn {
    background: rgba(239,68,68,.08);
    color: #ef4444;
    border: 1px solid #ef4444;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.pf-danger-btn:hover { background: #ef4444; color: #fff; }

/* ════════════ DELETE-ACCOUNT MODAL (dedicated, clean) ════════════ */
.pf-modal-delete {
    max-width: 480px !important;
    padding: 28px 28px 24px;
    text-align: center;
    position: relative;
}
.pf-modal-close {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    width: 32px; height: 32px;
    background: transparent;
    border: 1px solid var(--da3-bd);
    border-radius: 8px;
    color: var(--da3-fg3);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s;
    z-index: 2;
}
.pf-modal-close:hover {
    background: rgba(239,68,68,.10);
    border-color: #ef4444;
    color: #ef4444;
}
.pf-modal-delete-icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: rgba(239,68,68,.14);
    color: #ef4444;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px;
    margin: 0 auto 14px;
    animation: pfShake .55s ease-in-out;
}
@keyframes pfShake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-4px); }
    75%     { transform: translateX(4px); }
}
.pf-modal-delete-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--da3-fg1);
    margin: 0 0 8px;
    letter-spacing: -.2px;
}
.pf-modal-delete-warning {
    font-size: 13px;
    color: var(--da3-fg2);
    line-height: 1.6;
    margin: 0 0 18px;
}
.pf-modal-loss-list {
    list-style: none;
    margin: 0 0 22px;
    padding: 14px 16px;
    background: rgba(239,68,68,.05);
    border: 1px solid rgba(239,68,68,.18);
    border-radius: 11px;
    text-align: start;
}
.pf-modal-loss-list li {
    display: flex; align-items: center; gap: 9px;
    font-size: 12.5px;
    color: var(--da3-fg2);
    padding: 4px 0;
}
.pf-modal-loss-list li i {
    color: #ef4444;
    font-size: 11px;
    flex-shrink: 0;
}

.pf-modal-delete-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: start;
}
.pf-modal-field { display: flex; flex-direction: column; gap: 8px; }
.pf-modal-field label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--da3-fg1);
    margin: 0;
}
.pf-modal-field label i {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    width: 22px; height: 22px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}
.pf-modal-field label.is-required::after { content: ' *'; color: #ef4444; }
.pf-modal-field input {
    width: 100%;
    padding: 12px 16px;
    /* Stronger contrast against the modal card so the input is clearly visible */
    background: rgba(0, 0, 0, 0.35);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: var(--da3-fg1);
    font-size: 14px;
    font-weight: 600;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
    font-family: inherit;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}
body:not(.dark-mode) .pf-modal-field input {
    background: #f4f5f7;
    border-color: #d1d5db;
    color: #0f172a;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
.pf-modal-field input::placeholder { color: var(--da3-fg3); opacity: .7; }
.pf-modal-field input:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.18), inset 0 1px 2px rgba(0, 0, 0, 0.18);
    background: rgba(0, 0, 0, 0.45);
}
body:not(.dark-mode) .pf-modal-field input:focus {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(239,68,68,.15), inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
.pf-modal-phrase {
    background: rgba(239, 68, 68, 0.08);
    border: 1.5px dashed rgba(239, 68, 68, 0.5);
    color: #ef4444;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    user-select: all;
    cursor: copy;
    letter-spacing: .5px;
    transition: all .15s;
}
.pf-modal-phrase:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: #ef4444;
}
.pf-modal-delete-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.pf-modal-delete-actions .pf-modal-btn {
    flex: 1;
    justify-content: center;
    padding: 12px 20px;
    font-size: 13.5px;
    font-weight: 800;
    min-height: 44px;
}
/* Cancel button: visible neutral */
.pf-modal-delete-actions .pf-modal-btn.ghost {
    background: var(--da3-bg2);
    border-color: var(--da3-bd);
    color: var(--da3-fg1) !important;
}
.pf-modal-delete-actions .pf-modal-btn.ghost:hover {
    background: var(--da3-card);
    border-color: var(--da3-fg3);
    color: var(--da3-fg1) !important;
}
/* Delete button — vivid red when ready */
.pf-modal-delete-actions .pf-modal-btn.danger {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}
.pf-modal-delete-actions .pf-modal-btn.danger:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45);
    transform: translateY(-1px);
}
/* Disabled state — still readable, not invisible */
.pf-modal-delete-actions .pf-modal-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: saturate(.5);
    box-shadow: none !important;
    transform: none !important;
}

@media (max-width: 520px) {
    .pf-modal-delete { padding: 24px 18px 18px; }
    .pf-modal-delete-title { font-size: 17px; }
    .pf-modal-delete-actions { flex-direction: column-reverse; }
}

/* ─── Modal (OTP + Delete confirm) ────────────────────────── */
.pf-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pf-modal-backdrop.is-open { display: flex; animation: pfModalIn .25s ease; }
@keyframes pfModalIn { from { opacity: 0; } to { opacity: 1; } }
.pf-modal {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    width: 100%;
    max-width: 460px;
    overflow: hidden;
    animation: pfModalSlide .3s ease;
}
@keyframes pfModalSlide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.pf-modal-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--da3-line);
    display: flex; align-items: center; gap: 10px;
}
.pf-modal-head .ico {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.pf-modal-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--da3-fg1); flex: 1; }
.pf-modal-head .close {
    background: transparent; border: 0;
    font-size: 22px;
    color: var(--da3-fg3);
    cursor: pointer;
    line-height: 1;
}
.pf-modal-body { padding: 20px; }
.pf-modal-body p { font-size: 13px; color: var(--da3-fg2); line-height: 1.6; margin: 0 0 14px; }
.pf-modal-body p strong { color: var(--da3-fg1); }

/* OTP modal */
.pf-otp-inputs {
    display: flex; gap: 8px;
    direction: ltr; unicode-bidi: isolate;
    justify-content: center;
    margin: 16px 0 12px;
}
.pf-otp-inputs input {
    width: 44px; height: 52px;
    border: 1.5px solid var(--da3-bd);
    border-radius: 10px;
    background: var(--da3-bg2);
    color: var(--da3-fg1);
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    outline: none;
    transition: all .15s;
    font-family: 'SF Mono', Consolas, monospace;
}
.pf-otp-inputs input:focus {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.pf-modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--da3-line);
    display: flex; gap: 10px; justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.pf-modal-btn {
    padding: 9px 18px;
    border-radius: 9px;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: filter .15s, transform .15s;
    border: 1.5px solid;
    display: inline-flex; align-items: center; gap: 6px;
}
.pf-modal-btn.primary { background: var(--da3-accent); border-color: var(--da3-accent); color: #fff; }
.pf-modal-btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pf-modal-btn.danger  { background: #ef4444; border-color: #ef4444; color: #fff; }
.pf-modal-btn.danger:hover { filter: brightness(1.08); }
.pf-modal-btn.ghost   { background: transparent; border-color: var(--da3-bd); color: var(--da3-fg1); }
.pf-modal-btn.ghost:hover { border-color: var(--da3-accent); color: var(--da3-accent); background: var(--da3-abg); }
.pf-modal-resend {
    background: transparent;
    border: 0;
    color: var(--da3-accent);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * STOREFRONT BRANDING PAGE  (.sb-page)
 * ─────────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   STOREFRONT BRANDING — Dashboard-grade design (da3 system)
   ═══════════════════════════════════════════════════════════ */
.sb-page {
    --da3-card:    #1c1c1f;
    --da3-bd:      rgba(255,255,255,.055);
    --da3-bg2:     #111113;
    --da3-shadow:  0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-fg1:     #f4f4f5;
    --da3-fg2:     #a1a1aa;
    --da3-fg3:     #71717a;
    --da3-line:    rgba(255,255,255,.06);
    --da3-accent:  #3b82f6;
    --da3-abg:     rgba(59,130,246,.12);

    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 22px;
    max-width: 1320px;
    margin: 0 auto;
}
body:not(.dark-mode) .sb-page {
    --da3-card:    #ffffff;
    --da3-bd:      #e4e4e7;
    --da3-bg2:     #f9f9fb;
    --da3-shadow:  0 1px 3px rgba(0,0,0,.07), 0 0 0 1px #e4e4e7;
    --da3-fg1:     #09090b;
    --da3-fg2:     #52525b;
    --da3-fg3:     #a1a1aa;
    --da3-line:    #f4f4f5;
}

/* ═══ TOP BAR — Dashboard-style (clean, no gradient, no neon) ═══ */
.sb-topbar {
    grid-column: 1 / -1;
    background:    var(--da3-card);
    border:        1px solid var(--da3-bd);
    border-radius: 12px;
    box-shadow:    var(--da3-shadow);
    margin-bottom: 4px;
    overflow:      hidden;
}
.sb-topbar-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             14px;
    padding:         16px 20px 12px;
    flex-wrap:       wrap;
}
.sb-topbar-id     { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.sb-topbar-ico    {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.sb-topbar-info   { min-width: 0; }
.sb-topbar-title  {
    font-size: 17px; font-weight: 700;
    color: var(--da3-fg1);
    margin: 0 0 3px;
    letter-spacing: -.2px; line-height: 1.2;
}
.sb-topbar-sub {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--da3-fg3);
    flex-wrap: wrap; margin: 0;
}
.sb-topbar-sub .live-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600;
    color: #10b981;
    background: rgba(16,185,129,.1);
    border-radius: 20px;
    padding: 2px 9px 2px 7px;
}
.sb-topbar-sub .live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #10b981;
    animation: sbtPulse 2s ease-in-out infinite;
}
@keyframes sbtPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(1.35)} }
.sb-topbar-sub .dot-sep { opacity: .4; }

.sb-topbar-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Top bar dashboard buttons */
.sb-topbar-actions .sb-btn-x {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 12.5px; font-weight: 600;
    text-decoration: none;
    transition: filter .15s, transform .15s, background .15s, border-color .15s;
    border: 1px solid var(--da3-bd);
    cursor: pointer;
    background: var(--da3-card);
    color: var(--da3-fg1) !important;
    white-space: nowrap;
}
.sb-topbar-actions .sb-btn-x:hover {
    border-color: var(--da3-accent);
    color: var(--da3-accent) !important;
    background: var(--da3-abg);
}
.sb-topbar-actions .sb-btn-x.primary {
    background: var(--da3-accent);
    border-color: var(--da3-accent);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(59,130,246,.28);
    position: relative;
}
.sb-topbar-actions .sb-btn-x.primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.sb-topbar-actions .sb-btn-x.primary.is-dirty::after {
    content: '';
    position: absolute;
    top: -3px; inset-inline-end: -3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    border: 2px solid var(--da3-card);
    box-shadow: 0 0 0 1px rgba(245,158,11,.6);
    animation: sbBtnPulse 1.6s ease-in-out infinite;
}
@keyframes sbBtnPulse {
    0%,100% { transform: scale(1); opacity: 1; }
    50%     { transform: scale(1.15); opacity: .75; }
}

/* ═══ STRIP — like dashboard .da3-strip (quick brand stats) ═══ */
.sb-topbar-strip {
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--da3-line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sb-qs {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    flex: 1;
    min-width: 140px;
}
.sb-qs-sep { width: 1px; background: var(--da3-line); flex-shrink: 0; align-self: stretch; margin: 8px 0; }
.sb-qs-ico {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    background: var(--sb-ic-bg, var(--da3-abg));
    color: var(--sb-ic, var(--da3-accent));
    border: 1px solid var(--da3-bd);
}
.sb-qs-ico.is-swatch { border: 2px solid var(--da3-bd); }
.sb-qs-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--da3-fg1);
    line-height: 1.2;
    font-family: 'SF Mono', Consolas, monospace;
    letter-spacing: -.2px;
}
.sb-qs-val.normal-font { font-family: inherit; letter-spacing: 0; }
.sb-qs-lbl {
    font-size: 10.5px;
    color: var(--da3-fg3);
    font-weight: 600;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sb-qs-ring {
    width: 30px; height: 30px;
    flex-shrink: 0;
    position: relative;
}
.sb-qs-ring svg { transform: rotate(-90deg); }
.sb-qs-ring .r-bg   { stroke: var(--da3-bd); }
.sb-qs-ring .r-fill { stroke: var(--da3-accent); transition: stroke-dashoffset .6s ease; }
.sb-qs-ring .r-pct {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 9.5px; font-weight: 800;
    color: var(--da3-fg1);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .sb-topbar-row { padding: 14px 16px; }
    .sb-topbar-title { font-size: 15px; }
    .sb-qs { min-width: 120px; padding: 10px 14px; }
}

/* ── Paired-page strip (points to Identity Settings) ──────── */
.sb-pair-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.25);
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .15s;
    margin-bottom: 4px;
}
.sb-pair-strip:hover {
    background: rgba(59,130,246,.14);
    border-color: rgba(59,130,246,.45);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
}
.sb-pair-ico {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(59,130,246,.18);
    color: #60a5fa;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
body:not(.dark-mode) .sb-pair-ico { color: #2563eb; }
.sb-pair-text { flex: 1; min-width: 0; }
.sb-pair-text strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #f4f4f5;
    line-height: 1.3;
    margin-bottom: 2px;
}
body:not(.dark-mode) .sb-pair-text strong { color: #111827; }
.sb-pair-text span {
    display: block;
    font-size: 11.5px;
    color: #a1a1aa;
    line-height: 1.3;
}
body:not(.dark-mode) .sb-pair-text span { color: #6b7280; }
.sb-pair-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid #3b82f6;
    color: #60a5fa;
    background: transparent;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
body:not(.dark-mode) .sb-pair-cta { color: #2563eb; }
.sb-pair-strip:hover .sb-pair-cta {
    background: #3b82f6;
    color: #fff !important;
}
/* Legacy hero — hidden, topbar takes over */
.sb-hero { display: none !important; }

/* ═══ CARD — clean, no neon, dark/light parity ═══ */
.sb-card {
    --card-accent: #3b82f6;
    --card-accent-soft: rgba(59,130,246,.14);

    position: relative;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: var(--da3-shadow);
    transition: border-color .15s ease;
}

/* Very thin accent stripe — no glow */
.sb-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1.5px;
    background: var(--card-accent);
    opacity: .55;
    pointer-events: none;
    z-index: 1;
}

.sb-card:hover {
    /* Intentionally no change — clean static design */
}

/* Per-card accent rotation (cards in order: basics / colors / typography / language / logo) */
.sb-card:nth-of-type(1) { --card-accent: #3b82f6; --card-accent-soft: rgba(59,130,246,.14); }
.sb-card:nth-of-type(2) { --card-accent: #ec4899; --card-accent-soft: rgba(236,72,153,.14); }
.sb-card:nth-of-type(3) { --card-accent: #f59e0b; --card-accent-soft: rgba(245,158,11,.14); }
.sb-card:nth-of-type(4) { --card-accent: #10b981; --card-accent-soft: rgba(16,185,129,.14); }
.sb-card:nth-of-type(5) { --card-accent: #8b5cf6; --card-accent-soft: rgba(139,92,246,.14); }

/* Card header — compact, no colored tint */
.sb-card-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--da3-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.sb-card-head h3 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--da3-fg1);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -.1px;
    flex: 1;
    min-width: 0;
}
.sb-card-head h3 i {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--card-accent-soft);
    color: var(--card-accent) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
/* Hide the long subtitle on the right — keeps header short */
.sb-card-head small { display: none; }

.sb-card-body {
    padding: 16px 18px;
}

/* ── Fields ── */
.sb-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.sb-grid-full { grid-column: 1 / -1; }
.sb-field label {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .78rem; font-weight: 800;
    color: var(--da3-fg1);
    margin-bottom: 7px;
}
.sb-field label .opt { font-size: 11px; color: var(--da3-fg3); font-weight: 600; }
.sb-field input[type="text"],
.sb-field input[type="email"],
.sb-field input[type="url"],
.sb-field input[type="tel"],
.sb-field textarea,
.sb-field select {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--da3-bd);
    border-radius: 10px;
    background: var(--da3-bg2);
    color: var(--da3-fg1);
    font-size: .88rem; font-weight: 600;
    font-family: inherit;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.sb-field input:focus, .sb-field textarea:focus, .sb-field select:focus {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}
.sb-field textarea { min-height: 88px; resize: vertical; line-height: 1.6; }

/* ── Color picker ── */
.sb-color {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 6px 6px 12px;
    border: 1.5px solid var(--da3-bd);
    border-radius: 12px;
    background: var(--da3-bg2);
}
html[dir="rtl"] .sb-color { padding: 6px 12px 6px 6px; }
.sb-color input[type="color"] {
    width: 50px; height: 40px;
    border: 0;
    
    cursor: pointer;
    background: transparent;
    padding: 0;
}
.sb-color input[type="text"] {
    border: 0; background: transparent; padding: 0 4px;
    color: var(--da3-fg1); font-weight: 700;
    font-family: 'SF Mono', monospace;
    outline: none;
    flex: 1; min-width: 0;
    text-transform: uppercase;
}
.sb-color-presets {
    display: flex; gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.sb-preset {
    width: 26px; height: 26px;
    border-radius: 8px;
    border: 2px solid var(--da3-card);
    box-shadow: 0 0 0 1px var(--da3-bd);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.sb-preset:hover { transform: scale(1.1); }
.sb-preset.is-selected { box-shadow: 0 0 0 2px var(--da3-accent); }

/* ── Font live preview ── */
.sb-font-live {
    margin-bottom: 16px;
    padding: 18px 20px;
    border-radius: 11px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-bg2);
    transition: font-family .15s;
}
.sb-font-live-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--da3-bd);
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
.sb-font-live-tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--da3-fg3);
    text-transform: uppercase;
    letter-spacing: .08em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.sb-font-live-tag::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16,185,129,.2);
}
.sb-font-live-name {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--da3-fg2);
    font-family: 'SF Mono', Consolas, monospace !important;
    background: var(--da3-card);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid var(--da3-bd);
}
.sb-font-live-row { margin-bottom: 8px; }
.sb-font-live-row:last-of-type { margin-bottom: 0; }
/* These MUST inherit from .sb-font-live so JS-changed font-family propagates */
.sb-font-live-h1,
.sb-font-live-h2,
.sb-font-live-body {
    font-family: inherit !important;
    display: block;
}
.sb-font-live-h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--da3-fg1);
    line-height: 1.2;
    letter-spacing: -.3px;
}
.sb-font-live-h2 {
    font-size: 15px;
    font-weight: 600;
    color: var(--da3-fg2);
    line-height: 1.3;
}
.sb-font-live-body {
    font-size: 13px;
    color: var(--da3-fg2);
    line-height: 1.6;
}
.sb-font-live-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--da3-bd);
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
.sb-font-live-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11px;
    color: var(--da3-fg3);
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 6px;
    padding: 3px 8px;
}
.sb-font-live-chip strong { color: var(--da3-fg1); font-size: 12px; }

/* ── Font selector ── */
.sb-fonts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.sb-font-card {
    cursor: pointer;
    padding: 14px;
    border: 1.5px solid var(--da3-bd);
    border-radius: 12px;
    background: var(--da3-bg2);
    transition: all .15s;
    position: relative;
}
.sb-font-card:hover { border-color: var(--da3-accent); }
.sb-font-card.is-selected {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
    background: rgba(59,130,246,.04);
}
.sb-font-card.is-selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; top: 8px;
    color: var(--da3-accent);
    font-size: 10px;
}
html[dir="rtl"] .sb-font-card.is-selected::after { left: 10px; }
html[dir="ltr"] .sb-font-card.is-selected::after { right: 10px; }
.sb-font-name {
    font-size: .76rem; font-weight: 800;
    color: var(--da3-fg3);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}
.sb-font-preview { font-size: 1.2rem; font-weight: 700; color: var(--da3-fg1); line-height: 1.2; }

/* ── Language toggle ── */
.sb-lang { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sb-lang-btn {
    cursor: pointer;
    padding: 16px;
    border: 1.5px solid var(--da3-bd);
    border-radius: 12px;
    background: var(--da3-bg2);
    text-align: center;
    transition: all .15s;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.sb-lang-btn:hover { border-color: var(--da3-accent); }
.sb-lang-btn.is-selected {
    border-color: var(--da3-accent);
    background: rgba(59,130,246,.06);
    box-shadow: 0 0 0 3px rgba(59,130,246,.08);
}
.sb-lang-flag { font-size: 1.6rem; }
.sb-lang-info { text-align: start; }
.sb-lang-info strong { display: block; font-size: .95rem; font-weight: 800; color: var(--da3-fg1); }
.sb-lang-info small  { font-size: 11px; color: var(--da3-fg3); font-weight: 600; }

/* ── Logo upload ── */
.sb-upload {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1.5px dashed var(--da3-bd);
    border-radius: 12px;
    background: var(--da3-bg2);
    cursor: pointer;
    position: relative;
    transition: border-color .2s, background .2s;
}
.sb-upload:hover { border-color: var(--da3-accent); background: rgba(59,130,246,.04); }
.sb-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sb-upload-preview {
    width: 64px; height: 64px;
    border-radius: 10px;
    background: var(--da3-card);
    background-size: cover; background-position: center;
    border: 1px solid var(--da3-line);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--da3-fg3);
    font-size: 18px;
}
.sb-upload-info { flex: 1; min-width: 0; }
.sb-upload-title { font-size: .88rem; font-weight: 800; color: var(--da3-fg1); margin-bottom: 2px; }
.sb-upload-sub { font-size: 11.5px; color: var(--da3-fg3); font-weight: 600; }

/* ═══════ PREVIEW (sticky side card) ═══════ */
.sb-preview-wrap {
    position: sticky; top: 80px;
    align-self: flex-start;
}
.sb-preview {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 16px;
    overflow: hidden;
}
.sb-preview-head {
    background: linear-gradient(135deg, var(--p-color, #6366f1), var(--s-color, #1f2937));
    color: #fff;
    padding: 20px;
    font-family: var(--store-font, inherit);
}
.sb-preview-head-bar {
    display: flex; gap: 5px;
    margin-bottom: 14px;
}
.sb-preview-head-bar span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
}
.sb-preview-head h4 {
    font-size: 1.15rem;
    font-weight: 900;
    margin: 0 0 4px;
    letter-spacing: -.02em;
}
.sb-preview-head p { font-size: 12px; opacity: .85; margin: 0; }

.sb-preview-body {
    padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
    font-family: var(--store-font, inherit);
}
.sb-preview-product {
    display: flex; gap: 10px;
    padding: 10px;
    background: var(--da3-bg2);
    border-radius: 10px;
    border: 1px solid var(--da3-line);
}
.sb-preview-product-img {
    width: 50px; height: 50px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--p-color, #6366f1), var(--s-color, #1f2937));
    flex-shrink: 0;
}
.sb-preview-product-info { flex: 1; min-width: 0; }
.sb-preview-product-name { font-size: .8rem; font-weight: 700; color: var(--da3-fg1); margin-bottom: 2px; }
.sb-preview-product-price { font-size: .88rem; font-weight: 800; color: var(--p-color, #6366f1); }
.sb-preview-btn {
    background: var(--p-color, #6366f1);
    color: #fff;
    padding: 10px;
    border-radius: 9px;
    text-align: center;
    font-size: 12.5px; font-weight: 800;
    margin-top: 6px;
}

.sb-preview-note {
    padding: 10px 16px;
    background: var(--da3-bg2);
    border-top: 1px solid var(--da3-line);
    font-size: 11px;
    color: var(--da3-fg3);
    text-align: center;
    font-weight: 600;
}

/* ═══════ Sticky save bar with dirty-state ═══════ */
.sb-actions {
    position: sticky;
    bottom: 14px;
    z-index: 10;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    box-shadow: var(--da3-shadow), 0 -8px 28px rgba(0,0,0,.25);
    border-radius: 12px;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color .2s, box-shadow .2s;
}
.sb-actions-status {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.sb-actions-status .sf-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,.18);
    flex-shrink: 0;
    transition: background .2s, box-shadow .2s;
}
.sb-actions-status .sf-text {
    font-size: 13px;
    color: var(--da3-fg2);
    font-weight: 600;
}
.sb-actions-status .sf-text strong {
    color: var(--da3-fg1);
    font-weight: 700;
    display: block;
    margin-bottom: 1px;
}
.sb-actions-status .sf-text small {
    font-size: 11px;
    color: var(--da3-fg3);
    font-weight: 500;
    display: block;
}
.sb-actions.is-dirty {
    border-color: rgba(245,158,11,.45);
    box-shadow: var(--da3-shadow), 0 -8px 28px rgba(245,158,11,.18);
}
.sb-actions.is-dirty .sf-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,.22);
    animation: sbPulse 1.6s ease-in-out infinite;
}
@keyframes sbPulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(245,158,11,.22); }
    50%     { box-shadow: 0 0 0 6px rgba(245,158,11,.10); }
}

.sb-btn-group { display: flex; gap: 8px; }
.sb-btn {
    height: 42px; padding: 0 20px;
    border-radius: 10px;
    border: 1.5px solid var(--da3-bd);
    background: var(--da3-bg2);
    color: var(--da3-fg2);
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    font-family: inherit;
    transition: filter .15s, transform .15s, border-color .15s;
}
.sb-btn:hover { border-color: var(--da3-accent); color: var(--da3-accent); }
.sb-btn-primary {
    background: var(--da3-accent) !important;
    border-color: var(--da3-accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(59,130,246,.28);
}
.sb-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff !important; }

/* ── Light/Dark mode handled entirely via --da3-* tokens above ──
   No manual overrides needed; just a couple of selected-state polishes */
body:not(.dark-mode) .sb-font-card.is-selected,
body:not(.dark-mode) .sb-lang-btn.is-selected { background: rgba(59,130,246,.06); }
body.dark-mode .sb-font-card.is-selected,
body.dark-mode .sb-lang-btn.is-selected { background: rgba(59,130,246,.10); }

/* Input/select placeholder color in both modes */
.sb-field input::placeholder,
.sb-field textarea::placeholder { color: var(--da3-fg3); }

@media (max-width: 1100px) {
    .sb-page { grid-template-columns: 1fr; }
    .sb-preview-wrap { position: static; }
}
@media (max-width: 640px) {
    .sb-grid { grid-template-columns: 1fr; }
    .sb-lang { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * STOREFRONT DESIGN PARTIAL  (.sd-*)
 * ─────────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   STOREFRONT DESIGN PARTIAL — uses --da3-* tokens from parent
   ═══════════════════════════════════════════════════════════ */

/* ── Fields layout ── */
.sd-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.sd-grid-full { grid-column: 1 / -1; }
@media (max-width: 640px) { .sd-grid { grid-template-columns: 1fr; } }

.sd-field { display: flex; flex-direction: column; }
.sd-field label {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12px; font-weight: 700;
    color: var(--da3-fg1);
    margin-bottom: 7px;
}
.sd-field label .sd-opt { font-size: 10.5px; color: var(--da3-fg3); font-weight: 600; }

/* ── Color picker ── */
.sd-color {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 6px 5px 11px;
    border: 1.5px solid var(--da3-bd);
    border-radius: 10px;
    background: var(--da3-bg2);
}
html[dir="rtl"] .sd-color { padding: 5px 11px 5px 6px; }
.sd-color input[type="color"] {
    width: 350px; height: 36px;
    border: 0;
   
    cursor: pointer;
    background: transparent;
    padding: 0;
}
.sd-color input[type="text"] {
    border: 0; background: transparent; padding: 0 4px;
    color: var(--da3-fg1); font-weight: 700;
    font-family: 'SF Mono', Consolas, monospace;
    outline: none;
    flex: 1; min-width: 0;
    text-transform: uppercase;
    font-size: 12.5px;
}
.sd-presets {
    display: flex; gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.sd-preset {
    width: 24px; height: 24px;
    border-radius: 7px;
    border: 2px solid var(--da3-card);
    box-shadow: 0 0 0 1px var(--da3-bd);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.sd-preset:hover { transform: scale(1.12); }
.sd-preset.is-selected { box-shadow: 0 0 0 2px var(--da3-accent); }

/* ── Font live preview strip (single row) ── */
.sd-font-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-bg2);
    margin-bottom: 16px;
    transition: font-family .2s ease;
    min-height: 60px;
    flex-wrap: wrap;
}
.sd-fstrip-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
.sd-fstrip-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2.5px rgba(16,185,129,.22);
    flex-shrink: 0;
}
.sd-fstrip-label {
    font-size: 10px; font-weight: 700;
    color: var(--da3-fg3);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.sd-fstrip-name {
    font-size: 10.5px; font-weight: 700;
    color: var(--da3-fg2);
    font-family: 'SF Mono', Consolas, monospace !important;
    background: var(--da3-card);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid var(--da3-bd);
    white-space: nowrap;
}
.sd-fstrip-divider {
    width: 1px; height: 24px;
    background: var(--da3-bd);
    flex-shrink: 0;
}
.sd-fstrip-text {
    flex: 1; min-width: 0;
    /* font-family inherited from .sd-font-strip */
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sd-fstrip-h {
    font-size: 17px; font-weight: 800;
    color: var(--da3-fg1);
    line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sd-fstrip-sub {
    font-size: 11px;
    color: var(--da3-fg2);
    font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sd-fstrip-weights {
    display: flex; gap: 6px;
    flex-shrink: 0;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
.sd-fstrip-w {
    font-size: 10px; color: var(--da3-fg3);
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 6px;
    padding: 3px 7px;
    white-space: nowrap;
}
.sd-fstrip-w strong { color: var(--da3-fg1); }
@media (max-width: 640px) {
    .sd-fstrip-weights { display: none; }
    .sd-fstrip-divider  { display: none; }
}

/* ── Font group (label + pill row) ── */
.sd-font-group {
    margin-bottom: 12px;
}
.sd-font-group:last-child { margin-bottom: 0; }
.sd-font-group-label {
    font-size: 10px;
    font-weight: 800;
    color: var(--da3-fg3);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.sd-font-group-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--da3-line);
}

/* ── Font pills row ── */
.sd-font-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sd-font-pill {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    border: 1.5px solid var(--da3-bd);
    border-radius: 10px;
    background: var(--da3-bg2);
    transition: border-color .15s, background .15s;
    position: relative;
    min-width: 0;
    user-select: none;
}
.sd-font-pill:hover { border-color: var(--da3-accent); }
.sd-font-pill.is-selected {
    border-color: var(--da3-accent);
    background: var(--da3-abg);
    box-shadow: 0 0 0 3px var(--da3-abg);
}
.sd-font-pill-label {
    font-size: 9px; font-weight: 800;
    color: var(--da3-fg3);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    line-height: 1;
}
.sd-font-pill.is-selected .sd-font-pill-label { color: var(--da3-accent); }
.sd-font-pill-text {
    font-size: 15px; font-weight: 700;
    color: var(--da3-fg1);
    line-height: 1.2;
    white-space: nowrap;
}
.sd-font-pill-check {
    position: absolute; top: 5px; inset-inline-end: 6px;
    font-size: 9px; color: var(--da3-accent);
    opacity: 0; transition: opacity .12s;
}
.sd-font-pill.is-selected .sd-font-pill-check { opacity: 1; }
@media (max-width: 640px) {
    .sd-font-pills { gap: 6px; }
    .sd-font-pill  { padding: 8px 12px; }
}

/* ── Language toggle ── */
/* Layout: first 2 options side-by-side, the "multi/both" option full-width below */
.sd-lang { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sd-lang .sd-lang-btn.is-multi { grid-column: 1 / -1; }
@media (max-width: 480px) { .sd-lang { grid-template-columns: 1fr; } .sd-lang .sd-lang-btn.is-multi { grid-column: auto; } }
.sd-lang-btn.is-multi .sd-lang-flag {
    display: inline-flex; align-items: center; gap: 2px;
}
.sd-lang-multi-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}
.sd-lang-btn {
    cursor: pointer;
    padding: 14px;
    border: 1.5px solid var(--da3-bd);
    border-radius: 10px;
    background: var(--da3-bg2);
    transition: all .15s;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.sd-lang-btn:hover { border-color: var(--da3-accent); }
.sd-lang-btn.is-selected {
    border-color: var(--da3-accent);
    background: var(--da3-abg);
}
.sd-lang-flag { font-size: 1.5rem; }
.sd-lang-info { text-align: start; }
.sd-lang-info strong { display: block; font-size: 13px; font-weight: 800; color: var(--da3-fg1); }
.sd-lang-info small  { font-size: 10.5px; color: var(--da3-fg3); font-weight: 600; }

/* ── Logo / Favicon upload ── */
.sd-upload {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    border: 1.5px dashed var(--da3-bd);
    border-radius: 10px;
    background: var(--da3-bg2);
    cursor: pointer;
    position: relative;
    transition: border-color .2s, background .2s;
}
.sd-upload:hover { border-color: var(--da3-accent); background: var(--da3-abg); }
.sd-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sd-upload-preview {
    width: 56px; height: 56px;
    border-radius: 9px;
    background: var(--da3-card);
    background-size: cover; background-position: center;
    border: 1px solid var(--da3-bd);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--da3-fg3);
    font-size: 18px;
}
.sd-upload-info { flex: 1; min-width: 0; }
.sd-upload-title { font-size: 12.5px; font-weight: 800; color: var(--da3-fg1); margin-bottom: 2px; }
.sd-upload-sub { font-size: 10.5px; color: var(--da3-fg3); font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════
   TEMPLATES — Premium marketplace card design
   Inspired by: Shopify Theme Store, Linear, ThemeForest
   Tokens: --da3-* (already in use across the dashboard)
   A11y:   Radio inputs are visually hidden but keyboard focusable
   ════════════════════════════════════════════════════════════════════ */
.sd-tpl-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 18px;
    flex-wrap: wrap;
}
.sd-tpl-section-head .sd-tpl-hint {
    flex: 1;
    min-width: 260px;
    font-size: 13px;
    color: var(--da3-fg2);
    line-height: 1.6;
    margin: 0;
}
.sd-tpl-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--da3-fg3);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 5px 11px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    border-radius: 999px;
    white-space: nowrap;
}

.sd-tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

/* ── Card ──────────────────────────────────────────────────────────── */
.sd-tpl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    margin: 0;
    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        border-color .25s ease,
        box-shadow  .35s cubic-bezier(.16,1,.3,1);
    isolation: isolate;
}
.sd-tpl-card:hover {
    transform: translateY(-4px);
    border-color: var(--da3-bdr);
    box-shadow: 0 18px 38px -10px rgba(0,0,0,.35);
}
body:not(.dark-mode) .sd-tpl-card:hover {
    box-shadow: 0 18px 38px -12px rgba(15,23,42,.18);
}

/* Keyboard focus — visible & matches accent */
.sd-tpl-card:focus-within {
    outline: none;
    border-color: var(--da3-accent);
    box-shadow:
        0 0 0 3px var(--da3-abg),
        0 18px 38px -10px rgba(0,0,0,.35);
}

/* Active state — premium emphasis */
.sd-tpl-card.is-active {
    border-color: var(--da3-accent);
    box-shadow:
        0 0 0 4px var(--da3-abg),
        0 18px 38px -10px rgba(0,0,0,.35);
}
body:not(.dark-mode) .sd-tpl-card.is-active {
    box-shadow:
        0 0 0 4px var(--da3-abg),
        0 18px 38px -12px rgba(15,23,42,.15);
}

/* Visually hidden radio (still focusable) */
.sd-tpl-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
}

/* ── Preview window ─────────────────────────────────────────────────── */
.sd-tpl-preview {
    position: relative;
    aspect-ratio: 16 / 10;
    background:
        linear-gradient(135deg, rgba(255,255,255,.04), transparent),
        var(--da3-bg2);
    overflow: hidden;
    border-bottom: 1px solid var(--da3-line);
}

/* Browser-like chrome bar — makes the preview look like a real site */
.sd-tpl-chrome {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 22px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}
.sd-tpl-chrome span {
    width: 7px; height: 7px;
    border-radius: 50%;
    opacity: .85;
}
.sd-tpl-chrome span:nth-child(1) { background: #ef4444; }
.sd-tpl-chrome span:nth-child(2) { background: #f59e0b; }
.sd-tpl-chrome span:nth-child(3) { background: #10b981; }

.sd-tpl-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.sd-tpl-card:hover .sd-tpl-preview img { transform: scale(1.06); }

/* Hover dimming layer (only for NON-active cards — invites action) */
.sd-tpl-card:not(.is-active) .sd-tpl-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.55) 100%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
    z-index: 1;
}
.sd-tpl-card:not(.is-active):hover .sd-tpl-preview::after { opacity: 1; }

/* Floating CTA on hover — modern marketplace feel */
.sd-tpl-cta {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%) scale(.9);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: rgba(255,255,255,.97);
    color: #0f172a;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .01em;
    opacity: 0;
    transition:
        opacity .28s cubic-bezier(.16,1,.3,1),
        transform .35s cubic-bezier(.16,1,.3,1);
    pointer-events: none;
    z-index: 3;
    box-shadow:
        0 8px 24px rgba(0,0,0,.35),
        inset 0 -1px 0 rgba(0,0,0,.06);
    white-space: nowrap;
}
.sd-tpl-cta i { font-size: 10px; }
.sd-tpl-card:not(.is-active):hover .sd-tpl-cta {
    opacity: 1;
    transform: translate(-50%, 50%) scale(1);
}
.sd-tpl-card.is-active .sd-tpl-cta { display: none; }

/* Active checkmark — animated bouncing circle in the top corner */
.sd-tpl-check {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    z-index: 3;
    box-shadow:
        0 6px 18px rgba(16,185,129,.55),
        inset 0 1px 0 rgba(255,255,255,.25);
    transform: scale(0);
    transition: transform .4s cubic-bezier(.68,-.55,.27,1.55);
}
.sd-tpl-card.is-active .sd-tpl-check { transform: scale(1); }

/* Active tint on the preview — subtle green wash */
.sd-tpl-card.is-active .sd-tpl-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16,185,129,.0) 50%, rgba(16,185,129,.15) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ── Body ──────────────────────────────────────────────────────────── */
.sd-tpl-body {
    padding: 14px 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.sd-tpl-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--da3-fg1);
    line-height: 1.3;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.sd-tpl-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sd-tpl-cat {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--da3-fg3);
    padding: 3px 9px;
    background: var(--da3-bg2);
    border-radius: 999px;
}
.sd-tpl-card.is-active .sd-tpl-cat {
    color: var(--da3-accent);
    background: var(--da3-abg);
}
.sd-tpl-free {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #10b981;
    padding: 3px 9px;
    background: rgba(16,185,129,.12);
    border-radius: 999px;
}

/* ── Footer (status / call-to-action row) ──────────────────────────── */
.sd-tpl-footer {
    padding: 11px 16px;
    background: var(--da3-bg2);
    border-top: 1px solid var(--da3-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    min-height: 40px;
}
.sd-tpl-footer-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--da3-fg3);
    font-weight: 600;
}
.sd-tpl-footer-status i { font-size: 10px; }
.sd-tpl-card.is-active .sd-tpl-footer-status {
    color: #10b981;
    font-weight: 800;
}
.sd-tpl-footer-arrow {
    display: inline-flex;
    align-items: center;
    color: var(--da3-accent);
    font-size: 12px;
    font-weight: 800;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .25s, transform .25s;
}
html[dir="rtl"] .sd-tpl-footer-arrow { transform: translateX(4px); }
.sd-tpl-card:not(.is-active):hover .sd-tpl-footer-arrow {
    opacity: 1;
    transform: translateX(0);
}
.sd-tpl-footer-arrow i { transition: transform .25s; }
html[dir="rtl"] .sd-tpl-footer-arrow i { transform: scaleX(-1); }

/* Responsive */
@media (max-width: 640px) {
    .sd-tpl-grid { gap: 14px; grid-template-columns: 1fr; }
}

/* Reduced motion — disable transforms, keep only state changes */
@media (prefers-reduced-motion: reduce) {
    .sd-tpl-card,
    .sd-tpl-card *,
    .sd-tpl-preview img,
    .sd-tpl-cta,
    .sd-tpl-check {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
    .sd-tpl-card:hover { transform: none; }
    .sd-tpl-card:hover .sd-tpl-preview img { transform: none; }
}

/* ── Description textarea ── */
.sd-desc {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--da3-bd) !important;
    border-radius: 10px !important;
    background: var(--da3-bg2) !important;
    color: var(--da3-fg1) !important;
    font-size: 13px;
    font-weight: 500;
    min-height: 90px;
    resize: vertical;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.sd-desc:focus {
    border-color: var(--da3-accent) !important;
    box-shadow: 0 0 0 3px var(--da3-abg) !important;
}
.sd-desc::placeholder { color: var(--da3-fg3); }


/* ─── Step badge + subtitle in each card header ─────────── */
.basic-settings-page .settings-card-header .sd-step-no {
    width: 22px; height: 22px;
    border-radius: 999px;
    background: var(--card-accent-soft);
    color: var(--card-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
    margin-inline-start: auto;
    flex-shrink: 0;
}
.basic-settings-page .settings-card-header .sd-head-wrap {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
}
.basic-settings-page .settings-card-header .sd-head-wrap h4 {
    line-height: 1.25;
}
.basic-settings-page .settings-card-header .sd-head-wrap small {
    font-size: 11px;
    color: var(--da3-fg3);
    font-weight: 500;
    line-height: 1.35;
}
/* The locked OPTION — grayed, no pointer, can't select */
.sd-lang-btn.is-addon-locked {
    opacity: .45;
    pointer-events: none;
    cursor: default;
    position: relative;
    filter: grayscale(.4);
}
/* Lock badge sitting in the top-end corner of the locked option */
.sd-lang-btn.is-addon-locked .sd-opt-lock {
    position: absolute;
    top: 8px;
    inset-inline-end: 10px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    background: rgba(124,58,237,.14);
    color: #a78bfa;
    font-size: 10px; font-weight: 800;
    border-radius: 999px;
    border: 1px solid rgba(124,58,237,.22);
    letter-spacing: .2px;
    pointer-events: auto;          /* allow link-click on the badge itself */
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s;
    line-height: 1.4;
}
.sd-lang-btn.is-addon-locked .sd-opt-lock:hover {
    background: rgba(124,58,237,.25);
    color: #c4b5fd;
}
.sd-lang-btn.is-addon-locked .sd-opt-lock i { font-size: 9px; }


/* ═══════════════════════════════════════════════════════════════════════════════
 * SOCIAL MEDIA PAGE  (.smp)
 * ─────────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════
   SETTINGS / SOCIAL-MEDIA PAGE — da3 tokens + tabs
═══════════════════════════════════════════════════════ */
.smp {
    --c:      #1c1c1f;
    --bd:     rgba(255,255,255,.06);
    --bg2:    #111113;
    --fg1:    #f4f4f5;
    --fg2:    #a1a1aa;
    --fg3:    #71717a;
    --line:   rgba(255,255,255,.06);
    --hover:  rgba(255,255,255,.03);
    --r:      14px;
    --accent: #3b82f6;
    --abg:    rgba(59,130,246,.12);
    max-width: 1100px; margin: 0 auto;
}
body:not(.dark-mode) .smp {
    --c:      #ffffff;
    --bd:     #e4e4e7;
    --bg2:    #f9f9fb;
    --fg1:    #09090b;
    --fg2:    #52525b;
    --fg3:    #a1a1aa;
    --line:   #f4f4f5;
    --hover:  rgba(0,0,0,.02);
}

/* ── Hero ── */
.smp-hero {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 22px;
    border-radius: 16px; border: 1px solid var(--bd);
    background: radial-gradient(700px 160px at 0% 0%, rgba(59,130,246,.08), transparent 60%), var(--bg2);
    margin-bottom: 20px;
}
.smp-hero-ico {
    width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 18px; box-shadow: 0 8px 20px -6px rgba(59,130,246,.45);
}
.smp-hero h1 { font-size: 18px; font-weight: 900; color: var(--fg1); margin: 0 0 3px; letter-spacing: -.02em; }
.smp-hero p  { font-size: 12px; color: var(--fg3); margin: 0; }

/* ── Tab bar ── */
.smp-tabs {
    display: flex; gap: 4px;
    background: var(--bg2);
    border: 1px solid var(--bd);
    border-radius: 13px;
    padding: 5px;
    margin-bottom: 20px;
    width: fit-content;
}
.smp-tab {
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 18px;
    border-radius: 9px; border: none; background: none;
    color: var(--fg3); font-size: 13px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: all .15s;
}
.smp-tab i { font-size: 13px; }
.smp-tab:hover { color: var(--fg1); background: var(--hover); }
.smp-tab.active {
    background: var(--c); color: var(--accent);
    box-shadow: 0 1px 4px rgba(0,0,0,.12), 0 0 0 1px var(--bd);
}

/* ── Card base ── */
.smp-card {
    background: var(--c); border: 1px solid var(--bd);
    border-radius: var(--r); overflow: hidden;
}
.smp-card-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px; border-bottom: 1px solid var(--line);
}
.smp-card-head-ico {
    width: 32px; height: 32px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.smp-card-head h4 { font-size: 14px; font-weight: 800; color: var(--fg1); margin: 0; flex: 1; }
.smp-card-head small { font-size: 11px; color: var(--fg3); }

/* ── Form inputs ── */
.smp-label { font-size: 12px; font-weight: 800; color: var(--fg2); margin-bottom: 6px; display: block; }
.smp-input {
    width: 100%; height: 40px; padding: 0 14px;
    background: var(--bg2); border: 1.5px solid var(--bd);
    border-radius: 10px; color: var(--fg1);
    font-size: 13px; font-weight: 600; outline: none;
    transition: border-color .15s; font-family: inherit;
}
.smp-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.smp-input::placeholder { color: var(--fg3); }
.smp-textarea {
    width: 100%; padding: 12px 14px;
    background: var(--bg2); border: 1.5px solid var(--bd);
    border-radius: 10px; color: var(--fg1);
    font-size: 13px; font-weight: 600; outline: none;
    transition: border-color .15s; font-family: inherit;
    resize: vertical; min-height: 100px; line-height: 1.5;
}
.smp-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.smp-textarea::placeholder { color: var(--fg3); }

/* SEO preview */
.smp-seo-preview {
    padding: 14px 16px; border-radius: 10px;
    border: 1px solid var(--bd); background: var(--bg2);
    margin-top: 10px;
}
.smp-seo-title { color: #1a73e8; font-size: 17px; font-family: Arial, sans-serif; margin-bottom: 3px; font-weight: 500; }
.smp-seo-url   { color: #188038; font-size: 13px; margin-bottom: 3px; }
.smp-seo-desc  { color: #545454; font-size: 13px; line-height: 1.5; }
body:not(.dark-mode) .smp-seo-preview { background: #fff; }

/* OG image upload */
.smp-og-zone {
    width: 100%; max-width: 320px;
    aspect-ratio: 1.91 / 1;
    border: 2px dashed var(--bd); border-radius: 12px;
    background: var(--bg2); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: border-color .2s;
    position: relative;
}
.smp-og-zone:hover { border-color: var(--accent); }
.smp-og-zone img { width: 100%; height: 100%; object-fit: cover; }

/* ── Save button ── */
.smp-save-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 24px;
    border: 0; border-radius: 11px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff; font-size: 13px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    box-shadow: 0 6px 18px -4px rgba(59,130,246,.4);
    transition: filter .15s, transform .15s;
}
.smp-save-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* ── Social links tab ── */
.smp-add-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px; padding: 0 16px;
    border: 0; border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff; font-size: 12.5px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    box-shadow: 0 4px 12px -4px rgba(59,130,246,.4);
    transition: filter .15s, transform .15s;
}
.smp-add-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Link list */
.smp-link-list { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.smp-link-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--bg2); border: 1.5px solid var(--bd);
    border-radius: 12px; transition: border-color .2s;
}
.smp-link-row:hover { border-color: var(--accent); }
.smp-link-ico-btn {
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--c); border: 1.5px solid var(--bd);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--accent); cursor: pointer; flex-shrink: 0;
    transition: all .15s;
}
.smp-link-ico-btn:hover { background: var(--abg); border-color: var(--accent); }
.smp-link-url {
    flex: 1; height: 38px; padding: 0 12px;
    background: var(--c); border: 1.5px solid var(--bd);
    border-radius: 9px; color: var(--fg1);
    font-size: 12.5px; font-weight: 600; outline: none;
    transition: border-color .15s; font-family: inherit;
    direction: ltr;
}
.smp-link-url:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.smp-link-url::placeholder { color: var(--fg3); }
.smp-link-del {
    width: 34px; height: 34px; border-radius: 9px;
    border: 1.5px solid var(--bd); background: var(--bg2);
    color: var(--fg3); display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 12px; flex-shrink: 0;
    transition: all .15s;
}
.smp-link-del:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.1); }

/* Empty social state */
.smp-empty {
    padding: 40px 20px; text-align: center;
    color: var(--fg3);
}
.smp-empty i   { font-size: 32px; opacity: .3; display: block; margin-bottom: 10px; }
.smp-empty p   { font-size: 13px; font-weight: 700; }

/* ── Icon Picker ── */
.smp-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 6px; max-height: 340px; overflow-y: auto;
    padding: 4px;
}
.smp-icon-item {
    aspect-ratio: 1; border-radius: 9px; border: 1.5px solid var(--bd);
    background: var(--bg2); display: flex; align-items: center; justify-content: center;
    font-size: 18px; cursor: pointer; color: var(--fg2);
    transition: all .15s;
}
.smp-icon-item:hover { border-color: var(--accent); color: var(--accent); background: var(--abg); }

/* ── Modal shared ── */
.smp-modal .modal-content {
    background: var(--c); border: 1px solid var(--bd);
    border-radius: 18px;
    box-shadow: 0 24px 60px -12px rgba(0,0,0,.45);
    overflow: hidden;
}
.smp-modal .modal-header {
    padding: 18px 22px 14px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 12px;
}
.smp-modal-ico {
    width: 36px; height: 36px; border-radius: 9px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.smp-modal .modal-title { font-size: 14px; font-weight: 900; color: var(--fg1); margin: 0; }
.smp-modal .modal-body  { padding: 20px 22px; }
.smp-modal .modal-footer { padding: 12px 22px; border-top: 1px solid var(--line); gap: 8px; }
body.dark-mode .smp-modal .btn-close { filter: invert(1); }

.smp-btn-save {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 18px; border: 0; border-radius: 9px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; font-family: inherit;
    box-shadow: 0 4px 12px -4px rgba(59,130,246,.4);
}
.smp-btn-save:hover { filter: brightness(1.08); }
.smp-btn-cancel {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 16px;
    border: 1.5px solid var(--bd); border-radius: 9px;
    background: var(--bg2); color: var(--fg2);
    font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.smp-btn-cancel:hover { border-color: var(--accent); color: var(--accent); }

/* Search in icon picker */
.smp-icon-search {
    width: 100%; height: 38px; padding: 0 14px;
    background: var(--bg2); border: 1.5px solid var(--bd);
    border-radius: 9px; color: var(--fg1); font-size: 13px; font-weight: 600;
    outline: none; font-family: inherit; transition: border-color .15s;
    margin-bottom: 14px;
}
.smp-icon-search:focus { border-color: var(--accent); }
.smp-icon-search::placeholder { color: var(--fg3); }


/* ═══════════════════════════════════════════════════════════════════════════════
 * PLATFORM SOCIAL PAGE
 * ─────────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   PLATFORM SOCIAL — Dashboard da3-system parity (full width)
   ══════════════════════════════════════════════════════════ */
.ps-page {
    --da3-card:    #1c1c1f;
    --da3-bd:      rgba(255,255,255,.055);
    --da3-bg2:     #111113;
    --da3-shadow:  0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-fg1:     #f4f4f5;
    --da3-fg2:     #a1a1aa;
    --da3-fg3:     #71717a;
    --da3-line:    rgba(255,255,255,.06);
    --da3-hover:   rgba(255,255,255,.03);
    --da3-r:       12px;
    --da3-gap:     16px;
    --da3-accent:  #3b82f6;
    --da3-abg:     rgba(59,130,246,.12);
    --da3-success: #10b981; --da3-success-bg: rgba(16,185,129,.12);
    --da3-warn:    #f59e0b; --da3-warn-bg:    rgba(245,158,11,.12);
}
body:not(.dark-mode) .ps-page {
    --da3-card:    #ffffff;
    --da3-bd:      #e4e4e7;
    --da3-bg2:     #f9f9fb;
    --da3-shadow:  0 1px 3px rgba(0,0,0,.07), 0 0 0 1px #e4e4e7;
    --da3-fg1:     #09090b;
    --da3-fg2:     #52525b;
    --da3-fg3:     #a1a1aa;
    --da3-line:    #f4f4f5;
    --da3-hover:   rgba(0,0,0,.02);
}

/* ── Hero ── */
.ps-hero {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 24px;
    border-radius: 18px;
    border: 1px solid var(--da3-bd);
    background:
        radial-gradient(700px 180px at 0% 0%, rgba(59,130,246,.09), transparent 60%),
        radial-gradient(500px 150px at 100% 100%, rgba(139,92,246,.06), transparent 60%),
        var(--da3-bg2);
    margin-bottom: var(--da3-gap);
}
.ps-hero-ico {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
    box-shadow: 0 8px 20px -6px rgba(59,130,246,.45);
}
.ps-hero h1 { font-size: 19px; font-weight: 900; margin: 0 0 3px; color: var(--da3-fg1); letter-spacing: -.02em; }
.ps-hero p  { font-size: 12.5px; color: var(--da3-fg3); margin: 0; font-weight: 500; }
.ps-hero-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--da3-card); border: 1px solid var(--da3-bd);
    font-size: 11.5px; font-weight: 700; color: var(--da3-fg2);
    flex-shrink: 0;
}
.ps-hero-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--da3-success); box-shadow: 0 0 0 2px rgba(16,185,129,.2); }

/* ── Alert ── */
.ps-alert {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--da3-success-bg);
    border: 1px solid color-mix(in srgb, var(--da3-success) 30%, transparent);
    color: var(--da3-success);
    font-size: 12.5px; font-weight: 700;
    margin-bottom: 16px;
}

/* ── Layout: form left + preview right ── */
.ps-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) { .ps-layout { grid-template-columns: 1fr; } }

/* ── Card ── */
.ps-card {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    overflow: hidden;
    box-shadow: var(--da3-shadow);
}
.ps-card-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--da3-line);
}
.ps-card-head-ico {
    width: 32px; height: 32px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.ps-card-head h4 { font-size: 14px; font-weight: 800; color: var(--da3-fg1); margin: 0; flex: 1; }
.ps-card-head small { font-size: 11px; color: var(--da3-fg3); font-weight: 600; }

/* ── Inputs grid ── */
.ps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
    padding: 18px 20px;
}

.ps-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--da3-bd);
    border-radius: 11px;
    background: var(--da3-bg2);
    transition: border-color .2s, box-shadow .2s, transform .15s;
    position: relative;
}
.ps-row:hover { transform: translateY(-1px); }
.ps-row:focus-within {
    border-color: var(--platform-color, var(--da3-accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--platform-color, var(--da3-accent)) 15%, transparent);
}
.ps-row.is-set {
    border-color: color-mix(in srgb, var(--platform-color, var(--da3-success)) 40%, transparent);
}
.ps-row-ico {
    width: 42px; height: 42px;
    border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--platform-color, #000) 50%, transparent);
}
.ps-row-body { flex: 1; min-width: 0; }
.ps-row-label {
    font-size: 11.5px; font-weight: 800;
    color: var(--da3-fg2);
    margin-bottom: 4px;
    letter-spacing: .02em;
    display: flex; align-items: center; gap: 6px;
}
.ps-row-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--da3-fg3);
    flex-shrink: 0;
    transition: background .2s, box-shadow .2s;
}
.ps-row.is-set .ps-row-status-dot {
    background: var(--da3-success);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--da3-success) 25%, transparent);
}
.ps-row-input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--da3-fg1);
    outline: none;
    padding: 0;
    direction: ltr;
    font-family: inherit;
}
.ps-row-input::placeholder { color: var(--da3-fg3); font-weight: 500; }
.ps-row-ext-link {
    color: var(--da3-fg3);
    font-size: 12px;
    flex-shrink: 0;
    transition: color .15s, transform .15s;
}
.ps-row-ext-link:hover {
    color: var(--platform-color, var(--da3-accent));
    transform: translateY(-1px);
}

/* ── Preview card (sidebar) ── */
.ps-preview-card {
    position: sticky; top: 12px;
}
.ps-preview-body {
    padding: 20px;
}
.ps-preview-mockup {
    background: linear-gradient(135deg, rgba(59,130,246,.06), rgba(139,92,246,.04));
    border: 1px dashed var(--da3-bd);
    border-radius: 12px;
    padding: 22px 18px;
    text-align: center;
}
.ps-preview-mockup-label {
    font-size: 10.5px; font-weight: 800; color: var(--da3-fg3);
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 14px;
}
.ps-preview-icons {
    display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.ps-preview-ico {
    width: 42px; height: 42px;
    border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    color: #fff;
    transition: transform .18s, opacity .2s, filter .2s;
    text-decoration: none;
    opacity: .25;
    filter: grayscale(.7);
}
.ps-preview-ico.is-set {
    opacity: 1;
    filter: none;
}
.ps-preview-ico:hover { transform: translateY(-2px) scale(1.05); }

.ps-preview-counts {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 9px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    font-size: 11.5px; font-weight: 700; color: var(--da3-fg3);
}
.ps-preview-counts strong { color: var(--da3-fg1); font-weight: 900; font-size: 14px; }

/* ── Footer (save button) ── */
.ps-foot {
    padding: 14px 20px;
    border-top: 1px solid var(--da3-line);
    background: var(--da3-bg2);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.ps-foot-note {
    font-size: 11.5px; font-weight: 600; color: var(--da3-fg3);
    display: inline-flex; align-items: center; gap: 6px;
}
.ps-btn-save {
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 24px;
    border: 0; border-radius: 11px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    font-size: 13px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    box-shadow: 0 6px 18px -4px rgba(59,130,246,.45);
    transition: filter .15s, transform .15s;
}
.ps-btn-save:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* ── Tip card ── */
.ps-tip {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 13px 16px;
    border-radius: 11px;
    background: rgba(59,130,246,.07);
    border: 1px solid rgba(59,130,246,.18);
    font-size: 12px; color: var(--da3-fg2);
    font-weight: 600;
    margin-top: 14px;
}
.ps-tip i { color: var(--da3-accent); font-size: 14px; margin-top: 1px; flex-shrink: 0; }

/* ── SEO Section ── */
/* ── SEO Card ── */
.id-upload-preview--og {
    width: 220px;
    height: 116px;
    border-radius: 10px;
    flex-shrink: 0;
}

.bs-badge-hint {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    font-family: 'SF Mono', Consolas, monospace;
    color: var(--da3-accent);
    background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.18);
    border-radius: 5px;
    padding: 1px 6px;
    margin-inline-start: 6px;
    letter-spacing: .02em;
    vertical-align: middle;
}

.seo-field-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}

.seo-char-count {
    font-size: 11px;
    font-weight: 700;
    font-family: 'SF Mono', Consolas, monospace;
    color: var(--da3-fg3);
    transition: color .15s;
    flex-shrink: 0;
}
.seo-char-count.is-warn  { color: #f59e0b; }
.seo-char-count.is-over  { color: #ef4444; }

.seo-preview-box {
    background: var(--da3-bg, #f8fafc);
    border: 1px solid var(--da3-bd, #e2e8f0);
    border-radius: 12px;
    padding: 16px 18px;
    font-family: Arial, sans-serif;
}
body:not(.dark-mode) .seo-preview-box { background: #f8fafc; }
body.dark-mode .seo-preview-box { background: rgba(255,255,255,.03); }

.seo-preview-url {
    font-size: 12px;
    color: #1e8e3e;
    margin-bottom: 4px;
    direction: ltr;
    font-weight: 500;
}
.seo-preview-title {
    font-size: 17px;
    color: #1a0dab;
    font-weight: 400;
    line-height: 1.35;
    margin-bottom: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
body.dark-mode .seo-preview-title { color: #8ab4f8; }
.seo-preview-desc {
    font-size: 13px;
    color: #4d5156;
    line-height: 1.57;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.dark-mode .seo-preview-desc { color: var(--da3-fg2); }

/* ═══════════════════════════════════════════════════════════════
   Onboarding
   Merged from: onboarding.css
═══════════════════════════════════════════════════════════════ */

/* ============================================================
   ELMATAJER — ONBOARDING CSS
   Combines: ai/chat, store, choice, steps/step1-3
   All static rules extracted — Wave 4 (2026-05-25)
   Dynamic font-family rules remain in each blade file.
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   SECTION 1: AI ONBOARDING CHAT (admin/onboarding/ai/chat)
   ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ════════════════════════════════════════════════════════════
   DESIGN TOKENS — premium dark/light parity with dashboard
═══════════════════════════════════════════════════════════ */
body.dark-mode {
    --ob-page:        #0a0a0c;
    --ob-page-2:      #0e0e11;
    --ob-card:        #15151a;
    --ob-card-2:      #1c1c22;
    --ob-card-hover:  #20202a;
    --ob-bd:          rgba(255,255,255,.07);
    --ob-bd-strong:   rgba(255,255,255,.12);
    --ob-fg1:         #f4f4f5;
    --ob-fg2:         #a1a1aa;
    --ob-fg3:         #71717a;
    --ob-fg4:         #52525b;
    --ob-accent:      #3b82f6;
    --ob-accent-2:    #60a5fa;
    --ob-accent-3:    #93c5fd;
    --ob-accent-bg:   rgba(59,130,246,.14);
    --ob-accent-bd:   rgba(59,130,246,.32);
    --ob-accent-glow: rgba(59,130,246,.32);
    --bubble-bot:     #18181d;
    --bubble-bot-fg:  #f4f4f5;
    --bubble-bot-bd:  rgba(255,255,255,.08);
    --bubble-user:    linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --bubble-user-fg: #ffffff;
    --ob-success:     #10b981;
    --ob-success-bg:  rgba(16,185,129,.12);
    --ob-danger:      #ef4444;
    --ob-warn:        #f59e0b;
    --ob-warn-bg:     rgba(245,158,11,.12);
    --ob-shadow-sm:   0 0 0 1px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.34);
    --ob-shadow-md:   0 4px 14px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05);
    --ob-shadow-lg:   0 24px 60px -16px rgba(0,0,0,.55);
    --ob-glow:        radial-gradient(ellipse 70% 50% at 20% 0%, rgba(59,130,246,.10), transparent 60%),
                      radial-gradient(ellipse 60% 40% at 90% 100%, rgba(124,58,237,.07), transparent 55%);
}
body:not(.dark-mode) {
    --ob-page:        #fafafa;
    --ob-page-2:      #f4f4f5;
    --ob-card:        #ffffff;
    --ob-card-2:      #f4f4f5;
    --ob-card-hover:  #f9fafb;
    --ob-bd:          #e5e7eb;
    --ob-bd-strong:   #d4d4d8;
    --ob-fg1:         #09090b;
    --ob-fg2:         #52525b;
    --ob-fg3:         #71717a;
    --ob-fg4:         #a1a1aa;
    --ob-accent:      #3b82f6;
    --ob-accent-2:    #60a5fa;
    --ob-accent-3:    #2563eb;
    --ob-accent-bg:   rgba(59,130,246,.08);
    --ob-accent-bd:   rgba(59,130,246,.22);
    --ob-accent-glow: rgba(59,130,246,.18);
    --bubble-bot:     #f4f4f5;
    --bubble-bot-fg:  #09090b;
    --bubble-bot-bd:  #e5e7eb;
    --bubble-user:    linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --bubble-user-fg: #ffffff;
    --ob-success:     #10b981;
    --ob-success-bg:  rgba(16,185,129,.10);
    --ob-danger:      #ef4444;
    --ob-warn:        #f59e0b;
    --ob-warn-bg:     rgba(245,158,11,.10);
    --ob-shadow-sm:   0 1px 3px rgba(0,0,0,.07), 0 0 0 1px #e5e7eb;
    --ob-shadow-md:   0 4px 14px rgba(0,0,0,.08);
    --ob-shadow-lg:   0 24px 60px -16px rgba(0,0,0,.18);
    --ob-glow:        radial-gradient(ellipse 70% 50% at 20% 0%, rgba(59,130,246,.05), transparent 60%);
}

*, *::before, *::after { box-sizing: border-box; }

body.auth-body > main {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* ════════════════════════════════════════════════════════════
   APP SHELL — single-column conversation-first layout
═══════════════════════════════════════════════════════════ */
.ai-app {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--ob-page);
    position: relative;
    isolation: isolate;
}

/* Premium ambient background — radial gradients */
.ai-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: var(--ob-glow);
}

/* AI-themed decorative icons — subtle, theme-aware, gentle drift animation */
.ai-bg-icons {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    user-select: none;
    z-index: 0;
}
.ai-bg-icons > i {
    position: absolute;
    line-height: 1;
    will-change: transform;
    color: var(--ob-fg1);
}
body.dark-mode .ai-bg-icons > i { color: #ffffff; }
body:not(.dark-mode) .ai-bg-icons > i { color: var(--ob-accent); }

/* Per-icon position / size / rotation / opacity */
.ai-bg-icons > i:nth-child(1)  { font-size: 64px; top: 6%;  inset-inline-start: 4%;   transform: rotate(-12deg); opacity: .045; animation: drift-a 22s ease-in-out infinite; }
.ai-bg-icons > i:nth-child(2)  { font-size: 44px; top: 4%;  inset-inline-end:   8%;   transform: rotate( 14deg); opacity: .04;  animation: drift-b 26s ease-in-out infinite; }
.ai-bg-icons > i:nth-child(3)  { font-size: 36px; top: 12%; inset-inline-start: 42%;  transform: rotate(-6deg);  opacity: .03;  animation: drift-a 30s ease-in-out infinite reverse; }
.ai-bg-icons > i:nth-child(4)  { font-size: 56px; top: 22%; inset-inline-start: 10%;  transform: rotate( 18deg); opacity: .045; animation: drift-b 24s ease-in-out infinite; }
.ai-bg-icons > i:nth-child(5)  { font-size: 48px; top: 18%; inset-inline-end:   9%;   transform: rotate(-16deg); opacity: .045; animation: drift-a 28s ease-in-out infinite; }
.ai-bg-icons > i:nth-child(6)  { font-size: 38px; top: 32%; inset-inline-start: 55%;  transform: rotate( 9deg);  opacity: .03;  animation: drift-b 32s ease-in-out infinite reverse; }
.ai-bg-icons > i:nth-child(7)  { font-size: 58px; top: 42%; inset-inline-start: 3%;   transform: rotate(-20deg); opacity: .045; animation: drift-a 25s ease-in-out infinite; }
.ai-bg-icons > i:nth-child(8)  { font-size: 46px; top: 38%; inset-inline-end:   5%;   transform: rotate( 13deg); opacity: .04;  animation: drift-b 27s ease-in-out infinite; }
.ai-bg-icons > i:nth-child(9)  { font-size: 34px; top: 52%; inset-inline-start: 48%;  transform: rotate( 22deg); opacity: .03;  animation: drift-a 31s ease-in-out infinite reverse; }
.ai-bg-icons > i:nth-child(10) { font-size: 50px; top: 62%; inset-inline-start: 14%;  transform: rotate( 10deg); opacity: .045; animation: drift-b 23s ease-in-out infinite; }
.ai-bg-icons > i:nth-child(11) { font-size: 52px; top: 60%; inset-inline-end:   15%;  transform: rotate(-9deg);  opacity: .04;  animation: drift-a 29s ease-in-out infinite; }
.ai-bg-icons > i:nth-child(12) { font-size: 40px; top: 72%; inset-inline-start: 52%;  transform: rotate(-16deg); opacity: .03;  animation: drift-b 30s ease-in-out infinite reverse; }
.ai-bg-icons > i:nth-child(13) { font-size: 48px; top: 80%; inset-inline-start: 5%;   transform: rotate( 15deg); opacity: .04;  animation: drift-a 26s ease-in-out infinite; }
.ai-bg-icons > i:nth-child(14) { font-size: 58px; top: 76%; inset-inline-end:   7%;   transform: rotate(-22deg); opacity: .045; animation: drift-b 24s ease-in-out infinite; }
.ai-bg-icons > i:nth-child(15) { font-size: 46px; top: 90%; inset-inline-start: 32%;  transform: rotate( 7deg);  opacity: .035; animation: drift-a 28s ease-in-out infinite reverse; }

/* Light mode: icons get slightly more contrast against the white page */
body:not(.dark-mode) .ai-bg-icons > i:nth-child(1)  { opacity: .06; }
body:not(.dark-mode) .ai-bg-icons > i:nth-child(2)  { opacity: .055; }
body:not(.dark-mode) .ai-bg-icons > i:nth-child(3)  { opacity: .045; }
body:not(.dark-mode) .ai-bg-icons > i:nth-child(4)  { opacity: .06; }
body:not(.dark-mode) .ai-bg-icons > i:nth-child(5)  { opacity: .06; }
body:not(.dark-mode) .ai-bg-icons > i:nth-child(6)  { opacity: .045; }
body:not(.dark-mode) .ai-bg-icons > i:nth-child(7)  { opacity: .06; }
body:not(.dark-mode) .ai-bg-icons > i:nth-child(8)  { opacity: .055; }
body:not(.dark-mode) .ai-bg-icons > i:nth-child(9)  { opacity: .045; }
body:not(.dark-mode) .ai-bg-icons > i:nth-child(10) { opacity: .06; }
body:not(.dark-mode) .ai-bg-icons > i:nth-child(11) { opacity: .055; }
body:not(.dark-mode) .ai-bg-icons > i:nth-child(12) { opacity: .045; }
body:not(.dark-mode) .ai-bg-icons > i:nth-child(13) { opacity: .055; }
body:not(.dark-mode) .ai-bg-icons > i:nth-child(14) { opacity: .06; }
body:not(.dark-mode) .ai-bg-icons > i:nth-child(15) { opacity: .05; }

@keyframes drift-a {
    0%, 100% { translate: 0 0; }
    50%      { translate: 12px -16px; }
}
@keyframes drift-b {
    0%, 100% { translate: 0 0; }
    50%      { translate: -14px 10px; }
}
@media (max-width: 720px) {
    .ai-bg-icons { display: none; }
}

/* ════════════════════════════════════════════════════════════
   HEADER — sticky modern, minimal
═══════════════════════════════════════════════════════════ */
.ai-header {
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    height: 64px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: color-mix(in srgb, var(--ob-page) 88%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ob-bd);
}
.ai-header-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.ai-brand-avatar {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-3));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 14px -4px var(--ob-accent-glow);
}
.ai-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.ai-brand-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--ob-fg1);
    letter-spacing: -.2px;
    white-space: nowrap;
}
.ai-brand-sub {
    font-size: 12px;
    color: var(--ob-fg3);
    font-weight: 500;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.ai-icon-btn {
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ob-fg2);
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
    font-family: inherit;
    position: relative;
}
.ai-icon-btn:hover {
    background: var(--ob-card-2);
    color: var(--ob-fg1);
    border-color: var(--ob-bd);
}
.ai-icon-btn:active { transform: scale(.96); }
.ai-icon-btn.is-accent {
    background: var(--ob-accent-bg);
    color: var(--ob-accent-2);
    border-color: var(--ob-accent-bd);
}
.ai-icon-btn.is-accent:hover {
    background: var(--ob-accent);
    color: #fff;
}

/* ════════════════════════════════════════════════════════════
   COLLECTED-INFO CARD — compact, collapsible, non-intrusive
═══════════════════════════════════════════════════════════ */
.ai-collected {
    flex-shrink: 0;
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1500px;
    margin: 12px auto 0;
    padding: 0 20px;
}
.ai-collected-card {
    background: var(--ob-card);
    border: 1px solid var(--ob-bd);
    border-radius: 12px;
    position: relative;       /* anchor for the floating body */
    transition: border-color .15s;
}
.ai-collected-card:hover { border-color: var(--ob-bd-strong); }

.ai-collected-toggle {
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: start;
}
.ai-collected-toggle:focus-visible {
    outline: 2px solid var(--ob-accent);
    outline-offset: -2px;
}
.ai-collected-lead {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.ai-collected-badge {
    width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--ob-success-bg);
    color: var(--ob-success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.ai-collected-count {
    font-size: 13px;
    font-weight: 700;
    color: var(--ob-fg1);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ai-collected-count strong { color: var(--ob-accent-2); font-weight: 800; }
/* Force LTR isolation on the numeric fraction so "8 / 11" stays in the right order in RTL */
.ai-collected-count-frac {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* Per-field status pills — restored: shows every required field with done/pending state */
.ai-collected-pills {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 5px;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.ai-collected-pills::-webkit-scrollbar { display: none; }
.ai-collected-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.3;
}
.ai-collected-pill i { font-size: 9px; }
.ai-collected-pill.is-done {
    background: var(--ob-success-bg);
    color: var(--ob-success);
}
.ai-collected-pill.is-pending {
    background: var(--ob-card-2);
    color: var(--ob-fg3);
    border: 1px solid var(--ob-bd);
}
.ai-collected.is-complete .ai-collected-badge {
    background: linear-gradient(135deg, var(--ob-success), #059669);
    color: #fff;
}

/* Thin progress bar at the bottom of the toggle row — visual at-a-glance scan */
.ai-collected-progress {
    display: block;
    height: 3px;
    background: var(--ob-card-2);
    overflow: hidden;
    position: relative;
    border-top: 1px solid var(--ob-bd);
}
.ai-collected-progress-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--ob-success), #34d399);
    transition: width .5s cubic-bezier(.2,.8,.2,1);
    width: 0%;
}
.ai-collected.is-complete .ai-collected-progress-fill {
    background: linear-gradient(90deg, var(--ob-success), #34d399, var(--ob-success));
    background-size: 200% 100%;
    animation: progress-shimmer 2.4s linear infinite;
}
@keyframes progress-shimmer {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}
.ai-collected-caret {
    color: var(--ob-fg3);
    font-size: 11px;
    transition: transform .2s;
    flex-shrink: 0;
}
.ai-collected.is-open .ai-collected-caret { transform: rotate(180deg); }

/* Expanded body — floats over the chat as a dropdown, doesn't push content */
.ai-collected-body {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: -1px;
    inset-inline-end: -1px;
    background: var(--ob-card);
    border: 1px solid var(--ob-bd);
    border-radius: 12px;
    padding: 14px;
    display: none;
    z-index: 25;
    box-shadow: var(--ob-shadow-lg);
    max-height: calc(100dvh - 180px);
    overflow-y: auto;
    transform-origin: top center;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.ai-collected-body::-webkit-scrollbar { width: 4px; }
.ai-collected-body::-webkit-scrollbar-thumb { background: var(--ob-bd-strong); border-radius: 4px; }
.ai-collected.is-open .ai-collected-body {
    display: block;
    animation: collected-body-enter .22s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes collected-body-enter {
    from { opacity: 0; transform: scaleY(.92) translateY(-8px); }
    to   { opacity: 1; transform: scaleY(1)   translateY(0); }
}

.ai-collected-section {
    margin-bottom: 12px;
}
.ai-collected-section:last-child { margin-bottom: 0; }
.ai-collected-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--ob-fg3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}
.ai-collected-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.ai-collected-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--ob-card);
    border: 1px solid var(--ob-bd);
}
.ai-collected-row-icon {
    width: 22px; height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}
.ai-collected-row.is-done .ai-collected-row-icon {
    background: var(--ob-success-bg);
    color: var(--ob-success);
}
.ai-collected-row.is-pending .ai-collected-row-icon {
    background: var(--ob-card-2);
    color: var(--ob-fg4);
}
.ai-collected-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.ai-collected-row-label {
    font-size: 11px;
    color: var(--ob-fg3);
}
.ai-collected-row-value {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ob-fg1);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-collected-row.is-pending .ai-collected-row-value {
    color: var(--ob-fg4);
    font-weight: 400;
    font-style: italic;
}

@media (max-width: 640px) {
    .ai-collected { padding: 0 12px; }
    .ai-collected-pills { display: none; }   /* count + chevron only on narrow screens */
    .ai-collected-rows { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   MAIN CHAT AREA — scroll container
═══════════════════════════════════════════════════════════ */
.ai-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.ai-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    padding: 20px 0 8px;
    scroll-padding-bottom: 20px;
    overflow-anchor: none;            /* we manage anchoring in JS */
}
.ai-messages::-webkit-scrollbar { width: 6px; }
.ai-messages::-webkit-scrollbar-track { background: transparent; }
.ai-messages::-webkit-scrollbar-thumb { background: var(--ob-bd-strong); border-radius: 999px; }
.ai-messages::-webkit-scrollbar-thumb:hover { background: var(--ob-accent); }

.ai-messages-inner {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 20px 12px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    justify-content: flex-end;
    position: relative;
}

@media (max-width: 640px) {
    .ai-messages-inner { padding: 0 14px 10px; }
}

/* ── Date divider ── */
.ai-date-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 18px;
}
.ai-date-divider span {
    font-size: 11px;
    font-weight: 600;
    color: var(--ob-fg3);
    background: var(--ob-card);
    border: 1px solid var(--ob-bd);
    border-radius: 999px;
    padding: 4px 14px;
    letter-spacing: .04em;
}

/* ════════════════════════════════════════════════════════════
   MESSAGES — modern chat bubble layout
═══════════════════════════════════════════════════════════ */
.ai-msg {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 14px;
    animation: msg-enter .32s cubic-bezier(.2,.8,.2,1) forwards;
    opacity: 0;
    transform: translateY(8px);
}
.ai-msg.same-role { margin-bottom: 4px; }
.ai-msg.assistant { justify-content: flex-start; }
.ai-msg.user { justify-content: flex-end; }

/* Chat avatars — AI on assistant side, user on user side */
.ai-msg-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
}
.ai-msg.assistant .ai-msg-avatar {
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-3));
    color: #fff;
    box-shadow: 0 3px 10px -3px var(--ob-accent-glow);
}
.ai-msg.user .ai-msg-avatar {
    background: var(--ob-card-2);
    color: var(--ob-fg2);
    border: 1px solid var(--ob-bd);
}
/* Hide avatar (but preserve space) on consecutive same-role messages */
.ai-msg.same-role .ai-msg-avatar { visibility: hidden; }
@keyframes msg-enter {
    to { opacity: 1; transform: translateY(0); }
}

.ai-msg-bubble {
    max-width: 70%;
    padding: 10px 15px 9px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.6;
    word-wrap: break-word;
    white-space: pre-wrap;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
/* Color-pick bubble — shows two swatches side by side, no text */
.ai-msg-bubble.ai-msg-color-pick {
    padding: 6px 8px;
    display: flex;
    gap: 5px;
    align-items: center;
    white-space: normal;
}
.ai-msg-swatch-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.ai-msg-swatch {
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 2px solid rgba(255,255,255,.25);
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    flex-shrink: 0;
}
.ai-msg-swatch-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    letter-spacing: .3px;
}
.ai-msg.assistant .ai-msg-bubble {
    background: var(--bubble-bot);
    color: var(--bubble-bot-fg);
    border: 1px solid var(--bubble-bot-bd);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 16px;
}
[dir="rtl"] .ai-msg.assistant .ai-msg-bubble {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 16px;
}
.ai-msg.user .ai-msg-bubble {
    background: var(--bubble-user);
    color: var(--bubble-user-fg);
    border: 0;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 16px;
    box-shadow: 0 4px 14px -6px var(--ob-accent-glow);
}
[dir="rtl"] .ai-msg.user .ai-msg-bubble {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 16px;
}

/* Typewriter caret — pulsing cursor at the end of an actively-typing bubble */
.ai-msg-bubble.is-typing-out::after {
    content: '▍';
    display: inline-block;
    color: var(--ob-accent-2);
    font-weight: 400;
    margin-inline-start: 2px;
    animation: caret-blink .9s steps(2) infinite;
    transform: translateY(-1px);
    opacity: .85;
}
@keyframes caret-blink {
    50% { opacity: 0; }
}

/* Image bubble — used after logo / favicon upload */
.ai-msg-bubble.ai-msg-image { padding: 6px; }
.ai-msg-img {
    display: block;
    max-width: 220px;
    max-height: 220px;
    border-radius: 12px;
    object-fit: cover;
    background: rgba(255,255,255,.04);
}

/* Special bubble styles */
.ai-msg-bubble.style-card {
    background: var(--ob-card-2);
    border-color: var(--ob-accent-bd);
}
.ai-msg-bubble.style-loading {
    background: var(--ob-accent-bg);
    border: 1px solid var(--ob-accent-bd);
    color: var(--ob-accent-2);
    font-weight: 600;
}
.ai-msg-bubble.style-loading::before {
    content: '';
    display: inline-block;
    width: 13px; height: 13px;
    margin-inline-end: 8px;
    border-radius: 50%;
    border: 2px solid var(--ob-accent-2);
    border-inline-start-color: transparent;
    animation: spin .9s linear infinite;
    vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════
   TYPING INDICATOR
═══════════════════════════════════════════════════════════ */
.ai-typing-row {
    display: none;
    margin-bottom: 14px;
    animation: msg-enter .25s ease forwards;
    opacity: 0;
}
.ai-typing-row.is-on { display: flex; justify-content: flex-start; gap: 10px; align-items: flex-end; }
/* User-typing variant — mirrored to the user side */
.ai-typing-row.user.is-on { justify-content: flex-end; }
.ai-typing-row.user .ai-typing-bubble {
    background: var(--ob-card-2);
    border: 1px solid var(--ob-bd);
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 16px;
}
[dir="rtl"] .ai-typing-row.user .ai-typing-bubble {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 16px;
}
.ai-typing-row.user .ai-typing-bubble .dot { background: var(--ob-fg3); }
.ai-typing-bubble {
    background: var(--bubble-bot);
    border: 1px solid var(--bubble-bot-bd);
    border-radius: 16px;
    border-bottom-left-radius: 5px;
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
[dir="rtl"] .ai-typing-bubble {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 5px;
}
.ai-typing-bubble .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ob-fg3);
    animation: type-blink 1.4s infinite ease-in-out;
}
.ai-typing-bubble .dot:nth-child(2) { animation-delay: .18s; }
.ai-typing-bubble .dot:nth-child(3) { animation-delay: .36s; }
@keyframes type-blink {
    0%, 80%, 100% { opacity: .25; transform: translateY(0); }
    40%           { opacity: 1;   transform: translateY(-4px); }
}

/* ════════════════════════════════════════════════════════════
   CHIPS — premium option cards
═══════════════════════════════════════════════════════════ */
.ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 16px;
    max-width: 85%;
    animation: chips-enter .35s cubic-bezier(.2,.8,.2,1) forwards;
    opacity: 0;
    transform: translateY(8px);
}
@keyframes chips-enter {
    to { opacity: 1; transform: translateY(0); }
}

.ai-chips.has-country-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    max-width: 95%;
    gap: 10px;
}
@media (max-width: 640px) {
    .ai-chips.has-country-cards {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        max-width: 100%;
    }
}

.ai-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 12px;
    background: var(--ob-card);
    border: 1.5px solid var(--ob-bd);
    color: var(--ob-fg1);
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .18s, border-color .18s, transform .12s, color .18s, box-shadow .18s;
    position: relative;
}
.ai-chip i { font-size: 12px; color: var(--ob-fg3); transition: color .18s; }
.ai-chip:hover {
    background: var(--ob-accent-bg);
    border-color: var(--ob-accent-bd);
    color: var(--ob-accent-2);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -8px var(--ob-accent-glow);
}
.ai-chip:hover i { color: var(--ob-accent-2); }
.ai-chip:active { transform: translateY(0); }
.ai-chip:disabled { opacity: .5; cursor: not-allowed; }
.ai-chip .swatch {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 4px;
    border: 1px solid var(--ob-bd-strong);
}
.ai-chip.is-primary {
    height: 44px;
    padding: 0 24px;
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-3));
    color: #fff;
    border-color: transparent;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 20px -6px var(--ob-accent-glow);
}
.ai-chip.is-primary:hover { color: #fff; transform: translateY(-2px); }
.ai-chip.is-primary i { color: #fff; }

/* Destructive variant — cancel/discard actions (e.g. "إلغاء التعديل") */
.ai-chip.is-danger {
    background: color-mix(in srgb, #ef4444 18%, transparent);
    border-color: color-mix(in srgb, #ef4444 42%, transparent);
    color: #fca5a5;
}
.ai-chip.is-danger i { color: #fca5a5; }
.ai-chip.is-danger:hover {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(239,68,68,.55);
}
.ai-chip.is-danger:hover i { color: #fff; }

.ai-chip-counter {
    margin-inline-start: 8px;
    padding-inline-start: 8px;
    border-inline-start: 1px solid currentColor;
    font-size: 11px;
    font-weight: 500;
    opacity: .65;
    font-variant-numeric: tabular-nums;
}

/* Country / location card chip — large click target */
.ai-chip-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 14px;
    background: var(--ob-card);
    border: 1.5px solid var(--ob-bd);
    color: var(--ob-fg1);
    font-family: inherit;
    cursor: pointer;
    text-align: start;
    transition: background .18s, border-color .18s, transform .15s, box-shadow .18s;
    min-height: 68px;
    position: relative;
    overflow: hidden;
}
.ai-chip-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--ob-accent-bg), transparent 50%);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.ai-chip-card:hover {
    border-color: var(--ob-accent-bd);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px var(--ob-accent-glow);
}
.ai-chip-card:hover::after { opacity: 1; }
.ai-chip-card:active { transform: translateY(0); }
.ai-chip-card:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.ai-chip-card-flag {
    width: 38px; height: 30px;
    border-radius: 7px;
    flex-shrink: 0;
    border: 1px solid var(--ob-bd);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ai-chip-card-flag > .flag-icon {
    display: block;
    width: 100% !important;
    height: 100% !important;
    background-size: cover;
    background-position: center;
}
.ai-chip-card-body {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.ai-chip-card-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ob-fg1);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-chip-card-desc {
    font-size: 11.5px;
    color: var(--ob-fg3);
    line-height: 1.4;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-chip-card:hover .ai-chip-card-name { color: var(--ob-accent-2); }

/* ════════════════════════════════════════════════════════════
   FILE PICKER — drag-and-drop card
═══════════════════════════════════════════════════════════ */
.ai-file-picker {
    margin: 8px 0 16px;
    max-width: 70%;
    animation: chips-enter .35s ease forwards;
    opacity: 0;
}
.ai-file-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 24px;
    background: var(--ob-card);
    border: 1.5px dashed var(--ob-bd-strong);
    border-radius: 16px;
    color: var(--ob-fg2);
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
    text-align: center;
}
.ai-file-drop:hover {
    border-color: var(--ob-accent);
    background: var(--ob-accent-bg);
    color: var(--ob-accent-2);
}
.ai-file-drop-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--ob-accent-bg);
    color: var(--ob-accent-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 4px;
}
.ai-file-drop-title { font-size: 14px; font-weight: 700; color: var(--ob-fg1); }
.ai-file-drop-sub   { font-size: 11.5px; color: var(--ob-fg3); }
.ai-file-progress   { font-size: 12px; color: var(--ob-accent-2); margin-top: 6px; }

@media (max-width: 640px) {
    .ai-file-picker { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════
   PHONE PICKER — country flag + dial code + national format
═══════════════════════════════════════════════════════════ */
.ai-phone-picker {
    max-width: 100%;
    margin: 8px 0 16px;
    animation: chips-enter .35s ease forwards;
    opacity: 0;
    direction: ltr !important;        /* phone numbers are always LTR */
    text-align: left !important;
}
/* Force every descendant of the picker to LTR regardless of RTL parent. */
.ai-phone-picker *,
.ai-phone-picker .iti,
.ai-phone-picker .iti--separate-dial-code,
.ai-phone-picker .ai-phone-row {
    direction: ltr !important;
}
.ai-phone-picker .ai-phone-row { flex-direction: row !important; }

/* Country-list dropdown is injected at body level — force LTR too */
.ai-phone-picker .iti__country-list,
.iti__country-list { direction: ltr !important; text-align: left !important; }

/* Force flag + dial code to the LEFT side of the input, input flows from
   after them. This overrides any RTL inheritance from the document. */
.ai-phone-picker .iti__flag-container,
.ai-phone-picker .iti__country-container {
    left: 0 !important;
    right: auto !important;
}
.ai-phone-picker .iti--separate-dial-code .iti__selected-flag {
    border-left: none !important;
    border-right: 1px solid var(--ob-bd) !important;
    border-radius: 0 !important;
    /* No trailing arrow → trim the right padding */
    padding: 0 14px 0 12px !important;
}
.ai-phone-picker .iti--separate-dial-code input[type=tel],
.ai-phone-picker .iti--separate-dial-code .ai-phone-input,
.ai-phone-picker input.ai-phone-input {
    padding-left: 86px !important;          /* arrow gone — less space needed */
    padding-right: 14px !important;
    text-align: left !important;
}
.ai-phone-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    background: var(--ob-card);
    border: 1.5px solid var(--ob-bd);
    border-radius: 16px;
    padding: 6px;
    transition: border-color .18s, box-shadow .18s;
    box-shadow: var(--ob-shadow-md);
}
.ai-phone-row:focus-within {
    border-color: var(--ob-accent);
    box-shadow: 0 0 0 4px var(--ob-accent-glow), var(--ob-shadow-md);
}
.ai-phone-row .iti {
    flex: 1;
    min-width: 0;
    display: flex !important;
    width: auto !important;
}
.ai-phone-input {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--ob-fg1) !important;
    font: inherit !important;
    font-size: 14.5px !important;
    padding: 11px 12px !important;
    height: auto !important;
    direction: ltr !important;
    text-align: left !important;   /* explicit — not "start" which flips in RTL */
    margin: 0 !important;
}
.ai-phone-input::placeholder { color: var(--ob-fg4) !important; }
.ai-phone-input.is-invalid { color: var(--ob-danger) !important; }

.ai-phone-submit {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-3));
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity .15s, transform .15s, box-shadow .15s;
    flex-shrink: 0;
    box-shadow: 0 4px 14px -3px var(--ob-accent-glow);
}
.ai-phone-submit:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.ai-phone-submit:not(:disabled):hover { transform: scale(1.06); }
[dir="rtl"] .ai-phone-submit .fa-paper-plane { transform: scaleX(-1); }

.ai-phone-meta {
    font-size: 11.5px;
    color: var(--ob-fg3);
    margin: 8px 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    direction: ltr;
}
/* Inside a strictly LTR container, keep the Arabic phrase readable */
.ai-phone-meta .ai-phone-status span { unicode-bidi: isolate; }
.ai-phone-meta .ai-phone-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ai-phone-meta .ai-phone-status i { font-size: 10px; }
.ai-phone-meta .ai-phone-status.is-valid   { color: var(--ob-success); }
.ai-phone-meta .ai-phone-status.is-invalid { color: var(--ob-danger); }

/* ── intl-tel-input dark theme overrides ── */
.iti { font-family: inherit !important; }
.iti--separate-dial-code .iti__selected-flag {
    background-color: transparent !important;
    border-inline-end: 1px solid var(--ob-bd) !important;
    padding: 0 10px 0 12px !important;
}
.iti__selected-dial-code {
    color: var(--ob-fg1) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    margin-inline-start: 6px;
}
/* ─── NUCLEAR RESET: strip border/outline/box-shadow from ALL iti elements ─── */
[class*="iti__"],
[class^="iti__"],
.iti,
.iti *,
.iti--container,
.iti--container * {
    box-shadow: none !important;
    outline: 0 none transparent !important;
    outline-width: 0 !important;
    outline-offset: 0 !important;
    border-color: transparent !important;
}
[class*="iti__"]:focus,
[class*="iti__"]:focus-visible,
[class*="iti__"]:focus-within,
[class*="iti__"]:active,
.iti--container:focus,
.iti--container:focus-visible {
    outline: 0 none transparent !important;
    box-shadow: none !important;
}

/* ═════════════════════════════════════════════════════════════════
   DROPDOWN — v18 has TWO nested elements:
     • .iti__dropdown-content (wrapper, has the default white bg + border)
     • .iti__country-list     (inner <ul>, holds the country <li> items)
   We style BOTH + add a custom class `.ai-phone-dropdown` via JS for
   reliable targeting that bypasses any future library class renames.
═════════════════════════════════════════════════════════════════ */

/* Outer wrapper — the actual visible panel */
.iti__dropdown-content,
.iti__dropdown-content--dropup,
.ai-phone-dropdown,
.iti--flexible-dropdown-width .iti__dropdown-content {
    background: var(--ob-card) !important;
    background-color: var(--ob-card) !important;
    border: 0 none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    border-radius: 14px !important;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    max-height: 320px !important;
    box-shadow: 0 20px 56px -10px rgba(0,0,0,.65) !important;
    z-index: 1080 !important;
    color: var(--ob-fg1);
    /* Kill the default white bg / scrollbar gutter look */
    -webkit-overflow-scrolling: auto !important;
}

/* Inner UL — must be transparent so the outer wrapper's bg shows through */
.iti__country-list,
ul.iti__country-list,
.iti__dropdown-content .iti__country-list,
.ai-phone-dropdown .iti__country-list {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.iti__country-list::-webkit-scrollbar { width: 4px; }
.iti__country-list::-webkit-scrollbar-track { background: transparent; }
.iti__country-list::-webkit-scrollbar-thumb { background: var(--ob-bd-strong); border-radius: 4px; }
.iti__country-list { scrollbar-width: thin; scrollbar-color: var(--ob-bd-strong) transparent; }

.iti--container { background: transparent !important; }

/* Country items — flush, edge-to-edge */
.iti__country {
    color: var(--ob-fg1) !important;
    padding: 11px 14px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    cursor: pointer;
    transition: background .15s;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.iti__country.iti__highlight,
.iti__country:hover {
    background: var(--ob-card-2) !important;
}
.iti__country-name { color: var(--ob-fg1) !important; }
.iti__dial-code   { color: var(--ob-fg3) !important; margin-inline-start: auto; font-size: 12.5px; }

/* Hide arrows + dividers */
.iti__arrow,
.iti__arrow--up,
.iti__divider,
.iti__country-list-up,
.iti__country-list-down { display: none !important; }

/* Clickable selected-flag (the toggle) — gentle hover */
.ai-phone-picker .iti__selected-flag {
    cursor: pointer;
    transition: background-color .15s;
}

/* ════════════════════════════════════════════════════════════
   COLORS PICKER — palette suggestions extracted from logo
═══════════════════════════════════════════════════════════ */
.ai-colors-picker {
    max-width: 100%;
    margin: 8px 0 16px;
    background: var(--ob-card);
    border: 1.5px solid var(--ob-bd);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--ob-shadow-md);
    animation: chips-enter .4s cubic-bezier(.2,.8,.2,1) forwards;
    opacity: 0;
}
.ai-colors-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.ai-colors-logo {
    width: 44px; height: 44px;
    border-radius: 11px;
    overflow: hidden;
    background: var(--ob-card-2);
    border: 1px solid var(--ob-bd);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ai-colors-logo img { width: 100%; height: 100%; object-fit: cover; }
.ai-colors-logo i { color: var(--ob-fg3); font-size: 18px; }
.ai-colors-head-text { flex: 1; min-width: 0; }
.ai-colors-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ob-fg1);
    margin: 0;
}
.ai-colors-sub {
    font-size: 11.5px;
    color: var(--ob-fg3);
    margin: 2px 0 0;
}

/* Loading state while extracting from canvas */
.ai-colors-loading {
    text-align: center;
    padding: 30px 16px;
    color: var(--ob-fg3);
    font-size: 12.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ai-colors-loading i { color: var(--ob-accent-2); }

/* Palette cards grid */
.ai-colors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.ai-colors-card {
    cursor: pointer;
    border-radius: 12px;
    border: 1.5px solid var(--ob-bd);
    overflow: hidden;
    background: var(--ob-card-2);
    transition: transform .15s, border-color .15s, box-shadow .15s;
    padding: 0;
    font-family: inherit;
    text-align: start;
    display: flex;
    flex-direction: column;
}
.ai-colors-card:hover {
    transform: translateY(-2px);
    border-color: var(--ob-accent-bd);
    box-shadow: 0 10px 26px -10px var(--ob-accent-glow);
}
.ai-colors-card.is-selected {
    border-color: var(--ob-accent) !important;
    box-shadow: 0 0 0 3px var(--ob-accent-glow);
}
.ai-colors-card--manual {
    border-style: dashed;
}
.ai-colors-card-swatches {
    display: flex;
    height: 60px;
}
.ai-colors-card-swatch {
    flex: 1;
    position: relative;
}
.ai-colors-card-swatch:first-child { flex: 1.5; }   /* primary slightly bigger */
.ai-colors-card-body {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 10.5px;
    color: var(--ob-fg3);
    font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--ob-bd);
}
.ai-colors-card-hex { color: var(--ob-fg1); font-weight: 600; font-size: 11px; }
.ai-colors-card-tag {
    background: var(--ob-card);
    color: var(--ob-fg3);
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 9.5px;
}

/* Live preview row */
.ai-colors-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--ob-card-2);
    border: 1px solid var(--ob-bd);
    border-radius: 12px;
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--ob-fg2);
    flex-wrap: wrap;
}
.ai-colors-preview-label { color: var(--ob-fg3); }
.ai-colors-preview-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-weight: 700; font-size: 11.5px;
    background: var(--pv-primary, #3b82f6);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,.4);
}
.ai-colors-preview-btn {
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--pv-secondary, #60a5fa);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
}

/* Action buttons */
.ai-colors-actions {
    display: flex;
    gap: 8px;
}
.ai-colors-actions button {
    flex: 1;
    height: 42px;
    border-radius: 11px;
    border: 1.5px solid var(--ob-bd-strong);
    background: var(--ob-card-2);
    color: var(--ob-fg1);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 7px;
    transition: background .15s, transform .15s, opacity .15s;
}
.ai-colors-actions button:hover:not(:disabled) { background: var(--ob-card-hover); }
.ai-colors-actions .primary {
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-3));
    color: #fff;
    border-color: transparent;
}
.ai-colors-actions .primary:disabled { opacity: .45; cursor: not-allowed;  }
.ai-colors-actions .primary:not(:disabled):hover { transform: translateY(-1px); }

/* ── Individual primary / secondary pickers ── */
.ai-colors-manual {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.ai-colors-manual-sep {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 11px;
    color: var(--ob-fg3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.ai-colors-manual-sep::before,
.ai-colors-manual-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ob-bd);
}
.ai-colors-manual-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ob-card-2);
    border: 1.5px solid var(--ob-bd);
    border-radius: 12px;
    padding: 10px 12px;
    transition: border-color .15s;
    cursor: pointer;
}
.ai-colors-manual-row:focus-within { border-color: var(--ob-accent-bd); }
.ai-colors-manual-swatch {
    width: 36px; height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.10);
    box-shadow: 0 2px 8px rgba(0,0,0,.22);
    transition: background .12s;
    display: inline-block;
}
.ai-colors-manual-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ai-colors-manual-label {
    font-size: 10.5px; color: var(--ob-fg3); font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px; pointer-events: none;
}
.ai-colors-manual-hex {
    background: transparent; border: none; outline: none;
    color: var(--ob-fg1); font-family: 'Courier New', monospace, inherit;
    font-size: 13.5px; font-weight: 700; width: 100%;
    direction: ltr; text-transform: uppercase; padding: 0;
    caret-color: var(--ob-accent);
}
.ai-colors-manual-hex::placeholder { color: var(--ob-fg4); }
.ai-colors-manual-hex.is-invalid { color: var(--ob-danger); }
.ai-colors-manual-native {
    -webkit-appearance: none; appearance: none;
    width: 34px; height: 34px; border-radius: 9px;
    border: 2px solid var(--ob-bd-strong); padding: 2px;
    background: var(--ob-card); cursor: pointer; flex-shrink: 0;
    transition: border-color .15s, transform .15s;
}
.ai-colors-manual-native:hover { border-color: var(--ob-accent); transform: scale(1.08); }
.ai-colors-manual-native::-webkit-color-swatch-wrapper { padding: 0; border-radius: 5px; overflow: hidden; }
.ai-colors-manual-native::-webkit-color-swatch { border: none; border-radius: 5px; }
.ai-colors-manual-native::-moz-color-swatch { border: none; border-radius: 5px; }

@media (max-width: 540px) {
    .ai-colors-picker { padding: 14px; }
    .ai-colors-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
    .ai-colors-card-swatches { height: 50px; }
}

/* ════════════════════════════════════════════════════════════
   EMAIL PICKER — type="email" with validation
═══════════════════════════════════════════════════════════ */
.ai-email-picker {
    max-width: 100%;
    margin: 8px 0 16px;
    animation: chips-enter .35s ease forwards;
    opacity: 0;
}
.ai-email-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    background: var(--ob-card);
    border: 1.5px solid var(--ob-bd);
    border-radius: 16px;
    padding: 6px;
    transition: border-color .18s, box-shadow .18s;
    box-shadow: var(--ob-shadow-md);
    direction: ltr;
}
.ai-email-row:focus-within {
    border-color: var(--ob-accent);
    box-shadow: 0 0 0 4px var(--ob-accent-glow), var(--ob-shadow-md);
}
.ai-email-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    color: var(--ob-fg3);
    font-size: 15px;
    flex-shrink: 0;
    border-inline-end: 1px solid var(--ob-bd);
}
.ai-email-input {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--ob-fg1) !important;
    font: inherit !important;
    font-size: 14.5px !important;
    padding: 11px 12px !important;
    direction: ltr !important;
    text-align: left !important;
}
.ai-email-input::placeholder { color: var(--ob-fg4) !important; }
.ai-email-input.is-invalid { color: var(--ob-danger) !important; }
.ai-email-submit {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-3));
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity .15s, transform .15s, box-shadow .15s;
    flex-shrink: 0;
    box-shadow: 0 4px 14px -3px var(--ob-accent-glow);
}
.ai-email-submit:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.ai-email-submit:not(:disabled):hover { transform: scale(1.06); }
[dir="rtl"] .ai-email-submit .fa-paper-plane { transform: scaleX(-1); }
.ai-email-meta {
    font-size: 11.5px;
    color: var(--ob-fg3);
    margin: 8px 4px 0;
    display: none;
    align-items: center;
    gap: 6px;
    direction: ltr;
}
.ai-email-meta.is-on { display: flex; }
.ai-email-status.is-valid    { color: var(--ob-success); }
.ai-email-status.is-error    { color: var(--ob-danger); }
.ai-email-status.is-checking { color: var(--ob-accent-2); }
.ai-email-status i { font-size: 10px; }
.ai-email-status span { unicode-bidi: isolate; }

/* ════════════════════════════════════════════════════════════
   OTP — 6-cell with show/hide
═══════════════════════════════════════════════════════════ */
.ai-otp-picker {
    max-width: 100%;
    margin: 8px 0 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    animation: chips-enter .35s ease forwards;
    opacity: 0;
}
.ai-otp-cells { display: inline-flex; gap: 8px; }
.ai-otp-cell {
    width: 50px;
    height: 58px;
    border-radius: 12px;
    border: 1.5px solid var(--ob-bd-strong);
    background: var(--ob-card);
    color: var(--ob-fg1);
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    font-family: 'Courier New', monospace, inherit;
    font-variant-numeric: tabular-nums;
    outline: none;
    caret-color: var(--ob-accent);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.ai-otp-cell:focus {
    border-color: var(--ob-accent);
    box-shadow: 0 0 0 4px var(--ob-accent-glow);
    background: var(--ob-card-2);
}
.ai-otp-actions { display: inline-flex; gap: 8px; }
.ai-otp-toggle,
.ai-otp-submit {
    width: 58px;
    height: 58px;
    border-radius: 12px;
    border: 1.5px solid var(--ob-bd-strong);
    background: var(--ob-card);
    color: var(--ob-fg2);
    font-size: 17px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s, opacity .15s;
}
.ai-otp-toggle:hover {
    background: var(--ob-card-hover);
    color: var(--ob-fg1);
}
.ai-otp-submit:not(:disabled) {
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-3));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 20px -6px var(--ob-accent-glow);
}
.ai-otp-submit:not(:disabled):hover { transform: translateY(-2px); }
.ai-otp-submit:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 640px) {
    .ai-otp-cell { width: 42px; height: 50px; font-size: 19px; }
    .ai-otp-toggle, .ai-otp-submit { width: 50px; height: 50px; }
}

/* ════════════════════════════════════════════════════════════
   THEME TOGGLE — sun / moon icon, smooth swap
═══════════════════════════════════════════════════════════ */
.ai-theme-toggle i {
    transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s;
}
.ai-theme-toggle:hover i {
    transform: rotate(-18deg) scale(1.08);
}
.ai-theme-toggle:active i {
    transform: rotate(0deg) scale(.92);
}
body:not(.dark-mode) .ai-theme-toggle {
    color: var(--ob-warn);
}
body:not(.dark-mode) .ai-theme-toggle:hover {
    background: var(--ob-warn-bg);
    color: var(--ob-warn);
    border-color: var(--ob-warn);
}

/* ════════════════════════════════════════════════════════════
   PREVIEW TOGGLE — header icon button (replaces in-chat pill)
═══════════════════════════════════════════════════════════ */
.ai-preview-toggle {
    position: relative;
}
/* Disabled state — shown until enough data has been collected */
.ai-preview-toggle:disabled {
    opacity: .42;
    cursor: not-allowed;
    background: transparent;
    border-color: transparent;
}
.ai-preview-toggle:disabled:hover {
    background: transparent;
    color: var(--ob-fg2);
    border-color: transparent;
}
/* Ready state — accent styling, attention dot pulsing */
.ai-preview-toggle.is-ready {
    background: var(--ob-accent-bg);
    color: var(--ob-accent-2);
    border-color: var(--ob-accent-bd);
}
.ai-preview-toggle.is-ready:hover {
    background: var(--ob-accent);
    color: #fff;
    border-color: transparent;
}
.ai-preview-toggle-dot {
    position: absolute;
    top: 7px;
    inset-inline-end: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ob-success);
    box-shadow: 0 0 0 2px var(--ob-card);
    opacity: 0;
    transform: scale(.4);
    transition: opacity .2s, transform .2s;
    pointer-events: none;
}
.ai-preview-toggle.is-ready .ai-preview-toggle-dot {
    opacity: 1;
    transform: scale(1);
    animation: pulse-soft 2s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════════════
   COMPOSER — sticky bottom, premium
═══════════════════════════════════════════════════════════ */
/* Composer wrapper — pure transparent, no background, blends with body fully.
   When hidden, collapses with a smooth open/close-from-center animation. */
.ai-composer-wrap {
    flex-shrink: 0;
    padding: 10px 20px 16px;
    background: transparent !important;
    position: relative;
    z-index: 4;
    transform-origin: 50% 50%;
    transition:
        max-height .32s cubic-bezier(.25,.8,.3,1),
        opacity    .22s ease,
        transform  .32s cubic-bezier(.25,.8,.3,1),
        padding    .32s cubic-bezier(.25,.8,.3,1);
    max-height: 260px;
    opacity: 1;
    overflow: hidden;
}
.ai-composer-wrap.is-hidden {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: scaleY(.85) scaleX(.92);
    pointer-events: none;
}

/* Composer pill — the only visible chrome. Sits on the body. */
.ai-composer-inner {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: var(--ob-card);
    border: 0.5px solid var(--ob-bd);
    border-radius: 10px;
    padding: 6px;
    transition: border-color .18s, box-shadow .18s, opacity .18s, transform .25s cubic-bezier(.25,.8,.3,1);
    transform-origin: 50% 50%;
}
.ai-composer-wrap.is-hidden .ai-composer-inner {
    transform: scale(.94);
}

.ai-composer-inner.is-disabled { opacity: .5; pointer-events: none; }

.ai-composer-inner textarea {
    flex: 1;
    min-height: 44px;
    max-height: 180px;
    resize: none;
    border: none;
    outline: none;
    background: transparent;
    color: var(--ob-fg1);
    font: inherit;
    font-size: 14.5px;
    padding: 11px 12px;
    line-height: 1.5;
}
.ai-composer-inner textarea::placeholder { color: var(--ob-fg4); }

/* Send button — perfectly centered icon using SVG-free transform reset */
.ai-send-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-3));
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .15s, opacity .15s, box-shadow .15s;
    flex-shrink: 0;
    box-shadow: 0 4px 14px -3px var(--ob-accent-glow);
    padding: 0;
    line-height: 1;
}
.ai-send-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    line-height: 1;
}
[dir="rtl"] .ai-send-btn .fa-paper-plane { transform: scaleX(-1); }
.ai-send-btn:hover:not(:disabled) {
    transform: scale(1.06);
    box-shadow: 0 6px 18px -3px var(--ob-accent-glow);
}
.ai-send-btn:active:not(:disabled) { transform: scale(.95); }
.ai-send-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* "للإرسال / press Enter" hint — hidden, not needed */
.ai-composer-foot { display: none !important; }

@media (max-width: 640px) {
    .ai-composer-wrap { padding: 6px 12px 12px; }
    .ai-send-btn { width: 40px; height: 40px; font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════
   PREVIEW DIALOG — centered modal
═══════════════════════════════════════════════════════════ */
.ai-preview-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.62);
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .26s cubic-bezier(.2,.8,.2,1);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.ai-preview-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ══════════════════════════════════════════════════════════════════
   STORE REVIEW DASHBOARD — replaces the old side drawer entirely.
   Glassmorphism shell with header, progress bar, two-column body
   (mockup + data sections), summary box, and action footer.
   ══════════════════════════════════════════════════════════════════ */
.ai-review {
    --review-radius: 24px;
    position: relative;
    width: min(1180px, calc(100vw - 32px));
    height: min(900px, calc(100dvh - 32px));
    background:
        radial-gradient(1200px 600px at -10% -20%, color-mix(in srgb, var(--ob-accent-2) 16%, transparent), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, color-mix(in srgb, var(--ob-accent) 14%, transparent), transparent 60%),
        color-mix(in srgb, var(--ob-card) 92%, transparent);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--ob-bd) 80%, transparent);
    border-radius: var(--review-radius);
    box-shadow:
        0 40px 120px -28px rgba(0,0,0,.65),
        0 0 0 1px rgba(255,255,255,.04) inset;
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    overflow: hidden;
    transform: scale(.94) translateY(20px);
    opacity: 0;
    transition: transform .3s cubic-bezier(.2,.85,.25,1), opacity .26s ease;
}
.ai-preview-backdrop.is-open .ai-review {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ── Header ── */
.ai-review-header {
    position: relative;
    padding: 20px 26px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--ob-bd) 70%, transparent);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ai-review-header-main { display: flex; align-items: center; gap: 14px; }
.ai-review-header-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ob-accent-2), var(--ob-accent));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px;
    box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--ob-accent-2) 60%, transparent);
    flex-shrink: 0;
}
.ai-review-header-text { flex: 1; min-width: 0; }
.ai-review-title {
    margin: 0 0 2px;
    font-size: 18px;
    font-weight: 800;
    color: var(--ob-fg1);
    letter-spacing: -.01em;
}
.ai-review-subtitle { margin: 0; font-size: 12.5px; color: var(--ob-fg3); }
.ai-review-header-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-review-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ob-card-2) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--ob-bd) 70%, transparent);
    color: var(--ob-fg2);
    font-size: 11.5px;
    font-weight: 600;
    backdrop-filter: blur(8px);
}
.ai-review-chip i { color: var(--ob-accent-2); font-size: 10px; }
.ai-review-chip span {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-review-chip--plan {
    background: color-mix(in srgb, #10b981 20%, transparent);
    border-color: color-mix(in srgb, #10b981 38%, transparent);
    color: #6ee7b7;
}
.ai-review-chip--plan i { color: #6ee7b7; }
.ai-review-chip--status {
    background: color-mix(in srgb, #3b82f6 20%, transparent);
    border-color: color-mix(in srgb, #3b82f6 38%, transparent);
    color: #93c5fd;
}
.ai-review-chip--status i { color: #93c5fd; }
.ai-review-close {
    position: absolute;
    top: 18px;
    inset-inline-end: 18px;
    width: 36px; height: 36px;
    border-radius: 12px;
    border: 1px solid var(--ob-bd);
    background: var(--ob-card-2);
    color: var(--ob-fg2);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, color .15s, transform .15s;
}
.ai-review-close:hover { color: var(--ob-fg1); background: var(--ob-card-hover); transform: rotate(90deg); }

/* ── Progress bar ── */
.ai-review-progress {
    padding: 14px 26px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--ob-bd) 50%, transparent);
}
.ai-review-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 11.5px;
}
.ai-review-progress-label {
    font-weight: 700;
    color: var(--ob-fg2);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10.5px;
}
.ai-review-progress-stats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--ob-fg3);
}
.ai-review-progress-stats #ai-review-progress-pct {
    font-size: 14px;
    font-weight: 800;
    color: var(--ob-accent-2);
}
.ai-review-progress-divider { opacity: .5; }
.ai-review-progress-track {
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ob-card-2) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--ob-bd) 60%, transparent);
    overflow: hidden;
}
.ai-review-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ob-accent-2), var(--ob-accent));
    box-shadow: 0 0 16px color-mix(in srgb, var(--ob-accent-2) 50%, transparent);
    transition: width .5s cubic-bezier(.2,.85,.25,1);
}

/* ── Body grid: mockup + data sections ── */
.ai-review-body {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 26px;
    display: grid;
    grid-template-columns: minmax(340px, 420px) 1fr;
    gap: 24px;
    align-items: start;
    min-height: 0;
}
.ai-review-mock-wrap {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ai-review-mock-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ob-fg3);
}
.ai-review-mock-label i { color: var(--ob-accent-2); font-size: 11px; }

/* Data sections column */
.ai-review-data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-content: start;
}
.ai-review-card {
    background: color-mix(in srgb, var(--ob-card-2) 70%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--ob-bd) 70%, transparent);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color .2s, transform .2s;
}
.ai-review-card:hover {
    border-color: color-mix(in srgb, var(--ob-accent-2) 35%, var(--ob-bd));
    transform: translateY(-1px);
}
.ai-review-card--wide { grid-column: 1 / -1; }
.ai-review-card-head { display: flex; align-items: center; gap: 10px; }
.ai-review-card-icon {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ob-accent-2) 16%, transparent);
    color: var(--ob-accent-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.ai-review-card-title { font-size: 13px; font-weight: 800; color: var(--ob-fg1); }
.ai-review-card-sub {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ob-fg3);
    margin-inline-start: auto;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ai-review-card-rows { display: flex; flex-direction: column; gap: 8px; }
.ai-review-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--ob-card) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--ob-bd) 50%, transparent);
    border-radius: 11px;
}
.ai-review-field-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--ob-fg3);
    text-transform: uppercase;
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ai-review-field-label i { color: var(--ob-accent-2); font-size: 9px; }
.ai-review-field-value {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ob-fg1);
    word-break: break-word;
}
.ai-review-field-value.is-empty {
    color: var(--ob-fg3);
    font-weight: 500;
    font-style: italic;
}
/* Skeleton — purely visual placeholder for missing/empty values */
.ai-review-skel {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ob-bd) 60%, transparent),
        color-mix(in srgb, var(--ob-bd) 30%, transparent),
        color-mix(in srgb, var(--ob-bd) 60%, transparent));
    background-size: 200% 100%;
    animation: ai-skel 1.6s linear infinite;
    margin-top: 2px;
}
@keyframes ai-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Color swatches inside branding card */
.ai-review-swatches { display: flex; gap: 10px; }
.ai-review-swatch {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--ob-card) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--ob-bd) 50%, transparent);
    border-radius: 11px;
}
.ai-review-swatch-dot {
    width: 26px; height: 26px;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,.18);
    box-shadow: 0 4px 10px rgba(0,0,0,.3);
    flex-shrink: 0;
}
.ai-review-swatch-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ai-review-swatch-name { font-size: 10px; font-weight: 700; color: var(--ob-fg3); text-transform: uppercase; letter-spacing: .04em; }
.ai-review-swatch-hex { font-size: 11.5px; font-weight: 700; color: var(--ob-fg1); font-family: ui-monospace, Menlo, Consolas, monospace; direction: ltr; }

.ai-review-logo-wrap { display: flex; gap: 12px; align-items: center; }
.ai-review-logo-preview {
    width: 64px; height: 64px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--ob-card) 70%, transparent);
    border: 1px solid var(--ob-bd);
    display: flex; align-items: center; justify-content: center;
    color: var(--ob-fg3);
    overflow: hidden;
    flex-shrink: 0;
    font-size: 22px;
}
.ai-review-logo-preview img { width: 100%; height: 100%; object-fit: cover; }
.ai-review-logo-meta { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* Smart summary box */
.ai-review-summary {
    margin: 0 26px 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--ob-accent-2) 16%, transparent),
        color-mix(in srgb, var(--ob-accent) 10%, transparent));
    border: 1px solid color-mix(in srgb, var(--ob-accent-2) 28%, transparent);
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.ai-review-summary-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ob-accent-2) 22%, transparent);
    color: var(--ob-accent-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.ai-review-summary-text {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ob-fg1);
    font-weight: 500;
}

/* Action buttons */
.ai-review-actions {
    padding: 14px 26px 20px;
    border-top: 1px solid color-mix(in srgb, var(--ob-bd) 70%, transparent);
    background: color-mix(in srgb, var(--ob-card) 60%, transparent);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.ai-review-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 14px;
    border: 1px solid var(--ob-bd);
    background: var(--ob-card-2);
    color: var(--ob-fg1);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s, background .15s, box-shadow .2s;
}
.ai-review-btn:hover { transform: translateY(-1px); background: var(--ob-card-hover); }
.ai-review-btn:active { transform: translateY(0); }
.ai-review-btn--primary {
    background: linear-gradient(135deg, var(--ob-accent-2), var(--ob-accent));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--ob-accent-2) 60%, transparent);
}
.ai-review-btn--primary:hover { box-shadow: 0 18px 36px -8px color-mix(in srgb, var(--ob-accent-2) 70%, transparent); }
.ai-review-btn--primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.ai-review-btn--ghost { background: transparent; color: var(--ob-fg2); }
.ai-review-btn--ghost:hover { color: var(--ob-fg1); background: var(--ob-card-2); }

/* Mobile + tablet — stack the body, shrink padding */
@media (max-width: 980px) {
    .ai-review {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }
    .ai-review-body { grid-template-columns: 1fr; }
    .ai-review-mock-wrap { position: static; }
    .ai-review-data { grid-template-columns: 1fr; }
    .ai-review-header,
    .ai-review-progress,
    .ai-review-body,
    .ai-review-actions { padding-left: 16px; padding-right: 16px; }
    .ai-review-summary { margin-left: 16px; margin-right: 16px; }
}

/* Keep the old empty state hidden — we always render the dashboard now */
.ai-pv-empty { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   STOREFRONT MOCKUP — visual illustration of collected data styled
   to look like a real e-commerce mini-page (header / hero / nav /
   product grid / footer). Uses CSS custom properties --pc / --sc
   driven from JS so brand colors theme the whole mockup live.
   ══════════════════════════════════════════════════════════════════ */
.ai-pv-mock {
    --pc: #6366f1;             /* primary color  (overridden via inline style)  */
    --sc: #06b6d4;             /* secondary color (overridden via inline style) */
    --pc-soft: color-mix(in srgb, var(--pc) 14%, white);
    background: #ffffff;
    color: #0f172a;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--ob-bd);
    box-shadow: 0 18px 50px -22px rgba(0,0,0,.55);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
}

/* Top bar */
.ai-pv-mock-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--pc);
    color: #fff;
}
.ai-pv-mock-logo {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.28);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 15px;
    overflow: hidden;
    flex-shrink: 0;
}
.ai-pv-mock-logo img { width: 100%; height: 100%; object-fit: cover; }
.ai-pv-mock-brand { flex: 1; min-width: 0; }
.ai-pv-mock-name {
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}
.ai-pv-mock-slug {
    font-size: 9.5px;
    opacity: .82;
    direction: ltr;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
.ai-pv-mock-slug:empty { display: none; }
.ai-pv-mock-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: rgba(255,255,255,.9);
    flex-shrink: 0;
}

/* Hero banner */
.ai-pv-mock-hero {
    padding: 18px 16px 20px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--pc) 10%, #ffffff) 0%,
        color-mix(in srgb, var(--sc) 10%, #ffffff) 100%);
    border-bottom: 1px solid #eef2f7;
}
.ai-pv-mock-hero-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pc);
    background: color-mix(in srgb, var(--pc) 14%, #ffffff);
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 8px;
}
.ai-pv-mock-hero-title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px;
    line-height: 1.25;
}
.ai-pv-mock-hero-desc {
    font-size: 11.5px;
    line-height: 1.55;
    color: #475569;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ai-pv-mock-hero-desc:empty { display: none; }
.ai-pv-mock-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: none;
    background: var(--pc);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    cursor: default;
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--pc) 60%, transparent);
}
.ai-pv-mock-cta i { font-size: 10px; }
.ai-pv-mock-cta--ghost {
    background: rgba(255,255,255,.6);
    color: var(--pc);
    box-shadow: none;
    border: 1px solid color-mix(in srgb, var(--pc) 28%, #ffffff);
}
.ai-pv-mock-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Offer card */
.ai-pv-mock-offer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--sc) 14%, #ffffff),
        color-mix(in srgb, var(--pc) 10%, #ffffff));
    border: 1px dashed color-mix(in srgb, var(--pc) 30%, transparent);
}
.ai-pv-mock-offer-tag {
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--pc);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--pc) 60%, transparent);
}
.ai-pv-mock-offer-text { min-width: 0; }
.ai-pv-mock-offer-title { font-size: 12px; font-weight: 800; color: #0f172a; }
.ai-pv-mock-offer-sub { font-size: 10.5px; color: #64748b; }

/* Category nav strip */
.ai-pv-mock-nav {
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid #eef2f7;
}
.ai-pv-mock-nav-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.ai-pv-mock-nav-strip::-webkit-scrollbar { display: none; }
.ai-pv-mock-nav-chip {
    padding: 5px 11px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid transparent;
}
.ai-pv-mock-nav-chip.is-active {
    background: color-mix(in srgb, var(--pc) 14%, #ffffff);
    color: var(--pc);
    border-color: color-mix(in srgb, var(--pc) 28%, transparent);
}

/* Generic section header */
.ai-pv-mock-section {
    padding: 14px 14px 0;
    background: #fff;
}
.ai-pv-mock-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}
.ai-pv-mock-section-title {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
}
.ai-pv-mock-section-more {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sc);
}

/* Product cards */
.ai-pv-mock-products {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-bottom: 14px;
}
.ai-pv-mock-product {
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #eef2f7;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ai-pv-mock-product-img {
    aspect-ratio: 4/3;
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--pc) 18%, #ffffff),
        color-mix(in srgb, var(--sc) 18%, #ffffff));
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--pc) 55%, #ffffff);
    font-size: 22px;
}
.ai-pv-mock-product-body { padding: 8px 9px 10px; }
.ai-pv-mock-product-name {
    font-size: 11px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px;
    line-height: 1.3;
    height: 28px;
    overflow: hidden;
}
.ai-pv-mock-product-price {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--pc);
}

/* Info ribbon — location / type cards */
.ai-pv-mock-ribbon {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px 14px 14px;
    background: #fff;
}
.ai-pv-mock-ribbon:empty { display: none; }
.ai-pv-mock-ribbon-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    min-width: 0;
}
.ai-pv-mock-ribbon-icon {
    width: 26px; height: 26px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--pc) 14%, #ffffff);
    color: var(--pc);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}
.ai-pv-mock-ribbon-text { min-width: 0; }
.ai-pv-mock-ribbon-label {
    font-size: 9.5px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ai-pv-mock-ribbon-value {
    font-size: 11.5px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer */
.ai-pv-mock-footer {
    padding: 14px;
    background: #0f172a;
    color: #cbd5e1;
}
.ai-pv-mock-footer-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.ai-pv-mock-footer-rows:empty { margin-bottom: 0; }
.ai-pv-mock-footer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}
.ai-pv-mock-footer-row i {
    color: var(--sc);
    width: 12px;
    font-size: 10px;
}
.ai-pv-mock-footer-row-value {
    direction: ltr;
    text-align: start;
    word-break: break-all;
}
.ai-pv-mock-footer-copy {
    font-size: 10px;
    color: #64748b;
    text-align: center;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.06);
}

/* Empty state — shown when not enough data */
.ai-pv-empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--ob-fg3);
}
.ai-pv-empty-icon {
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: var(--ob-card-2);
    color: var(--ob-fg3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.ai-pv-empty p {
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
    color: var(--ob-fg3);
}

/* ── Old static mockup styles — kept minimal so any stray refs don't break ── */
.ai-pv-store {
    display: none !important;   /* replaced by iframe */
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 14px 38px -16px rgba(0,0,0,.4);
    font-family: inherit;
    font-size: 12px;
}
.ai-pv-store * { box-sizing: border-box; }

/* Nav — compact proportional sizing */
.ai-pv-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--pv-color, #4f46e5) !important;
    color: #fff !important;
    gap: 10px;
}
.ai-pv-nav-brand { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ai-pv-logo {
    width: 24px; height: 24px;
    border-radius: 6px;
    background: rgba(255,255,255,.22);
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 11px;
    flex-shrink: 0;
    overflow: hidden;
    color: #fff !important;
}
.ai-pv-logo img { width: 100%; height: 100%; object-fit: cover; }
.ai-pv-name {
    font-size: 12px; font-weight: 800;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 150px; color: #fff !important;
}
.ai-pv-nav-links {
    display: flex; gap: 10px;
    font-size: 9.5px; opacity: .85;
    flex-shrink: 0; color: #fff !important;
}

/* Hero — sized for the 440px drawer (small mockup, not a competing focal point) */
.ai-pv-hero {
    padding: 22px 16px 18px;
    background: linear-gradient(150deg, var(--pv-color, #4f46e5) 0%, var(--pv-color-dark, #3730a3) 100%) !important;
    color: #fff !important;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ai-pv-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 70% 40%, rgba(255,255,255,.08), transparent 60%);
    pointer-events: none;
}
.ai-pv-hero-badge {
    display: inline-block;
    padding: 2px 10px; border-radius: 999px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.28);
    font-size: 10px; font-weight: 600;
    margin-bottom: 8px; color: #fff !important;
}
.ai-pv-hero-title {
    font-size: 16px; font-weight: 900;
    margin: 0 0 6px; line-height: 1.25;
    color: #fff !important;
    word-break: break-word;
}
.ai-pv-hero-desc {
    font-size: 10.5px; opacity: .82;
    margin: 0 0 12px; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
    color: #fff !important;
}
.ai-pv-hero-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 16px; border-radius: 999px;
    background: rgba(255,255,255,.22);
    border: 1.5px solid rgba(255,255,255,.4);
    color: #fff !important;
    font-size: 10.5px; font-weight: 700;
    cursor: default;
}
.ai-pv-hero-btn i { font-size: 10px; }

/* Progressive empty states inside the mockup — gracefully indicate
   missing fields without breaking the visual frame */
.ai-pv-store [data-empty="true"] {
    opacity: .55;
    font-style: italic;
}

/* Suggested sections strip */
.ai-pv-sections {
    padding: 16px;
    background: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb;
}
.ai-pv-sections-title {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 10px;
}
.ai-pv-sections-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.ai-pv-section {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #fff !important;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: #374151 !important;
}
.ai-pv-section i {
    color: var(--pv-color, #4f46e5) !important;
    font-size: 12px;
}

/* Meta strip */
.ai-pv-meta {
    padding: 16px;
    background: #ffffff !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    border-bottom: 1px solid #e5e7eb;
}
.ai-pv-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ai-pv-meta-label {
    font-size: 10.5px;
    color: #6b7280 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.ai-pv-meta-value {
    font-size: 12.5px;
    font-weight: 700;
    color: #111827 !important;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ai-pv-color-swatch {
    width: 14px; height: 14px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,.08);
    background: var(--pv-color, #4f46e5);
    display: inline-block;
}

/* Footer */
.ai-pv-foot {
    background: #1f2937 !important;
    color: #9ca3af !important;
    padding: 14px 16px;
    font-size: 10.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ai-pv-foot strong { color: #f9fafb !important; }

/* Mobile: dialog fills narrower screens comfortably */
@media (max-width: 480px) {
    .ai-preview-drawer {
        height: calc(100dvh - 24px);
        max-height: calc(100dvh - 24px);
    }
}

/* ════════════════════════════════════════════════════════════
   INFO MODAL — collected store details
═══════════════════════════════════════════════════════════ */
.ai-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: overlay-in .2s ease forwards;
    opacity: 0;
}
.ai-modal-overlay.is-open {
    display: flex;
    opacity: 1;
}
@keyframes overlay-in {
    to { opacity: 1; }
}
.ai-modal {
    background: var(--ob-card);
    border: 1px solid var(--ob-bd);
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--ob-shadow-lg);
    animation: modal-in .25s cubic-bezier(.2,.8,.2,1) forwards;
    transform: scale(.96) translateY(12px);
    opacity: 0;
}
@keyframes modal-in {
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.ai-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--ob-bd);
    flex-shrink: 0;
}
.ai-modal-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-3));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.ai-modal-title {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 3px;
    color: var(--ob-fg1);
    line-height: 1.2;
}
.ai-modal-sub {
    font-size: 12.5px;
    color: var(--ob-fg3);
    margin: 0;
    line-height: 1.45;
}
.ai-modal-close {
    margin-inline-start: auto;
    width: 34px; height: 34px;
    border-radius: 9px;
    border: 1px solid var(--ob-bd);
    background: var(--ob-card-2);
    color: var(--ob-fg2);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
}
.ai-modal-close:hover { background: var(--ob-card-hover); color: var(--ob-danger); border-color: var(--ob-danger); }
.ai-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 22px 22px;
}
.ai-modal-body::-webkit-scrollbar { width: 4px; }
.ai-modal-body::-webkit-scrollbar-thumb { background: var(--ob-bd-strong); border-radius: 4px; }

/* ── Sections inside modal (also reused for inline summary) ── */
.ai-section {
    background: var(--ob-card-2);
    border: 1px solid var(--ob-bd);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
}
.ai-section:last-child { margin-bottom: 0; }
.ai-section-head {
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: start;
}
.ai-section-head:hover { background: var(--ob-card-hover); }
.ai-section-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--ob-accent-bg);
    color: var(--ob-accent-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.ai-section-title {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--ob-fg1);
}
.ai-section-count {
    font-size: 11.5px;
    color: var(--ob-fg3);
    font-weight: 600;
}
.ai-section-caret {
    color: var(--ob-fg3);
    font-size: 11px;
    transition: transform .2s;
}
.ai-section.is-open .ai-section-caret { transform: rotate(180deg); }
.ai-section-body {
    display: none;
    padding: 4px 14px 14px;
    border-top: 1px solid var(--ob-bd);
}
.ai-section.is-open .ai-section-body { display: block; }
.ai-section-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--ob-bd);
}
.ai-section-row:last-child { border-bottom: none; }
.ai-section-row.just-updated { animation: rowFlash 1.6s ease; }
@keyframes rowFlash {
    0%   { background: var(--ob-accent-bg); }
    100% { background: transparent; }
}
.ai-section-row-icon {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: var(--ob-card);
    color: var(--ob-fg2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10.5px;
    flex-shrink: 0;
    border: 1px solid var(--ob-bd);
}
.ai-section-row.is-empty .ai-section-row-icon { color: var(--ob-fg4); }
.ai-section-row-text { flex: 1; min-width: 0; line-height: 1.3; }
.ai-section-row-label { font-size: 11px; color: var(--ob-fg3); }
.ai-section-row-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--ob-fg1);
    word-break: break-word;
}
.ai-section-row.is-empty .ai-section-row-value {
    color: var(--ob-fg4);
    font-weight: 400;
    font-style: italic;
}
.ai-section-row-swatch {
    width: 18px; height: 18px;
    border-radius: 6px;
    border: 1.5px solid var(--ob-bd-strong);
    display: inline-block;
    margin-inline-start: auto;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   SUMMARY CARD — inline final review with sectioned layout
═══════════════════════════════════════════════════════════ */
.ai-summary {
    background: var(--ob-card);
    border: 1.5px solid var(--ob-accent-bd);
    border-radius: 18px;
    padding: 22px;
    margin: 8px 0 16px;
    max-width: 100%;
    animation: chips-enter .45s cubic-bezier(.2,.8,.2,1) forwards;
    opacity: 0;
}
.ai-summary-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--ob-bd);
}
.ai-summary-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-3));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.ai-summary-title { font-size: 16px; font-weight: 800; margin: 0; color: var(--ob-fg1); }
.ai-summary-sub   { font-size: 12px; color: var(--ob-fg3); margin: 2px 0 0; }

.ai-summary-sections { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.ai-summary-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.ai-summary-actions button {
    flex: 1;
    height: 46px;
    border-radius: 12px;
    border: 1.5px solid var(--ob-bd-strong);
    background: var(--ob-card-2);
    color: var(--ob-fg1);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .15s, transform .15s, border-color .15s;
}
.ai-summary-actions button:hover { background: var(--ob-card-hover); border-color: var(--ob-bd-strong); }
.ai-summary-actions .primary {
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-3));
    color: #fff;
    border-color: transparent;
}
.ai-summary-actions .primary:hover { transform: translateY(-1px); }

/* ════════════════════════════════════════════════════════════
   CONFIRM DIALOG — branded replacement for native confirm()
═══════════════════════════════════════════════════════════ */
.ai-confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 10001;
    align-items: center;
    justify-content: center;
    padding: 20px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: overlay-in .2s ease forwards;
    opacity: 0;
}
.ai-confirm-overlay.is-open { display: flex; opacity: 1; }

.ai-confirm-card {
    background: var(--ob-card);
    border: 1px solid var(--ob-bd);
    border-radius: 18px;
    width: 100%;
    max-width: 420px;
    padding: 24px;
    text-align: center;
    box-shadow: var(--ob-shadow-lg);
    animation: modal-in .25s cubic-bezier(.2,.8,.2,1) forwards;
    transform: scale(.94) translateY(12px);
    opacity: 0;
}
.ai-confirm-icon {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: var(--ob-warn-bg);
    color: var(--ob-warn);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border: 1px solid color-mix(in srgb, var(--ob-warn) 30%, transparent);
}
.ai-confirm-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--ob-fg1);
    margin: 0 0 8px;
    line-height: 1.3;
}
.ai-confirm-msg {
    font-size: 13.5px;
    color: var(--ob-fg2);
    margin: 0 0 20px;
    line-height: 1.55;
}
.ai-confirm-actions {
    display: flex;
    gap: 10px;
}
.ai-confirm-actions button {
    flex: 1;
    height: 44px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background .15s, transform .15s, border-color .15s, color .15s;
}
.ai-confirm-cancel {
    background: var(--ob-card-2);
    border: 1.5px solid var(--ob-bd-strong);
    color: var(--ob-fg1);
}
.ai-confirm-cancel:hover {
    background: var(--ob-card-hover);
    border-color: var(--ob-bd-strong);
}
.ai-confirm-ok {
    background: linear-gradient(135deg, var(--ob-danger), #dc2626);
    border: 1.5px solid transparent;
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(239,68,68,.4);
}
.ai-confirm-ok:hover { transform: translateY(-1px); }

/* ════════════════════════════════════════════════════════════
   CELEBRATE — premium full-screen success
═══════════════════════════════════════════════════════════ */
.ai-celebrate {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ob-page) 92%, var(--ob-accent)) 0%, var(--ob-page) 70%);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
}
.ai-celebrate.is-on { display: flex; }
.ai-celebrate::before,
.ai-celebrate::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.ai-celebrate::before {
    width: 520px; height: 520px;
    background: radial-gradient(circle, var(--ob-accent-glow), transparent 60%);
    animation: celebrate-glow 2s ease-out forwards;
    opacity: 0;
}
.ai-celebrate::after {
    width: 280px; height: 280px;
    background: radial-gradient(circle, var(--ob-success-bg), transparent 60%);
    animation: celebrate-glow .8s ease-out forwards;
    animation-delay: .3s;
    opacity: 0;
}
@keyframes celebrate-glow {
    0%   { opacity: 0; transform: scale(.6); }
    60%  { opacity: 1; transform: scale(1.05); }
    100% { opacity: .6; transform: scale(1); }
}
.ai-celebrate-icon {
    position: relative;
    width: 104px; height: 104px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ob-success), #059669);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    box-shadow: 0 24px 60px -16px var(--ob-success-bg), 0 0 0 8px var(--ob-success-bg);
    transform: scale(0);
    animation: celebrate-pop .6s cubic-bezier(.2,1.6,.4,1) forwards;
}
@keyframes celebrate-pop {
    to { transform: scale(1); }
}
.ai-celebrate-icon svg {
    width: 50px; height: 50px;
    stroke: #fff;
    stroke-width: 4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: celebrate-check .5s ease-out .35s forwards;
}
@keyframes celebrate-check {
    to { stroke-dashoffset: 0; }
}
.ai-celebrate-title {
    position: relative;
    font-size: 32px;
    font-weight: 800;
    color: var(--ob-fg1);
    margin: 28px 0 8px;
    letter-spacing: -.5px;
    opacity: 0;
    transform: translateY(12px);
    animation: celebrate-rise .5s ease .55s forwards;
}
.ai-celebrate-sub {
    position: relative;
    font-size: 16px;
    color: var(--ob-fg2);
    margin: 0 0 14px;
    max-width: 480px;
    opacity: 0;
    transform: translateY(12px);
    animation: celebrate-rise .5s ease .75s forwards;
}
.ai-celebrate-storename {
    position: relative;
    font-size: 18px;
    font-weight: 800;
    color: var(--ob-accent-2);
    margin: 0 0 4px;
    opacity: 0;
    transform: translateY(12px);
    animation: celebrate-rise .5s ease .65s forwards;
}
.ai-celebrate-badges {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    opacity: 0;
    transform: translateY(12px);
    animation: celebrate-rise .5s ease .9s forwards;
}
.ai-celebrate-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur(6px);
}
.ai-celebrate-badge--plan {
    background: rgba(16,185,129,.18);
    border: 1px solid rgba(16,185,129,.35);
    color: #6ee7b7;
}
.ai-celebrate-badge--cod {
    background: rgba(245,158,11,.18);
    border: 1px solid rgba(245,158,11,.35);
    color: #fcd34d;
}
.ai-celebrate-badge i { font-size: 12px; }

.ai-celebrate-btn {
    position: relative;
    margin: 22px 0 0;
    padding: 14px 36px;
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-3));
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 14px 36px -10px var(--ob-accent-glow);
    opacity: 0;
    transform: translateY(12px);
    animation: celebrate-rise .5s ease 1.1s forwards;
    transition: transform .15s, box-shadow .15s;
}
.ai-celebrate-btn:hover  { transform: translateY(-2px); box-shadow: 0 20px 44px -10px var(--ob-accent-glow); }
.ai-celebrate-btn:active { transform: translateY(0); }
.ai-celebrate-redirect {
    position: relative;
    font-size: 13px;
    color: var(--ob-fg3);
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(12px);
    animation: celebrate-rise .5s ease 1.3s forwards;
}
.ai-celebrate-redirect .spinner {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid var(--ob-bd-strong);
    border-top-color: var(--ob-accent);
    animation: spin .8s linear infinite;
}
@keyframes celebrate-rise {
    to { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .ai-header { height: 56px; padding: 0 14px; }
    .ai-brand-avatar { width: 34px; height: 34px; font-size: 14px; }
    .ai-brand-title { font-size: 14px; }
    .ai-brand-sub { font-size: 11px; }
    .ai-icon-btn { width: 34px; height: 34px; }
    .ai-msg-bubble { max-width: 82%; font-size: 13.5px; }
    .ai-summary { padding: 18px; border-radius: 16px; }
    .ai-summary-actions { flex-direction: column; }
    .ai-celebrate-title { font-size: 26px; }
    .ai-celebrate-sub { font-size: 14px; }
    .ai-celebrate-icon { width: 88px; height: 88px; font-size: 32px; }
}
@media (max-width: 480px) {
    .ai-header-brand .ai-brand-sub { display: none; }
}

/* High-contrast / reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* ──────────────────────────────────────────────────────────
   SECTION 2: ONBOARDING STORE WIZARD (admin/onboarding/store)
   ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════ */
body.dark-mode {
    --ob-page:        #18181B;
    --ob-card:        #27272A;
    --ob-card-2:      #1F1F22;
    --ob-card-hover:  #2E2E33;
    --ob-bd:          rgba(255,255,255,.07);
    --ob-bd-strong:   rgba(255,255,255,.12);
    --ob-fg1:         #FAFAFA;
    --ob-fg2:         #A1A1AA;
    --ob-fg3:         #71717A;
    --ob-fg4:         #52525B;
    --ob-accent:      #6366F1;
    --ob-accent-2:    #818CF8;
    --ob-accent-bg:   rgba(99,102,241,.12);
    --ob-accent-bd:   rgba(99,102,241,.30);
    --ob-accent-glow: rgba(99,102,241,.25);
    --ob-inp-bg:      #18181B;
    --ob-inp-bd:      rgba(255,255,255,.10);
    --ob-success:     #10B981;
    --ob-success-bg:  rgba(16,185,129,.12);
    --ob-danger:      #F87171;
    --ob-danger-bg:   rgba(239,68,68,.12);
    --ob-danger-bd:   rgba(239,68,68,.30);
    --ob-shadow-lg:   0 16px 40px -8px rgba(0,0,0,.5);
    --ob-shadow-glow: 0 16px 32px -8px rgba(99,102,241,.4);
}
body:not(.dark-mode) {
    --ob-page:        #F4F4F5;
    --ob-card:        #FFFFFF;
    --ob-card-2:      #F9FAFB;
    --ob-card-hover:  #FAFAFA;
    --ob-bd:          #E4E4E7;
    --ob-bd-strong:   #D4D4D8;
    --ob-fg1:         #18181B;
    --ob-fg2:         #52525B;
    --ob-fg3:         #71717A;
    --ob-fg4:         #A1A1AA;
    --ob-accent:      #4F46E5;
    --ob-accent-2:    #6366F1;
    --ob-accent-bg:   rgba(79,70,229,.08);
    --ob-accent-bd:   rgba(79,70,229,.25);
    --ob-accent-glow: rgba(79,70,229,.15);
    --ob-inp-bg:      #FFFFFF;
    --ob-inp-bd:      #E4E4E7;
    --ob-success:     #10B981;
    --ob-success-bg:  rgba(16,185,129,.10);
    --ob-danger:      #EF4444;
    --ob-danger-bg:   #FEF2F2;
    --ob-danger-bd:   #FECACA;
    --ob-shadow-lg:   0 16px 40px -8px rgba(0,0,0,.10);
    --ob-shadow-glow: 0 12px 28px -8px rgba(79,70,229,.30);
}

/* ═══════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }


body.auth-body > main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    flex: 1;
    width: 100%;
}

/* ═══════════════════════════════════════════════
   APP SHELL
═══════════════════════════════════════════════ */
.ob-app {
    flex: 1;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ob-page);
}

/* ─── TOPBAR ──────────────────────────────────── */
.ob-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 36px;
    border-bottom: 1px solid var(--ob-bd);
    background: var(--ob-page);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: saturate(140%) blur(8px);
}

.ob-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: var(--ob-fg1);
}
.ob-brand-logo {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-2));
    color: #fff;
    font-size: 16px;
    box-shadow: 0 6px 18px -6px var(--ob-accent-glow);
}
.ob-brand-name {
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.1;
}
.ob-brand-sub {
    display: block;
    font-size: 11px;
    color: var(--ob-fg3);
    font-weight: 500;
    margin-top: 2px;
    letter-spacing: .02em;
}

.ob-topbar-end {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ob-icon-btn {
    height: 36px;
    padding: 0 12px;
    border-radius: 9px;
    background: var(--ob-card);
    border: 1px solid var(--ob-bd);
    color: var(--ob-fg2);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.ob-icon-btn:hover {
    background: var(--ob-card-hover);
    border-color: var(--ob-bd-strong);
    color: var(--ob-fg1);
    transform: translateY(-1px);
}
.ob-icon-btn i { font-size: 12px; }

.ob-step-pill {
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--ob-accent-bg);
    border: 1px solid var(--ob-accent-bd);
    color: var(--ob-accent-2);
    font-size: 12.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .01em;
}
.ob-step-pill::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ob-accent-2);
    box-shadow: 0 0 0 4px var(--ob-accent-bg);
}

/* ─── MAIN ROW ────────────────────────────────── */
.ob-main {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-height: 0;
}

/* ─── CONTENT ─────────────────────────────────── */
.ob-content {
    flex: 1;
    padding: 36px 48px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
.ob-content-inner {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
}

/* hero icon with decorative rings */
.ob-hero {
    position: relative;
    width: 220px;
    height: 110px;
    margin: 6px auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ob-hero-rings {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.ob-hero-rings span {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid var(--ob-accent);
}
.ob-hero-rings span:nth-child(1) { width: 220px; height: 220px; opacity: .05; }
.ob-hero-rings span:nth-child(2) { width: 160px; height: 160px; opacity: .10; }
.ob-hero-rings span:nth-child(3) { width: 108px; height: 108px; opacity: .18; }
.ob-hero-disk {
    position: relative;
    width: 76px; height: 76px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-2));
    color: #fff;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ob-shadow-glow);
    z-index: 1;
}

/* heading */
.ob-heading {
    text-align: center;
    margin-bottom: 28px;
}
.ob-heading h1 {
    font-size: 26px;
    font-weight: 800;
    color: var(--ob-fg1);
    margin: 0 0 8px;
    letter-spacing: -.015em;
    line-height: 1.3;
}
.ob-heading p {
    font-size: 14.5px;
    color: var(--ob-fg2);
    margin: 0;
    line-height: 1.65;
    max-width: 520px;
    margin-inline: auto;
}

/* error alert */
.ob-alert {
    background: var(--ob-danger-bg);
    border: 1px solid var(--ob-danger-bd);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--ob-danger);
}
.ob-alert strong { display:block; margin-bottom: 6px; font-weight: 700; }
.ob-alert ul { margin: 0; padding-inline-start: 20px; }
.ob-alert ul li { margin-bottom: 3px; }

/* form */
#ob-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ob-form-body { display: flex; flex-direction: column; }

/* ═══════════════════════════════════════════════
   FIELD CARDS
═══════════════════════════════════════════════ */
.ob-field {
    background: var(--ob-card);
    border: 1.5px solid var(--ob-bd);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 14px;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.ob-field:hover { border-color: var(--ob-bd-strong); }
.ob-field:focus-within {
    border-color: var(--ob-accent);
    box-shadow: 0 0 0 4px var(--ob-accent-glow);
}
.ob-field.is-err {
    border-color: var(--ob-danger);
    box-shadow: 0 0 0 4px var(--ob-danger-bg);
}

.ob-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.ob-2col .ob-field { margin-bottom: 0; }

/* label with icon */
.ob-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ob-fg1);
}
.ob-label-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--ob-accent-bg);
    color: var(--ob-accent-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: background .2s, color .2s;
}
.ob-field:focus-within .ob-label-icon {
    background: var(--ob-accent);
    color: #fff;
}
.ob-label-text {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex: 1;
    min-width: 0;
}
.ob-req {
    color: var(--ob-danger);
    font-size: 14px;
    line-height: 1;
}
.ob-hint-icon {
    font-size: 11px;
    color: var(--ob-fg3);
    cursor: help;
    margin-inline-start: 4px;
}

/* inputs */
.ob-input,
.ob-select,
.ob-textarea {
    width: 100%;
    height: 46px;
    background: var(--ob-inp-bg);
    border: 1.5px solid var(--ob-inp-bd);
    border-radius: 11px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--ob-fg1);
    font-family: inherit;
    outline: none;
    display: block;
    transition: border-color .15s, background .15s;
}
.ob-input::placeholder,
.ob-select::placeholder,
.ob-textarea::placeholder { color: var(--ob-fg4); }
.ob-input:focus,
.ob-select:focus,
.ob-textarea:focus {
    border-color: var(--ob-accent);
}
.ob-input.is-err,
.ob-select.is-err { border-color: var(--ob-danger) !important; }

.ob-select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 12px;
    padding-inline-start: 14px;
    padding-inline-end: 36px;
    cursor: pointer;
}
[dir="rtl"] .ob-select { background-position: left  14px center; }
[dir="ltr"] .ob-select { background-position: right 14px center; }

.ob-err-msg {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ob-danger);
    margin-top: 8px;
}
.ob-hint {
    font-size: 12px;
    color: var(--ob-fg3);
    margin-top: 8px;
    line-height: 1.55;
}

/* ═══════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════ */
.ob-side {
    width: 340px;
    flex-shrink: 0;
    background: var(--ob-card);
    border-inline-start: 1px solid var(--ob-bd);
    padding: 36px 28px 28px;
    display: flex;
    flex-direction: column;
    transition: background .3s;
}

/* steps list */
.ob-side-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--ob-fg3);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 18px;
}

.ob-step-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ob-step-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 12px;
    border-radius: 12px;
    transition: background .2s;
}
.ob-step-row.is-active {
    background: var(--ob-accent-bg);
}

/* connector line between circles */
.ob-step-row::after {
    content: '';
    position: absolute;
    inset-inline-start: 30px;
    top: 46px;
    bottom: -4px;
    width: 1.5px;
    background: var(--ob-bd);
    transition: background .3s;
}
.ob-step-row:last-child::after { display: none; }
.ob-step-row.is-done::after { background: var(--ob-success); }

.ob-step-num {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--ob-card-2);
    border: 1.5px solid var(--ob-bd-strong);
    color: var(--ob-fg3);
    font-size: 12.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: all .25s;
}
.ob-step-row.is-active .ob-step-num {
    background: var(--ob-accent);
    border-color: var(--ob-accent);
    color: #fff;
    box-shadow: 0 0 0 4px var(--ob-accent-glow);
}
.ob-step-row.is-done .ob-step-num {
    background: var(--ob-success);
    border-color: var(--ob-success);
    color: #fff;
}

.ob-step-info { padding-top: 4px; min-width: 0; }
.ob-step-label {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ob-fg2);
    line-height: 1.3;
    margin-bottom: 3px;
    transition: color .2s;
}
.ob-step-sub {
    display: block;
    font-size: 12px;
    color: var(--ob-fg3);
    line-height: 1.4;
}
.ob-step-row.is-active .ob-step-label { color: var(--ob-fg1); }
.ob-step-row.is-active .ob-step-sub   { color: var(--ob-fg2); }
.ob-step-row.is-done   .ob-step-label { color: var(--ob-fg2); }

/* tips box */
.ob-tip {
    margin-top: auto;
    background: var(--ob-card-2);
    border: 1px solid var(--ob-bd);
    border-radius: 14px;
    padding: 18px;
    position: relative;
    overflow: hidden;
}
.ob-tip::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--ob-accent), var(--ob-accent-2));
}
.ob-tip-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.ob-tip-icon {
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--ob-accent-bg);
    color: var(--ob-accent-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.ob-tip-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ob-fg1);
}
.ob-tip-body {
    font-size: 12.5px;
    color: var(--ob-fg2);
    line-height: 1.7;
    margin: 0;
}

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.ob-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 36px;
    border-top: 1px solid var(--ob-bd);
    background: var(--ob-card);
}
.ob-footer-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ob-enter-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ob-fg3);
}
.ob-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 6px;
    background: var(--ob-card-2);
    border: 1px solid var(--ob-bd-strong);
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ob-fg2);
    font-family: inherit;
}

.ob-progress-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ob-progress {
    width: 180px;
    height: 6px;
    border-radius: 999px;
    background: var(--ob-bd);
    overflow: hidden;
}

.ob-progress-text {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ob-fg1);
    white-space: nowrap;
}
.ob-progress-text small {
    color: var(--ob-fg3);
    font-weight: 500;
    margin-inline-start: 4px;
}

/* primary button */
.btn-ob-primary {
    height: 44px;
    padding: 0 24px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-2));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: transform .15s, box-shadow .15s, opacity .15s;
    box-shadow: 0 6px 18px -6px var(--ob-accent-glow);
}
.btn-ob-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -6px var(--ob-accent-glow);
}
.btn-ob-primary:active { transform: none; opacity: .92; }
.btn-ob-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .ob-side { width: 300px; padding: 28px 22px 22px; }
    .ob-content { padding: 32px 32px 40px; }
}
@media (max-width: 900px) {
    .ob-main { flex-direction: column; }
    .ob-side {
        width: 100%;
        border-inline-start: none;
        border-top: 1px solid var(--ob-bd);
        order: 2;
        padding: 22px 24px;
    }
    .ob-step-list { flex-direction: row; gap: 10px; overflow-x: auto; }
    .ob-step-row { padding: 10px; flex: 1; min-width: 200px; }
    .ob-step-row::after { display: none; }
    .ob-tip { margin-top: 18px; }
    .ob-content { padding: 28px 24px 32px; }
    .ob-topbar { padding: 14px 22px; }
    .ob-footer { padding: 14px 22px; flex-wrap: wrap; }
}
@media (max-width: 600px) {
    .ob-2col { grid-template-columns: 1fr; }
    .ob-brand-sub { display: none; }
    .ob-progress { width: 110px; }
    .ob-enter-hint { display: none; }
    .ob-step-pill { padding: 0 10px; font-size: 11.5px; }
    .ob-heading h1 { font-size: 22px; }
    .ob-hero { width: 180px; height: 100px; }
    .ob-hero-rings span:nth-child(1) { width: 180px; height: 180px; }
    .ob-hero-rings span:nth-child(2) { width: 132px; height: 132px; }
    .ob-icon-btn span { display: none; }
    .ob-icon-btn { padding: 0 10px; }
}


/* ──────────────────────────────────────────────────────────
   SECTION 3: ONBOARDING CHOICE (admin/onboarding/choice)
   ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body.dark-mode {
    --ob-page:        #18181B;
    --ob-card:        #27272A;
    --ob-card-2:      #1F1F22;
    --ob-card-hover:  #2E2E33;
    --ob-bd:          rgba(255,255,255,.07);
    --ob-bd-strong:   rgba(255,255,255,.12);
    --ob-fg1:         #FAFAFA;
    --ob-fg2:         #A1A1AA;
    --ob-fg3:         #71717A;
    --ob-accent:      #6366F1;
    --ob-accent-2:    #818CF8;
    --ob-accent-bg:   rgba(99,102,241,.12);
    --ob-accent-bd:   rgba(99,102,241,.30);
    --ob-accent-glow: rgba(99,102,241,.30);
    --ob-success:     #10B981;
}
body:not(.dark-mode) {
    --ob-page:        #F4F4F5;
    --ob-card:        #FFFFFF;
    --ob-card-2:      #F9FAFB;
    --ob-card-hover:  #FAFAFA;
    --ob-bd:          #E4E4E7;
    --ob-bd-strong:   #D4D4D8;
    --ob-fg1:         #18181B;
    --ob-fg2:         #52525B;
    --ob-fg3:         #71717A;
    --ob-accent:      #4F46E5;
    --ob-accent-2:    #6366F1;
    --ob-accent-bg:   rgba(79,70,229,.08);
    --ob-accent-bd:   rgba(79,70,229,.25);
    --ob-accent-glow: rgba(79,70,229,.18);
    --ob-success:     #10B981;
}

*, *::before, *::after { box-sizing: border-box; }

body.auth-body > main { display: flex; flex-direction: column; min-height: 100vh; flex: 1; width: 100%; }

.ch-wrap {
    flex: 1; min-height: 100vh;
    display: flex; flex-direction: column;
    background: var(--ob-page);
}

.ch-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 36px;
    border-bottom: 1px solid var(--ob-bd);
}
.ch-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ob-fg1); }
.ch-brand-logo {
    width: 38px; height: 38px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-2));
    color: #fff; font-size: 16px;
    box-shadow: 0 6px 18px -6px var(--ob-accent-glow);
}
.ch-brand-name { font-size: 15.5px; font-weight: 800; line-height: 1.1; }
.ch-brand-sub  { display: block; font-size: 11px; color: var(--ob-fg3); margin-top: 2px; }

.ch-top-actions { display: inline-flex; align-items: center; gap: 10px; }
.ch-icon-btn {
    height: 36px; padding: 0 12px;
    border-radius: 9px;
    background: var(--ob-card);
    border: 1px solid var(--ob-bd);
    color: var(--ob-fg2);
    font-size: 12.5px; font-weight: 600;
    text-decoration: none; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 7px;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.ch-icon-btn:hover { background: var(--ob-card-hover); border-color: var(--ob-bd-strong); color: var(--ob-fg1); transform: translateY(-1px); }
.ch-icon-btn i { font-size: 12px; }

.ch-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    position: relative;
    overflow: hidden;
}

/* ambient glow */
.ch-body::before {
    content: '';
    position: absolute;
    width: 560px; height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ob-accent-bg) 0%, transparent 70%);
    top: -200px; inset-inline-start: -180px;
    pointer-events: none;
    opacity: .9;
}
.ch-body::after {
    content: '';
    position: absolute;
    width: 460px; height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ob-accent-bg) 0%, transparent 70%);
    bottom: -180px; inset-inline-end: -120px;
    pointer-events: none;
    opacity: .7;
}

.ch-inner {
    position: relative;
    width: 100%;
    max-width: 980px;
    text-align: center;
    z-index: 1;
}

.ch-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--ob-accent-bg);
    border: 1px solid var(--ob-accent-bd);
    color: var(--ob-accent-2);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.ch-eyebrow i { font-size: 10px; }

.ch-heading {
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0 0 12px;
}
.ch-subheading {
    font-size: 15px;
    color: var(--ob-fg2);
    line-height: 1.7;
    margin: 0 auto 40px;
    max-width: 560px;
}

.ch-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    max-width: 880px;
    margin: 0 auto;
    text-align: start;
}

.ch-card {
    position: relative;
    background: var(--ob-card);
    border: 1.5px solid var(--ob-bd);
    border-radius: 22px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color .2s, transform .2s, box-shadow .2s;
    cursor: pointer;
}
.ch-card:hover {
    border-color: var(--ob-bd-strong);
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -16px rgba(0,0,0,.35);
}
.ch-card.is-featured {
    border-color: var(--ob-accent-bd);
    box-shadow: 0 14px 42px -18px var(--ob-accent-glow);
}
.ch-card.is-featured::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 22px;
    padding: 1.5px;
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-2), transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: .6;
}

.ch-card-badge {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-2));
    color: #fff;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    z-index: 1;
}
.ch-card-badge i { font-size: 9px; }

.ch-card-icon {
    width: 60px; height: 60px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}
.ch-card.ai .ch-card-icon {
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-2));
    color: #fff;
    box-shadow: 0 14px 30px -10px var(--ob-accent-glow);
}
.ch-card.manual .ch-card-icon {
    background: var(--ob-card-2);
    color: var(--ob-fg1);
    border: 1.5px solid var(--ob-bd);
}

.ch-card-title { font-size: 19px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.ch-card-sub   { font-size: 13.5px; color: var(--ob-fg2); line-height: 1.65; margin: 0; }

.ch-card-bullets {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.ch-card-bullets li {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px;
    color: var(--ob-fg2);
}
.ch-card-bullets li i {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--ob-accent-bg);
    color: var(--ob-accent-2);
    font-size: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ch-card-cta {
    margin-top: auto;
    height: 46px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px; font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    transition: transform .15s, box-shadow .15s, background .15s;
}
.ch-card.ai .ch-card-cta {
    background: linear-gradient(135deg, var(--ob-accent), var(--ob-accent-2));
    color: #fff;
    box-shadow: 0 8px 24px -8px var(--ob-accent-glow);
}
.ch-card.ai .ch-card-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -8px var(--ob-accent-glow); }
.ch-card.manual .ch-card-cta {
    background: var(--ob-card-2);
    color: var(--ob-fg1);
    border: 1.5px solid var(--ob-bd-strong);
}
.ch-card.manual .ch-card-cta:hover { background: var(--ob-card-hover); }

.ch-form-inline { display: contents; }

.ch-tip {
    margin-top: 36px;
    font-size: 12.5px;
    color: var(--ob-fg3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ch-tip i { color: var(--ob-accent-2); }

@media (max-width: 720px) {
    .ch-cards { grid-template-columns: 1fr; }
    .ch-topbar { padding: 14px 20px; }
    .ch-brand-sub { display: none; }
    .ch-body { padding: 28px 18px; }
}


/* ──────────────────────────────────────────────────────────
   SECTION 4: STEP 1 — Store type picker (steps/step1)
   ────────────────────────────────────────────────────────── */
/* Product-type radio cards */
.pt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.pt-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    cursor: pointer;
    border: 1.5px solid var(--ob-inp-bd);
    background: var(--ob-inp-bg);
    transition: border-color .15s, background .15s, transform .15s;
    margin: 0;
}
.pt-card:hover  { border-color: var(--ob-bd-strong); transform: translateY(-1px); }
.pt-card.pt-sel { border-color: var(--ob-accent); background: var(--ob-accent-bg); }
.pt-card input[type="radio"] { display: none; }
.pt-card-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ob-accent-bg);
    color: var(--ob-accent-2);
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.pt-card.pt-sel .pt-card-icon {
    background: var(--ob-accent);
    color: #fff;
}
.pt-card-icon i { font-size: 15px; }
.pt-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ob-fg1);
    margin-bottom: 4px;
}
.pt-card-sub {
    font-size: 12px;
    color: var(--ob-fg2);
    line-height: 1.5;
}
.pt-card-check {
    margin-inline-start: auto;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--ob-bd-strong);
    flex-shrink: 0;
    align-self: center;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 10px;
}
.pt-card.pt-sel .pt-card-check {
    background: var(--ob-accent);
    border-color: var(--ob-accent);
    color: #fff;
}

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


/* ──────────────────────────────────────────────────────────
   SECTION 5: STEP 2 — Store details (steps/step2)
   ────────────────────────────────────────────────────────── */
/* Upload box */
.ubox {
    border: 1.5px dashed var(--ob-inp-bd);
    border-radius: 12px;
    padding: 20px 14px;
    text-align: center;
    cursor: pointer;
    background: var(--ob-inp-bg);
    position: relative;
    transition: border-color .15s, background .15s;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ubox:hover { border-color: var(--ob-accent); background: var(--ob-accent-bg); }
.ubox input[type="file"] {
    position: absolute; inset: 0;
    opacity: 0; cursor: pointer;
    width: 100%; height: 100%;
}
.ubox-preview {
    max-height: 64px;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 8px;
    display: block;
    border-radius: 8px;
}
.ubox-ph-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--ob-accent-bg);
    color: var(--ob-accent-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.ubox-ph-icon i { font-size: 16px; }
.ubox-ph-title {
    font-size: 12.5px;
    color: var(--ob-fg1);
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
}
.ubox-ph-sub {
    font-size: 11.5px;
    color: var(--ob-fg3);
    display: block;
}

/* Color row */
.clr-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    height: 46px;
    background: var(--ob-inp-bg);
    border: 1.5px solid var(--ob-inp-bd);
    border-radius: 11px;
    transition: border-color .15s;
}
.clr-row:focus-within { border-color: var(--ob-accent); }
.clr-row input[type="color"] {
    width: 28px; height: 28px;
    border: none;
    border-radius: 7px;
    padding: 0;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
    overflow: hidden;
}
.clr-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 7px; }
.clr-row input[type="color"]::-moz-color-swatch    { border: none; border-radius: 7px; }
.clr-val {
    font-size: 13px;
    color: var(--ob-fg2);
    font-family: 'Courier New', monospace;
    flex: 1;
    text-transform: uppercase;
}

/* Slug group */
.slug-group {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--ob-inp-bd);
    border-radius: 11px;
    overflow: hidden;
    background: var(--ob-inp-bg);
    transition: border-color .15s;
}
.slug-group:focus-within { border-color: var(--ob-accent); }
.slug-group input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border: none;
    background: transparent;
    padding: 0 14px;
    font-size: 14px;
    color: var(--ob-fg1);
    font-family: inherit;
    outline: none;
}
.slug-group input::placeholder { color: var(--ob-fg4); }
.slug-prefix {
    flex-shrink: 0;
    padding: 0 14px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--ob-fg3);
    border-inline-start: 1.5px solid var(--ob-inp-bd);
    background: var(--ob-card-2);
    white-space: nowrap;
    font-family: 'Courier New', monospace;
}
.slug-status {
    font-size: 12px;
    margin-top: 8px;
    min-height: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
}


/* ──────────────────────────────────────────────────────────
   SECTION 6: STEP 3 — Account setup (steps/step3)
   ────────────────────────────────────────────────────────── */
/* PIN field */
.pin-wrap { position: relative; }
.pin-wrap .ob-input {
    padding-inline-end: 50px;
    letter-spacing: .25em;
    font-size: 17px;
    font-weight: 700;
}
.pin-eye {
    position: absolute;
    inset-inline-end: 4px;
    top: 4px;
    width: 38px; height: 38px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ob-fg3);
    font-size: 14px;
    transition: color .15s;
    border-radius: 8px;
}
.pin-eye:hover { color: var(--ob-fg1); background: var(--ob-card-2); }

/* Phone group */
.phone-group {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--ob-inp-bd);
    border-radius: 11px;
    overflow: hidden;
    background: var(--ob-inp-bg);
    transition: border-color .15s;
}
.phone-group:focus-within { border-color: var(--ob-accent); }
.phone-group input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border: none;
    background: transparent;
    padding: 0 14px;
    font-size: 14px;
    color: var(--ob-fg1);
    font-family: inherit;
    outline: none;
    direction: ltr;
    text-align: start;
}
.phone-group input::placeholder { color: var(--ob-fg4); }
.phone-prefix {
    flex-shrink: 0;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ob-card-2);
    border-inline-end: 1.5px solid var(--ob-inp-bd);
    font-size: 13px;
    color: var(--ob-fg2);
    font-weight: 600;
}

/* Readonly email styling */
.ob-input.is-readonly {
    background: var(--ob-card-2);
    color: var(--ob-fg2);
    cursor: default;
}

/* Completion hint */
.completion-hint {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--ob-success-bg);
    border: 1px solid rgba(16,185,129,.25);
    border-radius: 12px;
    margin-bottom: 16px;
}
.completion-hint-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--ob-success);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.completion-hint-body {
    flex: 1;
    font-size: 13px;
    color: var(--ob-fg1);
    line-height: 1.6;
}
.completion-hint-body strong { font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
   Addon Settings
   Merged from: addon-settings.css
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
 *
 *  EL MATAJER — ADDON SETTINGS PANEL (shared layout)
 *
 *  Pattern: Two-column settings page used by addon configuration views.
 *  Replaces inline <style> blocks in at least 8 blade files, each of which
 *  duplicates the same grid / hero / badge / card structure under different
 *  class-name prefixes (.qc-, .cd-, .sn-, .sh-, .tw-, .tg-, .gs-, .wa-).
 *
 *  Generic class names (Bootstrap-safe — no conflicts with bs- namespace):
 *    .addon-wrap          — page container / max-width centring
 *    .addon-grid          — two-column responsive grid
 *    .addon-hero          — full-width gradient hero banner
 *    .addon-hero::after   — decorative circle overlay
 *    .addon-badge         — pill badge inside hero
 *    .addon-card          — settings / info card
 *    .addon-card-title    — card section heading
 *    .addon-info          — feature list (ul)
 *    .addon-guide         — dashed hint / guide box
 *    .addon-note          — note box (lighter variant)
 *    .addon-switch        — toggle switch wrapper
 *    .addon-slider        — toggle switch track
 *    .addon-save-btn      — gradient save / action button
 *
 *  ─── MIGRATION GUIDE (Wave 3) ──────────────────────────────────────────────
 *
 *  Per-file rename map:
 *    quick_call/index.blade.php
 *      .qc-wrap  → .addon-wrap     .qc-grid   → .addon-grid
 *      .qc-hero  → .addon-hero     .qc-badge  → .addon-badge
 *      .qc-card  → .addon-card     .qc-title  → .addon-card-title
 *      .qc-info  → .addon-info     .qc-guide  → .addon-guide
 *      .switch / .slider → .addon-switch / .addon-slider
 *      .qc-btn   → .addon-save-btn
 *      UNIQUE TO FILE: .qc-radio, .qc-image, .qc-desc — keep per-file
 *
 *    cart_checkout_countdown/index.blade.php
 *      .cd-wrap → .addon-wrap   .cd-grid → .addon-grid
 *      .cd-hero → .addon-hero   .cd-badge → .addon-badge
 *      .cd-card → .addon-card   .cd-title → .addon-card-title
 *      .cd-info → .addon-info   .cd-note  → .addon-note
 *      .switch / .slider → .addon-switch / .addon-slider
 *      .btn-cd  → .addon-save-btn
 *      UNIQUE TO FILE: none (all structural)
 *
 *    fake_sales_notification/index.blade.php
 *      .sn-wrap → .addon-wrap   .sn-grid → .addon-grid
 *      .sn-hero → .addon-hero   .sn-badge → .addon-badge
 *      .sn-card → .addon-card   .sn-title → .addon-card-title
 *      .sn-info → .addon-info   .sn-note  → .addon-note
 *      .switch / .slider → .addon-switch / .addon-slider
 *      .btn-sn  → .addon-save-btn
 *      UNIQUE TO FILE: .sn-toggle
 *
 *    shopify/shopify_setting.blade.php
 *      .sh-wrap → .addon-wrap   .sh-grid → .addon-grid
 *      .sh-hero → .addon-hero   .sh-badge → .addon-badge
 *      .sh-card → .addon-card   .sh-title → .addon-card-title
 *      .sh-info → .addon-info
 *      .btn-sh  → .addon-save-btn
 *      UNIQUE TO FILE: .sh-error (error box)
 *
 *    tawk_settings/tawk_setting.blade.php
 *      .tw-wrap → .addon-wrap   .tw-grid → .addon-grid
 *      .tw-hero → .addon-hero   .tw-badge → .addon-badge
 *      .tw-card → .addon-card   .tw-title → .addon-card-title
 *      .tw-info → .addon-info   .tw-guide → .addon-guide
 *      .switch / .slider → .addon-switch / .addon-slider
 *      .btn-tw  → .addon-save-btn
 *      UNIQUE TO FILE: .tw-link (styled anchor), textarea scrollbar suppression
 *
 *    telegram_message/vendor_telegram_settings.blade.php
 *      .tg-wrap  → .addon-wrap   .tg-grid → .addon-grid
 *      .tg-hero  → .addon-hero   .tg-badge → .addon-badge
 *      .tg-card  → .addon-card
 *      .tg-feature-list → .addon-info
 *      .tg-guide → .addon-guide
 *      .btn-tg-primary → .addon-save-btn
 *      UNIQUE TO FILE: .tg-input, .btn-tg-secondary, .tg-section-title, .tg-status-badge
 *
 *    google_sheets_sync/index.blade.php
 *      .gs-hero  → .addon-hero (variant with badge panel, not icon)
 *      UNIQUE TO FILE: entire 3-col grid (.gs-grid), .gs-steps, .gs-copy-body,
 *        .gs-toast, all --da3-* custom properties. This file uses a different
 *        3-column layout — migrate hero/card only, keep .gs-* grid CSS.
 *
 *    included/whatsapp_message/vendor-dashboard.blade.php
 *      .wa-settings-hero → .addon-hero
 *      .wa-settings-card → .addon-card
 *      .wh-grid → .addon-grid   .wh-badge → .addon-badge
 *      UNIQUE TO FILE: .wa-settings-stat-grid, .chart-container, .debt-modal,
 *        payment tiles, progress bar — keep per-file.
 *
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Page container ────────────────────────────────────────────────────── */
.addon-wrap {
    max-width: 1250px;
    margin: 0 auto;
    direction: rtl; /* default RTL for Arabic admin; override in LTR contexts */
}

/* ── 2. Two-column grid ───────────────────────────────────────────────────── */
.addon-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 28px;
}

/* ── 3. Hero banner ───────────────────────────────────────────────────────── */
.addon-hero {
    position: relative;
    overflow: hidden;
    /* Gradient colours are per-addon — set via inline style or a modifier class.
       This fallback uses the primary brand colour token. */
    background: linear-gradient(135deg, var(--primary-hover, #1558d0), var(--primary, #1d6ef5));
    border-radius: var(--radius-xl, 26px);
    padding: 38px;
    color: #fff;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Decorative circle */
.addon-hero::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    right: -120px;
    top: -120px;
    pointer-events: none;
}

.addon-hero h2 {
    font-size: 22px;
    font-weight: 900;
    margin: 0 0 6px;
}

.addon-hero p {
    font-size: 14px;
    opacity: 0.9;
    margin: 0;
}

/* ── 4. Hero badge (pill label) ───────────────────────────────────────────── */
.addon-badge {
    background: #fff;
    color: var(--primary, #1d6ef5);       /* each file overrides via --addon-color */
    padding: 6px 14px;
    font-weight: 800;
    border-radius: 999px;
    font-size: 12px;
    display: inline-block;
    margin-bottom: 10px;
}

/* ── 5. Card ──────────────────────────────────────────────────────────────── */
.addon-card {
    background: var(--card-bg, #fff);
    border-radius: var(--radius-xl, 22px);
    padding: 30px;
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: var(--shadow-md, 0 15px 40px rgba(0, 0, 0, 0.05));
    text-align: right;         /* RTL default */
}

/* ── 6. Card title ────────────────────────────────────────────────────────── */
.addon-card-title {
    font-weight: 900;
    font-size: 18px;
    margin-bottom: 24px;
    color: var(--text-primary, #0f172a);
}

/* ── 7. Feature info list ─────────────────────────────────────────────────── */
.addon-info {
    list-style: none;
    padding: 0;
    margin: 0;
}

.addon-info li {
    display: flex;
    gap: 10px;
    font-size: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft, #f1f5f9);
    color: var(--text-secondary, #374151);
}

.addon-info li:last-child {
    border-bottom: none;
}

.addon-info i {
    color: var(--color-success, #10b981);
    margin-top: 4px;
    flex-shrink: 0;
}

/* ── 8. Guide box (dashed, accent-tinted) ─────────────────────────────────── */
.addon-guide {
    background: var(--color-success-light, rgba(16, 185, 129, 0.06));
    border: 1px dashed var(--color-success, #10b981);
    border-radius: var(--radius-lg, 16px);
    padding: 18px;
    margin-top: 22px;
    text-align: right;
}

.addon-guide h6 {
    font-weight: 900;
    margin-bottom: 10px;
    font-size: 14px;
}

.addon-guide li {
    font-size: 14px;
    margin-bottom: 6px;
}

/* ── 9. Note box (lighter, neutral tint) ─────────────────────────────────── */
.addon-note {
    background: var(--bg-light, #f8fafc);
    border: 1px dashed var(--border-color, #e2e8f0);
    border-radius: var(--radius-lg, 16px);
    padding: 18px;
    margin-top: 22px;
    font-size: 14px;
    color: var(--text-secondary, #475569);
    text-align: right;
}

/* ── 10. Toggle switch ────────────────────────────────────────────────────── */
.addon-switch {
    width: 56px;
    height: 30px;
    position: relative;
    flex-shrink: 0;
}

.addon-switch input {
    display: none;
}

.addon-slider {
    position: absolute;
    inset: 0;
    background: var(--border-color, #e5e7eb);
    border-radius: 999px;
    transition: background var(--duration-base, 0.3s) var(--ease-base, ease);
    cursor: pointer;
}

.addon-slider::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left: 4px;
    top: 4px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--duration-base, 0.3s) var(--ease-base, ease);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* When checked, use primary brand colour (overridden per-addon via inline style) */
.addon-switch input:checked + .addon-slider {
    background: var(--addon-color, var(--primary, #1d6ef5));
}

.addon-switch input:checked + .addon-slider::before {
    transform: translateX(26px);
}

/* ── 11. Save button ──────────────────────────────────────────────────────── */
.addon-save-btn {
    background: linear-gradient(
        135deg,
        var(--addon-color, var(--primary, #1d6ef5)),
        var(--addon-color-dark, var(--primary-hover, #1558d0))
    );
    color: #fff;
    border: none;
    font-weight: 900;
    border-radius: var(--radius-md, 14px);
    padding: 12px 28px;
    cursor: pointer;
    transition: filter var(--duration-fast, 0.15s), transform var(--duration-fast, 0.15s);
}

.addon-save-btn:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  DARK MODE OVERRIDES
 *  Most values resolve automatically through tokens.css.
 *  Only properties that need an explicit dark-mode nudge are listed here.
 * ═════════════════════════════════════════════════════════════════════════ */
body.dark-mode .addon-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .addon-info li {
    border-bottom-color: var(--border-color);
}

body.dark-mode .addon-note {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

body.dark-mode .addon-guide {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.35);
}

body.dark-mode .addon-slider {
    background: var(--border-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  RESPONSIVE — mobile-first breakpoint
 * ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Grid: stack to single column */
    .addon-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* Hero: stack icon below text */
    .addon-hero {
        flex-direction: column;
        text-align: center;
        padding: 26px 18px;
        border-radius: var(--radius-xl, 22px);
        margin-bottom: 24px;
    }

    .addon-hero > i,
    .addon-hero > img {
        margin-top: 14px;
        font-size: 42px !important;
        width: 54px !important;
    }

    /* Cards: tighter padding, smaller radius */
    .addon-card {
        padding: 20px;
        border-radius: var(--radius-lg, 18px);
    }

    /* Save button: full width */
    .addon-save-btn {
        width: 100%;
        padding: 12px 0;
        font-size: 14px;
    }

    /* Toggle row: stack vertically */
    .addon-card .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }

}


/* ═══════════════════════════════════════════════════════════════════════════════
 * APPS INDEX  (.am-hero, .am-card)
 * ─────────────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════
   Addons Manager — Token-based, dark + light
   ══════════════════════════════════════════════ */

/* Hero */
.am-hero {
    background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
    border-radius: var(--radius-lg);
    padding: 36px 40px;
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.am-hero::before {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    background: rgba(255,255,255,.06);
    border-radius: 50%;
    right: -100px;
    top: -120px;
    pointer-events: none;
}
.am-hero::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    background: rgba(255,255,255,.05);
    border-radius: 50%;
    left: 40%;
    bottom: -80px;
    pointer-events: none;
}
.am-hero-icon {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,.18);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,.25);
}
.am-hero-text h2 {
    font-size: 24px;
    font-weight: 900;
    margin: 0 0 6px;
}
.am-hero-text p {
    font-size: 14px;
    opacity: .85;
    margin: 0;
}
.am-hero-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    z-index: 1;
    flex-wrap: wrap;
}
.btn-am-primary {
    background: #fff;
    color: var(--primary);
    border: none;
    padding: 11px 22px;
    border-radius: var(--radius-md);
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all .25s;
    white-space: nowrap;
}
.btn-am-primary:hover {
    background: rgba(255,255,255,.9);
    transform: translateY(-2px);
    color: var(--primary);
}
.btn-am-ghost {
    background: rgba(255,255,255,.15);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.3);
    padding: 11px 22px;
    border-radius: var(--radius-md);
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all .25s;
    white-space: nowrap;
}
.btn-am-ghost:hover {
    background: rgba(255,255,255,.25);
    color: #fff;
    transform: translateY(-2px);
}

/* Stats bar */
.am-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.am-stat-pill {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 140px;
    box-shadow: var(--shadow-sm);
}
.am-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.am-stat-info .am-stat-num {
    font-size: 22px;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1.1;
}
.am-stat-info .am-stat-lbl {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Toolbar */
.am-toolbar {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.am-search-wrap {
    flex: 1;
    min-width: 200px;
    position: relative;
}
.am-search-wrap i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 14px;
    pointer-events: none;
}
html[dir="rtl"] .am-search-wrap i { right: 14px; }
html[dir="ltr"] .am-search-wrap i { left: 14px; }
.am-search-wrap input {
    width: 100%;
    padding: 11px 40px;
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    outline: none;
    transition: border-color .2s;
}
.am-search-wrap input:focus { border-color: var(--primary); }
.am-search-wrap input::placeholder { color: var(--text-secondary); }

.am-filter-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.am-filter-btn {
    padding: 10px 18px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}
.am-filter-btn.active,
.am-filter-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Addon Grid */
.am-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
}

/* Addon Card */
.am-card {
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .25s, box-shadow .25s, border-color .25s;
    display: flex;
    flex-direction: column;
}
.am-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(91,61,245,.12);
    border-color: rgba(91,61,245,.25);
}
.am-card-img-wrap {
    height: 160px;
    overflow: hidden;
    background: var(--bg-secondary);
    position: relative;
}
.am-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.am-card:hover .am-card-img-wrap img {
    transform: scale(1.04);
}
.am-card-status-badge {
    position: absolute;
    top: 12px;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: .4px;
    z-index: 2;
}
html[dir="rtl"] .am-card-status-badge { right: 12px; }
html[dir="ltr"] .am-card-status-badge { left: 12px; }
.status-active { background: #16a34a; color: #fff; }
.status-inactive { background: rgba(0,0,0,.5); color: #fff; }

.am-card-body {
    padding: 18px 20px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.am-card-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}
.am-card-date {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

.am-card-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.am-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.am-toggle-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Toggle switch */
.am-toggle {
    position: relative;
    width: 46px;
    height: 26px;
    cursor: pointer;
    user-select: none;
}
.am-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.am-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--border-color);
    transition: background .2s;
}
.am-toggle input:checked + .am-toggle-track {
    background: #16a34a;
}
.am-toggle-thumb {
    position: absolute;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    transition: transform .2s;
}
html[dir="rtl"] .am-toggle-thumb { right: 3px; }
html[dir="ltr"] .am-toggle-thumb { left: 3px; }
html[dir="rtl"] .am-toggle input:checked ~ .am-toggle-thumb { transform: translateX(-20px); }
html[dir="ltr"] .am-toggle input:checked ~ .am-toggle-thumb { transform: translateX(20px); }

/* Empty state */
.am-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-secondary);
}
.am-empty i {
    font-size: 52px;
    margin-bottom: 18px;
    opacity: .4;
    display: block;
}
.am-empty h4 {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 10px;
}
.am-empty p {
    font-size: 14px;
    max-width: 320px;
    margin: 0 auto 20px;
}
.btn-am-store {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 12px 26px;
    border-radius: var(--radius-md);
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    transition: all .25s;
}
.btn-am-store:hover {
    background: var(--primary);
    opacity: .9;
    transform: translateY(-2px);
    color: #fff;
}

@media (max-width: 768px) {
    .am-hero { flex-direction: column; align-items: flex-start; padding: 24px; }
    .am-hero-actions { width: 100%; }
    .btn-am-primary, .btn-am-ghost { flex: 1; justify-content: center; }
    .am-stats { flex-direction: column; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * OTHERPAGES SETTINGS  (.am-hero, .sp-)
 * ─────────────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════
   Settings Page — Token-based design (dark + light ready)
   ══════════════════════════════════════════════════════════ */

/* ── Layout ─────────────────────────────────────────────── */
.sp-wrap {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding-top: 8px;
}

/* ── Sidebar ────────────────────────────────────────────── */
.sp-nav {
    width: 256px;
    flex-shrink: 0;
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
.sp-nav::-webkit-scrollbar { width: 4px; }
.sp-nav::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
.sp-nav-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.sp-nav-head {
    padding: 14px 16px 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Group divider */
.sp-group {
    padding: 10px 16px 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: .75;
}
.sp-group:not(:first-of-type) {
    border-top: 1px solid var(--border-color);
    margin-top: 4px;
    padding-top: 12px;
}
/* Nav link */
.sp-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
    border: none;
    background: none;
    width: 100%;
    text-align: start;
}
.sp-link:hover {
    background: var(--brand-light);
    color: var(--primary);
    text-decoration: none;
}
.sp-link.active {
    background: var(--brand-light);
    color: var(--primary);
    font-weight: 600;
}
.sp-link-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    transition: background .15s;
}
.sp-link:hover .sp-link-icon,
.sp-link.active .sp-link-icon {
    background: rgba(91,61,245,.15);
    color: var(--primary);
}
.sp-link-chevron {
    margin-inline-start: auto;
    font-size: 10px;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.sp-link.active .sp-link-chevron { color: var(--primary); }
.sp-addon-tag {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    background: rgba(239,68,68,.1);
    color: #dc2626;
    flex-shrink: 0;
    margin-inline-start: auto;
}

/* ── Content ────────────────────────────────────────────── */
.sp-content { flex: 1; min-width: 0; }

.sp-section {
    scroll-margin-top: 80px;
    margin-bottom: 44px;
}

/* ── Section header decoration ──────────────────────────── */
.sp-sec-hdr {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.sp-sec-hdr-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.sp-sec-hdr-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}
.sp-sec-hdr-sub {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 2px 0 0;
}

/* ── Cache management ───────────────────────────────────── */
.cache-wrap {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}
.cache-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.cache-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    transition: border-color .2s;
}
.cache-item:hover { border-color: var(--primary); }
.cache-item-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}
.cache-item-label i { color: var(--text-secondary); }
.cache-btn-single {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: .2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.cache-btn-single:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(220,38,38,.06);
}
.cache-btn-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: transparent;
    cursor: pointer;
    transition: .2s;
    margin-top: 12px;
}
.cache-btn-all:hover {
    border-color: var(--primary);
    background: var(--brand-light);
}
.cache-btn-all-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cache-btn-all-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(245,158,11,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d97706;
    font-size: 14px;
    flex-shrink: 0;
}
.cache-btn-all-text-main {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.cache-btn-all-text-sub {
    font-size: 11px;
    color: var(--text-secondary);
}
.cache-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 13px;
    background: rgba(14,165,233,.07);
    border: 1px solid rgba(14,165,233,.18);
    border-radius: var(--radius-md);
    font-size: 12px;
    color: #0369a1;
    margin-bottom: 16px;
}
body.dark-mode .cache-info {
    color: #7dd3fc;
    background: rgba(14,165,233,.08);
    border-color: rgba(14,165,233,.15);
}
.cache-status {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
}
.cache-status.show { display: flex; }
.cache-status.ok   { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); color: #059669; }
.cache-status.err  { background: rgba(220,38,38,.08);  border: 1px solid rgba(220,38,38,.2);  color: #dc2626; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 991px) {
    .sp-wrap        { flex-direction: column; }
    .sp-nav         { width: 100%; position: relative; top: 0; max-height: none; }
    .sp-nav-card    { display: flex; overflow-x: auto; border-radius: 12px; }
    .sp-nav-head,
    .sp-group       { display: none; }
    .sp-link        { flex-shrink: 0; white-space: nowrap; border-radius: 0;
                      border-bottom: 3px solid transparent; }
    .sp-link.active { border-bottom-color: var(--primary); }
    .sp-link-chevron { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * COUNTDOWN ADDON  (.cnt-)
 * ─────────────────────────────────────────────────────────────────────────────── */

:root{
    --cd:#475569;
    --cd-dark:#334155;
    --text:#0f172a;
    --muted:#64748b;
    --card:#ffffff;
    --border:#e2e8f0;
}

/* LAYOUT */
.cd-wrap{max-width:1250px;margin:auto;}
.cd-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px}
.cd-grid > div:first-child { order: 2; }
.cd-grid > div:last-child  { order: 1; }

/* HERO */
.cd-hero{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--cd-dark),var(--cd));
    border-radius:26px;
    padding:38px;
    color:#fff;
    margin-bottom:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.cd-hero::after{
    content:"";
    position:absolute;
    width:380px;height:380px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    right:-120px;top:-120px;
}
.cd-badge{
    background:#fff;
    color:var(--cd-dark);
    padding:6px 14px;
    font-weight:800;
    border-radius:999px;
    font-size:12px;
    display:inline-block;
    margin-bottom:10px;
}

/* CARD */
.cd-card{
    background:var(--card);
    border-radius:22px;
    padding:30px;
    border:1px solid var(--border);
    box-shadow:0 15px 40px rgba(0,0,0,.05);
}
.cd-title{
    font-weight:900;
    font-size:18px;
    margin-bottom:24px;
    color:var(--text);
}

/* INFO */
.cd-info{list-style:none;padding:0;margin:0}
.cd-info li{
    display:flex;
    gap:10px;
    font-size:14px;
    padding:10px 0;
    border-bottom:1px solid #f1f5f9;
}
.cd-info li:last-child{border:none}
.cd-info i{color:#22c55e;margin-top:4px}

/* NOTE */
.cd-note{
    background:#f8fafc;
    border:1px dashed var(--border);
    border-radius:16px;
    padding:18px;
    margin-top:22px;
    font-size:14px;
    color:#475569;
}

/* FORM */
.form-control{
    border-radius:14px;
    padding:12px 14px;
}
.form-label{font-weight:700}

/* SWITCH */
.switch{width:56px;height:30px;position:relative}
.switch input{display:none}
.slider{
    position:absolute;inset:0;
    background:#e5e7eb;border-radius:999px;
    transition:.3s
}
.slider:before{
    content:"";position:absolute;
    width:22px;height:22px;
    left:4px;top:4px;
    background:#fff;border-radius:50%;
    transition:.3s;
    box-shadow:0 4px 10px rgba(0,0,0,.25)
}
.switch input:checked + .slider{background:var(--cd)}
.switch input:checked + .slider:before{transform:translateX(26px)}

/* BUTTON */
.btn-cd{
    background:linear-gradient(135deg,var(--cd),var(--cd-dark));
    color:#fff;border:none;
    font-weight:900;
    border-radius:14px;
    padding:12px 28px;
}

/* ================= RTL ================= */
.cd-wrap{
    direction: rtl;
}
.cd-hero,
.cd-card,
.cd-info,
.cd-note{
    text-align:right;
}

/* ================= MOBILE ================= */
@media (max-width:768px){

/* الشبكة */
.cd-grid{
    grid-template-columns:1fr;
    gap:18px;
}

/* ترتيب الكروت في الموبايل (الإعدادات فوق الشرح) */
.cd-grid > div{
    order:initial !important;
}

/* HERO */
.cd-hero{
    flex-direction:column;
    text-align:center;
    padding:26px 18px;
    border-radius:22px;
}
.cd-hero i{
    margin-top:14px;
    font-size:42px !important;
}

/* الكروت */
.cd-card{
    padding:20px;
    border-radius:18px;
}

/* بلوك التفعيل */
.d-flex.justify-content-between.align-items-center.mb-4{
    flex-direction:column;
    align-items:flex-start !important;
    gap:10px;
}

/* حقل الدقائق */
.mb-4.col-md-4{
    width:100%;
}

/* الحقول */
.form-control{
    padding:10px 12px;
    font-size:14px;
}

/* زر الحفظ */
.btn-cd{
    width:100%;
    padding:12px 0;
    font-size:14px;
}

}


/* ═══════════════════════════════════════════════════════════════════════════════
 * CUSTOM DOMAIN  (.cd-)
 * ─────────────────────────────────────────────────────────────────────────────── */

:root{
    --primary:#0f172a;
    --primary-soft:#1e293b;
    --border:#e2e8f0;
    --muted:#64748b;
}

/* WRAP */
/*.cd-wrap{max-width:1000px;margin:auto}*/

/* HERO */
.cd-hero{
    background:linear-gradient(135deg,var(--primary),var(--primary-soft));
    color:#fff;
    padding:32px;
    border-radius:22px;
    margin-bottom:28px;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}
.cd-hero h4{margin:0;font-weight:800}


.cd-card{
    background:#fff;
    border-radius:18px;
    border:1px solid var(--border);
    box-shadow:0 10px 25px rgba(0,0,0,.05);
    padding:28px;
}


.cd-label{
    font-weight:700;
    margin-bottom:8px;
    color:#0f172a;
}

/* INPUT */
.cd-input{
    border-radius:14px;
    padding:12px 14px;
    border:1px solid var(--border);
}
.cd-input:focus{
    border-color:#0f172a;
    box-shadow:none;
}

/* GUIDE */
.cd-guide{
    background:#f8fafc;
    border:1px dashed #cbd5e1;
    padding:16px;
    border-radius:14px;
    font-size:14px;
    color:#475569;
    margin-bottom:20px;
}

/* BUTTON */
.btn-save{
    background:linear-gradient(135deg,#0f172a,#1e293b);
    color:#fff;
    border:none;
    border-radius:14px;
    padding:12px 26px;
    font-weight:800;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * FAKE SALES NOTIF  (.fsn-)
 * ─────────────────────────────────────────────────────────────────────────────── */

:root{
    --sn:#334155;
    --sn-dark:#1e293b;
    --text:#0f172a;
    --muted:#64748b;
    --card:#ffffff;
    --border:#e2e8f0;
}

/* LAYOUT */
.sn-wrap{max-width:1250px;margin:auto;}
.sn-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px}

/* HERO */
.sn-hero{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--sn-dark),var(--sn));
    border-radius:26px;
    padding:38px;
    color:#fff;
    margin-bottom:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.sn-hero::after{
    content:"";
    position:absolute;
    width:380px;height:380px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    right:-120px;top:-120px;
}
.sn-badge{
    background:#fff;
    color:var(--sn-dark);
    padding:6px 14px;
    font-weight:800;
    border-radius:999px;
    font-size:12px;
    display:inline-block;
    margin-bottom:10px;
}

/* CARD */
.sn-card{
    background:var(--card);
    border-radius:22px;
    padding:30px;
    border:1px solid var(--border);
    box-shadow:0 15px 40px rgba(0,0,0,.05);
}
.sn-title{
    font-weight:900;
    font-size:18px;
    margin-bottom:24px;
    color:var(--text);
}

/* INFO */
.sn-info{list-style:none;padding:0;margin:0}
.sn-info li{
    display:flex;
    gap:10px;
    font-size:14px;
    padding:10px 0;
    border-bottom:1px solid #f1f5f9;
}
.sn-info li:last-child{border:none}
.sn-info i{color:#22c55e;margin-top:4px}

/* NOTE */
.sn-note{
    background:#f8fafc;
    border:1px dashed var(--border);
    border-radius:16px;
    padding:18px;
    margin-top:22px;
    font-size:14px;
    color:#475569;
}

/* FORM */
.form-control,.form-select{
    border-radius:14px;
    padding:12px 14px;
}
.form-label{font-weight:700}

/* SWITCH */
.switch{width:56px;height:30px;position:relative}
.switch input{display:none}
.slider{
    position:absolute;inset:0;
    background:#e5e7eb;border-radius:999px;
    transition:.3s
}
.slider:before{
    content:"";position:absolute;
    width:22px;height:22px;
    left:4px;top:4px;
    background:#fff;border-radius:50%;
    transition:.3s;
    box-shadow:0 4px 10px rgba(0,0,0,.25)
}
.switch input:checked + .slider{background:var(--sn)}
.switch input:checked + .slider:before{transform:translateX(26px)}

/* TOGGLE BOX */
.sn-toggle{
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:16px;
    padding:18px 22px;
}

/* BUTTON */
.btn-sn{
    background:linear-gradient(135deg,var(--sn),var(--sn-dark));
    color:#fff;border:none;
    font-weight:900;
    border-radius:14px;
    padding:12px 28px;
}

/* ================= RTL ================= */
.sn-wrap{
    direction: rtl;
}
.sn-hero,
.sn-card,
.sn-info,
.sn-note,
.sn-toggle{
    text-align: right;
}

/* ================= MOBILE ================= */
@media (max-width:768px){

/* الشبكة */
.sn-grid{
    grid-template-columns:1fr;
    gap:18px;
}

/* HERO */
.sn-hero{
    flex-direction:column;
    text-align:center;
    padding:26px 18px;
    border-radius:22px;
}
.sn-hero i{
    margin-top:14px;
    font-size:42px !important;
}

/* الكروت */
.sn-card{
    padding:20px;
    border-radius:18px;
}

/* صندوق التفعيل */
.sn-toggle{
    flex-direction:column;
    align-items:flex-start !important;
    gap:10px;
}

/* الفورم rows */
.row.mb-4{
    flex-direction:column;
}
.row.mb-4 .col-md-6{
    width:100%;
}

/* الحقول */
.form-control,
.form-select{
    padding:10px 12px;
    font-size:14px;
}

/* زر الحفظ */
.btn-sn{
    width:100%;
    padding:12px 0;
    font-size:14px;
}

}


/* ═══════════════════════════════════════════════════════════════════════════════
 * GOOGLE SHEETS SYNC  (.gs-)
 * ─────────────────────────────────────────────────────────────────────────────── */

/* ── Hero ─────────────────────────────────────────── */
.gs-hero {
    background: linear-gradient(135deg, var(--da3-accent, #2563eb) 0%, #7c3aed 60%, #0ea5e9 100%);
    border-radius: var(--da3-r, 12px);
    padding: 28px 32px;
    margin-bottom: var(--da3-gap, 14px);
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    position: relative; overflow: hidden;
}
.gs-hero::before {
    content:''; position:absolute; top:-50px; right:-50px;
    width:180px; height:180px; border-radius:50%;
    background:rgba(255,255,255,.07); pointer-events:none;
}
html[dir="rtl"] .gs-hero::before { right:auto; left:-50px; }
.gs-hero-text { position:relative; z-index:1; }
.gs-hero-text h2 {
    margin:0 0 5px; font-size:20px; font-weight:700; color:#fff;
    display:flex; align-items:center; gap:10px;
}
.gs-hero-text h2 img { width:28px; height:28px; border-radius:7px; flex-shrink:0; }
.gs-hero-text p { margin:0; color:rgba(255,255,255,.75); font-size:13px; }
.gs-hero-badge {
    position:relative; z-index:1; flex-shrink:0;
    background:rgba(255,255,255,.13); backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.2); border-radius:10px;
    padding:12px 18px; text-align:center; min-width:140px;
}
.gs-status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-inline-end:5px; vertical-align:middle; }
.dot-on  { background:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.25); }
.dot-off { background:#f87171; box-shadow:0 0 0 3px rgba(248,113,113,.25); }
.gs-hero-badge strong { color:#fff; font-size:13px; font-weight:700; display:block; margin-bottom:2px; }
.gs-hero-badge small  { color:rgba(255,255,255,.65); font-size:11.5px; }

/* ── Alert ─────────────────────────────────────────── */
.gs-alert {
    background: rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.25);
    color:#10b981; padding:11px 15px; border-radius:var(--da3-r,12px);
    margin-bottom:var(--da3-gap,14px); font-weight:600; font-size:13.5px;
    display:flex; align-items:center; gap:8px;
}

/* ── 3-col grid ─────────────────────────────────────── */
.gs-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 0.9fr;
    gap: var(--da3-gap, 14px);
    align-items: stretch;
}
@media(max-width:900px){ .gs-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .gs-grid { grid-template-columns:1fr; } }

/* ── Form fields ────────────────────────────────────── */
.gs-label {
    font-size:11px; font-weight:600; color:var(--da3-fg3);
    text-transform:uppercase; letter-spacing:.5px;
    display:block; margin-bottom:6px;
}
.gs-label .req { color:#f87171; margin-inline-start:2px; }
.gs-input {
    width:100%; border:1px solid var(--da3-bd);
    border-radius:8px; padding:9px 12px;
    font-size:13px; outline:none;
    background:var(--da3-bg2); color:var(--da3-fg1);
    transition:border-color .18s, box-shadow .18s; font-family:inherit;
}
.gs-input:focus {
    border-color:var(--da3-accent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--da3-accent) 15%, transparent);
}
.gs-hint { font-size:11.5px; color:var(--da3-fg3); margin-top:4px; }
.gs-field-error { display:none; font-size:11.5px; color:#f87171; margin-top:4px; font-weight:600; }
.gs-field.has-error .gs-input { border-color:#f87171; }
.gs-field.has-error .gs-field-error { display:block; }

/* ── Toggle row ─────────────────────────────────────── */
.gs-toggle-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px; background:var(--da3-bg2);
    border-radius:8px; border:1px solid var(--da3-bd);
    margin-bottom:12px;
}
.gs-toggle-row .tl-label { font-size:13px; font-weight:600; color:var(--da3-fg1); display:block; margin-bottom:1px; }
.gs-toggle-row .tl-sub   { font-size:11.5px; color:var(--da3-fg3); }
.gs-switch { position:relative; width:40px; height:22px; flex-shrink:0; }
.gs-switch input { opacity:0; width:0; height:0; }
.gs-slider {
    position:absolute; inset:0; background:var(--da3-bd);
    border-radius:22px; cursor:pointer; transition:background .2s;
}
.gs-slider::before {
    content:''; position:absolute; width:16px; height:16px; border-radius:50%;
    background:#fff; top:3px; left:3px; transition:transform .2s;
    box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.gs-switch input:checked + .gs-slider { background:var(--da3-accent); }
.gs-switch input:checked + .gs-slider::before { transform:translateX(18px); }

/* ── Buttons ─────────────────────────────────────────── */
.gs-btn-primary {
    width:100%; padding:10px 14px; border:none; border-radius:8px;
    background:var(--da3-accent); color:#fff;
    font-size:13px; font-weight:600; cursor:pointer;
    transition:filter .15s, transform .15s;
    display:flex; align-items:center; justify-content:center; gap:7px;
    margin-bottom:10px; font-family:inherit;
}
.gs-btn-primary:hover { filter:brightness(1.1); transform:translateY(-1px); }
.gs-btn-row { display:flex; gap:8px; }
.gs-btn-half {
    flex:1; padding:9px 8px; border-radius:8px; border:none;
    font-size:12.5px; font-weight:600; cursor:pointer;
    transition:filter .15s, transform .15s;
    display:flex; align-items:center; justify-content:center; gap:6px; font-family:inherit;
}
.gs-btn-half:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.gs-btn-sync { background:var(--da3-accent); color:#fff; }
.gs-btn-sync:hover:not(:disabled) { filter:brightness(1.1); transform:translateY(-1px); }
.gs-btn-ghost {
    background:transparent; color:var(--da3-fg2);
    border:1px solid var(--da3-bd);
}
.gs-btn-ghost:hover { background:var(--da3-hover); color:var(--da3-fg1); }

/* ── Lang toggle ─────────────────────────────────────── */
.gs-lang-toggle {
    display:flex; align-items:center; gap:4px;
    background:var(--da3-bg2); border:1px solid var(--da3-bd);
    border-radius:20px; padding:3px;
}
.gs-lang-btn {
    padding:3px 10px; border-radius:16px; border:none;
    font-size:11px; font-weight:700; cursor:pointer;
    transition:background .15s, color .15s; font-family:inherit;
    color:var(--da3-fg3); background:transparent;
}
.gs-lang-btn.active {
    background:var(--da3-accent); color:#fff;
}

/* ── Steps ──────────────────────────────────────────── */
.gs-steps { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.gs-step {
    display:flex; gap:12px; align-items:flex-start;
    padding:11px 13px; border-radius:8px;
    background:var(--da3-bg2); border:1px solid var(--da3-bd);
}
.gs-step-n {
    width:24px; height:24px; border-radius:50%; flex-shrink:0;
    background:var(--da3-accent); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700; margin-top:1px;
}
.gs-step-b strong { font-size:12.5px; font-weight:700; color:var(--da3-fg1); display:block; margin-bottom:2px; }
.gs-step-b p { font-size:11.5px; color:var(--da3-fg3); margin:0; line-height:1.5; }
.gs-path { font-size:11.5px; color:var(--da3-accent); font-weight:600; }
.gs-path[data-lang] { display:none; }
.gs-path[data-lang].visible { display:inline; }

/* ── Copy card body ──────────────────────────────────── */
.gs-copy-body {
    display:flex; flex-direction:column; align-items:center; text-align:center; padding:6px 0 4px;
    height: calc(100% - 46px); justify-content: center;
}
.gs-copy-ico {
    width:54px; height:54px; border-radius:14px; margin-bottom:13px;
    display:flex; align-items:center; justify-content:center; font-size:24px;
    background:var(--da3-abg); color:var(--da3-accent);
}
.gs-copy-body h6 { font-size:13.5px; font-weight:700; color:var(--da3-fg1); margin:0 0 5px; }
.gs-copy-body p  { font-size:12px; color:var(--da3-fg3); margin:0 0 18px; line-height:1.55; }
.gs-copy-big {
    width:100%; padding:11px 14px; border:none; border-radius:8px;
    background:var(--da3-accent); color:#fff;
    font-size:13.5px; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:filter .15s, transform .15s; font-family:inherit;
    margin-bottom:10px;
}
.gs-copy-big:hover { filter:brightness(1.1); transform:translateY(-1px); }
.gs-copy-note {
    font-size:11.5px; color:var(--da3-fg3);
    display:flex; align-items:flex-start; gap:6px; text-align:start; line-height:1.5;
    background:var(--da3-bg2); border:1px solid var(--da3-bd);
    padding:10px 12px; border-radius:8px;
}
.gs-copy-note i { color:var(--da3-accent); flex-shrink:0; margin-top:2px; }

/* ── Last sync row ───────────────────────────────────── */
.gs-last-sync {
    display: flex; align-items: center; justify-content: space-between; gap: 7px;
    margin-top: 10px; padding: 9px 12px;
    background: var(--da3-bg2); border: 1px solid var(--da3-bd);
    border-radius: 8px; font-size: 12px; color: var(--da3-fg2);
}
.gs-last-sync .gs-ls-label { display: flex; align-items: center; gap: 6px; }
.gs-last-sync i { color: var(--da3-accent); font-size: 13px; flex-shrink: 0; }
.gs-last-sync strong { color: var(--da3-fg1); font-weight: 700; direction: ltr; unicode-bidi: isolate; }

/* ── mb spacing ─────────────────────────────────────── */
.gs-mb { margin-bottom: 12px; }

/* ── Toast ──────────────────────────────────────────── */
.gs-toast {
    position:fixed; bottom:28px; left:50%;
    transform:translateX(-50%) translateY(60px);
    background:var(--da3-card); color:var(--da3-fg1);
    border:1px solid var(--da3-bd);
    padding:11px 20px; border-radius:var(--da3-r,12px);
    font-size:13px; font-weight:600; z-index:9999; opacity:0;
    transition:all .3s cubic-bezier(.19,1,.22,1);
    display:flex; align-items:center; gap:9px;
    box-shadow:var(--da3-shadow); min-width:220px;
}
.gs-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.gs-toast.s .ti { color:#34d399; }
.gs-toast.e .ti { color:#f87171; }

@keyframes gs-spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.gs-spinning { animation:gs-spin .9s linear infinite; display:inline-block; }


/* ═══════════════════════════════════════════════════════════════════════════════
 * WHATSAPP ADDON  (.wa-)
 * ─────────────────────────────────────────────────────────────────────────────── */

:root{
    --wa:#1e8143;
    --wa-dark:#128C7E;
    --text:#0f172a;
    --muted:#64748b;
    --card:#ffffff;
    --border:#e2e8f0;
}

/* LAYOUT */
.wa-settings-wrap{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:0 24px;
    box-sizing:border-box;
}
.wh-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px}
.wa-settings{max-width:1250px;margin:auto;}
/* HERO */
.wa-settings-hero{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--wa),var(--wa-dark));
    border-radius:26px;
    padding:38px;
    color:#fff;
    margin-bottom:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.wa-settings-hero::after{
    content:"";
    position:absolute;
    width:380px;height:380px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    right:-120px;top:-120px;
}
.wh-badge{
    background:#fff;
    color:var(--wa-dark);
    padding:6px 14px;
    font-weight:800;
    border-radius:999px;
    font-size:12px;
    display:inline-block;
    margin-bottom:10px;
}

/* CARD */
.wa-settings-card{
    background:var(--card);
    border-radius:22px;
    padding:30px;
    border:1px solid var(--border);
    box-shadow:0 15px 40px rgba(0,0,0,.05);
}
.wa-settings-title{
    font-weight:900;
    font-size:18px;
    margin-bottom:24px;
    color:var(--text);
}

/* FORM */
.form-control{
    border-radius:14px;
    padding:12px 14px;
}
.form-label{font-weight:700}

/* wa-settings-switch */
.wa-settings-switch{width:56px;height:30px;position:relative}
.wa-settings-switch input{display:none}
.wa-settings-slider{
    position:absolute;inset:0;
    background:#e5e7eb;border-radius:999px;
    transition:.3s
}
.wa-settings-slider:before{
    content:"";position:absolute;
    width:22px;height:22px;
    left:4px;top:4px;
    background:#fff;border-radius:50%;
    transition:.3s;
    box-shadow:0 4px 10px rgba(0,0,0,.25)
}
.wa-settings-switch input:checked + .wa-settings-slider{background:var(--wa)}
.wa-settings-switch input:checked + .wa-settings-slider:before{transform:translateX(26px)}

/* STATS GRID */
.wa-settings-wa-settings-stat-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}
.wa-settings-stat-box{
    background:#f8fafc;
    border-radius:16px;
    padding:18px;
    border:1px solid var(--border);
}
.wa-settings-stat-box span{
    font-size:12px;
    color:var(--muted);
    font-weight:700;
}
.wa-settings-stat-box h3{
    margin:6px 0 0;
    font-size:22px;
    font-weight:900;
    color:var(--text);
}

/* BUTTON */
.wa-settings-btn{
    background:linear-gradient(135deg,var(--wa),var(--wa-dark));
    color:#fff;border:none;
    font-weight:900;
    border-radius:14px;
    padding:12px 28px;
}
.wa-settings-pay-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:linear-gradient(135deg,var(--wa),var(--wa-dark));
    color:#fff;
    font-weight:900;
    border-radius:14px;
    padding:12px 26px;
    text-decoration:none;
    transition:.25s ease;
}


.wa-settings-pay-btn:hover{
    transform:translateY(-2px);
    color:#fff;
}

.wa-settings-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:28px;
}

/* العمود اليمين */
.right-col{
    display:flex;
    flex-direction:column;
}

/* العمود الشمال */
.left-col{
    display:flex;
}

/* خلي الإحصائيات تاخد الطول */
.left-col .wa-settings-card{
    width:100%;
}

/* موبايل */


.debt-modal{
    position:fixed;inset:0;
    background:rgba(0,0,0,.5);
    display:none;align-items:center;justify-content:center;
    z-index:9999;
}
.debt-box{
    width:420px;background:#fff;border-radius:20px;
    padding:22px;
}
.debt-head{
    display:flex;justify-content:space-between;
    align-items:center;margin-bottom:18px;
}
.pay-card{
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:14px 16px;
    margin-bottom:10px;
    cursor:pointer;
    font-weight:700;
    display:flex;align-items:center;gap:10px;
    transition:.25s;
}
.pay-card:hover{
    border-color:#1e8143;
    background:#f0fdf4;
}
/* ===== Debt Modal Overlay ===== */
.debt-modal{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.55);
    backdrop-filter: blur(4px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    animation:fadeIn .25s ease;
}

/* ===== Modal Box ===== */
.debt-box{
    width:460px;
    max-width:95%;
    background:#ffffff;
    border-radius:22px;
    padding:26px;
    box-shadow:0 30px 80px rgba(0,0,0,.15);
    animation:scaleIn .25s ease;
}

/* ===== Header ===== */
.debt-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.debt-head h5{
    font-weight:900;
    margin:0;
    font-size:18px;
    color:#0f172a;
}

.debt-head span{
    cursor:pointer;
    font-size:18px;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    transition:.2s;
}
.chart-container{
    background:#f8fafc;
    border-radius:18px;
    padding:16px;
    height:220px; /* مهم */
}

.debt-head span:hover{
    background:#f1f5f9;
}

/* ===== Payment Tiles ===== */
.payment-tile{
    border:1.5px solid #e2e8f0;
    border-radius:16px;
    padding:14px 16px;
    margin-bottom:12px;
    cursor:pointer;
    transition:.25s ease;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.payment-tile:hover{
    border-color:var(--wa);
    background:#f0fdf4;
    transform:translateY(-2px);
}

.payment-tile img{
    width:40px;
    height:40px;
    object-fit:contain;
}

.payment-tile span{
    font-weight:800;
    color:#0f172a;
}

.payment-tile input{
    transform:scale(1.2);
}

/* Active */
.payment-tile.active{
    border-color:var(--wa-dark);
    background:linear-gradient(135deg,#ecfdf5,#f0fdf4);
    box-shadow:0 10px 25px rgba(16,185,129,.15);
}

/* ===== Confirm Button ===== */
#confirmDebtBtn{
    background:linear-gradient(135deg,var(--wa),var(--wa-dark));
    color:#fff;
    border:none;
    font-weight:900;
    border-radius:14px;
    padding:12px 26px;
    transition:.25s;
}

#confirmDebtBtn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(16,185,129,.3);
}

#confirmDebtBtn:disabled{
    opacity:.45;
    pointer-events:none;
}

/* ===== Animations ===== */
@keyframes fadeIn{
    from{opacity:0}
    to{opacity:1}
}

@keyframes scaleIn{
    from{transform:scale(.9);opacity:0}
    to{transform:scale(1);opacity:1}
}
/* ================= RTL BASE ================= */
.wa-settings-wrap{
    direction: rtl;
}
.wa-settings-hero,
.wa-settings-card,
.wa-settings-stat-box,
.payment-tile{
    text-align: right;
}


.stats-card{
    position:relative;
    overflow:hidden;
}

.stats-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.stats-icon{
    font-size:22px;
    color:var(--wa);
    opacity:.7;
}

.chart-container{
    background:#f8fafc;
    border-radius:18px;
    padding:16px;
}

.stat-animated{
    transition:.3s;
}
.stat-animated:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 25px rgba(0,0,0,.06);
}

.progress-wrap small{
    font-weight:700;
}

.progress-bar-bg{
    width:100%;
    height:8px;
    background:#e2e8f0;
    border-radius:999px;
    overflow:hidden;
}

.progress-bar-fill{
    height:100%;
    background:linear-gradient(135deg,var(--wa),var(--wa-dark));
    border-radius:999px;
    transition:1s ease;
}

.stats-btn{
    width:100%;
}

/* ================================================= */
/* ============ WHATSAPP MOBILE VERSION ============ */
/* ================================================= */

@media (max-width:768px){

    html,body{
        overflow-x:hidden;
        background:#f1f5f9;
    }

    /* ===== Container ===== */
    .wa-settings-wrap{
        max-width:100%;
        margin:auto;
        padding:0 16px;
    }

    /* ===== Grid ===== */
    .wa-settings-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .right-col,
    .left-col{
        width:100%;
    }

    /* ================================================= */
    /* ====================== HERO ===================== */
    /* ================================================= */

    .wa-settings-hero{
        flex-direction:column;
        text-align:center;
        align-items:center;
        padding:26px 18px;
        border-radius:22px;
        margin-top:10px;
        margin-bottom:22px;
    }

    .wh-badge{
        font-size:11px;
        padding:5px 12px;
    }

    .wa-settings-hero h2{
        font-size:18px;
        line-height:1.6;
        margin:8px 0;
    }

    .wa-settings-hero p{
        font-size:14px;
        line-height:1.6;
        opacity:.95;
    }

    .wa-settings-hero img{
        margin-top:16px;
        width:52px;
    }

    /* ================================================= */
    /* ====================== CARDS ==================== */
    /* ================================================= */

    .wa-settings-card{
        padding:20px;
        border-radius:18px;
        box-shadow:0 10px 30px rgba(0,0,0,.04);
    }

    .wa-settings-title{
        font-size:16px;
        margin-bottom:18px;
        text-align:right;
    }

    /* ================================================= */
    /* ================= FLEX ROW FIX ================== */
    /* ================================================= */

    .wa-settings-card .d-flex{
        align-items:center;
        justify-content:space-between;
        gap:12px;
    }

    .wa-settings-card .d-flex span{
        font-size:14px;
        line-height:1.5;
    }

    /* ================================================= */
    /* ===================== wa-settings-switch ==================== */
    /* ================================================= */

    .wa-settings-switch{
        transform:scale(.9);
    }

    /* ================================================= */
    /* ====================== FORM ===================== */
    /* ================================================= */

    .form-control{
        font-size:14px;
        padding:10px 12px;
        border-radius:12px;
    }

    .radio-clean{
        flex-direction:column;
        gap:10px;
    }

    .radio-item{
        font-size:14px;
    }

    /* ================================================= */
    /* ====================== CHART ==================== */
    /* ================================================= */

    .chart-container{
        height:190px;
        padding:14px;
        border-radius:16px;
    }

    /* ================================================= */
    /* ====================== STATS ==================== */
    /* ================================================= */

    .wa-settings-wa-settings-stat-grid{
        grid-template-columns:1fr 1fr;
        gap:12px;
        margin-top:18px;
    }

    .wa-settings-stat-box{
        padding:14px;
        border-radius:16px;
    }

    .wa-settings-stat-box span{
        font-size:12px;
    }

    .wa-settings-stat-box h3{
        font-size:18px;
    }

    /* ================================================= */
    /* ===================== PROGRESS ================== */
    /* ================================================= */

    .progress-wrap{
        margin-top:18px;
    }

    /* ================================================= */
    /* ====================== BUTTONS ================== */
    /* ================================================= */

    .wa-settings-btn,
    .wa-settings-pay-btn{
        width:100%;
        padding:12px;
        font-size:14px;
        border-radius:14px;
    }

    /* ================================================= */
    /* ======================= MODAL =================== */
    /* ================================================= */

    .debt-box{
        width:94%;
        padding:18px;
        border-radius:18px;
    }

    .payment-tile{
        padding:12px;
        gap:10px;
        border-radius:14px;
    }

    .payment-tile img{
        width:30px;
        height:30px;
    }

    #confirmDebtBtn{
        width:100%;
        margin-top:10px;
    }

}


/* ═══════════════════════════════════════════════════════════════════════════════
 * QUICK CALL ADDON  (.qc-)
 * ─────────────────────────────────────────────────────────────────────────────── */

:root{
    --qc:#16a34a;
    --qc-dark:#064e3b;
    --text:#0f172a;
    --muted:#64748b;
    --card:#ffffff;
    --border:#e2e8f0;
}

/* LAYOUT */
.qc-wrap{max-width:1250px;margin:auto;}
.qc-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px}

/* HERO */
.qc-hero{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--qc-dark),var(--qc));
    border-radius:26px;
    padding:38px;
    color:#fff;
    margin-bottom:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.qc-hero::after{
    content:"";
    position:absolute;
    width:380px;height:380px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    right:-120px;top:-120px;
}

/* CARD */
.qc-card{
    background:var(--card);
    border-radius:22px;
    padding:30px;
    border:1px solid var(--border);
    box-shadow:0 15px 40px rgba(0,0,0,.05);
}
.qc-title{
    font-weight:900;
    font-size:18px;
    margin-bottom:24px;
    color:var(--text);
}

/* TEXT */
.qc-desc{color:var(--muted);font-size:14px}

/* INFO LIST */
.qc-info{list-style:none;padding:0;margin:0}
.qc-info li{
    display:flex;
    gap:10px;
    font-size:14px;
    padding:10px 0;
    border-bottom:1px solid #f1f5f9;
}
.qc-info li:last-child{border:none}
.qc-info i{color:var(--qc);margin-top:4px}

/* GUIDE */
.qc-guide{
    background:#f0fdf4;
    border:1px dashed var(--qc);
    border-radius:16px;
    padding:18px;
    margin-top:22px;
}
.qc-guide h6{font-weight:900;margin-bottom:10px;color:#14532d}
.qc-guide li{font-size:14px;margin-bottom:6px;color:#14532d}

/* FORM */
.form-control{
    border-radius:14px;
    padding:12px 14px;
}
.form-label{font-weight:700}

/* SWITCH */
.switch{width:56px;height:30px;position:relative}
.switch input{display:none}
.slider{
    position:absolute;inset:0;
    background:#e5e7eb;border-radius:999px;
    transition:.3s
}
.slider:before{
    content:"";position:absolute;
    width:22px;height:22px;
    left:4px;top:4px;
    background:#fff;border-radius:50%;
    transition:.3s;
    box-shadow:0 4px 10px rgba(0,0,0,.25)
}
.switch input:checked + .slider{background:var(--qc)}
.switch input:checked + .slider:before{transform:translateX(26px)}

/* RADIO */
.qc-radio{display:flex;gap:18px}
.qc-radio label{display:flex;align-items:center;gap:8px;font-size:14px}

/* IMAGE */
.qc-image{
    width:60px;height:60px;border-radius:16px;
    border:1px dashed var(--border);object-fit:cover
}

/* BUTTON */
.qc-btn{
    background:linear-gradient(135deg,var(--qc),var(--qc-dark));
    color:#fff;border:none;
    font-weight:900;
    border-radius:14px;
    padding:12px 28px;
}
.qc-badge{
    background:#fff;
    color:var(--qc-dark);
    padding:6px 14px;
    font-weight:800;
    border-radius:999px;
    font-size:12px;
    display:inline-block;
    margin-bottom:10px;
}

/* ================= RTL ================= */
.qc-wrap{
    direction: rtl;
}
.qc-hero,
.qc-card,
.qc-info,
.qc-guide{
    text-align: right;
}

/* ================= MOBILE ================= */
@media (max-width:768px){

/* الشبكة */
.qc-grid{
    grid-template-columns:1fr;
    gap:18px;
}

/* HERO */
.qc-hero{
    flex-direction:column;
    text-align:center;
    padding:26px 18px;
    border-radius:22px;
}
.qc-hero i{
    margin-top:14px;
    font-size:42px !important;
}

/* الكروت */
.qc-card{
    padding:20px;
    border-radius:18px;
}

/* صف الاسم + الموبايل */
.row.g-3{
    flex-direction:column;
}
.row.g-3 .col-md-6{
    width:100%;
}

/* الراديو */
.qc-radio{
    flex-direction:column;
    gap:10px;
}

/* سويتش الموبايل */
.qc-card .d-flex.justify-content-between{
    flex-direction:column;
    align-items:flex-start !important;
    gap:10px;
}

/* الصورة */
.qc-image{
    width:54px;
    height:54px;
}

/* الفورم */
.form-control{
    padding:10px 12px;
    font-size:14px;
}

/* زر الحفظ */
.qc-btn{
    width:100%;
    padding:12px 0;
    font-size:14px;
}

}


/* ═══════════════════════════════════════════════════════════════════════════════
 * SHOPIFY SETTING  (.sh-)
 * ─────────────────────────────────────────────────────────────────────────────── */

:root{
    --sh:#008060;
    --sh-dark:#004c3f;
    --text:#0f172a;
    --muted:#64748b;
    --card:#ffffff;
    --border:#e2e8f0;
}

/* LAYOUT — نفس باقي الصفحات */
.sh-wrap{max-width:1250px;margin:auto;}
.sh-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px}

/* HERO */
.sh-hero{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--sh-dark),var(--sh));
    border-radius:26px;
    padding:38px;
    color:#fff;
    margin-bottom:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.sh-hero::after{
    content:"";
    position:absolute;
    width:380px;height:380px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    right:-120px;top:-120px;
}
.sh-badge{
    background:#fff;
    color:var(--sh-dark);
    padding:6px 14px;
    font-weight:800;
    border-radius:999px;
    font-size:12px;
    display:inline-block;
    margin-bottom:10px;
}

/* CARD */
.sh-card{
    background:var(--card);
    border-radius:22px;
    padding:30px;
    border:1px solid var(--border);
    box-shadow:0 15px 40px rgba(0,0,0,.05);
}
.sh-title{
    font-weight:900;
    font-size:18px;
    margin-bottom:24px;
    color:var(--text);
}

/* FORM */
.form-control{
    border-radius:14px;
    padding:12px 14px;
}
.form-label{font-weight:700}

/* INFO LIST */
.sh-info{list-style:none;padding:0;margin:0}
.sh-info li{
    display:flex;
    gap:10px;
    font-size:14px;
    padding:10px 0;
    border-bottom:1px solid #f1f5f9;
}
.sh-info li:last-child{border:none}
.sh-info i{color:var(--sh);margin-top:4px}

/* BUTTON */
.btn-sh{
    background:linear-gradient(135deg,var(--sh),var(--sh-dark));
    color:#fff;border:none;
    font-weight:900;
    border-radius:14px;
    padding:12px 28px;
}

.sh-error{
    background:#fef2f2;
    border:1px solid #fecaca;
    color:#7f1d1d;
    border-radius:14px;
    padding:14px 16px;
    font-size:14px;
}
.sh-error i{
    font-size:18px;
    margin-top:2px;
}
/* ================= RTL ================= */
.sh-wrap{
    direction: rtl;
}
.sh-hero,
.sh-card,
.sh-info{
    text-align: right;
}

/* ================= MOBILE ================= */
@media (max-width:768px){

/* الهيكل */
.sh-grid{
    grid-template-columns:1fr;
    gap:18px;
}

/* HERO */
.sh-hero{
    flex-direction:column;
    text-align:center;
    padding:26px 18px;
    border-radius:22px;
}
.sh-hero img{
    margin-top:14px;
    width:54px !important;
}

/* الكروت */
.sh-card{
    padding:20px;
    border-radius:18px;
}

/* الحقول */
.form-control{
    padding:10px 12px;
    font-size:14px;
}

/* الزر */
.btn-sh{
    width:100%;
    padding:12px 0;
    font-size:14px;
}

/* قائمة المميزات */
.sh-info li{
    font-size:13px;
    padding:8px 0;
}

/* رسالة الخطأ */
.sh-error{
    font-size:13px;
    padding:12px 14px;
}

}


/* ═══════════════════════════════════════════════════════════════════════════════
 * TELEGRAM ADDON  (.tg-)
 * ─────────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────
   Telegram Settings — uses CSS tokens (dark/light/RTL/LTR)
────────────────────────────────────────────────────────── */
.tg-wrap { max-width: 1100px; margin: 0 auto; }

.tg-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1c8ac7, #229ED9);
    border-radius: 22px;
    padding: 34px 38px;
    color: #fff;
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 12px 32px rgba(34,158,217,.25);
}
.tg-hero::after {
    content: "";
    position: absolute;
    width: 320px; height: 320px;
    background: rgba(255,255,255,.07);
    border-radius: 50%;
    inset-inline-end: -80px; top: -100px;
}
.tg-hero-icon {
    font-size: 56px;
    opacity: .3;
    position: relative; z-index: 1;
}
.tg-badge {
    display: inline-block;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
    backdrop-filter: blur(6px);
}
.tg-hero h2 { font-size: 22px; font-weight: 900; margin: 0 0 6px; }
.tg-hero p  { opacity: .85; font-size: 14px; margin: 0; }

.tg-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
}

.tg-card {
    background: var(--bg-surface, var(--card-bg));
    border: 1px solid var(--border-main, var(--border-color));
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}

.tg-section-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tg-section-title .tg-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: rgba(34,158,217,.12);
    color: #229ED9;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

/* Form */
.tg-input {
    border-radius: 12px;
    padding: 13px 14px;
    border: 1.5px solid var(--border-main, #e2e8f0);
    background: var(--bg-input, var(--input-bg, #fff));
    color: var(--text-primary, #0f172a);
    font-family: monospace;
    font-size: 15px;
    width: 100%;
    transition: .2s;
}
.tg-input:focus {
    border-color: #229ED9;
    box-shadow: 0 0 0 3px rgba(34,158,217,.15);
    outline: none;
}
.form-label { font-weight: 700; color: var(--text-primary, #0f172a); font-size: 13.5px; }

/* Buttons */
.btn-tg-primary {
    background: linear-gradient(135deg, #1c8ac7, #229ED9);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 26px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: .2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-tg-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(34,158,217,.35);
    color: #fff;
}
.btn-tg-secondary {
    background: var(--bg-card, #f1f5f9);
    color: var(--text-primary, #0f172a);
    border: 1.5px solid var(--border-main, #e2e8f0);
    border-radius: 12px;
    padding: 11px 22px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: .2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-tg-secondary:hover {
    background: var(--border-main, #e2e8f0);
}

/* Info list */
.tg-feature-list {
    list-style: none;
    padding: 0; margin: 0 0 20px;
}
.tg-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--text-secondary, #475569);
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft, rgba(0,0,0,.06));
}
.tg-feature-list li:last-child { border-bottom: none; }
.tg-feature-list .fi { color: #22c55e; margin-top: 2px; flex-shrink: 0; }

/* Guide box */
.tg-guide {
    background: rgba(34,158,217,.06);
    border: 1px dashed rgba(34,158,217,.4);
    border-radius: 14px;
    padding: 18px;
}
.tg-guide-title {
    font-size: 13px;
    font-weight: 800;
    color: #1c8ac7;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tg-guide ol {
    padding-inline-start: 18px;
    margin: 0;
    color: var(--text-secondary, #475569);
    font-size: 13px;
    line-height: 1.8;
}
.tg-guide code {
    background: rgba(34,158,217,.12);
    color: #1c8ac7;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: monospace;
    font-weight: 700;
}

/* Connected status badge */
.tg-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
}
.tg-status-active { background: #dcfce7; color: #15803d; }
.tg-status-inactive { background: #fee2e2; color: #dc2626; }

/* Mobile */
@media (max-width: 768px) {
    .tg-grid { grid-template-columns: 1fr; }
    .tg-hero { flex-direction: column; gap: 14px; padding: 24px; }
    .tg-hero-icon { font-size: 40px; }
    .tg-card { padding: 20px; }
    .btn-tg-primary, .btn-tg-secondary { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   Addons
   Merged from: addons.css
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
 *
 *  EL MATAJER — ADDONS FEATURE CSS
 *  Extracted: 2026-05-25 (Wave 3 — CSS Architecture Consolidation)
 *
 *  Replaces embedded <style> blocks in:
 *    - resources/views/admin/addons/index.blade.php
 *    - resources/views/admin/addons/show.blade.php
 *    - resources/views/admin/addons/store.blade.php
 *    - resources/views/admin/addons/create.blade.php
 *    - resources/views/admin/addons/edit.blade.php
 *
 *  Consumers: All addon management blade views
 *  Tokens:    Uses var() from tokens.css — no hardcoded colors
 *
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. PAGE TOKEN SCOPE  (.da3.da3-admin — admin purple accent)
   ───────────────────────────────────────────────────────────────────────────── */

/* Admin purple accent — shared by index, create, edit */
.da3.da3-admin {
    --role-accent:      #7c3aed;
    --role-accent-soft: rgba(124,58,237,.10);
}
.da3.da3-admin .da3-btn-primary {
    box-shadow: 0 2px 8px rgba(124,58,237,.32);
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. ADDON INDEX — PAGE SCOPE TOKENS  (.adm-page / inline on .da3.da3-admin)
   ───────────────────────────────────────────────────────────────────────────── */

/* Base dark defaults — mirrors the inline da3 token map in index.blade.php */
.adm-page {
    --da3-card:   #1c1c1f;
    --da3-bd:     rgba(255,255,255,.055);
    --da3-bg2:    #111113;
    --da3-shadow: 0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-fg1:    #f4f4f5;
    --da3-fg2:    #a1a1aa;
    --da3-fg3:    #71717a;
    --da3-line:   rgba(255,255,255,.06);
    --da3-hover:  rgba(255,255,255,.03);
    --da3-r:      12px;
    --da3-gap:    16px;
    --da3-accent: var(--role-accent, #7c3aed);
    --da3-abg:    var(--role-accent-soft, rgba(124,58,237,.10));
}

/* Light mode overrides */
body:not(.dark-mode) .adm-page {
    --da3-card:   #ffffff;
    --da3-bd:     #e2e8f0;
    --da3-bg2:    #f8fafc;
    --da3-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.07);
    --da3-fg1:    #0f172a;
    --da3-fg2:    #475569;
    --da3-fg3:    #94a3b8;
    --da3-line:   rgba(0,0,0,.06);
    --da3-hover:  rgba(0,0,0,.02);
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. ADDON INDEX — TOOLBAR & FILTER PILLS
   ───────────────────────────────────────────────────────────────────────────── */

.adm-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.adm-search {
    position: relative;
    flex: 1;
    min-width: 200px;
}
.adm-search i {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--da3-fg3);
    font-size: 13px;
    pointer-events: none;
}
.adm-search input {
    width: 100%;
    padding: 9px 14px 9px 36px;
    background: var(--da3-bg2);
    border: 1.5px solid var(--da3-bd);
    border-radius: 9px;
    color: var(--da3-fg1);
    font-size: 13px;
    font-weight: 500;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
html[dir="rtl"] .adm-search input {
    padding-inline-start: 36px;
    padding-inline-end: 14px;
}
.adm-search input:focus {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px var(--da3-abg);
}
.adm-search input::placeholder { color: var(--da3-fg3); }

.adm-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.adm-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--da3-bd);
    background: var(--da3-bg2);
    color: var(--da3-fg2);
    transition: all .15s;
    user-select: none;
    text-decoration: none;
}
.adm-filter-pill:hover {
    border-color: var(--da3-accent);
    color: var(--da3-accent);
    background: var(--da3-abg);
}
.adm-filter-pill.is-active {
    background: var(--da3-accent);
    color: #fff;
    border-color: var(--da3-accent);
    box-shadow: 0 2px 8px var(--da3-abg);
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. ADDON INDEX — CARD GRID  (.adm-grid, .adm-card)
   ───────────────────────────────────────────────────────────────────────────── */

.adm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--da3-gap, 16px);
}

/* Each addon card has --card-accent injected inline for per-card theming */
.adm-card {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r, 12px);
    box-shadow: var(--da3-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.adm-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--card-accent, var(--da3-accent)),
                0 8px 24px rgba(0,0,0,.25);
    border-color: var(--card-accent, var(--da3-accent));
}
/* Gradient top-border on hover */
.adm-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--card-accent, var(--da3-accent)) 60%, transparent),
        transparent 60%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
    z-index: 0;
}
.adm-card:hover::before { opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────────────
   5. ADDON CARD — COVER AREA
   ───────────────────────────────────────────────────────────────────────────── */

.adm-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--da3-bg2);
}
.adm-cover-bg {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.adm-card:hover .adm-cover-bg { transform: scale(1.03); }

/* Chips overlay (status + type) */
.adm-cover-chips {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    z-index: 2;
}

/* Status pill: active / inactive */
.adm-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.adm-status-pill.is-on {
    background: rgba(22,163,74,.18);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,.22);
}
.adm-status-pill.is-off {
    background: rgba(100,116,139,.18);
    color: #94a3b8;
    border: 1px solid rgba(148,163,184,.18);
}
/* Live dot pulse */
.adm-status-pill.is-on .adm-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4ade80;
    animation: admPulse 1.8s ease-in-out infinite;
}

/* Type tag */
.adm-type-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(0,0,0,.35);
    color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.1);
}

/* Price chip in cover bottom-right */
.adm-cover-price {
    position: absolute;
    bottom: 8px;
    inset-inline-end: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(0,0,0,.45);
    color: #fff;
    border: 1px solid rgba(255,255,255,.1);
    z-index: 2;
}
.adm-cover-price.is-free {
    background: linear-gradient(135deg, rgba(22,163,74,.75), rgba(5,150,105,.75));
    color: #fff;
    border-color: rgba(74,222,128,.3);
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. ADDON CARD — BODY
   ───────────────────────────────────────────────────────────────────────────── */

.adm-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.adm-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.adm-title-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--da3-abg);
    color: var(--card-accent, var(--da3-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.adm-name {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--da3-fg1);
    line-height: 1.3;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-slug {
    font-size: 10.5px;
    color: var(--da3-fg3);
    font-weight: 500;
    font-family: ui-monospace, 'Cascadia Code', monospace;
}
.adm-desc {
    font-size: 12px;
    color: var(--da3-fg2);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. ADDON ANIMATION
   ───────────────────────────────────────────────────────────────────────────── */

@keyframes admPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(.75); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. STORE PAGE — STATS STRIP  (.mk-stats, .mk-stat)
   ───────────────────────────────────────────────────────────────────────────── */

.mk-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-4, 16px);
}

.mk-stat {
    position: relative;
    background: var(--card-bg, #1c1c1f);
    border: 1px solid var(--border-color, rgba(255,255,255,.055));
    border-radius: var(--radius-lg, 12px);
    padding: 16px 18px;
    overflow: hidden;
}
/* Per-stat color glow */
.mk-stat::before {
    content: '';
    position: absolute;
    top: -20px;
    inset-inline-start: -20px;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--s-color, #1d6ef5) 0%, transparent 70%);
    opacity: .15;
    pointer-events: none;
}
.mk-stat.s-blue   { --s-color: var(--primary, #1d6ef5); }
.mk-stat.s-green  { --s-color: var(--success, #16a34a); }
.mk-stat.s-amber  { --s-color: #f59e0b; }
.mk-stat.s-purple { --s-color: var(--role-accent, #7c3aed); }

.mk-stat-ico {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--s-color, var(--primary, #1d6ef5)) 15%, transparent);
    color: var(--s-color, var(--primary, #1d6ef5));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-bottom: 10px;
}
.mk-stat-val {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary, #f4f4f5);
    line-height: 1.1;
}
.mk-stat-lbl {
    font-size: 11.5px;
    color: var(--text-muted, #71717a);
    font-weight: 500;
    margin-top: 3px;
}

/* Light-mode overrides for store page (store uses body:not(.dark-mode)) */
body:not(.dark-mode) .mk-stat {
    background: var(--card-bg, #ffffff);
    border-color: var(--border-color, #e2e8f0);
}
body:not(.dark-mode) .mk-stat-val { color: var(--text-primary, #0f172a); }
body:not(.dark-mode) .mk-stat-lbl { color: var(--text-muted, #94a3b8); }

/* ─────────────────────────────────────────────────────────────────────────────
   9. STORE PAGE — TOOLBAR & PILLS  (.mk-toolbar, .mk-pills, .mk-pill)
   ───────────────────────────────────────────────────────────────────────────── */

.mk-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: var(--space-3, 12px);
}

.mk-search {
    position: relative;
    flex: 1;
    min-width: 200px;
}
.mk-search i {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #71717a);
    font-size: 13px;
    pointer-events: none;
}
.mk-search input {
    width: 100%;
    padding: 9px 14px 9px 36px;
    background: var(--card-bg, #1c1c1f);
    border: 1.5px solid var(--border-color, rgba(255,255,255,.055));
    border-radius: 9px;
    color: var(--text-primary, #f4f4f5);
    font-size: 13px;
    font-weight: 500;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
html[dir="rtl"] .mk-search input {
    padding-inline-start: 36px;
    padding-inline-end: 14px;
}
.mk-search input::placeholder { color: var(--text-muted, #71717a); }
.mk-search input:focus {
    border-color: var(--primary, #1d6ef5);
    box-shadow: 0 0 0 3px rgba(29,110,245,.12);
}

body:not(.dark-mode) .mk-search input {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #0f172a;
}

.mk-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mk-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--border-color, rgba(255,255,255,.055));
    background: var(--card-bg, #1c1c1f);
    color: var(--text-secondary, #a1a1aa);
    transition: all .15s;
    user-select: none;
    text-decoration: none;
}
.mk-pill:hover {
    border-color: var(--primary, #1d6ef5);
    color: var(--primary, #1d6ef5);
}
.mk-pill.is-active {
    background: linear-gradient(135deg, var(--primary, #1d6ef5), #4f46e5);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(29,110,245,.3);
}

body:not(.dark-mode) .mk-pill {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #475569;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. STORE PAGE — CARD GRID  (.mk-grid, .mk-card, .mk-cover)
   ───────────────────────────────────────────────────────────────────────────── */

.mk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3, 12px);
}

.mk-card {
    background: var(--card-bg, #1c1c1f);
    border: 1.5px solid var(--border-color, rgba(255,255,255,.055));
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.mk-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.mk-card.is-active {
    border-color: var(--success, #16a34a);
    box-shadow: 0 0 0 1px var(--success, #16a34a), 0 4px 16px rgba(22,163,74,.15);
}

body:not(.dark-mode) .mk-card {
    background: #ffffff;
    border-color: #e2e8f0;
}

.mk-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-primary, #111113);
}
.mk-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.mk-card:hover .mk-cover img { transform: scale(1.04); }

/* ─────────────────────────────────────────────────────────────────────────────
   11. ADDON SHOW — DETAIL PAGE  (.ads-page, .ads-topbar, .ads-grid, .ads-card, .ads-hero)
   ───────────────────────────────────────────────────────────────────────────── */

.ads-page {
    --da3-card:   #1c1c1f;
    --da3-bd:     rgba(255,255,255,.055);
    --da3-bg2:    #111113;
    --da3-shadow: 0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-fg1:    #f4f4f5;
    --da3-fg2:    #a1a1aa;
    --da3-fg3:    #71717a;
    --da3-r:      12px;
    --da3-gap:    16px;
    --da3-accent: var(--role-accent, #7c3aed);
    --da3-abg:    var(--role-accent-soft, rgba(124,58,237,.10));
}
body:not(.dark-mode) .ads-page {
    --da3-card:   #ffffff;
    --da3-bd:     #e2e8f0;
    --da3-bg2:    #f8fafc;
    --da3-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.07);
    --da3-fg1:    #0f172a;
    --da3-fg2:    #475569;
    --da3-fg3:    #94a3b8;
}

/* Top bar with back button */
.ads-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--da3-gap, 16px);
}
.ads-topbar-ico {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.ads-topbar-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--da3-fg1);
    line-height: 1.25;
}
.ads-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--da3-fg2);
    background: var(--da3-bg2);
    border: 1.5px solid var(--da3-bd);
    text-decoration: none;
    transition: all .15s;
    margin-inline-start: auto;
}
.ads-back-btn:hover {
    color: var(--da3-accent);
    border-color: var(--da3-accent);
    background: var(--da3-abg);
}
html[dir="rtl"] .ads-back-btn i { transform: scaleX(-1); }

/* Two-column detail layout */
.ads-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--da3-gap, 16px);
    align-items: start;
}
@media (max-width: 768px) {
    .ads-grid { grid-template-columns: 1fr; }
}

/* Generic card for detail sections */
.ads-card {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r, 12px);
    box-shadow: var(--da3-shadow);
    overflow: hidden;
}
.ads-card-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--da3-bd);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--da3-fg1);
}
.ads-card-body { padding: 16px 18px; }

/* Hero card — image + metadata */
.ads-hero {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 600px) {
    .ads-hero { grid-template-columns: 1fr; }
}
.ads-hero-image {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    object-fit: cover;
    width: 100%;
    background: var(--da3-bg2);
}
.ads-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    background: var(--da3-abg);
    color: var(--da3-accent);
    border: 1px solid color-mix(in srgb, var(--da3-accent) 25%, transparent);
    margin-bottom: 6px;
}
.ads-hero h1 {
    font-size: 20px;
    font-weight: 800;
    color: var(--da3-fg1);
    line-height: 1.25;
    margin: 0 0 6px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. CREATE & EDIT — LAYOUT  (.ac-grid, .ac-cover-card)
   ───────────────────────────────────────────────────────────────────────────── */

/* Back navigation link */
.ac-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--da3-fg2);
    text-decoration: none;
    margin-bottom: 10px;
    transition: color .15s;
}
.ac-back:hover { color: var(--da3-accent); }
.ac-back i { font-size: 10px; }
html[dir="rtl"] .ac-back i { transform: scaleX(-1); }

/* Two-column form layout: fixed cover col + fluid form col */
.ac-grid {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: var(--da3-gap, 16px);
    align-items: start;
}
@media (max-width: 991px) {
    .ac-grid { grid-template-columns: 1fr; }
}

/* Cover card is sticky so it stays visible while scrolling the form */
.ac-cover-card { position: sticky; top: 80px; }

/* ─────────────────────────────────────────────────────────────────────────────
   13. CREATE & EDIT — COVER IMAGE BOX
   ───────────────────────────────────────────────────────────────────────────── */

.ac-cover-box {
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    background: var(--da3-bg2);
    border: 2px dashed var(--da3-bd);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .2s, background .2s;
    position: relative;
    color: var(--da3-fg2);
    text-align: center;
    padding: 16px;
}
.ac-cover-box:hover {
    border-color: var(--da3-accent);
    background: var(--da3-abg);
}
.ac-cover-box img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
/* Hide placeholder elements when image is loaded */
.ac-cover-box.has-image .ac-cover-icon,
.ac-cover-box.has-image .ac-cover-text,
.ac-cover-box.has-image .ac-cover-hint { display: none; }

/* "Click to change" badge shown over existing image in edit mode */
.ac-cover-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    background: rgba(255,255,255,.96);
    color: #1e293b;
    font-size: 12.5px;
    font-weight: 800;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.05);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    pointer-events: none;
    transition: transform .2s ease, box-shadow .2s ease;
    line-height: 1;
    white-space: nowrap;
}
.ac-cover-badge i {
    font-size: 13px;
    color: var(--da3-accent, #7c3aed);
    flex-shrink: 0;
}
.ac-cover-box:hover .ac-cover-badge {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.05);
}
/* Gradient scrim so badge always reads against any image */
.ac-cover-box.has-image::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 60%;
    background: linear-gradient(180deg, transparent 0%, rgba(15,23,42,.35) 100%);
    border-radius: 0 0 12px 12px;
    pointer-events: none;
    z-index: 1;
}

/* Placeholder icon inside empty cover box */
.ac-cover-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.ac-cover-text {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--da3-fg1);
    line-height: 1.4;
}
.ac-cover-hint {
    font-size: 11px;
    color: var(--da3-fg3);
    font-weight: 500;
    line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. CREATE & EDIT — SECTION HEADER  (.ac-sec-hd, .ac-sec-ico, .ac-sec-text)
   ───────────────────────────────────────────────────────────────────────────── */

.ac-sec-hd {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}
.ac-sec-ico {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.ac-sec-text strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--da3-fg1);
    line-height: 1.2;
}
.ac-sec-text span {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--da3-fg3);
    font-weight: 500;
    line-height: 1.45;
}

/* ─────────────────────────────────────────────────────────────────────────────
   15. CREATE & EDIT — CARD CONTAINERS
   ───────────────────────────────────────────────────────────────────────────── */

.ac-card {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r, 12px);
    box-shadow: var(--da3-shadow);
    padding: 20px;
}
.ac-card + .ac-card { margin-top: var(--da3-gap, 16px); }

/* ─────────────────────────────────────────────────────────────────────────────
   16. CREATE & EDIT — FORM FIELDS
   ───────────────────────────────────────────────────────────────────────────── */

.ac-row { display: grid; gap: 14px; }
.ac-row.cols-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .ac-row.cols-2 { grid-template-columns: 1fr; } }

.ac-field { display: flex; flex-direction: column; gap: 6px; }

.ac-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--da3-fg1);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ac-label .req {
    color: var(--danger, #ef4444);
    font-weight: 800;
}

.ac-input,
.ac-select,
.ac-textarea {
    width: 100%;
    background: var(--da3-bg2);
    border: 1.5px solid var(--da3-bd);
    color: var(--da3-fg1);
    font-size: 13px;
    font-weight: 500;
    border-radius: 9px;
    padding: 11px 14px;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s, background .15s;
    outline: none;
}
.ac-input::placeholder,
.ac-textarea::placeholder { color: var(--da3-fg3); }
.ac-input:focus,
.ac-select:focus,
.ac-textarea:focus {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px var(--da3-abg);
}
.ac-textarea { min-height: 120px; resize: vertical; line-height: 1.55; }

/* Validation states */
.ac-input.is-invalid,
.ac-select.is-invalid,
.ac-textarea.is-invalid {
    border-color: var(--danger, #ef4444) !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important;
}
.ac-err {
    font-size: 11px;
    font-weight: 600;
    color: var(--danger, #ef4444);
    margin-top: 4px;
}

/* Native select with chevron arrow */
.ac-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-inline-end: 32px;
}
html[dir="rtl"] .ac-select {
    background-position: left 12px center;
    padding-inline-start: 32px;
    padding-inline-end: 14px;
}

/* Hint text below fields */
.ac-hint {
    font-size: 11px;
    color: var(--da3-fg3);
    line-height: 1.5;
    margin: 2px 0 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   17. CREATE & EDIT — PRICE INPUT GROUP  (.ac-price-group, .ac-price-currency)
   ───────────────────────────────────────────────────────────────────────────── */

.ac-price-group {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--da3-bd);
    border-radius: 9px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.ac-price-group:focus-within {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px var(--da3-abg);
}
.ac-price-group .ac-input {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    flex: 1;
    min-width: 0;
}
.ac-price-group .ac-input:focus {
    border: none !important;
    box-shadow: none !important;
}
.ac-price-currency {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--da3-bg2);
    border-inline-start: 1.5px solid var(--da3-bd);
    font-size: 11px;
    font-weight: 800;
    color: var(--da3-fg3);
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   18. CREATE & EDIT — STICKY ACTION BAR  (.ac-actions, .ac-btn)
   ───────────────────────────────────────────────────────────────────────────── */

.ac-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: var(--da3-gap, 16px);
    padding: 16px 20px;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r, 12px);
    box-shadow: var(--da3-shadow);
    position: sticky;
    bottom: 12px;
    z-index: 5;
}
.ac-actions-left {
    font-size: 11.5px;
    color: var(--da3-fg3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ac-actions-right {
    display: flex;
    gap: 10px;
}

.ac-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}
.ac-btn-primary {
    background: var(--da3-accent);
    color: #fff;
    border-color: var(--da3-accent);
    box-shadow: 0 2px 8px var(--da3-abg);
}
.ac-btn-primary:hover {
    filter: brightness(1.08);
    color: #fff;
    transform: translateY(-1px);
}
.ac-btn-ghost {
    background: transparent;
    color: var(--da3-fg1);
    border-color: var(--da3-bd);
}
.ac-btn-ghost:hover {
    background: var(--da3-abg);
    color: var(--da3-accent);
    border-color: var(--da3-accent);
}

@media (max-width: 600px) {
    .ac-actions { flex-direction: column; align-items: stretch; }
    .ac-actions-right { justify-content: flex-end; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   19. RESPONSIVE — BREAKPOINTS
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .adm-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
    .mk-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .mk-stats {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

@media (max-width: 600px) {
    .adm-toolbar { flex-direction: column; align-items: stretch; }
    .mk-toolbar  { flex-direction: column; align-items: stretch; }
    .adm-grid    { grid-template-columns: 1fr 1fr; }
    .mk-grid     { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
    .adm-grid { grid-template-columns: 1fr; }
    .mk-grid  { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   Chat
   Merged from: chat.css
═══════════════════════════════════════════════════════════════ */

/* ============================================================
   ELMATAJER — CHAT SUPPORT SYSTEM CSS v7
   Floating Widget + Admin Chat Dashboard
   Full dark / light mode + RTL / LTR
   ============================================================ */

/* ── Colour tokens ────────────────────────────────────────── */
:root {
  --cw-bg:             #ffffff;
  --cw-bg-alt:         #f1f5f9;
  --cw-surface:        #ffffff;
  --cw-border:         #e2e8f0;
  --cw-text:           #0f172a;
  --cw-text-muted:     #64748b;
  --cw-shadow:         0 20px 60px rgba(0,0,0,.13), 0 0 0 1px rgba(0,0,0,.06);
  --cw-input-bg:       #f8fafc;
  --cw-input-focus:    #f1f5f9;
  --cw-bubble-in-bg:   #f1f5f9;
  --cw-bubble-in-c:    #0f172a;
}
body.dark-mode {
  --cw-bg:             #1e1e2a;
  --cw-bg-alt:         #161622;
  --cw-surface:        #252535;
  --cw-border:         rgba(255,255,255,.08);
  --cw-text:           #e2e8f0;
  --cw-text-muted:     #64748b;
  --cw-shadow:         0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  --cw-input-bg:       #1a1a28;
  --cw-input-focus:    #161622;
  --cw-bubble-in-bg:   #2a2a3a;
  --cw-bubble-in-c:    #e2e8f0;
}

/* ══════════════════════════════════════════════════════
   FLOATING WIDGET
══════════════════════════════════════════════════════ */

/* Container — side-anchored, bottom area */
.chat-widget-container {
  position:        fixed;
  bottom:          60px;
  z-index:         9999;
  font-family:     'Inter','Tajawal',sans-serif;
  display:         flex;
  flex-direction:  row;
  align-items:     flex-end;
}
html[dir="rtl"] .chat-widget-container { left: 0; right: auto; }
html[dir="ltr"] .chat-widget-container { right: 0; left: auto; }

/* Open state */
.chat-widget-container.cw-active {
  flex-direction: column;
  align-items:    flex-start;
}
html[dir="rtl"] .chat-widget-container.cw-active { left: 12px; }
html[dir="ltr"] .chat-widget-container.cw-active { right: 12px; }

/* ── Side Tab Button — horizontal, icon + text ── */
.chat-widget-btn {
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  gap:             8px;
  padding:         12px 12px 12px 7px;
  background:      linear-gradient(135deg, var(--primary, #5b3df5) 0%, #7c3aed 100%);
  color:           #fff;
  cursor:          pointer;
  user-select:     none;
  position:        relative;
  white-space:     nowrap;
}
/* RTL: padding-right(14) + icon(18) = 32px — بس الأيقونة ظاهرة */
html[dir="rtl"] .chat-widget-btn {
  border-radius:  0 12px 12px 0;
  box-shadow:     3px 0 12px rgba(0,0,0,.18);
  transform:      translateX(calc(-100% + 32px));
  transition:     transform .28s cubic-bezier(.25,.46,.45,.94);
  will-change:    transform;
}
html[dir="rtl"] .chat-widget-btn:hover {
  transform:      translateX(0);
}

/* LTR: padding-left(14) + icon(18) = 32px */
html[dir="ltr"] .chat-widget-btn {
  border-radius:  12px 0 0 12px;
  box-shadow:     -3px 0 12px rgba(0,0,0,.18);
  transform:      translateX(calc(100% - 32px));
  transition:     transform .28s cubic-bezier(.25,.46,.45,.94);
  will-change:    transform;
}
html[dir="ltr"] .chat-widget-btn:hover {
  transform:      translateX(0);
}

.chat-widget-btn i { font-size: 17px; line-height: 1; flex-shrink: 0; }
.chat-widget-btn > span:not(.chat-widget-badge) {
  font-size: 13px; font-weight: 700; letter-spacing: .3px; white-space: nowrap;
}

/* ── Popup Close Handle — sits naturally below the popup in the flex column ── */
.chat-popup-handle {
  display:         none; /* JS sets to flex when open */
  position:        relative;
  width:           48px;
  height:          48px;
  border-radius:   50%;
  background:      linear-gradient(135deg, var(--primary, #5b3df5) 0%, #7c3aed 100%);
  color:           #fff;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  user-select:     none;
  box-shadow:      0 4px 16px rgba(0,0,0,.2);
  transition:      opacity .2s, transform .2s;
  animation:       cwHandleIn .35s cubic-bezier(.19,1,.22,1);
  flex-shrink:     0;
}

.chat-popup-handle i    { font-size: 18px; line-height: 1; }
.chat-popup-handle span { display: none; }
.chat-popup-handle:hover { opacity: .85; transform: scale(1.08); }
@keyframes cwHandleIn {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1);  }
}

/* notification badge */
.chat-widget-badge {
  position:    absolute;
  top:         -5px;
  background:  #ef4444;
  color:       #fff;
  font-size:   11px;
  font-weight: 700;
  min-width:   20px;
  height:      20px;
  display:     flex;
  align-items: center;
  justify-content: center;
  border-radius:   50%;
  border:      2px solid var(--cw-bg);
  box-shadow:  0 2px 8px rgba(239,68,68,.4);
}
html[dir="rtl"] .chat-widget-badge { left: -5px; right: auto; }
html[dir="ltr"] .chat-widget-badge { right: -5px; left: auto; }

/* ── Popup Window — slides up from bottom ── */
.chat-widget-popup {
  width:            360px;
  max-width:        calc(100vw - 20px);
  height:           500 px;
  max-height:       calc(100vh - 140px);
  background:       var(--cw-bg);
  box-shadow:       var(--cw-shadow);
  border:           1px solid var(--cw-border);
  display:          none;
  flex-direction:   column;
  overflow:         hidden;
  opacity:          0;
  transform:        translateY(20px) scale(.97);
  transform-origin: bottom left;
  transition:       opacity .32s cubic-bezier(.19,1,.22,1),
                    transform .32s cubic-bezier(.19,1,.22,1);
}
html[dir="rtl"] .chat-widget-popup {
  border-radius:    18px;
  margin-left:      0;
  transform:        translateY(30px) scale(.88);
  transform-origin: bottom left;
}
html[dir="ltr"] .chat-widget-popup {
  border-radius:    18px;
  margin-right:     0;
  transform:        translateY(30px) scale(.88);
  transform-origin: bottom right;
}

.chat-widget-popup.cw-open {
  opacity:   1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ── Header ── */
.chat-widget-header {
  background:      linear-gradient(135deg, var(--primary, #5b3df5) 0%, #6d28d9 100%);
  padding:         20px 20px 20px 22px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  position:        relative;
  flex-shrink:     0;
}
.chat-widget-header::after {
  content:''; position:absolute; top:-24px; right:-24px;
  width:110px; height:110px; border-radius:50%;
  background:rgba(255,255,255,.07); pointer-events:none;
}
html[dir="rtl"] .chat-widget-header::after { right:auto; left:-24px; }

.chat-widget-header-info { display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.chat-header-avatar {
  width:42px; height:42px;
  background:rgba(255,255,255,.18); backdrop-filter:blur(4px);
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px; border:1px solid rgba(255,255,255,.25); flex-shrink:0;
}
.chat-widget-header-info h5 { margin:0; font-size:16px; font-weight:700; color:#fff; }
.chat-widget-header-info p  { margin:0; font-size:12px; color:rgba(255,255,255,.75); margin-top:2px; }

.chat-widget-close {
  background:rgba(255,255,255,.15); border:none;
  width:32px; height:32px; border-radius:50%;
  color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; z-index:1; transition:background .2s; flex-shrink:0;
}
.chat-widget-close:hover { background:rgba(255,255,255,.28); }

/* ── Body (menu state) ── */
.chat-widget-body {
  flex:1; padding:10px 16px 24px;
  background:var(--cw-bg-alt);
  overflow-y:auto;
  min-height:120px;
}
.chat-widget-body::-webkit-scrollbar { width:4px; }
.chat-widget-body::-webkit-scrollbar-thumb { background:var(--cw-border); border-radius:4px; }

.cw-menu-card {
  background:var(--cw-surface);
  border:1.5px solid var(--cw-border);
  border-radius:16px;
  padding:16px 18px;
  display:flex; align-items:center; gap:14px;
  cursor:pointer;
  transition:border-color .22s, box-shadow .22s, transform .22s;
  margin-bottom:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.cw-menu-card:hover {
  border-color:var(--primary, #5b3df5);
  box-shadow:0 4px 18px rgba(91,61,245,.13);
  transform:translateY(-1px);
}
.cw-menu-icon {
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(91,61,245,.12) 0%,rgba(124,58,237,.08) 100%);
  color:var(--primary, #5b3df5);
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  border:1px solid rgba(91,61,245,.15);
}
.cw-menu-icon.cw-active {
  background:linear-gradient(135deg, var(--primary,#5b3df5) 0%, #7c3aed 100%);
  color:#fff; border-color:transparent;
}
.cw-menu-card h6    { margin:0 0 3px; font-size:14px; font-weight:700; color:var(--cw-text); }
.cw-menu-card small { color:var(--cw-text-muted); font-size:12px; line-height:1.4; }
.cw-arrow { margin-inline-start:auto; color:var(--cw-text-muted); font-size:12px; flex-shrink:0; opacity:.5; }
html[dir="rtl"] .cw-arrow { transform: scaleX(-1); }

/* ── Messages ── */
.cw-messages {
  flex:1; padding:16px;
  display:flex; flex-direction:column; gap:10px;
  overflow-y:auto; min-height:0;
  background:var(--cw-bg-alt);
}
.cw-messages::-webkit-scrollbar { width:4px; }
.cw-messages::-webkit-scrollbar-thumb { background:var(--cw-border); border-radius:4px; }

.cw-bubble {
  max-width:82%; padding:10px 14px;
  font-size:13.5px; line-height:1.55;
  border-radius:16px; word-break:break-word;
  box-shadow:0 1px 4px rgba(0,0,0,.07);
}
.cw-bubble.support {
  align-self:flex-start;
  background:var(--cw-bubble-in-bg); color:var(--cw-bubble-in-c);
  border:1px solid var(--cw-border); border-bottom-left-radius:4px;
}
html[dir="rtl"] .cw-bubble.support {
  align-self:flex-end; border-bottom-left-radius:16px; border-bottom-right-radius:4px;
}
.cw-bubble.user {
  align-self:flex-end;
  background:linear-gradient(135deg, var(--primary, #5b3df5) 0%, #7c3aed 100%);
  color:#fff; border-bottom-right-radius:4px;
}
html[dir="rtl"] .cw-bubble.user {
  align-self:flex-start; border-bottom-right-radius:16px; border-bottom-left-radius:4px;
}

/* ── Input Row ── */
.cw-input-wrap {
  background:var(--cw-surface); padding:12px 14px;
  border-top:1px solid var(--cw-border);
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  direction: ltr; /* always: input LEFT, button RIGHT — icon always correct */
}
html[dir="rtl"] .cw-input-wrap { direction: rtl; }

.cw-input-wrap input {
  flex:1; height:42px;
  border:1.5px solid var(--cw-border); border-radius:12px;
  background:var(--cw-input-bg); padding:0 14px;
  font-size:13.5px; outline:none; color:var(--cw-text);
  text-align: start;
  transition:border-color .2s, background .2s, box-shadow .2s; font-family:inherit;
}
.cw-input-wrap input::placeholder { color:var(--cw-text-muted); }
.cw-input-wrap input:focus {
  border-color:var(--primary, #5b3df5); background:var(--cw-input-focus);
  box-shadow:0 0 0 3px rgba(91,61,245,.12);
}
.cw-input-wrap button {
  width:42px; height:42px; flex-shrink:0; border:none;
  background:linear-gradient(135deg, var(--primary, #5b3df5) 0%, #7c3aed 100%);
  color:#fff; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .2s, opacity .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.cw-input-wrap button:hover { opacity:.9; transform:scale(1.06); }
/* paper-plane icon — always points in the send direction */
.cw-input-wrap button i { font-size:16px; display:block; }
html[dir="rtl"] .cw-input-wrap button i { transform: scaleX(-1); }

/* ── Sent State ── */
.cw-sent-state { text-align:center; padding:20px; }
.cw-sent-icon {
  font-size:60px; color:#10b981; margin-bottom:14px;
  animation:cwScaleIn .5s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes cwScaleIn { 0%{transform:scale(0)} 100%{transform:scale(1)} }
.cw-sent-state h5 { font-size:17px; font-weight:700; color:var(--cw-text); margin-bottom:8px; }
.cw-sent-state p  { color:var(--cw-text-muted); font-size:13px; margin-bottom:20px; }
.cw-sent-state button {
  background:var(--cw-bg-alt); color:var(--cw-text); font-weight:600;
  border:1px solid var(--cw-border); padding:9px 22px; border-radius:10px;
  cursor:pointer; transition:background .2s;
}
.cw-sent-state button:hover { background:var(--cw-border); }


/* ══════════════════════════════════════════════════════
   ADMIN CHAT DASHBOARD
══════════════════════════════════════════════════════ */
.chat-layout {
  display:flex; height:calc(100vh - 120px);
  background:var(--cw-surface); border-radius:20px;
  box-shadow:0 2px 16px rgba(0,0,0,.06);
  overflow:hidden; font-family:'Inter','Tajawal',sans-serif;
  border:1px solid var(--cw-border);
}

.chat-sidebar {
  width:340px; border-inline-end:1px solid var(--cw-border);
  display:flex; flex-direction:column; background:var(--cw-surface); z-index:2;
}
.chat-filters-container {
  padding:20px; border-bottom:1px solid var(--cw-border); background:var(--cw-surface);
}
.search-input-wrapper { position:relative; margin-bottom:14px; }
.search-input-wrapper i {
  position:absolute; top:50%; transform:translateY(-50%); color:var(--cw-text-muted);
}
html[dir="rtl"] .search-input-wrapper i { right:14px; }
html[dir="ltr"] .search-input-wrapper i { left:14px; }
.search-input-wrapper input {
  width:100%; background:var(--cw-input-bg); border:1.5px solid var(--cw-border);
  border-radius:12px; padding:11px 16px; font-size:13.5px; outline:none;
  color:var(--cw-text); transition:all .2s;
}
html[dir="rtl"] .search-input-wrapper input { padding-right:40px; }
html[dir="ltr"] .search-input-wrapper input { padding-left:40px; }
.search-input-wrapper input::placeholder { color:var(--cw-text-muted); }
.search-input-wrapper input:focus {
  background:var(--cw-surface); border-color:var(--primary, #5b3df5);
  box-shadow:0 0 0 3px rgba(91,61,245,.1);
}
.type-filters { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.type-filters::-webkit-scrollbar { height:3px; }
.type-filters::-webkit-scrollbar-thumb { background:var(--cw-border); border-radius:3px; }
.type-btn {
  white-space:nowrap; padding:5px 14px; border-radius:20px;
  background:var(--cw-bg-alt); border:1px solid var(--cw-border);
  color:var(--cw-text-muted); font-size:13px; font-weight:600; cursor:pointer; transition:all .2s;
}
.type-btn:hover { background:var(--cw-border); color:var(--cw-text); }
.type-btn.active { background:var(--primary, #5b3df5); color:#fff; border-color:var(--primary, #5b3df5); }

.chat-list { flex:1; overflow-y:auto; padding:10px; }
.chat-item {
  display:flex; gap:12px; padding:12px 14px; border-radius:14px;
  cursor:pointer; transition:all .2s; margin-bottom:4px; border:1px solid transparent;
}
.chat-item:hover { background:var(--cw-bg-alt); border-color:var(--cw-border); }
.chat-item.active { background:rgba(91,61,245,.07); border-color:rgba(91,61,245,.2); }
.chat-item-avatar-wrap { flex-shrink:0; }
.chat-item-content { flex:1; overflow:hidden; }
.chat-item-content h6 {
  margin:0 0 3px; font-size:14px; font-weight:700; color:var(--cw-text);
  display:flex; justify-content:space-between; align-items:center;
}
.chat-item-content .time { font-size:11px; color:var(--cw-text-muted); font-weight:500; }
.chat-item-content p { margin:0; font-size:12.5px; color:var(--cw-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-item-badge {
  background:#ef4444; color:#fff; font-size:11px; font-weight:700;
  padding:2px 7px; border-radius:10px; flex-shrink:0;
}
.chat-item-fallback { display:none; flex-shrink:0; }

.chat-main { flex:1; display:flex; flex-direction:column; background:var(--cw-bg-alt); position:relative; }
.empty-chat { align-items:center; justify-content:center; text-align:center; background:var(--cw-bg-alt); }
.empty-chat i { font-size:64px; color:var(--cw-border); margin-bottom:20px; }
.empty-chat h3 { font-size:20px; font-weight:700; color:var(--cw-text); margin-bottom:10px; }
.empty-chat p { color:var(--cw-text-muted); font-size:14px; max-width:280px; line-height:1.6; }

.chat-header {
  background:var(--cw-surface); padding:18px 24px; border-bottom:1px solid var(--cw-border);
  display:flex; justify-content:space-between; align-items:center;
  box-shadow:0 2px 12px rgba(0,0,0,.04); z-index:1;
}
.chat-header-info { display:flex; align-items:center; gap:14px; }
.chat-header-info img { width:46px; height:46px; border-radius:12px; object-fit:cover; }
.chat-header-info h5 { margin:0 0 3px; font-size:16px; font-weight:700; color:var(--cw-text); }
.chat-header-info p  { margin:0; font-size:12px; color:var(--cw-text-muted); }

.chat-body {
  flex:1; padding:24px; overflow-y:auto;
  display:flex; flex-direction:column; gap:20px;
  background:var(--cw-bg-alt);
}
.chat-body::-webkit-scrollbar { width:5px; }
.chat-body::-webkit-scrollbar-thumb { background:var(--cw-border); border-radius:5px; }

.unread-divider { text-align:center; position:relative; margin:8px 0; }
.unread-divider::before {
  content:''; position:absolute; top:50%; left:0; right:0;
  height:1px; background:var(--cw-border); z-index:1;
}
.unread-divider span {
  background:var(--cw-bg-alt); padding:0 14px; color:#ef4444;
  font-size:12px; font-weight:600; position:relative; z-index:2;
}

.chat-bubble {
  max-width:65%; padding:14px 18px; font-size:14.5px; line-height:1.6;
  position:relative; box-shadow:0 1px 6px rgba(0,0,0,.06);
  word-wrap:break-word; border-radius:18px;
}
.chat-bubble.admin {
  align-self:flex-end;
  background:linear-gradient(135deg, var(--primary, #5b3df5) 0%, #7c3aed 100%);
  color:#fff; border-bottom-right-radius:4px;
}
html[dir="rtl"] .chat-bubble.admin { border-bottom-right-radius:18px; border-bottom-left-radius:4px; }
.chat-bubble.user {
  align-self:flex-start;
  background:var(--cw-surface); color:var(--cw-text);
  border:1px solid var(--cw-border); border-bottom-left-radius:4px;
}
html[dir="rtl"] .chat-bubble.user { border-bottom-left-radius:18px; border-bottom-right-radius:4px; }
.chat-time { display:block; font-size:11px; margin-top:6px; opacity:.6; text-align:end; }

.chat-footer {
  padding:16px 24px; background:var(--cw-surface); border-top:1px solid var(--cw-border);
  display:flex; align-items:center; gap:14px; z-index:1;
}
.chat-footer input {
  flex:1; height:50px;
  background:var(--cw-input-bg); border:1.5px solid var(--cw-border);
  border-radius:14px; padding:0 20px; font-size:14px; outline:none;
  color:var(--cw-text); transition:all .2s;
}
.chat-footer input::placeholder { color:var(--cw-text-muted); }
.chat-footer input:focus {
  background:var(--cw-surface); border-color:var(--primary, #5b3df5);
  box-shadow:0 0 0 3px rgba(91,61,245,.1);
}
.chat-footer button {
  width:50px; height:50px; flex-shrink:0;
  background:linear-gradient(135deg, var(--primary, #5b3df5) 0%, #7c3aed 100%);
  color:#fff; border:none; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  cursor:pointer; transition:transform .2s, opacity .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.chat-footer button:hover { transform:scale(1.06); opacity:.92; }
html[dir="rtl"] .chat-footer button i { transform:scaleX(-1); }


/* ============================================================
   CHAT DASHBOARD PAGE — da3-system scoped overrides
   Extracted from admin/chat/index.blade.php — Wave 4 (2026-05-25)
   All rules scoped under .chat-page to prevent bleed.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   CHATS & SUPPORT — Dashboard da3-system parity
   ══════════════════════════════════════════════════════════ */
.chat-page {
    --da3-card:    #1c1c1f;
    --da3-bd:      rgba(255,255,255,.055);
    --da3-bg2:     #111113;
    --da3-shadow:  0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-fg1:     #f4f4f5;
    --da3-fg2:     #a1a1aa;
    --da3-fg3:     #71717a;
    --da3-line:    rgba(255,255,255,.06);
    --da3-hover:   rgba(255,255,255,.03);
    --da3-r:       12px;
    --da3-gap:     16px;
    --da3-accent:  #3b82f6;
    --da3-abg:     rgba(59,130,246,.12);
}
body:not(.dark-mode) .chat-page {
    --da3-card:    #ffffff;
    --da3-bd:      #e4e4e7;
    --da3-bg2:     #f9f9fb;
    --da3-shadow:  0 1px 3px rgba(0,0,0,.07), 0 0 0 1px #e4e4e7;
    --da3-fg1:     #09090b;
    --da3-fg2:     #52525b;
    --da3-fg3:     #a1a1aa;
    --da3-line:    #f4f4f5;
    --da3-hover:   rgba(0,0,0,.02);
}

/* Hide the floating widget on the chat dashboard page to prevent overlap */
.chat-widget-container { display: none !important; }

/* ─── Top bar (dashboard parity) ─────────────────────────── */
.chat-topbar {
    background:    var(--da3-card);
    border:        1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow:    var(--da3-shadow);
    margin-bottom: var(--da3-gap);
    overflow:      hidden;
}
.chat-topbar-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             14px;
    padding:         18px 22px 14px;
    flex-wrap:       wrap;
}
.chat-topbar-id    { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.chat-topbar-ico   {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0;
}
.chat-topbar-info  { min-width: 0; }
.chat-topbar-title {
    font-size: 20px; font-weight: 700;
    color: var(--da3-fg1);
    margin: 0 0 4px;
    letter-spacing: -.2px; line-height: 1.2;
}
.chat-topbar-sub {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--da3-fg3);
    flex-wrap: wrap; margin: 0;
}
.chat-topbar-sub .live-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600;
    color: #10b981;
    background: rgba(16,185,129,.1);
    border-radius: 20px;
    padding: 2px 9px 2px 7px;
}
.chat-topbar-sub .live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #10b981;
    animation: chPulse 2s ease-in-out infinite;
}
@keyframes chPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(1.35)} }
.chat-topbar-sub .dot-sep { color: var(--da3-fg3); opacity: .4; }

/* ─── Container card (wraps the chat layout) ────────────── */
.chat-shell {
    background:    var(--da3-card);
    border:        1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow:    var(--da3-shadow);
    overflow:      hidden;
}

/* ─── Override chat.css to match da3 ─────────────────────── */
.chat-page .chat-layout {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    min-height: 640px !important;
    max-height: calc(100vh - 240px) !important;
}
.chat-page .chat-sidebar {
    background: var(--da3-bg2) !important;
    border-inline-end: 1px solid var(--da3-line) !important;
    width: 340px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
.chat-page .chat-filters-container {
    background: transparent !important;
    border-bottom: 1px solid var(--da3-line) !important;
    padding: 16px 16px 12px !important;
    flex-shrink: 0 !important;
}
.chat-page .search-input-wrapper {
    position: relative;
    margin-bottom: 12px;
}
.chat-page .search-input-wrapper i {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    inset-inline-start: 12px;
    color: var(--da3-fg3);
    font-size: 13px;
    pointer-events: none;
}
.chat-page .search-input-wrapper input,
.chat-page #chatSearchInput {
    width: 100%;
    padding: 10px 12px 10px 36px !important;
    background: var(--da3-card) !important;
    border: 1px solid var(--da3-bd) !important;
    border-radius: 9px !important;
    color: var(--da3-fg1) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    outline: none !important;
    transition: border-color .15s;
}
html[dir="rtl"] .chat-page #chatSearchInput { padding: 10px 36px 10px 12px !important; }
.chat-page #chatSearchInput:focus {
    border-color: var(--da3-accent) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
}
.chat-page #chatSearchInput::placeholder { color: var(--da3-fg3) !important; }

.chat-page .type-filters {
    display: flex; gap: 6px; flex-wrap: wrap;
}
.chat-page .type-btn {
    background: var(--da3-card) !important;
    border: 1px solid var(--da3-bd) !important;
    color: var(--da3-fg2) !important;
    border-radius: 999px !important;
    padding: 5px 11px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: all .15s;
    display: inline-flex; align-items: center; gap: 5px;
    cursor: pointer;
}
.chat-page .type-btn:hover { color: var(--da3-accent) !important; border-color: var(--da3-accent) !important; }
.chat-page .type-btn.active {
    background: var(--da3-accent) !important;
    color: #fff !important;
    border-color: var(--da3-accent) !important;
    box-shadow: 0 2px 6px rgba(59,130,246,.28);
}
.chat-page .type-btn .badge {
    background: rgba(255,255,255,.25);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
}
.chat-page .type-btn:not(.active) .badge {
    background: var(--da3-abg);
    color: var(--da3-accent);
}

.chat-page .chat-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px !important;
}
.chat-page .chat-list::-webkit-scrollbar { width: 6px; }
.chat-page .chat-list::-webkit-scrollbar-track { background: transparent; }
.chat-page .chat-list::-webkit-scrollbar-thumb { background: var(--da3-bd); border-radius: 3px; }

.chat-page .chat-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    margin-bottom: 4px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s !important;
}
.chat-page .chat-item:hover {
    background: var(--da3-hover) !important;
    border-color: var(--da3-bd) !important;
}
.chat-page .chat-item.active {
    background: var(--da3-abg) !important;
    border-color: rgba(59,130,246,.3) !important;
}
.chat-page .chat-item-pinned {
    background: rgba(59,130,246,.06) !important;
}
.chat-page .chat-item img,
.chat-page .chat-item-avatar-wrap img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    border: 1.5px solid var(--da3-bd) !important;
    flex-shrink: 0;
}
.chat-page .chat-item-fallback {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: var(--da3-bg2) !important;
    color: var(--da3-fg3) !important;
    border: 1.5px solid var(--da3-bd) !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
}
.chat-page .chat-item-content { flex: 1; min-width: 0; overflow: hidden; }
.chat-page .chat-item-content h6 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin: 0 0 3px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--da3-fg1) !important;
    line-height: 1.3 !important;
}
.chat-page .chat-item-content h6 .time {
    font-size: 10.5px !important;
    color: var(--da3-fg3) !important;
    font-weight: 500 !important;
    flex-shrink: 0;
}
.chat-page .chat-item-content p {
    margin: 0 !important;
    font-size: 12px !important;
    color: var(--da3-fg2) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
}
.chat-page .chat-item-badge {
    background: var(--da3-accent) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 1px 7px !important;
    border-radius: 10px !important;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(59,130,246,.4);
}

/* ─── Main chat area ─────────────────────────────────────── */
/* Visibility is controlled exclusively by the parent class
   `.chat-layout.has-active-chat` (set by JS in openChat / cleared on close).
   No inline display toggling — that was fighting with CSS specificity. */
.chat-page .chat-main {
    flex: 1 !important;
    flex-direction: column !important;
    background: var(--da3-card) !important;
    min-width: 0;
}

/* DEFAULT (no chat selected): only the empty state is visible */
.chat-page .chat-layout #chatMainArea,
.chat-page .chat-layout #chatInfoPanel        { display: none !important; }
.chat-page .chat-layout #chatEmptyState       { display: flex !important; background: var(--da3-bg2) !important; }

/* ACTIVE (a chat is open): the chat + info panel show, empty state is hidden */
.chat-page .chat-layout.has-active-chat #chatMainArea   { display: flex !important; }
.chat-page .chat-layout.has-active-chat #chatInfoPanel  { display: flex !important; }
.chat-page .chat-layout.has-active-chat #chatEmptyState { display: none !important; }
.chat-page .chat-header {
    background: var(--da3-card) !important;
    border-bottom: 1px solid var(--da3-line) !important;
    padding: 14px 20px !important;
}
.chat-page .chat-header img,
.chat-page #activeChatImage {
    width: 44px !important;
    height: 44px !important;
    border: 2px solid var(--da3-bd) !important;
    border-radius: 50% !important;
}
.chat-page .chat-header h5,
.chat-page #activeChatName {
    color: var(--da3-fg1) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 0 2px !important;
}
.chat-page .chat-header p,
.chat-page #activeChatType {
    color: var(--da3-fg3) !important;
    font-size: 12px !important;
    margin: 0 !important;
}

/* ─── Chat body with wallpaper ───────────────────────────────────────
   Two-layer professional pattern:
     1) Fine dot grid (40px tile)  — gives the surface a subtle "graph paper"
        / design-system texture without competing with the messages.
     2) Sparse chat-themed glyphs (360px tile) — barely-visible silhouettes
        (~1.6% opacity) that hint at the page's purpose. Three icons spread
        across a large tile so they never crowd the bubbles.
   Both layers swap fill colour between dark/light modes.                */
.chat-page {
    --chat-wp-grid-dark:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='%23ffffff' fill-opacity='0.032'><circle cx='2' cy='2' r='0.9'/><circle cx='22' cy='22' r='0.9'/></g></svg>");
    --chat-wp-grid-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='%23000000' fill-opacity='0.040'><circle cx='2' cy='2' r='0.9'/><circle cx='22' cy='22' r='0.9'/></g></svg>");
    --chat-wp-glyph-dark:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'><g fill='%23ffffff' fill-opacity='0.018'><path d='M60 80h40c5 0 9 4 9 9v20c0 5-4 9-9 9H80l-12 12V118h-8c-5 0-9-4-9-9V89c0-5 4-9 9-9z'/><path d='M270 250c-12 0-22 10-22 22v15c0 2 2 4 4 4h4c2 0 4-2 4-4v-14c0-2-2-4-4-4h-1v-1c0-8 7-14 15-14s15 6 15 14v1h-1c-2 0-4 2-4 4v14c0 2 2 4 4 4h4v1c0 3-3 6-6 6h-9c-2 0-4 2-4 4s2 4 4 4h9c8 0 14-6 14-14v-1c2 0 4-2 4-4v-15c0-12-10-22-22-22z'/><path d='M180 170l8-4-4-8 4-8 8 4 8-4 4 8 4 4-4 4-4 8-8-4-8 4-4-8-4-4z' opacity='0.55'/></g></svg>");
    --chat-wp-glyph-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'><g fill='%23000000' fill-opacity='0.022'><path d='M60 80h40c5 0 9 4 9 9v20c0 5-4 9-9 9H80l-12 12V118h-8c-5 0-9-4-9-9V89c0-5 4-9 9-9z'/><path d='M270 250c-12 0-22 10-22 22v15c0 2 2 4 4 4h4c2 0 4-2 4-4v-14c0-2-2-4-4-4h-1v-1c0-8 7-14 15-14s15 6 15 14v1h-1c-2 0-4 2-4 4v14c0 2 2 4 4 4h4v1c0 3-3 6-6 6h-9c-2 0-4 2-4 4s2 4 4 4h9c8 0 14-6 14-14v-1c2 0 4-2 4-4v-15c0-12-10-22-22-22z'/><path d='M180 170l8-4-4-8 4-8 8 4 8-4 4 8 4 4-4 4-4 8-8-4-8 4-4-8-4-4z' opacity='0.55'/></g></svg>");
    --chat-wp-grid:  var(--chat-wp-grid-dark);
    --chat-wp-glyph: var(--chat-wp-glyph-dark);
}
body:not(.dark-mode) .chat-page {
    --chat-wp-grid:  var(--chat-wp-grid-light);
    --chat-wp-glyph: var(--chat-wp-glyph-light);
}

.chat-page .chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px !important;
    background-color: var(--da3-bg2) !important;
    background-image: var(--chat-wp-glyph), var(--chat-wp-grid) !important;
    background-repeat: repeat, repeat !important;
    background-size:   360px 360px, 40px 40px !important;
    background-position: 0 0, 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.chat-page .chat-body::-webkit-scrollbar { width: 6px; }
.chat-page .chat-body::-webkit-scrollbar-track { background: transparent; }
.chat-page .chat-body::-webkit-scrollbar-thumb { background: var(--da3-bd); border-radius: 3px; }
.chat-page .chat-body::-webkit-scrollbar-thumb:hover { background: var(--da3-fg3); }

.chat-page .chat-footer {
    background:     var(--da3-card) !important;
    border-top:     1px solid var(--da3-bd) !important;   /* da3-bd is visible in both dark and light */
    display:        flex !important;
    flex-direction: column !important;
    align-items:    stretch !important;
    gap:            0 !important;
    padding:        0 !important;
}
/* Image preview strip — shown above input row when file is selected */
/* ── Multi-image preview strip ──────────────────────────── */
.chat-page .chat-img-preview {
    display: none;
    padding: 10px 16px 6px;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid var(--da3-line);
}
.chat-page .chat-img-preview.visible { display: flex; }

/* Individual thumbnail card */
.chat-page .chat-img-thumb {
    position: relative;
    width: 60px; height: 60px;
    border-radius: 9px;
    overflow: visible;          /* allow the ✕ badge to bleed outside */
    flex-shrink: 0;
}
.chat-page .chat-img-thumb img {
    width: 60px; height: 60px;
    object-fit: cover;
    border-radius: 9px;
    border: 1.5px solid var(--da3-bd);
    display: block;
}
/* ✕ badge — top-right corner of the thumb */
.chat-page .chat-img-thumb .del-thumb {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid var(--da3-card);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 9px;
    transition: transform .12s, background .12s;
    z-index: 2;
    line-height: 1;
}
.chat-page .chat-img-thumb .del-thumb:hover {
    transform: scale(1.15);
    background: #dc2626;
}
/* Input row */
.chat-page .chat-footer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 12px;
}
.chat-page .chat-footer-row #adminChatInput {
    flex:       1 1 0% !important;   /* grow to fill ALL remaining space */
    width:      0     !important;   /* override any intrinsic/chat.css width */
    min-width:  0     !important;   /* allow shrink below natural size */
    background: var(--da3-bg2) !important;
    border:     1px solid var(--da3-bd) !important;
    border-radius: 9px !important;
    padding:    10px 14px !important;
    color:      var(--da3-fg1) !important;
    font-size:  13px !important;
    font-weight: 500 !important;
    outline:    none !important;
}
.chat-page .chat-footer-row #adminChatInput:focus {
    border-color: var(--da3-accent) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
}
.chat-page .chat-footer-row #adminChatInput::placeholder { color: var(--da3-fg3) !important; }
/* Image attach button */
.chat-page .chat-attach-btn {
    background: var(--da3-bg2) !important;
    color: var(--da3-fg2) !important;
    border: 1px solid var(--da3-bd) !important;
    width: 40px; height: 40px;
    border-radius: 10px !important;
    display: inline-flex;
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
    font-size: 15px;
}
.chat-page .chat-attach-btn:hover,
.chat-page .chat-attach-btn.has-file {
    background: var(--da3-abg) !important;
    color: var(--da3-accent) !important;
    border-color: var(--da3-accent) !important;
}
.chat-page .chat-footer button[onclick*="sendAdminMessage"],
.chat-page .chat-send-btn {
    background: var(--da3-accent) !important;
    color: #fff !important;
    border: 0 !important;
    width: 40px; height: 40px;
    border-radius: 10px !important;
    display: inline-flex;
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: filter .15s, transform .15s;
    box-shadow: 0 2px 8px rgba(59,130,246,.28);
    flex-shrink: 0;
}
.chat-page .chat-footer button:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* Image bubble */
.chat-page .chat-bubble .bubble-img {
    display: block;
    max-width: 220px;
    max-height: 220px;
    border-radius: 10px;
    object-fit: cover;
    cursor: zoom-in;
    margin-bottom: 4px;
    border: 1.5px solid rgba(255,255,255,.15);
}
.chat-page .chat-bubble.user .bubble-img { border-color: var(--da3-bd); }

/* ─── Empty state ────────────────────────────────────────── */
.chat-page .empty-chat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 40px 20px !important;
    color: var(--da3-fg3) !important;
    background: var(--da3-bg2) !important;
    flex: 1;
}
.chat-page .empty-chat i {
    font-size: 64px;
    margin-bottom: 16px;
    color: var(--da3-accent);
    opacity: .5;
}
.chat-page .empty-chat h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--da3-fg1) !important;
    margin: 0 0 6px !important;
}
.chat-page .empty-chat p {
    font-size: 12.5px;
    color: var(--da3-fg3) !important;
    margin: 0 !important;
    max-width: 280px;
}

/* Vendor/marketer header inside sidebar */
.chat-page .chat-filters-container > div[style*="background:var(--brand-light)"] {
    background: var(--da3-abg) !important;
    color: var(--da3-accent) !important;
}

/* ─── Message bubbles — overrides chat.css for tighter look + da3 colors ─── */
.chat-page .chat-bubble {
    max-width: 70% !important;
    padding: 7px 12px 5px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    border-radius: 14px !important;
    margin: 1px 0 !important;
    position: relative;
    box-shadow: 0 1px 1.5px rgba(0,0,0,.12);
    word-wrap: break-word;
    animation: bubblePop .18s ease-out;
}
@keyframes bubblePop {
    from { opacity: 0; transform: translateY(4px) scale(.985); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.chat-page .chat-bubble.admin {
    align-self: flex-end !important;
    background: var(--da3-accent) !important;
    color: #fff !important;
    border: 0 !important;
    border-bottom-right-radius: 4px !important;
    border-bottom-left-radius: 14px !important;
}
html[dir="rtl"] .chat-page .chat-bubble.admin {
    border-bottom-right-radius: 14px !important;
    border-bottom-left-radius: 4px !important;
}
.chat-page .chat-bubble.user {
    align-self: flex-start !important;
    background: var(--da3-card) !important;
    color: var(--da3-fg1) !important;
    border: 1px solid var(--da3-bd) !important;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 14px !important;
}
html[dir="rtl"] .chat-page .chat-bubble.user {
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 4px !important;
}
.chat-page .chat-time {
    display: block !important;
    font-size: 10px !important;
    margin: 3px 0 -2px !important;
    opacity: .75;
    text-align: end;
    font-weight: 500;
}
.chat-page .chat-bubble.admin .chat-time { color: rgba(255,255,255,.92); }
.chat-page .chat-bubble.user  .chat-time { color: var(--da3-fg3) !important; }

/* ─── Unread divider — dark/light parity ─────────────────── */
.chat-page .unread-divider {
    text-align: center;
    position: relative;
    margin: 8px 0;
    padding: 0;
}
.chat-page .unread-divider::before {
    content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px;
    background: rgba(239,68,68,.35); z-index: 1;
}
.chat-page .unread-divider span {
    background: var(--da3-bg2);
    padding: 0 14px;
    color: #ef4444;
    font-size: 11px; font-weight: 700;
    position: relative; z-index: 2;
}

/* ─── Info side-panel (replaces the 3-dot dropdown + modal) ─── */
.chat-page .chat-info-panel {
    width: 320px;
    flex-shrink: 0;
    background: var(--da3-bg2);
    border-inline-start: 1px solid var(--da3-line);
    flex-direction: column;
    overflow-y: auto;
    /* display controlled by .chat-layout.has-active-chat rules above */
}
.chat-page .chat-info-panel::-webkit-scrollbar       { width: 6px; }
.chat-page .chat-info-panel::-webkit-scrollbar-thumb { background: var(--da3-bd); border-radius: 3px; }

.chat-page .ip-head {
    padding: 26px 20px 22px;
    text-align: center;
    border-bottom: 1px solid var(--da3-line);
}
.chat-page .ip-avatar-wrap {
    position: relative;
    display: inline-block;
    margin: 0 auto 14px;
}
.chat-page .ip-avatar {
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--da3-bd);
    display: block;
    /* SVG silhouette — visible as background while the real photo loads */
    background-color: var(--da3-abg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'><circle cx='48' cy='38' r='16' fill='%233b82f6' fill-opacity='0.55'/><path d='M14 88c0-18 16-30 34-30s34 12 34 30z' fill='%233b82f6' fill-opacity='0.55'/></svg>");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Smooth fade-in — JS sets opacity:0 before src change, opacity:1 on load */
    transition: opacity .22s ease;
}
/* No src yet → hide the broken-image indicator; background SVG stays visible */
.chat-page .ip-avatar[src=""],
.chat-page .ip-avatar:not([src]) { opacity: 0; }
.chat-page .ip-online {
    position: absolute;
    bottom: 4px;
    inset-inline-end: 4px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #10b981;
    border: 3px solid var(--da3-bg2);
    box-shadow: 0 0 0 1px var(--da3-line);
}
.chat-page .ip-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--da3-fg1);
    margin: 0 0 8px;
    word-break: break-word;
}
.chat-page .ip-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 13px;
    border-radius: 20px;
    letter-spacing: .2px;
}
.chat-page .ip-type-badge i { font-size: 11px; }

.chat-page .ip-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--da3-line);
}
.chat-page .ip-action {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
    border-radius: 11px;
    padding: 11px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all .15s;
    cursor: pointer;
    text-align: center;
}
.chat-page .ip-action i { font-size: 14px; color: var(--da3-fg2); transition: color .15s; }
.chat-page .ip-action:hover {
    background: var(--da3-abg);
    color: var(--da3-accent);
    border-color: var(--da3-accent);
}
.chat-page .ip-action:hover i { color: var(--da3-accent); }
.chat-page .ip-action[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }

.chat-page .ip-section {
    padding: 14px 18px 16px;
    border-bottom: 1px solid var(--da3-line);
}
.chat-page .ip-section:last-child { border-bottom: 0; }
.chat-page .ip-section-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--da3-fg3);
    margin: 0 0 10px;
}
.chat-page .ip-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
}
.chat-page .ip-row + .ip-row { border-top: 1px solid var(--da3-line); }
.chat-page .ip-row-icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.chat-page .ip-row-body { flex: 1; min-width: 0; }
.chat-page .ip-row-label {
    font-size: 10px;
    color: var(--da3-fg3);
    font-weight: 600;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.chat-page .ip-row-value {
    font-size: 12.5px;
    color: var(--da3-fg1);
    font-weight: 600;
    word-break: break-word;
    line-height: 1.4;
}
.chat-page .ip-row-value a {
    color: var(--da3-accent);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
}
.chat-page .ip-row-value a:hover { text-decoration: underline; }
.chat-page .ip-row-action {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-inline-start: auto;
    align-self: center;
}
.chat-page .ip-row-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 7px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    border: 1px solid rgba(99,102,241,.2);
    text-decoration: none;
    font-size: 10px;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.chat-page .ip-row-action-btn:hover {
    background: var(--da3-accent);
    color: #fff;
    border-color: var(--da3-accent);
}

/* Hide info panel on small screens — chat takes full width below 1100px */
@media (max-width: 1100px) {
    .chat-page .chat-layout.has-active-chat #chatInfoPanel,
    .chat-page .chat-info-panel { display: none !important; }
}

/* ─── Mobile / Tablet: sidebar becomes a slide-in drawer ─── */
.chat-page .chat-menu-btn {
    display: none;                         /* hidden on desktop */
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s;
}
.chat-page .chat-menu-btn:hover { background: var(--da3-abg); color: var(--da3-accent); }
.chat-page .chat-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}

@media (max-width: 900px) {
    /* Show the hamburger inside the chat header AND in the empty state */
    .chat-page .chat-menu-btn { display: inline-flex; }

    /* Keep the layout horizontal but make the sidebar a fixed drawer */
    .chat-page .chat-layout {
        position: relative;
        min-height: 580px !important;
        max-height: calc(100vh - 200px) !important;
    }

    /* Sidebar transforms into an off-canvas drawer */
    .chat-page .chat-sidebar {
        position: absolute !important;
        top: 0; bottom: 0;
        inset-inline-start: 0;
        width: 86% !important;
        max-width: 340px !important;
        z-index: 1050;
        box-shadow: 0 12px 32px rgba(0,0,0,.35);
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.2,.9,.3,1);
        background: var(--da3-card) !important;
    }
    html[dir="rtl"] .chat-page .chat-sidebar {
        inset-inline-start: auto;
        inset-inline-end: 0;
        transform: translateX(100%);
    }
    .chat-page .chat-layout.drawer-open .chat-sidebar { transform: translateX(0); }
    .chat-page .chat-layout.drawer-open .chat-drawer-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* Chat main and empty state take the full width — no longer pushed by the sidebar */
    .chat-page .chat-main,
    .chat-page .chat-layout.has-active-chat #chatMainArea {
        width: 100%;
    }

    /* Topbar tightens up */
    .chat-topbar-row { padding: 14px 16px; }
    .chat-topbar-title { font-size: 17px; }
}

/* Very small screens: tighten the chat header / footer */
@media (max-width: 480px) {
    .chat-page .chat-header { padding: 12px 14px !important; }
    .chat-page .chat-footer { padding: 0 !important; }          /* keep column layout */
    .chat-page .chat-footer-row { padding: 8px 10px 10px !important; }
    .chat-page .chat-img-preview { padding: 8px 10px 0 !important; }
    .chat-page .chat-bubble { max-width: 82% !important; }
    .chat-page .chat-bubble .bubble-img { max-width: 180px; max-height: 180px; }
}

/* ═══════════════════════════════════════════════════════════════
   Domain Center
   Merged from: domain-center.css
═══════════════════════════════════════════════════════════════ */

/**
 * Domain Center 2.0 — Stylesheet
 * ─────────────────────────────────────────────────────────────────────
 * Used by:
 *   admin/domain-providers/index, create, edit
 *   admin/domain-pricing/index
 *   (future) vendor/domain-center/*
 *
 * Token bridge:
 *   Uses --ui-* tokens from ui-components.css (loaded globally in default.blade.php)
 *   Falls back to --da3g-* for backward compat on admin pages.
 * ─────────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════════════════
   PROVIDER CARDS
   ═══════════════════════════════════════════════════════════════════════ */

.dc-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.dc-provider-card {
    background: var(--ui-surface, var(--da3g-surface, #fff));
    border: 1.5px solid var(--ui-border, var(--da3g-border, #e4e4e7));
    border-radius: var(--ui-radius, 12px);
    padding: 1.25rem;
    position: relative;
    transition: border-color .2s, box-shadow .2s;
}

.dc-provider-card:hover {
    border-color: var(--ui-accent, #3473DA);
    box-shadow: 0 4px 16px rgba(52, 115, 218, .12);
}

.dc-provider-card.is-active {
    border-color: var(--ui-success, #22c55e);
    background: color-mix(in srgb, var(--ui-success, #22c55e) 6%, var(--ui-surface, #fff));
}

.dc-provider-card__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.dc-provider-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--ui-surface2, var(--da3g-surface2, #f4f4f5));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--ui-accent, #3473DA);
    flex-shrink: 0;
}

.dc-provider-card__name {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ui-fg1, var(--da3g-fg1, #18181b));
    margin: 0;
}

.dc-provider-card__key {
    font-size: .75rem;
    color: var(--ui-fg3, var(--da3g-fg3, #71717a));
    font-family: monospace;
}

.dc-provider-card__badges {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .875rem;
}

.dc-provider-card__meta {
    font-size: .8125rem;
    color: var(--ui-fg2, var(--da3g-fg2, #52525b));
    margin-bottom: .875rem;
    line-height: 1.5;
}

.dc-provider-card__test-result {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .8rem;
    padding: .375rem .625rem;
    border-radius: 6px;
    margin-bottom: .875rem;
}

.dc-provider-card__test-result.is-ok {
    background: color-mix(in srgb, #22c55e 12%, transparent);
    color: #15803d;
}

.dc-provider-card__test-result.is-fail {
    background: color-mix(in srgb, #ef4444 12%, transparent);
    color: #b91c1c;
}

.dc-provider-card__actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--ui-border, #e4e4e7);
    padding-top: .875rem;
    margin-top: auto;
}

/* Active badge overlay (top-right corner) */
.dc-active-badge {
    position: absolute;
    top: .875rem;
    inset-inline-end: .875rem;
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    font-weight: 600;
    color: #15803d;
    background: color-mix(in srgb, #22c55e 15%, transparent);
    border: 1px solid #86efac;
    border-radius: 20px;
    padding: .2rem .6rem;
}

.dc-active-badge i {
    font-size: .65rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   PROVIDER FORM
   ═══════════════════════════════════════════════════════════════════════ */

.dc-form-page {
    max-width: 680px;
}

.dc-config-fields {
    background: var(--ui-surface2, var(--da3g-surface2, #f4f4f5));
    border: 1px solid var(--ui-border, #e4e4e7);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-top: .5rem;
}

.dc-config-fields__label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ui-fg3, #71717a);
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .375rem;
}

/* Adapter class selector — shows as a styled select */
.dc-adapter-select {
    position: relative;
}

.dc-adapter-select select {
    width: 100%;
    appearance: none;
    background: var(--ui-surface, #fff);
    border: 1.5px solid var(--ui-border, #e4e4e7);
    border-radius: 8px;
    padding: .5625rem .875rem;
    padding-inline-end: 2.5rem;
    font-size: .875rem;
    color: var(--ui-fg1, #18181b);
    cursor: pointer;
}

.dc-adapter-select::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset-inline-end: .875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-fg3, #71717a);
    pointer-events: none;
    font-size: .75rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONNECTION TEST WIDGET
   ═══════════════════════════════════════════════════════════════════════ */

.dc-test-widget {
    border: 1.5px solid var(--ui-border, #e4e4e7);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.dc-test-widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.dc-test-widget__title {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ui-fg1, #18181b);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.dc-test-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--ui-border, #e4e4e7);
    border-top-color: var(--ui-accent, #3473DA);
    border-radius: 50%;
    animation: dc-spin .6s linear infinite;
}

.dc-test-widget.is-testing .dc-test-spinner { display: inline-block; }

.dc-test-result {
    font-size: .8125rem;
    padding: .5rem .75rem;
    border-radius: 6px;
    display: none;
}

.dc-test-result.show { display: block; }

.dc-test-result.is-ok {
    background: color-mix(in srgb, #22c55e 10%, transparent);
    color: #15803d;
    border: 1px solid #86efac;
}

.dc-test-result.is-fail {
    background: color-mix(in srgb, #ef4444 10%, transparent);
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

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

/* ═══════════════════════════════════════════════════════════════════════
   PRICING TABLE
   ═══════════════════════════════════════════════════════════════════════ */

.dc-pricing-table {
    width: 100%;
    border-collapse: collapse;
}

.dc-pricing-table th {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ui-fg3, #71717a);
    padding: .625rem .875rem;
    text-align: start;
    border-bottom: 1.5px solid var(--ui-border, #e4e4e7);
    white-space: nowrap;
}

.dc-pricing-table td {
    padding: .75rem .875rem;
    font-size: .875rem;
    color: var(--ui-fg1, #18181b);
    border-bottom: 1px solid var(--ui-border, #e4e4e7);
    vertical-align: middle;
}

.dc-pricing-table tr:last-child td {
    border-bottom: none;
}

.dc-pricing-table tr:hover td {
    background: var(--ui-surface2, #f9fafb);
}

/* TLD badge in pricing table */
.dc-tld-badge {
    display: inline-flex;
    align-items: center;
    background: color-mix(in srgb, var(--ui-accent, #3473DA) 10%, transparent);
    color: var(--ui-accent, #3473DA);
    border: 1px solid color-mix(in srgb, var(--ui-accent, #3473DA) 30%, transparent);
    font-weight: 700;
    font-size: .8125rem;
    padding: .2rem .6rem;
    border-radius: 6px;
    font-family: monospace;
    letter-spacing: .02em;
}

/* Inline margin input with guardrail indicator */
.dc-margin-cell {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.dc-margin-input {
    width: 90px;
    padding: .375rem .625rem;
    border: 1.5px solid var(--ui-border, #e4e4e7);
    border-radius: 7px;
    font-size: .875rem;
    color: var(--ui-fg1, #18181b);
    background: var(--ui-surface, #fff);
    text-align: end;
    transition: border-color .15s;
}

.dc-margin-input:focus {
    outline: none;
    border-color: var(--ui-accent, #3473DA);
}

.dc-margin-input.is-invalid {
    border-color: #ef4444;
}

.dc-guardrail-hint {
    font-size: .7rem;
    color: var(--ui-fg3, #71717a);
    white-space: nowrap;
}

/* Final price preview cell */
.dc-price-preview {
    font-weight: 600;
    font-size: .875rem;
    color: var(--ui-fg1, #18181b);
    min-width: 70px;
    display: inline-block;
    text-align: end;
}

/* Provider cost column (muted) */
.dc-cost-cell {
    color: var(--ui-fg3, #71717a);
    font-size: .8125rem;
}

/* Featured star toggle */
.dc-featured-toggle {
    cursor: pointer;
    color: var(--ui-fg3, #a1a1aa);
    font-size: 1rem;
    transition: color .15s, transform .15s;
}

.dc-featured-toggle:hover { transform: scale(1.2); }
.dc-featured-toggle.is-featured { color: #f59e0b; }

/* ═══════════════════════════════════════════════════════════════════════
   SYNC STATUS BAR
   ═══════════════════════════════════════════════════════════════════════ */

.dc-sync-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--ui-border, #e4e4e7);
    background: var(--ui-surface2, #f9fafb);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.dc-sync-bar__info {
    font-size: .8125rem;
    color: var(--ui-fg2, #52525b);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.dc-sync-bar__time {
    color: var(--ui-fg3, #71717a);
    font-size: .75rem;
}

.dc-sync-progress {
    display: none;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: var(--ui-accent, #3473DA);
}

.dc-sync-progress.show { display: flex; }

.dc-sync-progress .dc-test-spinner { display: inline-block; }

/* ═══════════════════════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════════════════════ */

.dc-empty {
    text-align: center;
    padding: 3rem 1.5rem;
}

.dc-empty__icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--ui-surface2, #f4f4f5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--ui-fg3, #a1a1aa);
    margin: 0 auto 1rem;
}

.dc-empty__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-fg1, #18181b);
    margin: 0 0 .375rem;
}

.dc-empty__desc {
    font-size: .875rem;
    color: var(--ui-fg2, #52525b);
    margin: 0 0 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════════════════ */

.dc-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.dc-page-header__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ui-fg1, #18181b);
    margin: 0 0 .25rem;
    display: flex;
    align-items: center;
    gap: .625rem;
}

.dc-page-header__title i {
    color: var(--ui-accent, #3473DA);
}

.dc-page-header__sub {
    font-size: .875rem;
    color: var(--ui-fg2, #52525b);
    margin: 0;
}

.dc-page-header__actions {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION SEPARATOR
   ═══════════════════════════════════════════════════════════════════════ */

.dc-section-title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ui-fg3, #71717a);
    padding-bottom: .5rem;
    border-bottom: 1.5px solid var(--ui-border, #e4e4e7);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════ */

body.dark-mode .dc-provider-card {
    background: var(--ui-surface, #27272A);
    border-color: var(--ui-border, #3f3f46);
}

body.dark-mode .dc-provider-card.is-active {
    background: color-mix(in srgb, #22c55e 8%, #27272A);
}

body.dark-mode .dc-config-fields {
    background: rgba(255,255,255,.04);
    border-color: #3f3f46;
}

body.dark-mode .dc-pricing-table tr:hover td {
    background: rgba(255,255,255,.04);
}

body.dark-mode .dc-margin-input {
    background: var(--ui-surface, #27272A);
    border-color: #3f3f46;
    color: var(--ui-fg1, #fafafa);
}

body.dark-mode .dc-sync-bar {
    background: rgba(255,255,255,.04);
    border-color: #3f3f46;
}

body.dark-mode .dc-test-result.is-ok {
    background: rgba(34, 197, 94, .12);
}

body.dark-mode .dc-test-result.is-fail {
    background: rgba(239, 68, 68, .12);
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 3 — VENDOR DOMAIN CENTER: PAGE HEADER
   ═══════════════════════════════════════════════════════════════════════ */

.dc-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.dc-page-header__title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ui-fg1, #18181b);
    margin: 0 0 .25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.dc-page-header__sub {
    font-size: .875rem;
    color: var(--ui-fg3, #71717a);
    margin: 0;
}

.dc-page-header__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 3 — SEARCH SECTION
   ═══════════════════════════════════════════════════════════════════════ */

.dc-search-section {
    background: var(--ui-surface, #fff);
    border: 1.5px solid var(--ui-border, #e4e4e7);
    border-radius: var(--ui-radius, 12px);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

/* ── Search bar ─────────────────────────────────────────────────────── */

.dc-search-bar-wrap {
    position: relative;
    margin-bottom: 1rem;
}

.dc-search-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--ui-surface2, #f4f4f5);
    border: 1.5px solid var(--ui-border, #e4e4e7);
    border-radius: 10px;
    padding: .5rem .75rem;
    transition: border-color .2s, box-shadow .2s;
}

.dc-search-bar:focus-within {
    border-color: var(--ui-accent, #3473DA);
    box-shadow: 0 0 0 3px rgba(52, 115, 218, .12);
    background: var(--ui-surface, #fff);
}

.dc-search-bar__icon {
    color: var(--ui-fg3, #71717a);
    font-size: .9rem;
    flex-shrink: 0;
}

.dc-search-bar__input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: .9375rem;
    color: var(--ui-fg1, #18181b);
    outline: none;
    min-width: 0;
}

.dc-search-bar__input::placeholder {
    color: var(--ui-fg3, #a1a1aa);
}

.dc-search-bar__input:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.dc-search-bar__btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
    padding: .375rem .875rem;
}

/* ── Spinner (shared, also used in search btn) ──────────────────────── */

.dc-search-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2.5px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: dc-spin .65s linear infinite;
    flex-shrink: 0;
}

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

/* ── Suggestions dropdown ────────────────────────────────────────────── */

.dc-suggestions-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-start: 0;
    inset-inline-end: 0;
    background: var(--ui-surface, #fff);
    border: 1.5px solid var(--ui-border, #e4e4e7);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    z-index: 200;
    overflow: hidden;
}

.dc-suggestions-list {
    max-height: 220px;
    overflow-y: auto;
}

.dc-suggest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .625rem 1rem;
    font-size: .875rem;
    cursor: pointer;
    transition: background .12s;
    gap: .5rem;
}

.dc-suggest-item:hover,
.dc-suggest-item:focus {
    background: var(--ui-surface2, #f4f4f5);
    outline: none;
}

.dc-suggest-item__name {
    font-weight: 500;
    color: var(--ui-fg1, #18181b);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dc-suggest-item__tld {
    font-size: .8rem;
    color: var(--ui-accent, #3473DA);
    background: rgba(52, 115, 218, .08);
    border-radius: 4px;
    padding: .1rem .4rem;
    flex-shrink: 0;
}

/* ── TLD filter pills ────────────────────────────────────────────────── */

.dc-tld-filter {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.dc-tld-filter__label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ui-fg2, #52525b);
    flex-shrink: 0;
}

.dc-tld-filter__pills {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.dc-tld-pill {
    font-size: .8125rem;
    font-weight: 500;
    padding: .25rem .625rem;
    border-radius: 20px;
    border: 1.5px solid var(--ui-border, #e4e4e7);
    background: transparent;
    color: var(--ui-fg2, #52525b);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1.4;
}

.dc-tld-pill.is-active {
    background: var(--ui-accent, #3473DA);
    border-color: var(--ui-accent, #3473DA);
    color: #fff;
}

.dc-tld-pill:hover:not(.is-active) {
    border-color: var(--ui-accent, #3473DA);
    color: var(--ui-accent, #3473DA);
}

.dc-tld-filter__refresh {
    margin-inline-start: auto;
}

/* ── Results area ───────────────────────────────────────────────────── */

.dc-results-area {
    margin-top: .25rem;
}

/* Exact match row */
.dc-exact-result {
    margin-bottom: 1rem;
}

/* Suggestions grid */
.dc-suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .75rem;
}

/* ── Result card ─────────────────────────────────────────────────────── */

.dc-result-card {
    background: var(--ui-surface, #fff);
    border: 1.5px solid var(--ui-border, #e4e4e7);
    border-radius: 10px;
    padding: .875rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    transition: border-color .2s, box-shadow .2s;
}

.dc-result-card:hover {
    border-color: var(--ui-accent, #3473DA);
    box-shadow: 0 2px 10px rgba(52, 115, 218, .1);
}

.dc-result-card.is-exact {
    border-color: var(--ui-accent, #3473DA);
    background: color-mix(in srgb, var(--ui-accent, #3473DA) 4%, var(--ui-surface, #fff));
}

.dc-result-card.is-unavailable {
    opacity: .65;
}

.dc-result-card.is-error {
    border-color: var(--ui-warning, #f59e0b);
    opacity: .8;
}

/* Left section: icon + meta text */
.dc-result-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .625rem;
}

/* Status icon (check / xmark / warning) */
.dc-result-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.dc-result-card.is-available  .dc-result-icon { color: var(--ui-success, #16a34a); }
.dc-result-card.is-unavailable .dc-result-icon { color: var(--ui-fg3, #a1a1aa); }
.dc-result-card.is-error       .dc-result-icon { color: var(--ui-warning, #d97706); }

/* Domain name */
.dc-result-card__domain {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ui-fg1, #18181b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Availability label */
.dc-result-card__status {
    font-size: .78rem;
    margin-top: .1rem;
    display: block;
}

.dc-result-card__status.is-available   { color: var(--ui-success, #16a34a); }
.dc-result-card__status.is-unavailable { color: var(--ui-fg3, #71717a); }
.dc-result-card__status.is-error       { color: var(--ui-warning, #b45309); }

/* Right section: price + cart button */
.dc-result-card__action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.dc-result-card__price {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ui-fg1, #18181b);
    white-space: nowrap;
}

.dc-result-card__currency {
    font-size: .75rem;
    font-weight: 400;
    color: var(--ui-fg3, #71717a);
}

/* Results section header ("Suggestions:") */
.dc-results-section-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ui-fg2, #52525b);
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .25rem 0 .625rem;
}

/* Suggestions grid inside dcSuggestionsGrid */
.dc-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .625rem;
}

/* Cached notice badge */
.dc-cached-notice {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    color: var(--ui-fg3, #71717a);
    background: var(--ui-surface2, #f4f4f5);
    border-radius: 20px;
    padding: .2rem .625rem;
    margin-bottom: .625rem;
}

.dc-add-cart-btn {
    font-size: .8125rem;
    padding: .3rem .75rem;
    white-space: nowrap;
}

.dc-in-cart-btn {
    font-size: .8125rem;
    padding: .3rem .75rem;
    white-space: nowrap;
    background: color-mix(in srgb, var(--ui-success, #22c55e) 15%, transparent);
    border-color: var(--ui-success, #22c55e);
    color: var(--ui-success, #16a34a);
    cursor: default;
}

/* ── TLD badge ───────────────────────────────────────────────────────── */

.dc-tld-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: .1rem .4rem;
    border-radius: 4px;
    background: rgba(52, 115, 218, .1);
    color: var(--ui-accent, #3473DA);
    vertical-align: middle;
    margin-inline-start: .2rem;
}

/* ── Empty / error states ────────────────────────────────────────────── */

.dc-search-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--ui-fg3, #a1a1aa);
}

.dc-search-empty__icon {
    font-size: 2rem;
    margin-bottom: .75rem;
    opacity: .4;
}

.dc-search-empty__hint {
    font-size: .875rem;
    margin: 0;
}

.dc-search-error {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .875rem 1rem;
    background: color-mix(in srgb, #ef4444 10%, transparent);
    border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
    border-radius: 8px;
    color: #b91c1c;
    font-size: .875rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 3 — CART SECTION
   ═══════════════════════════════════════════════════════════════════════ */

.dc-cart-section {
    background: var(--ui-surface, #fff);
    border: 1.5px solid var(--ui-border, #e4e4e7);
    border-radius: var(--ui-radius, 12px);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

/* ── Cart header ─────────────────────────────────────────────────────── */

.dc-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .875rem 1.25rem;
    background: var(--ui-surface2, #f9f9fb);
    border-bottom: 1px solid var(--ui-border, #e4e4e7);
    gap: .75rem;
}

.dc-cart-header__left {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.dc-cart-header__title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ui-fg1, #18181b);
}

.dc-cart-count {
    font-size: .75rem;
    font-weight: 700;
    padding: .15rem .45rem;
    border-radius: 20px;
}

.dc-cart-header__right {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.dc-cart-total {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--ui-fg1, #18181b);
}

.dc-cart-currency {
    font-size: .8rem;
    font-weight: 400;
    color: var(--ui-fg3, #71717a);
}

.dc-cart-clear-btn {
    color: var(--ui-fg3, #71717a);
}

.dc-cart-clear-btn:hover {
    color: #ef4444;
}

/* ── Cart items list ─────────────────────────────────────────────────── */

.dc-cart-items {
    padding: .5rem 0;
}

.dc-cart-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem 1.25rem;
    border-bottom: 1px solid var(--ui-border, #f1f1f5);
    transition: background .12s;
}

.dc-cart-item:last-child {
    border-bottom: none;
}

.dc-cart-item:hover {
    background: var(--ui-surface2, #f9f9fb);
}

.dc-cart-item__domain {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .4rem;
    overflow: hidden;
}

.dc-cart-item__name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--ui-fg1, #18181b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Years stepper ───────────────────────────────────────────────────── */

.dc-cart-item__years {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
}

.dc-years-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1.5px solid var(--ui-border, #e4e4e7);
    background: transparent;
    color: var(--ui-fg2, #52525b);
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: background .12s, border-color .12s;
}

.dc-years-btn:hover {
    background: var(--ui-surface2, #f4f4f5);
    border-color: var(--ui-accent, #3473DA);
    color: var(--ui-accent, #3473DA);
}

.dc-years-val {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ui-fg1, #18181b);
    min-width: 1.25rem;
    text-align: center;
}

.dc-years-unit {
    font-size: .78rem;
    color: var(--ui-fg3, #71717a);
}

/* ── Cart item price ─────────────────────────────────────────────────── */

.dc-cart-item__price {
    flex-shrink: 0;
    text-align: end;
}

.dc-cart-item__price-val {
    font-size: .875rem;
    font-weight: 700;
    color: var(--ui-fg1, #18181b);
}

.dc-cart-item__currency {
    font-size: .75rem;
    color: var(--ui-fg3, #71717a);
    margin-inline-start: .15rem;
}

/* ── Cart item remove ────────────────────────────────────────────────── */

.dc-cart-item__remove {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--ui-fg3, #a1a1aa);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    transition: background .12s, color .12s;
}

.dc-cart-item__remove:hover {
    background: color-mix(in srgb, #ef4444 12%, transparent);
    color: #ef4444;
}

/* ── Cart footer ─────────────────────────────────────────────────────── */

.dc-cart-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .875rem 1.25rem;
    background: var(--ui-surface2, #f9f9fb);
    border-top: 1px solid var(--ui-border, #e4e4e7);
    gap: .75rem;
    flex-wrap: wrap;
}

.dc-cart-footer__summary {
    font-size: .875rem;
    color: var(--ui-fg2, #52525b);
    display: flex;
    align-items: center;
    gap: .4rem;
}

.dc-cart-footer__summary strong {
    font-size: 1rem;
    color: var(--ui-fg1, #18181b);
}

.dc-cart-footer__actions {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}

.dc-checkout-btn {
    font-size: .875rem;
}

/* ── Cart expiry countdown ───────────────────────────────────────────── */

.dc-cart-expiry {
    width: 100%;
    font-size: .78rem;
    color: var(--ui-fg3, #71717a);
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    order: 3;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 3 — TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════════════ */

.dc-toast-container {
    position: fixed;
    bottom: 1.5rem;
    inset-inline-end: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none;
}

.dc-toast {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1rem;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 500;
    max-width: 320px;
    box-shadow: 0 4px 16px rgba(0,0,0,.14);
    animation: dc-toast-in .22s ease;
    pointer-events: auto;
}

.dc-toast.is-success {
    background: #16a34a;
    color: #fff;
}

.dc-toast.is-error {
    background: #dc2626;
    color: #fff;
}

.dc-toast.is-info {
    background: var(--ui-accent, #3473DA);
    color: #fff;
}

.dc-toast.is-warning {
    background: #d97706;
    color: #fff;
}

@keyframes dc-toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 3 — LOADING SKELETON
   ═══════════════════════════════════════════════════════════════════════ */

.dc-skeleton {
    background: linear-gradient(90deg,
        var(--ui-surface2, #f4f4f5) 25%,
        var(--ui-border, #e4e4e7) 50%,
        var(--ui-surface2, #f4f4f5) 75%);
    background-size: 200% 100%;
    animation: dc-shimmer 1.4s infinite;
    border-radius: 6px;
}

@keyframes dc-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.dc-skeleton-card {
    height: 68px;
    border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 3 — DARK MODE ADDITIONS
   ═══════════════════════════════════════════════════════════════════════ */

body.dark-mode .dc-search-section,
body.dark-mode .dc-cart-section {
    background: var(--ui-surface, #27272A);
    border-color: #3f3f46;
}

body.dark-mode .dc-search-bar {
    background: rgba(255,255,255,.05);
    border-color: #3f3f46;
}

body.dark-mode .dc-search-bar:focus-within {
    background: #27272A;
    border-color: var(--ui-accent, #3473DA);
}

body.dark-mode .dc-search-bar__input {
    color: var(--ui-fg1, #fafafa);
}

body.dark-mode .dc-suggestions-dropdown {
    background: var(--ui-surface, #27272A);
    border-color: #3f3f46;
}

body.dark-mode .dc-suggest-item:hover {
    background: rgba(255,255,255,.06);
}

body.dark-mode .dc-result-card {
    background: var(--ui-surface, #27272A);
    border-color: #3f3f46;
}

body.dark-mode .dc-result-card.is-exact {
    background: color-mix(in srgb, var(--ui-accent, #3473DA) 8%, #27272A);
}

body.dark-mode .dc-cart-header,
body.dark-mode .dc-cart-footer {
    background: rgba(255,255,255,.03);
    border-color: #3f3f46;
}

body.dark-mode .dc-cart-item {
    border-bottom-color: rgba(255,255,255,.06);
}

body.dark-mode .dc-cart-item:hover {
    background: rgba(255,255,255,.04);
}

body.dark-mode .dc-years-btn {
    border-color: #3f3f46;
    color: var(--ui-fg2, #a1a1aa);
}

body.dark-mode .dc-tld-pill {
    border-color: #3f3f46;
    color: var(--ui-fg2, #a1a1aa);
}

body.dark-mode .dc-search-error {
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .25);
}

body.dark-mode .dc-page-header__title {
    color: var(--ui-fg1, #fafafa);
}

/* ═══════════════════════════════════════════════════════════════
   Orders
   Merged from: orders.css
═══════════════════════════════════════════════════════════════ */

/* ============================================================
   ELMATAJER — ORDERS CSS
   Combines: orders/invoice, orders/print, orders/orderstable
   All static rules extracted — Wave 4 (2026-05-25)
   Dynamic accent vars in print.blade.php :root{} remain in blade.
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   SECTION 1: ORDER INVOICE PAGE (admin/orders/invoice)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   ORDER INVOICE — full professional redesign
   ══════════════════════════════════════════════════════════ */
.inv {
    --inv-card:   var(--da3-card);
    --inv-bd:     var(--da3-bd);
    --inv-bg2:    var(--da3-bg2);
    --inv-fg1:    var(--da3-fg1);
    --inv-fg2:    var(--da3-fg2);
    --inv-fg3:    var(--da3-fg3);
    --inv-line:   var(--da3-line);
    --inv-hover:  var(--da3-hover);
    --inv-r:      var(--da3-r);
    --inv-accent: var(--da3-accent);
    --inv-abg:    var(--da3-abg);
    max-width: 1500px;
    margin: 0 auto;
}

/* ── HERO ── */
.inv-hero {
    background: var(--inv-card);
    border: 1px solid var(--inv-bd);
    border-radius: 16px;
    padding: 18px 22px;
    margin-bottom: 16px;
    position: relative;
    overflow: visible;
}
.inv-hero::before {
    content: "";
    position: absolute; top: 0; inset-inline-start: 0; right: 0; left: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, var(--inv-accent), #a855f7, #ec4899);
}
.inv-hero-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.inv-hero-id {
    display: flex; align-items: center; gap: 14px;
    min-width: 0; flex: 1;
}
.inv-hero-ico {
    width: 48px; height: 48px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--inv-accent), #a855f7);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--inv-accent) 50%, transparent);
}
.inv-hero-info { min-width: 0; }
.inv-hero-num {
    font-size: 20px; font-weight: 900; color: var(--inv-fg1);
    letter-spacing: -.5px; margin: 0 0 4px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.inv-hero-meta {
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
    font-size: 12px; color: var(--inv-fg3); font-weight: 600;
}
.inv-hero-meta i { font-size: 10px; }
.inv-hero-meta .sep { opacity: .35; margin: 0 4px; }

/* Badges in hero */
.inv-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 800;
    flex-shrink: 0;
}
.inv-badge i { font-size: 11px; }
.inv-badge .pulse-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
    animation: inv-pulse 1.8s ease-in-out infinite;
}
@keyframes inv-pulse {
    50% { transform: scale(.7); opacity: .55; }
}
.inv-hero-actions {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; flex-shrink: 0;
}

/* ── Buttons (action toolbar) ── */
.inv-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 16px;
    border-radius: 10px;
    font-size: 12.5px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    transition: all .15s;
    text-decoration: none;
    border: 1.5px solid var(--inv-bd);
    background: var(--inv-card);
    color: var(--inv-fg1);
}
.inv-btn:hover { border-color: var(--inv-accent); color: var(--inv-accent); }
.inv-btn-primary {
    background: linear-gradient(135deg, var(--inv-accent), #6366f1);
    color: #fff; border: 0;
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--inv-accent) 50%, transparent);
}
.inv-btn-primary:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }

/* ── Change-status dropdown menu ── */
.inv-status-menu {
    min-width: 224px;
    z-index: 1080;
    padding: 6px;
    border-radius: 14px;
    background: var(--inv-card);
    border: 1.5px solid var(--inv-bd);
    box-shadow: 0 18px 44px -16px rgba(0,0,0,.32);
}
.inv-status-menu li + li { margin-top: 2px; }
.inv-status-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0; background: transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 12.5px; font-weight: 700;
    color: var(--inv-fg1);
    text-align: start;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.inv-status-item:hover { background: var(--inv-hover); }
.inv-status-item.is-active { background: var(--inv-abg); color: var(--inv-accent); }
.inv-status-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex-shrink: 0;
    border-radius: 8px;
    font-size: 11px;
    color: var(--dot, #94a3b8);
    background: color-mix(in srgb, var(--dot, #94a3b8) 14%, transparent);
}
.inv-status-lbl { flex: 1; }
.inv-status-check { font-size: 11px; color: var(--inv-accent); flex-shrink: 0; }

/* ── Back button ── */
.inv-back-btn {
    width: 36px; height: 36px; border-radius: 10px;
    border: 1.5px solid var(--inv-bd);
    background: var(--inv-bg2);
    color: var(--inv-fg2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
    text-decoration: none;
    transition: all .15s;
}
.inv-back-btn:hover { border-color: var(--inv-accent); color: var(--inv-accent); background: var(--inv-abg); }

/* ── Order number + copy row ── */
.inv-hero-num-row {
    display: flex; align-items: center; gap: 8px;
}
.inv-copy-btn {
    width: 26px; height: 26px; border-radius: 7px;
    border: 1px solid var(--inv-bd);
    background: var(--inv-bg2);
    color: var(--inv-fg3);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; cursor: pointer;
    transition: all .15s; flex-shrink: 0;
}
.inv-copy-btn:hover { border-color: var(--inv-accent); color: var(--inv-accent); }

/* ── Success button variant (COD payment) ── */
.inv-btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff; border: 0;
    box-shadow: 0 4px 12px -4px rgba(16,185,129,.45);
}
.inv-btn-success:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }

/* ── PROGRESS STEPPER ── */
.inv-stepper {
    display: flex; align-items: center;
    gap: 0;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--inv-line);
}
.inv-step {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    position: relative;
    min-width: 0;
}
.inv-step-ico {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--inv-bg2);
    border: 2px solid var(--inv-bd);
    color: var(--inv-fg3);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    z-index: 2; position: relative;
    transition: all .25s;
}
.inv-step-label {
    font-size: 11px; font-weight: 800;
    color: var(--inv-fg3);
    text-align: center; line-height: 1.3;
    white-space: nowrap;
}
.inv-step::before {
    content: "";
    position: absolute;
    top: 18px;
    inset-inline-start: -50%;
    width: 100%;
    height: 2px;
    background: var(--inv-bd);
    z-index: 1;
}
.inv-step:first-child::before { display: none; }
.inv-step.is-done .inv-step-ico {
    background: #10b981; border-color: #10b981; color: #fff;
}
.inv-step.is-done .inv-step-label { color: var(--inv-fg1); }
.inv-step.is-done + .inv-step::before { background: #10b981; }
.inv-step.is-current .inv-step-ico {
    background: var(--inv-accent); border-color: var(--inv-accent); color: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--inv-accent) 20%, transparent);
    animation: inv-current-pulse 1.8s ease-in-out infinite;
}
@keyframes inv-current-pulse {
    50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--inv-accent) 8%, transparent); }
}
.inv-step.is-current .inv-step-label { color: var(--inv-accent); }
.inv-step.is-cancelled .inv-step-ico {
    background: #ef4444; border-color: #ef4444; color: #fff;
}

/* ── SHIPMENT BANNER — multi-state ── */
.inv-shipment-banner {
    background: var(--inv-abg);
    border: 1px solid color-mix(in srgb, var(--inv-accent) 25%, transparent);
    border-radius: var(--inv-r);
    padding: 16px 20px;
    margin-bottom: 16px;
    transition: background .2s, border-color .2s;
}
.inv-shipment-banner.is-active {
    background: color-mix(in srgb, #10b981 8%, transparent);
    border-color: color-mix(in srgb, #10b981 30%, transparent);
}
.inv-shipment-banner.is-locked {
    background: color-mix(in srgb, var(--inv-fg3) 6%, transparent);
    border-color: var(--inv-bd);
    border-style: dashed;
}
.inv-ship-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.inv-ship-id { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.inv-ship-ico {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--inv-abg); color: var(--inv-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.inv-ship-ico.is-ok { background: rgba(16,185,129,.18); color: #10b981; }
.inv-ship-ico.is-locked { background: var(--inv-bg2); color: var(--inv-fg3); }
.inv-ship-title { font-size: 14px; font-weight: 800; color: var(--inv-fg1); margin-bottom: 3px; }
.inv-ship-sub { font-size: 12px; color: var(--inv-fg2); line-height: 1.55; max-width: 540px; }
.inv-ship-sub strong { color: var(--inv-fg1); font-weight: 800; }
.inv-ship-act { flex-shrink: 0; }
.inv-ship-track {
    display: flex; align-items: center; gap: 12px;
    background: var(--inv-card);
    padding: 8px 8px 8px 14px;
    border-radius: 20px;
    border: 1px solid var(--inv-bd);
}
.inv-ship-track-info { text-align: end; }
.inv-ship-track-num { font-size: 13px; font-weight: 800; color: var(--inv-fg1); font-variant-numeric: tabular-nums; }
.inv-ship-status {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 800; color: #10b981;
    margin-top: 2px;
    text-transform: uppercase; letter-spacing: .03em;
}
.inv-ship-status .dot {
    width: 6px; height: 6px; border-radius: 50%; background: #10b981;
    box-shadow: 0 0 0 2px rgba(16,185,129,.22);
}
.inv-ship-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inv-ship-select {
    height: 38px; padding: 0 12px;
    border-radius: 9px;
    font-size: 12.5px; font-weight: 700;
    border: 1px solid var(--inv-bd);
    background: var(--inv-card); color: var(--inv-fg1);
    cursor: pointer; font-family: inherit; min-width: 180px;
}

/* ══════════════════════════════════════════════════════════════
   MAIN LAYOUT — two columns
   ══════════════════════════════════════════════════════════════ */
.inv-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) { .inv-layout { grid-template-columns: 1fr; } }

/* ── Card base ── */
.inv-card {
    background: var(--inv-card);
    border: 1px solid var(--inv-bd);
    border-radius: var(--inv-r);
    overflow: hidden;
    margin-bottom: 16px;
}
.inv-card-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--inv-line);
}
.inv-card-head-ico {
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
}
.inv-card-head h4 { font-size: 13.5px; font-weight: 800; color: var(--inv-fg1); margin: 0; flex: 1; }
.inv-card-head small { font-size: 11px; color: var(--inv-fg3); font-weight: 600; }
.inv-card-head .head-edit {
    width: 28px; height: 28px; border-radius: 8px;
    border: 1px solid var(--inv-bd);
    background: var(--inv-bg2);
    color: var(--inv-fg2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
    cursor: pointer; transition: all .15s;
}
.inv-card-head .head-edit:hover { border-color: var(--inv-accent); color: var(--inv-accent); }

/* ══════════════════════════════════════════════════════════════
   ITEMS TABLE
   ══════════════════════════════════════════════════════════════ */
.inv-items-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px;
}
.inv-items-table thead th {
    background: var(--inv-bg2);
    color: var(--inv-fg3);
    font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em;
    padding: 11px 16px;
    border-bottom: 1px solid var(--inv-bd);
    white-space: nowrap;
    text-align: start;
}
.inv-items-table thead th.center { text-align: center; }
.inv-items-table thead th.end    { text-align: end; }
.inv-items-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px dashed var(--inv-line);
    color: var(--inv-fg1); vertical-align: middle;
}
.inv-items-table tbody tr:last-child td { border-bottom: 0; }
.inv-items-table tbody tr:hover { background: var(--inv-hover); }

.inv-item-name {
    font-size: 13.5px; font-weight: 800; color: var(--inv-fg1);
    margin-bottom: 4px;
}
.inv-item-variant {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700;
    color: var(--inv-fg2);
    background: var(--inv-bg2);
    border: 1px solid var(--inv-bd);
    padding: 2px 8px; border-radius: 999px;
}
.inv-item-addons { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.inv-addon-tag {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10.5px; font-weight: 700;
    color: var(--inv-fg2);
    background: var(--inv-abg);
    border: 1px solid color-mix(in srgb, var(--inv-accent) 25%, transparent);
    border-radius: 5px;
    padding: 2px 7px;
}
.inv-addon-tag strong { color: var(--inv-accent); font-weight: 800; }
.inv-qty-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 28px; padding: 0 10px;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 800;
    color: var(--inv-accent); background: var(--inv-abg);
    font-variant-numeric: tabular-nums;
}
.inv-price-cell {
    font-size: 13px; font-weight: 800;
    color: var(--inv-accent);
    font-variant-numeric: tabular-nums;
}
.inv-line-total {
    font-size: 14px; font-weight: 900;
    color: var(--inv-fg1);
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════
   TOTALS CARD (left-side breakdown)
   ══════════════════════════════════════════════════════════════ */
.inv-totals { padding: 16px 20px; }
.inv-totals-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0;
    font-size: 13px;
}
.inv-totals-row .lbl {
    color: var(--inv-fg2); font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
}
.inv-totals-row .lbl i { font-size: 11px; }
.inv-totals-row .val {
    font-weight: 800; color: var(--inv-fg1);
    font-variant-numeric: tabular-nums;
}
.inv-totals-row.is-discount .val { color: #ef4444; }
.inv-totals-row.grand {
    margin-top: 8px;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--inv-accent), #6366f1);
    color: #fff;
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--inv-accent) 60%, transparent);
}
.inv-totals-row.grand .lbl { color: rgba(255,255,255,.85); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
.inv-totals-row.grand .val { color: #fff; font-size: 17px; font-weight: 900; }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR CARDS — customer / delivery / payment / actions
   ══════════════════════════════════════════════════════════════ */
.inv-sidebar { display: flex; flex-direction: column; gap: 16px; }
.inv-sidebar .inv-card { margin-bottom: 0; }

.inv-cust-body { padding: 16px 18px; }
.inv-cust-name {
    font-size: 15px; font-weight: 800; color: var(--inv-fg1);
    margin-bottom: 8px;
}
.inv-cust-line {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--inv-fg2);
    margin-bottom: 4px;
    line-height: 1.55;
}
.inv-cust-line i {
    width: 22px; height: 22px; border-radius: 7px;
    background: var(--inv-abg); color: var(--inv-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; flex-shrink: 0;
}
.inv-cust-line a {
    color: var(--inv-fg2); text-decoration: none;
    transition: color .15s;
}
.inv-cust-line a:hover { color: var(--inv-accent); }
.inv-cust-line:last-child { margin-bottom: 0; }

/* Pickup / dine-in pill */
.inv-delivery-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 800;
    color: var(--inv-fg2);
    background: var(--inv-bg2);
    border: 1px solid var(--inv-bd);
}

/* Order info: pairs of label/value */
.inv-info-pair {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 0;
    border-bottom: 1px dashed var(--inv-line);
    gap: 8px;
}
.inv-info-pair:last-child { border-bottom: 0; }
.inv-info-pair .lbl {
    font-size: 11px; font-weight: 800;
    color: var(--inv-fg3);
    text-transform: uppercase; letter-spacing: .04em;
}
.inv-info-pair .val {
    font-size: 12.5px; font-weight: 700;
    color: var(--inv-fg1);
    text-align: end;
    display: inline-flex; align-items: center; gap: 5px;
}
.inv-info-pair .val i { font-size: 11px; }

/* Internal notes — vendor input */
.inv-note-form {
    padding: 14px 18px;
    display: flex; gap: 8px; align-items: center;
}
.inv-note-input {
    flex: 1; height: 38px; padding: 0 12px;
    border-radius: 9px; font-size: 12.5px; font-weight: 600;
    border: 1px solid var(--inv-bd);
    background: var(--inv-bg2);
    color: var(--inv-fg1);
    outline: none;
    min-width: 0;
}
.inv-note-input:focus {
    border-color: var(--inv-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-accent) 12%, transparent);
}
.inv-note-input::placeholder { color: var(--inv-fg3); }

/* Mobile tweaks */
@media (max-width: 576px) {
    .inv-hero-num { font-size: 17px; }
    .inv-step-label { font-size: 10px; }
    .inv-items-table thead th, .inv-items-table tbody td { padding: 10px 12px; }
}


/* ──────────────────────────────────────────────────────────
   SECTION 2+3: Moved to orders-print.css
   Only loaded on admin/orders/print (standalone page).
   Keeping global html/body resets OUT of this file prevents
   them from breaking the admin layout on the orders list page.
   ────────────────────────────────────────────────────────── */\n\n\n/* ──────────────────────────────────────────────────────────
   SECTION 4: ORDERS TABLE PARTIAL (admin/orders/orderstable)
   Loaded via @once @push('styles') in the partial.
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════
   ORDERS TABLE — dashboard-grade design
═══════════════════════════════════════════════════════ */
.ord-tbl-wrap {
    overflow: hidden;
    margin-bottom: 0;
}
/* Strip global card appearance when table is inside .da3 wrapper */
.da3 .ord-tbl-wrap,
.da3 .ord-tbl-wrap .table-responsive {
    background:    transparent !important;
    border:        none !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
}
/* strip Bootstrap .table default borders */
.ord-tbl,
.ord-tbl > *,
.ord-tbl > :not(caption) > *,
.ord-tbl > :not(caption) > * > * {
    border-color: transparent !important;
    border-top-color: transparent !important;
    box-shadow: none !important;
}

/* Head */
.ord-tbl thead tr {
    background: var(--da3-bg2);
    border-bottom: 1px solid var(--da3-line);
}
.ord-tbl thead th {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--da3-fg3);
    padding: 12px 16px;
    border: none;
    white-space: nowrap;
}
/* Body */
.ord-tbl tbody tr { border-bottom: 1px solid var(--da3-line); transition: background .12s; }
.ord-tbl tbody tr:last-child { border-bottom: none; }
.ord-tbl tbody tr:hover { background: var(--da3-hover); }
.ord-tbl tbody td { padding: 14px 16px; border: none; vertical-align: middle; color: var(--da3-fg1); }

/* ── Order number ── */
.ord-num {
    font-size: .82rem; font-weight: 800;
    color: var(--da3-accent);
    text-decoration: none;
    font-family: 'SF Mono','Fira Code',monospace;
    letter-spacing: .02em;
}
.ord-num:hover { text-decoration: underline; opacity: .8; }
.ord-date-sub {
    font-size: .68rem;
    color: var(--da3-fg3);
    font-weight: 600;
    margin-top: 3px;
    display: block;
}

/* ── Customer ── */
.cust-wrap { display: flex; align-items: center; gap: 0.55rem; }
.cust-av {
    width: 36px; height: 36px;
    border-radius: 50%;
    font-size: 0.72rem; font-weight: 800;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cust-name {
    font-size: 0.85rem; font-weight: 700;
    color: var(--da3-fg1);
    max-width: 160px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cust-guest { font-size: 0.76rem; color: var(--da3-fg2); font-weight: 600; }

/* J.2: First-time customer chip */
.cust-first {
    display: inline-flex; align-items: center; gap: 3px;
    margin-inline-start: 6px;
    font-size: 0.66rem; font-weight: 700;
    padding: 1px 7px 2px; border-radius: 999px;
    background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(244,114,182,.18));
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,.35);
    letter-spacing: .02em; vertical-align: middle; white-space: nowrap;
}
.cust-first i { color: #fbbf24; }
body:not(.dark-mode) .cust-first {
    background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(244,114,182,.10));
    color: #b45309; border-color: rgba(245,158,11,.40);
}
body:not(.dark-mode) .cust-first i { color: #d97706; }

/* J.3 — Order tags */
.ord-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; align-items: center; }
.ord-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 6px 2px 8px; border-radius: 999px;
    font-size: .66rem; font-weight: 700;
    color: var(--tag-color, #6366f1);
    background: color-mix(in srgb, var(--tag-color, #6366f1) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--tag-color, #6366f1) 40%, transparent);
    line-height: 1.4; white-space: nowrap;
}
.ord-tag i { font-size: .58rem; }
.ord-tag-rm {
    background: transparent; border: 0; color: inherit;
    font-size: .9rem; line-height: .8; padding: 0 0 0 2px;
    cursor: pointer; opacity: .55; transition: opacity .12s;
}
.ord-tag-rm:hover { opacity: 1; }
.ord-tag-add {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 1px 8px 2px; border-radius: 999px;
    background: var(--da3-bg2);
    border: 1px dashed var(--da3-line);
    color: var(--da3-fg3); font-size: .66rem; font-weight: 700;
    cursor: pointer; transition: all .12s;
}
.ord-tag-add:hover {
    background: rgba(99,102,241,.12); color: #a5b4fc;
    border-color: rgba(99,102,241,.45); border-style: solid;
}
body:not(.dark-mode) .ord-tag-add { background: #f9fafb; border-color: #d1d5db; color: #6b7280; }
body:not(.dark-mode) .ord-tag-add:hover { background: #eef2ff; color: #4338ca; border-color: #6366f1; }

/* Tag picker popover */
.ord-tag-pop {
    position: absolute; z-index: 50;
    min-width: 200px; max-width: 260px;
    background: var(--bg-card, #0f172a);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
    padding: 8px;
    display: flex; flex-direction: column; gap: 4px;
}
.ord-tag-pop-item {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 8px; border-radius: 6px; cursor: pointer;
    font-size: .78rem; font-weight: 600;
    background: transparent; border: 0; text-align: start;
    color: var(--text-title, #f4f4f5); transition: background .12s;
}
.ord-tag-pop-item:hover { background: rgba(99,102,241,.16); }
.ord-tag-pop-swatch { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ord-tag-pop-empty { padding: 8px; font-size: .76rem; color: #94a3b8; text-align: center; }
body:not(.dark-mode) .ord-tag-pop { background: #fff; border-color: #e5e7eb; box-shadow: 0 24px 60px rgba(0,0,0,.18); }
body:not(.dark-mode) .ord-tag-pop-item { color: #1f2937; }
body:not(.dark-mode) .ord-tag-pop-item:hover { background: #eef2ff; color: #312e81; }

/* ── Amount ── */
.ord-amount { font-size: 0.95rem; font-weight: 900; color: #10b981; letter-spacing: -0.02em; }
body:not(.dark-mode) .ord-amount { color: #059669; }

/* ── Status badge ── */
.ord-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 800; white-space: nowrap;
}
.ord-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* ── Payment ── */
.pay-name { font-size: 0.8rem; font-weight: 700; color: var(--da3-fg1); display: block; }
.pay-pill {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.66rem; font-weight: 800;
    padding: 3px 8px; border-radius: 999px; margin-top: 4px;
}

/* ── Source badge ── */
.ord-src {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.73rem; font-weight: 700;
    padding: 4px 10px; border-radius: 8px; white-space: nowrap;
}

/* ── Action buttons ── */
.ord-act {
    width: 34px; height: 34px; border-radius: 9px;
    border: 1px solid var(--da3-line);
    background: var(--da3-bg2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem; cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .15s, color .15s, border-color .15s;
    text-decoration: none; color: var(--da3-fg2);
}
.ord-act:hover { transform: translateY(-1px); }
.ord-act.view:hover { background: rgba(99,102,241,.15); color: #818cf8; border-color: #6366f1; }
.ord-act.pay:hover  { background: rgba(16,185,129,.15); color: #34d399; border-color: #10b981; }
.ord-act.edit:hover { background: rgba(59,130,246,.15); color: #60a5fa; border-color: #3b82f6; }
.ord-act.del:hover  { background: rgba(239,68,68,.15);  color: #f87171; border-color: #ef4444; }

/* ── Empty state ── */
.ord-empty { padding: 60px 24px; text-align: center; }
.ord-empty-icon {
    width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 16px;
    background: var(--da3-bg2);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: var(--da3-fg3);
}
.ord-empty-title { font-size: 1rem; font-weight: 800; color: var(--da3-fg1); margin-bottom: 4px; }
.ord-empty-sub { font-size: 0.82rem; color: var(--da3-fg2); font-weight: 600; }

/* ── Orders table inside .da3 wrapper — tokens auto-adapt to light/dark ── */
/* (old "force dark in light mode" overrides removed — da3-* tokens handle this) */

/* ── Mobile cards ── */
@media (max-width: 768px) {
    .ord-tbl thead { display: none; }
    .ord-tbl tbody tr { display: block; padding: 14px; border-bottom: 1px solid var(--da3-line) !important; }
    .ord-tbl tbody tr:last-child { border-bottom: none !important; }
    .ord-tbl tbody td {
        display: flex; justify-content: space-between; align-items: center;
        padding: 6px 0; border-bottom: 1px solid var(--da3-line) !important;
    }
    .ord-tbl tbody td:last-child { border-bottom: none !important; justify-content: center; padding-top: 10px; }
    .ord-tbl tbody td::before {
        content: attr(data-label);
        font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
        color: #a1a1aa; flex-shrink: 0; margin-inline-end: .5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Payments
   Merged from: payments.css
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
 *
 *  EL MATAJER — PAYMENTS FEATURE CSS
 *  Extracted: 2026-05-25 (Wave 3 — CSS Architecture Consolidation)
 *
 *  Replaces embedded <style> blocks in:
 *    - resources/views/admin/payment/payment.blade.php
 *    - resources/views/admin/payment/admin_payment.blade.php
 *    - resources/views/admin/payment/partials/payment-card.blade.php
 *    - resources/views/admin/payment/partials/payment-form.blade.php
 *    - resources/views/admin/payment/partials/system-method-form.blade.php
 *    - resources/views/admin/payment/partials/payment-info-modal.blade.php
 *    - resources/views/admin/payment/analytics.blade.php
 *
 *  Consumers: All payment gateway management blade views (vendor + admin)
 *  Tokens:    Uses var() from tokens.css — no hardcoded colors
 *
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. GATEWAY PAGE TOKEN SCOPE  (.pgw-page)
   ───────────────────────────────────────────────────────────────────────────── */
.pgw-page {
    --pg-radius:      14px;
    --pg-radius-sm:   10px;
    --pg-radius-pill: 999px;
    --pg-text:        var(--da3g-fg1, #f4f4f5);
    --pg-text-2:      var(--da3g-fg2, #a1a1aa);
    --pg-text-3:      var(--da3g-fg3, #71717a);
    --pg-card:        var(--da3g-card, #1c1c1f);
    --pg-bg2:         var(--da3g-bg2, #111113);
    --pg-line:        var(--da3g-line, rgba(255,255,255,.06));
    --pg-line-2:      var(--da3g-bd,   rgba(255,255,255,.055));
    --pg-hover:       var(--da3g-hover, rgba(255,255,255,.03));
    --pg-accent:      var(--da3g-accent, #3b82f6);
    --pg-accent-bg:   var(--da3g-abg,    rgba(59,130,246,.12));
    --pg-success:     var(--da3g-success, #10b981);
    --pg-success-bg:  var(--da3g-success-bg, rgba(16,185,129,.12));
    --pg-warn:        var(--da3g-warn, #f59e0b);
    --pg-warn-bg:     var(--da3g-warn-bg, rgba(245,158,11,.12));
    --pg-danger:      var(--da3g-danger, #ef4444);
    --pg-danger-bg:   var(--da3g-danger-bg, rgba(239,68,68,.12));
}
body:not(.dark-mode) .pgw-page {
    --pg-text:    #09090b;
    --pg-text-2:  #52525b;
    --pg-text-3:  #a1a1aa;
    --pg-card:    #ffffff;
    --pg-bg2:     #f9f9fb;
    --pg-line:    #f4f4f5;
    --pg-line-2:  #e4e4e7;
    --pg-hover:   rgba(0,0,0,.02);
}

/* Payment form scope */
.pf-form {
    --pf-radius:     12px;
    --pf-radius-sm:  9px;
    --pf-text:       var(--da3g-fg1, #f4f4f5);
    --pf-text-2:     var(--da3g-fg2, #a1a1aa);
    --pf-text-3:     var(--da3g-fg3, #71717a);
    --pf-card:       var(--da3g-card, #1c1c1f);
    --pf-bg2:        var(--da3g-bg2,  #111113);
    --pf-line:       var(--da3g-line, rgba(255,255,255,.06));
    --pf-line-2:     var(--da3g-bd,   rgba(255,255,255,.08));
    --pf-accent:     var(--da3g-accent, #3b82f6);
    --pf-accent-bg:  var(--da3g-abg,    rgba(59,130,246,.12));
    --pf-success:    var(--da3g-success, #10b981);
    --pf-success-bg: var(--da3g-success-bg, rgba(16,185,129,.12));
    --pf-warn:       var(--da3g-warn, #f59e0b);
    --pf-warn-bg:    var(--da3g-warn-bg, rgba(245,158,11,.12));
    --pf-danger:     var(--da3g-danger, #ef4444);
    display: flex; flex-direction: column; gap: 14px;
}
body:not(.dark-mode) .pf-form {
    --pf-text:   #09090b;
    --pf-text-2: #52525b;
    --pf-text-3: #a1a1aa;
    --pf-card:   #ffffff;
    --pf-bg2:    #f9f9fb;
    --pf-line:   #f1f1f4;
    --pf-line-2: #e4e4e7;
}

/* Analytics page scope */
.pga-page {
    --pga-radius:    14px;
    --pga-text:      var(--da3g-fg1, #f4f4f5);
    --pga-text-2:    var(--da3g-fg2, #a1a1aa);
    --pga-text-3:    var(--da3g-fg3, #71717a);
    --pga-card:      var(--da3g-card, #1c1c1f);
    --pga-bg2:       var(--da3g-bg2,  #111113);
    --pga-line:      var(--da3g-line, rgba(255,255,255,.06));
    --pga-line-2:    var(--da3g-bd,   rgba(255,255,255,.055));
    --pga-accent:    var(--da3g-accent, #3b82f6);
    --pga-accent-bg: var(--da3g-abg, rgba(59,130,246,.12));
    --pga-success:   var(--da3g-success, #10b981);
    --pga-success-bg: var(--da3g-success-bg, rgba(16,185,129,.12));
    --pga-warn:      var(--da3g-warn, #f59e0b);
    --pga-warn-bg:   var(--da3g-warn-bg, rgba(245,158,11,.12));
}
body:not(.dark-mode) .pga-page {
    --pga-text: #09090b; --pga-text-2: #52525b; --pga-text-3: #a1a1aa;
    --pga-card: #fff;    --pga-bg2:    #f9f9fb;
    --pga-line: #f4f4f5; --pga-line-2: #e4e4e7;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. GATEWAY HERO  (.pgw-hero)
   ───────────────────────────────────────────────────────────────────────────── */
.pgw-hero {
    background: var(--pg-card);
    border: 1px solid var(--pg-line-2);
    border-radius: var(--pg-radius);
    padding: 22px 26px;
    margin-bottom: 18px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    position: relative; overflow: hidden;
}
.pgw-hero::before {
    content: ''; position: absolute;
    top: -30%; inset-inline-end: -10%;
    width: 220px; height: 220px;
    background: radial-gradient(circle, color-mix(in srgb, var(--pg-accent) 18%, transparent), transparent 65%);
    pointer-events: none;
}
.pgw-hero-content { display: flex; align-items: center; gap: 14px; min-width: 260px; }
.pgw-hero-ico {
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--pg-accent-bg); color: var(--pg-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}
.pgw-hero h1 { font-size: 22px; font-weight: 900; color: var(--pg-text); margin: 0 0 4px; letter-spacing: -.02em; }
.pgw-hero p  { font-size: 12.5px; color: var(--pg-text-3); margin: 0; }

.pgw-hero-stats { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pgw-hero-stat {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: var(--pg-radius-pill);
    background: var(--pg-bg2); border: 1px solid var(--pg-line-2);
    font-size: 12px; font-weight: 700; color: var(--pg-text-2);
}
.pgw-hero-stat strong { color: var(--pg-text); font-weight: 900; }
.pgw-hero-stat.is-on   strong { color: var(--pg-success); }
.pgw-hero-stat.is-auto strong { color: var(--pg-accent); }

/* Admin page: add-gateway CTA */
.pgw-hero-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border: 0; border-radius: var(--pg-radius-sm);
    background: var(--pg-accent); color: var(--white, #fff);
    font-size: 13px; font-weight: 800; cursor: pointer; text-decoration: none;
    transition: filter .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--pg-accent) 70%, transparent);
}
.pgw-hero-cta:hover { transform: translateY(-1px); filter: brightness(1.1); color: var(--white, #fff); }

/* ─────────────────────────────────────────────────────────────────────────────
   3. FILTER TOOLBAR  (.pgw-toolbar)
   ───────────────────────────────────────────────────────────────────────────── */
.pgw-toolbar {
    background: var(--pg-card); border: 1px solid var(--pg-line-2);
    border-radius: var(--pg-radius); padding: 14px 18px; margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.pgw-search { flex: 1; min-width: 240px; position: relative; }
.pgw-search i {
    position: absolute; top: 50%; transform: translateY(-50%);
    color: var(--pg-text-3); font-size: 12px; pointer-events: none;
}
html[dir="rtl"] .pgw-search i { right: 14px; }
html[dir="ltr"] .pgw-search i { left: 14px; }
.pgw-search input {
    width: 100%; height: 42px; padding: 0 40px;
    background: var(--pg-bg2); border: 1.5px solid var(--pg-line-2);
    border-radius: var(--pg-radius-sm); color: var(--pg-text);
    font-size: 13px; font-weight: 600; font-family: inherit; outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.pgw-search input:focus { border-color: var(--pg-accent); box-shadow: 0 0 0 3px var(--pg-accent-bg); }

.pgw-filter {
    height: 42px; padding: 0 14px;
    background: var(--pg-bg2); border: 1.5px solid var(--pg-line-2);
    border-radius: var(--pg-radius-sm); color: var(--pg-text);
    font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat; background-size: 12px;
    background-position: right 12px center; padding-inline-end: 32px;
}
html[dir="rtl"] .pgw-filter { background-position: left 12px center; padding-inline-end: 14px; padding-inline-start: 32px; }

.pgw-toolbar-count {
    margin-inline-start: auto;
    font-size: 11.5px; color: var(--pg-text-3); font-weight: 700;
    background: var(--pg-bg2); padding: 8px 14px; border-radius: var(--pg-radius-pill);
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. GATEWAY TABLE  (.pgw-table-wrap, .pgw-table)
   ───────────────────────────────────────────────────────────────────────────── */
.pgw-table-wrap {
    background: var(--pg-card); border: 1px solid var(--pg-line-2);
    border-radius: var(--pg-radius); overflow: hidden; margin-bottom: 16px;
}
.pgw-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.pgw-table thead th {
    background: var(--pg-bg2); padding: 14px 16px;
    font-size: .7rem; font-weight: 800; color: var(--pg-text-2);
    text-transform: uppercase; letter-spacing: .08em;
    border-bottom: 1px solid var(--pg-line); text-align: start; white-space: nowrap;
}
.pgw-table tbody td {
    padding: 14px 16px; border-bottom: 1px solid var(--pg-line);
    color: var(--pg-text); vertical-align: middle; font-size: 13px;
}
.pgw-table tbody tr { transition: background .12s; }
.pgw-table tbody tr:hover { background: var(--pg-hover); }
.pgw-table tbody tr:last-child td { border-bottom: 0; }

/* Gateway name cell */
.pgw-name { display: flex; align-items: center; gap: 12px; }
.pgw-logo {
    width: 52px; height: 52px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden; background: var(--pg-bg2); border: 1px solid var(--pg-line-2);
    color: var(--white, #fff); font-size: 14px; flex-shrink: 0;
}
.pgw-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgw-name-meta strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--pg-text); margin-bottom: 2px; }
.pgw-name-meta small  { font-size: 11.5px; color: var(--pg-text-3); font-weight: 600; }

/* Mode tag (auto / manual) */
.pgw-mode-tag {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
    font-size: 10.5px; font-weight: 700;
    padding: 2px 8px; border-radius: var(--pg-radius-pill);
}
.pgw-mode-tag.is-auto   { background: var(--pg-accent-bg); color: var(--pg-accent); }
.pgw-mode-tag.is-manual { background: var(--pg-warn-bg);   color: var(--pg-warn); }
.pgw-mode-tag.pgw-setup-needed { background: rgba(245,158,11,.12); color: var(--pg-warn); border: 1px solid rgba(245,158,11,.28); }

/* Region tag */
.pgw-region-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: var(--pg-radius-pill);
    font-size: 11.5px; font-weight: 700; border: 1px solid;
}

/* Category pill */
.pgw-cat {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: var(--pg-radius-pill);
    font-size: 11.5px; font-weight: 800; border: 1px solid transparent;
}
.pgw-cat.cat-card     { background: rgba(99,102,241,.12);  color: #818cf8; border-color: rgba(99,102,241,.25); }
.pgw-cat.cat-wallet   { background: rgba(168,85,247,.12);  color: #c084fc; border-color: rgba(168,85,247,.25); }
.pgw-cat.cat-bnpl     { background: rgba(245,158,11,.12);  color: var(--pg-warn); border-color: rgba(245,158,11,.25); }
.pgw-cat.cat-cash     { background: rgba(245,158,11,.12);  color: #fbbf24; border-color: rgba(245,158,11,.25); }
.pgw-cat.cat-bank     { background: rgba(59,130,246,.12);  color: var(--pg-accent); border-color: rgba(59,130,246,.25); }
.pgw-cat.cat-internal { background: rgba(16,185,129,.12);  color: var(--pg-success); border-color: rgba(16,185,129,.25); }
body:not(.dark-mode) .pgw-cat.cat-card     { background: rgba(99,102,241,.08); color: #4f46e5; }
body:not(.dark-mode) .pgw-cat.cat-wallet   { background: rgba(168,85,247,.08); color: #7c3aed; }
body:not(.dark-mode) .pgw-cat.cat-bnpl     { background: rgba(245,158,11,.08); color: #b45309; }
body:not(.dark-mode) .pgw-cat.cat-cash     { background: rgba(245,158,11,.08); color: #b45309; }
body:not(.dark-mode) .pgw-cat.cat-bank     { background: rgba(59,130,246,.08); color: #2563eb; }
body:not(.dark-mode) .pgw-cat.cat-internal { background: rgba(16,185,129,.08); color: #059669; }

/* Currency / fee cells */
.pgw-currency { font-family: 'SF Mono', 'Monaco', monospace; font-size: 12px; font-weight: 700; color: var(--pg-text); }
.pgw-currency.is-empty { color: var(--pg-text-3); font-family: inherit; font-weight: 500; }
.pgw-fee      { font-size: 13px; font-weight: 800; color: var(--pg-text); }
.pgw-fee-none { color: var(--pg-text-3); font-weight: 500; }

/* Active toggle */
.pgw-toggle { display: inline-block; position: relative; width: 40px; height: 22px; }
.pgw-toggle input { opacity: 0; width: 0; height: 0; }
.pgw-toggle-track {
    position: absolute; inset: 0;
    background: var(--pg-line-2); border-radius: 999px; cursor: pointer;
    transition: background .25s;
}
.pgw-toggle-track::before {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--white, #fff); box-shadow: 0 2px 4px rgba(0,0,0,.25);
    transition: transform .25s;
}
html[dir="rtl"] .pgw-toggle-track::before { left: auto; right: 2px; }
.pgw-toggle input:checked + .pgw-toggle-track { background: var(--pg-success); }
.pgw-toggle input:checked + .pgw-toggle-track::before { transform: translateX(18px); }
html[dir="rtl"] .pgw-toggle input:checked + .pgw-toggle-track::before { transform: translateX(-18px); }
.pgw-toggle.is-locked .pgw-toggle-track { cursor: not-allowed; opacity: .55; }

/* Action buttons */
.pgw-actions { display: inline-flex; align-items: center; gap: 6px; }
.pgw-act {
    width: 34px; height: 34px; border-radius: 9px;
    border: 1px solid var(--pg-line-2); background: var(--pg-bg2); color: var(--pg-text-2);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 12.5px;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.pgw-act:hover { background: var(--pg-card); color: var(--pg-text); border-color: var(--pg-accent); transform: translateY(-1px); }
.pgw-act.is-info:hover  { color: var(--pg-accent); background: var(--pg-accent-bg); border-color: var(--pg-accent); }
.pgw-act.is-stats:hover { color: #c084fc; background: rgba(168,85,247,.12); border-color: rgba(168,85,247,.45); }
.pgw-act.is-test:hover  { color: var(--pg-warn); background: var(--pg-warn-bg); border-color: var(--pg-warn); }
.pgw-act.is-settings { background: var(--pg-accent); color: var(--white, #fff); border-color: var(--pg-accent); }
.pgw-act.is-settings:hover { filter: brightness(1.1); color: var(--white, #fff); }
.pgw-act.is-locked  { opacity: .55; cursor: not-allowed; }
.pgw-act.is-locked:hover { transform: none; border-color: var(--pg-line-2); color: var(--pg-text-2); background: var(--pg-bg2); }
.pgw-act.is-setup { color: var(--pg-warn); border-color: rgba(245,158,11,.35); background: var(--pg-warn-bg); }
.pgw-act.is-setup:hover { background: var(--pg-warn); color: var(--white, #fff); border-color: var(--pg-warn); transform: translateY(-1px); }

/* Footer strip */
.pgw-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; padding: 14px 18px;
    background: var(--pg-bg2); border-top: 1px solid var(--pg-line);
}
.pgw-foot-text { font-size: 12px; color: var(--pg-text-3); font-weight: 600; }
.pgw-last { font-size: 12.5px; color: var(--pg-text-2); font-weight: 600; white-space: nowrap; }
.pgw-last.is-empty { color: var(--pg-text-3); }

/* Empty state */
.pgw-empty { padding: 70px 20px; text-align: center; }
.pgw-empty i { font-size: 48px; color: var(--pg-text-3); display: block; margin-bottom: 12px; }
.pgw-empty h3 { font-size: 16px; font-weight: 800; color: var(--pg-text); margin-bottom: 4px; }
.pgw-empty p  { font-size: 12.5px; color: var(--pg-text-3); }

/* ─────────────────────────────────────────────────────────────────────────────
   5. PAYMENT FORM  (.pf-form, .pf-section, .pf-row)
   ───────────────────────────────────────────────────────────────────────────── */
.pf-section {
    background: var(--pf-card); border: 1px solid var(--pf-line-2);
    border-radius: var(--pf-radius); overflow: hidden;
    display: flex; flex-direction: column; min-width: 0;
}
.pf-section-head {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 800; color: var(--pf-text);
    padding: 12px 18px; background: var(--pf-bg2);
    border-bottom: 1px solid var(--pf-line);
}
.pf-section-head i.pf-head-ico {
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pf-accent-bg); color: var(--pf-accent);
    font-size: 12px;
}
.pf-section-body { padding: 16px 18px; flex: 1; }

.pf-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch;
}
.pf-row.is-3 { grid-template-columns: 1fr 1fr 1fr; }

/* Collapsible info banner */
.pf-info {
    background: var(--pf-accent-bg);
    border: 1px solid color-mix(in srgb, var(--pf-accent) 28%, transparent);
    border-radius: var(--pf-radius); overflow: hidden;
}
.pf-info-head {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    cursor: pointer; user-select: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--pf-accent) 14%, transparent) 0%, transparent 100%);
}
.pf-info-head .pf-info-ico {
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--pf-accent); color: var(--white, #fff);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
.pf-info-head strong { font-size: 13px; font-weight: 800; color: var(--pf-text); }
.pf-info-head small  { display: block; font-size: 11.5px; color: var(--pf-text-2); margin-top: 2px; }
.pf-info-head .pf-info-chev {
    margin-inline-start: auto; width: 28px; height: 28px; border-radius: 7px;
    background: var(--pf-card); border: 1px solid var(--pf-line-2);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--pf-text-2); font-size: 11px; transition: transform .25s;
}
.pf-info.is-open .pf-info-chev { transform: rotate(180deg); }
.pf-info-body { padding: 0 16px; max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; }
.pf-info.is-open .pf-info-body { max-height: 800px; padding: 14px 16px 16px; border-top: 1px solid color-mix(in srgb, var(--pf-accent) 22%, transparent); }
.pf-info-desc { font-size: 12.5px; line-height: 1.7; color: var(--pf-text-2); margin-bottom: 12px; }
.pf-info-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pf-info-link {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 7px;
    background: var(--pf-card); color: var(--pf-accent);
    border: 1px solid color-mix(in srgb, var(--pf-accent) 25%, transparent);
    font-size: 11.5px; font-weight: 700; text-decoration: none;
}
.pf-info-link:hover { background: var(--pf-accent); color: var(--white, #fff); }
.pf-info-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-bottom: 12px; }
.pf-info-step {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--pf-card); border: 1px solid var(--pf-line-2);
    border-radius: 9px; padding: 10px 12px;
}
.pf-info-step-num {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--pf-accent); color: var(--white, #fff);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.pf-info-step-txt { font-size: 12px; line-height: 1.6; color: var(--pf-text); }
.pf-info-step.is-cb { background: transparent !important; border: 0 !important; padding: 6px 0; grid-column: 1 / -1; align-items: center; }
.pf-info-step.is-cb .pf-info-step-txt { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Callback URL inline copy */
.pf-cb-inline { display: inline-flex; align-items: stretch; border: 1px solid var(--pf-line-2); border-radius: 7px; overflow: hidden; background: var(--pf-card); }
.pf-cb-inline code { padding: 6px 10px; font-size: 11.5px; font-family: 'SF Mono', Monaco, monospace; color: var(--pf-text); background: transparent; direction: ltr; text-align: left; word-break: break-all; }
.pf-cb-inline-copy { border: 0; border-inline-start: 1px solid var(--pf-line-2); background: var(--pf-accent); color: var(--white, #fff); padding: 0 12px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; }
.pf-cb-inline-copy:hover { filter: brightness(1.1); }

.pf-info-cb {
    background: var(--pf-card); border: 1px dashed color-mix(in srgb, var(--pf-accent) 35%, transparent);
    border-radius: 9px; padding: 10px 12px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pf-info-cb-label { font-size: 11.5px; font-weight: 800; color: var(--pf-text-2); }
.pf-info-cb code { flex: 1; min-width: 200px; background: var(--pf-text); color: var(--pf-card); padding: 6px 10px; border-radius: 6px; font-size: 11.5px; font-family: 'SF Mono', Monaco, monospace; direction: ltr; text-align: left; word-break: break-all; }
.pf-info-cb-copy { padding: 6px 12px; border-radius: 6px; border: 0; background: var(--pf-accent); color: var(--white, #fff); font-size: 11px; font-weight: 800; cursor: pointer; }
.pf-info-cb-copy:hover { filter: brightness(1.1); }

/* ─────────────────────────────────────────────────────────────────────────────
   6. PAYMENT INFO MODAL  (.pgi-modal, .pgi-head, .pgi-body)
   ───────────────────────────────────────────────────────────────────────────── */
.pgi-modal .modal-content {
    background: var(--da3g-card, #1c1c1f) !important;
    color: var(--da3g-fg1, #f4f4f5); border: 0; border-radius: 14px; overflow: hidden;
}
body:not(.dark-mode) .pgi-modal .modal-content { background: var(--white, #fff) !important; color: #09090b; }

.pgi-head {
    display: flex; align-items: center; gap: 12px; padding: 18px 22px;
    border-bottom: 1px solid var(--da3g-line, rgba(255,255,255,.06));
}
.pgi-head .pgi-logo {
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--da3g-bg2, #111113);
    border: 1px solid var(--da3g-bd, rgba(255,255,255,.06));
    display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
}
.pgi-head .pgi-logo img { width: 100%; height: 100%; object-fit: cover; }
.pgi-head .pgi-title  { flex: 1; }
.pgi-head h5 { font-size: 16px; font-weight: 800; margin: 0; color: var(--da3g-fg1, #f4f4f5); }
body:not(.dark-mode) .pgi-head h5 { color: #09090b; }
.pgi-head small { display: block; font-size: 12px; color: var(--da3g-fg3, #71717a); margin-top: 2px; }

.pgi-body { padding: 22px; }

.pgi-desc {
    background: var(--da3g-bg2, #111113); border: 1px solid var(--da3g-bd, rgba(255,255,255,.06));
    border-radius: 10px; padding: 14px 16px; font-size: 13px; line-height: 1.7;
    color: var(--da3g-fg2, #a1a1aa); margin-bottom: 18px;
}
body:not(.dark-mode) .pgi-desc { background: #f9f9fb; border-color: #e4e4e7; color: #52525b; }

.pgi-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pgi-link {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px;
    background: var(--da3g-abg, rgba(59,130,246,.12));
    color: var(--da3g-accent, #3b82f6); text-decoration: none;
    font-size: 12px; font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--da3g-accent,#3b82f6) 25%, transparent);
}
.pgi-link:hover { filter: brightness(1.1); color: var(--da3g-accent, #3b82f6); }

.pgi-section-title {
    font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
    color: var(--da3g-fg3, #71717a); margin: 0 0 12px;
    display: flex; align-items: center; gap: 8px;
}
.pgi-section-title::after { content: ''; flex: 1; height: 1px; background: var(--da3g-line, rgba(255,255,255,.06)); }

.pgi-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.pgi-step {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--da3g-bg2, #111113); border: 1px solid var(--da3g-bd, rgba(255,255,255,.06));
    border-radius: 10px; padding: 12px 14px;
}
body:not(.dark-mode) .pgi-step { background: #f9f9fb; border-color: #e4e4e7; }
.pgi-step-num {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--da3g-accent, #3b82f6); color: var(--white, #fff);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.pgi-step-text { font-size: 13px; line-height: 1.6; color: var(--da3g-fg1, #f4f4f5); }
body:not(.dark-mode) .pgi-step-text { color: #09090b; }

.pgi-cb-box {
    background: var(--da3g-abg, rgba(59,130,246,.12));
    border: 1px solid color-mix(in srgb, var(--da3g-accent,#3b82f6) 25%, transparent);
    border-radius: 10px; padding: 14px 16px;
}
.pgi-cb-title { font-size: 13px; font-weight: 800; color: var(--da3g-fg1, #f4f4f5); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
body:not(.dark-mode) .pgi-cb-title { color: #09090b; }
.pgi-cb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pgi-cb-row code { flex: 1; min-width: 200px; background: var(--da3g-fg1, #f4f4f5); color: var(--da3g-card, #1c1c1f); padding: 8px 12px; border-radius: 8px; font-size: 12px; font-family: 'SF Mono', Monaco, monospace; direction: ltr; text-align: left; word-break: break-all; }
body:not(.dark-mode) .pgi-cb-row code { background: #09090b; color: var(--white, #fff); }
.pgi-cb-copy { padding: 8px 14px; border-radius: 8px; border: 0; background: var(--da3g-accent, #3b82f6); color: var(--white, #fff); font-size: 12px; font-weight: 800; cursor: pointer; }
.pgi-cb-copy:hover { filter: brightness(1.1); }

.pgi-foot { padding: 14px 22px; border-top: 1px solid var(--da3g-line, rgba(255,255,255,.06)); display: flex; justify-content: flex-end; }
.pgi-foot button { padding: 8px 20px; border-radius: 8px; border: 1px solid var(--da3g-bd, rgba(255,255,255,.08)); background: var(--da3g-bg2, #111113); color: var(--da3g-fg2, #a1a1aa); font-size: 12.5px; font-weight: 700; }
body:not(.dark-mode) .pgi-foot button { background: #f9f9fb; color: #52525b; border-color: #e4e4e7; }

/* ─────────────────────────────────────────────────────────────────────────────
   7. ANALYTICS STATS STRIP  (.pga-stats, .pga-stat)
   ───────────────────────────────────────────────────────────────────────────── */
.pga-head {
    background: var(--pga-card); border: 1px solid var(--pga-line-2);
    border-radius: var(--pga-radius); padding: 18px 22px; margin-bottom: 16px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.pga-head h1 { font-size: 20px; font-weight: 900; color: var(--pga-text); margin: 0; }
.pga-head p  { font-size: 12.5px; color: var(--pga-text-3); margin: 4px 0 0; }
.pga-back {
    margin-inline-start: auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 9px;
    background: var(--pga-bg2); color: var(--pga-text-2); text-decoration: none;
    font-size: 12.5px; font-weight: 700; border: 1px solid var(--pga-line-2);
}
.pga-back:hover { color: var(--pga-text); border-color: var(--pga-accent); }

.pga-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.pga-stat {
    background: var(--pga-card); border: 1px solid var(--pga-line-2);
    border-radius: var(--pga-radius); padding: 16px 18px;
}
.pga-stat-lbl { font-size: 11.5px; color: var(--pga-text-3); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.pga-stat-val { font-size: 22px; font-weight: 900; color: var(--pga-text); }
.pga-stat-ico {
    float: inline-end; width: 38px; height: 38px; border-radius: 10px;
    background: var(--pga-accent-bg); color: var(--pga-accent);
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.pga-card {
    background: var(--pga-card); border: 1px solid var(--pga-line-2);
    border-radius: var(--pga-radius); margin-bottom: 16px; overflow: hidden;
}
.pga-card-head {
    padding: 14px 18px; border-bottom: 1px solid var(--pga-line);
    background: var(--pga-bg2); font-size: 13px; font-weight: 800; color: var(--pga-text);
}
.pga-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.pga-table thead th {
    background: var(--pga-bg2); padding: 12px 16px; font-size: .7rem; font-weight: 800;
    color: var(--pga-text-2); text-transform: uppercase; letter-spacing: .08em;
    border-bottom: 1px solid var(--pga-line); text-align: start;
}
.pga-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--pga-line); color: var(--pga-text); font-size: 13px; }
.pga-table tbody tr:last-child td { border-bottom: 0; }
.pga-vendor { display: flex; flex-direction: column; gap: 2px; }
.pga-vendor strong { font-size: 13px; font-weight: 800; color: var(--pga-text); }
.pga-vendor small  { font-size: 11.5px; color: var(--pga-text-3); }

/* Sparkbar chart */
.pga-spark { display: flex; align-items: flex-end; gap: 3px; height: 110px; padding: 16px 18px; }
.pga-spark-bar {
    flex: 1; min-width: 6px; background: var(--pga-accent);
    border-radius: 3px 3px 0 0; opacity: .85; min-height: 2px; position: relative;
}
.pga-spark-bar:hover { opacity: 1; }
.pga-spark-bar::after { content: attr(data-day); position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 9px; color: var(--pga-text-3); white-space: nowrap; }
.pga-empty { padding: 50px 20px; text-align: center; color: var(--pga-text-3); font-size: 13px; }

/* ─────────────────────────────────────────────────────────────────────────────
   8. LEGACY CARD STYLE  (.pay-box — payment-card.blade.php)
   ───────────────────────────────────────────────────────────────────────────── */
.pay-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; width: 100%; }
.pay-box {
    background: linear-gradient(160deg, var(--bg-secondary, #1e293b), var(--bg-primary, #0f172a));
    border-radius: 22px; padding: 22px; display: flex; flex-direction: column;
    justify-content: space-between; border: 1px solid rgba(255,255,255,.05);
    transition: .25s ease; position: relative; overflow: hidden;
}
.pay-head { display: flex; align-items: center; gap: 14px; }
.pay-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pay-icon img { border-radius: 8px; max-width: 80%; max-height: 80%; object-fit: cover; }
.pay-title { color: var(--text-primary, #f8fafc); font-weight: 700; font-size: 15px; }
.pay-sub { color: var(--text-secondary, #94a3b8); font-size: 12px; margin-top: 4px; }
.pay-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; gap: 12px; flex-wrap: wrap; }
.pay-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-btn { background: rgba(255,255,255,.08); border: none; color: var(--text-primary, #e2e8f0); padding: 8px 14px; border-radius: 10px; font-size: 12px; font-weight: 600; transition: .2s; white-space: nowrap; }
.pay-btn:hover { background: rgba(255,255,255,.18); }
.pay-toggle { position: relative; width: 46px; height: 24px; }
.pay-toggle input { display: none; }
.pay-track { position: absolute; inset: 0; background: var(--border-color, #475569); border-radius: 50px; transition: .25s; }
.pay-track::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: var(--white, white); border-radius: 50%; transition: .25s; }
.pay-toggle input:checked + .pay-track { background: var(--success, #22c55e); }
.pay-toggle input:checked + .pay-track::before { transform: translateX(22px); }

/* Spin animation for API test loader */
@keyframes pgwSpin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────────────────────
   9. DARK-MODE OVERRIDES
   ───────────────────────────────────────────────────────────────────────────── */
/* pgw-page tokens already resolved from --da3g-* so no additional overrides needed.
   The pga-page also resolves from --da3g-* tokens. */

/* ─────────────────────────────────────────────────────────────────────────────
   10. RESPONSIVE BREAKPOINTS
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1199px) { .pay-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 1100px) { .pf-row.is-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
    .pgw-table thead { display: none; }
    .pgw-table tbody tr { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 14px; padding: 14px; border-bottom: 1px solid var(--pg-line); }
    .pgw-table tbody td { padding: 0; border: 0; display: flex; align-items: center; }
    .pgw-table tbody td:nth-child(1) { grid-column: 1 / 4; }
    .pgw-table tbody td::before { content: attr(data-label); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--pg-text-3); margin-inline-end: 8px; }
    .pgw-table tbody td:nth-child(1)::before { display: none; }
    .pf-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) { .pf-row.is-3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
    .pgi-cb-row code { font-size: 11px; }
    .pgi-cb-row { flex-direction: column; align-items: stretch; }
    .pgi-cb-copy { width: 100%; }
}
@media (max-width: 600px) {
    .pay-grid { grid-template-columns: 1fr; }
    .pay-box { padding: 18px; }
    .pay-actions { flex-direction: column; align-items: stretch; }
    .pay-btn { width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   Pos
   Merged from: pos.css
═══════════════════════════════════════════════════════════════ */

/* ============================================================
   ELMATAJER — POS (POINT OF SALE) CSS
   Combines: pos/index, pos/cartview, pos/invoice-body
   All static rules extracted — Wave 4 (2026-05-25)
   Dynamic RTL ternary rules remain in each blade file.
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   SECTION 1: POS MAIN SHELL (admin/pos/index — block 1)
   ────────────────────────────────────────────────────────── */
/* ═════════════════════════════════════════════════════════════════════════
   POS SCOPED STYLES — only apply inside `.pos-shell`
   ═════════════════════════════════════════════════════════════════════════ */

/* ── DA3 token mirror — same as default.blade.php so POS matches dashboard ── */
body.dark-mode .pos-shell{
    --da3-card:    #1c1c1f;
    --da3-bd:      rgba(255,255,255,.055);
    --da3-bg:      #111113;
    --da3-bg2:     #1e1e22;
    --da3-shadow:  0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-shadow-lg: 0 12px 32px rgba(0,0,0,.45);
    --da3-fg1:     #f4f4f5;
    --da3-fg2:     #a1a1aa;
    --da3-fg3:     #71717a;
    --da3-line:    rgba(255,255,255,.06);
    --da3-hover:   rgba(255,255,255,.04);
    --da3-accent:  #6366f1;
    --da3-accent2: #4f46e5;
    --da3-abg:     rgba(99,102,241,.14);
    --da3-success:    #10b981;
    --da3-success-bg: rgba(16,185,129,.14);
    --da3-warn:       #f59e0b;
    --da3-warn-bg:    rgba(245,158,11,.14);
    --da3-danger:     #ef4444;
    --da3-danger-bg:  rgba(239,68,68,.14);
    --da3-input-bg: rgba(255,255,255,.025);
    --da3-pill-bg:  rgba(255,255,255,.04);
}
body:not(.dark-mode) .pos-shell{
    --da3-card:    #ffffff;
    --da3-bd:      #e4e4e7;
    --da3-bg:      #f4f4f7;
    --da3-bg2:     #f9f9fb;
    --da3-shadow:  0 1px 3px rgba(0,0,0,.07), 0 0 0 1px #e4e4e7;
    --da3-shadow-lg: 0 12px 32px rgba(0,0,0,.10);
    --da3-fg1:     #09090b;
    --da3-fg2:     #52525b;
    --da3-fg3:     #a1a1aa;
    --da3-line:    #f4f4f5;
    --da3-hover:   rgba(0,0,0,.025);
    --da3-accent:  #6366f1;
    --da3-accent2: #4f46e5;
    --da3-abg:     rgba(99,102,241,.10);
    --da3-success:    #10b981;
    --da3-success-bg: #d1fae5;
    --da3-warn:       #f59e0b;
    --da3-warn-bg:    #fef3c7;
    --da3-danger:     #ef4444;
    --da3-danger-bg:  #fef2f2;
    --da3-input-bg:  #ffffff;
    --da3-pill-bg:   #ffffff;
}

/* ── Shell ─────────────────────────────────────────────────────────────── */
html, body{ height:100%; background: var(--da3-bg, #111); }
body.dark-mode{ background:#111113; }
body:not(.dark-mode){ background:#f4f4f7; }

.pos-shell{
    min-height:100vh;
    color: var(--da3-fg1);
    font-family: var(--pos-font-family, "Zain", system-ui, -apple-system, "Segoe UI", sans-serif);
    background: var(--da3-bg);
}

/* ── Topbar ────────────────────────────────────────────────────────────── */
.pos-topbar{
    position: sticky;
    top: 0;
    z-index: 1040;
    background: var(--da3-card);
    border-bottom: 1px solid var(--da3-bd);
    backdrop-filter: blur(10px);
    box-shadow: var(--da3-shadow);
}
.pos-topbar-inner{
    display:flex; align-items:center; gap:14px;
    padding: 12px 22px;
    max-width: 1600px;
    margin: 0 auto;
}
.pos-brand{
    display:flex; align-items:center; gap:12px;
    text-decoration:none; color: var(--da3-fg1);
}
.pos-brand-logo{
    width:42px; height:42px; border-radius:11px;
    background: linear-gradient(135deg, var(--da3-accent), var(--da3-accent2));
    display:inline-flex; align-items:center; justify-content:center;
    color:#fff; font-size:18px;
    box-shadow: 0 6px 16px rgba(99,102,241,.32);
    overflow:hidden;
}
.pos-brand-logo img{ width:100%; height:100%; object-fit:cover; }
.pos-brand-text h1{
    font-size: 16px; font-weight: 800; line-height:1.1;
    margin:0; letter-spacing:-.01em; color: var(--da3-fg1);
}
.pos-brand-text small{
    display:block; font-size: 11px; color: var(--da3-fg3);
    margin-top:1px; font-weight:600; letter-spacing:.04em; text-transform: uppercase;
}
.pos-icon-btn{
    width:40px; height:40px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:10px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
    cursor:pointer;
    transition: .15s;
    position:relative;
    text-decoration:none;
}
.pos-icon-btn:hover{
    background: var(--da3-abg);
    border-color: var(--da3-accent);
    color: var(--da3-accent);
}

/* ── Main grid ─────────────────────────────────────────────────────────── */
.pos-grid{
    display:grid;
    grid-template-columns: 1fr 380px;
    gap: 16px;
    padding: 16px 22px 22px;
    max-width: 1600px;
    margin: 0 auto;
    align-items: start;
}
@media(max-width: 1100px){
    .pos-grid{ grid-template-columns: 1fr; }
    .pos-cart-aside{ display:none; }
}

/* ── Catalog (left) ────────────────────────────────────────────────────── */
.pos-catalog{ min-width:0; }

.pos-section-head{
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: var(--da3-shadow);
    margin-bottom: 14px;
}
.pos-section-head h2{
    font-size: 20px; font-weight: 800; margin:0;
    color: var(--da3-fg1); letter-spacing:-.01em;
}
.pos-section-head p{
    font-size: 12.5px; margin: 3px 0 0; color: var(--da3-fg3); font-weight:600;
}

/* search bar */
.pos-search{
    margin-top: 14px;
    position: relative;
    display:flex; align-items:center;
    background: var(--da3-input-bg);
    border: 1px solid var(--da3-bd);
    border-radius: 11px;
    padding: 0 14px;
    transition: .15s;
}
.pos-search:focus-within{
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px var(--da3-abg);
}
.pos-search i{ color: var(--da3-fg3); font-size: 14px; }
.pos-search input{
    flex:1;
    background: transparent;
    border: 0;
    outline: 0;
    height: 44px;
    padding: 0 12px;
    color: var(--da3-fg1);
    font-size: 14px; font-weight: 500;
}
.pos-search input::placeholder{ color: var(--da3-fg3); }

/* category pills */
.pos-cats{
    display:flex; gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    margin: 14px -2px 0;
    scroll-snap-type: x mandatory;
    -ms-overflow-style:none; scrollbar-width: thin;
}
.pos-cats::-webkit-scrollbar{ height: 4px; }
.pos-cats::-webkit-scrollbar-thumb{ background: var(--da3-bd); border-radius: 4px; }

.pos-cat{
    flex-shrink: 0;
    display:inline-flex; align-items:center; gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--da3-pill-bg);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: .15s;
    text-decoration: none;
    user-select: none;
    scroll-snap-align: start;
}
.pos-cat:hover{
    border-color: var(--da3-accent);
    color: var(--da3-accent);
}
.pos-cat.active{
    background: linear-gradient(135deg, var(--da3-accent), var(--da3-accent2));
    border-color: var(--da3-accent);
    color: #fff;
    box-shadow: 0 6px 16px rgba(99,102,241,.32);
}
.pos-cat .cat-img{
    width: 22px; height: 22px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--da3-bg2);
}
.pos-cat.active .cat-img{ box-shadow: 0 0 0 1px rgba(255,255,255,.25); }

/* ── Product grid ──────────────────────────────────────────────────────── */
.pos-products-wrap{
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 14px;
    padding: 16px;
    box-shadow: var(--da3-shadow);
    min-height: 320px;
}
.pos-products{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.pos-product{
    position: relative;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: .2s cubic-bezier(.16,1,.3,1);
    display:flex; flex-direction: column;
}
.pos-product:hover{
    transform: translateY(-2px);
    border-color: var(--da3-accent);
    box-shadow: 0 8px 22px rgba(99,102,241,.18);
}
.pos-product.in-cart{
    border-color: var(--da3-success);
    background: linear-gradient(180deg, var(--da3-success-bg), var(--da3-bg2) 60%);
}

.pos-product-thumb{
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--da3-bg);
    display: block;
}
.pos-product-body{
    padding: 10px 11px 12px;
    flex: 1;
    display:flex; flex-direction: column;
    gap: 6px;
}
.pos-product-name{
    font-size: 13px; font-weight: 700; color: var(--da3-fg1);
    line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
    margin: 0;
}
.pos-product-foot{
    margin-top: auto;
    display:flex; align-items:center; justify-content:space-between;
    gap: 6px;
}
.pos-product-price{
    font-size: 14px; font-weight: 800; color: var(--da3-accent);
    letter-spacing: -.01em;
    margin: 0;
}
body:not(.dark-mode) .pos-product-price{ color: var(--da3-accent2); }

.pos-add-btn{
    width: 32px; height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--da3-accent), var(--da3-accent2));
    color: #fff;
    border: 0;
    display:inline-flex; align-items:center; justify-content:center;
    font-size: 13px;
    cursor: pointer;
    transition: .15s;
    box-shadow: 0 4px 12px rgba(99,102,241,.32);
}
.pos-add-btn:hover{ transform: scale(1.06); }
.pos-add-btn:active{ transform: scale(.94); }
.pos-add-btn .spinner{
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: posSpin .6s linear infinite;
}
@keyframes posSpin{ to{ transform: rotate(360deg); } }

/* ── Empty state ───────────────────────────────────────────────────────── */
.pos-empty{
    grid-column: 1/-1;
    text-align: center;
    padding: 40px 20px;
    color: var(--da3-fg3);
}
.pos-empty i{ font-size: 42px; opacity: .35; margin-bottom: 10px; display:block; }
.pos-empty p{ margin:0; font-size: 14px; font-weight: 600; }

/* ── Cart aside (right) ────────────────────────────────────────────────── */
.pos-cart-aside{
    position: sticky;
    top: 80px;
    height: calc(100vh - 96px);
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 14px;
    box-shadow: var(--da3-shadow);
    display:flex; flex-direction: column;
    overflow: hidden;
}

/* ── Modal styling override (da3 token aligned) ────────────────────────── */
.pos-shell .modal-content{
    background: var(--da3-card);
    color: var(--da3-fg1);
    border: 1px solid var(--da3-bd);
    border-radius: 16px;
    box-shadow: var(--da3-shadow-lg);
}
.pos-shell .modal-header,
.pos-shell .modal-footer{
    border-color: var(--da3-line);
    padding: 16px 20px;
}
.pos-shell .modal-body{ padding: 20px; }
.pos-shell .modal-title{
    font-size: 16px; font-weight: 800; color: var(--da3-fg1);
    letter-spacing: -.01em;
}
body.dark-mode .pos-shell .btn-close{
    filter: invert(1) grayscale(1) opacity(.85);
}

/* ── Toastr override - sit below sticky header ─────────────────────────── */
#toast-container.toast-top-right{
    top: 72px !important;
}
@media(max-width: 1100px){
    .pos-mobile-cart-fab{ display:inline-flex; }
}
.pos-shell .offcanvas-header{
    border-bottom: 1px solid var(--da3-line);
    padding: 16px 20px;
}
.pos-shell .offcanvas-body{ padding: 0; display:flex; flex-direction: column; }

/* ── RTL fa-arrow flip ─────────────────────────────────────────────────── */
html[dir="rtl"] .pos-shell .fa-arrow-right,
html[dir="rtl"] .pos-shell .fa-arrow-left,
html[dir="rtl"] .pos-shell .fa-chevron-right,
html[dir="rtl"] .pos-shell .fa-chevron-left{ transform: scaleX(-1); }

/* ── Spinner overlay ───────────────────────────────────────────────────── */
.pos-loading-overlay{
    position: absolute; inset: 0;
    background: rgba(0,0,0,.4);
    display: none;
    align-items:center; justify-content:center;
    border-radius: inherit;
    z-index: 5;
}
.pos-loading-overlay.show{ display: flex; }
.pos-loading-overlay .pl-spinner{
    width: 36px; height: 36px;
    border: 3px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: posSpin .7s linear infinite;
}


/* ──────────────────────────────────────────────────────────
   SECTION 2: PAYMENT MODAL (admin/pos/index — block 2)
   ────────────────────────────────────────────────────────── */
.pos-shell .pay-card-grid{
        display:grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
    .pos-shell .pay-card{
        position:relative;
        background: var(--da3-bg2);
        border: 2px solid var(--da3-bd);
        border-radius: 12px;
        padding: 18px 12px;
        text-align: center;
        cursor: pointer;
        transition: .15s;
        color: var(--da3-fg1);
    }
    .pos-shell .pay-card:hover{
        border-color: var(--da3-accent);
        background: var(--da3-abg);
    }
    .pos-shell .pay-card.is-selected{
        border-color: var(--da3-accent);
        background: var(--da3-abg);
        box-shadow: 0 4px 14px rgba(99,102,241,.18);
    }
    .pos-shell .pay-card i.pay-card-ico{
        font-size: 26px;
        color: var(--da3-accent);
        margin-bottom: 8px;
        display:block;
    }
    .pos-shell .pay-card img.pay-card-img{
        height: 42px; width:auto; margin: 0 auto 6px; display:block; object-fit:contain;
    }
    .pos-shell .pay-card-label{
        font-size: 13px; font-weight: 700;
        color: var(--da3-fg1);
    }
    .pos-shell .pay-section-title{
        font-size: 11px; font-weight: 800; letter-spacing: .08em;
        color: var(--da3-fg2); text-transform: uppercase;
        margin: 0 0 10px;
    }


/* ──────────────────────────────────────────────────────────
   SECTION 3: CART VIEW PARTIAL (admin/pos/cartview)
   ────────────────────────────────────────────────────────── */
/* ── Scoped to the cart partial — looks identical in desktop sticky aside and offcanvas ── */
.pos-cart{
    display:flex; flex-direction: column;
    height: 100%;
    background: transparent;
    color: var(--da3-fg1, #f4f4f5);
}
.pos-cart-head{
    padding: 16px 18px;
    border-bottom: 1px solid var(--da3-line, rgba(255,255,255,.06));
}
.pos-cart-head-row{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom: 10px;
}
.pos-cart-head h3{
    font-size: 15px; font-weight: 800; margin:0;
    color: var(--da3-fg1, #f4f4f5);
    display:inline-flex; align-items:center; gap:8px;
    letter-spacing:-.01em;
}
.pos-cart-head h3 i{ color: var(--da3-accent, #6366f1); }
.pos-cart-count{
    font-size: 11px; font-weight: 800;
    padding: 3px 9px;
    border-radius: 99px;
    background: var(--da3-abg, rgba(99,102,241,.14));
    color: var(--da3-accent, #6366f1);
    letter-spacing:.04em;
}
.pos-cart-customer:focus{
    outline:0;
    border-color: var(--da3-accent, #6366f1);
    box-shadow: 0 0 0 3px var(--da3-abg, rgba(99,102,241,.14));
}

/* ── Items scrollable region ─── */
.pos-cart-items{
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 16px;
    min-height: 0;
}
.pos-cart-items::-webkit-scrollbar{ width: 5px; }
.pos-cart-items::-webkit-scrollbar-thumb{ background: var(--da3-bd, rgba(255,255,255,.06)); border-radius: 4px; }

.pos-cart-item{
    display:flex; gap: 11px;
    padding: 10px;
    background: var(--da3-bg2, rgba(255,255,255,.02));
    border: 1px solid var(--da3-bd, rgba(255,255,255,.055));
    border-radius: 12px;
    margin-bottom: 8px;
    transition: .15s;
}
.pos-cart-item:hover{
    border-color: var(--da3-accent, #6366f1);
    background: var(--da3-abg, rgba(99,102,241,.10));
}
.pos-cart-item-thumb{
    width: 52px; height: 52px;
    border-radius: 9px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--da3-bg, #111113);
}
.pos-cart-item-body{
    flex: 1;
    min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.pos-cart-item-top{
    display:flex; align-items: flex-start; justify-content: space-between; gap: 6px;
}
.pos-cart-item-name{
    font-size: 13px; font-weight: 700;
    color: var(--da3-fg1, #f4f4f5);
    margin: 0;
    overflow:hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.pos-cart-item-del{
    background: transparent; border: 0;
    color: var(--da3-fg3, #71717a);
    font-size: 12px;
    padding: 0; cursor: pointer;
    width: 24px; height: 24px;
    border-radius: 6px;
    display:inline-flex; align-items:center; justify-content:center;
    flex-shrink: 0;
    transition: .15s;
}
.pos-cart-item-del:hover{
    background: var(--da3-danger-bg, rgba(239,68,68,.14));
    color: var(--da3-danger, #ef4444);
}
.pos-cart-item-meta{
    font-size: 11px;
    color: var(--da3-fg3, #71717a);
    line-height: 1.4;
}
.pos-cart-item-meta strong{ color: var(--da3-fg2, #a1a1aa); font-weight: 600; }
.pos-cart-item-foot{
    display:flex; align-items: center; justify-content: space-between;
    margin-top: 4px;
    gap: 8px;
}
.pos-cart-item-price{
    font-size: 13px; font-weight: 800;
    color: var(--da3-accent, #6366f1);
    margin: 0;
}
body:not(.dark-mode) .pos-cart-item-price{ color: #4f46e5; }

.pos-qty{
    display:inline-flex; align-items:center; gap: 0;
    background: var(--da3-bg, #111113);
    border: 1px solid var(--da3-bd, rgba(255,255,255,.055));
    border-radius: 8px;
    overflow:hidden;
}
.pos-qty a{
    width: 26px; height: 26px;
    display:inline-flex; align-items:center; justify-content:center;
    color: var(--da3-fg1, #f4f4f5);
    cursor: pointer;
    transition: .15s;
}
.pos-qty a:hover{ background: var(--da3-abg, rgba(99,102,241,.14)); color: var(--da3-accent, #6366f1); }
.pos-qty input{
    width: 30px; height: 26px;
    text-align: center;
    background: transparent; border: 0;
    color: var(--da3-fg1, #f4f4f5);
    font-size: 12px; font-weight: 700;
    pointer-events: none;
}

/* ── Empty cart visual ─── */
.pos-cart-empty{
    text-align: center;
    padding: 40px 20px;
    color: var(--da3-fg3, #71717a);
}
.pos-cart-empty i{
    font-size: 42px; opacity: .35; margin-bottom: 10px; display:block;
    color: var(--da3-fg3, #71717a);
}
.pos-cart-empty p{ margin: 0; font-size: 13px; font-weight: 600; }

/* ── Summary block ─── */
.pos-cart-summary{
    border-top: 1px solid var(--da3-line, rgba(255,255,255,.06));
    padding: 14px 16px;
    background: var(--da3-bg2, rgba(255,255,255,.02));
    flex-shrink: 0;
}
.pos-discount-row{
    display:flex; align-items:center;
    background: var(--da3-input-bg, rgba(255,255,255,.025));
    border: 1px solid var(--da3-bd, rgba(255,255,255,.055));
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    transition: .15s;
}
.pos-discount-row:focus-within{
    border-color: var(--da3-accent, #6366f1);
    box-shadow: 0 0 0 3px var(--da3-abg, rgba(99,102,241,.14));
}
.pos-discount-row input{
    flex: 1;
    background: transparent;
    border: 0; outline: 0;
    height: 38px;
    padding: 0 12px;
    color: var(--da3-fg1, #f4f4f5);
    font-size: 13px; font-weight: 600;
}
.pos-discount-row input::placeholder{ color: var(--da3-fg3, #71717a); }
.pos-totals-row{
    display:flex; align-items:center; justify-content:space-between;
    padding: 4px 0;
    font-size: 13px;
    color: var(--da3-fg2, #a1a1aa);
}
.pos-totals-row strong{ color: var(--da3-fg1, #f4f4f5); font-weight: 700; }
.pos-totals-row.grand{
    border-top: 1px dashed var(--da3-line, rgba(255,255,255,.06));
    margin-top: 6px;
    padding-top: 10px;
}
.pos-totals-row.grand span:first-child{
    font-size: 14px; font-weight: 800; color: var(--da3-success, #10b981);
}
.pos-totals-row.grand strong{
    font-size: 18px; font-weight: 900; color: var(--da3-success, #10b981); letter-spacing:-.01em;
}
body:not(.dark-mode) .pos-totals-row.grand span:first-child,
body:not(.dark-mode) .pos-totals-row.grand strong{ color: #047857; }

.pos-cart-footer-actions{
    display:flex; gap: 8px;
    padding: 14px 16px;
    border-top: 1px solid var(--da3-line, rgba(255,255,255,.06));
    flex-shrink: 0;
    background: var(--da3-card, #1c1c1f);
}
.pos-btn-place{
    flex: 2;
    padding: 12px 18px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--da3-success, #10b981), #059669);
    color: #fff;
    border: 0;
    font-weight: 800; font-size: 14px;
    display:inline-flex; align-items:center; justify-content:center; gap: 7px;
    cursor: pointer; transition: .15s;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(16,185,129,.32);
}
.pos-btn-place:hover{ transform: translateY(-1px); color:#fff; box-shadow: 0 10px 28px rgba(16,185,129,.42); }
.pos-btn-place:disabled, .pos-btn-place.disabled{
    background: var(--da3-bg, rgba(255,255,255,.04));
    color: var(--da3-fg3, #71717a);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}
.pos-btn-empty{
    flex: 1;
    padding: 12px 14px;
    border-radius: 11px;
    background: var(--da3-danger-bg, rgba(239,68,68,.14));
    color: var(--da3-danger, #ef4444);
    border: 1px solid transparent;
    font-weight: 700; font-size: 13px;
    display:inline-flex; align-items:center; justify-content:center; gap: 6px;
    cursor: pointer; transition: .15s;
}
.pos-btn-empty:hover{ background: var(--da3-danger, #ef4444); color: #fff; }
.pos-btn-empty:disabled{
    background: var(--da3-bg, rgba(255,255,255,.04));
    color: var(--da3-fg3, #71717a);
    cursor: not-allowed;
    opacity: .5;
}

/* hidden state inputs - keep them off-screen but still in DOM */
.pos-hidden-fields{ position: absolute; width:0; height:0; opacity:0; pointer-events:none; overflow:hidden; }


/* ──────────────────────────────────────────────────────────
   SECTION 4: INVOICE BODY PARTIAL (admin/pos/invoice-body)
   ────────────────────────────────────────────────────────── */
.pos-inv-head{ text-align:center; margin-bottom: 16px; }
.pos-inv-head h3{
    font-size: 17px; font-weight: 800; margin: 0 0 4px;
    color: var(--da3-fg1, #f4f4f5);
}
.pos-inv-head small{ color: var(--da3-fg3, #71717a); font-size: 11.5px; font-weight: 600; }

.pos-inv-meta{
    background: var(--da3-bg2, rgba(255,255,255,.025));
    border: 1px solid var(--da3-bd, rgba(255,255,255,.055));
    border-radius: 11px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 12.5px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
}
.pos-inv-meta div span{
    color: var(--da3-fg3, #71717a);
    font-size: 11px; font-weight: 700; letter-spacing:.04em; text-transform: uppercase;
    display: block;
}
.pos-inv-meta div strong{
    color: var(--da3-fg1, #f4f4f5);
    font-size: 12.5px; font-weight: 700;
    word-break: break-all;
}
.pos-inv-line{
    border-top: 1px dashed var(--da3-line, rgba(255,255,255,.06));
    padding-top: 12px; margin-top: 12px;
}
.pos-inv-item{ margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--da3-line); }
.pos-inv-item:last-child{ border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.pos-inv-item-name{ font-size: 13px; font-weight: 800; color: var(--da3-fg1); margin-bottom: 6px; }
.pos-inv-extra{ font-size: 11.5px; color: var(--da3-fg3); margin: 2px 0; }
.pos-inv-extra strong{ color: var(--da3-fg2); font-weight: 600; }
.pos-inv-row{
    display:flex; align-items:center; justify-content:space-between;
    font-size: 12.5px;
    padding: 3px 0;
    color: var(--da3-fg2, #a1a1aa);
}
.pos-inv-row strong{ color: var(--da3-fg1); font-weight: 700; }
.pos-inv-total{
    background: var(--da3-bg2, rgba(255,255,255,.025));
    border: 1px solid var(--da3-bd, rgba(255,255,255,.055));
    border-radius: 11px;
    padding: 12px 14px;
    margin-top: 14px;
}
.pos-inv-total .pos-inv-row.grand{
    border-top: 1px dashed var(--da3-line, rgba(255,255,255,.06));
    margin-top: 6px;
    padding-top: 8px;
}
.pos-inv-total .pos-inv-row.grand span:first-child{
    color: var(--da3-success, #10b981); font-weight: 800; font-size: 13.5px;
}
.pos-inv-total .pos-inv-row.grand strong{
    color: var(--da3-success, #10b981); font-weight: 900; font-size: 17px;
}
body:not(.dark-mode) .pos-inv-total .pos-inv-row.grand span:first-child,
body:not(.dark-mode) .pos-inv-total .pos-inv-row.grand strong{ color: #047857; }
.pos-inv-thanks{
    text-align: center;
    color: var(--da3-fg2);
    font-weight: 700;
    margin: 14px 0 4px;
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   Product Wizard Modern
   Merged from: product-wizard-modern.css
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   Product Wizard — da3g Design System Bridge
   ───────────────────────────────────────────────────────────────────────
   All colors via --da3g-* variables (defined in default.blade.php).
   Dark / light mode is automatic — no body.dark-mode overrides needed.
   Namespace: .wm-* (Wizard Modern)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Token bridge: map --wm-* → --da3g-* ───────────────────────────── */
.wm-wizard {
    --wm-bg:           var(--da3g-bg2);
    --wm-card:         var(--da3g-card);
    --wm-card-soft:    var(--da3g-bg2);
    --wm-bd:           var(--da3g-bd);
    --wm-bd-strong:    var(--da3g-bd);
    --wm-line:         var(--da3g-bd);
    --wm-hover:        var(--da3g-hover, rgba(255,255,255,.04));
    --wm-fg1:          var(--da3g-fg1);
    --wm-fg2:          var(--da3g-fg2);
    --wm-fg3:          var(--da3g-fg3);
    --wm-accent:       var(--da3g-accent, #3b82f6);
    --wm-accent-2:     var(--da3g-accent, #3b82f6);
    --wm-accent-soft:  var(--da3g-abg,  rgba(59,130,246,.12));
    --wm-accent-glow:  var(--da3g-abg,  rgba(59,130,246,.22));
    --wm-success:      var(--da3g-success, #10b981);
    --wm-warn:         var(--da3g-warn,    #f59e0b);
    --wm-danger:       var(--da3g-danger,  #ef4444);
    --wm-shadow:       var(--da3g-shadow,  0 1px 3px rgba(0,0,0,.12));
    --wm-shadow-lg:    0 8px 32px rgba(0,0,0,.14);
    --wm-gap:          14px;
    --wm-gap-lg:       20px;
    --wm-r:            12px;
    --wm-r-sm:         8px;
    --wm-r-pill:       999px;
    --wm-side-w:       300px;

    color:       var(--wm-fg1);
    font-family: 'Zain', 'Inter', system-ui, -apple-system, sans-serif;
    min-height:  100vh;
    padding:     0 0 100px;
}

/* ── Action bar ─────────────────────────────────────────────────────── */
.wm-actionbar {
    background:    var(--wm-card);
    border-bottom: 1px solid var(--wm-bd);
    padding:       13px 24px;
    display:       flex;
    align-items:   center;
    gap:           10px;
    box-shadow:    var(--wm-shadow);
}
.wm-actionbar--top {
    position:        sticky;
    top:             0;
    z-index:         30;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.wm-actionbar--bottom {
    margin-top:    var(--wm-gap-lg);
    border-radius: var(--wm-r);
    border:        1px solid var(--wm-bd);
    box-shadow:    var(--wm-shadow-lg);
}
@media (max-width: 700px) {
    .wm-actionbar { padding: 10px 14px; flex-wrap: wrap; }
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.wm-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           7px;
    padding:       9px 16px;
    border-radius: var(--wm-r-sm);
    border:        1px solid transparent;
    font-size:     13px;
    font-weight:   700;
    cursor:        pointer;
    font-family:   inherit;
    transition:    transform .15s, box-shadow .15s, background .15s;
    text-decoration: none;
    white-space:   nowrap;
}
.wm-btn:hover  { transform: translateY(-1px); }
.wm-btn:active { transform: translateY(0); }

.wm-btn--primary {
    background:   var(--wm-accent);
    color:        #fff;
    border-color: var(--wm-accent);
    box-shadow:   0 2px 10px var(--wm-accent-glow);
}
.wm-btn--primary:hover { filter: brightness(1.08); box-shadow: 0 6px 18px var(--wm-accent-glow); }

.wm-btn--secondary {
    background:   var(--wm-card);
    border-color: var(--wm-bd);
    color:        var(--wm-fg1);
}
.wm-btn--secondary:hover { background: var(--wm-hover); }

.wm-btn--ghost {
    background: transparent;
    color:      var(--wm-fg2);
}
.wm-btn--ghost:hover { color: var(--wm-fg1); background: var(--wm-hover); }

.wm-btn--back { margin-inline-end: auto; }

.wm-btn-ico {
    width:           22px; height: 22px;
    border-radius:   5px;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(255,255,255,.18);
    font-size:       11px;
}
.wm-btn--primary .wm-btn-ico i { color: #fff; }

/* ── Stepper ────────────────────────────────────────────────────────── */
.wm-stepper {
    padding:       18px 24px 14px;
    background:    var(--wm-card);
    border-bottom: 1px solid var(--wm-bd);
}
.wm-stepper-track {
    display:     flex;
    align-items: flex-start;
    gap:         4px;
    list-style:  none;
    margin: 0; padding: 0;
}
.wm-step { flex: 1; min-width: 0; position: relative; }

.wm-step:not(:last-child)::after {
    content:            '';
    position:           absolute;
    top:                18px;
    inset-inline-start: 50%;
    inset-inline-end:   -50%;
    height:             2px;
    background-image:   linear-gradient(to right, var(--wm-bd) 50%, transparent 0);
    background-size:    7px 2px;
    background-repeat:  repeat-x;
    z-index:            0;
}
.wm-step--done:not(:last-child)::after {
    background-image: none;
    background-color: var(--wm-accent);
}

.wm-step-btn {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            7px;
    background:     transparent;
    border:         0;
    cursor:         pointer;
    width:          100%;
    padding:        0;
    color:          var(--wm-fg2);
    transition:     color .15s;
}
.wm-step-btn:disabled             { cursor: not-allowed; opacity: .55; }
.wm-step-btn:not(:disabled):hover { color: var(--wm-fg1); }

.wm-step-circle {
    width:           36px; height: 36px;
    border-radius:   50%;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-weight:     800;
    font-size:       13px;
    background:      var(--wm-card-soft);
    border:          2px solid var(--wm-bd);
    color:           var(--wm-fg2);
    transition:      all .2s;
    flex-shrink:     0;
}
.wm-step--current .wm-step-circle {
    background:   var(--wm-accent);
    color:        #fff;
    border-color: transparent;
    box-shadow:   0 0 0 4px var(--wm-accent-soft);
}
.wm-step--done .wm-step-circle {
    background:   var(--wm-accent);
    color:        #fff;
    border-color: var(--wm-accent);
    opacity:      .85;
}

.wm-step-label {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    line-height:    1.2;
    gap:            2px;
}
.wm-step-title {
    font-size:   12px;
    font-weight: 700;
    color:       var(--wm-fg1);
    white-space: nowrap;
}
.wm-step--current .wm-step-title { color: var(--wm-accent); }
.wm-step--pending .wm-step-title { color: var(--wm-fg2); }
.wm-step-desc {
    font-size:     10.5px;
    color:         var(--wm-fg3);
    font-weight:   500;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     120px;
}

.wm-stepper-bar {
    margin-top:    16px;
    height:        3px;
    background:    var(--wm-bd);
    border-radius: var(--wm-r-pill);
    overflow:      hidden;
}
.wm-stepper-bar-fill {
    height:        100%;
    background:    var(--wm-accent);
    border-radius: inherit;
    transition:    width .4s cubic-bezier(.4,0,.2,1);
}

@media (max-width: 760px) {
    .wm-stepper   { padding: 14px 14px 12px; }
    .wm-step-desc { display: none; }
    .wm-step-circle { width: 30px; height: 30px; font-size: 12px; }
    .wm-step-title  { font-size: 11px; }
}

/* ── Two-column layout ──────────────────────────────────────────────── */
.wm-layout {
    display:               grid;
    grid-template-columns: 1fr var(--wm-side-w);
    gap:                   var(--wm-gap-lg);
    padding:               var(--wm-gap-lg) 24px;
    align-items:           flex-start;
}
@media (max-width: 1080px) {
    .wm-layout { grid-template-columns: 1fr; }
    .wm-sidebar { order: -1; }
}
@media (max-width: 700px) {
    .wm-layout { padding: var(--wm-gap) 12px; }
}

/* ── Main panel ─────────────────────────────────────────────────────── */
.wm-main {
    background:    var(--wm-card);
    border:        1px solid var(--wm-bd);
    border-radius: var(--wm-r);
    padding:       22px 24px;
    box-shadow:    var(--wm-shadow);
    min-width:     0;
}
@media (max-width: 700px) { .wm-main { padding: 16px; } }

/* ── Per-step header ────────────────────────────────────────────────── */
.wm-step-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             14px;
    padding-bottom:  16px;
    margin-bottom:   18px;
    border-bottom:   1px solid var(--wm-bd);
}
.wm-step-h {
    font-size:      18px;
    font-weight:    800;
    color:          var(--wm-fg1);
    letter-spacing: -.015em;
    margin:         0 0 3px;
    line-height:    1.25;
}
.wm-step-sub {
    font-size:   12.5px;
    color:       var(--wm-fg2);
    margin:      0;
    font-weight: 500;
    line-height: 1.5;
}
.wm-step-header-ico {
    width:           40px; height: 40px;
    border-radius:   var(--wm-r-sm);
    background:      var(--wm-accent-soft);
    color:           var(--wm-accent);
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-size:       17px;
    flex-shrink:     0;
}

/* ── Sidebar ────────────────────────────────────────────────────────── */
.wm-sidebar {
    display:        flex;
    flex-direction: column;
    gap:            var(--wm-gap);
    position:       sticky;
    top:            72px;
}
@media (max-width: 1080px) { .wm-sidebar { position: static; } }

.wm-card {
    background:    var(--wm-card);
    border:        1px solid var(--wm-bd);
    border-radius: var(--wm-r);
    padding:       14px 16px;
    box-shadow:    var(--wm-shadow);
}
.wm-card-head {
    display:        flex;
    align-items:    center;
    gap:            7px;
    font-size:      11px;
    font-weight:    700;
    color:          var(--wm-fg3);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom:  12px;
}
.wm-card-head i { font-size: 11px; }

/* Live preview */
.wm-preview-image {
    width:           100%;
    aspect-ratio:    1;
    background:      var(--wm-card-soft);
    border:          1px dashed var(--wm-bd);
    border-radius:   var(--wm-r-sm);
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
    margin-bottom:   12px;
}
.wm-preview-image img { width: 100%; height: 100%; object-fit: cover; }
.wm-preview-image-empty {
    display:        flex;
    flex-direction: column;
    gap:            5px;
    align-items:    center;
    color:          var(--wm-fg3);
    font-size:      11.5px;
}
.wm-preview-image-empty i { font-size: 22px; opacity: .5; }

.wm-preview-body  { text-align: center; }
.wm-preview-name  {
    font-size:          13.5px;
    font-weight:        700;
    color:              var(--wm-fg1);
    line-height:        1.3;
    margin-bottom:      6px;
    overflow:           hidden;
    text-overflow:      ellipsis;
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.wm-preview-price {
    font-size:            19px;
    font-weight:          800;
    color:                var(--wm-accent);
    font-variant-numeric: tabular-nums;
    margin-bottom:        8px;
}
.wm-preview-currency {
    font-size:           11.5px;
    font-weight:         600;
    color:               var(--wm-fg2);
    margin-inline-start: 2px;
}
.wm-preview-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    padding:       3px 10px;
    border-radius: var(--wm-r-pill);
    font-size:     11px;
    font-weight:   700;
    background:    var(--da3g-danger-bg, rgba(239,68,68,.12));
    color:         var(--da3g-danger, #ef4444);
}
.wm-preview-badge[data-preview-status="active"] {
    background: var(--da3g-success-bg, rgba(16,185,129,.12));
    color:      var(--da3g-success, #10b981);
}
.wm-preview-dot {
    width:         5px; height: 5px;
    border-radius: 50%;
    background:    currentColor;
}

/* Quick tip */
.wm-tip {
    background:   var(--da3g-warn-bg, rgba(245,158,11,.08));
    border-color: rgba(245,158,11,.25);
}
.wm-tip-head { color: var(--da3g-warn, #f59e0b); }
.wm-tip-ico  {
    width:           24px; height: 24px;
    border-radius:   7px;
    background:      rgba(245,158,11,.15);
    color:           var(--da3g-warn, #f59e0b);
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-size:       12px;
}
.wm-tip-title {
    text-transform: none;
    letter-spacing: 0;
    font-size:      13px;
    font-weight:    800;
    color:          var(--wm-fg1);
}
.wm-tip-body {
    font-size:   12px;
    color:       var(--wm-fg2);
    line-height: 1.55;
    margin:      0;
}

/* Progress card */
.wm-progress-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   10px;
}
.wm-progress-counter {
    font-size:            18px;
    font-weight:          800;
    color:                var(--wm-fg1);
    font-variant-numeric: tabular-nums;
}
.wm-progress-counter strong { color: var(--wm-accent); }
.wm-progress-label {
    font-size:   11px;
    font-weight: 600;
    color:       var(--wm-fg2);
}
.wm-progress-bar {
    height:        4px;
    background:    var(--wm-bd);
    border-radius: var(--wm-r-pill);
    overflow:      hidden;
}
.wm-progress-bar-fill {
    height:        100%;
    background:    var(--wm-accent);
    border-radius: inherit;
    transition:    width .45s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════════════════════════════════
   Step content — cards, form controls, etc. (step partials)
   ══════════════════════════════════════════════════════════════════════ */

.wm-step-content .widget-card,
.wm-step-content .card,
.wm-step-content .media-card {
    background:    var(--wm-card);
    border:        1px solid var(--wm-bd);
    border-radius: var(--wm-r);
    padding:       18px 20px;
    margin-bottom: var(--wm-gap);
    box-shadow:    var(--wm-shadow);
}
.wm-step-content .card-body   { background: transparent; padding: 0; }

.wm-step-content .widget-title,
.wm-step-content .section-title {
    font-size:     13px;
    font-weight:   800;
    color:         var(--wm-fg1);
    margin-bottom: 14px;
    display:       flex;
    align-items:   center;
    gap:           6px;
}

/* Hide the step partial's own sub-header — wm-step-header covers it */
.wm-step-content .step-header { display: none; }

/* Form controls */
.wm-form .form-control,
.wm-form .form-select,
.wm-step-content .form-control,
.wm-step-content .form-select,
.wm-step-content textarea {
    background:    var(--wm-card-soft);
    border:        1px solid var(--wm-bd);
    color:         var(--wm-fg1);
    border-radius: var(--wm-r-sm);
    height:        40px;
    font-size:     13.5px;
    padding:       8px 12px;
    transition:    border-color .15s, box-shadow .15s;
    font-family:   inherit;
    width:         100%;
    margin-bottom: 0;
}
.wm-step-content textarea { height: auto; min-height: 110px; resize: vertical; }

.wm-form .form-control:focus,
.wm-form .form-select:focus,
.wm-step-content .form-control:focus,
.wm-step-content .form-select:focus,
.wm-step-content textarea:focus {
    border-color: var(--wm-accent);
    box-shadow:   0 0 0 3px var(--wm-accent-soft);
    outline:      none;
    background:   var(--wm-card);
}
.wm-step-content .form-control::placeholder,
.wm-step-content textarea::placeholder { color: var(--wm-fg3); opacity: 1; }

.wm-step-content .form-label,
.wm-form label {
    color:         var(--wm-fg2);
    font-size:     12.5px;
    font-weight:   600;
    margin-bottom: 5px;
    display:       block;
}
.wm-step-content small,
.wm-step-content .text-muted { color: var(--wm-fg3) !important; font-size: 11px; }
.wm-step-content .form-check-input { accent-color: var(--wm-accent); }
.wm-step-content .form-check-label { color: var(--wm-fg2); font-size: 13px; }

/* Validation states */
.field-error {
    display:     block;
    color:       var(--da3g-danger, #ef4444);
    font-size:   11.5px;
    font-weight: 600;
    margin-top:  3px;
}
.wm-step-content .form-control.is-invalid { border-color: var(--da3g-danger, #ef4444) !important; }
.wm-step-content .form-control.is-valid   { border-color: var(--da3g-success, #10b981) !important; }

/* Lang badges */
.lang-tag {
    display:           inline-block;
    padding:           2px 7px;
    border-radius:     5px;
    font-size:         10.5px;
    font-weight:       700;
    background:        var(--wm-card-soft);
    border:            1px solid var(--wm-bd);
    color:             var(--wm-fg2);
    margin-inline-end: 6px;
    vertical-align:    middle;
    letter-spacing:    .02em;
}
.lang-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    padding:       3px 9px;
    border-radius: 6px;
    font-size:     11px;
    font-weight:   700;
    background:    var(--wm-card-soft);
    border:        1px solid var(--wm-bd);
    color:         var(--wm-fg2);
}

/* Upload box */
.upload-box {
    display:         flex;
    justify-content: center;
    align-items:     center;
    border:          2px dashed var(--wm-bd);
    border-radius:   var(--wm-r-sm);
    padding:         24px 16px;
    background:      var(--wm-card-soft);
    cursor:          pointer;
    transition:      .2s;
    width:           100%;
}
.upload-box:hover { border-color: var(--wm-accent); background: var(--wm-accent-soft); }
.upload-content   { text-align: center; color: var(--wm-fg2); }
.upload-content i { font-size: 24px; color: var(--wm-accent); margin-bottom: 6px; display: block; }
.upload-text strong { font-size: 12.5px; font-weight: 700; color: var(--wm-fg1); display: block; }
.upload-text span   { font-size: 11px; color: var(--wm-fg3); margin-top: 2px; display: block; }

/* Gallery */
.gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.preview-item {
    width:         78px; height: 78px;
    border-radius: var(--wm-r-sm);
    overflow:      hidden;
    border:        1px solid var(--wm-bd);
    position:      relative;
    background:    var(--wm-card-soft);
    transition:    border-color .15s, transform .15s;
}
.preview-item:hover { border-color: var(--wm-accent); transform: scale(1.04); }
.preview-item img   { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-remove {
    position:        absolute;
    top: 3px; inset-inline-end: 3px;
    width: 17px; height: 17px;
    background:      rgba(239,68,68,.85);
    color:           #fff;
    border-radius:   50%;
    font-size:       12px;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    line-height:     1;
}
.preview-remove:hover { background: #ef4444; }

/* AI button */
.ai-btn {
    display:       flex;
    align-items:   center;
    gap:           7px;
    border:        none;
    padding:       7px 12px;
    border-radius: var(--wm-r-sm);
    font-size:     12px;
    font-weight:   700;
    cursor:        pointer;
    color:         #fff;
    background:    linear-gradient(135deg, #0f172a, #1e293b, #334155);
    box-shadow:    0 3px 10px rgba(15,23,42,.2);
    transition:    .2s;
    white-space:   nowrap;
    font-family:   inherit;
}
.ai-btn .icon { font-size: 12px; }
.desc-header  { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }

/* Radio tooltip */
.radio-wrapper { position: relative; display: inline-block; }
.radio-tooltip {
    display:       none;
    position:      absolute;
    bottom:        110%; left: 50%;
    transform:     translateX(-50%);
    background:    var(--wm-card);
    border:        1px solid var(--wm-bd);
    color:         var(--wm-fg2);
    font-size:     11px;
    padding:       5px 9px;
    border-radius: 7px;
    white-space:   nowrap;
    box-shadow:    var(--wm-shadow);
    z-index:       10;
    margin-bottom: 5px;
    pointer-events: none;
}
.radio-wrapper:hover .radio-tooltip { display: block; }

/* Variants table */
.variants-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.variants-table thead th {
    background:     var(--wm-card-soft);
    color:          var(--wm-fg3);
    font-size:      10.5px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding:        8px 10px;
    border-bottom:  1px solid var(--wm-bd);
    white-space:    nowrap;
    text-align:     start;
}
.variants-table tbody td {
    padding:        6px 10px;
    border-bottom:  1px solid var(--wm-bd);
    vertical-align: middle;
    color:          var(--wm-fg1);
}
.variants-table tbody tr:last-child td { border-bottom: none; }
.variants-table .form-control { height: 32px; font-size: 12px; padding: 4px 9px; }

.variant-color-dot {
    width: 12px; height: 12px; border-radius: 50%;
    border: 1px solid var(--wm-bd);
    display: inline-block; flex-shrink: 0;
}
.remove-variant-btn,
.remove-extra-btn {
    width:           28px; height: 28px;
    border-radius:   6px;
    border:          1px solid var(--da3g-danger-bg, rgba(239,68,68,.22));
    background:      var(--da3g-danger-bg, rgba(239,68,68,.08));
    color:           var(--da3g-danger, #ef4444);
    cursor:          pointer;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-size:       12px;
    transition:      all .15s;
}
.remove-variant-btn:hover,
.remove-extra-btn:hover { background: var(--da3g-danger, #ef4444); color: #fff; }

/* Extras */
.extra-item           { padding: 10px 0; border-bottom: 1px solid var(--wm-bd); }
.extra-item:last-child { border-bottom: none; }

/* Product type locked card */
.ptype-locked-pill {
    display:             inline-flex;
    align-items:         center;
    gap:                 5px;
    font-size:           10.5px;
    font-weight:         700;
    padding:             3px 9px;
    border-radius:       var(--wm-r-pill);
    background:          rgba(245,158,11,.10);
    color:               #f59e0b;
    border:              1px solid rgba(245,158,11,.22);
    margin-inline-start: 8px;
    vertical-align:      middle;
}
.ptype-locked-card {
    display:             flex;
    align-items:         center;
    gap:                 12px;
    padding:             12px 16px;
    border-radius:       var(--wm-r-sm);
    background:          var(--wm-card-soft);
    border:              1px solid var(--wm-bd);
    border-inline-start: 3px solid var(--wm-accent);
}
.ptype-locked-card.is-digital  { border-inline-start-color: #8b5cf6; }
.ptype-locked-ico {
    width:           38px; height: 38px;
    border-radius:   9px;
    background:      var(--wm-accent-soft);
    color:           var(--wm-accent);
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-size:       16px;
    flex-shrink:     0;
}
.ptype-locked-body { flex: 1; min-width: 0; }
.ptype-locked-body strong { display: block; font-size: 13px; font-weight: 700; color: var(--wm-fg1); margin-bottom: 2px; }
.ptype-locked-body span   { display: block; font-size: 11.5px; color: var(--wm-fg2); line-height: 1.5; }
.ptype-locked-cta {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    padding:         6px 11px;
    border:          1px solid var(--wm-bd);
    background:      var(--wm-card);
    color:           var(--wm-fg2);
    border-radius:   7px;
    font-size:       11px;
    font-weight:     700;
    text-decoration: none;
    transition:      all .15s;
    flex-shrink:     0;
}
.ptype-locked-cta:hover { border-color: var(--wm-accent); color: var(--wm-accent); }

/* Modals */
.modal-content {
    background:    var(--wm-card);
    border:        1px solid var(--wm-bd);
    border-radius: var(--wm-r);
}
.modal-header { border-bottom: 1px solid var(--wm-bd); }
.modal-footer { border-top:    1px solid var(--wm-bd); }
.modal-title  { color: var(--wm-fg1); font-size: 15px; font-weight: 700; }

.wm-step-content .btn-outline-primary {
    border-color: var(--wm-accent);
    color:        var(--wm-accent);
    background:   transparent;
    border-radius: 7px;
    font-size:    12.5px;
    font-weight:  600;
}
.wm-step-content .btn-dark {
    background:   var(--wm-fg1);
    color:        var(--wm-card);
    border-color: var(--wm-fg1);
    border-radius: 7px;
    font-size:    12.5px;
    font-weight:  600;
}
.btn-add-extra {
    background:    var(--wm-accent);
    color:         #fff;
    border:        none;
    border-radius: var(--wm-r-sm);
    padding:       10px 18px;
    font-size:     13px;
    font-weight:   700;
    cursor:        pointer;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    gap:           7px;
    font-family:   inherit;
    width:         100%;
    transition:    filter .15s;
}
.btn-add-extra:hover { filter: brightness(1.08); }

.modern-input {
    background:    var(--wm-card-soft);
    border:        1px solid var(--wm-bd);
    color:         var(--wm-fg1);
    border-radius: var(--wm-r-sm);
    height:        40px;
    padding:       8px 12px;
    font-size:     13.5px;
    transition:    border-color .2s, box-shadow .2s;
    width:         100%;
    font-family:   inherit;
}
.modern-input:focus {
    border-color: var(--wm-accent);
    box-shadow:   0 0 0 3px var(--wm-accent-soft);
    outline:      none;
    background:   var(--wm-card);
}

/* ── Visibility helper ─────────────────────────────────────────────── */
.wm-step-content.d-none { display: none !important; }

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wm-btn, .wm-step-circle,
    .wm-stepper-bar-fill, .wm-progress-bar-fill { transition: none !important; }
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .wm-step-content .ptype-locked-card { flex-wrap: wrap; }
    .ptype-locked-cta { width: 100%; justify-content: center; }
}

/* ── Page header (dashboard-style title bar above stepper) ─────────── */
.wm-page-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    padding:         18px 24px 14px;
    border-bottom:   1px solid var(--wm-bd);
    background:      var(--wm-card);
}
.wm-page-header-start { display: flex; flex-direction: column; gap: 4px; }
.wm-breadcrumb {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   11.5px;
    color:       var(--wm-fg3);
}
.wm-breadcrumb a {
    color:           var(--wm-accent);
    text-decoration: none;
    font-weight:     600;
}
.wm-breadcrumb a:hover { text-decoration: underline; }
.wm-breadcrumb i { font-size: 9px; opacity: .6; }
.wm-page-title {
    font-size:      20px;
    font-weight:    800;
    color:          var(--wm-fg1);
    margin:         0;
    display:        flex;
    align-items:    center;
    gap:            10px;
    line-height:    1.25;
    letter-spacing: -.02em;
}
.wm-mode-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    padding:        3px 10px;
    border-radius:  var(--wm-r-pill);
    font-size:      11.5px;
    font-weight:    700;
    letter-spacing: 0;
}
.wm-mode-badge--add {
    background: var(--da3g-success-bg, rgba(16,185,129,.12));
    color:      var(--da3g-success,    #10b981);
}
.wm-mode-badge--edit {
    background: var(--da3g-warn-bg, rgba(245,158,11,.12));
    color:      var(--da3g-warn,    #f59e0b);
}
.wm-back-link {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         8px 16px;
    border-radius:   var(--wm-r-sm);
    border:          1px solid var(--wm-bd);
    background:      var(--wm-card-soft);
    color:           var(--wm-fg2);
    font-size:       12.5px;
    font-weight:     600;
    text-decoration: none;
    transition:      border-color .15s, color .15s;
    white-space:     nowrap;
    flex-shrink:     0;
}
.wm-back-link:hover { border-color: var(--wm-accent); color: var(--wm-accent); }
@media (max-width: 640px) {
    .wm-page-header { padding: 14px 16px 12px; flex-wrap: wrap; }
    .wm-page-title  { font-size: 16px; }
}
/* ── Widget title icon alignment ────────────────────────────────────── */
.wm-step-content .widget-title i,
.wm-step-content .section-title i {
    color:       var(--wm-accent);
    font-size:   13px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   pf-* — SINGLE-PAGE Product Form (replaces the multi-step wizard)
   ══════════════════════════════════════════════════════════════════════ */
.pf-single {
    padding-bottom: 80px;
}
.pf-header {
    margin-bottom: var(--da3-gap, 14px);
}

/* Layout: main + sticky sidebar */
.pf-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--da3-gap, 14px);
    align-items: start;
}
@media (max-width: 992px) {
    .pf-layout { grid-template-columns: 1fr; }
}

.pf-main {
    display: flex;
    flex-direction: column;
    gap: var(--da3-gap, 14px);
    min-width: 0;
}
.pf-section { width: 100%; }
.pf-section .widget-card { margin-bottom: 0; }

/* Sticky sidebar */
.pf-side {
    display: flex;
    flex-direction: column;
    gap: var(--da3-gap, 14px);
    position: sticky;
    top: 80px;
}
@media (max-width: 992px) {
    .pf-side { position: static; }
}

/* Preview card */
.pf-preview-card { padding: 16px; }
.pf-preview-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    overflow: hidden;
    margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center;
}
.pf-preview-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-preview-placeholder {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: var(--da3-fg3);
    font-size: 12px;
}
.pf-preview-placeholder i { font-size: 28px; }
.pf-preview-name {
    font-size: 15px; font-weight: 800;
    color: var(--da3-fg1);
    margin-bottom: 6px;
    word-break: break-word;
}
.pf-preview-price {
    font-size: 20px; font-weight: 900;
    color: #10b981;
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
}
.pf-preview-currency {
    font-size: 12px; font-weight: 700;
    color: var(--da3-fg3);
    margin-inline-start: 4px;
}
.pf-preview-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-preview-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 800;
}
.pf-preview-badge i { font-size: 9px; }
.pf-preview-badge--draft {
    background: rgba(245,158,11,.13);
    color: #d97706;
    border: 1px solid rgba(245,158,11,.3);
}
body.dark-mode .pf-preview-badge--draft { color: #fbbf24; }

/* Tip card */
.pf-tip-card { padding: 14px 16px; }
.pf-tip-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: 6px;
}
.pf-tip-list li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12px;
    color: var(--da3-fg2);
    line-height: 1.5;
}
.pf-tip-list li i {
    font-size: 9px;
    color: #10b981;
    margin-top: 5px;
    flex-shrink: 0;
}

/* ─── PRODUCT-FORM DASHBOARD POLISH ─────────────────────────────────── */
/* Stepper: use da3 tokens directly (overrides wm-* defaults) */
.pf-single .wm-stepper {
    background:    var(--da3-card);
    border:        1px solid var(--da3-bd);
    border-radius: var(--da3-r, 12px);
    box-shadow:    var(--da3-shadow);
    padding:       16px 20px 14px;
    margin-bottom: var(--da3-gap, 14px);
}
.pf-single .wm-step-circle {
    background:   var(--da3-bg2);
    border-color: var(--da3-bd);
    color:        var(--da3-fg2);
}
.pf-single .wm-step--current .wm-step-circle {
    background:   var(--da3-accent);
    color:        #fff;
    box-shadow:   0 0 0 4px var(--da3-abg);
}
.pf-single .wm-step--done .wm-step-circle {
    background:   var(--da3-accent);
    border-color: var(--da3-accent);
    color:        #fff;
}
.pf-single .wm-step-title    { color: var(--da3-fg1); }
.pf-single .wm-step--current .wm-step-title { color: var(--da3-accent); }
.pf-single .wm-step--pending .wm-step-title { color: var(--da3-fg2); }
.pf-single .wm-step-desc     { color: var(--da3-fg3); }
.pf-single .wm-step:not(:last-child)::after {
    background-image: linear-gradient(to right, var(--da3-bd) 50%, transparent 0);
}
.pf-single .wm-step--done:not(:last-child)::after {
    background: var(--da3-accent);
}
.pf-single .wm-stepper-bar { display: none; }

/* Section cards: enforce dashboard look */
.pf-single .pf-section .widget-card {
    background:    var(--da3-card);
    border:        1px solid var(--da3-bd);
    border-radius: var(--da3-r, 12px);
    box-shadow:    var(--da3-shadow);
    overflow:      hidden;
}
.pf-single .pf-section .widget-title {
    background:  transparent;
    padding:     14px 20px;
    border-bottom: 1px solid var(--da3-bd);
    color:       var(--da3-fg1);
    font-weight: 700;
}
.pf-single .pf-section .wm-card-body {
    padding:    18px 20px 20px;
    border-top: 0;
}

/* Form labels */
.pf-single .form-label {
    color:          var(--da3-fg1);
    font-weight:    700;
    font-size:      12.5px;
    margin-bottom:  6px;
    letter-spacing: .01em;
}
.pf-single .form-label.is-required::after {
    content:           ' *';
    color:             #ef4444;
    margin-inline-start: 2px;
}
.pf-single .wm-optional {
    color:       var(--da3-fg3);
    font-size:   11px;
    font-weight: 500;
    margin-inline-start: 4px;
}
.pf-single .lang-tag {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       1px 7px;
    border-radius: 999px;
    font-size:     10.5px;
    font-weight:   700;
    background:    var(--da3-bg2);
    color:         var(--da3-fg2);
    margin-inline-end: 6px;
}

/* Form inputs: dashboard-style */
.pf-single .form-control,
.pf-single .form-select {
    height:        42px;
    padding:       0 14px;
    background:    var(--da3-bg2);
    border:        1.5px solid var(--da3-bd);
    border-radius: 10px;
    color:         var(--da3-fg1);
    font-size:     13.5px;
    font-weight:   500;
    transition:    border-color .18s, box-shadow .18s, background .18s;
    outline:       0;
    box-shadow:    none;
}
.pf-single textarea.form-control { height: auto; padding: 12px 14px; min-height: 100px; line-height: 1.55; }
.pf-single .form-control::placeholder { color: var(--da3-fg3); font-weight: 500; }
.pf-single .form-control:hover { border-color: var(--da3-fg3); }
.pf-single .form-control:focus,
.pf-single .form-select:focus {
    background:   var(--da3-card);
    border-color: var(--da3-accent);
    box-shadow:   0 0 0 3px var(--da3-abg);
    color:        var(--da3-fg1);
}
.pf-single .form-control.is-invalid {
    border-color: #ef4444;
    box-shadow:   0 0 0 3px rgba(239,68,68,.12);
}
.pf-single .field-error {
    display:    block;
    color:      #ef4444;
    font-size:  11.5px;
    font-weight: 600;
    margin-top: 5px;
}

/* Radio + check controls (form-check) */
.pf-single .form-check { padding-inline-start: 0; display: inline-flex; align-items: center; gap: 8px; }
.pf-single .form-check-input {
    width:        18px;
    height:       18px;
    margin:       0;
    border:       1.5px solid var(--da3-bd);
    background:   var(--da3-bg2);
    cursor:       pointer;
}
.pf-single .form-check-input:checked {
    background-color: var(--da3-accent);
    border-color:     var(--da3-accent);
}
.pf-single .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--da3-abg);
}
.pf-single .form-check-label {
    color:       var(--da3-fg1);
    font-size:   13px;
    font-weight: 600;
    cursor:      pointer;
}

/* Bootstrap "card" inside steps (step4 stock card) */
.pf-single .pf-section .card {
    background:    var(--da3-card);
    border:        1px solid var(--da3-bd);
    border-radius: var(--da3-r, 12px);
    box-shadow:    var(--da3-shadow);
}
.pf-single .pf-section .card-body { padding: 18px 20px; }
.pf-single .section-title {
    display:        flex;
    align-items:    center;
    gap:            8px;
    color:          var(--da3-fg1);
    font-weight:    800;
    font-size:      14px;
    margin-bottom:  14px;
}

/* Tables inside steps (variants / stock) */
.pf-single .variants-table {
    background:    transparent;
    border:        1px solid var(--da3-bd);
    border-radius: 10px;
    overflow:      hidden;
}
.pf-single .variants-table thead { background: var(--da3-bg2); }
.pf-single .variants-table th    { color: var(--da3-fg3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 10px 12px; border: 0; }
.pf-single .variants-table td    { padding: 10px 12px; border-top: 1px solid var(--da3-bd); color: var(--da3-fg1); }
.pf-single .variants-table .form-control { height: 36px; padding: 0 10px; font-size: 12.5px; }

/* Upload box (image picker) */
.pf-single .upload-box {
    display:         block;
    border:          2px dashed var(--da3-bd);
    border-radius:   12px;
    padding:         28px 16px;
    text-align:      center;
    cursor:          pointer;
    background:      var(--da3-bg2);
    transition:      border-color .18s, background .18s;
}
.pf-single .upload-box:hover {
    border-color: var(--da3-accent);
    background:   var(--da3-abg);
}
.pf-single .upload-content i { font-size: 26px; color: var(--da3-fg3); margin-bottom: 8px; display: block; }
.pf-single .upload-text strong { display: block; color: var(--da3-fg1); font-weight: 800; font-size: 13.5px; }
.pf-single .upload-text span   { color: var(--da3-fg3); font-size: 11.5px; }

/* Image preview tiles */
.pf-single .gallery { gap: 10px; }
.pf-single .preview-item {
    position: relative;
    width: 90px; height: 90px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--da3-bd);
    background: var(--da3-bg2);
}
.pf-single .preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-single .preview-remove {
    position: absolute;
    top: 4px; inset-inline-end: 4px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(239,68,68,.95);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* Bootstrap buttons inside the form */
.pf-single .btn { font-family: inherit; }
.pf-single .btn-outline-primary {
    background:    transparent;
    color:         var(--da3-accent);
    border:        1px solid var(--da3-accent);
    border-radius: 9px;
    font-weight:   700;
    font-size:     12.5px;
    padding:       6px 14px;
}
.pf-single .btn-outline-primary:hover {
    background: var(--da3-abg);
    color:      var(--da3-accent);
}
.pf-single .btn-dark {
    background:    var(--da3-fg1);
    color:         var(--da3-card);
    border-radius: 9px;
    font-weight:   700;
    font-size:     12.5px;
    border:        0;
}
.pf-single .ai-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       7px 14px;
    border-radius: 999px;
    background:    linear-gradient(135deg, rgba(139,92,246,.18), rgba(99,102,241,.18));
    color:         #8b5cf6;
    border:        1px solid rgba(139,92,246,.4);
    font-weight:   800;
    font-size:     12px;
    cursor:        pointer;
    transition:    transform .15s, filter .15s;
}
.pf-single .ai-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }

/* AI generation icon button (top-corner inside basic-info card) */
.pf-single .ai-icon-btn {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(99,102,241,.18));
    color: #8b5cf6;
    border: 1px solid rgba(139,92,246,.4);
    cursor: pointer;
    transition: transform .15s, filter .15s, box-shadow .15s;
    font-size: 14px;
    flex-shrink: 0;
}
.pf-single .ai-icon-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.12);
    box-shadow: 0 4px 14px rgba(139,92,246,.25);
}
.pf-single .ai-icon-btn:disabled { opacity: .55; cursor: wait; transform: none; }

/* Subtle divider inside cards */
.pf-single .pf-divider {
    border: 0;
    height: 1px;
    background: var(--da3-bd);
    margin: 18px 0 6px;
    opacity: .85;
}

/* Sticky action bar success variant (last step → publish/save) */
.bs-btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border-color: #059669;
}
.bs-btn-success:hover { filter: brightness(1.06); }

/* Wider container for the wizard action bar so 3 buttons + label fit */
.pf-actionbar .bs-savebar-inner {
    max-width: 780px;
    min-width: 360px;
}
.pf-actionbar .bs-savebar-msg { font-size: 12.5px; }
.pf-actionbar .bs-savebar-msg i { color: var(--da3-fg3); }
.pf-actionbar .bs-savebar-msg i[style*="#f59e0b"] { color: #f59e0b !important; }

/* ── Dashboard-style icon circles for step cards ────────────────────── */
.wm-ico {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           38px;
    height:          38px;
    border-radius:   10px;
    font-size:       15px;
    flex-shrink:     0;
}
.wm-ico--blue   { background: rgba(59,130,246,.13);  color: #3b82f6; }
.wm-ico--violet { background: rgba(139,92,246,.13);  color: #8b5cf6; }
.wm-ico--amber  { background: rgba(245,158,11,.13);  color: #f59e0b; }
.wm-ico--green  { background: rgba(16,185,129,.13);  color: #10b981; }
.wm-ico--indigo { background: rgba(99,102,241,.13);  color: #6366f1; }
.wm-ico--rose   { background: rgba(244,63,94,.13);   color: #f43f5e; }
.wm-ico--teal   { background: rgba(20,184,166,.13);  color: #14b8a6; }

.wm-ico-label {
    font-size:   14px;
    font-weight: 700;
    color:       var(--wm-fg1, var(--da3g-fg1, #09090b));
    line-height: 1.2;
}
.wm-ico-sub {
    font-size:  11px;
    color:      var(--wm-fg2, var(--da3g-fg2, #71717a));
    margin-top: 2px;
    line-height: 1.3;
}

/* Title row for cards that have a side action (e.g. AI button) */
.wm-card-title-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    flex-wrap:       wrap;
}
.wm-card-title-main {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex:        1;
    min-width:   0;
}

/* Card body padding for widget-card sections */
.wm-step-content .widget-card .wm-card-body,
.pf-section .widget-card .wm-card-body {
    padding:    16px 20px 20px;
    border-top: 1px solid var(--wm-bd, var(--da3g-bd, #e4e4e7));
}

/* Tighten widget-title padding to match dashboard card headers */
.wm-step-content .widget-card .widget-title,
.pf-section .widget-card .widget-title {
    padding:     14px 20px;
    gap:         12px;
    align-items: center;
}

/* Bridge --wm-* tokens for step partials when rendered in single-page form */
.pf-single {
    --wm-bg:          var(--da3-bg2,   #f4f4f5);
    --wm-card:        var(--da3-card,  #ffffff);
    --wm-card-soft:   var(--da3-bg2,   #f4f4f5);
    --wm-bd:          var(--da3-bd,    #e4e4e7);
    --wm-bd-strong:   var(--da3-bd,    #e4e4e7);
    --wm-line:        var(--da3-line,  #e4e4e7);
    --wm-hover:       var(--da3-hover, rgba(0,0,0,.04));
    --wm-fg1:         var(--da3-fg1,   #09090b);
    --wm-fg2:         var(--da3-fg2,   #71717a);
    --wm-fg3:         var(--da3-fg3,   #a1a1aa);
    --wm-accent:      var(--da3-accent,#2563eb);
    --wm-accent-soft: var(--da3-abg,   rgba(37,99,235,.1));
}
.pf-section .widget-card {
    background:    var(--da3-card);
    border:        1px solid var(--da3-bd);
    border-radius: var(--da3-r, 12px);
    box-shadow:    var(--da3-shadow);
    overflow:      hidden;
}
.pf-section .widget-title {
    background: transparent;
    display:    flex;
    align-items: center;
    gap: 12px;
}
.pf-section .widget-title i { color: var(--da3-accent); flex-shrink: 0; }

/* Dark-mode overrides */
body.dark-mode .wm-ico-label { color: var(--da3g-fg1); }
body.dark-mode .wm-ico-sub   { color: var(--da3g-fg2); }


/* ══════════════════════════════════════════════════════════════════════
   pw-* — New Dashboard-style Product Wizard Classes
   Uses --da3-* scoped tokens (set inside .da3 wrapper) which map to
   --da3g-* globals for dark / light mode. No hard-coded colours.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ─────────────────────────────────────────────────── */
/* Also re-declare --wm-* tokens here so step partials that use var(--wm-*)
   (upload-box, gallery, variants-table, etc.) resolve correctly even without
   a .wm-wizard ancestor wrapper. */
.pw-page {
    min-height:  100vh;
    background:  var(--da3-bg2, var(--da3g-bg2, #f4f4f5));
    color:       var(--da3-fg1, var(--da3g-fg1, #09090b));
    font-family: 'Zain', 'Inter', system-ui, -apple-system, sans-serif;
    padding-bottom: 80px;

    /* Bridge --wm-* → --da3-* tokens for step partial components */
    --wm-bg:          var(--da3-bg2,   var(--da3g-bg2,   #f4f4f5));
    --wm-card:        var(--da3-card,  var(--da3g-card,  #ffffff));
    --wm-card-soft:   var(--da3-bg2,   var(--da3g-bg2,   #f4f4f5));
    --wm-bd:          var(--da3-bd,    var(--da3g-bd,    #e4e4e7));
    --wm-bd-strong:   var(--da3-bd,    var(--da3g-bd,    #e4e4e7));
    --wm-line:        var(--da3-line,  var(--da3g-bd,    #e4e4e7));
    --wm-hover:       rgba(0,0,0,.04);
    --wm-fg1:         var(--da3-fg1,   var(--da3g-fg1,   #09090b));
    --wm-fg2:         var(--da3-fg2,   var(--da3g-fg2,   #71717a));
    --wm-fg3:         var(--da3-fg3,   var(--da3g-fg3,   #a1a1aa));
    --wm-accent:      var(--da3-accent,var(--da3g-accent, #2563eb));
    --wm-accent-2:    var(--da3-accent,var(--da3g-accent, #2563eb));
    --wm-accent-soft: var(--da3-abg,   rgba(37,99,235,.10));
    --wm-accent-glow: var(--da3-abg,   rgba(37,99,235,.20));
    --wm-success:     #10b981;
    --wm-warn:        #f59e0b;
    --wm-danger:      #ef4444;
    --wm-shadow:      var(--da3-shadow, 0 1px 3px rgba(0,0,0,.07));
    --wm-shadow-lg:   0 8px 32px rgba(0,0,0,.14);
    --wm-gap:         14px;
    --wm-gap-lg:      20px;
    --wm-r:           12px;
    --wm-r-sm:        8px;
    --wm-r-pill:      999px;
    --wm-side-w:      290px;
}

/* ── Top-bar tweaks (on top of .da3-top-bar) ─────────────────────── */
.pw-topbar {
    position:        sticky;
    top:             0;
    z-index:         40;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow:        visible; /* allow step icon ring shadows to show */
}
/* The strip itself can still scroll horizontally */
.pw-topbar .pw-strip { overflow-x: auto; }

/* ── Draft pill ───────────────────────────────────────────────────── */
.pw-draft-pill {
    display:          inline-flex;
    align-items:      center;
    gap:              4px;
    font-size:        10.5px;
    font-weight:      700;
    padding:          2px 9px;
    border-radius:    999px;
    background:       rgba(245,158,11,.12);
    color:            #f59e0b;
    border:           1px solid rgba(245,158,11,.25);
    margin-inline-start: 8px;
    vertical-align:   middle;
    letter-spacing:   .02em;
}
.pw-draft-pill i { font-size: 6px; }

/* ── Stepper strip (overrides on .da3-strip) ──────────────────────── */
.pw-strip {
    padding-top: 10px;
}

/* Step icon box — overrides the bare .da3-qs-ico */
.pw-step-ico {
    width:           36px;
    height:          36px;
    border-radius:   10px;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-size:       15px;
    flex-shrink:     0;
    background:      var(--da3-bg2, var(--da3g-bg2, #f4f4f5));
    color:           var(--da3-fg3, var(--da3g-fg3, #71717a));
    transition:      background .2s, color .2s, box-shadow .2s;
}

/* Step item state classes (layered on .da3-qs) */
.pw-step-item {
    cursor:     pointer;
    transition: opacity .15s;
    position:   relative;
}
.pw-step-item.pw-step-pending {
    opacity: .5;
    cursor:  default;
}
.pw-step-item.pw-step-done .pw-step-ico {
    background: rgba(16,185,129,.15) !important;
    color:      #10b981 !important;
}
.pw-step-item.pw-step-cur .pw-step-ico {
    background: var(--da3-abg, rgba(37,99,235,.15)) !important;
    color:      var(--da3-accent, var(--da3g-accent, #2563eb)) !important;
    box-shadow: 0 0 0 3px var(--da3-abg, rgba(37,99,235,.12));
}
.pw-step-item.pw-step-cur .pw-step-title {
    color: var(--da3-accent, var(--da3g-accent, #2563eb)) !important;
    font-weight: 800;
}
.pw-step-item.pw-step-done .pw-step-title {
    color: #10b981 !important;
}
.pw-step-item.pw-step-pending .pw-step-title {
    color: var(--da3-fg3, var(--da3g-fg3, #a1a1aa)) !important;
}

/* Shrink .da3-qs-val / .da3-qs-lbl when used as step titles */
.pw-step-item .pw-step-title {
    font-size:   12.5px !important;
    font-weight: 700 !important;
    line-height: 1.2;
}
.pw-step-item .pw-step-desc {
    font-size:   10.5px !important;
    font-weight: 500 !important;
    margin-top:  1px;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    max-width:   110px;
}

/* Separator between step items */
.pw-step-sep {
    flex-shrink: 0;
    width:       24px;
    height:      2px;
    background:  var(--da3-bd, var(--da3g-bd, #e4e4e7));
    border-radius: 2px;
    align-self:  center;
}
.da3 .pw-step-sep { background: var(--da3-bd, var(--da3g-bd)); }

/* ── Two-column layout ────────────────────────────────────────────── */
.pw-layout {
    display:               grid;
    grid-template-columns: 1fr 290px;
    gap:                   18px;
    padding:               18px 20px;
    align-items:           flex-start;
    max-width:             1400px;
    margin-inline:         auto;
}
@media (max-width: 1100px) {
    .pw-layout { grid-template-columns: 1fr; }
    .pw-sidebar { order: -1; }
}
@media (max-width: 720px) {
    .pw-layout { padding: 12px; gap: 12px; }
}

/* ── Main content column ──────────────────────────────────────────── */
.pw-main { min-width: 0; }

.pw-step-card {
    padding: 24px !important;  /* override .da3-card default if needed */
}
@media (max-width: 720px) { .pw-step-card { padding: 16px !important; } }

/* Hide step panes that aren't current */
.pw-step-pane.d-none { display: none !important; }

/* Step content — let step partials inherit wm-step-content styles */
.pw-step-pane { /* inherits form controls from wm-step-content rules above */ }

/* Alias: step partials use .wm-step-content for scoped selectors */
.pw-step-pane .step-header { display: none; }

/* ── Bottom nav bar ───────────────────────────────────────────────── */
.pw-nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             10px;
    margin-top:      24px;
    padding-top:     18px;
    border-top:      1px solid var(--da3-bd, var(--da3g-bd, #e4e4e7));
}

/* ── Sidebar ──────────────────────────────────────────────────────── */
.pw-sidebar {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    position:       sticky;
    top:            80px;   /* clears the sticky topbar */
}
@media (max-width: 1100px) { .pw-sidebar { position: static; } }

/* ── Card label (section header inside sidebar cards) ─────────────── */
.pw-card-lbl {
    display:        flex;
    align-items:    center;
    gap:            6px;
    font-size:      10.5px;
    font-weight:    700;
    color:          var(--da3-fg3, var(--da3g-fg3, #71717a));
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom:  12px;
}
.pw-card-lbl i { font-size: 10.5px; }

/* ── Live preview card ────────────────────────────────────────────── */
.pw-img-wrap {
    width:           100%;
    aspect-ratio:    1 / 1;
    background:      var(--da3-bg2, var(--da3g-bg2, #f4f4f5));
    border:          1px dashed var(--da3-bd, var(--da3g-bd, #e4e4e7));
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
    margin-bottom:   12px;
}
.pw-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pw-img-empty {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
    color:          var(--da3-fg3, var(--da3g-fg3, #71717a));
    font-size:      11.5px;
    text-align:     center;
}
.pw-img-empty i { font-size: 26px; opacity: .4; }

.pw-preview-body { text-align: center; }

.pw-preview-name {
    font-size:          13.5px;
    font-weight:        700;
    color:              var(--da3-fg1, var(--da3g-fg1, #09090b));
    line-height:        1.35;
    margin-bottom:      6px;
    overflow:           hidden;
    text-overflow:      ellipsis;
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pw-preview-price {
    font-size:            20px;
    font-weight:          800;
    color:                var(--da3-accent, var(--da3g-accent, #2563eb));
    font-variant-numeric: tabular-nums;
    margin-bottom:        8px;
}
.pw-preview-cur {
    font-size:           11.5px;
    font-weight:         600;
    color:               var(--da3-fg2, var(--da3g-fg2, #52525b));
    margin-inline-start: 2px;
}

.pw-preview-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    padding:       3px 10px;
    border-radius: 999px;
    font-size:     11px;
    font-weight:   700;
    background:    rgba(239,68,68,.10);
    color:         #ef4444;
    border:        1px solid rgba(239,68,68,.18);
}
.pw-preview-badge[data-preview-status="active"] {
    background: rgba(16,185,129,.10);
    color:      #10b981;
    border-color: rgba(16,185,129,.22);
}
.pw-dot {
    width:         5px; height: 5px;
    border-radius: 50%;
    background:    currentColor;
    flex-shrink:   0;
}

/* ── Quick tip card ───────────────────────────────────────────────── */
.pw-tip {
    background: rgba(245,158,11,.06) !important;
    border-color: rgba(245,158,11,.22) !important;
}
.pw-tip-head {
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin-bottom: 8px;
}
.pw-tip-ico {
    width:           26px; height: 26px;
    border-radius:   7px;
    background:      rgba(245,158,11,.15);
    color:           #f59e0b;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-size:       12px;
    flex-shrink:     0;
}
.pw-tip-title {
    font-size:   13px;
    font-weight: 800;
    color:       var(--da3-fg1, var(--da3g-fg1, #09090b));
}
.pw-tip-body {
    font-size:   12px;
    color:       var(--da3-fg2, var(--da3g-fg2, #52525b));
    line-height: 1.6;
    margin:      0;
}

/* ── Progress card ────────────────────────────────────────────────── */
.pw-prog-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   10px;
}
.pw-prog-num {
    font-size:            18px;
    font-weight:          800;
    color:                var(--da3-fg1, var(--da3g-fg1, #09090b));
    font-variant-numeric: tabular-nums;
}
.pw-prog-num strong {
    color: var(--da3-accent, var(--da3g-accent, #2563eb));
}
.pw-prog-lbl {
    font-size:   11px;
    font-weight: 600;
    color:       var(--da3-fg2, var(--da3g-fg2, #52525b));
}
.pw-prog-bar {
    height:        6px;
    background:    var(--da3-bd, var(--da3g-bd, #e4e4e7));
    border-radius: 999px;
    overflow:      hidden;
}
.pw-prog-fill {
    height:        100%;
    background:    var(--da3-accent, var(--da3g-accent, #2563eb));
    border-radius: inherit;
    transition:    width .45s cubic-bezier(.4,0,.2,1);
}

/* ── Alias: .pw-step-pane acts as .wm-step-content for form scoping ── */
.pw-step-pane .widget-card,
.pw-step-pane .card,
.pw-step-pane .media-card {
    background:    var(--da3-card, var(--da3g-card, #fff));
    border:        1px solid var(--da3-bd, var(--da3g-bd, #e4e4e7));
    border-radius: 10px;
    padding:       18px 20px;
    margin-bottom: 14px;
    box-shadow:    0 1px 3px rgba(0,0,0,.06);
}
.pw-step-pane .card-body { background: transparent; padding: 0; }

.pw-step-pane .widget-title,
.pw-step-pane .section-title {
    font-size:     13px;
    font-weight:   800;
    color:         var(--da3-fg1, var(--da3g-fg1, #09090b));
    margin-bottom: 14px;
    display:       flex;
    align-items:   center;
    gap:           6px;
}

.pw-step-pane .form-control,
.pw-step-pane .form-select,
.pw-step-pane textarea {
    background:    var(--da3-bg2, var(--da3g-bg2, #f4f4f5));
    border:        1px solid var(--da3-bd, var(--da3g-bd, #e4e4e7));
    color:         var(--da3-fg1, var(--da3g-fg1, #09090b));
    border-radius: 8px;
    height:        40px;
    font-size:     13.5px;
    padding:       8px 12px;
    transition:    border-color .15s, box-shadow .15s;
    font-family:   inherit;
    width:         100%;
}
.pw-step-pane textarea { height: auto; min-height: 110px; resize: vertical; }

.pw-step-pane .form-control:focus,
.pw-step-pane .form-select:focus,
.pw-step-pane textarea:focus {
    border-color: var(--da3-accent, var(--da3g-accent, #2563eb));
    box-shadow:   0 0 0 3px var(--da3-abg, rgba(37,99,235,.12));
    outline:      none;
    background:   var(--da3-card, var(--da3g-card, #fff));
}

.pw-step-pane .form-label,
.pw-step-pane label.form-label {
    color:         var(--da3-fg2, var(--da3g-fg2, #52525b));
    font-size:     12.5px;
    font-weight:   600;
    margin-bottom: 5px;
    display:       block;
}
.pw-step-pane small,
.pw-step-pane .text-muted { color: var(--da3-fg3, var(--da3g-fg3, #71717a)) !important; font-size: 11px; }

.pw-step-pane .form-check-input { accent-color: var(--da3-accent, var(--da3g-accent, #2563eb)); }
.pw-step-pane .form-check-label { color: var(--da3-fg2, var(--da3g-fg2, #52525b)); font-size: 13px; }

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pw-prog-fill { transition: none !important; }
}

/* ── Responsive tweaks ────────────────────────────────────────────── */
@media (max-width: 760px) {
    .pw-step-desc { display: none; }
    .pw-step-sep  { width: 12px; }
}
@media (max-width: 480px) {
    .pw-draft-pill { display: none; }
    .pw-step-pane .widget-card,
    .pw-step-pane .card { padding: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   Shipping
   Merged from: shipping.css
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
 *
 *  EL MATAJER — SHIPPING FEATURE CSS
 *  Extracted: 2026-05-25 (Wave 3 — CSS Architecture Consolidation)
 *
 *  Replaces embedded <style> blocks in:
 *    - resources/views/admin/shipping_providers/_design.blade.php
 *    - resources/views/admin/vendor_shipping/settings.blade.php
 *    - resources/views/admin/vendor_shipping/details.blade.php
 *
 *  Consumers: All shipping provider and vendor shipping blade views
 *  Tokens:    Uses var() from tokens.css — no hardcoded colors
 *
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. PAGE TOKEN SCOPE  (.shipping-page, .vsp-grid)
   ───────────────────────────────────────────────────────────────────────────── */
.shipping-page {
    --da3-card:     #1c1c1f;
    --da3-bd:       rgba(255,255,255,.055);
    --da3-bg2:      #111113;
    --da3-shadow:   0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-fg1:      #f4f4f5;
    --da3-fg2:      #a1a1aa;
    --da3-fg3:      #71717a;
    --da3-line:     rgba(255,255,255,.06);
    --da3-hover:    rgba(255,255,255,.03);
    --da3-r:        12px;
    --da3-gap:      16px;
    --da3-accent:   #3b82f6;
    --da3-abg:      rgba(59,130,246,.12);
    --da3-success:  #10b981;
    --da3-success-bg: rgba(16,185,129,.12);
    --da3-warn:     #f59e0b;
    --da3-warn-bg:  rgba(245,158,11,.12);
    --da3-danger:   #ef4444;
    --da3-danger-bg: rgba(239,68,68,.12);
    --da3-info:     #06b6d4;
    --da3-info-bg:  rgba(6,182,212,.12);
    --da3-input-bg: rgba(255,255,255,.02);
}
body:not(.dark-mode) .shipping-page {
    --da3-card:     #ffffff;
    --da3-bd:       #e4e4e7;
    --da3-bg2:      #f9f9fb;
    --da3-shadow:   0 1px 3px rgba(0,0,0,.07), 0 0 0 1px #e4e4e7;
    --da3-fg1:      #09090b;
    --da3-fg2:      #52525b;
    --da3-fg3:      #a1a1aa;
    --da3-line:     #f4f4f5;
    --da3-hover:    rgba(0,0,0,.02);
    --da3-input-bg: #ffffff;
    --da3-success-bg: #d1fae5;
    --da3-warn-bg:  #fef3c7;
    --da3-danger-bg: #fef2f2;
    --da3-info-bg:  #cffafe;
}

/* Admin-purple accent variant for vendor shipping */
.da3.da3-admin { --role-accent: #3d3aed; --role-accent-soft: rgba(124,58,237,.1); }
.da3-admin .da3-btn-primary { box-shadow: 0 2px 8px rgba(124,58,237,.32); }
.da3-role-badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
    border-radius: 999px; font-size: 11px; font-weight: 600;
    background: rgba(124,58,237,.12); color: #a78bfa;
}
.da3-role-badge .da3-live-dot { background: var(--da3-success, #10b981); }

/* ─────────────────────────────────────────────────────────────────────────────
   2. GLOBAL COLOR RESETS INSIDE .shipping-page
   ───────────────────────────────────────────────────────────────────────────── */
.shipping-page,
.shipping-page h1, .shipping-page h2, .shipping-page h3,
.shipping-page h4, .shipping-page h5, .shipping-page h6,
.shipping-page p, .shipping-page span, .shipping-page label,
.shipping-page small, .shipping-page td, .shipping-page th,
.shipping-page li, .shipping-page a {
    color: var(--da3-fg1);
}
.shipping-page .text-dark    { color: var(--da3-fg1) !important; }
.shipping-page .text-muted   { color: var(--da3-fg3) !important; }
.shipping-page .text-primary { color: var(--da3-accent) !important; }
.shipping-page .text-danger  { color: var(--da3-danger) !important; }
.shipping-page .text-success { color: var(--da3-success) !important; }
.shipping-page .text-warning { color: var(--da3-warn) !important; }
.shipping-page .text-info    { color: var(--da3-info) !important; }
.shipping-page code {
    background: var(--da3-bg2); color: var(--da3-accent);
    border-radius: 4px; padding: 1px 6px; font-size: 12px;
    border: 1px solid var(--da3-bd);
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. HERO / PAGE HEADER  (.shipping-hero, .sp-hero)
   ───────────────────────────────────────────────────────────────────────────── */
.shipping-page .sp-hero {
    background: var(--da3-card); border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r); box-shadow: var(--da3-shadow);
    padding: 18px 22px; margin-bottom: var(--da3-gap);
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.shipping-page .sp-hero-ico {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--da3-abg); color: var(--da3-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.shipping-page .sp-hero-info { flex: 1 1 240px; min-width: 0; }
.shipping-page .sp-hero-title { font-size: 19px; font-weight: 800; color: var(--da3-fg1); letter-spacing: -.2px; margin: 0 0 3px; }
.shipping-page .sp-hero-sub   { font-size: 12.5px; color: var(--da3-fg3); margin: 0; }
.shipping-page .sp-hero-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Breadcrumb in hero */
.shipping-page .breadcrumb { background: transparent !important; padding: 0 !important; margin: 4px 0 0 !important; font-size: 12px; }
.shipping-page .breadcrumb-item { color: var(--da3-fg3); }
.shipping-page .breadcrumb-item a { color: var(--da3-fg2); text-decoration: none; }
.shipping-page .breadcrumb-item a:hover { color: var(--da3-accent); }
.shipping-page .breadcrumb-item.active { color: var(--da3-fg1); }
.shipping-page .breadcrumb-item + .breadcrumb-item::before { color: var(--da3-fg3) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   4. BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */
.shipping-page .btn {
    border-radius: 10px !important; padding: 8px 16px !important;
    font-size: 13px !important; font-weight: 700 !important;
    border: 1px solid transparent !important; box-shadow: none !important;
    display: inline-flex !important; align-items: center; gap: 6px;
    transition: filter .15s, transform .15s, background .15s, border-color .15s, color .15s !important;
}
.shipping-page .btn-sm { padding: 6px 12px !important; font-size: 12px !important; border-radius: 8px !important; }
.shipping-page .btn-primary,
.shipping-page .btn-secondary {
    background: var(--da3-accent) !important; border-color: var(--da3-accent) !important; color: var(--white, #fff) !important;
}
.shipping-page .btn-primary:hover,
.shipping-page .btn-secondary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.shipping-page .btn-outline-primary,
.shipping-page .btn-outline-secondary,
.shipping-page .btn-white,
.shipping-page .btn-light {
    background: var(--da3-bg2) !important; color: var(--da3-fg1) !important; border-color: var(--da3-bd) !important;
}
.shipping-page .btn-outline-primary:hover,
.shipping-page .btn-outline-secondary:hover,
.shipping-page .btn-white:hover,
.shipping-page .btn-light:hover {
    background: var(--da3-abg) !important; color: var(--da3-accent) !important; border-color: var(--da3-accent) !important;
}
.shipping-page .btn-outline-danger { background: transparent !important; color: var(--da3-danger) !important; border-color: rgba(239,68,68,.35) !important; }
.shipping-page .btn-outline-danger:hover { background: var(--da3-danger-bg) !important; border-color: var(--da3-danger) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   5. BOOTSTRAP CARD OVERRIDES
   ───────────────────────────────────────────────────────────────────────────── */
.shipping-page .card {
    background: var(--da3-card) !important; border: 1px solid var(--da3-bd) !important;
    border-radius: var(--da3-r) !important; box-shadow: var(--da3-shadow) !important; color: var(--da3-fg1) !important;
}
.shipping-page .card-header, .shipping-page .card-footer {
    background: transparent !important; border-color: var(--da3-line) !important; color: var(--da3-fg1) !important;
}
.shipping-page .card-body  { color: var(--da3-fg1) !important; }
.shipping-page .card-title { color: var(--da3-fg1) !important; }
.shipping-page .bg-white   { background: var(--da3-card) !important; }
.shipping-page .bg-light   { background: var(--da3-bg2) !important; color: var(--da3-fg1) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   6. KPI STATS GRID  (.sp-stats, .sp-stat)
   ───────────────────────────────────────────────────────────────────────────── */
.shipping-page .sp-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px; margin-bottom: var(--da3-gap);
}
.shipping-page .sp-stat {
    background: var(--da3-card); border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r); box-shadow: var(--da3-shadow);
    padding: 16px 18px; display: flex; align-items: center; gap: 14px;
    transition: transform .15s, border-color .15s;
}
.shipping-page .sp-stat:hover { transform: translateY(-2px); border-color: var(--da3-accent); }
.shipping-page .sp-stat-ico {
    width: 44px; height: 44px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
    background: var(--da3-abg); color: var(--da3-accent);
}
.shipping-page .sp-stat.s-success .sp-stat-ico { background: var(--da3-success-bg); color: var(--da3-success); }
.shipping-page .sp-stat.s-danger  .sp-stat-ico { background: var(--da3-danger-bg);  color: var(--da3-danger); }
.shipping-page .sp-stat.s-info    .sp-stat-ico { background: var(--da3-info-bg);    color: var(--da3-info); }
.shipping-page .sp-stat.s-warn    .sp-stat-ico { background: var(--da3-warn-bg);    color: var(--da3-warn); }
.shipping-page .sp-stat-info { flex: 1; min-width: 0; }
.shipping-page .sp-stat-lbl { font-size: 11px; font-weight: 700; color: var(--da3-fg2); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.shipping-page .sp-stat-val { font-size: 22px; font-weight: 800; color: var(--da3-fg1); line-height: 1.1; letter-spacing: -.4px; }

/* ─────────────────────────────────────────────────────────────────────────────
   7. PROVIDER CARD GRID  (.sp-grid, .shipping-card)
   ───────────────────────────────────────────────────────────────────────────── */
.shipping-page .sp-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--da3-gap);
}
.shipping-page .sp-card {
    background: var(--da3-card); border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r); box-shadow: var(--da3-shadow);
    overflow: hidden; transition: transform .15s, border-color .15s;
    display: flex; flex-direction: column;
}
.shipping-page .sp-card:hover { transform: translateY(-2px); border-color: var(--da3-accent); }
.shipping-page .sp-card-head {
    padding: 14px 16px; display: flex; align-items: center;
    justify-content: space-between; gap: 10px;
    border-bottom: 1px solid var(--da3-line); background: var(--da3-bg2);
}
.shipping-page .sp-card-logo { width: 44px; height: 44px; border-radius: 10px; background: var(--da3-card); object-fit: cover; }
.shipping-page .sp-card-body { padding: 14px 16px; flex: 1; }
.shipping-page .sp-card-name { font-size: 15px; font-weight: 800; color: var(--da3-fg1); margin: 0 0 3px; display: flex; align-items: center; gap: 6px; }
.shipping-page .sp-card-slug { font-size: 11.5px; color: var(--da3-fg3); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; margin: 0 0 12px; display: flex; align-items: center; gap: 5px; }
.shipping-page .sp-card-info { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.shipping-page .sp-card-info li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--da3-fg2); }
.shipping-page .sp-card-info li i { width: 16px; color: var(--da3-fg3); font-size: 12px; text-align: center; flex-shrink: 0; }
.shipping-page .sp-card-foot { padding: 10px 16px; border-top: 1px solid var(--da3-line); display: flex; gap: 6px; background: var(--da3-bg2); }

/* Vendor shipping provider card (.vsp-card) */
.vsp-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: var(--da3-gap); align-items: stretch;
}
.vsp-card {
    background: var(--da3-card); border: 1.5px solid var(--da3-bd);
    border-radius: 14px; box-shadow: var(--da3-shadow);
    overflow: hidden; display: flex; flex-direction: column; height: 100%;
    transition: border-color .15s, box-shadow .15s, transform .15s; position: relative;
}
.vsp-card:hover { transform: translateY(-2px); border-color: rgba(124,58,237,.32); box-shadow: 0 8px 22px rgba(124,58,237,.10); }
.vsp-card.is-active { border-color: rgba(16,185,129,.4); }
.vsp-card.is-active::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--da3-success, #10b981), #34d399);
}
.vsp-card.is-connected:not(.is-active) { border-color: rgba(245,158,11,.32); }
.vsp-card.is-connected:not(.is-active)::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--da3-warn, #f59e0b), #fbbf24);
}

/* vsp-card header */
.vsp-head { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--da3-line); }
.vsp-logo { width: 60px; height: 60px; border-radius: 12px; background: var(--da3-bg2); border: 1px solid var(--da3-bd); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.vsp-logo img { object-fit: contain; }
.vsp-title-block { flex: 1; min-width: 0; }
.vsp-title { font-size: 16px; font-weight: 800; color: var(--da3-fg1); margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.25; }
.vsp-desc { font-size: 12px; color: var(--da3-fg3); margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Status pills */
.vsp-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; }
.vsp-pill i { font-size: 8px; }
.vsp-pill.live { background: rgba(16,185,129,.12); color: var(--da3-success, #10b981); }
.vsp-pill.test { background: rgba(245,158,11,.12); color: var(--da3-warn, #f59e0b); }
.vsp-pill.off  { background: rgba(148,163,184,.14); color: #64748b; }

/* vsp-card body */
.vsp-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

/* Stats mini-row inside card */
.vsp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 11px 12px; background: var(--da3-bg2); border: 1px solid var(--da3-line); border-radius: 10px; }
.vsp-stat { text-align: center; padding: 0 4px; position: relative; }
.vsp-stat + .vsp-stat { border-inline-start: 1px solid var(--da3-line); }
.vsp-stat-val { font-size: 16px; font-weight: 800; color: var(--da3-fg1); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.vsp-stat-lbl { font-size: 10px; font-weight: 600; color: var(--da3-fg3); text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }
.vsp-stat-val.is-accent { color: var(--da3-accent); }

/* Rates list */
.vsp-rates-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; font-weight: 800; color: var(--da3-fg1); text-transform: uppercase; letter-spacing: .3px; }
.vsp-rates-head i { color: var(--da3-accent); font-size: 11px; margin-inline-end: 4px; }
.vsp-rates-head .vsp-rates-count { background: var(--da3-abg); color: var(--da3-accent); padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.vsp-rates-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; scrollbar-width: thin; }

/* ─────────────────────────────────────────────────────────────────────────────
   8. ACTION BUTTONS  (.sp-act)
   ───────────────────────────────────────────────────────────────────────────── */
.shipping-page .sp-act {
    width: 34px; height: 34px; border-radius: 9px;
    border: 1px solid var(--da3-bd); background: var(--da3-card); color: var(--da3-fg2);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.shipping-page .sp-act:hover { transform: translateY(-1px); }
.shipping-page .sp-act.is-primary:hover { background: var(--da3-abg); color: var(--da3-accent); border-color: var(--da3-accent); }
.shipping-page .sp-act.is-success:hover { background: var(--da3-success-bg); color: var(--da3-success); border-color: var(--da3-success); }
.shipping-page .sp-act.is-warn:hover    { background: var(--da3-warn-bg); color: var(--da3-warn); border-color: var(--da3-warn); }
.shipping-page .sp-act.is-danger:hover  { background: var(--da3-danger-bg); color: var(--da3-danger); border-color: var(--da3-danger); }

/* ─────────────────────────────────────────────────────────────────────────────
   9. STATUS PILLS  (.sp-pill)
   ───────────────────────────────────────────────────────────────────────────── */
.shipping-page .sp-pill {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
    border-radius: 999px; font-size: 11px; font-weight: 800; border: 1px solid; line-height: 1;
}
.shipping-page .sp-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.shipping-page .sp-pill.active,
.shipping-page .sp-pill.success { background: var(--da3-success-bg); color: var(--da3-success); border-color: rgba(16,185,129,.3); }
.shipping-page .sp-pill.inactive,
.shipping-page .sp-pill.danger  { background: var(--da3-danger-bg);  color: var(--da3-danger);  border-color: rgba(239,68,68,.3); }
.shipping-page .sp-pill.warn    { background: var(--da3-warn-bg); color: var(--da3-warn); border-color: rgba(245,158,11,.3); }
.shipping-page .sp-pill.info    { background: var(--da3-abg); color: var(--da3-accent); border-color: rgba(59,130,246,.3); }
.shipping-page .sp-pill.muted   { background: var(--da3-bg2); color: var(--da3-fg3); border-color: var(--da3-bd); }

/* Bootstrap badge overrides */
.shipping-page .badge { border-radius: 999px !important; padding: 4px 10px !important; font-size: 11px !important; font-weight: 800 !important; }
.shipping-page .badge.bg-primary, .shipping-page .badge.bg-secondary { background: var(--da3-abg) !important; color: var(--da3-accent) !important; border: 1px solid rgba(59,130,246,.3); }
.shipping-page .badge.bg-success { background: var(--da3-success-bg) !important; color: var(--da3-success) !important; border: 1px solid rgba(16,185,129,.3); }
.shipping-page .badge.bg-danger  { background: var(--da3-danger-bg) !important;  color: var(--da3-danger) !important;  border: 1px solid rgba(239,68,68,.3); }
.shipping-page .badge.bg-warning { background: var(--da3-warn-bg) !important;    color: var(--da3-warn) !important;    border: 1px solid rgba(245,158,11,.3); }
.shipping-page .badge.bg-info    { background: var(--da3-info-bg) !important;    color: var(--da3-info) !important;    border: 1px solid rgba(6,182,212,.3); }
.shipping-page .badge.bg-light   { background: var(--da3-bg2) !important;        color: var(--da3-fg1) !important;    border: 1px solid var(--da3-bd); }

/* ─────────────────────────────────────────────────────────────────────────────
   10. FORM CONTROLS
   ───────────────────────────────────────────────────────────────────────────── */
.shipping-page .form-control,
.shipping-page .form-select,
.shipping-page input[type="text"],
.shipping-page input[type="email"],
.shipping-page input[type="password"],
.shipping-page input[type="number"],
.shipping-page input[type="tel"],
.shipping-page input[type="url"],
.shipping-page input[type="file"],
.shipping-page select,
.shipping-page textarea {
    background: var(--da3-input-bg) !important; border: 1px solid var(--da3-bd) !important;
    border-radius: 10px !important; color: var(--da3-fg1) !important;
    font-size: 13px !important; padding: 9px 12px !important;
    outline: none !important; transition: border-color .15s, box-shadow .15s !important; box-shadow: none !important;
}
.shipping-page .form-control-sm { padding: 7px 10px !important; font-size: 12.5px !important; border-radius: 9px !important; }
.shipping-page .form-control::placeholder, .shipping-page input::placeholder, .shipping-page textarea::placeholder { color: var(--da3-fg3) !important; opacity: 1; }
.shipping-page .form-control:focus, .shipping-page .form-select:focus, .shipping-page input:focus, .shipping-page select:focus, .shipping-page textarea:focus {
    border-color: var(--da3-accent) !important; box-shadow: 0 0 0 3px var(--da3-abg) !important;
}
.shipping-page .form-label, .shipping-page label.form-label {
    font-size: 11px !important; font-weight: 700 !important; color: var(--da3-fg2) !important;
    text-transform: uppercase !important; letter-spacing: .4px !important; margin-bottom: 6px !important;
}
.shipping-page .form-label .text-danger { color: var(--da3-danger) !important; }
.shipping-page .input-group { border-radius: 10px; overflow: hidden; }
.shipping-page .input-group-text { background: var(--da3-bg2) !important; border: 1px solid var(--da3-bd) !important; color: var(--da3-fg2) !important; font-size: 12px; }
.shipping-page .input-group-text img { max-height: 24px !important; max-width: 48px !important; object-fit: contain; }

/* ─────────────────────────────────────────────────────────────────────────────
   11. LOGO FIELD  (.sp-logo-field)
   ───────────────────────────────────────────────────────────────────────────── */
.shipping-page .sp-logo-field {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; background: var(--da3-bg2);
    border: 1.5px solid var(--da3-bd); border-radius: 12px;
    transition: border-color .15s, background .15s;
}
.shipping-page .sp-logo-field:hover { border-color: rgba(124,58,237,.32); }
.shipping-page .sp-logo-preview {
    position: relative; width: 64px; height: 64px; border-radius: 12px;
    overflow: hidden; flex-shrink: 0; cursor: pointer;
    background:
        linear-gradient(45deg, rgba(148,163,184,.10) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(148,163,184,.10) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(148,163,184,.10) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(148,163,184,.10) 75%),
        var(--da3-card, #1c1c1f);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0;
    border: 1.5px solid var(--da3-bd);
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
body:not(.dark-mode) .shipping-page .sp-logo-preview {
    background:
        linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
        linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
        linear-gradient(-45deg, transparent 75%, #f1f5f9 75%),
        #ffffff;
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0;
    border-color: #e4e4e7;
}
.shipping-page .sp-logo-preview img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 4px; position: relative; z-index: 1; }
.shipping-page .sp-logo-overlay {
    position: absolute; inset: 0; background: rgba(15,23,42,.68); color: var(--white, #fff);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .15s; font-size: 17px; z-index: 2; backdrop-filter: blur(2px);
}
.shipping-page .sp-logo-preview:hover { border-color: var(--da3-accent); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(124,58,237,.18); }
.shipping-page .sp-logo-preview:hover .sp-logo-overlay { opacity: 1; }
.shipping-page .sp-logo-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.shipping-page .sp-logo-input { display: none; }
.shipping-page .sp-logo-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px;
    border-radius: 9px; border: 1px solid var(--da3-bd); background: var(--da3-card);
    color: var(--da3-fg1); font-size: 12px; font-weight: 700; font-family: inherit;
    cursor: pointer; transition: all .15s;
}
.shipping-page .sp-logo-btn:hover { border-color: var(--da3-accent); color: var(--da3-accent); background: var(--da3-abg); }

/* ─────────────────────────────────────────────────────────────────────────────
   12. TIMELINE COMPONENT  (.shipping-timeline, .timeline-item, .timeline-dot)
   ───────────────────────────────────────────────────────────────────────────── */
.modern-timeline { position: relative; padding-left: 0; }
.timeline-item { position: relative; margin-bottom: 1.5rem; padding-inline-start: 2.5rem; padding-bottom: 0.25rem; }
.timeline-item::before {
    content: '';
    position: absolute;
    inset-inline-start: 14px;
    top: 30px;
    width: 2px;
    height: calc(100% - 20px);
    background-color: var(--border-color, #eee);
    z-index: 1;
}
.timeline-item:last-child::before { display: none; }

.timeline-point {
    position: absolute;
    inset-inline-start: 0;
    top: 5px;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
    border: 4px solid var(--bg-secondary, #fff);
    box-shadow: 0 2px 5px rgba(0,0,0,.05);
}
.timeline-content {
    background: var(--bg-light, #f8f9fa);
    border-radius: var(--radius-lg, 1rem);
    padding: 0.75rem;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    border: 1px solid var(--border-color, #e5e7eb);
}
.x-small { font-size: 0.6rem; }

/* Dark-mode timeline overrides */
body.dark-mode .timeline-point { border-color: var(--bg-primary, #1a1a1a); }
body.dark-mode .timeline-item::before { background-color: var(--border-color, #2a2a2a); }
body.dark-mode .timeline-content { background: var(--bg-secondary, #2a2a2a) !important; border-color: var(--border-color, #3f3f46); }

/* ─────────────────────────────────────────────────────────────────────────────
   13. ALERTS
   ───────────────────────────────────────────────────────────────────────────── */
.shipping-page .alert {
    border: 1px solid var(--da3-bd) !important; background: var(--da3-card) !important;
    color: var(--da3-fg1) !important; border-radius: var(--da3-r) !important; padding: 12px 16px !important;
}
.shipping-page .alert-danger  { background: var(--da3-danger-bg) !important; color: var(--da3-danger) !important; border-color: rgba(239,68,68,.25) !important; }
.shipping-page .alert-success { background: var(--da3-success-bg) !important; color: var(--da3-success) !important; border-color: rgba(16,185,129,.25) !important; }
.shipping-page .alert-warning { background: var(--da3-warn-bg) !important; color: var(--da3-warn) !important; border-color: rgba(245,158,11,.25) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   14. DARK-MODE OVERRIDES (explicit)
   ───────────────────────────────────────────────────────────────────────────── */
/* All surface colors already resolve via --da3-* which has dark defaults set
   in the :root scope on .shipping-page. Light mode overrides are in section 1. */

/* ─────────────────────────────────────────────────────────────────────────────
   15. RESPONSIVE BREAKPOINTS
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .vsp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .shipping-page .sp-hero { flex-direction: column; align-items: stretch; }
    .shipping-page .sp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .shipping-page .sp-stats { grid-template-columns: repeat(2, 1fr); }
    .vsp-stats { grid-template-columns: 1fr 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   16a. SHIPMENTS PAGE STATS STRIP  (.vsh-stats, .vsh-stat)
        Used by vendor_shipping/shipments.blade.php
   ───────────────────────────────────────────────────────────────────────────── */
.vsh-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: var(--da3-gap, 16px);
}
.vsh-stat {
    background: var(--da3-card, #1c1c1f);
    border: 1px solid var(--da3-bd, rgba(255,255,255,.055));
    border-radius: var(--da3-r, 12px);
    box-shadow: var(--da3-shadow);
    padding: 16px 18px;
    display: flex; align-items: center; gap: 12px;
    transition: transform .15s, border-color .15s;
}
.vsh-stat:hover { transform: translateY(-2px); }
.vsh-stat-ico {
    width: 42px; height: 42px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.vsh-stat-info { flex: 1; min-width: 0; }
.vsh-stat-val {
    display: block;
    font-size: 1.5rem; font-weight: 900;
    color: var(--da3-fg1, #f4f4f5);
    line-height: 1.1; letter-spacing: -.03em;
}
.vsh-stat-lbl {
    display: block;
    font-size: .68rem; font-weight: 800;
    color: var(--da3-fg3, #71717a);
    text-transform: uppercase; letter-spacing: .05em;
    margin-top: 3px;
}

/* Color presets */
.vsh-stat.s-blue   { --_a: #818cf8; --_bg: rgba(99,102,241,.14);  }
.vsh-stat.s-green  { --_a: #34d399; --_bg: rgba(16,185,129,.14);  }
.vsh-stat.s-indigo { --_a: #a78bfa; --_bg: rgba(139,92,246,.14);  }
.vsh-stat.s-amber  { --_a: #fbbf24; --_bg: rgba(245,158,11,.14);  }
.vsh-stat.s-red    { --_a: #fca5a5; --_bg: rgba(239,68,68,.14);   }

.vsh-stat.s-blue   .vsh-stat-ico { background: var(--_bg); color: var(--_a); }
.vsh-stat.s-green  .vsh-stat-ico { background: var(--_bg); color: var(--_a); }
.vsh-stat.s-indigo .vsh-stat-ico { background: var(--_bg); color: var(--_a); }
.vsh-stat.s-amber  .vsh-stat-ico { background: var(--_bg); color: var(--_a); }
.vsh-stat.s-red    .vsh-stat-ico { background: var(--_bg); color: var(--_a); }

.vsh-stat.s-blue:hover   { border-color: rgba(99,102,241,.35); }
.vsh-stat.s-green:hover  { border-color: rgba(16,185,129,.35); }
.vsh-stat.s-indigo:hover { border-color: rgba(139,92,246,.35); }
.vsh-stat.s-amber:hover  { border-color: rgba(245,158,11,.35); }
.vsh-stat.s-red:hover    { border-color: rgba(239,68,68,.35); }

/* Light mode */
body:not(.dark-mode) .vsh-stat { background: #fff; border-color: #e4e4e7; }
body:not(.dark-mode) .vsh-stat-val { color: #09090b; }
body:not(.dark-mode) .vsh-stat.s-blue   { --_a: #4f46e5; --_bg: rgba(99,102,241,.08); }
body:not(.dark-mode) .vsh-stat.s-green  { --_a: #047857; --_bg: rgba(16,185,129,.08); }
body:not(.dark-mode) .vsh-stat.s-indigo { --_a: #7c3aed; --_bg: rgba(139,92,246,.08); }
body:not(.dark-mode) .vsh-stat.s-amber  { --_a: #b45309; --_bg: rgba(245,158,11,.08); }
body:not(.dark-mode) .vsh-stat.s-red    { --_a: #b91c1c; --_bg: rgba(239,68,68,.08); }

@media (max-width: 640px) {
    .vsh-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 360px) {
    .vsh-stats { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   16. TOKEN SCOPE FOR .da3.da3-admin WRAPPER
       (vendor_shipping/settings.blade.php uses <div class="da3 da3-admin">
        instead of .shipping-page — we must define the same --da3-* vars there)
   ───────────────────────────────────────────────────────────────────────────── */
.da3.da3-admin {
    --da3-card:       #1c1c1f;
    --da3-bd:         rgba(255,255,255,.055);
    --da3-bg2:        #111113;
    --da3-shadow:     0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-fg1:        #f4f4f5;
    --da3-fg2:        #a1a1aa;
    --da3-fg3:        #71717a;
    --da3-line:       rgba(255,255,255,.06);
    --da3-hover:      rgba(255,255,255,.03);
    --da3-r:          12px;
    --da3-gap:        16px;
    --da3-accent:     #3d3aed;
    --da3-abg:        rgba(61,58,237,.12);
    --da3-success:    #10b981;
    --da3-success-bg: rgba(16,185,129,.12);
    --da3-warn:       #f59e0b;
    --da3-warn-bg:    rgba(245,158,11,.12);
    --da3-danger:     #ef4444;
    --da3-danger-bg:  rgba(239,68,68,.12);
    --da3-info:       #06b6d4;
    --da3-info-bg:    rgba(6,182,212,.12);
    --da3-input-bg:   rgba(255,255,255,.02);
}
body:not(.dark-mode) .da3.da3-admin {
    --da3-card:       #ffffff;
    --da3-bd:         #e4e4e7;
    --da3-bg2:        #f9f9fb;
    --da3-shadow:     0 1px 3px rgba(0,0,0,.07), 0 0 0 1px #e4e4e7;
    --da3-fg1:        #09090b;
    --da3-fg2:        #52525b;
    --da3-fg3:        #a1a1aa;
    --da3-line:       #f4f4f5;
    --da3-hover:      rgba(0,0,0,.02);
    --da3-input-bg:   #ffffff;
    --da3-success-bg: #d1fae5;
    --da3-warn-bg:    #fef3c7;
    --da3-danger-bg:  #fef2f2;
    --da3-info-bg:    #cffafe;
    --da3-abg:        rgba(61,58,237,.08);
}

/* ─────────────────────────────────────────────────────────────────────────────
   17. DA3 TOP BAR / GREETING HEADER  (.da3-top-bar, .da3-greeting)
   ───────────────────────────────────────────────────────────────────────────── */
.da3-top-bar {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    padding: 18px 22px;
    margin-bottom: var(--da3-gap);
}
.da3-greeting {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.da3-welcome {
    font-size: 13px; color: var(--da3-fg2); margin: 0 0 6px;
    line-height: 1.55;
}
.da3-welcome strong { color: var(--da3-fg1); font-weight: 800; font-size: 17px; display: block; margin-bottom: 3px; }
.da3-sub-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: var(--da3-fg3);
}
.da3-divider { opacity: .4; }
.da3-date    { font-weight: 600; }
.da3-live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--da3-success, #10b981);
    display: inline-block;
}
.da3-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* DA3 buttons */
.da3-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 16px;
    border-radius: 10px;
    font-size: 12.5px; font-weight: 700;
    text-decoration: none; cursor: pointer; font-family: inherit; border: 0;
    transition: all .15s;
}
.da3-btn-primary {
    background: var(--da3-accent); color: #fff;
    box-shadow: 0 2px 8px rgba(61,58,237,.32);
}
.da3-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.da3-btn-ghost {
    background: var(--da3-bg2); color: var(--da3-fg2);
    border: 1px solid var(--da3-bd);
}
.da3-btn-ghost:hover { border-color: var(--da3-accent); color: var(--da3-accent); background: var(--da3-abg); }

/* ─────────────────────────────────────────────────────────────────────────────
   18. VSP CARD FOOTER + BUTTONS  (.vsp-foot, .vsp-btn)
   ───────────────────────────────────────────────────────────────────────────── */
.vsp-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--da3-line);
    background: var(--da3-bg2);
    display: flex; gap: 8px; flex-wrap: wrap;
}
.vsp-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 16px;
    border-radius: 10px;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    text-decoration: none; border: 1px solid var(--da3-bd);
    background: var(--da3-card); color: var(--da3-fg1);
    transition: all .15s; white-space: nowrap;
}
.vsp-btn:hover { border-color: var(--da3-accent); color: var(--da3-accent); }
.vsp-btn i { font-size: 11px; }
.vsp-btn-primary {
    background: var(--da3-accent); color: #fff; border-color: var(--da3-accent);
    box-shadow: 0 2px 8px rgba(61,58,237,.22);
}
.vsp-btn-primary:hover { filter: brightness(1.1); color: #fff; transform: translateY(-1px); }
.vsp-btn-danger {
    background: var(--da3-danger-bg); color: var(--da3-danger); border-color: rgba(239,68,68,.25);
}
.vsp-btn-danger:hover { background: rgba(239,68,68,.2); border-color: var(--da3-danger); }
.vsp-btn-warn {
    background: var(--da3-warn-bg); color: var(--da3-warn); border-color: rgba(245,158,11,.25);
}
.vsp-btn-warn:hover { background: rgba(245,158,11,.2); border-color: var(--da3-warn); }

/* ─────────────────────────────────────────────────────────────────────────────
   19. CONNECT CTA (shown when provider not yet connected)
   ───────────────────────────────────────────────────────────────────────────── */
.vsp-connect-cta {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 28px 20px;
    text-align: center; gap: 10px;
}
.vsp-connect-cta-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--da3-abg); color: var(--da3-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 4px;
}
.vsp-connect-cta-text {
    font-size: 12.5px; color: var(--da3-fg2); line-height: 1.6;
    max-width: 280px; margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   20. SAVED CREDENTIALS ROW  (.vsp-creds-row, .vsp-creds-chip)
   ───────────────────────────────────────────────────────────────────────────── */
.vsp-creds-row {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-line);
    border-radius: 10px;
}
.vsp-creds-label {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; color: var(--da3-fg3);
    text-transform: uppercase; letter-spacing: .03em;
    flex-shrink: 0;
}
.vsp-creds-label i { font-size: 10px; color: var(--da3-warn); }
.vsp-creds-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    background: rgba(16,185,129,.12); color: var(--da3-success);
    border: 1px solid rgba(16,185,129,.25);
    white-space: nowrap; cursor: default;
}
.vsp-creds-chip i { font-size: 9px; }

/* ─────────────────────────────────────────────────────────────────────────────
   21. EMPTY STATE  (.vsp-empty)
   ───────────────────────────────────────────────────────────────────────────── */
.vsp-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 60px 24px; text-align: center;
    gap: 10px;
}
.vsp-empty i {
    font-size: 40px; color: var(--da3-fg3);
    margin-bottom: 8px;
}
.vsp-empty h3 { font-size: 16px; font-weight: 800; color: var(--da3-fg1); margin: 0; }
.vsp-empty p  { font-size: 12.5px; color: var(--da3-fg2); margin: 0 0 12px; max-width: 320px; line-height: 1.6; }

/* ── Shipping Settings List Table ── */
/* ── Shipping list table — matches ord-tbl aesthetic ── */
.vsp-list-table { width:100%; border-collapse:collapse; }
.vsp-list-table,.vsp-list-table>*,.vsp-list-table>:not(caption)>*,.vsp-list-table>:not(caption)>*>* { border-color:transparent!important; box-shadow:none!important; }
.vsp-list-table thead tr { background:var(--da3-bg2); border-bottom:1px solid var(--da3-line); }
.vsp-list-table thead th { font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--da3-fg3); padding:12px 16px; border:none; white-space:nowrap; }
.vsp-list-table tbody tr { border-bottom:1px solid var(--da3-line); transition:background .12s; }
.vsp-list-table tbody tr:last-child { border-bottom:none; }
.vsp-list-table tbody tr:hover { background:var(--da3-hover); }
.vsp-list-table tbody td { padding:14px 16px; border:none; vertical-align:middle; color:var(--da3-fg1); }
.vsp-list-icon { width:40px;height:40px;border-radius:10px;background:var(--da3-bg2);border:1px solid var(--da3-bd);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden; }
.vsp-list-icon img { width:100%;height:100%;object-fit:cover; }
.vsp-list-name { font-size:.85rem;font-weight:800;color:var(--da3-fg1);margin:0 0 2px; }
.vsp-list-desc { font-size:.71rem;color:var(--da3-fg3);margin:0;line-height:1.4; }
.vsp-list-actions { display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-start; }
/* action buttons — slim, like ord-act */
.vsp-list-btn { display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:8px;font-size:.76rem;font-weight:700;border:1.5px solid var(--da3-bd);background:var(--da3-bg2);color:var(--da3-fg2);cursor:pointer;text-decoration:none;transition:all .15s;white-space:nowrap;font-family:inherit; }
.vsp-list-btn:hover { border-color:var(--da3-accent);color:var(--da3-accent);background:var(--da3-abg); }
.vsp-list-btn i { font-size:.72rem; }
.vsp-list-btn.is-primary { background:var(--da3-accent);border-color:var(--da3-accent);color:#fff; }
.vsp-list-btn.is-primary:hover { filter:brightness(1.1);color:#fff; }
.vsp-list-btn.is-danger { border-color:rgba(239,68,68,.35);color:#ef4444;background:rgba(239,68,68,.06); }
.vsp-list-btn.is-danger:hover { background:rgba(239,68,68,.14);border-color:#ef4444; }
/* ── vsp toggle switch ── */
.vsp-switch { display:inline-flex;align-items:center;cursor:pointer;margin:0; }
.vsp-switch input { position:absolute;opacity:0;width:0;height:0; }
.vsp-switch-track { width:40px;height:22px;border-radius:999px;background:rgba(148,163,184,.25);border:1.5px solid var(--da3-bd);transition:background .2s,border-color .2s;position:relative;flex-shrink:0; }
.vsp-switch input:checked ~ .vsp-switch-track { background:#10b981;border-color:#10b981; }
.vsp-switch-thumb { position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s; }
.vsp-switch input:checked ~ .vsp-switch-track .vsp-switch-thumb { transform:translateX(18px); }

/* ─────────────────────────────────────────────────────────────────────────────
   22. NOTICE BANNERS  (.vsp-notice)
   ───────────────────────────────────────────────────────────────────────────── */
.vsp-notice {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 13px; border-radius: 10px;
    font-size: 12px; font-weight: 600; line-height: 1.55;
    background: var(--da3-warn-bg);
    color: var(--da3-warn);
    border: 1px solid rgba(245,158,11,.25);
}
.vsp-notice.is-info {
    background: var(--da3-abg); color: var(--da3-accent);
    border-color: rgba(61,58,237,.22);
}
.vsp-notice.is-danger {
    background: var(--da3-danger-bg); color: var(--da3-danger);
    border-color: rgba(239,68,68,.22);
}
.vsp-notice.is-success {
    background: var(--da3-success-bg); color: var(--da3-success);
    border-color: rgba(16,185,129,.22);
}
.vsp-notice i { font-size: 12px; flex-shrink: 0; margin-top: 1px; }

/* ─────────────────────────────────────────────────────────────────────────────
   23. CONNECT / EDIT MODAL  (.vsp-modal)
   ───────────────────────────────────────────────────────────────────────────── */
.vsp-modal .modal-content {
    background: var(--da3-card) !important;
    border: 1px solid var(--da3-bd) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.45) !important;
    color: var(--da3-fg1) !important;
    overflow: hidden;
}
.vsp-modal .modal-header {
    background: var(--da3-bg2) !important;
    border-bottom: 1px solid var(--da3-line) !important;
    padding: 16px 20px !important;
}
.vsp-modal .modal-title {
    font-size: 15px !important; font-weight: 800 !important;
    color: var(--da3-fg1) !important;
}
.vsp-modal .modal-body  { padding: 20px !important; }
.vsp-modal .modal-footer {
    background: var(--da3-bg2) !important;
    border-top: 1px solid var(--da3-line) !important;
    padding: 12px 20px !important;
    display: flex; gap: 8px; justify-content: flex-end;
}
.vsp-modal .form-label {
    font-size: 11px !important; font-weight: 700 !important;
    color: var(--da3-fg2) !important;
    text-transform: uppercase !important; letter-spacing: .04em !important;
    margin-bottom: 5px !important;
    display: flex; align-items: center; gap: 6px;
}
.vsp-modal .form-control,
.vsp-modal .form-check-input {
    background: var(--da3-input-bg) !important;
    border: 1px solid var(--da3-bd) !important;
    border-radius: 9px !important;
    color: var(--da3-fg1) !important;
    font-size: 13px !important;
}
.vsp-modal .form-control:focus {
    border-color: var(--da3-accent) !important;
    box-shadow: 0 0 0 3px var(--da3-abg) !important;
}
.vsp-modal .form-control::placeholder { color: var(--da3-fg3) !important; }
.vsp-modal-field { margin-bottom: 14px; }
.vsp-modal-hint {
    display: flex; align-items: center; gap: 5px;
    margin-top: 5px; font-size: 11px; color: var(--da3-fg3); font-weight: 600;
}
.vsp-modal-hint i { font-size: 10px; color: var(--da3-warn); }
.vsp-modal-saved-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 700;
    background: rgba(16,185,129,.12); color: var(--da3-success);
    border: 1px solid rgba(16,185,129,.25);
    vertical-align: middle;
}
.vsp-modal-saved-pill i { font-size: 9px; }

/* ─────────────────────────────────────────────────────────────────────────────
   24. DISCONNECT CONFIRM MODAL  (.vsp-confirm-modal, .vsp-confirm)
   ───────────────────────────────────────────────────────────────────────────── */
.vsp-confirm-modal .modal-dialog { max-width: 460px; }
.vsp-confirm {
    background: var(--da3-card) !important;
    border: 1px solid var(--da3-bd) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.45) !important;
    padding: 28px; position: relative; overflow: hidden;
}
.vsp-confirm-close {
    position: absolute; top: 14px; inset-inline-end: 14px;
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--da3-bg2); border: 1px solid var(--da3-bd);
    color: var(--da3-fg3); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; transition: all .15s;
}
.vsp-confirm-close:hover { background: var(--da3-danger-bg); color: var(--da3-danger); border-color: rgba(239,68,68,.3); }
.vsp-confirm-head {
    display: flex; align-items: flex-start; gap: 14px;
    margin-bottom: 20px;
}
.vsp-confirm-icon {
    width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0;
    background: rgba(239,68,68,.12); color: #ef4444;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px;
}
.vsp-confirm-head-text { flex: 1; min-width: 0; }
.vsp-confirm-title {
    font-size: 16px; font-weight: 800; color: var(--da3-fg1);
    margin: 0 0 4px;
}
.vsp-confirm-sub {
    font-size: 12.5px; color: var(--da3-fg2); margin: 0; line-height: 1.5;
}
.vsp-confirm-sub strong { color: var(--da3-fg1); }
.vsp-confirm-body-wrap {
    background: var(--da3-bg2); border: 1px solid var(--da3-line);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 20px;
}
.vsp-confirm-body {
    font-size: 12.5px; color: var(--da3-fg2); margin: 0 0 10px; line-height: 1.6;
}
.vsp-confirm-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 7px;
}
.vsp-confirm-list li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12px; color: var(--da3-fg2);
}
.vsp-confirm-list li i { font-size: 11px; color: var(--da3-danger); margin-top: 2px; flex-shrink: 0; }
.vsp-confirm-list li.is-positive i { color: var(--da3-success); }
.vsp-confirm-list li.is-positive    { color: var(--da3-fg1); }
.vsp-confirm-actions {
    display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
    margin: 0; /* it's a <form>, remove default form margin */
}
.vsp-confirm-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 18px;
    border-radius: 10px; font-size: 13px; font-weight: 700;
    cursor: pointer; font-family: inherit; border: 1px solid transparent;
    transition: all .15s; text-decoration: none;
}
.vsp-confirm-btn.is-ghost {
    background: var(--da3-bg2); color: var(--da3-fg2); border-color: var(--da3-bd);
}
.vsp-confirm-btn.is-ghost:hover { border-color: var(--da3-accent); color: var(--da3-accent); }
.vsp-confirm-btn.is-danger {
    background: var(--da3-danger); color: #fff;
    box-shadow: 0 3px 10px rgba(239,68,68,.3);
}
.vsp-confirm-btn.is-danger:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ─────────────────────────────────────────────────────────────────────────────
   25. LIGHT-MODE OVERRIDES for .da3.da3-admin descendants
   ───────────────────────────────────────────────────────────────────────────── */
body:not(.dark-mode) .da3.da3-admin .vsp-card  { background: #fff; border-color: #e4e4e7; }
body:not(.dark-mode) .da3.da3-admin .vsp-head  { border-bottom-color: #f4f4f5; }
body:not(.dark-mode) .da3.da3-admin .vsp-foot  { background: #f9f9fb; border-top-color: #f4f4f5; }
body:not(.dark-mode) .da3.da3-admin .vsp-body  { background: #fff; }
body:not(.dark-mode) .da3.da3-admin .vsp-creds-row { background: #f9f9fb; border-color: #e4e4e7; }
body:not(.dark-mode) .da3.da3-admin .vsp-btn   { background: #fff; border-color: #e4e4e7; color: #09090b; }
body:not(.dark-mode) .da3.da3-admin .vsp-logo  { background: #f9f9fb; border-color: #e4e4e7; }
body:not(.dark-mode) .da3.da3-admin .da3-top-bar { background: #fff; border-color: #e4e4e7; }
body:not(.dark-mode) .da3.da3-admin .vsp-notice { background: #fef3c7; border-color: rgba(245,158,11,.3); }
body:not(.dark-mode) .da3.da3-admin .vsp-notice.is-info { background: rgba(61,58,237,.06); border-color: rgba(61,58,237,.2); }
body:not(.dark-mode) .vsp-confirm { background: #fff !important; border-color: #e4e4e7 !important; }
body:not(.dark-mode) .vsp-confirm-body-wrap { background: #f9f9fb; border-color: #e4e4e7; }
body:not(.dark-mode) .vsp-confirm-close { background: #f9f9fb; border-color: #e4e4e7; }
body:not(.dark-mode) .vsp-modal .modal-content { background: #fff !important; border-color: #e4e4e7 !important; }
body:not(.dark-mode) .vsp-modal .modal-header,
body:not(.dark-mode) .vsp-modal .modal-footer  { background: #f9f9fb !important; border-color: #e4e4e7 !important; }
body:not(.dark-mode) .vsp-modal .form-control  { background: #fff !important; border-color: #d1d5db !important; color: #09090b !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   26. EXTRA RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .da3-greeting { flex-direction: column; align-items: stretch; }
    .da3-actions  { justify-content: flex-start; }
    .vsp-connect-cta { padding: 20px 14px; }
    .vsp-confirm-actions { flex-direction: column; }
    .vsp-confirm-btn { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   Users
   Merged from: users.css
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
 *
 *  EL MATAJER — USERS FEATURE CSS
 *  Extracted: 2026-05-25 (Wave 3 — CSS Architecture Consolidation)
 *
 *  Replaces embedded <style> blocks in:
 *    - resources/views/admin/user/_design.blade.php
 *    - resources/views/admin/user/edit.blade.php
 *    - resources/views/admin/user/add.blade.php
 *    - resources/views/admin/team/_design.blade.php
 *    - resources/views/admin/customers/index.blade.php
 *
 *  Consumers: All user, team, and customer management blade views
 *  Tokens:    Uses var() from tokens.css — no hardcoded colors
 *
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. DA3 LOCAL TOKEN SCOPE
   All user/team/customer pages declare the same --da3-* local token set.
   This block provides the canonical dark defaults.
   ───────────────────────────────────────────────────────────────────────────── */
.usr-page,
.team-page,
.cus-page,
.usrx-page {
    --da3-card:     #1c1c1f;
    --da3-bd:       rgba(255,255,255,.055);
    --da3-bg2:      #111113;
    --da3-shadow:   0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-fg1:      #f4f4f5;
    --da3-fg2:      #a1a1aa;
    --da3-fg3:      #71717a;
    --da3-line:     rgba(255,255,255,.06);
    --da3-hover:    rgba(255,255,255,.03);
    --da3-r:        12px;
    --da3-gap:      16px;
    --da3-accent:   #3b82f6;
    --da3-abg:      rgba(59,130,246,.12);
    --da3-success:  #10b981;
    --da3-success-bg: rgba(16,185,129,.12);
    --da3-warn:     #f59e0b;
    --da3-warn-bg:  rgba(245,158,11,.12);
    --da3-danger:   #ef4444;
    --da3-danger-bg: rgba(239,68,68,.12);
    --da3-input-bg: rgba(255,255,255,.02);
}

/* usrx-page (add/edit forms) uses --u-* aliases that bridge to da3 tokens */
.usrx-page {
    --u-radius:     14px;
    --u-radius-sm:  10px;
    --u-text:       var(--da3-fg1, #f4f4f5);
    --u-text-2:     var(--da3-fg2, #a1a1aa);
    --u-text-3:     var(--da3-fg3, #71717a);
    --u-card:       var(--da3-card, #1c1c1f);
    --u-bg2:        var(--da3-bg2, #111113);
    --u-line:       var(--da3-line, rgba(255,255,255,.06));
    --u-line-2:     var(--da3-bd, rgba(255,255,255,.08));
    --u-accent:     var(--da3-accent, #3b82f6);
    --u-accent-bg:  var(--da3-abg, rgba(59,130,246,.12));
    --u-success:    var(--da3-success, #10b981);
    --u-success-bg: var(--da3-success-bg, rgba(16,185,129,.12));
    --u-warn:       var(--da3-warn, #f59e0b);
    --u-warn-bg:    var(--da3-warn-bg, rgba(245,158,11,.12));
    --u-danger:     var(--da3-danger, #ef4444);
    --u-danger-bg:  var(--da3-danger-bg, rgba(239,68,68,.12));
    display: flex; flex-direction: column; gap: 14px;
}

/* Light-mode overrides — same scope covers all four page classes */
body:not(.dark-mode) .usr-page,
body:not(.dark-mode) .team-page,
body:not(.dark-mode) .cus-page {
    --da3-card:     #ffffff;
    --da3-bd:       #e4e4e7;
    --da3-bg2:      #f9f9fb;
    --da3-shadow:   0 1px 3px rgba(0,0,0,.07), 0 0 0 1px #e4e4e7;
    --da3-fg1:      #09090b;
    --da3-fg2:      #52525b;
    --da3-fg3:      #a1a1aa;
    --da3-line:     #f4f4f5;
    --da3-hover:    rgba(0,0,0,.02);
    --da3-input-bg: #ffffff;
    --da3-success-bg: #d1fae5;
    --da3-warn-bg:  #fef3c7;
    --da3-danger-bg: #fef2f2;
}
body:not(.dark-mode) .usrx-page {
    --u-text:   #09090b;
    --u-text-2: #52525b;
    --u-text-3: #a1a1aa;
    --u-card:   #ffffff;
    --u-bg2:    #f9f9fb;
    --u-line:   #f4f4f5;
    --u-line-2: #e4e4e7;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. USER PAGE SHELL  (.usr-page / .user-page-shell alias)
   ───────────────────────────────────────────────────────────────────────────── */
/* Headings inside any user-area page */
.usr-page h1, .usr-page h2, .usr-page h3,
.usr-page h4, .usr-page h5, .usr-page h6,
.team-page h1, .team-page h2, .team-page h3,
.team-page h4, .team-page h5, .team-page h6 {
    color: var(--da3-fg1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. HERO / PAGE HEADER  (.user-hero)
   ───────────────────────────────────────────────────────────────────────────── */
.usr-hero {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    padding: 18px 22px;
    color: var(--da3-fg1);
    margin-bottom: var(--da3-gap);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.usr-hero-content {
    flex: 1; min-width: 240px;
    display: flex; align-items: center; gap: 12px;
}
.usr-hero-ico {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.usr-hero-info { min-width: 0; }
.usr-hero-tag {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--da3-success-bg);
    color: var(--da3-success);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px; font-weight: 700;
    margin-bottom: 4px;
}
.usr-hero-tag::before {
    content: '';
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--da3-success);
    animation: usrPulse 2s ease-in-out infinite;
}
@keyframes usrPulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.usr-hero h1 {
    font-size: 20px; font-weight: 700;
    color: var(--da3-fg1);
    margin: 0 0 3px;
    letter-spacing: -.2px;
    line-height: 1.2;
}
.usr-hero p {
    font-size: 12.5px; color: var(--da3-fg3);
    margin: 0; max-width: 480px;
}
.usr-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* usrx-hero (add/edit forms — extended hero with radial glow) */
.usrx-hero {
    background: var(--u-card);
    border: 1px solid var(--u-line-2);
    border-radius: var(--u-radius);
    padding: 22px 26px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    position: relative; overflow: hidden;
}
.usrx-hero::before {
    content: ''; position: absolute;
    top: -30%; inset-inline-end: -10%;
    width: 220px; height: 220px;
    background: radial-gradient(circle, color-mix(in srgb, var(--u-accent) 18%, transparent), transparent 65%);
    pointer-events: none;
}
.usrx-hero-content { display: flex; align-items: center; gap: 14px; min-width: 260px; }
.usrx-hero-ico {
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--u-accent-bg); color: var(--u-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}
.usrx-hero h1 { font-size: 22px; font-weight: 900; color: var(--u-text); margin: 0 0 4px; letter-spacing: -.02em; }
.usrx-hero p  { font-size: 12.5px; color: var(--u-text-3); margin: 0; }
.usrx-back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; border-radius: 9px;
    background: var(--u-bg2);
    border: 1px solid var(--u-line-2);
    color: var(--u-text-2);
    text-decoration: none;
    font-size: 12.5px; font-weight: 700;
    transition: color .15s, border-color .15s;
}
.usrx-back:hover { color: var(--u-text); border-color: var(--u-accent); }

/* team-page page header */
.team-page .page-header-ext,
.team-page .builder-toolbar-ext {
    background: var(--da3-card) !important;
    border: 1px solid var(--da3-bd) !important;
    border-radius: var(--da3-r) !important;
    box-shadow: var(--da3-shadow) !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin-bottom: var(--da3-gap) !important;
}
.team-page .page-header-ext h1,
.team-page .builder-toolbar-ext h4 {
    color: var(--da3-fg1) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: -.2px !important;
    margin: 0 0 3px !important;
}
.team-page .premium-heading { color: var(--da3-fg1) !important; }
.team-page .page-header-ext p,
.team-page .builder-toolbar-ext p,
.team-page .text-muted { color: var(--da3-fg3) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   4. CTA / ACTION BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */
.usr-hero-cta {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--da3-accent); color: var(--white, #fff);
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 700; font-size: 13px;
    text-decoration: none;
    transition: filter .15s, transform .15s;
    border: none; cursor: pointer; font-family: inherit;
}
.usr-hero-cta:hover { filter: brightness(1.08); transform: translateY(-1px); color: var(--white, #fff); }
.usr-hero-cta-ghost {
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 600; font-size: 13px;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s, color .15s, border-color .15s;
    font-family: inherit;
}
.usr-hero-cta-ghost:hover { background: var(--da3-abg); color: var(--da3-accent); border-color: var(--da3-accent); }

.usr-btn {
    height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: .82rem; font-weight: 700;
    border: 1.5px solid var(--da3-bd);
    background: var(--da3-bg2);
    color: var(--da3-fg2);
    display: inline-flex; align-items: center; gap: 7px;
    text-decoration: none;
    transition: border-color .15s, color .15s, transform .15s;
    cursor: pointer; font-family: inherit;
}
.usr-btn:hover { border-color: var(--da3-accent); color: var(--da3-accent); }
.usr-btn-primary {
    background: var(--da3-accent); color: var(--white, #fff); border-color: var(--da3-accent);
}
.usr-btn-primary:hover { background: var(--da3-accent); color: var(--white, #fff); transform: translateY(-1px); filter: brightness(1.08); }

/* usrx buttons */
.usrx-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px; border-radius: var(--u-radius-sm);
    font-size: 13px; font-weight: 800;
    border: 1.5px solid transparent;
    cursor: pointer; text-decoration: none;
    transition: filter .15s, transform .15s;
}
.usrx-btn-primary { background: var(--u-accent); color: var(--white, #fff); }
.usrx-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); color: var(--white, #fff); }
.usrx-btn-ghost { background: var(--u-bg2); color: var(--u-text-2); border-color: var(--u-line-2); }
.usrx-btn-ghost:hover { color: var(--u-text); border-color: var(--u-accent); }

/* team page primary/ghost buttons */
.team-page .btn-premium-ext {
    border-radius: 10px !important; padding: 8px 16px !important;
    font-size: 13px !important; font-weight: 700 !important;
    border: 1px solid transparent !important;
    transition: filter .15s, transform .15s !important;
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    box-shadow: none !important;
}
.team-page .btn-premium-ext.btn-primary,
.team-page .btn-premium-ext.shadow-premium {
    background: var(--da3-accent) !important; color: var(--white, #fff) !important;
    border-color: var(--da3-accent) !important;
}
.team-page .btn-premium-ext.btn-primary:hover,
.team-page .btn-premium-ext.shadow-premium:hover { filter: brightness(1.08); transform: translateY(-1px); }
.team-page .btn-premium-ext.btn-ghost-premium {
    background: var(--da3-bg2) !important; color: var(--da3-fg1) !important;
    border-color: var(--da3-bd) !important;
}
.team-page .btn-premium-ext.btn-ghost-premium:hover {
    background: var(--da3-abg) !important; color: var(--da3-accent) !important;
    border-color: var(--da3-accent) !important;
}
.team-page .btn-action {
    width: 32px; height: 32px; border-radius: 8px !important;
    border: 1px solid var(--da3-bd) !important;
    background: var(--da3-bg2) !important; color: var(--da3-fg1) !important;
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s !important;
    font-size: 13px;
}
.team-page .btn-action:hover {
    background: var(--da3-abg) !important; color: var(--da3-accent) !important;
    border-color: var(--da3-accent) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. KPI STATS STRIP
   ───────────────────────────────────────────────────────────────────────────── */
.usr-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: var(--da3-gap);
}
.usr-stat {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 10px;
    position: relative;
    transition: transform .15s, border-color .15s;
}
.usr-stat:hover {
    transform: translateY(-2px);
    border-color: var(--accent-color, var(--da3-accent));
}
.usr-stat-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.usr-stat-ico {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--accent-bg, var(--da3-abg));
    color: var(--accent-color, var(--da3-accent));
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.usr-stat-info { flex: 1; min-width: 0; }
.usr-stat-lbl {
    display: block; font-size: 11px; font-weight: 700;
    color: var(--da3-fg2); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px;
}
.usr-stat-val {
    display: block; font-size: 22px; font-weight: 800;
    color: var(--da3-fg1); line-height: 1.1; letter-spacing: -.4px;
}

/* Per-stat accent presets */
.usr-stat.s-blue  { --accent-color: #818cf8; --accent-bg: rgba(99,102,241,.15); }
.usr-stat.s-green { --accent-color: #34d399; --accent-bg: rgba(16,185,129,.15); }
.usr-stat.s-amber { --accent-color: #fbbf24; --accent-bg: rgba(245,158,11,.15); }
.usr-stat.s-cyan  { --accent-color: #67e8f9; --accent-bg: rgba(6,182,212,.15); }

/* team-page stat cards */
.team-page .stats-grid-ext {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 12px !important; margin-bottom: var(--da3-gap) !important;
}
.team-page .stat-card-ext {
    background: var(--da3-card) !important; border: 1px solid var(--da3-bd) !important;
    border-radius: var(--da3-r) !important; box-shadow: var(--da3-shadow) !important;
    padding: 16px 18px !important;
    display: flex !important; align-items: center !important; gap: 14px !important;
    transition: transform .15s, border-color .15s !important;
}
.team-page .stat-card-ext:hover { transform: translateY(-2px); border-color: var(--da3-accent) !important; }
.team-page .stat-icon-ext {
    width: 40px !important; height: 40px !important; border-radius: 10px !important;
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important; font-size: 14px !important; flex-shrink: 0 !important;
}
.team-page .stat-info { flex: 1; min-width: 0; }
.team-page .stat-label {
    font-size: 11px !important; font-weight: 700 !important; color: var(--da3-fg2) !important;
    text-transform: uppercase !important; letter-spacing: .4px !important; margin-bottom: 3px !important;
}
.team-page .stat-value {
    font-size: 22px !important; font-weight: 800 !important; color: var(--da3-fg1) !important;
    line-height: 1.1 !important; letter-spacing: -.4px !important;
}

/* cus-page stats */
.cus-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px; margin-bottom: 22px;
}
.cus-stat {
    background: var(--da3-card); border: 1px solid var(--da3-bd);
    border-radius: 14px; padding: 18px 20px;
    display: flex; align-items: center; gap: 14px;
    position: relative; overflow: hidden;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.cus-stat::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--accent-glow, rgba(99,102,241,.08)) 0%, transparent 60%);
    pointer-events: none;
}
.cus-stat:hover { transform: translateY(-2px); border-color: var(--accent-color, rgba(99,102,241,.35)); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.cus-stat-ico {
    width: 46px; height: 46px; border-radius: 12px;
    background: var(--accent-bg, rgba(99,102,241,.15));
    color: var(--accent-color, #818cf8);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0; position: relative; z-index: 1;
}
.cus-stat-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.cus-stat-val  { display: block; font-size: 1.55rem; font-weight: 900; color: var(--da3-fg1); line-height: 1.05; letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cus-stat-lbl  { display: block; font-size: .7rem; font-weight: 800; color: var(--da3-fg2); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.cus-stat.s-blue  { --accent-color: #818cf8; --accent-bg: rgba(99,102,241,.15); --accent-glow: rgba(99,102,241,.08); }
.cus-stat.s-green { --accent-color: #34d399; --accent-bg: rgba(16,185,129,.15); --accent-glow: rgba(16,185,129,.08); }
.cus-stat.s-pink  { --accent-color: #f9a8d4; --accent-bg: rgba(236,72,153,.15); --accent-glow: rgba(236,72,153,.08); }
.cus-stat.s-amber { --accent-color: #fbbf24; --accent-bg: rgba(245,158,11,.15); --accent-glow: rgba(245,158,11,.08); }
.cus-stat.s-cyan  { --accent-color: #67e8f9; --accent-bg: rgba(6,182,212,.15);  --accent-glow: rgba(6,182,212,.08); }

/* ─────────────────────────────────────────────────────────────────────────────
   6. FILTER TOOLBAR  (.user-filter-bar)
   ───────────────────────────────────────────────────────────────────────────── */
.usr-controls {
    background: var(--da3-card); border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r); box-shadow: var(--da3-shadow);
    padding: 12px 16px; margin-bottom: var(--da3-gap);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.usr-tabs {
    display: inline-flex; gap: 4px;
    background: var(--da3-bg2); border-radius: 10px;
    padding: 4px; border: 1px solid var(--da3-bd);
}
.usr-tab {
    padding: 7px 14px; border-radius: 8px;
    font-size: .78rem; font-weight: 700; color: var(--da3-fg2);
    background: transparent; border: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s, color .15s; font-family: inherit; white-space: nowrap;
}
.usr-tab:hover { color: var(--da3-fg1); }
.usr-tab.is-active { background: var(--da3-accent); color: var(--white, #fff); box-shadow: 0 2px 6px rgba(59,130,246,.25); }
.usr-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    font-size: .62rem; font-weight: 800;
    background: var(--da3-card); color: var(--da3-fg2); border: 1px solid var(--da3-bd);
}
.usr-tab.is-active .usr-tab-count { background: rgba(255,255,255,.25); color: var(--white, #fff); border-color: transparent; }

.usr-search { flex: 1; min-width: 200px; position: relative; }
.usr-search i {
    position: absolute; top: 50%; transform: translateY(-50%);
    color: var(--da3-fg3); font-size: .8rem; pointer-events: none;
}
html[dir="rtl"] .usr-search i { right: 12px; }
html[dir="ltr"] .usr-search i { left: 12px; }
.usr-search input {
    width: 100%; height: 38px; padding: 0 36px;
    background: var(--da3-bg2); border: 1.5px solid var(--da3-bd); border-radius: 10px;
    color: var(--da3-fg1); font-size: .85rem; font-weight: 600;
    outline: none; transition: border-color .2s, box-shadow .2s; font-family: inherit;
}
.usr-search input:focus { border-color: var(--da3-accent); box-shadow: 0 0 0 3px var(--da3-abg); }

.usr-filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--da3-bg2); border: 1.5px solid var(--da3-bd);
    border-radius: 999px; padding: 7px 14px;
    font-size: .76rem; font-weight: 700; color: var(--da3-fg2);
    cursor: pointer; transition: all .15s; font-family: inherit;
}
.usr-filter-chip:hover, .usr-filter-chip.is-on {
    border-color: var(--da3-accent); color: var(--da3-accent); background: var(--da3-abg);
}

/* cus-page toolbar */
.cus-toolbar {
    background: var(--da3-card); border: 1px solid var(--da3-bd);
    border-radius: 14px; padding: 12px 16px; margin-bottom: 18px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cus-search { flex: 1; min-width: 220px; position: relative; }
.cus-search i { position: absolute; top: 50%; transform: translateY(-50%); color: var(--da3-fg3); font-size: .8rem; pointer-events: none; }
html[dir="rtl"] .cus-search i { right: 12px; }
html[dir="ltr"] .cus-search i { left: 12px; }
.cus-search input {
    width: 100%; height: 38px; padding: 0 36px;
    background: var(--da3-bg2); border: 1.5px solid var(--da3-bd); border-radius: 10px;
    color: var(--da3-fg1); font-size: .85rem; font-weight: 600;
    outline: none; font-family: inherit; transition: border-color .2s, box-shadow .2s;
}
.cus-search input:focus { border-color: var(--da3-accent); box-shadow: 0 0 0 3px var(--da3-abg); }

/* ─────────────────────────────────────────────────────────────────────────────
   7. CARD GRID  (.usr-grid)
   ───────────────────────────────────────────────────────────────────────────── */
.usr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.usr-card {
    background: var(--da3-card); border: 1px solid var(--da3-bd);
    border-radius: 14px; overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, border-color .2s;
    position: relative;
}
.usr-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.08); border-color: var(--da3-accent); }
.usr-card.is-demo {
    border-style: dashed; border-color: rgba(245,158,11,.45);
    background: linear-gradient(180deg, rgba(245,158,11,.04) 0%, var(--da3-card) 50%);
}
.usr-card.is-demo:hover { border-color: rgba(245,158,11,.7); box-shadow: 0 12px 32px rgba(245,158,11,.15); }

.usr-card-top {
    padding: 16px 16px 0; position: relative;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px; min-height: 56px;
}
.usr-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    font-size: .65rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.usr-status .dot { width: 5px; height: 5px; border-radius: 50%; }
.usr-status.is-active   { background: var(--da3-success-bg); color: var(--da3-success); }
.usr-status.is-active   .dot { background: var(--da3-success); box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
.usr-status.is-inactive { background: var(--da3-danger-bg);  color: var(--da3-danger); }
.usr-status.is-inactive .dot { background: var(--da3-danger); }
.usr-demo-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    font-size: .65rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    background: var(--da3-warn-bg); color: var(--da3-warn); border: 1px solid rgba(245,158,11,.35);
}

/* Avatar */
.usr-avatar-wrap { position: relative; flex-shrink: 0; width: 56px; height: 56px; }
.usr-avatar {
    width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
    background: var(--da3-bg2); border: 2.5px solid var(--da3-card); box-shadow: 0 0 0 1px var(--da3-bd);
}
.usr-avatar-fallback {
    width: 100%; height: 100%; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.05rem; color: var(--white, #fff);
    border: 2.5px solid var(--da3-card); box-shadow: 0 0 0 1px var(--da3-bd);
}

/* Card body */
.usr-card-body { padding: 12px 16px 0; }
.usr-name {
    font-size: .98rem; font-weight: 800; color: var(--da3-fg1);
    margin: 0 0 2px; letter-spacing: -.02em;
    display: flex; align-items: center; gap: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usr-email {
    font-size: .78rem; font-weight: 600; color: var(--da3-fg3);
    margin: 0 0 12px;
    display: flex; align-items: center; gap: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usr-email i { font-size: .72rem; flex-shrink: 0; }

/* Meta rows */
.usr-meta { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.usr-meta-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: .78rem; padding: 8px 12px; border-radius: 8px;
    background: var(--da3-bg2); border: 1px solid var(--da3-line);
}
.usr-meta-row .lbl { display: inline-flex; align-items: center; gap: 6px; color: var(--da3-fg2); font-weight: 700; }
.usr-meta-row .lbl i { color: var(--da3-accent); font-size: .8rem; width: 16px; text-align: center; }
.usr-meta-row .val { color: var(--da3-fg1); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }

/* Badges */
.usr-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.usr-badge-pos  { background: var(--da3-success-bg); color: var(--da3-success); }
.usr-badge-neg  { background: var(--da3-danger-bg);  color: var(--da3-danger); }
.usr-badge-life { background: var(--da3-abg); color: var(--da3-accent); }

/* Card footer actions */
.usr-foot {
    display: flex; gap: 5px; padding: 12px 16px 14px;
    border-top: 1px solid var(--da3-line); background: var(--da3-bg2); margin-top: auto;
}
.usr-act {
    flex: 1; height: 36px; border-radius: 8px;
    background: var(--da3-card); border: 1px solid var(--da3-bd);
    color: var(--da3-fg2); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem; text-decoration: none;
    transition: background .12s, color .12s, border-color .12s, transform .12s;
}
.usr-act:hover { transform: translateY(-1px); }
.usr-act.edit:hover     { background: var(--da3-abg);        color: var(--da3-accent);  border-color: var(--da3-accent); }
.usr-act.login:hover    { background: var(--da3-success-bg); color: var(--da3-success); border-color: var(--da3-success); }
.usr-act.view:hover     { background: rgba(6,182,212,.1);   color: #0e7490;            border-color: #06b6d4; }
.usr-act.password:hover { background: var(--da3-warn-bg);   color: var(--da3-warn);    border-color: var(--da3-warn); }
.usr-act.delete:hover   { background: var(--da3-danger-bg); color: var(--da3-danger);  border-color: var(--da3-danger); }
.usr-act.is-disabled    { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* Empty state */
.usr-empty {
    grid-column: 1 / -1; padding: 50px 20px; text-align: center;
    background: var(--da3-card); border: 1.5px dashed var(--da3-bd); border-radius: 14px;
}
.usr-empty-icon {
    width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 14px;
    background: var(--da3-bg2); display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: var(--da3-fg3);
}
.usr-empty h3 { font-size: 1rem; font-weight: 800; color: var(--da3-fg1); margin: 0 0 4px; }
.usr-empty p  { font-size: .82rem; color: var(--da3-fg3); margin: 0; }

/* Section divider */
.usr-section-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 22px 0 14px; color: var(--da3-fg3);
    font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
}
.usr-section-divider::before, .usr-section-divider::after { content: ''; flex: 1; height: 1px; background: var(--da3-line); }

/* ─────────────────────────────────────────────────────────────────────────────
   8. FORM PAGES (add / edit vendor)  — .usrx-section, .usrx-grid, inputs
   ───────────────────────────────────────────────────────────────────────────── */
.usrx-section {
    background: var(--u-card); border: 1px solid var(--u-line-2);
    border-radius: var(--u-radius); overflow: hidden; margin-bottom: 5px;
}
.usrx-section-head {
    display: flex; align-items: center; gap: 10px; padding: 14px 20px;
    background: var(--u-bg2); border-bottom: 1px solid var(--u-line);
    font-size: 13px; font-weight: 800; color: var(--u-text);
}
.usrx-section-head i.usrx-head-ico {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--u-accent-bg); color: var(--u-accent);
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.usrx-section-head i.usrx-head-ico.is-warn    { background: var(--u-warn-bg);    color: var(--u-warn); }
.usrx-section-head i.usrx-head-ico.is-success { background: var(--u-success-bg); color: var(--u-success); }
.usrx-section-head .usrx-head-ext { margin-inline-start: auto; font-size: 11.5px; font-weight: 600; color: var(--u-text-3); }
.usrx-section-body { padding: 18px 20px; }

.usrx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.usrx-grid.is-1 { grid-template-columns: 1fr; }
.usrx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.usrx-field.is-full { grid-column: 1 / -1; }
.usrx-label { font-size: 12.5px; font-weight: 700; color: var(--u-text-2); display: flex; align-items: center; gap: 5px; }
.usrx-label .usrx-req { color: var(--u-danger); font-weight: 800; }

.usrx-page .form-control,
.usrx-page .form-select {
    width: 100%; background: var(--u-bg2) !important;
    border: 1.5px solid var(--u-line-2) !important;
    border-radius: var(--u-radius-sm) !important;
    color: var(--u-text) !important;
    padding: 10px 12px !important; font-size: 13px; font-weight: 600;
    outline: none; box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
}
.usrx-page .form-control:focus,
.usrx-page .form-select:focus {
    border-color: var(--u-accent) !important;
    box-shadow: 0 0 0 3px var(--u-accent-bg) !important;
}

/* Slug input */
.usrx-slug {
    display: flex; align-items: stretch;
    background: var(--u-bg2); border: 1.5px solid var(--u-line-2);
    border-radius: var(--u-radius-sm); overflow: hidden;
    transition: border-color .15s, box-shadow .15s; direction: ltr;
}
.usrx-slug:focus-within  { border-color: var(--u-accent); box-shadow: 0 0 0 3px var(--u-accent-bg); }
.usrx-slug.is-available  { border-color: var(--u-success); }
.usrx-slug.is-taken      { border-color: var(--u-danger); }
.usrx-slug.is-invalid    { border-color: var(--u-warn); }
.usrx-slug-prefix { padding: 10px 12px; background: var(--u-card); color: var(--u-text-3); font-size: 12.5px; font-weight: 700; border-inline-end: 1px solid var(--u-line-2); white-space: nowrap; }
.usrx-slug input { flex: 1; min-width: 0; background: transparent !important; border: 0 !important; outline: 0 !important; padding: 10px 12px !important; color: var(--u-text) !important; font-size: 13px; font-weight: 700; box-shadow: none !important; }
.usrx-slug-status { display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; font-size: 14px; border-inline-start: 1px solid var(--u-line-2); background: var(--u-card); color: var(--u-text-3); }
.usrx-slug.is-available .usrx-slug-status { color: var(--u-success); }
.usrx-slug.is-taken     .usrx-slug-status { color: var(--u-danger); }
.usrx-slug.is-invalid   .usrx-slug-status { color: var(--u-warn); }
.usrx-slug-msg { margin-top: 6px; font-size: 11.5px; font-weight: 700; display: none; align-items: center; gap: 6px; }
.usrx-slug-msg.is-on      { display: inline-flex; }
.usrx-slug-msg.is-success { color: var(--u-success); }
.usrx-slug-msg.is-danger  { color: var(--u-danger); }
.usrx-slug-msg.is-warn    { color: var(--u-warn); }

/* Footer action row */
.usrx-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* ─────────────────────────────────────────────────────────────────────────────
   9. SHARED FORM CONTROLS  (.usr-page, .team-page)
   ───────────────────────────────────────────────────────────────────────────── */
.usr-page .card,
.team-page .card {
    background: var(--da3-card) !important; border: 1px solid var(--da3-bd) !important;
    border-radius: var(--da3-r) !important; box-shadow: var(--da3-shadow) !important; color: var(--da3-fg1) !important;
}
.usr-page .card-body  { color: var(--da3-fg1) !important; padding: 22px !important; }
.team-page .card-body { color: var(--da3-fg1) !important; }
.usr-page .card-header, .usr-page .card-footer,
.team-page .card-header, .team-page .card-footer {
    background: transparent !important; border-color: var(--da3-line) !important; color: var(--da3-fg1) !important;
}
.team-page .card-title { color: var(--da3-fg1) !important; }

.usr-page .form-control, .usr-page .form-select,
.usr-page input[type="text"], .usr-page input[type="email"],
.usr-page input[type="password"], .usr-page input[type="number"],
.usr-page input[type="tel"], .usr-page input[type="file"],
.usr-page select, .usr-page textarea,
.team-page .form-control, .team-page .form-select,
.team-page input[type="text"], .team-page input[type="email"],
.team-page input[type="password"], .team-page input[type="number"],
.team-page input[type="tel"], .team-page select, .team-page textarea {
    background: var(--da3-input-bg) !important; border: 1px solid var(--da3-bd) !important;
    border-radius: 10px !important; color: var(--da3-fg1) !important;
    font-size: 13px !important; padding: 9px 12px !important;
    outline: none !important; transition: border-color .15s, box-shadow .15s !important;
}
.usr-page .form-control::placeholder, .usr-page input::placeholder, .usr-page textarea::placeholder,
.team-page .form-control::placeholder, .team-page input::placeholder, .team-page textarea::placeholder { color: var(--da3-fg3) !important; }
.usr-page .form-control:focus, .usr-page .form-select:focus, .usr-page input:focus, .usr-page select:focus, .usr-page textarea:focus,
.team-page .form-control:focus, .team-page .form-select:focus, .team-page input:focus, .team-page select:focus, .team-page textarea:focus {
    border-color: var(--da3-accent) !important; box-shadow: 0 0 0 3px var(--da3-abg) !important;
}

.usr-page .form-label, .usr-page label.form-label,
.team-page .form-label, .team-page label {
    font-size: 11px !important; font-weight: 700 !important; color: var(--da3-fg2) !important;
    text-transform: uppercase !important; letter-spacing: .4px !important; margin-bottom: 6px !important;
}
.usr-page .form-group { margin-bottom: 14px; }
.usr-page .form-check-input, .team-page .form-check-input {
    background-color: var(--da3-bg2) !important; border: 1.5px solid var(--da3-bd) !important;
    width: 18px; height: 18px; border-radius: 6px; cursor: pointer;
}
.usr-page .form-check-input:checked, .team-page .form-check-input:checked {
    background-color: var(--da3-accent) !important; border-color: var(--da3-accent) !important;
}
.usr-page .form-check-label, .team-page .form-check-label { color: var(--da3-fg1) !important; }

.usr-page .btn, .team-page .btn-ghost {
    border-radius: 10px !important; font-weight: 700 !important; padding: 9px 18px !important; font-size: 13px !important;
    transition: filter .15s, transform .15s, background .15s, color .15s, border-color .15s !important;
    border: 1px solid transparent !important;
}
.usr-page .btn-primary, .team-page .btn-primary {
    background: var(--da3-accent) !important; border-color: var(--da3-accent) !important; color: var(--white, #fff) !important;
}
.usr-page .btn-primary:hover, .team-page .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.usr-page .btn-light, .usr-page .btn-secondary,
.team-page .btn-ghost {
    background: var(--da3-bg2) !important; border-color: var(--da3-bd) !important; color: var(--da3-fg1) !important;
}
.usr-page .btn-light:hover, .usr-page .btn-secondary:hover,
.team-page .btn-ghost:hover {
    background: var(--da3-abg) !important; color: var(--da3-accent) !important; border-color: var(--da3-accent) !important;
}
.usr-page .btn-danger {
    background: var(--da3-danger-bg) !important; border-color: rgba(239,68,68,.4) !important; color: var(--da3-danger) !important;
}
.usr-page .btn-danger:hover { background: var(--da3-danger) !important; color: var(--white, #fff) !important; border-color: var(--da3-danger) !important; }

.usr-page .input-group { border-radius: 10px; overflow: hidden; }
.usr-page .input-group-text {
    background: var(--da3-card) !important; border: 1px solid var(--da3-bd) !important;
    color: var(--da3-fg2) !important; font-size: 12.5px; font-weight: 600;
    border-radius: 10px !important; padding: 9px 12px !important;
}
.usr-page fieldset {
    background: var(--da3-bg2); border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r); padding: 18px 20px 8px; margin-bottom: var(--da3-gap);
}
.usr-page legend {
    width: auto; float: none; font-size: 12px; font-weight: 700; color: var(--da3-fg2);
    text-transform: uppercase; letter-spacing: .6px; padding: 0 8px; margin-bottom: 4px;
    background: var(--da3-card); border: 1px solid var(--da3-bd); border-radius: 8px;
    display: inline-flex; align-items: center; gap: 6px;
}
.usr-page .form-action-footer {
    background: var(--da3-bg2); border: 1px solid var(--da3-bd);
    padding: 14px 16px; border-radius: var(--da3-r); margin-top: 12px;
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
}
.usr-page .text-danger, .team-page .text-danger { color: var(--da3-danger) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   10. TABLE PATTERNS  (cus-tbl, team .table)
   ───────────────────────────────────────────────────────────────────────────── */
.cus-tbl-wrap {
    background: var(--da3-card); border: 1px solid var(--da3-bd);
    border-radius: 14px; overflow: hidden;
}
.cus-tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.cus-tbl thead tr { background: var(--da3-bg2); border-bottom: 1px solid var(--da3-line); }
.cus-tbl thead th {
    font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: var(--da3-fg2); padding: 14px 16px; border-bottom: 1px solid var(--da3-line);
    white-space: nowrap; text-align: start;
}
.cus-tbl tbody tr { transition: background .12s; }
.cus-tbl tbody tr:hover { background: var(--da3-hover); }

.team-page table { color: var(--da3-fg1) !important; }
.team-page .table thead th, .team-page .bg-soft-ext {
    background: var(--da3-bg2) !important; border-bottom: 1px solid var(--da3-line) !important;
    color: var(--da3-fg2) !important; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
}
.team-page .table tbody td { border-color: var(--da3-line) !important; color: var(--da3-fg1) !important; background: transparent; }
.team-page .table tbody tr:hover td { background: var(--da3-hover) !important; }
.team-page .table tbody tr:last-child td { border-bottom: 0 !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   11. DARK-MODE STATUS BADGE OVERRIDES
   ───────────────────────────────────────────────────────────────────────────── */
body.dark-mode .usr-status.is-active   { background: rgba(16,185,129,.18); color: #6ee7b7; }
body.dark-mode .usr-status.is-inactive { background: rgba(239,68,68,.18);  color: #fca5a5; }
body.dark-mode .usr-demo-tag           { background: rgba(245,158,11,.18); color: #fcd34d; }
body.dark-mode .usr-badge-pos  { background: rgba(16,185,129,.18); color: #6ee7b7; }
body.dark-mode .usr-badge-neg  { background: rgba(239,68,68,.18);  color: #fca5a5; }
body.dark-mode .usr-badge-life { background: rgba(99,102,241,.22); color: #c7d2fe; }
body.dark-mode .usr-act.edit:hover     { color: #c7d2fe; }
body.dark-mode .usr-act.login:hover    { color: #6ee7b7; }
body.dark-mode .usr-act.view:hover     { color: #67e8f9; }
body.dark-mode .usr-act.password:hover { color: #fcd34d; }
body.dark-mode .usr-act.delete:hover   { color: #fca5a5; }
body.dark-mode .usr-stat.s-blue  { --accent-color: #818cf8; }
body.dark-mode .usr-stat.s-green { --accent-color: #34d399; }
body.dark-mode .usr-stat.s-amber { --accent-color: #fbbf24; }
body.dark-mode .usr-stat.s-cyan  { --accent-color: #67e8f9; }

/* ─────────────────────────────────────────────────────────────────────────────
   12. LIGHT-MODE POLISH
   ───────────────────────────────────────────────────────────────────────────── */
body:not(.dark-mode) .usr-card { background: var(--white, #ffffff); border-color: var(--border-color, #e5e7eb); }
body:not(.dark-mode) .usr-card:hover { box-shadow: 0 14px 36px rgba(59,130,246,.12); }
body:not(.dark-mode) .usr-card.is-demo { background: linear-gradient(180deg, rgba(245,158,11,.06) 0%, var(--white, #fff) 50%); }
body:not(.dark-mode) .usr-controls { background: var(--white, #fff); border-color: var(--border-color, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
body:not(.dark-mode) .usr-tabs { background: var(--bg-light, #f3f4f6); border-color: var(--border-color, #e5e7eb); }
body:not(.dark-mode) .usr-search input { background: var(--bg-light, #f9fafb); color: var(--text-color, #111827); border-color: #d1d5db; }
body:not(.dark-mode) .usr-search input:focus { background: var(--white, #fff); }
body:not(.dark-mode) .usr-filter-chip { background: var(--bg-light, #f9fafb); border-color: #d1d5db; color: #4b5563; }
body:not(.dark-mode) .usr-meta-row { background: var(--bg-light, #f9fafb); border-color: var(--border-color, #e5e7eb); }
body:not(.dark-mode) .usr-meta-row .val { color: var(--text-color, #111827); }
body:not(.dark-mode) .usr-empty { background: var(--white, #fff); border-color: #d1d5db; }
body:not(.dark-mode) .usr-foot { background: linear-gradient(180deg, transparent, var(--bg-light, #f9fafb)); }
body:not(.dark-mode) .usr-act { background: var(--white, #fff); border-color: var(--border-color, #e5e7eb); color: var(--text-muted, #6b7280); }
body:not(.dark-mode) .usr-btn { background: var(--white, #fff); border-color: #d1d5db; color: #374151; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
body:not(.dark-mode) .usr-name { color: var(--text-color, #111827); }
body:not(.dark-mode) .usr-email { color: var(--text-muted, #6b7280); }
body:not(.dark-mode) .usr-stat { background: var(--white, #fff); border-color: var(--border-color, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
body:not(.dark-mode) .usr-stat:hover { box-shadow: 0 10px 26px rgba(0,0,0,.07); }
body:not(.dark-mode) .usr-stat-val { color: var(--text-color, #111827); }
body:not(.dark-mode) .usr-stat-lbl { color: var(--text-muted, #6b7280); }
body:not(.dark-mode) .usr-stat.s-blue  { --accent-color: #4f46e5; }
body:not(.dark-mode) .usr-stat.s-green { --accent-color: #047857; }
body:not(.dark-mode) .usr-stat.s-amber { --accent-color: #b45309; }
body:not(.dark-mode) .usr-stat.s-cyan  { --accent-color: #0e7490; }
body:not(.dark-mode) .cus-stat { background: var(--white, #fff); border-color: var(--border-color, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
body:not(.dark-mode) .cus-stat-val { color: var(--text-color, #111827); }
body:not(.dark-mode) .cus-stat-lbl { color: var(--text-muted, #6b7280); }
body:not(.dark-mode) .cus-stat.s-blue  { --accent-color: #4f46e5; }
body:not(.dark-mode) .cus-stat.s-green { --accent-color: #047857; }
body:not(.dark-mode) .cus-stat.s-pink  { --accent-color: #9d174d; }
body:not(.dark-mode) .cus-stat.s-amber { --accent-color: #b45309; }
body:not(.dark-mode) .cus-stat.s-cyan  { --accent-color: #0e7490; }
body:not(.dark-mode) .cus-toolbar { background: var(--white, #fff); border-color: var(--border-color, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
body:not(.dark-mode) .cus-search input { background: var(--bg-light, #f9fafb); border-color: #d1d5db; color: var(--text-color, #111827); }
body:not(.dark-mode) .usr-page fieldset { background: #fafbfc; border-color: var(--border-color, #e5e7eb); }
body:not(.dark-mode) .usr-page legend { background: var(--white, #fff); border-color: var(--border-color, #e5e7eb); color: #52525b; }
body:not(.dark-mode) .usr-page .form-action-footer { background: #fafbfc; border-color: var(--border-color, #e5e7eb); }
body:not(.dark-mode) .usr-page .input-group-text { background: var(--bg-light, #f3f4f6); border-color: #d1d5db; color: var(--text-muted, #6b7280); }

/* ─────────────────────────────────────────────────────────────────────────────
   13. RTL DIRECTIONAL ICON FLIPS
   ───────────────────────────────────────────────────────────────────────────── */
html[dir="rtl"] .usr-page .fa-arrow-left, html[dir="rtl"] .usr-page .fa-arrow-right,
html[dir="rtl"] .usr-page .fa-chevron-left, html[dir="rtl"] .usr-page .fa-chevron-right,
html[dir="rtl"] .usr-page .fa-angle-left, html[dir="rtl"] .usr-page .fa-angle-right,
html[dir="rtl"] .usr-page .fa-arrow-right-to-bracket, html[dir="rtl"] .usr-page .fa-arrow-left-from-bracket,
html[dir="rtl"] .team-page .fa-arrow-left, html[dir="rtl"] .team-page .fa-arrow-right,
html[dir="rtl"] .team-page .fa-chevron-left, html[dir="rtl"] .team-page .fa-chevron-right,
html[dir="rtl"] .team-page .fa-angle-left, html[dir="rtl"] .team-page .fa-angle-right,
html[dir="rtl"] .team-page .fa-arrow-right-to-bracket, html[dir="rtl"] .team-page .fa-arrow-left-from-bracket,
html[dir="rtl"] .team-page .fa-arrow-up-right-from-square {
    transform: scaleX(-1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. RESPONSIVE BREAKPOINTS
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .usrx-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
    .usr-controls { padding: 10px; }
    .usr-tabs { width: 100%; overflow-x: auto; }
    .usr-foot { padding: 10px; gap: 3px; }
    .usr-act { font-size: .8rem; }
    .usr-page .card-body { padding: 16px !important; }
    .usr-page fieldset { padding: 14px 14px 4px; }
    .usr-hero { flex-direction: column; align-items: stretch; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   15. CUSTOMERS TABLE CELL COMPONENTS
       (.cus-cell, .cus-avatar-wrap, .cus-avatar, .cus-avatar-init,
        .cus-name-block, .cus-name, .cus-meta, .cus-idx, .cus-vip-badge,
        .cus-presence-dot, .cus-contact-cell, .cus-act, .cus-sort-select,
        .cus-tbl tbody td, .cus-empty)
   ───────────────────────────────────────────────────────────────────────────── */

/* Table body cells */
.cus-tbl tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--da3-line);
    vertical-align: middle;
    color: var(--da3-fg1);
    font-size: .875rem;
}
.cus-tbl tbody tr:last-child td { border-bottom: 0; }

/* ── Customer cell layout ── */
.cus-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Avatar wrapper (for presence dot positioning) ── */
.cus-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

/* ── Real image avatar ── */
.cus-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* ── Initials avatar ── */
.cus-avatar-init {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    flex-shrink: 0;
    letter-spacing: -.01em;
}

/* ── Presence dot ── */
.cus-presence-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--da3-card, #1c1c1f);
}
.cus-presence-online { background: #10b981; }
.cus-presence-recent { background: #f59e0b; }
body:not(.dark-mode) .cus-presence-dot { border-color: #fff; }

/* ── Name block ── */
.cus-name-block { min-width: 0; flex: 1; }
.cus-name {
    font-size: .875rem;
    font-weight: 700;
    color: var(--da3-fg1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    display: block;
    line-height: 1.3;
}
.cus-meta {
    font-size: .72rem;
    color: var(--da3-fg3);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── VIP badge ── */
.cus-vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .65rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(245,158,11,.15);
    color: #f59e0b;
    letter-spacing: .02em;
}

/* ── Row index ── */
.cus-idx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--da3-bg2);
    color: var(--da3-fg3);
    font-size: .72rem;
    font-weight: 700;
}

/* ── Contact cell ── */
.cus-contact-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .8rem;
    color: var(--da3-fg2);
}
.cus-contact-cell a { color: var(--da3-fg2); text-decoration: none; }
.cus-contact-cell a:hover { color: var(--da3-accent); }
.cus-contact-cell i { color: var(--da3-fg3); font-size: .7rem; width: 14px; }

/* ── Action button ── */
.cus-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-bg2);
    color: var(--da3-fg2);
    text-decoration: none;
    font-size: .85rem;
    transition: background .15s, color .15s, border-color .15s;
}
.cus-act:hover { background: var(--da3-abg); color: var(--da3-accent); border-color: var(--da3-accent); }

/* ── Sort select ── */
.cus-sort-select {
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-bg2);
    color: var(--da3-fg1);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    appearance: auto;
}

/* ── Empty state ── */
.cus-empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--da3-fg3);
}
.cus-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--da3-bg2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--da3-fg3);
    margin: 0 auto 16px;
}
.cus-empty h3 { font-size: 1rem; font-weight: 700; color: var(--da3-fg1); margin: 0 0 6px; }
.cus-empty p  { font-size: .82rem; margin: 0; }

/* ── Light-mode overrides ── */
body:not(.dark-mode) .cus-tbl tbody td { border-color: #f1f5f9; }
body:not(.dark-mode) .cus-name { color: #0f172a; }
body:not(.dark-mode) .cus-idx { background: #f1f5f9; color: #6b7280; }
body:not(.dark-mode) .cus-act { background: #fff; border-color: #e5e7eb; color: #6b7280; }
body:not(.dark-mode) .cus-sort-select { background: #fff; border-color: #e5e7eb; color: #374151; }
body:not(.dark-mode) .cus-empty { color: #9ca3af; }
body:not(.dark-mode) .cus-empty-icon { background: #f3f4f6; color: #9ca3af; }
body:not(.dark-mode) .cus-contact-cell { color: #374151; }
body:not(.dark-mode) .cus-contact-cell a { color: #374151; }

/* ── Contact wrap ── */
.cus-contact-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cus-contact {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--da3-fg2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.cus-contact i { color: var(--da3-fg3); font-size: .7rem; width: 12px; text-align: center; flex-shrink: 0; }

/* ── Orders / Spending / Last order chips ── */
.cus-orders, .cus-spent, .cus-last {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--da3-fg1);
    white-space: nowrap;
}
.cus-orders.zero, .cus-spent.zero { color: var(--da3-fg3); }
.cus-orders.vip { color: #f59e0b; }
.cus-last { color: var(--da3-fg2); font-weight: 500; }
.cus-last i { color: var(--da3-fg3); font-size: .7rem; }

/* ── Online pill ── */
.cus-online-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(16,185,129,.12);
    color: #10b981;
    margin-inline-start: 6px;
    vertical-align: middle;
}
.cus-online-pulse {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    animation: cusOnlinePulse 1.5s ease infinite;
    flex-shrink: 0;
}
@keyframes cusOnlinePulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(.7); }
}

/* ── Store link ── */
.cus-store-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--da3-accent);
    text-decoration: none;
    transition: opacity .15s;
}
.cus-store-link:hover { opacity: .8; }
.cus-store-link-muted { color: var(--da3-fg3); }
.cus-store-ext { font-size: .6rem; }

/* ── Status badge ── */
.cus-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.cus-status.active   { background: rgba(16,185,129,.12); color: #10b981; }
.cus-status.inactive { background: rgba(239,68,68,.12);  color: #ef4444; }
.cus-status .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ── Actions wrap ── */
.cus-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ── Mobile responsive ── */
@media (max-width: 640px) {
    .cus-tbl-wrap { border-radius: 10px; }
    .cus-tbl thead th { font-size: .62rem; padding: 10px 10px; }
    .cus-tbl tbody td { padding: 10px; }
    .cus-name { max-width: 140px; }
    .cus-contact { font-size: .73rem; max-width: 160px; }
}

/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/audit/index.blade.php
═══════════════════════════════════════════════════════════ */

.audit-page {
    --da3-card:   #1c1c1f;
    --da3-bd:     rgba(255,255,255,.055);
    --da3-shadow: 0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-fg1:    #f4f4f5;
    --da3-fg2:    #a1a1aa;
    --da3-fg3:    #71717a;
    --da3-line:   rgba(255,255,255,.06);
    --da3-hover:  rgba(255,255,255,.03);
    --da3-r:      12px;
    --da3-gap:    16px;
    --da3-input-bg: rgba(255,255,255,.02);
}
body:not(.dark-mode) .audit-page {
    --da3-card:   #fff;
    --da3-bd:     #e4e4e7;
    --da3-shadow: 0 1px 3px rgba(0,0,0,.07), 0 0 0 1px #e4e4e7;
    --da3-fg1:    #09090b;
    --da3-fg2:    #52525b;
    --da3-fg3:    #a1a1aa;
    --da3-line:   #f4f4f5;
    --da3-hover:  rgba(0,0,0,.02);
    --da3-input-bg: #fff;
}

.audit-page { padding: 16px; }
.audit-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.audit-title {
    font-size: 1.1rem; font-weight: 800;
    color: var(--da3-fg1);
    letter-spacing: -.01em;
}
.audit-title small {
    font-size: .78rem; font-weight: 500;
    color: var(--da3-fg3); margin-inline-start: 8px;
}

/* Filter bar */
.audit-filters {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex; gap: 10px; flex-wrap: wrap;
    align-items: center;
}
.audit-filters input,
.audit-filters select {
    background: var(--da3-input-bg);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: .85rem;
    min-width: 160px;
}
.audit-filters input:focus,
.audit-filters select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}
.audit-filters button {
    padding: 6px 14px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: .82rem; font-weight: 700;
    cursor: pointer;
}
.audit-filters .audit-reset {
    background: transparent;
    color: var(--da3-fg2);
    border: 1px solid var(--da3-bd);
}

/* Table */
.audit-table-wrap {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    overflow-x: auto;
}
.audit-table {
    width: 100%; border-collapse: collapse;
    font-size: .85rem;
}
.audit-table th {
    text-align: start;
    padding: 12px 16px;
    font-size: .68rem; font-weight: 700;
    color: var(--da3-fg3);
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--da3-line);
    background: var(--da3-hover);
    white-space: nowrap;
}
.audit-table td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--da3-line);
    color: var(--da3-fg1);
    vertical-align: middle;
}
.audit-table tr:hover { background: var(--da3-hover); }

/* Event chip */
.audit-event {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem; font-weight: 700;
    background: var(--ev-bg);
    color: var(--ev-ic);
    border: 1px solid color-mix(in srgb, var(--ev-ic) 30%, transparent);
}
.audit-event i { font-size: .7rem; }

.audit-when {
    font-family: 'SF Mono', 'JetBrains Mono', Consolas, monospace;
    font-size: .76rem;
    color: var(--da3-fg2);
    font-variant-numeric: tabular-nums;
}
.audit-subject {
    font-size: .78rem;
    color: var(--da3-fg2);
}
.audit-subject strong { color: var(--da3-fg1); font-weight: 700; }
.audit-ip {
    font-family: 'SF Mono', monospace;
    font-size: .72rem;
    color: var(--da3-fg3);
}

/* JSON expand */
.audit-payload-btn {
    background: transparent;
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg2);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: .68rem;
    cursor: pointer;
}
.audit-payload-btn:hover { color: var(--da3-fg1); border-color: var(--da3-fg2); }
.audit-payload {
    grid-column: 1 / -1;
    background: var(--da3-input-bg);
    border-top: 1px solid var(--da3-line);
    padding: 12px 16px;
    font-family: 'SF Mono', monospace;
    font-size: .72rem;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--da3-fg2);
    max-height: 280px;
    overflow-y: auto;
}

/* Empty / missing state */
.audit-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--da3-fg3);
}
.audit-empty .audit-empty-ico {
    font-size: 2.4rem; margin-bottom: 12px;
    color: var(--da3-fg3); opacity: .6;
}
.audit-empty .audit-empty-msg {
    font-size: 1rem; font-weight: 700;
    color: var(--da3-fg1);
    margin-bottom: 6px;
}
.audit-empty .audit-empty-sub {
    font-size: .82rem;
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/branch/form.blade.php
═══════════════════════════════════════════════════════════ */

.form-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}
.form-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-section-title i { color: #10b981; }
.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.form-control, .form-select {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    padding: 9px 13px;
    transition: .2s;
}
.form-control:focus, .form-select:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,.1);
    background: var(--bg-primary);
    color: var(--text-primary);
}
.form-control::placeholder { color: var(--text-secondary); opacity: .7; }
.required-star { color: #ef4444; margin-inline-start: 2px; }
.toggle-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
    transition: .2s;
}
.toggle-switch:hover { border-color: #10b981; }
.toggle-switch input[type=checkbox] { display: none; }
.toggle-slider {
    width: 40px; height: 22px;
    border-radius: 11px;
    background: var(--border-color);
    position: relative;
    transition: .3s;
    flex-shrink: 0;
}
.toggle-slider::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    top: 3px; left: 3px;
    transition: .3s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch input:checked ~ .toggle-slider { background: #10b981; }
.toggle-switch input:checked ~ .toggle-slider::after { transform: translateX(18px); }
.toggle-label { font-size: 13px; color: var(--text-primary); font-weight: 600; }
.toggle-hint { font-size: 11px; color: var(--text-secondary); }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/branch/index.blade.php
═══════════════════════════════════════════════════════════ */

.br-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    transition: .2s;
}
.br-card:hover { box-shadow: var(--shadow-md); }
.br-header { display: flex; align-items: center; justify-content: space-between; }
.br-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(16,185,129,.12);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.br-icon i { color: #10b981; font-size: 20px; }
.br-title { color: var(--text-primary); font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.br-subtitle { color: var(--text-secondary); font-size: 12px; }
.br-badge-active   { background: rgba(34,197,94,.12); color: #16a34a; border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 600; }
.br-badge-inactive { background: rgba(239,68,68,.12);  color: #dc2626; border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 600; }
.br-badge-pickup   { background: rgba(59,130,246,.12); color: #2563eb; border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 600; }
.br-meta { font-size: 13px; color: var(--text-secondary); margin-top: 8px; }
.br-meta i { width: 16px; color: #10b981; }
.br-actions { display: flex; gap: 8px; }
.br-btn {
    width: 34px; height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: .2s;
    text-decoration: none;
    color: var(--text-secondary);
}
.br-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.br-btn.danger:hover { background: var(--danger); border-color: var(--danger); }
.empty-box {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}
.empty-box i { font-size: 48px; opacity: .3; margin-bottom: 16px; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/brands/index.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   BRANDS PAGE — da3 design tokens (dark / light)
═══════════════════════════════════════════════════════ */
.brp {
    --c:      #1c1c1f;
    --bd:     rgba(255,255,255,.06);
    --bg2:    #111113;
    --fg1:    #f4f4f5;
    --fg2:    #a1a1aa;
    --fg3:    #71717a;
    --line:   rgba(255,255,255,.06);
    --hover:  rgba(255,255,255,.03);
    --r:      14px;
    --accent: #6366f1;
    --abg:    rgba(99,102,241,.12);
    max-width: 1300px;
    margin: 0 auto;
}
body:not(.dark-mode) .brp {
    --c:      #ffffff;
    --bd:     #e4e4e7;
    --bg2:    #f9f9fb;
    --fg1:    #09090b;
    --fg2:    #52525b;
    --fg3:    #a1a1aa;
    --line:   #f4f4f5;
    --hover:  rgba(0,0,0,.02);
}

/* ── Hero ── */
.brp-hero {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 24px;
    border-radius: 18px;
    border: 1px solid var(--bd);
    background:
        radial-gradient(700px 180px at 0% 0%, rgba(99,102,241,.09), transparent 60%),
        radial-gradient(500px 150px at 100% 100%, rgba(168,85,247,.06), transparent 60%),
        var(--bg2);
    margin-bottom: 22px;
}
.brp-hero-ico {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    box-shadow: 0 8px 20px -6px rgba(99,102,241,.5);
}
.brp-hero h1   { font-size: 19px; font-weight: 900; color: var(--fg1); margin: 0 0 3px; letter-spacing: -.02em; }
.brp-hero p    { font-size: 12.5px; color: var(--fg3); margin: 0; }
.brp-hero-end  { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.brp-hero-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--c); border: 1px solid var(--bd);
    font-size: 11.5px; font-weight: 700; color: var(--fg2);
}
.brp-hero-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.2); }

/* ── Add button ── */
.brp-add-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 20px;
    border: 0; border-radius: 11px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff; font-size: 13px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    box-shadow: 0 4px 14px -4px rgba(99,102,241,.45);
    transition: filter .15s, transform .15s;
}
.brp-add-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ── Empty state ── */
.brp-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 14px;
    padding: 60px 20px;
    border: 2px dashed var(--bd);
    border-radius: var(--r);
    background: var(--bg2);
    text-align: center;
}
.brp-empty-ico { font-size: 40px; color: var(--fg3); opacity: .35; }
.brp-empty h3  { font-size: 15px; font-weight: 800; color: var(--fg2); margin: 0; }
.brp-empty p   { font-size: 12.5px; color: var(--fg3); margin: 0; }

/* ── Brand card grid ── */
.brp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

/* ── Individual brand card ── */
.brp-card {
    background: var(--c);
    border: 1.5px solid var(--bd);
    border-radius: var(--r);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    position: relative;
}
.brp-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,.08), 0 8px 24px -6px rgba(0,0,0,.18);
    transform: translateY(-2px);
}
.brp-card.inactive { opacity: .55; }

/* Logo area */
.brp-logo-wrap {
    aspect-ratio: 16/9;
    background: var(--bg2);
    display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    position: relative;
}
.brp-logo-wrap img {
    max-width: 85%; max-height: 80%; object-fit: contain;
    filter: grayscale(30%);
    transition: filter .25s, transform .25s;
}
.brp-card:hover .brp-logo-wrap img { filter: none; transform: scale(1.05); }
.brp-logo-placeholder {
    font-size: 28px; color: var(--fg3); opacity: .35;
    display: flex; align-items: center; justify-content: center;
}

/* Card body */
.brp-card-body { padding: 12px 14px; flex: 1; }
.brp-card-name {
    font-size: 12.5px; font-weight: 800; color: var(--fg1);
    margin-bottom: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brp-card-link {
    font-size: 11px; color: var(--fg3); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block;
}

/* Card actions */
.brp-card-acts {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px 12px;
}
.brp-act {
    width: 30px; height: 30px; border-radius: 8px;
    border: 1.5px solid var(--bd);
    background: var(--bg2);
    color: var(--fg3);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; cursor: pointer;
    transition: all .15s;
    text-decoration: none;
}
.brp-act:hover { border-color: var(--accent); color: var(--accent); background: var(--abg); }
.brp-act.del:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.1); }
.brp-act.tog-on  { color: #22c55e; border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.08); }
.brp-act.tog-off { color: var(--fg3); }

/* Status badge on card */
.brp-status-badge {
    position: absolute; top: 8px; right: 8px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em;
    backdrop-filter: blur(6px);
}
.brp-status-badge.live  { background: rgba(34,197,94,.15); color: #16a34a; border: 1px solid rgba(34,197,94,.25); }
.brp-status-badge.off   { background: rgba(0,0,0,.45); color: #a1a1aa; border: 1px solid rgba(255,255,255,.08); }

/* ── Tip card at bottom ── */
.brp-tip {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px 16px; border-radius: 11px;
    background: rgba(99,102,241,.07);
    border: 1px solid rgba(99,102,241,.18);
    font-size: 12px; color: var(--fg2);
    font-weight: 600;
    margin-top: 20px;
}
.brp-tip i { color: var(--accent); font-size: 14px; margin-top: 1px; flex-shrink: 0; }

/* ── Modal — self-contained tokens (modal renders outside .brp scope) ── */
.brp-modal {
    --m-c:      #1e1e21;
    --m-bd:     rgba(255,255,255,.08);
    --m-bg2:    #141416;
    --m-fg1:    #f4f4f5;
    --m-fg2:    #a1a1aa;
    --m-fg3:    #71717a;
    --m-line:   rgba(255,255,255,.07);
    --m-accent: #6366f1;
    --m-abg:    rgba(99,102,241,.14);
}
body:not(.dark-mode) .brp-modal {
    --m-c:      #ffffff;
    --m-bd:     #e4e4e7;
    --m-bg2:    #f4f4f6;
    --m-fg1:    #09090b;
    --m-fg2:    #52525b;
    --m-fg3:    #a1a1aa;
    --m-line:   #ebebed;
    --m-accent: #6366f1;
    --m-abg:    rgba(99,102,241,.08);
}

.brp-modal .modal-content {
    background: var(--m-c);
    border: 1px solid var(--m-bd);
    border-radius: 20px;
    box-shadow: 0 32px 80px -12px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
    overflow: hidden;
}
body:not(.dark-mode) .brp-modal .modal-content {
    box-shadow: 0 20px 60px -8px rgba(0,0,0,.18), 0 0 0 1px #e4e4e7;
}
.brp-modal .modal-header {
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--m-line);
    display: flex; align-items: center; gap: 12px;
    background: var(--m-c);
}
.brp-modal-ico {
    width: 40px; height: 40px; border-radius: 11px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
    box-shadow: 0 6px 16px -4px rgba(99,102,241,.5);
}
.brp-modal .modal-title {
    font-size: 15px; font-weight: 900; color: var(--m-fg1); margin: 0;
    letter-spacing: -.02em;
}
.brp-modal .btn-close { opacity: .5; }
.brp-modal .btn-close:hover { opacity: 1; }
body.dark-mode .brp-modal .btn-close { filter: invert(1); }

.brp-modal .modal-body {
    padding: 24px 24px 18px;
    background: var(--m-c);
}
.brp-modal .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--m-line);
    background: var(--m-bg2);
    gap: 8px;
}

/* ── Upload zone ── */
.brp-upload-zone {
    aspect-ratio: 16/9;
    border: 2px dashed var(--m-bd);
    border-radius: 14px;
    background: var(--m-bg2);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; cursor: pointer;
    transition: border-color .2s, background .2s;
    overflow: hidden; position: relative;
}
.brp-upload-zone:hover {
    border-color: var(--m-accent);
    background: var(--m-abg);
}
.brp-upload-zone img {
    width: 100%; height: 100%; object-fit: contain;
    position: absolute; inset: 0; padding: 10px;
}
.brp-upload-overlay {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; pointer-events: none; z-index: 1;
}
.brp-upload-overlay .up-ico-wrap {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--m-abg);
    border: 1.5px solid rgba(99,102,241,.25);
    display: flex; align-items: center; justify-content: center;
}
.brp-upload-overlay .up-ico-wrap i {
    font-size: 20px; color: var(--m-accent);
}
.brp-upload-overlay .up-title {
    font-size: 13px; font-weight: 800; color: var(--m-fg1);
}
.brp-upload-overlay .up-sub {
    font-size: 11.5px; color: var(--m-fg3); font-weight: 600;
}

/* ── Form fields ── */
.brp-label {
    font-size: 11.5px; font-weight: 800; color: var(--m-fg2);
    margin-bottom: 7px; display: block; letter-spacing: .02em;
    text-transform: uppercase;
}
.brp-field-wrap { position: relative; }
.brp-field-ico {
    position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%);
    color: var(--m-fg3); font-size: 13px; pointer-events: none;
}
.brp-input {
    width: 100%; height: 44px;
    padding-block: 0;
    padding-inline: 38px 14px;
    background: var(--m-bg2);
    border: 1.5px solid var(--m-bd);
    border-radius: 11px;
    color: var(--m-fg1);
    font-size: 13.5px; font-weight: 600; outline: none;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.brp-input:focus {
    border-color: var(--m-accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,.15);
    background: var(--m-c);
}
.brp-input::placeholder { color: var(--m-fg3); font-weight: 500; }
/* URL field: always LTR regardless of page direction */
#brpLink { direction: ltr; text-align: left; }

/* hint text below field */
.brp-field-hint {
    font-size: 11px; color: var(--m-fg3); font-weight: 600;
    margin-top: 5px; display: flex; align-items: center; gap: 5px;
}
.brp-field-hint i { font-size: 10px; }

/* ── Buttons ── */
.brp-btn-save {
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 22px;
    border: 0; border-radius: 11px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff; font-size: 13px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    box-shadow: 0 6px 18px -4px rgba(99,102,241,.5);
    transition: filter .15s, transform .15s;
}
.brp-btn-save:hover { filter: brightness(1.08); transform: translateY(-1px); }
.brp-btn-save:active { transform: translateY(0); }

.brp-btn-cancel {
    display: inline-flex; align-items: center; gap: 6px;
    height: 42px; padding: 0 18px;
    border: 1.5px solid var(--m-bd); border-radius: 11px;
    background: transparent; color: var(--m-fg2);
    font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
    transition: all .15s;
}
.brp-btn-cancel:hover { border-color: var(--m-accent); color: var(--m-accent); background: var(--m-abg); }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/customdomain/vendor-domains.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   Vendor Domain Manager — vdm-* namespace
═══════════════════════════════════════════════════════ */

.vdm-header      { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.vdm-header__text h1 { font-size:1.25rem; font-weight:700; margin:0 0 4px; color:var(--da3-fg1,#f1f5f9); display:flex; align-items:center; gap:8px; }
.vdm-header__text p  { font-size:.875rem; color:var(--da3-fg2,#94a3b8); margin:0; }

/* Add button + dropdown */
.vdm-add-wrap    { position:relative; }
.vdm-add-btn     { display:inline-flex; align-items:center; gap:8px; padding:0 16px; height:38px; border-radius:8px;
                   background:var(--ui-primary,#6366f1); color:#fff; font-size:.875rem; font-weight:600;
                   border:none; cursor:pointer; white-space:nowrap; }
.vdm-add-btn:hover { filter:brightness(1.1); }
.vdm-add-btn .caret { font-size:.65rem; margin-inline-start:2px; transition:transform .2s; }
.vdm-add-btn.open .caret { transform:rotate(180deg); }

.vdm-dropdown    { position:absolute; inset-inline-end:0; top:calc(100% + 6px);
                   background:var(--da3-card,#1e293b); border:1px solid var(--da3-bd,#334155);
                   border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.35);
                   min-width:220px; z-index:200; overflow:hidden;
                   display:none; }
.vdm-dropdown.open { display:block; }
.vdm-dropdown__item { display:flex; align-items:center; gap:10px; padding:11px 16px;
                       font-size:.875rem; color:var(--da3-fg1,#f1f5f9);
                       text-decoration:none; cursor:pointer;
                       border-bottom:1px solid var(--da3-bd,#334155); transition:background .15s; }
.vdm-dropdown__item:last-child { border-bottom:0; }
.vdm-dropdown__item:hover { background:var(--da3-bg2,#0f172a); }
.vdm-dropdown__item i { width:20px; text-align:center; color:var(--ui-primary,#6366f1); }
.vdm-dropdown__item small { display:block; font-size:.75rem; color:var(--da3-fg3,#64748b); margin-top:1px; }

/* URL ribbon */
.vdm-urls        { background:var(--da3-card,#1e293b); border:1px solid var(--da3-bd,#334155);
                   border-radius:12px; padding:16px 20px; margin-bottom:20px; }
.vdm-urls__title { font-size:.8125rem; font-weight:700; color:var(--da3-fg2,#94a3b8);
                   text-transform:uppercase; letter-spacing:.05em; margin:0 0 12px; }
.vdm-url-row     { display:flex; align-items:center; gap:10px; padding:7px 0;
                   border-bottom:1px dashed var(--da3-bd,#334155); font-size:.875rem; }
.vdm-url-row:last-child { border-bottom:0; }
.vdm-url-row .lbl{ min-width:110px; font-size:.75rem; font-weight:700; color:var(--da3-fg3,#64748b);
                   text-transform:uppercase; letter-spacing:.04em; }
.vdm-url-row .val{ flex:1; font-family:'SF Mono',Consolas,monospace; color:var(--da3-fg1,#f1f5f9);
                   word-break:break-all; direction:ltr; }
.vdm-url-row .acts{ display:flex; gap:6px; flex-shrink:0; }
.vdm-icon-btn    { width:30px; height:30px; border-radius:7px; border:1px solid var(--da3-bd,#334155);
                   background:transparent; color:var(--da3-fg3,#64748b); display:inline-flex;
                   align-items:center; justify-content:center; font-size:11px; cursor:pointer;
                   text-decoration:none; transition:all .15s; }
.vdm-icon-btn:hover { background:var(--da3-bg2,#0f172a); color:var(--da3-fg1,#f1f5f9); }
.vdm-icon-btn.copied { background:#10b981; color:#fff; border-color:#10b981; }
.vdm-star  { color:#f59e0b; font-size:.75rem; margin-inline-start:4px; }

/* Domain list */
.vdm-list        { display:flex; flex-direction:column; gap:10px; }
.vdm-card        { background:var(--da3-card,#1e293b); border:1px solid var(--da3-bd,#334155);
                   border-radius:12px; padding:16px 20px;
                   display:grid; grid-template-columns:1fr auto;
                   gap:10px 16px; align-items:center; }
.vdm-card.is-primary { border-color:var(--ui-primary,#6366f1); box-shadow:0 0 0 1px var(--ui-primary,#6366f1); }
.vdm-card__info  { min-width:0; }
.vdm-card__name  { font-family:'SF Mono',Consolas,monospace; font-size:.9375rem; font-weight:600;
                   color:var(--da3-fg1,#f1f5f9); direction:ltr; word-break:break-all;
                   display:flex; align-items:center; gap:8px; }
.vdm-card__meta  { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; }
.vdm-card__actions { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; }

/* Badges */
.vdm-badge       { display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
                   border-radius:99px; font-size:.7rem; font-weight:700; letter-spacing:.03em; }
.vdm-badge.is-active    { background:rgba(16,185,129,.15); color:#10b981; }
.vdm-badge.is-pending   { background:rgba(245,158,11,.15); color:#f59e0b; }
.vdm-badge.is-connected { background:rgba(99,102,241,.15); color:#818cf8; }
.vdm-badge.is-primary   { background:rgba(99,102,241,.2); color:#a5b4fc; }
.vdm-badge.is-type      { background:var(--da3-bg2,#0f172a); color:var(--da3-fg3,#64748b); }

/* Expiry warning */
.vdm-badge.is-expiring { background:rgba(239,68,68,.15); color:#ef4444; }

/* Action button */
.vdm-btn         { display:inline-flex; align-items:center; gap:6px; padding:0 12px; height:32px;
                   border-radius:7px; font-size:.8125rem; font-weight:600; border:1px solid;
                   cursor:pointer; white-space:nowrap; text-decoration:none; }
.vdm-btn.activate { border-color:var(--ui-primary,#6366f1); color:var(--ui-primary,#6366f1); background:transparent; }
.vdm-btn.activate:hover { background:var(--ui-primary,#6366f1); color:#fff; }
.vdm-btn.deact    { border-color:var(--da3-bd,#334155); color:var(--da3-fg2,#94a3b8); background:transparent; }
.vdm-btn.deact:hover { background:var(--da3-bg2,#0f172a); }
.vdm-btn.dns      { border-color:var(--da3-bd,#334155); color:var(--da3-fg2,#94a3b8); background:transparent; }
.vdm-btn.dns:hover { background:var(--da3-bg2,#0f172a); }
.vdm-btn.danger   { border-color:rgba(239,68,68,.3); color:#ef4444; background:transparent; }
.vdm-btn.danger:hover { background:rgba(239,68,68,.1); }

/* Empty state */
.vdm-empty       { text-align:center; padding:48px 20px;
                   background:var(--da3-card,#1e293b); border:1px dashed var(--da3-bd,#334155);
                   border-radius:12px; }
.vdm-empty i     { font-size:2.5rem; color:var(--da3-fg3,#64748b); display:block; margin-bottom:12px; }
.vdm-empty h3    { font-size:1rem; font-weight:700; color:var(--da3-fg1,#f1f5f9); margin:0 0 6px; }
.vdm-empty p     { font-size:.875rem; color:var(--da3-fg2,#94a3b8); margin:0; }

/* Flash */
.vdm-flash       { padding:12px 16px; border-radius:8px; font-size:.875rem; margin-bottom:16px;
                   display:flex; align-items:center; gap:8px; }
.vdm-flash.success { background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3); color:#10b981; }
.vdm-flash.error   { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#ef4444; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/custom_status/index.blade.php
═══════════════════════════════════════════════════════════ */

.soft-card{background:#fff;border-radius:var(--card-radius);box-shadow:0 15px 40px rgba(0,0,0,.04);border:1px solid var(--border);}
.page-title{font-size:20px;font-weight:700;color:var(--text-main);}
.form-control{height:46px;border-radius:12px;border:1px solid var(--border);}
.btn-soft-info{background:var(--info-bg);color:var(--info-text);border-radius:12px;font-size:13px;}
.btn-soft-success{background:var(--success-bg);color:var(--success-text);border-radius:12px;font-size:13px;}
.btn-soft-danger{background:var(--danger-bg);color:var(--danger-text);border-radius:12px;font-size:13px;}
.table thead th{font-size:13px;color:var(--muted);font-weight:600;background:var(--soft-bg);}
.badge-success{color:var(--success-text);}
.badge-danger{color:var(--danger-text);}
.page-wrapper{max-width:1200px;margin:auto;}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/dashboard/marketer.blade.php
═══════════════════════════════════════════════════════════ */

        /* ── Marketer stat cards ── */
        .mkt-stat-card {
            background: var(--card-bg, #ffffff);
            padding: 24px;
            border-radius: 20px;
            border: 1px solid var(--border-soft, #eef2f7);
            box-shadow: 0 4px 16px rgba(0,0,0,.04);
            transition: box-shadow .2s, transform .2s;
        }
        .mkt-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.08); }
        .mkt-stat-ico {
            width: 48px; height: 48px;
            border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            background: var(--ico-bg, rgba(16,185,129,.12));
            color: var(--ico-color, #10b981);
            margin-bottom: 16px;
        }
        .mkt-stat-label { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
        .mkt-stat-value  { font-size: 24px; font-weight: 800; color: var(--text-primary); margin-top: 4px; }

        /* ── Tool cards ── */
        .tool-card {
            display: flex;
            align-items: center;
            background: var(--card-bg, #ffffff);
            padding: 20px;
            border-radius: 20px;
            border: 1px solid var(--border-soft, #eef2f7);
            text-decoration: none;
            transition: transform .25s ease, border-color .25s, box-shadow .25s;
            position: relative;
            overflow: hidden;
        }
        .tool-card:hover {
            transform: translateY(-4px);
            border-color: var(--role-accent, #10b981);
            box-shadow: 0 12px 32px var(--role-accent-soft, rgba(16,185,129,.1));
        }
        .tool-icon {
            width: 56px;
            height: 56px;
            border-radius: var(--radius-lg, 14px);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            margin-inline-start: 16px;
            flex-shrink: 0;
        }
        .tool-info { flex: 1; min-width: 0; }
        .tool-info h6 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px 0; }
        .tool-info p  { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.4; }
        .arrow {
            font-size: 12px;
            color: var(--text-muted);
            transition: transform .25s, color .25s;
            margin-inline-end: auto;
        }
        .tool-card:hover .arrow { transform: translateX(-4px); color: var(--role-accent, #10b981); }

        /* ── Marketer page titles ── */
        .mkt-section-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .mkt-section-title::before {
            content: '';
            width: 4px; height: 20px;
            border-radius: 4px;
            background: var(--role-accent, #10b981);
            display: inline-block;
            flex-shrink: 0;
        }
    

/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/dashboard/partials/platform-analytics.blade.php
═══════════════════════════════════════════════════════════ */

.da3.da3-admin { --role-accent: #7c3aed; --role-accent-soft: rgba(124,58,237,.1); }
.da3-admin .da3-btn-primary { box-shadow: 0 2px 8px rgba(124,58,237,.32); }
.da3-admin .da3-kpi::before { opacity: .9; }
/* Delta badges */
.da3-delta { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; margin-top:5px; }
.da3-delta.up  { color:#10b981; }
.da3-delta.dn  { color:#ef4444; }
.da3-delta.neu { color:var(--da3-fg3); }
/* Expiry urgency chips */
.da3-exp.urgent { background:rgba(239,68,68,.12); color:#ef4444; padding:2px 9px; border-radius:999px; font-size:10.5px; font-weight:700; white-space:nowrap; }
.da3-exp.soon   { background:rgba(245,158,11,.12); color:#d97706; padding:2px 9px; border-radius:999px; font-size:10.5px; font-weight:700; white-space:nowrap; }
.da3-exp.ok     { background:rgba(16,185,129,.12); color:#10b981; padding:2px 9px; border-radius:999px; font-size:10.5px; font-weight:700; white-space:nowrap; }
/* Plan bar rows */
.da3-plan-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed var(--da3-line); }
.da3-plan-row:last-child { border-bottom:none; }
.da3-plan-lbl { flex:0 0 120px; font-size:12.5px; font-weight:600; color:var(--da3-fg1); display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.da3-plan-bar { flex:1; height:6px; background:var(--da3-line); border-radius:3px; overflow:hidden; }
.da3-plan-fill { height:100%; background:linear-gradient(90deg,#7c3aed,#a78bfa); border-radius:3px; }
.da3-plan-cnt { flex:0 0 36px; text-align:end; font-size:13px; font-weight:700; color:var(--da3-fg1); font-variant-numeric:tabular-nums; }
/* Admin role badge in top bar */
.da3-role-badge { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600; background:rgba(124,58,237,.12); color:#a78bfa; }
.da3-role-badge .da3-live-dot { background:#10b981; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/emailsettings/email_setting.blade.php
═══════════════════════════════════════════════════════════ */

    .input-group button{
        border-radius: 0 6px 6px 0;
        padding: 8px 14px;
        white-space: nowrap;
    }
    .test-mail-btn{
    background:#2563eb;
    border:none;
    padding:8px 18px;
    border-radius: 8px;
    font-weight:600;
}

.test-mail-btn:hover{
    background:#1e3a8a;
    transform: translateY(-1px);
}

.test-mail-btn i{
    font-size: 13px;
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/included/coupons/coupon_detail.blade.php
═══════════════════════════════════════════════════════════ */

.report-card{
    border:0;
    border-radius:18px;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    background:#fff;
}

.report-title{
    font-size:15px;
    font-weight:600;
    color:#374151;
}

.modern-report-table{
    border-collapse:separate;
    border-spacing:0 12px;
}

.modern-report-table thead th{
    font-size:12px;
    font-weight:600;
    color:#6b7280;
    text-transform:uppercase;
    border:none!important;
}

.modern-report-table tbody tr{
    background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
    border-radius:14px;
    transition:.25s ease;
}

.modern-report-table tbody tr:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.modern-report-table td{
    border-top:none!important;
    vertical-align:middle;
    font-size:13px;
    padding:14px 12px;
}

.amount{
    font-weight:600;
    color:#059669;
}

.date-small{
    font-size:12px;
    color:#6b7280;
    line-height:1.4;
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/layout/default.blade.php
═══════════════════════════════════════════════════════════ */

    /* ── FA 6.0 missing icons: fa-tiktok glyph absent, fa-x-twitter not in 6.0 ──
       Fix: SVG mask preserves currentColor (works with any font-size / color)   */
    .fa-tiktok,
    .fa-x-twitter {
        display: inline-block;
        width: 1em;
        height: 1em;
        min-width: 1em;
        min-height: 1em;
        vertical-align: -0.125em;
        background-color: currentColor;
        flex-shrink: 0;
        font-size: inherit;
    }
    .fa-tiktok::before,
    .fa-x-twitter::before { content: none !important; }

    /* TikTok musical note */
    .fa-tiktok {
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448 209.9a210.1 210.1 0 0 1-122.8-39.3v178.8A162.6 162.6 0 1 1 185 188.3v89.1a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z'/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448 209.9a210.1 210.1 0 0 1-122.8-39.3v178.8A162.6 162.6 0 1 1 185 188.3v89.1a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z'/%3E%3C/svg%3E") no-repeat center / contain;
    }

    /* X (Twitter) */
    .fa-x-twitter {
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E") no-repeat center / contain;
    }

    /* ── Dark-mode fix: TikTok & X are black-branded — force light color so they
       stay visible on dark backgrounds (both brands officially use white on dark) */
    body.dark-mode .fa-tiktok,
    body.dark-mode .fa-x-twitter {
        background-color: #e4e4e7 !important;
    }
    
    /* ── Layout scaffolding (component-level, not tokens) ── */
    .wrapper {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding-top: var(--hd-h, 60px);
    }

    .content-wrapper {
        display: flex;
        flex: 1;
    }

    .bg-gradient-primary {
        background: linear-gradient(135deg, var(--accent) 0%, var(--p-800) 100%) !important;
    }

    .alert .btn-primary,
    .alert .btn-danger,
    .alert .btn-warning {
        color: #fff !important;
    }
    

/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/layout/sidebar.blade.php
═══════════════════════════════════════════════════════════ */

/* CSS-only chevron (no Font Awesome glyph) — never broken */
.sidebar .sd-link.dropdown-toggle::after {
    content:        "" !important;
    width:          7px !important;
    height:         7px !important;
    border:         0 !important;
    border-right:   2px solid currentColor !important;
    border-bottom:  2px solid currentColor !important;
    transform:      rotate(45deg) !important;
    transform-origin: center !important;
    transition:     transform .22s ease, border-color .22s ease, opacity .22s ease !important;
    margin-inline-start: auto !important;
    margin-inline-end:   2px !important;
    margin-block:        0 !important;
    color:          var(--sb-text-muted, #94a3b8) !important;
    opacity:        .7 !important;
    flex-shrink:    0 !important;
    background:     transparent !important;
    font:           inherit !important;
    line-height:    0 !important;
    /* nudge so the rotated square is visually centered */
    margin-top:    -2px !important;
}

/* Open state — point upward */
.sidebar .sd-link.dropdown-toggle:not(.collapsed)::after,
.sidebar .sd-link.dropdown-toggle[aria-expanded="true"]::after {
    transform:  rotate(-135deg) !important;
    color:      var(--role-accent, var(--primary, #3b82f6)) !important;
    opacity:    1 !important;
    margin-top: 2px !important;
}

/* Collapsed sidebar: hide chevron */
body.sidebar-collapsed .sidebar .sd-link.dropdown-toggle::after {
    display: none !important;
}

/* Active link variant — keep visible */
.sidebar .sd-link.active.dropdown-toggle::after {
    color:   var(--role-accent, var(--primary, #3b82f6)) !important;
    opacity: 1 !important;
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/layout/role_slider/vendor.blade.php
═══════════════════════════════════════════════════════════ */

.sdw-row { display: flex; align-items: center; gap: 10px; }
.sdw-ico { color: var(--primary, #6366f1); font-size: 16px; }
.sdw-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted, #6b7280);
    margin-bottom: 2px;
}
.sdw-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
    font-family: monospace;
}
.sdw-value.sdw-cta {
    font-family: inherit;
    font-size: 11px;
    color: var(--primary, #6366f1);
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/notifications/index.blade.php
═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   NOTIFICATIONS — Dashboard da3-system parity (dark + light)
   ══════════════════════════════════════════════════════════ */
.notif-page {
    /* Dark defaults */
    --da3-card:    #1c1c1f;
    --da3-bd:      rgba(255,255,255,.055);
    --da3-bg2:     #111113;
    --da3-shadow:  0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-fg1:     #f4f4f5;
    --da3-fg2:     #a1a1aa;
    --da3-fg3:     #71717a;
    --da3-line:    rgba(255,255,255,.06);
    --da3-hover:   rgba(255,255,255,.03);
    --da3-r:       12px;
    --da3-gap:     16px;
    --da3-accent:  #3b82f6;
    --da3-abg:     rgba(59,130,246,.12);
    --da3-input-bg:   rgba(255,255,255,.02);
    --da3-success:    #10b981;
    --da3-success-bg: rgba(16,185,129,.12);
    --da3-warn:       #f59e0b;
    --da3-warn-bg:    rgba(245,158,11,.12);
    --da3-danger:     #ef4444;
    --da3-danger-bg:  rgba(239,68,68,.12);
}
body:not(.dark-mode) .notif-page {
    --da3-card:    #ffffff;
    --da3-bd:      #e4e4e7;
    --da3-bg2:     #f9f9fb;
    --da3-shadow:  0 1px 3px rgba(0,0,0,.07), 0 0 0 1px #e4e4e7;
    --da3-fg1:     #09090b;
    --da3-fg2:     #52525b;
    --da3-fg3:     #a1a1aa;
    --da3-line:    #f4f4f5;
    --da3-hover:   rgba(0,0,0,.02);
    --da3-input-bg:   #ffffff;
    --da3-success-bg: #d1fae5;
    --da3-warn-bg:    #fef3c7;
    --da3-danger-bg:  #fef2f2;
}

/* ── Cards ───────────────────────────────────────────────── */
.notif-page .n-card{
    background:    var(--da3-card);
    border:        1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow:    var(--da3-shadow);
    overflow:      hidden;
}
.notif-page .n-hdr{
    padding: 16px 22px;
    border-bottom: 1px solid var(--da3-line);
    display: flex; align-items: center; gap: 10px;
}
.notif-page .n-hdr .ic{
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.notif-page .n-hdr.ic-warn .ic{ background: var(--da3-warn-bg); color: var(--da3-warn); }
.notif-page .n-hdr h6{
    margin: 0;
    font-weight: 700;
    font-size: 15px;
    color: var(--da3-fg1);
    letter-spacing: -.1px;
}
.notif-page .n-body{ padding: 18px 22px; }

/* ── Form primitives ─────────────────────────────────────── */
.notif-page .flabel{
    font-size: 11px;
    font-weight: 700;
    color: var(--da3-fg2);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
    display: block;
}
.notif-page .finput,
.notif-page .fselect,
.notif-page .ftextarea{
    background:    var(--da3-input-bg);
    border:        1px solid var(--da3-bd);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--da3-fg1);
    width: 100%;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.notif-page .finput::placeholder,
.notif-page .ftextarea::placeholder{ color: var(--da3-fg3); }
.notif-page .finput:focus,
.notif-page .fselect:focus,
.notif-page .ftextarea:focus{
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px var(--da3-abg);
}
.notif-page .ftextarea{ resize: vertical; min-height: 100px; }
.notif-page .helper-mini{ font-size: 11px; color: var(--da3-fg3); margin-top: 4px; }

/* ── Target cards (recipient picker) ─────────────────────── */
.notif-page .tc-wrap{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.notif-page .tc{
    border: 1px solid var(--da3-bd);
    background: var(--da3-bg2);
    color: var(--da3-fg1);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    transition: .15s;
    position: relative;
}
.notif-page .tc:hover{ border-color: var(--da3-accent); background: var(--da3-hover); }
.notif-page .tc.active{ border-color: var(--da3-accent); background: var(--da3-abg); }
.notif-page .tc input[type=radio]{ position: absolute; opacity: 0; width: 0; height: 0; }
.notif-page .tc .em{ font-size: 20px; display: block; margin-bottom: 4px; }
.notif-page .tc .lb{ font-size: 11px; font-weight: 700; color: var(--da3-fg1); }
.notif-page .tc.active .lb{ color: var(--da3-accent); }

/* ── User search panel ───────────────────────────────────── */
.notif-page #uPanel{
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
    display: none;
}
.notif-page #uPanel.show{ display: block; }
.notif-page .u-inp{
    border: 1px solid var(--da3-bd);
    background: var(--da3-card);
    color: var(--da3-fg1);
    border-radius: 10px;
    padding: 9px 12px;
    width: 100%;
    font-size: 13px;
    outline: none;
    transition: .15s;
}
.notif-page .u-inp::placeholder{ color: var(--da3-fg3); }
.notif-page .u-inp:focus{ border-color: var(--da3-accent); box-shadow: 0 0 0 3px var(--da3-abg); }
.notif-page #uRes{
    max-height: 200px;
    overflow-y: auto;
    margin-top: 8px;
    border-radius: 10px;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    display: none;
}
.notif-page .u-item{
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--da3-line);
    color: var(--da3-fg1);
    transition: background .15s;
}
.notif-page .u-item:hover{ background: var(--da3-hover); }
.notif-page .u-item:last-child{ border-bottom: none; }
.notif-page .u-item img{ width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.notif-page .u-nm{ font-weight: 700; font-size: 12px; color: var(--da3-fg1); }
.notif-page .u-em{ font-size: 10px; color: var(--da3-fg3); }
.notif-page .sel-badge{
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--da3-abg);
    border: 1px solid var(--da3-accent);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--da3-accent);
    margin-top: 8px;
}
.notif-page .sel-badge button{
    background: none; border: none;
    color: var(--da3-accent);
    cursor: pointer;
    font-size: 13px;
    padding: 0;
}

/* ── Image upload zone ───────────────────────────────────── */
.notif-page .img-zone{
    border: 1.5px dashed var(--da3-bd);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: .15s;
    background: var(--da3-bg2);
    position: relative;
}
.notif-page .img-zone:hover{ border-color: var(--da3-accent); background: var(--da3-hover); }
.notif-page .img-zone input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.notif-page .img-zone img{ width: 60px; height: 60px; object-fit: cover; border-radius: 10px; display: none; }
.notif-page .img-zone .ph i{ font-size: 22px; color: var(--da3-fg3); }
.notif-page .img-zone .ph p{ font-size: 11px; color: var(--da3-fg3); margin: 3px 0 0; }

/* ── Primary send button ─────────────────────────────────── */
.notif-page .btn-send{
    background: var(--da3-accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 13px;
    font-size: 14px;
    font-weight: 700;
    width: 100%;
    cursor: pointer;
    transition: filter .15s, transform .15s;
}
.notif-page .btn-send:hover{ filter: brightness(1.08); transform: translateY(-1px); }

/* ── Flash banner ────────────────────────────────────────── */
.notif-page .notif-flash{
    background: var(--da3-success-bg);
    color: var(--da3-success);
    border: 1px solid rgba(16,185,129,.32);
    border-radius: var(--da3-r);
    padding: 12px 16px;
    margin-bottom: var(--da3-gap);
    font-weight: 600;
    font-size: 13.5px;
    display: flex; align-items: center; gap: 8px;
}

/* ── History table ───────────────────────────────────────── */
.notif-page .h-count-badge{
    background: var(--da3-hover);
    color: var(--da3-fg2);
    border: 1px solid var(--da3-bd);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
}
.notif-page .h-table-wrap{ overflow-x: auto; }
.notif-page .h-table{ width: 100%; border-collapse: collapse; }
.notif-page .h-table th{
    background: var(--da3-bg2);
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--da3-fg2);
    border-bottom: 1px solid var(--da3-line);
    white-space: nowrap;
}
.notif-page .h-table td{
    padding: 13px 16px;
    border-bottom: 1px solid var(--da3-line);
    vertical-align: middle;
    font-size: 13px;
    color: var(--da3-fg1);
}
.notif-page .h-table tr:hover td{ background: var(--da3-hover); }
.notif-page .h-table tr:last-child td{ border-bottom: none; }
.notif-page .n-thumb{
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    overflow: hidden;
    flex-shrink: 0;
}
.notif-page .n-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.notif-page .n-row-title{ font-weight: 700; font-size: 13px; color: var(--da3-fg1); }
.notif-page .n-row-msg{
    font-size: 11.5px;
    color: var(--da3-fg3);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notif-page .n-row-receiver-name{ font-weight: 700; font-size: 12px; color: var(--da3-fg1); }
.notif-page .n-row-meta{ font-size: 10px; color: var(--da3-fg3); }
.notif-page .n-row-when{ font-size: 12px; color: var(--da3-fg2); }
.notif-page .n-row-when .strong{ font-weight: 700; color: var(--da3-fg1); }
.notif-page .n-row-when.scheduled .strong{ color: var(--da3-accent); }

/* Recipient pills (semantic, dark-mode aware) */
.notif-page .tpill{
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}
.notif-page .tpill-status-sent{ background: var(--da3-success-bg); color: var(--da3-success); }
.notif-page .rpill{
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}
.notif-page .rpill-all       { background: var(--da3-abg);            color: var(--da3-accent); }
.notif-page .rpill-vendors   { background: rgba(16,185,129,.14);      color: #10b981; }
.notif-page .rpill-marketers { background: rgba(245,158,11,.14);      color: #f59e0b; }
.notif-page .rpill-customers { background: rgba(236,72,153,.14);      color: #ec4899; }
.notif-page .rpill-delivery  { background: rgba(2,132,199,.14);       color: #0ea5e9; }
.notif-page .rpill-private   { background: var(--da3-hover);          color: var(--da3-fg2); border:1px solid var(--da3-bd); }

/* Action buttons in table */
.notif-page .act-btn{
    border: 1px solid var(--da3-bd);
    background: var(--da3-bg2);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    display: inline-flex; align-items: center; justify-content: center;
}
.notif-page .act-btn-edit   { color: var(--da3-accent); }
.notif-page .act-btn-edit:hover { background: var(--da3-abg); border-color: var(--da3-accent); }
.notif-page .act-btn-del    { color: var(--da3-danger); }
.notif-page .act-btn-del:hover { background: var(--da3-danger-bg); border-color: var(--da3-danger); }
.notif-page .act-btn-resend { color: var(--da3-success); }
.notif-page .act-btn-resend:hover { background: var(--da3-success-bg); border-color: var(--da3-success); }

/* Empty state */
.notif-page .empty-state{
    text-align: center;
    padding: 48px 16px;
    color: var(--da3-fg3);
}
.notif-page .empty-state i{ font-size: 32px; opacity: .35; display: block; margin-bottom: 6px; }

/* Pagination */
.notif-page .pagination-wrap{
    padding: 14px 18px;
    border-top: 1px solid var(--da3-line);
}
.notif-page .pagination .page-link{
    background: var(--da3-card);
    border-color: var(--da3-bd);
    color: var(--da3-fg1);
}
.notif-page .pagination .page-link:hover{ background: var(--da3-hover); }
.notif-page .pagination .page-item.active .page-link{
    background: var(--da3-accent);
    border-color: var(--da3-accent);
    color: #fff;
}
.notif-page .pagination .page-item.disabled .page-link{
    background: var(--da3-card);
    color: var(--da3-fg3);
    border-color: var(--da3-bd);
}

/* ── Edit Modal ──────────────────────────────────────────── */
#editModal .modal-content{
    background: var(--da3-card, #fff);
    border: 1px solid var(--da3-bd, #e4e4e7);
    color: var(--da3-fg1, #09090b);
    border-radius: 16px;
}
body.dark-mode #editModal .modal-content{
    --da3-card: #1c1c1f;
    --da3-bd: rgba(255,255,255,.055);
    --da3-bg2: #111113;
    --da3-fg1: #f4f4f5;
    --da3-fg2: #a1a1aa;
    --da3-fg3: #71717a;
    --da3-line: rgba(255,255,255,.06);
    --da3-hover: rgba(255,255,255,.03);
    --da3-input-bg: rgba(255,255,255,.02);
    --da3-accent: #3b82f6;
    --da3-abg: rgba(59,130,246,.12);
    background: var(--da3-card);
    color: var(--da3-fg1);
    border-color: var(--da3-bd);
}
body:not(.dark-mode) #editModal .modal-content{
    --da3-card: #ffffff;
    --da3-bd: #e4e4e7;
    --da3-bg2: #f9f9fb;
    --da3-fg1: #09090b;
    --da3-fg2: #52525b;
    --da3-fg3: #a1a1aa;
    --da3-line: #f4f4f5;
    --da3-hover: rgba(0,0,0,.02);
    --da3-input-bg: #ffffff;
    --da3-accent: #3b82f6;
    --da3-abg: rgba(59,130,246,.12);
}
#editModal .modal-title{ color: var(--da3-fg1); }
#editModal .flabel{
    font-size: 11px; font-weight: 700;
    color: var(--da3-fg2);
    text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: 6px; display: block;
}
#editModal .finput,
#editModal .ftextarea{
    background: var(--da3-input-bg);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    width: 100%;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
#editModal .finput::placeholder,
#editModal .ftextarea::placeholder{ color: var(--da3-fg3); }
#editModal .finput:focus,
#editModal .ftextarea:focus{
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px var(--da3-abg);
}
#editModal .ftextarea{ resize: vertical; min-height: 100px; }
#editModal .img-zone{
    border: 1.5px dashed var(--da3-bd);
    border-radius: 12px;
    background: var(--da3-bg2);
    position: relative; padding: 12px;
    cursor: pointer; text-align: center;
    transition: .15s;
}
#editModal .img-zone:hover{ border-color: var(--da3-accent); background: var(--da3-hover); }
#editModal .img-zone input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
#editModal .img-zone .ph i{ font-size: 22px; color: var(--da3-fg3); }
#editModal .img-zone .ph p{ font-size: 11px; color: var(--da3-fg3); margin: 3px 0 0; }
#editModal .modal-header-ic{
    width: 36px; height: 36px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
#editModal .modal-helper{ font-size: 10px; color: var(--da3-fg3); margin-top: 4px; }
#editModal .btn-light-token{
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
    border-radius: 10px;
    padding: 8px 18px;
    font-weight: 600;
}
#editModal .btn-light-token:hover{ background: var(--da3-hover); }
#editModal .btn-primary-token{
    background: var(--da3-accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 18px;
    font-weight: 600;
}
#editModal .btn-primary-token:hover{ filter: brightness(1.08); }
body.dark-mode #editModal .btn-close{ filter: invert(1) grayscale(1) opacity(.85); }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/partials/google-map-picker.blade.php
═══════════════════════════════════════════════════════════ */

.gmp-wrap {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 10px;
}
.gmp-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.gmp-header span { flex: 1; }
.gmp-locate-btn {
    background: rgba(99,102,241,.1);
    color: #6366f1;
    border: 1px solid rgba(99,102,241,.25);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: .18s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.gmp-locate-btn:hover { background: #6366f1; color: #fff; }
.gmp-search-row {
    padding: 10px 12px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}
.gmp-search-wrap {
    position: relative;
}
.gmp-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 12px;
    pointer-events: none;
}
.gmp-search-input {
    width: 100%;
    padding: 8px 36px 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: border-color .18s;
}
.gmp-search-input:focus { border-color: #6366f1; }
.gmp-coords {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/payment/analytics.blade.php
═══════════════════════════════════════════════════════════ */

.pga-page {
    --pga-radius: 14px;
    --pga-text:   var(--da3g-fg1, #f4f4f5);
    --pga-text-2: var(--da3g-fg2, #a1a1aa);
    --pga-text-3: var(--da3g-fg3, #71717a);
    --pga-card:   var(--da3g-card, #1c1c1f);
    --pga-bg2:    var(--da3g-bg2,  #111113);
    --pga-line:   var(--da3g-line, rgba(255,255,255,.06));
    --pga-line-2: var(--da3g-bd,   rgba(255,255,255,.055));
    --pga-accent: var(--da3g-accent, #3b82f6);
    --pga-accent-bg: var(--da3g-abg, rgba(59,130,246,.12));
    --pga-success: var(--da3g-success, #10b981);
    --pga-success-bg: var(--da3g-success-bg, rgba(16,185,129,.12));
    --pga-warn: var(--da3g-warn, #f59e0b);
    --pga-warn-bg: var(--da3g-warn-bg, rgba(245,158,11,.12));
}
body:not(.dark-mode) .pga-page {
    --pga-text: #09090b; --pga-text-2: #52525b; --pga-text-3: #a1a1aa;
    --pga-card: #fff; --pga-bg2: #f9f9fb;
    --pga-line: #f4f4f5; --pga-line-2: #e4e4e7;
}
.pga-head {
    background: var(--pga-card);
    border: 1px solid var(--pga-line-2);
    border-radius: var(--pga-radius);
    padding: 18px 22px;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.pga-head h1 { font-size: 20px; font-weight: 900; color: var(--pga-text); margin: 0; }
.pga-head p  { font-size: 12.5px; color: var(--pga-text-3); margin: 4px 0 0; }
.pga-back {
    margin-inline-start: auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 9px;
    background: var(--pga-bg2); color: var(--pga-text-2);
    text-decoration: none; font-size: 12.5px; font-weight: 700;
    border: 1px solid var(--pga-line-2);
}
.pga-back:hover { color: var(--pga-text); border-color: var(--pga-accent); }
.pga-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.pga-stat {
    background: var(--pga-card);
    border: 1px solid var(--pga-line-2);
    border-radius: var(--pga-radius);
    padding: 16px 18px;
}
.pga-stat-lbl { font-size: 11.5px; color: var(--pga-text-3); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.pga-stat-val { font-size: 22px; font-weight: 900; color: var(--pga-text); }
.pga-stat-ico {
    float: inline-end;
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--pga-accent-bg); color: var(--pga-accent);
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.pga-card {
    background: var(--pga-card);
    border: 1px solid var(--pga-line-2);
    border-radius: var(--pga-radius);
    margin-bottom: 16px;
    overflow: hidden;
}
.pga-card-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--pga-line);
    background: var(--pga-bg2);
    font-size: 13px; font-weight: 800; color: var(--pga-text);
}
.pga-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.pga-table thead th {
    background: var(--pga-bg2);
    padding: 12px 16px;
    font-size: .7rem; font-weight: 800;
    color: var(--pga-text-2);
    text-transform: uppercase; letter-spacing: .08em;
    border-bottom: 1px solid var(--pga-line);
    text-align: start;
}
.pga-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--pga-line); color: var(--pga-text); font-size: 13px; }
.pga-table tbody tr:last-child td { border-bottom: 0; }
.pga-vendor { display: flex; flex-direction: column; gap: 2px; }
.pga-vendor strong { font-size: 13px; font-weight: 800; color: var(--pga-text); }
.pga-vendor small  { font-size: 11.5px; color: var(--pga-text-3); }
.pga-spark {
    display: flex; align-items: flex-end; gap: 3px;
    height: 110px; padding: 16px 18px;
}
.pga-spark-bar {
    flex: 1; min-width: 6px;
    background: var(--pga-accent);
    border-radius: 3px 3px 0 0;
    opacity: .85; min-height: 2px;
    position: relative;
}
.pga-spark-bar:hover { opacity: 1; }
.pga-spark-bar::after {
    content: attr(data-day);
    position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
    font-size: 9px; color: var(--pga-text-3); white-space: nowrap;
}
.pga-empty { padding: 50px 20px; text-align: center; color: var(--pga-text-3); font-size: 13px; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/payment/edit.blade.php
═══════════════════════════════════════════════════════════ */

/* ═════ Page chrome (matches dashboard tokens) ═════ */
.pge-page {
    --pge-radius:  14px;
    --pge-text:    var(--da3g-fg1, #f4f4f5);
    --pge-text-2:  var(--da3g-fg2, #a1a1aa);
    --pge-text-3:  var(--da3g-fg3, #71717a);
    --pge-card:    var(--da3g-card, #1c1c1f);
    --pge-bg2:     var(--da3g-bg2,  #111113);
    --pge-line:    var(--da3g-line, rgba(255,255,255,.06));
    --pge-line-2:  var(--da3g-bd,   rgba(255,255,255,.08));
    --pge-accent:  var(--da3g-accent, #3b82f6);
    --pge-accent-bg: var(--da3g-abg, rgba(59,130,246,.12));
}
body:not(.dark-mode) .pge-page {
    --pge-text:   #09090b;
    --pge-text-2: #52525b;
    --pge-text-3: #a1a1aa;
    --pge-card:   #ffffff;
    --pge-bg2:    #f9f9fb;
    --pge-line:   #f1f1f4;
    --pge-line-2: #e4e4e7;
}

/* Hero card */
.pge-hero {
    background: var(--pge-card);
    border: 1px solid var(--pge-line-2);
    border-radius: var(--pge-radius);
    padding: 18px 22px;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    position: relative; overflow: hidden;
}
.pge-hero::before {
    content: '';
    position: absolute; inset-inline-end: -10%; top: -40%;
    width: 240px; height: 240px;
    background: radial-gradient(circle, color-mix(in srgb, var(--pge-accent) 20%, transparent), transparent 65%);
    pointer-events: none;
}
.pge-back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; border-radius: 9px;
    background: var(--pge-bg2);
    border: 1px solid var(--pge-line-2);
    color: var(--pge-text-2);
    text-decoration: none;
    font-size: 12.5px; font-weight: 700;
    transition: color .15s, border-color .15s;
}
.pge-back:hover { color: var(--pge-text); border-color: var(--pge-accent); }
.pge-logo {
    width: 56px; height: 56px; border-radius: 12px;
    background: var(--pge-bg2);
    border: 1px solid var(--pge-line-2);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pge-logo img { width: 100%; height: 100%; object-fit: cover; }
.pge-hero-meta h1 { font-size: 20px; font-weight: 900; color: var(--pge-text); margin: 0 0 4px; }
.pge-hero-meta p  { font-size: 12.5px; color: var(--pge-text-3); margin: 0; }
.pge-hero-actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Status pill */
.pge-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800;
}
.pge-pill.is-on  { background: var(--da3g-success-bg, rgba(16,185,129,.12)); color: var(--da3g-success, #10b981); border: 1px solid color-mix(in srgb, var(--da3g-success, #10b981) 35%, transparent); }
.pge-pill.is-off { background: var(--pge-bg2); color: var(--pge-text-3); border: 1px solid var(--pge-line-2); }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/pixel/pixel_setting.blade.php
═══════════════════════════════════════════════════════════ */

/* ──── Pixel Settings — token-based, dark/light/RTL/LTR safe ──── */
.px-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-main, var(--border-color));
}
.px-section-icon {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: rgba(99,102,241,.12);
    color: var(--primary, #6366f1);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0;
}
.px-section-head h5 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
    margin: 0 0 2px;
}
.px-section-head p {
    font-size: 12.5px;
    color: var(--text-muted, #94a3b8);
    margin: 0;
}

.px-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.px-field {
    background: var(--bg-card, var(--card-bg));
    border: 1px solid var(--border-main, var(--border-color));
    border-radius: 14px;
    padding: 16px;
    transition: border-color .2s;
}
.px-field:focus-within {
    border-color: var(--primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.px-field-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.px-platform-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.px-platform-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
}
.px-platform-sub {
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
}

.px-input {
    width: 100%;
    border: 1.5px solid var(--border-main, #e2e8f0);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: monospace;
    background: var(--bg-input, var(--input-bg, transparent));
    color: var(--text-primary, #0f172a);
    transition: .2s;
    direction: ltr;
}
.px-input:focus {
    outline: none;
    border-color: var(--primary, #6366f1);
    background: var(--bg-surface, var(--card-bg));
}
.px-input::placeholder { color: var(--text-muted, #94a3b8); }

/* Platform colors */
.px-facebook  { background: rgba(24,119,242,.12); color: #1877F2; }
.px-google    { background: rgba(234,67,53,.12);  color: #EA4335; }
.px-tiktok    { background: rgba(0,0,0,.08);       color: #000; }
.px-twitter   { background: rgba(29,161,242,.12); color: #1DA1F2; }
.px-snapchat  { background: rgba(255,252,0,.25);  color: #FFFC00; filter: brightness(.85); }
.px-linkedin  { background: rgba(0,119,181,.12);  color: #0077B5; }
.px-instagram { background: rgba(228,64,95,.12);  color: #E4405F; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/plan/plandetailspdf.blade.php
═══════════════════════════════════════════════════════════ */

    body {
        font-family: 'Roboto Condensed', sans-serif;
    }

    .m-0 {
        margin: 0px;
    }

    .p-0 {
        padding: 0px;
    }

    .pt-5 {
        padding-top: 5px;
    }

    .mt-10 {
        margin-top: 10px;
    }

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

    .w-100 {
        width: 100%;
    }

    .w-50 {
        width: 50%;
    }

    .w-85 {
        width: 85%;
    }

    .w-15 {
        width: 15%;
    }

    .logo img {
        width: 200px;
        height: 60px;
    }

    .gray-color {
        color: #5D5D5D;
    }

    .text-bold {
        font-weight: bold;
    }

    .border {
        border: 1px solid black;
    }

    table tr,
    th,
    td {
        border: 1px solid #d2d2d2;
        border-collapse: collapse;
        padding: 7px 8px;
    }

    table tr th {
        background: #F4F4F4;
        font-size: 15px;
    }

    table tr td {
        font-size: 13px;
    }

    table {
        border-collapse: collapse;
    }

    .box-text p {
        line-height: 10px;
    }

    .float-left {
        float: left;
    }

    .total-part {
        font-size: 16px;
        line-height: 12px;
    }

    .total-right p {
        padding-right: 20px;
    }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/plan/plan_details.blade.php
═══════════════════════════════════════════════════════════ */

    body{
        background:#f5f7fb;
    }

    .page-wrapper{
        max-width:1200px;
        margin:auto;
    }

    /* ===== TOP CARD ===== */
    .top-card{
        background: linear-gradient(135deg,#1e293b,#334155);
        color:#fff;
        border-radius:22px;
        padding:35px;
        box-shadow:0 25px 60px rgba(15,23,42,.35);
        position:relative;
        overflow:hidden;
        transition:.4s ease;
    }

    .top-card::after{
        content:'';
        position:absolute;
        width:300px;
        height:300px;
        background:rgba(255,255,255,.08);
        top:-100px;
        right:-100px;
        border-radius:50%;
    }

  
    .top-card .amount{
        font-size:46px;
        font-weight:800;
        letter-spacing:1px;
    }

    /* ===== COMMON CARD ===== */
    .card-ui{
        background:#fff;
        border-radius:18px;
        border:1px solid #eef0f4;
        padding:26px;
        box-shadow:0 12px 30px rgba(0,0,0,.06);
        transition:.3s ease;
    }

    

    /* ===== LIST ===== */
    .info-list li{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:14px 0;
        border-bottom:1px dashed #e5e7eb;
        font-size:14px;
    }

    .info-list li:last-child{
        border-bottom:none;
    }

    .info-list span{
        color:#64748b;
        font-weight:500;
    }

    .info-list strong{
        color:#0f172a;
    }

    /* STATUS COLORS */
    .status-pending{color:#f59e0b;font-weight:700;}
    .status-success{color:#22c55e;font-weight:700;}
    .status-danger{color:#ef4444;font-weight:700;}

    /* HEADER */
    .page-header{
        background:#fff;
        border-radius:16px;
        padding:18px 22px;
        box-shadow:0 8px 25px rgba(0,0,0,.04);
    }



/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/product/categorylist.blade.php
═══════════════════════════════════════════════════════════ */

    body {
        font-family: 'Roboto Condensed', sans-serif;
    }

    .m-0 {
        margin: 0px;
    }

    .p-0 {
        padding: 0px;
    }

    .pt-5 {
        padding-top: 5px;
    }

    .mt-10 {
        margin-top: 10px;
    }

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

    .w-100 {
        width: 100%;
    }

    .w-50 {
        width: 50%;
    }

    .w-85 {
        width: 85%;
    }

    .w-15 {
        width: 15%;
    }

    .logo img {
        width: 200px;
        height: 60px;
    }

    .gray-color {
        color: #5D5D5D;
    }

    .text-bold {
        font-weight: bold;
    }

    .border {
        border: 1px solid black;
    }

    table tr,
    th,
    td {
        border: 1px solid #d2d2d2;
        border-collapse: collapse;
        padding: 7px 8px;
    }

    table tr th {
        background: #F4F4F4;
        font-size: 15px;
    }

    table tr td {
        font-size: 13px;
    }

    table {
        border-collapse: collapse;
    }

    .box-text p {
        line-height: 10px;
    }

    .float-left {
        float: left;
    }

    .total-part {
        font-size: 16px;
        line-height: 12px;
    }

    .total-right p {
        padding-right: 20px;
    }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/product/taxlist.blade.php
═══════════════════════════════════════════════════════════ */

    body {
        font-family: 'Roboto Condensed', sans-serif;
    }
    .m-0 {
        margin: 0px;
    }
    .p-0 {
        padding: 0px;
    }
    .pt-5 {
        padding-top: 5px;
    }
    .mt-10 {
        margin-top: 10px;
    }
    .text-center {
        text-align: center !important;
    }
    .w-100 {
        width: 100%;
    }
    .w-50 {
        width: 50%;
    }
    .w-85 {
        width: 85%;
    }
    .w-15 {
        width: 15%;
    }
    .logo img {
        width: 200px;
        height: 60px;
    }
    .gray-color {
        color: #5D5D5D;
    }
    .text-bold {
        font-weight: bold;
    }
    .border {
        border: 1px solid black;
    }
    table tr,
    th,
    td {
        border: 1px solid #d2d2d2;
        border-collapse: collapse;
        padding: 7px 8px;
    }
    table tr th {
        background: #F4F4F4;
        font-size: 15px;
    }
    table tr td {
        font-size: 13px;
    }
    table {
        border-collapse: collapse;
    }
    .box-text p {
        line-height: 10px;
    }
    .float-left {
        float: left;
    }
    .total-part {
        font-size: 16px;
        line-height: 12px;
    }
    .total-right p {
        padding-right: 20px;
    }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/sociallogin/facebook_login.blade.php
═══════════════════════════════════════════════════════════ */

.google-card-space{
    margin-top: 25px;
    margin-bottom: 25px;
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/sociallogin/google_login.blade.php
═══════════════════════════════════════════════════════════ */

.google-card-space{
    margin-top: 25px;
    margin-bottom: 25px;
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/store_categories/index.blade.php
═══════════════════════════════════════════════════════════ */

.da3-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; text-decoration:none; transition:all .15s; font-size:13px; }
.da3-icon-btn--info  { background:rgba(14,165,233,.12); color:#0ea5e9; border:1px solid rgba(14,165,233,.25); }
.da3-icon-btn--info:hover  { background:#0ea5e9; color:#fff; }
.da3-icon-btn--danger { background:rgba(239,68,68,.12); color:#ef4444; border:1px solid rgba(239,68,68,.25); }
.da3-icon-btn--danger:hover { background:#ef4444; color:#fff; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/vendor_shipping/city_mapping.blade.php
═══════════════════════════════════════════════════════════ */

    /* Select2 Dark Mode Fix */
    .dark-mode .select2-container--default .select2-selection--single {
        background-color: #1a1a1a;
        border-color: #2a2a2a;
        height: 38px;
    }
    .dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #e1e1e1;
        line-height: 38px;
    }
    .dark-mode .select2-dropdown {
        background-color: #1a1a1a;
        border-color: #2a2a2a;
    }
    .dark-mode .select2-search__field {
        background-color: #2a2a2a;
        border-color: #333;
        color: #fff;
    }
    .dark-mode .select2-results__option {
        color: #ccc;
    }
    .dark-mode .select2-results__option--highlighted[aria-selected] {
        background-color: #4e73df;
    }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/Wallet/index.blade.php
═══════════════════════════════════════════════════════════ */

.w-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
}
.w-card-title {
    font-size: 14px; font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; gap: 8px;
}
.w-card-title i { color: #6366f1; }
.stat-card {
    border-radius: 14px; padding: 16px 20px;
    display: flex; align-items: center; gap: 14px;
}
.stat-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.stat-val { font-size: 22px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.stat-lbl { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.badge-pending  { background: rgba(234,179,8,.15);  color: #b45309; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.badge-approved { background: rgba(59,130,246,.12); color: #1d4ed8; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.badge-paid     { background: rgba(34,197,94,.12);  color: #16a34a; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.badge-rejected { background: rgba(239,68,68,.12);  color: #dc2626; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.action-btn {
    width: 30px; height: 30px; border-radius: 7px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; cursor: pointer; transition: .2s;
    text-decoration: none; color: var(--text-secondary);
}
.action-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.action-btn.danger:hover { background: #ef4444; border-color: #ef4444; }
.action-btn.success:hover { background: #22c55e; border-color: #22c55e; }
.settings-label { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.settings-hint  { font-size: 11px; color: var(--text-secondary); margin-top: 3px; }
.form-control, .form-select {
    border: 1px solid var(--border-color); border-radius: 10px;
    background: var(--bg-primary); color: var(--text-primary);
    font-size: 13px; padding: 8px 12px; transition: .2s;
}
.form-control:focus, .form-select:focus {
    border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.1);
    background: var(--bg-primary); color: var(--text-primary);
}
.tab-btn {
    padding: 7px 18px; border-radius: 30px; border: 1px solid var(--border-color);
    background: transparent; color: var(--text-secondary);
    font-size: 13px; font-weight: 600; cursor: pointer; transition: .2s;
}
.tab-btn.active { background: #6366f1; color: #fff; border-color: #6366f1; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/Wallet/vendor_details.blade.php
═══════════════════════════════════════════════════════════ */

.vd-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px; padding: 22px;
    box-shadow: var(--shadow-sm);
}
.vd-sec-title {
    font-size: 14px; font-weight: 700; color: var(--text-primary);
    margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; gap: 8px;
}
.vd-sec-title i { color: #6366f1; }
.badge-pending  { background: rgba(234,179,8,.15);  color: #b45309; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.badge-approved { background: rgba(59,130,246,.12); color: #1d4ed8; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.badge-paid     { background: rgba(34,197,94,.12);  color: #16a34a; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.badge-rejected { background: rgba(239,68,68,.12);  color: #dc2626; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.badge-credit   { background: rgba(34,197,94,.12);  color: #16a34a; border-radius: 20px; padding: 2px 8px;  font-size: 11px; }
.badge-debit    { background: rgba(239,68,68,.12);  color: #dc2626; border-radius: 20px; padding: 2px 8px;  font-size: 11px; }
.action-btn {
    width: 30px; height: 30px; border-radius: 7px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; cursor: pointer; transition: .2s;
    text-decoration: none; color: var(--text-secondary);
}
.action-btn.success:hover { background: #22c55e; border-color: #22c55e; color: #fff; }
.action-btn.danger:hover  { background: #ef4444; border-color: #ef4444; color: #fff; }
.action-btn.warn:hover    { background: #6366f1; border-color: #6366f1; color: #fff; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/Wallet/vendor_wallet.blade.php
═══════════════════════════════════════════════════════════ */

.wv-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px; padding: 22px;
    box-shadow: var(--shadow-sm);
}
.wv-sec-title {
    font-size: 14px; font-weight: 700; color: var(--text-primary);
    margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; gap: 8px;
}
.wv-sec-title i { color: #6366f1; }
.balance-hero {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 18px; padding: 28px;
    color: #fff; position: relative; overflow: hidden;
}
.balance-hero::after {
    content: '';
    position: absolute; top: -30px; right: -30px;
    width: 130px; height: 130px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}
.balance-amount { font-size: 38px; font-weight: 800; line-height: 1; }
.balance-label  { font-size: 13px; opacity: .8; margin-top: 4px; }
.mini-stat {
    background: rgba(255,255,255,.12);
    border-radius: 12px; padding: 12px 16px; text-align: center;
}
.mini-stat .val { font-size: 18px; font-weight: 700; }
.mini-stat .lbl { font-size: 11px; opacity: .8; }
.badge-pending  { background: rgba(234,179,8,.15);  color: #b45309; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.badge-approved { background: rgba(59,130,246,.12); color: #1d4ed8; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.badge-paid     { background: rgba(34,197,94,.12);  color: #16a34a; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.badge-rejected { background: rgba(239,68,68,.12);  color: #dc2626; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.badge-credit   { background: rgba(34,197,94,.12);  color: #16a34a; border-radius: 20px; padding: 2px 8px;  font-size: 11px; }
.badge-debit    { background: rgba(239,68,68,.12);  color: #dc2626; border-radius: 20px; padding: 2px 8px;  font-size: 11px; }
.form-control, .form-select {
    border: 1px solid var(--border-color); border-radius: 10px;
    background: var(--bg-primary); color: var(--text-primary);
    font-size: 13px; padding: 9px 13px; transition: .2s;
}
.form-control:focus, .form-select:focus {
    border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.1);
    background: var(--bg-primary); color: var(--text-primary);
}
.form-label { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.method-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px; padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.method-icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(99,102,241,.1);
    display: flex; align-items: center; justify-content: center;
    color: #6366f1; font-size: 16px; flex-shrink: 0;
}
.tab-pill {
    padding: 6px 16px; border-radius: 30px;
    border: 1px solid var(--border-color);
    background: transparent; color: var(--text-secondary);
    font-size: 13px; font-weight: 600; cursor: pointer; transition: .2s;
}
.tab-pill.active { background: #6366f1; color: #fff; border-color: #6366f1; }
.withdraw-notice {
    padding: 12px 16px; border-radius: 12px;
    background: rgba(234,179,8,.08);
    border: 1px solid rgba(234,179,8,.2);
    color: #92400e; font-size: 13px;
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/warehouse/form.blade.php
═══════════════════════════════════════════════════════════ */

.form-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}
.form-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-section-title i { color: #6366f1; }
.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.form-control, .form-select {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    padding: 9px 13px;
    transition: .2s;
}
.form-control:focus, .form-select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
    background: var(--bg-primary);
    color: var(--text-primary);
}
.form-control::placeholder { color: var(--text-secondary); opacity: .7; }
.form-text { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.required-star { color: #ef4444; margin-inline-start: 2px; }
.toggle-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
    transition: .2s;
}
.toggle-switch:hover { border-color: #6366f1; }
.toggle-switch input[type=checkbox] { display: none; }
.toggle-slider {
    width: 40px; height: 22px;
    border-radius: 11px;
    background: var(--border-color);
    position: relative;
    transition: .3s;
    flex-shrink: 0;
}
.toggle-slider::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    top: 3px; left: 3px;
    transition: .3s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch input:checked ~ .toggle-slider { background: #6366f1; }
.toggle-switch input:checked ~ .toggle-slider::after { transform: translateX(18px); }
.toggle-label { font-size: 13px; color: var(--text-primary); font-weight: 600; }
.toggle-hint { font-size: 11px; color: var(--text-secondary); }
.map-preview {
    height: 240px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    background: rgba(99,102,241,.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    color: var(--text-secondary);
}
.map-preview i { font-size: 36px; opacity: .3; }
.map-preview small { font-size: 12px; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/warehouse/index.blade.php
═══════════════════════════════════════════════════════════ */

.wh-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    transition: .2s;
}
.wh-card:hover { box-shadow: var(--shadow-md); }
.wh-header { display: flex; align-items: center; justify-content: space-between; }
.wh-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(99,102,241,.12);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.wh-icon i { color: #6366f1; font-size: 20px; }
.wh-title { color: var(--text-primary); font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.wh-subtitle { color: var(--text-secondary); font-size: 12px; }
.wh-badge-active   { background: rgba(34,197,94,.12); color: #16a34a; border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 600; }
.wh-badge-inactive { background: rgba(239,68,68,.12);  color: #dc2626; border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 600; }
.wh-badge-default  { background: rgba(234,179, 8,.15); color: #b45309; border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 600; }
.wh-meta { font-size: 13px; color: var(--text-secondary); margin-top: 8px; }
.wh-meta i { width: 16px; color: #6366f1; }
.wh-actions { display: flex; gap: 8px; }
.wh-btn {
    width: 34px; height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: .2s;
    text-decoration: none;
    color: var(--text-secondary);
}
.wh-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.wh-btn.danger:hover { background: var(--danger); border-color: var(--danger); }
.empty-box {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}
.empty-box i { font-size: 48px; opacity: .3; margin-bottom: 16px; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/affiliate/marketers.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   MARKETERS PAGE — Dashboard-grade design system
   Aligned with the chat/notifications da3-* token system so dark+light
   mode swap automatically and the surfaces match the rest of the admin.
   ═══════════════════════════════════════════════════════════ */
.mkt-page {
    --da3-card:    #1c1c1f;
    --da3-bd:      rgba(255,255,255,.055);
    --da3-bg2:     #111113;
    --da3-shadow:  0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-fg1:     #f4f4f5;
    --da3-fg2:     #a1a1aa;
    --da3-fg3:     #71717a;
    --da3-line:    rgba(255,255,255,.06);
    --da3-hover:   rgba(255,255,255,.03);
    --da3-r:       12px;
    --da3-gap:     16px;
    --da3-accent:  #3b82f6;
    --da3-abg:     rgba(59,130,246,.12);
    --da3-success: #10b981; --da3-success-bg: rgba(16,185,129,.12);
    --da3-warn:    #f59e0b; --da3-warn-bg:    rgba(245,158,11,.12);
    --da3-danger:  #ef4444; --da3-danger-bg:  rgba(239,68,68,.12);
    --da3-input-bg: rgba(255,255,255,.02);
}
body:not(.dark-mode) .mkt-page {
    --da3-card:    #ffffff;
    --da3-bd:      #e4e4e7;
    --da3-bg2:     #f9f9fb;
    --da3-shadow:  0 1px 3px rgba(0,0,0,.07), 0 0 0 1px #e4e4e7;
    --da3-fg1:     #09090b;
    --da3-fg2:     #52525b;
    --da3-fg3:     #a1a1aa;
    --da3-line:    #f4f4f5;
    --da3-hover:   rgba(0,0,0,.02);
    --da3-input-bg:   #ffffff;
    --da3-success-bg: #d1fae5;
    --da3-warn-bg:    #fef3c7;
    --da3-danger-bg:  #fef2f2;
}

/* ── Hero / page header ── */
.mkt-page .mkt-head {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    padding: 18px 22px;
    margin-bottom: var(--da3-gap);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.mkt-page .mkt-head-ico {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.mkt-page .mkt-head-text { flex: 1; min-width: 0; }
.mkt-page .mkt-head-title {
    font-size: 19px; font-weight: 700;
    color: var(--da3-fg1);
    margin: 0 0 3px;
    letter-spacing: -.2px;
}
.mkt-page .mkt-head-sub {
    font-size: 12.5px;
    color: var(--da3-fg3);
    margin: 0;
}

/* ── Card wrapper ── */
.mkt-page .mkt-card {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    overflow: hidden;
}
.mkt-page .mkt-card-head {
    padding: 14px 20px;
    border-bottom: 1px solid var(--da3-line);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.mkt-page .mkt-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--da3-fg1);
    margin: 0;
    flex: 1;
    min-width: 200px;
}

/* ── Filter form ── */
.mkt-page .mkt-filters {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.mkt-page .mkt-input,
.mkt-page .mkt-select {
    background: var(--da3-input-bg);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.mkt-page .mkt-input::placeholder { color: var(--da3-fg3); }
.mkt-page .mkt-input:focus,
.mkt-page .mkt-select:focus {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px var(--da3-abg);
}
.mkt-page .mkt-select {
    cursor: pointer;
    /* Custom chevron — replaces the ugly native arrow + ensures
       a clean look in both dark and light mode. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-inline-end: 34px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 14px;
}
html[dir="rtl"] .mkt-page .mkt-select {
    background-position: left 11px center;
    padding-inline-end: 12px;
    padding-inline-start: 34px;
}
/* Option dropdown items — native <option> only honours background + color */
.mkt-page .mkt-select option {
    background: #1e1e22;
    color: #f4f4f5;
    padding: 8px 12px;
    font-weight: 600;
}
body:not(.dark-mode) .mkt-page .mkt-select option {
    background: #ffffff;
    color: #111827;
}
.mkt-page .mkt-btn {
    border: 0;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: filter .15s, transform .15s;
    text-decoration: none;
}
.mkt-page .mkt-btn-primary { background: var(--da3-accent); color: #fff; }
.mkt-page .mkt-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.mkt-page .mkt-btn-ghost {
    background: var(--da3-bg2);
    color: var(--da3-fg1);
    border: 1px solid var(--da3-bd);
}
.mkt-page .mkt-btn-ghost:hover { background: var(--da3-hover); border-color: var(--da3-accent); color: var(--da3-accent); }
.mkt-page .mkt-btn-success { background: var(--da3-success); color: #fff; }
.mkt-page .mkt-btn-success:hover { filter: brightness(1.08); }
.mkt-page .mkt-btn-warn    { background: var(--da3-warn); color: #fff; }
.mkt-page .mkt-btn-warn:hover    { filter: brightness(1.08); }
.mkt-page .mkt-btn-danger  { background: var(--da3-danger); color: #fff; }
.mkt-page .mkt-btn-danger:hover  { filter: brightness(1.08); }
.mkt-page .mkt-btn-icon {
    width: 32px; height: 32px;
    padding: 0;
    justify-content: center;
}

/* ── Table ── */
.mkt-page .mkt-table-wrap { overflow-x: auto; }
.mkt-page .mkt-tbl {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.mkt-page .mkt-tbl th {
    background: var(--da3-bg2);
    padding: 12px 18px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--da3-fg2);
    border-bottom: 1px solid var(--da3-line);
    text-align: start;
    white-space: nowrap;
}
.mkt-page .mkt-tbl td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--da3-line);
    vertical-align: middle;
    font-size: 13px;
    color: var(--da3-fg1);
}
.mkt-page .mkt-tbl tbody tr:hover td { background: var(--da3-hover); }
.mkt-page .mkt-tbl tbody tr:last-child td { border-bottom: 0; }
.mkt-page .mkt-tbl .text-end { text-align: end; }

/* ── User cell ── */
.mkt-page .mkt-user {
    display: flex; align-items: center; gap: 12px;
}
.mkt-page .mkt-user img {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--da3-bd);
    flex-shrink: 0;
    background: var(--da3-bg2);
}
.mkt-page .mkt-user-name {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--da3-fg1);
    margin: 0;
    line-height: 1.2;
}
.mkt-page .mkt-user-email {
    font-size: 11.5px;
    color: var(--da3-fg3);
    margin: 2px 0 0;
}

/* ── Ref code badge ── */
.mkt-page .mkt-ref {
    display: inline-flex; align-items: center;
    background: var(--da3-abg);
    color: var(--da3-accent);
    padding: 4px 10px;
    border-radius: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 700;
    border: 1px solid var(--da3-bd);
}

/* ── Performance / earnings stacks ── */
.mkt-page .mkt-stack { font-size: 12.5px; line-height: 1.45; }
.mkt-page .mkt-stack-main {
    font-weight: 800;
    color: var(--da3-fg1);
    font-size: 13.5px;
}
.mkt-page .mkt-stack-sub {
    font-size: 11px;
    color: var(--da3-fg3);
    margin-top: 1px;
}
.mkt-page .mkt-stack-earn  { color: var(--da3-success); }
.mkt-page .mkt-stack-pend  { color: var(--da3-warn); }

/* ── Status pill ── */
.mkt-page .mkt-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
}
.mkt-page .mkt-pill::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.mkt-page .mkt-pill-pending   { background: var(--da3-warn-bg);    color: var(--da3-warn); }
.mkt-page .mkt-pill-active    { background: var(--da3-success-bg); color: var(--da3-success); }
.mkt-page .mkt-pill-suspended { background: var(--da3-danger-bg);  color: var(--da3-danger); }
.mkt-page .mkt-pill-rejected  { background: rgba(113,113,122,.18); color: var(--da3-fg2); }

/* ── Action buttons cluster ── */
.mkt-page .mkt-actions {
    display: inline-flex; gap: 6px; flex-wrap: nowrap; justify-content: flex-end;
}
.mkt-page .mkt-actions form { display: inline-flex; }
.mkt-page .mkt-btn-info {
    background: rgba(56, 189, 248, .14);
    color: #0ea5e9;
}
.mkt-page .mkt-btn-info:hover { filter: brightness(1.08); }
/* Impersonate / "open dashboard" button — distinct violet so the action is recognisable */
.mkt-page .mkt-btn-impersonate {
    background: rgba(139, 92, 246, .15);
    color: #8b5cf6;
}
.mkt-page .mkt-btn-impersonate:hover { filter: brightness(1.08); }

/* ── Vendor tag (admin view only) ── */
.mkt-page .mkt-vendor-tag {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--da3-fg3);
}
.mkt-page .mkt-vendor-tag i { font-size: 9px; opacity: .7; }

/* ── Balance line in earnings cell ── */
.mkt-page .mkt-stack-bal {
    color: var(--da3-accent);
    font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────
   MARKETER DETAILS MODAL — wide, hero header + KPI grid + sections
   ───────────────────────────────────────────────────────────── */
.modal.fade.mkt-info-modal .modal-dialog {
    max-width: 860px;
}
.modal.fade.mkt-info-modal .modal-content {
    background: var(--mim-bg, #fff);
    color: var(--mim-fg, #09090b);
    border: 1px solid var(--mim-bd, #e4e4e7);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
body.dark-mode .modal.fade.mkt-info-modal .modal-content {
    --mim-bg: #1c1c1f;
    --mim-fg: #f4f4f5;
    --mim-bd: rgba(255,255,255,.06);
    --mim-line: rgba(255,255,255,.06);
    --mim-fg2: #a1a1aa;
    --mim-fg3: #71717a;
    --mim-card: #111113;
    --mim-accent: #3b82f6;
    --mim-abg: rgba(59,130,246,.14);
}
body:not(.dark-mode) .modal.fade.mkt-info-modal .modal-content {
    --mim-bg: #ffffff;
    --mim-fg: #09090b;
    --mim-bd: #e4e4e7;
    --mim-line: #f4f4f5;
    --mim-fg2: #52525b;
    --mim-fg3: #a1a1aa;
    --mim-card: #f9f9fb;
    --mim-accent: #3b82f6;
    --mim-abg: rgba(59,130,246,.10);
}
body.dark-mode .modal.fade.mkt-info-modal .btn-close { filter: invert(1) grayscale(1) opacity(.85); }

/* ── Hero header ─────────────────────────────────── */
.mim-hero {
    position: relative;
    padding: 22px 26px 20px;
    background: linear-gradient(135deg, var(--mim-accent) 0%, #6366f1 55%, #8b5cf6 100%);
    color: #fff;
    overflow: hidden;
}
.mim-hero::before, .mim-hero::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.mim-hero::before { width: 220px; height: 220px; top: -80px; inset-inline-end: -40px; background: rgba(255,255,255,.08); }
.mim-hero::after  { width: 140px; height: 140px; bottom: -50px; inset-inline-start: 22%; background: rgba(255,255,255,.05); }
.mim-hero-row {
    position: relative; z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.mim-hero-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.15);
    flex-shrink: 0;
}
.mim-hero-meta { flex: 1; min-width: 200px; }
.mim-hero-name {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.2px;
    line-height: 1.2;
}
.mim-hero-sub {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px;
    color: rgba(255,255,255,.85);
    flex-wrap: wrap;
}
.mim-hero-sub .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.55); }
.mim-hero-close {
    position: absolute;
    top: 14px; inset-inline-end: 16px;
    width: 32px; height: 32px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background .15s, transform .15s;
    z-index: 2;
}
.mim-hero-close:hover { background: rgba(255,255,255,.28); transform: rotate(90deg); }
.mim-hero-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.28);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-transform: capitalize;
}
.mim-hero-status::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.mim-hero-ref {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    border-radius: 8px;
    background: rgba(0,0,0,.22);
    color: #fff;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 700;
}

/* ── KPI strip ───────────────────────────────────── */
.mim-body { padding: 18px 22px 22px; }
.mim-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.mim-kpi {
    background: var(--mim-card);
    border: 1px solid var(--mim-bd);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    transition: border-color .15s, transform .15s;
}
.mim-kpi:hover { border-color: var(--mim-accent); transform: translateY(-1px); }
.mim-kpi-head {
    display: flex; align-items: center; gap: 7px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--mim-fg3);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.mim-kpi-head i { font-size: 11px; opacity: .75; }
.mim-kpi-val {
    font-size: 17px;
    font-weight: 800;
    color: var(--mim-fg);
    letter-spacing: -.3px;
    line-height: 1.1;
}
.mim-kpi-sub { font-size: 11px; color: var(--mim-fg3); }
.mim-kpi.is-success .mim-kpi-val { color: #10b981; }
.mim-kpi.is-warn    .mim-kpi-val { color: #f59e0b; }
.mim-kpi.is-info    .mim-kpi-val { color: var(--mim-accent); }

/* ── Section card (used for grouped key/value rows) ── */
.mim-section {
    background: var(--mim-card);
    border: 1px solid var(--mim-bd);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 12px;
}
.mim-section:last-child { margin-bottom: 0; }
.mim-section-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--mim-fg3);
    margin: 0 0 12px;
    display: flex; align-items: center; gap: 6px;
}
.mim-section-title i { font-size: 10px; color: var(--mim-accent); opacity: .8; }

/* Two-column grid for compact key/value pairs */
.mim-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 18px;
}
.mim-item {
    display: flex; align-items: flex-start; gap: 10px;
    min-width: 0;
}
.mim-item-ico {
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--mim-abg);
    color: var(--mim-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11.5px;
    flex-shrink: 0;
}
.mim-item-body { flex: 1; min-width: 0; }
.mim-item-label {
    font-size: 10px;
    color: var(--mim-fg3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 2px;
}
.mim-item-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--mim-fg);
    word-break: break-word;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.mim-item-value.is-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* ── Timeline (applied → approved → status) ── */
.mim-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    position: relative;
}
.mim-tl-step {
    text-align: center;
    padding: 8px 6px 4px;
    position: relative;
}
.mim-tl-step::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 0; right: 0;
    height: 2px;
    background: var(--mim-bd);
    z-index: 0;
}
.mim-tl-step:first-child::before { inset-inline-start: 50%; }
.mim-tl-step:last-child::before  { inset-inline-end: 50%; }
.mim-tl-dot {
    position: relative;
    z-index: 1;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--mim-bg);
    border: 2px solid var(--mim-bd);
    color: var(--mim-fg3);
    margin: 0 auto 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
}
.mim-tl-step.is-done .mim-tl-dot   { background: var(--mim-accent); border-color: var(--mim-accent); color: #fff; }
.mim-tl-step.is-active .mim-tl-dot { background: #fff; border-color: var(--mim-accent); color: var(--mim-accent); box-shadow: 0 0 0 4px var(--mim-abg); }
.mim-tl-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--mim-fg2);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.mim-tl-date {
    display: block;
    font-size: 11px;
    color: var(--mim-fg3);
    margin-top: 2px;
}

/* ── Footer ── */
.modal.fade.mkt-info-modal .modal-footer {
    border-top: 1px solid var(--mim-line);
    padding: 12px 22px;
    gap: 8px;
    background: var(--mim-card);
}

@media (max-width: 720px) {
    .mim-kpis  { grid-template-columns: repeat(2, 1fr); }
    .mim-grid  { grid-template-columns: 1fr; }
    .mim-hero  { padding: 20px 18px 18px; }
    .mim-body  { padding: 16px 18px 18px; }
}

/* ── Empty state ── */
.mkt-page .mkt-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--da3-fg3);
}
.mkt-page .mkt-empty i {
    font-size: 38px;
    opacity: .35;
    display: block;
    margin: 0 auto 10px;
}

/* ── Pagination ── */
.mkt-page .mkt-pagination-wrap {
    padding: 14px 20px;
    border-top: 1px solid var(--da3-line);
}
.mkt-page .pagination { margin: 0; gap: 4px; }
.mkt-page .pagination .page-link {
    background: var(--da3-card);
    border-color: var(--da3-bd);
    color: var(--da3-fg1);
    border-radius: 8px;
    font-size: 13px;
}
.mkt-page .pagination .page-link:hover { background: var(--da3-hover); }
.mkt-page .pagination .page-item.active .page-link {
    background: var(--da3-accent);
    border-color: var(--da3-accent);
    color: #fff;
}
.mkt-page .pagination .page-item.disabled .page-link {
    background: var(--da3-card);
    color: var(--da3-fg3);
    border-color: var(--da3-bd);
}

/* ── Modal dark/light parity ── */
.mkt-page .modal-content,
.modal.fade[id^="rejectModal"] .modal-content {
    background: var(--da3-card, #fff);
    border: 1px solid var(--da3-bd, #e4e4e7);
    color: var(--da3-fg1, #09090b);
    border-radius: 16px;
}
body.dark-mode .modal.fade[id^="rejectModal"] .modal-content {
    --da3-card: #1c1c1f;
    --da3-bd: rgba(255,255,255,.055);
    --da3-fg1: #f4f4f5;
    --da3-fg2: #a1a1aa;
    --da3-fg3: #71717a;
    --da3-line: rgba(255,255,255,.06);
    --da3-accent: #3b82f6;
    --da3-abg: rgba(59,130,246,.12);
    --da3-input-bg: rgba(255,255,255,.02);
    background: var(--da3-card);
    color: var(--da3-fg1);
    border-color: var(--da3-bd);
}
.modal.fade[id^="rejectModal"] .modal-header,
.modal.fade[id^="rejectModal"] .modal-footer {
    border-color: var(--da3-line, #f4f4f5);
}
.modal.fade[id^="rejectModal"] .modal-title { color: var(--da3-fg1); font-weight: 700; }
.modal.fade[id^="rejectModal"] .form-label  { font-size: 11px; font-weight: 700; color: var(--da3-fg2); text-transform: uppercase; letter-spacing: .5px; }
.modal.fade[id^="rejectModal"] .form-control {
    background: var(--da3-input-bg, #fff);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
    border-radius: 10px;
}
.modal.fade[id^="rejectModal"] .form-control:focus {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px var(--da3-abg);
}
body.dark-mode .modal.fade[id^="rejectModal"] .btn-close { filter: invert(1) grayscale(1) opacity(.85); }

@media (max-width: 720px) {
    .mkt-page .mkt-filters { width: 100%; }
    .mkt-page .mkt-input,
    .mkt-page .mkt-select { flex: 1; min-width: 0; }
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/banner/banner.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   BANNERS — Dashboard design (da3 tokens)
═══════════════════════════════════════════════════════════════════ */
.bn-page {
    --da3-card:    #1c1c1f;
    --da3-bd:      rgba(255,255,255,.055);
    --da3-bg2:     #111113;
    --da3-fg1:     #f4f4f5;
    --da3-fg2:     #a1a1aa;
    --da3-fg3:     #71717a;
    --da3-line:    rgba(255,255,255,.06);
    --da3-accent:  #3b82f6;
    --da3-r:       12px;
    max-width: 1400px;
    margin: 0 auto;
}
body:not(.dark-mode) .bn-page {
    --da3-card:    #ffffff;
    --da3-bd:      #e4e4e7;
    --da3-bg2:     #f9f9fb;
    --da3-fg1:     #09090b;
    --da3-fg2:     #52525b;
    --da3-fg3:     #a1a1aa;
    --da3-line:    #f4f4f5;
}

/* ── Hero ── */
.bn-hero {
    position: relative;
    display: flex; align-items: center; gap: 16px;
    padding: 20px 24px;
    margin-bottom: 18px;
    border-radius: 16px;
    border: 1px solid var(--da3-bd);
    background:
        radial-gradient(900px 220px at 0% 0%, rgba(59,130,246,.10), transparent 60%),
        radial-gradient(700px 200px at 100% 100%, rgba(139,92,246,.08), transparent 60%),
        var(--da3-bg2);
    overflow: hidden;
}
.bn-hero-ico {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
    box-shadow: 0 8px 20px -6px rgba(59,130,246,.55);
}
.bn-hero-text { flex: 1; min-width: 0; }
.bn-hero h1 {
    font-size: 19px; font-weight: 900;
    color: var(--da3-fg1);
    margin: 0;
    letter-spacing: -.025em;
    line-height: 1.2;
}
.bn-hero p { font-size: 12.5px; color: var(--da3-fg3); margin: 3px 0 0; }
.bn-hero-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.bn-hero-stat {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    font-size: 11.5px; font-weight: 700;
    color: var(--da3-fg2);
}
.bn-hero-stat i { font-size: 10px; }
.bn-hero-stat .dot {
    width: 6px; height: 6px; border-radius: 50%;
}
.bn-hero-stat[data-s="0"] .dot { background: #3b82f6; }
.bn-hero-stat[data-s="1"] .dot { background: #8b5cf6; }
.bn-hero-stat[data-s="2"] .dot { background: #f59e0b; }

/* ── Layout ── */
.bn-layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
@media (max-width: 991px) {
    .bn-layout { grid-template-columns: 1fr; }
}

/* ── Form card (sticky) ── */
.bn-form-card {
    position: sticky;
    top: 12px;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 14px;
    overflow: hidden;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--da3-bd) transparent;
    align-self: start;
}
.bn-form-card::-webkit-scrollbar { width: 6px; }
.bn-form-card::-webkit-scrollbar-thumb { background: var(--da3-bd); border-radius: 999px; }
@media (max-width: 991px) {
    .bn-form-card { position: static; max-height: none; overflow-y: visible; }
}

.bn-form-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--da3-line);
}
.bn-form-head .icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: rgba(59,130,246,.12);
    color: #3b82f6;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.bn-form-head h4 { font-size: 14px; font-weight: 800; color: var(--da3-fg1); margin: 0; line-height: 1.25; }
.bn-form-head small { font-size: 11px; color: var(--da3-fg3); }

.bn-form-body { padding: 18px 20px; }

/* Edit banner */
.bn-edit-banner {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 10px;
    border: 1px solid rgba(245,158,11,.30);
    background: rgba(245,158,11,.08);
}
.bn-edit-banner i { color: #f59e0b; font-size: 14px; margin-top: 2px; flex-shrink: 0; }
.bn-edit-banner strong { color: var(--da3-fg1); font-size: 12.5px; font-weight: 800; display: block; }
.bn-edit-banner small { font-size: 11px; color: var(--da3-fg3); }

/* Field */
.bn-field { margin-bottom: 14px; }
.bn-field label {
    display: block;
    font-size: 12.5px; font-weight: 700;
    color: var(--da3-fg1);
    margin-bottom: 6px;
}
.bn-field label .req { color: #ef4444; }
.bn-field select,
.bn-field input[type="text"] {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    background: var(--da3-bg2);
    border: 1.5px solid var(--da3-bd);
    border-radius: 10px;
    color: var(--da3-fg1);
    font-size: 13px; font-weight: 600;
    outline: none;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.bn-field select:focus, .bn-field input:focus {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

/* Image upload */
.bn-upload {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border: 2px dashed var(--da3-bd);
    border-radius: 12px;
    background: var(--da3-bg2);
    cursor: pointer;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .2s, background .2s;
}
.bn-upload:hover {
    border-color: var(--da3-accent);
    background: rgba(59,130,246,.04);
}
body.dark-mode .bn-upload:hover { background: rgba(59,130,246,.08); }
.bn-upload-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.bn-upload-placeholder {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px;
    color: var(--da3-fg3);
    text-align: center;
    padding: 14px;
}
.bn-upload-placeholder i { font-size: 30px; opacity: .6; }
.bn-upload-placeholder span { font-size: 12.5px; font-weight: 700; color: var(--da3-fg2); }
.bn-upload-placeholder small { font-size: 10.5px; opacity: .8; }
.bn-upload-overlay {
    position: absolute; inset: 0;
    background: rgba(15,23,42,.65);
    color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .2s;
    gap: 6px;
}
.bn-upload:hover .bn-upload-overlay { opacity: 1; }
.bn-upload-overlay i { font-size: 22px; }
.bn-upload-overlay span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.bn-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Submit */
.bn-actions {
    display: flex; gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--da3-line);
}
.bn-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 7px;
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    font-size: 13px; font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: transform .15s, filter .15s, background .15s;
}
.bn-btn-primary {
    flex: 1;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: #fff;
    box-shadow: 0 6px 18px -4px rgba(59,130,246,.45);
}
.bn-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); color: #fff; }
.bn-btn-secondary {
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
}
.bn-btn-secondary:hover { background: var(--da3-card); color: var(--da3-fg1); }

/* ── List section ── */
.bn-list-card {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 14px;
    overflow: hidden;
}
.bn-list-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--da3-line);
}
.bn-list-head .icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: rgba(139,92,246,.12);
    color: #8b5cf6;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.bn-list-head h4 { font-size: 14px; font-weight: 800; color: var(--da3-fg1); margin: 0; flex: 1; }
.bn-list-head-count {
    font-size: 11px; font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg2);
}

/* Section tabs */
.bn-tabs {
    display: flex; gap: 4px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--da3-line);
    overflow-x: auto;
    scrollbar-width: none;
}
.bn-tabs::-webkit-scrollbar { display: none; }
.bn-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--da3-bd);
    border-radius: 999px;
    background: var(--da3-bg2);
    color: var(--da3-fg2);
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.bn-tab:hover { color: var(--da3-fg1); }
.bn-tab.is-active {
    background: var(--da3-fg1);
    color: var(--da3-card);
    border-color: var(--da3-fg1);
}
.bn-tab i { font-size: 10px; }
.bn-tab .count {
    background: rgba(255,255,255,.15);
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    min-width: 16px;
    text-align: center;
}
.bn-tab:not(.is-active) .count { background: var(--da3-card); }

/* Grid of banner cards */
.bn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    padding: 16px 18px 18px;
}

.bn-card {
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    border-radius: 12px;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .15s;
    position: relative;
}
.bn-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -16px rgba(0,0,0,.18);
    border-color: var(--da3-bd);
}
.bn-card.is-editing {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}
.bn-card-preview {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--da3-card);
}
.bn-card-preview img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s;
}
.bn-card:hover .bn-card-preview img { transform: scale(1.04); }
.bn-card-section-badge {
    position: absolute;
    top: 10px; inset-inline-start: 10px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 800;
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2;
}
.bn-card-section-badge i { font-size: 9px; }
.bn-card-section-badge.is-0 { background: rgba(59,130,246,.92); }
.bn-card-section-badge.is-1 { background: rgba(139,92,246,.92); }
.bn-card-section-badge.is-2 { background: rgba(245,158,11,.92); }

.bn-card-body { padding: 12px 14px 14px; }
.bn-card-id {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px;
    color: var(--da3-fg3);
    font-weight: 600;
    font-family: 'SF Mono', Consolas, monospace;
}
.bn-card-id i { font-size: 9px; }
.bn-card-link {
    margin-top: 6px;
    font-size: 12.5px; font-weight: 700;
    color: var(--da3-fg1);
    display: flex; align-items: center; gap: 6px;
    line-height: 1.35;
}
.bn-card-link-type {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    font-size: 10px; font-weight: 800;
    color: var(--da3-fg3);
    text-transform: uppercase;
    letter-spacing: .03em;
    flex-shrink: 0;
}
.bn-card-link-target {
    font-size: 12.5px; font-weight: 700;
    color: var(--da3-fg1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}
.bn-card-link-nolink {
    font-size: 11.5px;
    color: var(--da3-fg3);
    font-style: italic;
}

.bn-card-meta {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--da3-line);
}
.bn-card-date {
    font-size: 10.5px;
    color: var(--da3-fg3);
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
}
.bn-card-date i { font-size: 9px; }
.bn-card-actions { display: inline-flex; gap: 4px; }
.bn-card-act {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-card);
    color: var(--da3-fg2);
    font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
    font-family: inherit;
}
.bn-card-act:hover {
    border-color: var(--da3-accent);
    color: var(--da3-accent);
}
.bn-card-act-danger:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239,68,68,.08);
}

/* Empty */
.bn-empty {
    padding: 60px 24px;
    text-align: center;
}
.bn-empty-ico {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: rgba(59,130,246,.10);
    color: #3b82f6;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px;
    margin-bottom: 14px;
}
.bn-empty h4 { font-size: 15px; font-weight: 800; color: var(--da3-fg1); margin: 0 0 6px; }
.bn-empty p { font-size: 12.5px; color: var(--da3-fg3); margin: 0; max-width: 360px; margin-inline: auto; line-height: 1.55; }

/* ── Brand Cards ── */
.bn-brand-card {
    background: var(--da3-bg2);
    border: 1.5px solid var(--da3-bd);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.bn-brand-card:hover {
    border-color: #ca8a04;
    box-shadow: 0 4px 18px -8px rgba(202,138,4,.3);
}
.bn-brand-preview {
    height: 70px;
    display: flex; align-items: center; justify-content: center;
    padding: 8px;
    background: var(--da3-card);
    border-bottom: 1px solid var(--da3-line);
}
.bn-brand-preview img {
    max-height: 52px; max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.08));
}
.bn-brand-name-text {
    font-size: 13px; font-weight: 900;
    color: var(--da3-fg2);
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: center;
}
.bn-brand-body {
    padding: 8px 10px;
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.bn-brand-label {
    font-size: 11px; font-weight: 700;
    color: var(--da3-fg2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1;
}
.bn-brand-acts { display: inline-flex; gap: 4px; flex-shrink: 0; }
.bn-brand-act {
    width: 26px; height: 26px;
    border-radius: 7px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-card);
    color: var(--da3-fg3);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; cursor: pointer;
    transition: all .15s;
}
.bn-brand-act:hover { border-color: var(--da3-accent); color: var(--da3-accent); }
.bn-brand-act-del:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.08); }

/* ── Social Media Section ── */
.bn-social-card {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 18px;
}
.bn-social-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--da3-line);
}
.bn-social-head .icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: rgba(236,72,153,.12);
    color: #ec4899;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.bn-social-head h4 { font-size: 14px; font-weight: 800; color: var(--da3-fg1); margin: 0; flex: 1; }
.bn-social-add-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(236,72,153,.10);
    border: 1px solid rgba(236,72,153,.25);
    color: #ec4899;
    font-size: 12px; font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
}
.bn-social-add-btn:hover { background: rgba(236,72,153,.18); }

.bn-social-body { padding: 16px 18px 18px; }
.bn-social-list { display: flex; flex-direction: column; gap: 10px; }

.bn-social-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid var(--da3-bd);
    border-radius: 10px;
    background: var(--da3-bg2);
    transition: border-color .15s;
}
.bn-social-row:focus-within {
    border-color: #ec4899;
    box-shadow: 0 0 0 3px rgba(236,72,153,.12);
}
.bn-social-icon-btn {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: rgba(236,72,153,.10);
    color: #ec4899;
    border: 1px solid rgba(236,72,153,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s;
}
.bn-social-icon-btn:hover { background: #ec4899; color: #fff; border-color: #ec4899; }
.bn-social-url {
    flex: 1; min-width: 0;
    background: transparent;
    border: none;
    font-size: 12.5px; font-weight: 600;
    color: var(--da3-fg1);
    outline: none;
}
.bn-social-url::placeholder { color: var(--da3-fg3); }
.bn-social-del {
    width: 30px; height: 30px;
    border-radius: 7px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-card);
    color: var(--da3-fg3);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    cursor: pointer;
    transition: all .15s;
}
.bn-social-del:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.08); }
.bn-social-empty { padding: 20px; text-align: center; color: var(--da3-fg3); font-size: 12.5px; font-weight: 600; }

.bn-social-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--da3-line);
    display: flex; justify-content: flex-end;
}
.bn-social-save {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #ec4899, #a855f7);
    color: #fff;
    font-size: 12.5px; font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: filter .15s, transform .15s;
    box-shadow: 0 6px 18px -6px rgba(236,72,153,.5);
}
.bn-social-save:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Icon picker (reuse modal) */
.bn-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 6px;
    max-height: 380px;
    overflow-y: auto;
    padding: 4px;
}
.bn-icon-item {
    aspect-ratio: 1;
    border-radius: 9px;
    border: 1.5px solid var(--da3-bd);
    background: var(--da3-bg2);
    color: var(--da3-fg2);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    cursor: pointer;
    transition: all .15s;
}
.bn-icon-item:hover {
    border-color: #ec4899;
    color: #ec4899;
    background: rgba(236,72,153,.08);
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/category/add.blade.php
═══════════════════════════════════════════════════════════ */

.cat-add-wrap { max-width: 640px; margin: 0 auto; }
.ca-card {
    background: var(--da3-card, #1e1e22);
    border: 1px solid var(--da3-bd, rgba(255,255,255,.06));
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 18px;
}
body:not(.dark-mode) .ca-card { background: #fff; border-color: #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,.05); }

.ca-label { display: block; font-size: .78rem; font-weight: 800; color: #f4f4f5; margin-bottom: 7px; }
body:not(.dark-mode) .ca-label { color: #111827; }
.ca-req { color: #ef4444; margin-inline-start: 2px; }

.ca-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    color: #f4f4f5;
    font-size: .9rem; font-weight: 600;
    font-family: inherit; outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.ca-input:focus { border-color: #67e8f9; box-shadow: 0 0 0 3px rgba(6,182,212,.15); }
body:not(.dark-mode) .ca-input { background: #f9fafb; border-color: #d1d5db; color: #111827; }
body:not(.dark-mode) .ca-input:focus { border-color: #06b6d4; box-shadow: 0 0 0 3px rgba(6,182,212,.12); }

/* Image upload */
.ca-upload {
    position: relative;
    border: 1.5px dashed rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    background: rgba(255,255,255,.02);
    transition: border-color .2s, background .2s;
    overflow: hidden;
}
.ca-upload:hover { border-color: #67e8f9; background: rgba(6,182,212,.04); }
.ca-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ca-upload-preview {
    width: 90px; height: 90px; margin: 0 auto 10px;
    border-radius: 14px;
    background-size: cover; background-position: center;
    background-color: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    display: none;
}
body:not(.dark-mode) .ca-upload { background: #f9fafb; border-color: #d1d5db; }
body:not(.dark-mode) .ca-upload:hover { background: rgba(6,182,212,.04); border-color: #06b6d4; }
body:not(.dark-mode) .ca-upload-preview { background-color: #fff; border-color: #e5e7eb; }

/* Multi-lang row */
.ca-ml-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 500px) { .ca-ml-row { grid-template-columns: 1fr; } }
.ca-ml-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 800;
    letter-spacing: .3px; text-transform: uppercase;
    margin-bottom: 5px; border: 1.5px solid;
}
.ca-ml-badge.ar { background: rgba(37,99,235,.08); color: #2563eb; border-color: rgba(37,99,235,.18); }
.ca-ml-badge.en { background: rgba(16,185,129,.08); color: #059669; border-color: rgba(16,185,129,.2); }
.ca-ml-notice {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600;
    color: #67e8f9; opacity: .8; margin-bottom: 12px;
}
body:not(.dark-mode) .ca-ml-notice { color: #0e7490; }

/* Footer */
.ca-foot { display: flex; gap: 10px; justify-content: flex-end; }
.ca-btn {
    height: 40px; padding: 0 20px;
    border-radius: 10px; font-size: .84rem; font-weight: 800;
    border: 1.5px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04); color: #d4d4d8;
    display: inline-flex; align-items: center; gap: 7px;
    text-decoration: none; cursor: pointer; font-family: inherit;
    transition: all .15s;
}
.ca-btn:hover { color: #f4f4f5; border-color: rgba(255,255,255,.2); }
.ca-btn.primary { background: linear-gradient(135deg, #06b6d4, #0e7490); border-color: #0e7490; color: #fff; box-shadow: 0 6px 18px rgba(6,182,212,.3); }
.ca-btn.primary:hover { box-shadow: 0 8px 22px rgba(6,182,212,.4); }
body:not(.dark-mode) .ca-btn { background: #fff; border-color: #d1d5db; color: #374151; }
body:not(.dark-mode) .ca-btn:hover { border-color: #9ca3af; color: #111827; }
body:not(.dark-mode) .ca-btn.primary { color: #fff; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/category/category.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   CATEGORIES PAGE — Dashboard-grade (teal/cyan domain)
   ═══════════════════════════════════════════════════════════ */

/* ── Top action row ── */
.cat-actions-row {
    display: flex; gap: 8px; flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: 18px;
}
.cat-btn {
    height: 38px; padding: 0 18px;
    border-radius: 10px;
    font-size: .82rem; font-weight: 800;
    border: 1.5px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: #d4d4d8;
    display: inline-flex; align-items: center; gap: 7px;
    text-decoration: none; cursor: pointer; font-family: inherit;
    transition: all .15s;
}
.cat-btn:hover { color: #f4f4f5; border-color: rgba(255,255,255,.18); transform: translateY(-1px); }
.cat-btn.primary {
    background: linear-gradient(135deg, #06b6d4, #0e7490);
    border-color: #0e7490; color: #fff;
}
.cat-btn.primary:hover { color: #fff;  }
body:not(.dark-mode) .cat-btn { background: #fff; border-color: #d1d5db; color: #374151; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
body:not(.dark-mode) .cat-btn:hover { color: #111827; border-color: #9ca3af; }
body:not(.dark-mode) .cat-btn.primary { color: #fff; }

/* ── Stats ── */
.cat-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.cat-stat {
    background: #1e1e22;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex; align-items: center; gap: 14px;
    position: relative; overflow: hidden;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.cat-stat::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--accent-glow, rgba(6,182,212,.08)) 0%, transparent 60%);
    pointer-events: none;
}
.cat-stat:hover { transform: translateY(-2px); border-color: var(--accent-color, rgba(6,182,212,.35)); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.cat-stat-ico {
    width: 46px; height: 46px; border-radius: 12px;
    background: var(--accent-bg, rgba(6,182,212,.15));
    color: var(--accent-color, #67e8f9);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
    position: relative; z-index: 1;
}
.cat-stat-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.cat-stat-val { display: block; font-size: 1.55rem; font-weight: 900; color: #f4f4f5; line-height: 1.05; letter-spacing: -.03em; }
.cat-stat-lbl { display: block; font-size: .7rem; font-weight: 800; color: #a1a1aa; text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.cat-stat.s-cyan  { --accent-color: #67e8f9; --accent-bg: rgba(6,182,212,.15);  --accent-glow: rgba(6,182,212,.08); }
.cat-stat.s-green { --accent-color: #34d399; --accent-bg: rgba(16,185,129,.15); --accent-glow: rgba(16,185,129,.08); }
.cat-stat.s-red   { --accent-color: #fca5a5; --accent-bg: rgba(239,68,68,.15);  --accent-glow: rgba(239,68,68,.08); }
.cat-stat.s-blue  { --accent-color: #818cf8; --accent-bg: rgba(99,102,241,.15); --accent-glow: rgba(99,102,241,.08); }
.cat-stat.s-amber { --accent-color: #fbbf24; --accent-bg: rgba(245,158,11,.15); --accent-glow: rgba(245,158,11,.08); }

body:not(.dark-mode) .cat-stat { background: #fff; border-color: #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
body:not(.dark-mode) .cat-stat-val { color: #111827; }
body:not(.dark-mode) .cat-stat-lbl { color: #6b7280; }
body:not(.dark-mode) .cat-stat.s-cyan  { --accent-color: #0e7490; }
body:not(.dark-mode) .cat-stat.s-green { --accent-color: #047857; }
body:not(.dark-mode) .cat-stat.s-red   { --accent-color: #b91c1c; }
body:not(.dark-mode) .cat-stat.s-blue  { --accent-color: #4f46e5; }
body:not(.dark-mode) .cat-stat.s-amber { --accent-color: #b45309; }

/* ── Toolbar ── */
.cat-toolbar {
    background: #1e1e22;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cat-search { flex: 1; min-width: 220px; position: relative; }
.cat-search i { position: absolute; top: 50%; transform: translateY(-50%); color: #71717a; font-size: .8rem; pointer-events: none; }
html[dir="rtl"] .cat-search i { right: 12px; }
html[dir="ltr"] .cat-search i { left: 12px; }
.cat-search input {
    width: 100%; height: 38px; padding: 0 36px;
    background: rgba(255,255,255,.04);
    border: 1.5px solid rgba(255,255,255,.08);
    border-radius: 10px;
    color: #f4f4f5;
    font-size: .85rem; font-weight: 600;
    outline: none; font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.cat-search input:focus { border-color: #67e8f9; box-shadow: 0 0 0 3px rgba(6,182,212,.15); }

.cat-pills { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.cat-pill {
    padding: 7px 13px;
    border: 1.5px solid rgba(255,255,255,.08);
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    color: #a1a1aa;
    font-size: .75rem; font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex; align-items: center; gap: 5px;
    font-family: inherit;
}
.cat-pill:hover { border-color: #67e8f9; color: #67e8f9; }
.cat-pill.is-active { background: #06b6d4; border-color: #06b6d4; color: #fff; }
.cat-pill .count { background: rgba(255,255,255,.25); padding: 1px 6px; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.cat-pill:not(.is-active) .count { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.06); }

body:not(.dark-mode) .cat-toolbar { background: #fff; border-color: #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
body:not(.dark-mode) .cat-search input,
body:not(.dark-mode) .cat-pill { background: #f9fafb; border-color: #d1d5db; color: #374151; }
body:not(.dark-mode) .cat-search input { color: #111827; }
body:not(.dark-mode) .cat-pill .count { background: #f3f4f6; border-color: #e5e7eb; }
body:not(.dark-mode) .cat-pill.is-active .count { background: rgba(255,255,255,.25); border-color: transparent; }

/* ── Table ── */
.cat-tbl-wrap {
    background: #1e1e22;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    overflow: hidden;
}
.cat-tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.cat-tbl thead tr { background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.06); }
.cat-tbl thead th {
    font-size: .68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
    color: #a1a1aa;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    white-space: nowrap; text-align: start;
}
.cat-tbl tbody tr { transition: background .12s; }
.cat-tbl tbody tr:hover { background: rgba(255,255,255,.02); }
.cat-tbl tbody td { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle; color: #f4f4f5; }
.cat-tbl tbody tr:last-child td { border-bottom: none; }

/* Index */
.cat-idx {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 24px; padding: 0 8px;
    border-radius: 6px;
    background: rgba(255,255,255,.05);
    color: #a1a1aa;
    font-size: .72rem; font-weight: 800;
    font-family: 'SF Mono', monospace;
}

/* Image cell */
.cat-img-wrap {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    overflow: hidden;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.cat-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-img-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.05rem; font-weight: 900;
}

/* Name */
.cat-name { font-size: .92rem; font-weight: 800; color: #f4f4f5; letter-spacing: -.01em; margin-bottom: 3px; }
.cat-slug { font-size: .7rem; color: #a1a1aa; font-family: 'SF Mono', monospace; }

/* Products count */
.cat-prods {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(99,102,241,.12);
    color: #c4b5fd;
    border: 1px solid rgba(99,102,241,.25);
    font-size: .76rem; font-weight: 800;
}
.cat-prods.zero { background: rgba(255,255,255,.04); color: #71717a; border-color: rgba(255,255,255,.06); }

/* Status pill */
.cat-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .7rem; font-weight: 800;
    border: 1px solid;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s;
}
.cat-status:hover { transform: translateY(-1px); }
.cat-status.active   { background: rgba(16,185,129,.15); color: #34d399; border-color: rgba(16,185,129,.3); }
.cat-status.inactive { background: rgba(239,68,68,.15);  color: #fca5a5; border-color: rgba(239,68,68,.3); }
.cat-status .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* Actions */
.cat-row-actions { display: flex; gap: 5px; justify-content: center; }
.cat-act {
    width: 34px; height: 34px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: #a1a1aa;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem;
    transition: all .15s;
    text-decoration: none;
}
.cat-act:hover { transform: translateY(-1px); }
.cat-act.edit:hover { background: rgba(6,182,212,.15); color: #67e8f9; border-color: #06b6d4; }
.cat-act.del:hover  { background: rgba(239,68,68,.15);  color: #fca5a5; border-color: #ef4444; }

/* Empty */
.cat-empty { padding: 60px 24px; text-align: center; }
.cat-empty-icon {
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #71717a;
}
.cat-empty h3 { font-size: 1rem; font-weight: 800; color: #f4f4f5; margin: 0 0 4px; }
.cat-empty p  { font-size: .82rem; color: #a1a1aa; margin: 0; }

/* Light mode (table) */
body:not(.dark-mode) .cat-tbl-wrap { background: #fff; border-color: #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
body:not(.dark-mode) .cat-tbl thead tr { background: #f9fafb; border-bottom-color: #e5e7eb; }
body:not(.dark-mode) .cat-tbl thead th { color: #6b7280; border-bottom-color: #e5e7eb; }
body:not(.dark-mode) .cat-tbl tbody td { color: #111827; border-bottom-color: #f3f4f6; }
body:not(.dark-mode) .cat-tbl tbody tr:hover { background: #f9fafb; }
body:not(.dark-mode) .cat-name { color: #111827; }
body:not(.dark-mode) .cat-slug { color: #6b7280; }
body:not(.dark-mode) .cat-idx { background: #f3f4f6; color: #6b7280; }
body:not(.dark-mode) .cat-img-wrap { background: #f9fafb; border-color: #e5e7eb; }
body:not(.dark-mode) .cat-prods { background: rgba(99,102,241,.08); color: #4f46e5; border-color: rgba(99,102,241,.2); }
body:not(.dark-mode) .cat-prods.zero { background: #f3f4f6; color: #9ca3af; border-color: #e5e7eb; }
body:not(.dark-mode) .cat-act { background: #f9fafb; border-color: #e5e7eb; color: #6b7280; }
body:not(.dark-mode) .cat-empty-icon { background: #f9fafb; color: #9ca3af; }
body:not(.dark-mode) .cat-empty h3 { color: #111827; }
body:not(.dark-mode) .cat-empty p { color: #6b7280; }

/* ═══════ MODAL ═══════ */
.cat-modal-bd {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
}
.cat-modal-bd.open { display: flex; }
.cat-modal {
    background: #1e1e22;
    width: min(520px, 100%);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.08);
    animation: catIn .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes catIn { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
body:not(.dark-mode) .cat-modal { background: #fff; border-color: #e5e7eb; }

.cat-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
body:not(.dark-mode) .cat-modal-head { border-bottom-color: #e5e7eb; }
.cat-modal-head h3 {
    margin: 0; font-size: 1.05rem; font-weight: 800;
    color: #f4f4f5;
    display: flex; align-items: center; gap: 9px;
}
.cat-modal-head h3 i { color: #67e8f9; }
body:not(.dark-mode) .cat-modal-head h3 { color: #111827; }
body:not(.dark-mode) .cat-modal-head h3 i { color: #0e7490; }
.cat-modal-x {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    color: #a1a1aa;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.cat-modal-x:hover { background: rgba(255,255,255,.08); color: #f4f4f5; }
body:not(.dark-mode) .cat-modal-x { background: #f9fafb; border-color: #e5e7eb; color: #6b7280; }
body:not(.dark-mode) .cat-modal-x:hover { background: #f3f4f6; color: #111827; }

.cat-modal-body { padding: 22px; }
.cat-field { margin-bottom: 16px; }
.cat-field:last-child { margin-bottom: 0; }
.cat-field label {
    display: block;
    font-size: .78rem; font-weight: 800;
    color: #f4f4f5;
    margin-bottom: 7px;
}
.cat-field label .req { color: #ef4444; }
body:not(.dark-mode) .cat-field label { color: #111827; }
.cat-field input[type="text"] {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    color: #f4f4f5;
    font-size: .9rem; font-weight: 600;
    font-family: inherit; outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.cat-field input[type="text"]:focus { border-color: #67e8f9; box-shadow: 0 0 0 3px rgba(6,182,212,.15); }
body:not(.dark-mode) .cat-field input[type="text"] { background: #f9fafb; border-color: #d1d5db; color: #111827; }

/* Image upload */
.cat-upload {
    position: relative;
    border: 1.5px dashed rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 22px;
    text-align: center;
    cursor: pointer;
    background: rgba(255,255,255,.02);
    transition: border-color .2s, background .2s;
}
.cat-upload:hover { border-color: #67e8f9; background: rgba(6,182,212,.04); }
.cat-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cat-upload-icon { font-size: 26px; color: #71717a; margin-bottom: 6px; }
.cat-upload-text { font-size: .82rem; font-weight: 700; color: #f4f4f5; }
.cat-upload-sub  { font-size: .7rem; color: #a1a1aa; margin-top: 2px; }
.cat-upload-preview {
    width: 84px; height: 84px;
    margin: 0 auto 8px;
    border-radius: 12px;
    background-size: cover; background-position: center;
    background-color: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    display: none;
}
body:not(.dark-mode) .cat-upload { background: #f9fafb; border-color: #d1d5db; }
body:not(.dark-mode) .cat-upload:hover { background: rgba(6,182,212,.04); border-color: #06b6d4; }
body:not(.dark-mode) .cat-upload-text { color: #111827; }
body:not(.dark-mode) .cat-upload-sub  { color: #6b7280; }
body:not(.dark-mode) .cat-upload-icon { color: #9ca3af; }
body:not(.dark-mode) .cat-upload-preview { background-color: #fff; border-color: #e5e7eb; }

.cat-modal-foot {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 16px 22px;
    border-top: 1px solid rgba(255,255,255,.05);
    background: rgba(255,255,255,.02);
}
body:not(.dark-mode) .cat-modal-foot { background: #f9fafb; border-top-color: #e5e7eb; }

/* ── Multi-language name row in modal ── */
.cat-ml-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 520px) { .cat-ml-row { grid-template-columns: 1fr; } }
.cat-ml-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px; font-weight: 800;
    letter-spacing: .3px; text-transform: uppercase;
    margin-bottom: 5px; border: 1.5px solid;
}
.cat-ml-badge.ar { background: rgba(37,99,235,.08); color: #2563eb; border-color: rgba(37,99,235,.18); }
.cat-ml-badge.en { background: rgba(16,185,129,.08); color: #059669; border-color: rgba(16,185,129,.2); }
body:not(.dark-mode) .cat-ml-badge.ar { background: rgba(37,99,235,.06); }
body:not(.dark-mode) .cat-ml-badge.en { background: rgba(16,185,129,.06); }
.cat-ml-notice {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600;
    color: #67e8f9; opacity: .8;
    margin-bottom: 12px;
}
body:not(.dark-mode) .cat-ml-notice { color: #0e7490; }

/* EN name column header tint */
.cat-tbl thead th.col-en {
    color: #059669;
}
body:not(.dark-mode) .cat-tbl thead th.col-en { color: #047857; }

/* Mobile */
@media (max-width: 768px) {
    .cat-tbl thead { display: none; }
    .cat-tbl tbody tr { display: block; padding: 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
    .cat-tbl tbody td {
        display: flex; justify-content: space-between; align-items: center;
        padding: 6px 0;
        border-bottom: 1px solid rgba(255,255,255,.04);
    }
    .cat-tbl tbody td:last-child { border-bottom: none; justify-content: center; padding-top: 10px; }
    .cat-tbl tbody td::before {
        content: attr(data-label);
        font-size: .68rem; font-weight: 800;
        text-transform: uppercase; letter-spacing: .04em;
        color: #a1a1aa;
        flex-shrink: 0; margin-inline-end: .5rem;
    }
    body:not(.dark-mode) .cat-tbl tbody tr { border-bottom-color: #e5e7eb; }
    body:not(.dark-mode) .cat-tbl tbody td { border-bottom-color: #f3f4f6; }
    body:not(.dark-mode) .cat-tbl tbody td::before { color: #6b7280; }
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/category/edit.blade.php
═══════════════════════════════════════════════════════════ */

.cat-add-wrap { max-width: 640px; margin: 0 auto; }
.ca-card {
    background: var(--da3-card, #1e1e22);
    border: 1px solid var(--da3-bd, rgba(255,255,255,.06));
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 18px;
}
body:not(.dark-mode) .ca-card { background: #fff; border-color: #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.ca-label { display: block; font-size: .78rem; font-weight: 800; color: #f4f4f5; margin-bottom: 7px; }
body:not(.dark-mode) .ca-label { color: #111827; }
.ca-req { color: #ef4444; margin-inline-start: 2px; }
.ca-input {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    color: #f4f4f5;
    font-size: .9rem; font-weight: 600;
    font-family: inherit; outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.ca-input:focus { border-color: #67e8f9; box-shadow: 0 0 0 3px rgba(6,182,212,.15); }
body:not(.dark-mode) .ca-input { background: #f9fafb; border-color: #d1d5db; color: #111827; }
body:not(.dark-mode) .ca-input:focus { border-color: #06b6d4; box-shadow: 0 0 0 3px rgba(6,182,212,.12); }
.ca-upload {
    position: relative;
    border: 1.5px dashed rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 28px 20px;
    text-align: center; cursor: pointer;
    background: rgba(255,255,255,.02);
    transition: border-color .2s, background .2s; overflow: hidden;
}
.ca-upload:hover { border-color: #67e8f9; background: rgba(6,182,212,.04); }
.ca-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ca-upload-preview {
    width: 90px; height: 90px; margin: 0 auto 10px;
    border-radius: 14px;
    background-size: cover; background-position: center;
    background-color: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}
body:not(.dark-mode) .ca-upload { background: #f9fafb; border-color: #d1d5db; }
body:not(.dark-mode) .ca-upload:hover { background: rgba(6,182,212,.04); border-color: #06b6d4; }
body:not(.dark-mode) .ca-upload-preview { background-color: #fff; border-color: #e5e7eb; }
.ca-ml-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 500px) { .ca-ml-row { grid-template-columns: 1fr; } }
.ca-ml-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 800;
    letter-spacing: .3px; text-transform: uppercase;
    margin-bottom: 5px; border: 1.5px solid;
}
.ca-ml-badge.ar { background: rgba(37,99,235,.08); color: #2563eb; border-color: rgba(37,99,235,.18); }
.ca-ml-badge.en { background: rgba(16,185,129,.08); color: #059669; border-color: rgba(16,185,129,.2); }
.ca-ml-notice {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600;
    color: #67e8f9; opacity: .8; margin-bottom: 12px;
}
body:not(.dark-mode) .ca-ml-notice { color: #0e7490; }
.ca-foot { display: flex; gap: 10px; justify-content: flex-end; }
.ca-btn {
    height: 40px; padding: 0 20px;
    border-radius: 10px; font-size: .84rem; font-weight: 800;
    border: 1.5px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04); color: #d4d4d8;
    display: inline-flex; align-items: center; gap: 7px;
    text-decoration: none; cursor: pointer; font-family: inherit;
    transition: all .15s;
}
.ca-btn:hover { color: #f4f4f5; border-color: rgba(255,255,255,.2); }
.ca-btn.primary { background: linear-gradient(135deg, #06b6d4, #0e7490); border-color: #0e7490; color: #fff; box-shadow: 0 6px 18px rgba(6,182,212,.3); }
.ca-btn.primary:hover { box-shadow: 0 8px 22px rgba(6,182,212,.4); }
body:not(.dark-mode) .ca-btn { background: #fff; border-color: #d1d5db; color: #374151; }
body:not(.dark-mode) .ca-btn:hover { border-color: #9ca3af; color: #111827; }
body:not(.dark-mode) .ca-btn.primary { color: #fff; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/checkout/page.blade.php
═══════════════════════════════════════════════════════════ */

html,body{
    margin:0;
    padding:0;
    height:100%;
    background:#000;
    overflow:hidden;
    font-family:'Zain', sans-serif;
}

/* IFRAME */
#paymobFrame{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    border:none;
    opacity:0;
    transition:opacity .4s ease;
}

/* LOADER OVERLAY */
.loader-wrapper{
    position:fixed;
    inset:0;
    background:#0f172a;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:9999;
    color:#fff;
}

/* Spinner */
.spinner{
    width:55px;
    height:55px;
    border:5px solid rgba(255,255,255,.1);
    border-top:5px solid #fff;
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin-bottom:20px;
}

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

.loader-text{
    font-size:14px;
    color:#cbd5e1;
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/city/index.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   CITIES — dashboard-style admin page (matches countries / currencies)
═══════════════════════════════════════════════════════════════════════ */
.cty-page {
    --cty-radius:      14px;
    --cty-radius-sm:   10px;
    --cty-radius-pill: 999px;
    --cty-text:        var(--da3g-fg1, #f4f4f5);
    --cty-text-2:      var(--da3g-fg2, #a1a1aa);
    --cty-text-3:      var(--da3g-fg3, #71717a);
    --cty-card:        var(--da3g-card, #1c1c1f);
    --cty-bg2:         var(--da3g-bg2,  #111113);
    --cty-line:        var(--da3g-line, rgba(255,255,255,.06));
    --cty-line-2:      var(--da3g-bd,   rgba(255,255,255,.08));
    --cty-hover:       var(--da3g-hover, rgba(255,255,255,.03));
    --cty-accent:      var(--da3g-accent, #3b82f6);
    --cty-accent-bg:   var(--da3g-abg,    rgba(59,130,246,.12));
    --cty-success:     var(--da3g-success, #10b981);
    --cty-success-bg:  var(--da3g-success-bg, rgba(16,185,129,.12));
    --cty-warn:        var(--da3g-warn, #f59e0b);
    --cty-warn-bg:     var(--da3g-warn-bg, rgba(245,158,11,.12));
    --cty-danger:      var(--da3g-danger, #ef4444);
    --cty-danger-bg:   var(--da3g-danger-bg, rgba(239,68,68,.12));
}
body:not(.dark-mode) .cty-page {
    --cty-text:   #09090b;
    --cty-text-2: #52525b;
    --cty-text-3: #a1a1aa;
    --cty-card:   #ffffff;
    --cty-bg2:    #f9f9fb;
    --cty-line:   #f4f4f5;
    --cty-line-2: #e4e4e7;
    --cty-hover:  rgba(0,0,0,.02);
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.cty-hero {
    background: var(--cty-card);
    border: 1px solid var(--cty-line-2);
    border-radius: var(--cty-radius);
    padding: 22px 26px;
    margin-bottom: 16px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    position: relative; overflow: hidden;
}
.cty-hero::before {
    content: ''; position: absolute;
    top: -30%; inset-inline-end: -10%;
    width: 220px; height: 220px;
    background: radial-gradient(circle, color-mix(in srgb, var(--cty-accent) 18%, transparent), transparent 65%);
    pointer-events: none;
}
.cty-hero-content { display: flex; align-items: center; gap: 14px; min-width: 260px; }
.cty-hero-ico {
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--cty-accent-bg); color: var(--cty-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}
.cty-hero h1 { font-size: 22px; font-weight: 900; color: var(--cty-text); margin: 0 0 4px; letter-spacing: -.02em; }
.cty-hero p  { font-size: 12.5px; color: var(--cty-text-3); margin: 0; }
.cty-hero-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border: 0; border-radius: var(--cty-radius-sm);
    background: var(--cty-accent); color: #fff;
    font-size: 13px; font-weight: 800;
    cursor: pointer; text-decoration: none;
    transition: filter .15s, transform .15s;
}
.cty-hero-cta:hover { transform: translateY(-1px); filter: brightness(1.08); color: #fff; }

/* ── Stats strip ────────────────────────────────────────────────────── */
.cty-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
@media (max-width: 720px) { .cty-stats { grid-template-columns: 1fr; } }
.cty-stat {
    background: var(--cty-card);
    border: 1px solid var(--cty-line-2);
    border-radius: var(--cty-radius);
    padding: 16px 18px;
    display: flex; align-items: center; gap: 12px;
}
.cty-stat-ico {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--cty-accent-bg); color: var(--cty-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.cty-stat.is-success .cty-stat-ico { background: var(--cty-success-bg); color: var(--cty-success); }
.cty-stat.is-danger  .cty-stat-ico { background: var(--cty-danger-bg);  color: var(--cty-danger); }
.cty-stat-lbl { font-size: 11.5px; font-weight: 700; color: var(--cty-text-3); text-transform: uppercase; letter-spacing: .06em; }
.cty-stat-val { font-size: 22px; font-weight: 900; color: var(--cty-text); }

/* ── Table card ─────────────────────────────────────────────────────── */
.cty-table-wrap {
    background: var(--cty-card);
    border: 1px solid var(--cty-line-2);
    border-radius: var(--cty-radius);
    overflow: hidden;
    margin-bottom: 16px;
}
.cty-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.cty-table thead th {
    background: var(--cty-bg2);
    padding: 14px 16px;
    font-size: .7rem; font-weight: 800;
    color: var(--cty-text-2);
    text-transform: uppercase; letter-spacing: .08em;
    border-bottom: 1px solid var(--cty-line);
    text-align: start; white-space: nowrap;
}
.cty-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--cty-line);
    color: var(--cty-text);
    vertical-align: middle;
    font-size: 13px;
}
.cty-table tbody tr { transition: background .12s; }
.cty-table tbody tr:hover { background: var(--cty-hover); }
.cty-table tbody tr:last-child td { border-bottom: 0; }

.cty-drag { color: var(--cty-text-3); cursor: grab; user-select: none; text-align: center; width: 36px; }
.cty-drag:active { cursor: grabbing; }
.cty-num { color: var(--cty-text-3); font-weight: 700; width: 50px; }

/* City name */
.cty-name { display: flex; align-items: center; gap: 12px; }
.cty-name-ico {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--cty-bg2); border: 1px solid var(--cty-line-2);
    color: var(--cty-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.cty-name-meta strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--cty-text); margin-bottom: 2px; }
.cty-name-meta small  { font-size: 11.5px; color: var(--cty-text-3); font-weight: 600; }

.cty-name-en {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 12.5px; color: var(--cty-text-2); font-weight: 700;
}
.cty-name-en.is-empty { color: var(--cty-text-3); font-family: inherit; font-weight: 500; }

/* Country chip */
.cty-country {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--cty-radius-pill);
    font-size: 11.5px; font-weight: 700;
    background: var(--cty-accent-bg); color: var(--cty-accent);
    border: 1px solid color-mix(in srgb, var(--cty-accent) 30%, transparent);
}
.cty-country i { font-size: 9px; }

/* Status pill */
.cty-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800;
    cursor: pointer; text-decoration: none;
    border: 1px solid; transition: filter .15s, transform .15s;
}
.cty-status:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cty-status.is-on  { background: var(--cty-success-bg); color: var(--cty-success); border-color: color-mix(in srgb, var(--cty-success) 35%, transparent); }
.cty-status.is-off { background: var(--cty-danger-bg);  color: var(--cty-danger);  border-color: color-mix(in srgb, var(--cty-danger) 35%, transparent); }

/* Date */
.cty-date { font-size: 12px; color: var(--cty-text-2); font-weight: 600; white-space: nowrap; }

/* Actions */
.cty-actions { display: inline-flex; align-items: center; gap: 6px; }
.cty-act {
    width: 34px; height: 34px; border-radius: 9px;
    border: 1px solid var(--cty-line-2);
    background: var(--cty-bg2);
    color: var(--cty-text-2);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 12.5px;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.cty-act:hover { transform: translateY(-1px); }
.cty-act.is-edit:hover   { color: var(--cty-accent); background: var(--cty-accent-bg); border-color: var(--cty-accent); }
.cty-act.is-delete:hover { color: var(--cty-danger); background: var(--cty-danger-bg); border-color: var(--cty-danger); }

/* Footer */
.cty-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 14px 18px;
    background: var(--cty-bg2);
    border-top: 1px solid var(--cty-line);
}
.cty-foot-text { font-size: 12px; color: var(--cty-text-3); font-weight: 600; }

/* Empty */
.cty-empty { padding: 70px 20px; text-align: center; }
.cty-empty i { font-size: 48px; color: var(--cty-text-3); display: block; margin-bottom: 12px; }
.cty-empty h3 { font-size: 16px; font-weight: 800; color: var(--cty-text); margin-bottom: 4px; }
.cty-empty p  { font-size: 12.5px; color: var(--cty-text-3); }

/* Mobile */
@media (max-width: 900px) {
    .cty-table thead { display: none; }
    .cty-table tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 8px 14px;
        padding: 14px;
        border-bottom: 1px solid var(--cty-line);
    }
    .cty-table tbody td { padding: 0; border: 0; display: flex; align-items: center; }
    .cty-table tbody td:nth-child(1), .cty-table tbody td:nth-child(2) { display: none; }
    .cty-table tbody td:nth-child(3) { grid-column: 1 / 4; }
    .cty-table tbody td::before {
        content: attr(data-label);
        font-size: 10.5px; font-weight: 800;
        text-transform: uppercase; letter-spacing: .06em;
        color: var(--cty-text-3);
        margin-inline-end: 8px;
    }
    .cty-table tbody td:nth-child(3)::before { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/country/index.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   COUNTRIES — dashboard-style admin page (matches currencies / payments)
═══════════════════════════════════════════════════════════════════════ */
.ctr-page {
    --ctr-radius:      14px;
    --ctr-radius-sm:   10px;
    --ctr-radius-pill: 999px;
    --ctr-text:        var(--da3g-fg1, #f4f4f5);
    --ctr-text-2:      var(--da3g-fg2, #a1a1aa);
    --ctr-text-3:      var(--da3g-fg3, #71717a);
    --ctr-card:        var(--da3g-card, #1c1c1f);
    --ctr-bg2:         var(--da3g-bg2,  #111113);
    --ctr-line:        var(--da3g-line, rgba(255,255,255,.06));
    --ctr-line-2:      var(--da3g-bd,   rgba(255,255,255,.08));
    --ctr-hover:       var(--da3g-hover, rgba(255,255,255,.03));
    --ctr-accent:      var(--da3g-accent, #3b82f6);
    --ctr-accent-bg:   var(--da3g-abg,    rgba(59,130,246,.12));
    --ctr-success:     var(--da3g-success, #10b981);
    --ctr-success-bg:  var(--da3g-success-bg, rgba(16,185,129,.12));
    --ctr-warn:        var(--da3g-warn, #f59e0b);
    --ctr-warn-bg:     var(--da3g-warn-bg, rgba(245,158,11,.12));
    --ctr-danger:      var(--da3g-danger, #ef4444);
    --ctr-danger-bg:   var(--da3g-danger-bg, rgba(239,68,68,.12));
}
body:not(.dark-mode) .ctr-page {
    --ctr-text:   #09090b;
    --ctr-text-2: #52525b;
    --ctr-text-3: #a1a1aa;
    --ctr-card:   #ffffff;
    --ctr-bg2:    #f9f9fb;
    --ctr-line:   #f4f4f5;
    --ctr-line-2: #e4e4e7;
    --ctr-hover:  rgba(0,0,0,.02);
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.ctr-hero {
    background: var(--ctr-card);
    border: 1px solid var(--ctr-line-2);
    border-radius: var(--ctr-radius);
    padding: 22px 26px;
    margin-bottom: 16px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    position: relative; overflow: hidden;
}
.ctr-hero::before {
    content: ''; position: absolute;
    top: -30%; inset-inline-end: -10%;
    width: 220px; height: 220px;
    background: radial-gradient(circle, color-mix(in srgb, var(--ctr-accent) 18%, transparent), transparent 65%);
    pointer-events: none;
}
.ctr-hero-content { display: flex; align-items: center; gap: 14px; min-width: 260px; }
.ctr-hero-ico {
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--ctr-accent-bg); color: var(--ctr-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}
.ctr-hero h1 { font-size: 22px; font-weight: 900; color: var(--ctr-text); margin: 0 0 4px; letter-spacing: -.02em; }
.ctr-hero p  { font-size: 12.5px; color: var(--ctr-text-3); margin: 0; }
.ctr-hero-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border: 0; border-radius: var(--ctr-radius-sm);
    background: var(--ctr-accent); color: #fff;
    font-size: 13px; font-weight: 800;
    cursor: pointer; text-decoration: none;
    transition: filter .15s, transform .15s;
}
.ctr-hero-cta:hover { transform: translateY(-1px); filter: brightness(1.08); color: #fff; }

/* ── Stats strip ────────────────────────────────────────────────────── */
.ctr-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
@media (max-width: 720px) { .ctr-stats { grid-template-columns: 1fr; } }
.ctr-stat {
    background: var(--ctr-card);
    border: 1px solid var(--ctr-line-2);
    border-radius: var(--ctr-radius);
    padding: 16px 18px;
    display: flex; align-items: center; gap: 12px;
}
.ctr-stat-ico {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--ctr-accent-bg); color: var(--ctr-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.ctr-stat.is-success .ctr-stat-ico { background: var(--ctr-success-bg); color: var(--ctr-success); }
.ctr-stat.is-danger  .ctr-stat-ico { background: var(--ctr-danger-bg);  color: var(--ctr-danger); }
.ctr-stat-lbl { font-size: 11.5px; font-weight: 700; color: var(--ctr-text-3); text-transform: uppercase; letter-spacing: .06em; }
.ctr-stat-val { font-size: 22px; font-weight: 900; color: var(--ctr-text); }

/* ── Table card ─────────────────────────────────────────────────────── */
.ctr-table-wrap {
    background: var(--ctr-card);
    border: 1px solid var(--ctr-line-2);
    border-radius: var(--ctr-radius);
    overflow: hidden;
    margin-bottom: 16px;
}
.ctr-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ctr-table thead th {
    background: var(--ctr-bg2);
    padding: 14px 16px;
    font-size: .7rem; font-weight: 800;
    color: var(--ctr-text-2);
    text-transform: uppercase; letter-spacing: .08em;
    border-bottom: 1px solid var(--ctr-line);
    text-align: start; white-space: nowrap;
}
.ctr-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--ctr-line);
    color: var(--ctr-text);
    vertical-align: middle;
    font-size: 13px;
}
.ctr-table tbody tr { transition: background .12s; }
.ctr-table tbody tr:hover { background: var(--ctr-hover); }
.ctr-table tbody tr:last-child td { border-bottom: 0; }

/* Drag */
.ctr-drag { color: var(--ctr-text-3); cursor: grab; user-select: none; text-align: center; width: 36px; }
.ctr-drag:active { cursor: grabbing; }
.ctr-num { color: var(--ctr-text-3); font-weight: 700; width: 50px; }

/* Country cell */
.ctr-name { display: flex; align-items: center; gap: 12px; }
.ctr-name-flag {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--ctr-bg2); border: 1px solid var(--ctr-line-2);
    color: var(--ctr-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.ctr-name-meta strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--ctr-text); margin-bottom: 2px; }
.ctr-name-meta small  { font-size: 11.5px; color: var(--ctr-text-3); font-weight: 600; }

.ctr-name-en {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 12.5px; color: var(--ctr-text-2); font-weight: 700;
}
.ctr-name-en.is-empty { color: var(--ctr-text-3); font-family: inherit; font-weight: 500; }

/* Status pill */
.ctr-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800;
    cursor: pointer; text-decoration: none;
    border: 1px solid; transition: filter .15s, transform .15s;
}
.ctr-status:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ctr-status.is-on  { background: var(--ctr-success-bg); color: var(--ctr-success); border-color: color-mix(in srgb, var(--ctr-success) 35%, transparent); }
.ctr-status.is-off { background: var(--ctr-danger-bg);  color: var(--ctr-danger);  border-color: color-mix(in srgb, var(--ctr-danger) 35%, transparent); }

/* Date */
.ctr-date { font-size: 12px; color: var(--ctr-text-2); font-weight: 600; white-space: nowrap; }

/* Action buttons */
.ctr-actions { display: inline-flex; align-items: center; gap: 6px; }
.ctr-act {
    width: 34px; height: 34px; border-radius: 9px;
    border: 1px solid var(--ctr-line-2);
    background: var(--ctr-bg2);
    color: var(--ctr-text-2);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 12.5px;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.ctr-act:hover { transform: translateY(-1px); }
.ctr-act.is-edit:hover   { color: var(--ctr-accent); background: var(--ctr-accent-bg); border-color: var(--ctr-accent); }
.ctr-act.is-delete:hover { color: var(--ctr-danger); background: var(--ctr-danger-bg); border-color: var(--ctr-danger); }

/* Footer */
.ctr-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 14px 18px;
    background: var(--ctr-bg2);
    border-top: 1px solid var(--ctr-line);
}
.ctr-foot-text { font-size: 12px; color: var(--ctr-text-3); font-weight: 600; }

/* Empty state */
.ctr-empty { padding: 70px 20px; text-align: center; }
.ctr-empty i { font-size: 48px; color: var(--ctr-text-3); display: block; margin-bottom: 12px; }
.ctr-empty h3 { font-size: 16px; font-weight: 800; color: var(--ctr-text); margin-bottom: 4px; }
.ctr-empty p  { font-size: 12.5px; color: var(--ctr-text-3); }

/* Mobile */
@media (max-width: 900px) {
    .ctr-table thead { display: none; }
    .ctr-table tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 8px 14px;
        padding: 14px;
        border-bottom: 1px solid var(--ctr-line);
    }
    .ctr-table tbody td { padding: 0; border: 0; display: flex; align-items: center; }
    .ctr-table tbody td:nth-child(1), .ctr-table tbody td:nth-child(2) { display: none; }
    .ctr-table tbody td:nth-child(3) { grid-column: 1 / 4; }
    .ctr-table tbody td::before {
        content: attr(data-label);
        font-size: 10.5px; font-weight: 800;
        text-transform: uppercase; letter-spacing: .06em;
        color: var(--ctr-text-3);
        margin-inline-end: 8px;
    }
    .ctr-table tbody td:nth-child(3)::before { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/currencies/index.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   CURRENCIES — dashboard-style admin page (matches payment-gateways look)
   Tokens are pulled from --da3g-* so light/dark switches automatically.
═══════════════════════════════════════════════════════════════════════ */
.cur-page {
    --cur-radius:      14px;
    --cur-radius-sm:   10px;
    --cur-radius-pill: 999px;
    --cur-text:        var(--da3g-fg1, #f4f4f5);
    --cur-text-2:      var(--da3g-fg2, #a1a1aa);
    --cur-text-3:      var(--da3g-fg3, #71717a);
    --cur-card:        var(--da3g-card, #1c1c1f);
    --cur-bg2:         var(--da3g-bg2,  #111113);
    --cur-line:        var(--da3g-line, rgba(255,255,255,.06));
    --cur-line-2:      var(--da3g-bd,   rgba(255,255,255,.08));
    --cur-hover:       var(--da3g-hover, rgba(255,255,255,.03));
    --cur-accent:      var(--da3g-accent, #3b82f6);
    --cur-accent-bg:   var(--da3g-abg,    rgba(59,130,246,.12));
    --cur-success:     var(--da3g-success, #10b981);
    --cur-success-bg:  var(--da3g-success-bg, rgba(16,185,129,.12));
    --cur-warn:        var(--da3g-warn, #f59e0b);
    --cur-warn-bg:     var(--da3g-warn-bg, rgba(245,158,11,.12));
    --cur-danger:      var(--da3g-danger, #ef4444);
}
body:not(.dark-mode) .cur-page {
    --cur-text:   #09090b;
    --cur-text-2: #52525b;
    --cur-text-3: #a1a1aa;
    --cur-card:   #ffffff;
    --cur-bg2:    #f9f9fb;
    --cur-line:   #f4f4f5;
    --cur-line-2: #e4e4e7;
    --cur-hover:  rgba(0,0,0,.02);
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.cur-hero {
    background: var(--cur-card);
    border: 1px solid var(--cur-line-2);
    border-radius: var(--cur-radius);
    padding: 22px 26px;
    margin-bottom: 16px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    position: relative; overflow: hidden;
}
.cur-hero::before {
    content: ''; position: absolute;
    top: -30%; inset-inline-end: -10%;
    width: 220px; height: 220px;
    background: radial-gradient(circle, color-mix(in srgb, var(--cur-accent) 18%, transparent), transparent 65%);
    pointer-events: none;
}
.cur-hero-content { display: flex; align-items: center; gap: 14px; min-width: 260px; }
.cur-hero-ico {
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--cur-warn-bg); color: var(--cur-warn);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}
.cur-hero h1 { font-size: 22px; font-weight: 900; color: var(--cur-text); margin: 0 0 4px; letter-spacing: -.02em; }
.cur-hero p  { font-size: 12.5px; color: var(--cur-text-3); margin: 0; }
.cur-hero-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border: 0; border-radius: var(--cur-radius-sm);
    background: var(--cur-accent); color: #fff;
    font-size: 13px; font-weight: 800;
    cursor: pointer;
    transition: filter .15s, transform .15s;
}
.cur-hero-cta:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.cur-hero-cta:disabled { opacity: .65; cursor: not-allowed; }

/* ── Base currency banner ───────────────────────────────────────────── */
.cur-base {
    background: var(--cur-card);
    border: 1px solid color-mix(in srgb, var(--cur-success) 28%, transparent);
    border-radius: var(--cur-radius);
    padding: 14px 18px;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.cur-base-ico {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--cur-success); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.cur-base-label { font-size: 11.5px; font-weight: 700; color: var(--cur-text-3); text-transform: uppercase; letter-spacing: .06em; }
.cur-base-val   { font-size: 14px; font-weight: 800; color: var(--cur-text); margin-top: 2px; }
.cur-base-note  {
    margin-inline-start: auto;
    font-size: 11.5px; color: var(--cur-text-3); font-weight: 600;
    background: var(--cur-bg2);
    padding: 8px 14px; border-radius: var(--cur-radius-pill);
}

/* ── Table card ─────────────────────────────────────────────────────── */
.cur-table-wrap {
    background: var(--cur-card);
    border: 1px solid var(--cur-line-2);
    border-radius: var(--cur-radius);
    overflow: hidden;
    margin-bottom: 16px;
}
.cur-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.cur-table thead th {
    background: var(--cur-bg2);
    padding: 14px 16px;
    font-size: .7rem; font-weight: 800;
    color: var(--cur-text-2);
    text-transform: uppercase; letter-spacing: .08em;
    border-bottom: 1px solid var(--cur-line);
    text-align: start; white-space: nowrap;
}
.cur-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--cur-line);
    color: var(--cur-text);
    vertical-align: middle;
    font-size: 13px;
}
.cur-table tbody tr { transition: background .12s; }
.cur-table tbody tr:hover { background: var(--cur-hover); }
.cur-table tbody tr:last-child td { border-bottom: 0; }
.cur-table tbody tr.is-default {
    background: color-mix(in srgb, var(--cur-success) 8%, transparent);
}

/* Cells */
.cur-name { display: flex; align-items: center; gap: 10px; }
.cur-name-flag {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--cur-bg2); border: 1px solid var(--cur-line-2);
    color: var(--cur-text-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
    flex-shrink: 0;
}
.cur-name-flag.is-default { background: var(--cur-success); color: #fff; border-color: var(--cur-success); }
.cur-name-meta strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--cur-text); }
.cur-name-meta small  { font-size: 11.5px; color: var(--cur-text-3); font-weight: 600; }
.cur-symbol {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; min-height: 30px;
    padding: 0 10px; border-radius: 8px;
    background: var(--cur-bg2);
    border: 1px solid var(--cur-line-2);
    color: var(--cur-text);
    font-size: 13.5px; font-weight: 800;
}

/* Rate input */
.cur-rate-group {
    display: inline-flex; align-items: stretch;
    background: var(--cur-bg2);
    border: 1.5px solid var(--cur-line-2);
    border-radius: var(--cur-radius-sm);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.cur-rate-group:focus-within { border-color: var(--cur-accent); box-shadow: 0 0 0 3px var(--cur-accent-bg); }
.cur-rate-input {
    border: 0; outline: 0; padding: 8px 12px;
    background: transparent;
    color: var(--cur-text);
    font-size: 13px; font-weight: 700;
    font-family: 'SF Mono', Monaco, monospace;
    width: 130px;
    direction: ltr;
}
.cur-rate-input[disabled] { color: var(--cur-text-3); cursor: not-allowed; }
.cur-rate-save {
    border: 0;
    border-inline-start: 1px solid var(--cur-line-2);
    background: var(--cur-accent); color: #fff;
    padding: 0 12px;
    cursor: pointer;
    font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: filter .15s;
}
.cur-rate-save:hover { filter: brightness(1.1); }
.cur-rate-base-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 999px;
    font-size: 10.5px; font-weight: 800;
    background: var(--cur-success-bg); color: var(--cur-success);
    border: 1px solid color-mix(in srgb, var(--cur-success) 35%, transparent);
}

/* Status pill / toggle */
.cur-status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800;
}
.cur-status-pill.is-default { background: var(--cur-success-bg); color: var(--cur-success); border: 1px solid color-mix(in srgb, var(--cur-success) 35%, transparent); }
.cur-toggle-wrap { display: inline-flex; align-items: center; gap: 10px; }
.cur-toggle {
    position: relative; display: inline-block;
    width: 40px; height: 22px;
    background: var(--cur-line-2);
    border-radius: 999px;
    cursor: pointer; transition: background .25s;
}
.cur-toggle .cur-toggle-knob {
    position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.25);
    transition: transform .25s;
}
html[dir="rtl"] .cur-toggle .cur-toggle-knob { left: auto; right: 2px; }
.cur-toggle.active { background: var(--cur-success); }
.cur-toggle.active .cur-toggle-knob { transform: translateX(18px); }
html[dir="rtl"] .cur-toggle.active .cur-toggle-knob { transform: translateX(-18px); }
.cur-toggle-label { font-size: 12px; font-weight: 700; }
.cur-toggle-label.is-on  { color: var(--cur-success); }
.cur-toggle-label.is-off { color: var(--cur-text-3); }

/* Last updated */
.cur-last { font-size: 12px; color: var(--cur-text-2); font-weight: 600; white-space: nowrap; }
.cur-last.is-empty { color: var(--cur-text-3); }

/* Actions */
.cur-action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 14px; border-radius: 9px;
    border: 1px solid var(--cur-line-2);
    background: var(--cur-bg2);
    color: var(--cur-text-2);
    font-size: 12px; font-weight: 800;
    cursor: pointer; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.cur-action-btn:hover { color: var(--cur-warn); border-color: var(--cur-warn); background: var(--cur-warn-bg); transform: translateY(-1px); }
.cur-action-btn:disabled { opacity: .5; cursor: not-allowed; }
.cur-action-btn i { font-size: 11px; }

/* Footer (counts) */
.cur-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 14px 18px;
    background: var(--cur-bg2);
    border-top: 1px solid var(--cur-line);
}
.cur-foot-text { font-size: 12px; color: var(--cur-text-3); font-weight: 600; }

/* Mobile */
@media (max-width: 900px) {
    .cur-table thead { display: none; }
    .cur-table tbody tr { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 14px; }
    .cur-table tbody td { padding: 0; border: 0; display: flex; justify-content: space-between; align-items: center; }
    .cur-table tbody td::before {
        content: attr(data-label);
        font-size: 10.5px; font-weight: 800;
        text-transform: uppercase; letter-spacing: .06em;
        color: var(--cur-text-3);
    }
    .cur-table tbody td:first-child::before { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/customdomain/add.blade.php
═══════════════════════════════════════════════════════════ */

/* Flat sections — no nested cards. Borrow da3-* dashboard tokens. */
.wiz-section {
    padding: 18px 0;
    border-bottom: 1px solid var(--da3-line);
}
.wiz-section:last-child { border-bottom: 0; }
.wiz-section h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--da3-fg1);
    display: inline-flex; align-items: center; gap: 8px;
}
.wiz-section h4 .step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--da3-abg);
    color: var(--da3-accent);
    font-size: 11px;
    font-weight: 800;
}
.wiz-section h4 .step-num.done {
    background: #10b981; color: #fff;
}
.wiz-section p.wiz-hint {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--da3-fg3);
}

/* Domain input */
.wiz-input-group {
    display: flex;
    direction: ltr;
    border: 1px solid var(--da3-bd);
    border-radius: 10px;
    overflow: hidden;
    background: var(--da3-card);
    max-width: 560px;
}
.wiz-input-group:focus-within {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px var(--da3-abg);
}
.wiz-input-group .prefix {
    background: var(--da3-bg2);
    border-inline-end: 1px solid var(--da3-bd);
    color: var(--da3-fg3);
    padding: 10px 12px;
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 13px;
    display: inline-flex; align-items: center;
}
.wiz-input-group input {
    flex: 1; min-width: 0;
    border: 0; outline: none; background: transparent;
    padding: 10px 12px;
    color: var(--da3-fg1);
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 13.5px;
}
.wiz-help { margin: 10px 0 0; padding: 0 0 0 16px; font-size: 12px; color: var(--da3-fg2); }
.wiz-help li { padding: 2px 0; }
.wiz-help code {
    background: var(--da3-bg2);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--da3-bd);
    font-size: 11.5px;
}

/* DNS records — compact 3-column table, no card */
.wiz-dns {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    max-width: 720px;
}
.wiz-dns th, .wiz-dns td {
    padding: 10px 12px;
    text-align: start;
    font-size: 13px;
    border-bottom: 1px solid var(--da3-line);
}
.wiz-dns th {
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--da3-fg3);
    background: var(--da3-bg2);
}
.wiz-dns td.mono {
    font-family: 'SF Mono', Consolas, monospace;
    color: var(--da3-fg1);
    direction: ltr;
}
.wiz-dns .rec-badge {
    display: inline-flex; align-items: center; justify-content: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 5px;
    font-size: 11px; font-weight: 800;
    font-family: 'SF Mono', Consolas, monospace;
    letter-spacing: .04em;
}
.wiz-dns .rec-badge.a     { color: #047857; background: rgba(16,185,129,.10); }
.wiz-dns .rec-badge.cname { color: #1d4ed8; background: rgba(59,130,246,.10); }
body.dark-mode .wiz-dns .rec-badge.a     { color: #6ee7b7; }
body.dark-mode .wiz-dns .rec-badge.cname { color: #93c5fd; }
.wiz-copy-btn {
    width: 26px; height: 26px;
    margin-inline-start: 8px;
    border-radius: 6px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-card);
    color: var(--da3-fg2);
    cursor: pointer;
    transition: all .15s;
    font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle;
}
.wiz-copy-btn:hover { background: var(--da3-bg2); color: var(--da3-fg1); }
.wiz-copy-btn.copied { background: #10b981; color: #fff; border-color: #10b981; }

/* Verify result panel */
.wiz-result {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-bg2);
    font-size: 13px;
    line-height: 1.5;
    display: none;
}
.wiz-result.show { display: block; }
.wiz-result.ok    { border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.08); color: #047857; }
.wiz-result.fail  { border-color: rgba(239,68,68,.25);  background: rgba(239,68,68,.08);  color: #b91c1c; }
body.dark-mode .wiz-result.ok   { color: #6ee7b7; }
body.dark-mode .wiz-result.fail { color: #fca5a5; }
.wiz-result code {
    background: rgba(0,0,0,.06);
    padding: 1px 6px; border-radius: 4px;
    font-family: 'SF Mono', Consolas, monospace; font-size: 12px;
}

@media (max-width: 640px) {
    .wiz-dns th:nth-child(4), .wiz-dns td:nth-child(4) { display: none; } /* hide TTL */
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/customdomain/admin-domains.blade.php
═══════════════════════════════════════════════════════════ */

.adm-wrap { }
.adm-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.adm-header h1 { font-size:1.25rem; font-weight:700; color:var(--da3-fg1,#f1f5f9); margin:0 0 4px; display:flex; align-items:center; gap:8px; }
.adm-header p  { font-size:.875rem; color:var(--da3-fg2,#94a3b8); margin:0; }
.adm-header__actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* DNS settings toggle */
.adm-settings-btn { display:inline-flex; align-items:center; gap:6px; padding:0 14px; height:36px;
                    border-radius:8px; border:1px solid var(--da3-bd,#334155); background:transparent;
                    color:var(--da3-fg2,#94a3b8); font-size:.8125rem; cursor:pointer; }
.adm-settings-btn:hover { background:var(--da3-bg2,#0f172a); color:var(--da3-fg1,#f1f5f9); }

/* Stats bar */
.adm-stats { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.adm-stat  { background:var(--da3-card,#1e293b); border:1px solid var(--da3-bd,#334155); border-radius:10px;
             padding:12px 18px; display:flex; align-items:center; gap:10px; flex:1; min-width:130px; }
.adm-stat i { font-size:1.2rem; }
.adm-stat__val { font-size:1.25rem; font-weight:800; color:var(--da3-fg1,#f1f5f9); }
.adm-stat__lbl { font-size:.75rem; color:var(--da3-fg3,#64748b); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }

/* Table */
.adm-card  { background:var(--da3-card,#1e293b); border:1px solid var(--da3-bd,#334155); border-radius:12px; overflow:hidden; }
.adm-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.adm-table thead th { text-align:start; padding:11px 16px; font-size:.7rem; font-weight:800;
                      text-transform:uppercase; letter-spacing:.06em; color:var(--da3-fg3,#64748b);
                      background:var(--da3-bg2,#0f172a); border-bottom:1px solid var(--da3-bd,#334155); }
.adm-table tbody td { padding:13px 16px; border-top:1px solid var(--da3-line,#1e293b);
                      vertical-align:middle; color:var(--da3-fg1,#f1f5f9); }
.adm-table tbody tr:hover { background:rgba(255,255,255,.02); }
.adm-domain { font-family:'SF Mono',Consolas,monospace; font-size:.8125rem; direction:ltr; }
.adm-type-badge { display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:99px;
                  font-size:.7rem; font-weight:700; background:var(--da3-bg2,#0f172a); color:var(--da3-fg3,#64748b); }
.adm-primary-star { color:#f59e0b; font-size:.7rem; margin-inline-start:4px; }
.adm-check { font-size:.8125rem; color:var(--da3-fg2,#94a3b8); }
.adm-check.never { color:var(--da3-fg3,#64748b); }
.adm-actions { display:flex; gap:6px; }
.adm-act-btn { width:30px; height:30px; border-radius:7px; border:1px solid var(--da3-bd,#334155);
               background:transparent; color:var(--da3-fg2,#94a3b8); display:inline-flex;
               align-items:center; justify-content:center; font-size:11px; cursor:pointer;
               text-decoration:none; transition:all .15s; }
.adm-act-btn:hover { background:var(--da3-bg2,#0f172a); color:var(--da3-fg1,#f1f5f9); }
.adm-act-btn.approve:hover { background:#10b981; color:#fff; border-color:#10b981; }
.adm-act-btn.revoke:hover  { background:#ef4444; color:#fff; border-color:#ef4444; }
.adm-empty { text-align:center; padding:48px; color:var(--da3-fg3,#64748b); font-size:.9375rem; }

/* Flash */
.adm-flash { padding:12px 16px; border-radius:8px; font-size:.875rem; margin-bottom:16px;
             display:flex; align-items:center; gap:8px; }
.adm-flash.success { background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3); color:#10b981; }
.adm-flash.error   { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#ef4444; }

@media (max-width:768px) {
    .adm-table .hide-sm { display:none; }
    .adm-table thead th, .adm-table tbody td { padding:10px 10px; }
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/customdomain/customdomain.blade.php
═══════════════════════════════════════════════════════════ */

/* Reuse the dashboard's da3-* classes directly — no dc-*/dw-* prefixes.
   Only a few helper rules below for the URL-row text and primary marker. */
.da3-url-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--da3-line);
}
.da3-url-row:last-child { border-bottom: 0; }
.da3-url-row .label {
    font-size: 10.5px; font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--da3-fg3);
    min-width: 120px;
    display: inline-flex; align-items: center; gap: 6px;
}
.da3-url-row .value {
    flex: 1; min-width: 0;
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 13.5px;
    color: var(--da3-fg1);
    word-break: break-all; direction: ltr;
}
.da3-url-row .actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
.da3-icon-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-card);
    color: var(--da3-fg2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
}
.da3-icon-btn:hover { background: var(--da3-bg2); color: var(--da3-fg1); }
.da3-icon-btn.copied { background: #10b981; color: #fff; border-color: #10b981; }
.da3-primary-mark {
    display: inline-block;
    color: var(--da3-accent);
    font-size: 9px;
    margin-inline-start: 4px;
}
.da3-meta-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--da3-fg2);
}
.da3-meta-row .key { color: var(--da3-fg3); font-weight: 600; min-width: 110px; }
.da3-meta-row .val { color: var(--da3-fg1); }
.da3-page-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 640px) {
    .da3-url-row { flex-wrap: wrap; }
    .da3-url-row .label { min-width: 0; flex-basis: 100%; }
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/customdomain/listcustomdomain_table.blade.php
═══════════════════════════════════════════════════════════ */

.adt-wrap { overflow-x: auto; }
.adt {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.adt thead th {
    text-align: start;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--da3-fg3);
    background: var(--da3-bg2);
    border-bottom: 1px solid var(--da3-bd);
}
.adt tbody td {
    padding: 14px 16px;
    border-top: 1px solid var(--da3-line);
    vertical-align: middle;
    color: var(--da3-fg1);
}
.adt tbody tr:hover { background: var(--da3-hover); }
.adt .vendor-name { font-weight: 700; }
.adt .domain-name {
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 13px;
    direction: ltr;
    color: var(--da3-fg1);
}
.adt .domain-was {
    display: block;
    font-size: 11px;
    color: var(--da3-fg3);
    margin-top: 2px;
    direction: ltr;
}
.adt .primary-star { color: var(--da3-accent); font-size: 10px; margin-inline-start: 4px; }
.adt .ssl-line {
    font-size: 11px;
    color: var(--da3-fg3);
    margin-top: 4px;
}
.adt .last-check {
    font-size: 12px;
    color: var(--da3-fg2);
}
.adt .last-check.never { color: var(--da3-fg3); }

.adt .actions { display: inline-flex; gap: 6px; }
.adt .act-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-card);
    color: var(--da3-fg2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    transition: all .15s;
    cursor: pointer;
    text-decoration: none;
}
.adt .act-btn:hover { background: var(--da3-bg2); color: var(--da3-fg1); }
.adt .act-btn.approve:hover { background: #10b981; color: #fff; border-color: #10b981; }
.adt .act-btn.disable:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

.adt .empty td {
    text-align: center;
    padding: 56px 16px;
    color: var(--da3-fg3);
    font-weight: 600;
}

@media (max-width: 768px) {
    .adt thead th.hide-sm,
    .adt tbody td.hide-sm { display: none; }
    .adt thead th, .adt tbody td { padding: 12px 10px; }
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/dashboard/intelligence.blade.php
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .insight-card { width: 280px !important; }
    .text-gradient { font-size: 1.75rem !important; }
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/dashboard/notification.blade.php
═══════════════════════════════════════════════════════════ */

/* ─── Dash alert bar ─── */
.dash-alert {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    font-size: .875rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 1rem;
    margin: 0 1.5rem 1.5rem 1.5rem;
    transition: all .4s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
@media(max-width: 768px) {
    .dash-alert { margin: 0 1rem 1rem 1rem; }
}
.dash-alert .flex-1 { flex: 1; }
.dash-alert-danger  { background: rgba(239,68,68,.08); color: #b91c1c; border-color: rgba(239,68,68,.2); }
.dash-alert-warning { background: rgba(245,158,11,.08); color: #92400e; border-color: rgba(245,158,11,.2); }
.dash-alert-info    { background: rgba(29,110,245,.08); color: #1558d0; border-color: rgba(29,110,245,.2); }
.dash-alert-success { background: rgba(16,185,129,.08); color: #065f46; border-color: rgba(16,185,129,.2); }

body.dark-mode .dash-alert { box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
body.dark-mode .dash-alert-danger  { background: rgba(239,68,68,.15); color: #fca5a5; border-color: rgba(239,68,68,.25); }
body.dark-mode .dash-alert-warning { background: rgba(245,158,11,.15); color: #fcd34d; border-color: rgba(245,158,11,.25); }
body.dark-mode .dash-alert-info    { background: rgba(29,110,245,.15); color: #93c5fd; border-color: rgba(29,110,245,.25); }
body.dark-mode .dash-alert-success { background: rgba(16,185,129,.15); color: #6ee7b7; border-color: rgba(16,185,129,.25); }

.dash-alert-btn {
    flex-shrink: 0;
    padding: .45rem 1.25rem;
    border-radius: .75rem;
    background: var(--brand-color);
    color: #fff !important;
    font-size: .8125rem;
    font-weight: 800;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(29, 110, 245, 0.25);
    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.dash-alert-btn:hover { background: var(--brand-hover); transform: translateY(-1px); box-shadow: 0 6px 15px rgba(29, 110, 245, 0.35); }
body.dark-mode .dash-alert-btn { background: var(--brand-color); color: #fff !important; }

.dash-alert-close {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: .4rem;
    border: none;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .875rem;
    opacity: .65;
    transition: opacity .2s, background .2s;
}
.dash-alert-close:hover { opacity: 1; background: rgba(0,0,0,.08); }
body.dark-mode .dash-alert-close:hover { background: rgba(255,255,255,.1); }


/* ═══════════════════════════════════════════════════════════════════
   VENDOR DASHBOARD — Premium vd-* Design System
   All colors via var(--da3g-*) — auto dark/light mode
   RTL-safe: inset-inline-start/end throughout
═══════════════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────────── */
.vd { display:flex; flex-direction:column; gap:24px; }

/* ── Base card ───────────────────────────────────────────────── */
.vd-card {
    background: var(--da3g-card);
    border: 1px solid var(--da3g-bd);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: var(--da3g-shadow);
}

/* ── Section row (card side-by-side) ─────────────────────────── */
.vd-row {
    display: grid;
    gap: 20px;
}
.vd-row-7-3  { grid-template-columns: 1.75fr 1fr; }
.vd-row-6-4  { grid-template-columns: 1.6fr 1fr; }
.vd-row-half { grid-template-columns: 1fr 1fr; }

/* ── Card head (title row) ───────────────────────────────────── */
.vd-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 12px;
}
.vd-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--da3g-fg1);
}
.vd-card-title i { color: var(--da3g-accent); font-size: .85rem; }
.vd-card-link {
    font-size: .78rem;
    font-weight: 600;
    color: var(--da3g-accent);
    text-decoration: none;
    opacity: .8;
    transition: opacity .15s;
}
.vd-card-link:hover { opacity: 1; }

/* ── HEADER ──────────────────────────────────────────────────── */
.vd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 6px 0 2px;
}
.vd-header-left { display:flex; align-items:center; gap:14px; }

.vd-live-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--da3g-success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--da3g-success) 20%, transparent);
    animation: vdPulse 2.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes vdPulse {
    0%,100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--da3g-success) 20%, transparent); }
    50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--da3g-success) 5%, transparent); }
}

.vd-title {
    font-size: clamp(1.1rem, 2.5vw, 1.45rem);
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
    color: var(--da3g-fg1);
    letter-spacing: -.025em;
}
.vd-name { color: var(--da3g-accent); }
.vd-sub {
    font-size: .8rem;
    color: var(--da3g-fg3);
    margin: 5px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.vd-store-link {
    color: var(--da3g-accent);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
}
.vd-store-link:hover { text-decoration: underline; }

.vd-header-right { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.vd-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform .15s, box-shadow .15s, filter .15s;
    white-space: nowrap;
}
.vd-btn-primary {
    background: var(--da3g-accent);
    color: #fff !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--da3g-accent) 35%, transparent);
}
.vd-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.vd-btn-ghost {
    background: var(--da3g-card);
    color: var(--da3g-fg1) !important;
    border: 1.5px solid var(--da3g-bd);
    position: relative;
}
.vd-btn-ghost:hover { border-color: var(--da3g-fg3); }
.vd-badge-count {
    position: absolute;
    top: -7px;
    inset-inline-end: -7px;
    background: var(--da3g-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── ALERTS ──────────────────────────────────────────────────── */
.vd-alerts { display:flex; flex-direction:column; gap:8px; }
.vd-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: .83rem;
    font-weight: 600;
    text-decoration: none;
    transition: filter .18s;
    border-width: 1px;
    border-style: solid;
}
.vd-alert:hover { filter: brightness(.97); }
.vd-alert-warn   { background: var(--da3g-warn-bg);   color: color-mix(in srgb, var(--da3g-warn)   70%, var(--da3g-fg1));  border-color: var(--da3g-warn); }
.vd-alert-danger { background: var(--da3g-danger-bg); color: color-mix(in srgb, var(--da3g-danger) 70%, var(--da3g-fg1)); border-color: var(--da3g-danger); }
.vd-alert-arrow  { margin-inline-start: auto; opacity: .5; }

/* ── ONBOARDING ──────────────────────────────────────────────── */
.vd-onboard { border-inline-start: 4px solid var(--da3g-accent); }
.vd-onboard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}
.vd-onboard-badge {
    display: inline-block;
    background: var(--da3g-abg);
    color: var(--da3g-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 5px;
}
.vd-onboard-title { font-size: .9rem; font-weight: 700; color: var(--da3g-fg1); margin: 0; }
.vd-onboard-pct   { font-size: 1.5rem; font-weight: 800; color: var(--da3g-accent); line-height: 1; }
.vd-prog-track { height: 5px; background: var(--da3g-line); border-radius: 99px; overflow: hidden; margin-bottom: 16px; }
.vd-prog-fill  { height: 100%; background: var(--da3g-accent); border-radius: 99px; transition: width .4s; }
.vd-onboard-steps { display: flex; gap: 10px; flex-wrap: wrap; }
.vd-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--da3g-fg2);
    background: var(--da3g-bg2);
    padding: 6px 12px;
    border-radius: 8px;
}
.vd-step-ico {
    width: 20px; height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--da3g-bd);
    font-size: 10px;
    color: var(--da3g-fg3);
    flex-shrink: 0;
}
.vd-step-done .vd-step-ico { background: var(--da3g-success-bg); color: var(--da3g-success); }
.vd-step-done { color: var(--da3g-fg3); text-decoration: line-through; }

/* ── KPI GRID ────────────────────────────────────────────────── */
.vd-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.vd-kpi {
    background: var(--da3g-card);
    border: 1px solid var(--da3g-bd);
    border-radius: 16px;
    padding: 18px 20px 16px;
    box-shadow: var(--da3g-shadow);
    transition: transform .18s, box-shadow .18s;
    overflow: hidden;
    position: relative;
}
.vd-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,.09); }
.vd-kpi-accent-bar {
    position: absolute;
    top: 0; inset-inline-start: 0;
    width: 100%; height: 3px;
    border-radius: 16px 16px 0 0;
    background: var(--kc, var(--da3g-accent));
}
.vd-kpi-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.vd-kpi-ico {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--ks, var(--da3g-abg));
    color: var(--kc, var(--da3g-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}
.vd-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
}
.vd-kpi-trend.up   { background: var(--da3g-success-bg); color: var(--da3g-success); }
.vd-kpi-trend.down { background: var(--da3g-danger-bg);  color: var(--da3g-danger); }
.vd-kpi-val {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 800;
    color: var(--da3g-fg1);
    line-height: 1.1;
    margin-bottom: 4px;
    letter-spacing: -.02em;
}
.vd-kpi-lbl {
    font-size: .74rem;
    font-weight: 600;
    color: var(--da3g-fg3);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.vd-kpi-spark { margin-top: 14px; height: 40px; }
.vd-kpi-spark canvas { width: 100% !important; }
.vd-kpi-actions { margin-top: 14px; display:flex; gap:10px; }
.vd-kpi-link {
    font-size: .75rem;
    font-weight: 700;
    color: var(--da3g-accent);
    text-decoration: none;
    opacity: .85;
}
.vd-kpi-link:hover { opacity: 1; text-decoration: underline; }

/* ── TODAY GLANCE ────────────────────────────────────────────── */
.vd-today-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 0;
    align-items: center;
}
.vd-today-cell {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 12px;
}
.vd-today-cell:first-child { padding-inline-start: 0; }
.vd-today-sep {
    width: 1px;
    height: 56px;
    background: var(--da3g-line);
}
.vd-today-cell-ico {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.vd-today-val {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--da3g-fg1);
    line-height: 1;
    margin-bottom: 3px;
    letter-spacing: -.02em;
}
.vd-today-lbl { font-size: .73rem; font-weight: 600; color: var(--da3g-fg3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; }
.vd-today-trend {
    font-size: .72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--da3g-fg3);
}
.vd-today-trend span { color: var(--da3g-fg3); font-weight: 400; }
.vd-today-trend.up   { color: var(--da3g-success); }
.vd-today-trend.down { color: var(--da3g-danger); }
.vd-today-trend.flat { color: var(--da3g-fg3); }
.vd-today-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.vd-today-date { font-size: .75rem; font-weight: 600; color: var(--da3g-fg3); margin-inline-start: auto; }

/* ── CHART TABS ──────────────────────────────────────────────── */
.vd-chart-tabs { display:flex; gap:4px; flex-wrap:wrap; }
.vd-tab {
    padding: 4px 12px;
    font-size: .75rem;
    font-weight: 700;
    border-radius: 8px;
    border: 1px solid var(--da3g-bd);
    background: transparent;
    color: var(--da3g-fg2);
    cursor: pointer;
    transition: all .15s;
}
.vd-tab:hover   { border-color: var(--da3g-accent); color: var(--da3g-accent); }
.vd-tab.active  { background: var(--da3g-accent); border-color: var(--da3g-accent); color: #fff; }

/* ── CHART CANVAS ────────────────────────────────────────────── */
.vd-chart-wrap { position: relative; }

/* ── STATUS DONUT LEGEND ─────────────────────────────────────── */
.vd-status-list { margin-top: 16px; display:flex; flex-direction:column; gap:8px; }
.vd-status-row  {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    color: var(--da3g-fg2);
}
.vd-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.vd-status-name { flex: 1; font-weight: 600; }
.vd-status-count { font-weight: 800; color: var(--da3g-fg1); font-size: .85rem; }
.vd-status-pct  { color: var(--da3g-fg3); font-size: .72rem; }
.vd-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.vd-donut-num  { font-size: 1.5rem; font-weight: 800; color: var(--da3g-fg1); line-height: 1; }
.vd-donut-lbl  { font-size: .7rem; font-weight: 600; color: var(--da3g-fg3); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.vd-donut-wrap { position: relative; width: 160px; height: 160px; margin: 0 auto 0; }

/* ── ORDERS TABLE ────────────────────────────────────────────── */
.vd-orders-table { width: 100%; border-collapse: collapse; }
.vd-orders-table th {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--da3g-fg3);
    padding: 0 10px 10px;
    text-align: start;
    border-bottom: 1px solid var(--da3g-line);
    white-space: nowrap;
}
.vd-orders-table td {
    padding: 11px 10px;
    font-size: .8rem;
    color: var(--da3g-fg2);
    border-bottom: 1px solid var(--da3g-line);
    vertical-align: middle;
}
.vd-orders-table tr:last-child td { border-bottom: none; }
.vd-orders-table tr:hover td { background: var(--da3g-hover); }
.vd-order-id { font-weight: 700; color: var(--da3g-fg1); }
.vd-order-customer { font-weight: 600; }
.vd-order-amount { font-weight: 700; color: var(--da3g-fg1); }
.vd-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 700;
}

/* ── TOP PRODUCTS LIST ───────────────────────────────────────── */
.vd-product-list { display:flex; flex-direction:column; gap:12px; }
.vd-product-row { display:flex; align-items:center; gap:12px; }
.vd-product-rank {
    width: 22px;
    font-size: .72rem;
    font-weight: 800;
    color: var(--da3g-fg3);
    text-align: center;
    flex-shrink: 0;
}
.vd-product-rank.top1 { color: #f59e0b; }
.vd-product-rank.top2 { color: #94a3b8; }
.vd-product-rank.top3 { color: #cd7f32; }
.vd-product-img {
    width: 40px; height: 40px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--da3g-bg2);
    flex-shrink: 0;
    border: 1px solid var(--da3g-bd);
}
.vd-product-info { flex: 1; min-width: 0; }
.vd-product-name { font-size: .8rem; font-weight: 700; color: var(--da3g-fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-product-meta { font-size: .72rem; color: var(--da3g-fg3); margin-top: 2px; }
.vd-product-bar-wrap { flex: 1; }
.vd-product-bar-track { height: 4px; background: var(--da3g-line); border-radius: 99px; overflow: hidden; }
.vd-product-bar-fill  { height: 100%; background: var(--da3g-accent); border-radius: 99px; }

/* ── TOP CUSTOMERS LIST ──────────────────────────────────────── */
.vd-customer-list { display:flex; flex-direction:column; gap:12px; }
.vd-customer-row { display:flex; align-items:center; gap:12px; }
.vd-customer-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--da3g-abg);
    color: var(--da3g-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 800;
    flex-shrink: 0;
}
.vd-customer-info { flex: 1; min-width: 0; }
.vd-customer-name { font-size: .82rem; font-weight: 700; color: var(--da3g-fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-customer-orders { font-size: .72rem; color: var(--da3g-fg3); margin-top: 2px; }
.vd-customer-spend { font-size: .82rem; font-weight: 800; color: var(--da3g-fg1); white-space: nowrap; }

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.vd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 16px;
    color: var(--da3g-fg3);
    font-size: .82rem;
}
.vd-empty i { font-size: 2rem; opacity: .3; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .vd-kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .vd-row-7-3, .vd-row-6-4 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .vd-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .vd-row-half { grid-template-columns: 1fr; }
    .vd-today-grid { grid-template-columns: 1fr 1fr; }
    .vd-today-sep:nth-child(4) { display: none; }
    .vd-orders-table th:nth-child(3),
    .vd-orders-table td:nth-child(3) { display: none; }
}
@media (max-width: 480px) {
    .vd-kpi-grid { grid-template-columns: 1fr; }
    .vd-today-grid { grid-template-columns: 1fr; }
    .vd-today-sep { display: none; }
    .vd-header { flex-direction: column; align-items: flex-start; }
}

   Extracted from: admin/dashboard/partials/hero-slider.blade.php
═══════════════════════════════════════════════════════════ */

/* ── Outer shell ─────────────────────────────────────────────── */
.hs-wrap {
    position: relative;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-soft, #e5e7eb);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
    user-select: none;
}

/* ── 3-px role accent bar ────────────────────────────────────── */
.hs-accent-bar {
    height: 3px;
    background: var(--role-accent, #2563EB);
    border-radius: 16px 16px 0 0;
}

/* ── Track — CSS Grid stacking (all slides share 1 cell) ─────── */
.hs-track {
    display: grid;
    grid-template-columns: 1fr;
}
.hs-slide {
    grid-column: 1;
    grid-row: 1;
    opacity: 0;
    pointer-events: none;
}
.hs-slide.active {
    opacity: 1;
    pointer-events: auto;
}

/* Enter animation — applied by JS when navigating */
.hs-slide.hs-entering {
    animation: hsSlideIn 310ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hsSlideIn {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Icon spring pop on enter */
.hs-slide.hs-entering .hs-icon {
    animation: hsIconPop 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes hsIconPop {
    from { transform: scale(0.86); }
    to   { transform: scale(1); }
}

/* ── Slide body layout ───────────────────────────────────────── */
.hs-body {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 32px 24px;
}

/* ── Icon ────────────────────────────────────────────────────── */
.hs-icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 12px;
    border: 1px solid transparent;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
}

/* ── Metric content ──────────────────────────────────────────── */
.hs-content { flex: 1; min-width: 0; }

.hs-lbl {
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted, #9ca3af);
    margin-bottom: 6px;
    line-height: 1;
}

.hs-val-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.hs-val {
    font-size: clamp(1.55rem, 2.5vw, 2rem);
    font-weight: 800;
    color: var(--text-primary, #111827);
    letter-spacing: -.03em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

/* Trend badge */
.hs-trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    line-height: 1.6;
    letter-spacing: .01em;
    opacity: 0;
    transition: opacity .3s ease .18s;
}
.hs-trend.visible { opacity: 1; }
.hs-trend.up   { background: rgba(16,185,129,.1);  color: #059669; }
.hs-trend.down { background: rgba(239,68,68,.1);   color: #dc2626; }
.hs-trend.flat { background: rgba(107,114,128,.08);color: #6b7280; }

body.dark-mode .hs-trend.up   { background: rgba(16,185,129,.13); color: #34d399; }
body.dark-mode .hs-trend.down { background: rgba(239,68,68,.13);  color: #f87171; }

.hs-desc {
    font-size: .75rem;
    color: var(--text-secondary, #6b7280);
    font-weight: 500;
    line-height: 1.4;
}

/* ── Sparkline ───────────────────────────────────────────────── */
.hs-spark {
    flex-shrink: 0;
    width: 130px; height: 56px;
    opacity: .88;
}
.hs-spark canvas {
    display: block;
    width: 130px !important;
    height: 56px !important;
}

/* ── Footer ──────────────────────────────────────────────────── */
.hs-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px 16px;
    border-top: 1px solid var(--border-soft, rgba(0,0,0,.06));
}

/* Arrows */
.hs-arr {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 8px;
    border: 1px solid var(--border-soft, #e5e7eb);
    background: transparent;
    color: var(--text-muted, #9ca3af);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: .6rem;
    line-height: 1;
    transition: background .15s, color .15s, border-color .15s;
}
.hs-arr:hover {
    background: var(--role-accent, #2563EB);
    color: #fff;
    border-color: transparent;
}
.hs-arr:focus-visible {
    outline: 2px solid var(--role-accent, #2563EB);
    outline-offset: 2px;
}

/* Dots */
.hs-dots { display: flex; align-items: center; gap: 5px; }
.hs-dot {
    width: 6px; height: 6px;
    border-radius: 3px;
    border: none;
    background: var(--text-muted, #9ca3af);
    opacity: .3;
    cursor: pointer;
    padding: 0;
    transition: width .22s ease, opacity .22s, background .22s;
}
.hs-dot.active {
    width: 20px;
    background: var(--role-accent, #2563EB);
    opacity: 1;
}
.hs-dot:focus-visible {
    outline: 2px solid var(--role-accent, #2563EB);
    outline-offset: 2px;
}

/* ── Progress bar ────────────────────────────────────────────── */
.hs-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    background: var(--role-accent, #2563EB);
    opacity: .45;
    width: 0%;
    transition: width linear;
    pointer-events: none;
}

/* ── Dark mode adjustments ───────────────────────────────────── */
body.dark-mode .hs-wrap {
    box-shadow: 0 1px 3px rgba(0,0,0,.22), 0 4px 20px rgba(0,0,0,.18);
}
body.dark-mode .hs-footer {
    border-top-color: var(--border-soft, rgba(255,255,255,.06));
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 576px) {
    .hs-body  { padding: 20px 20px 16px; gap: 14px; }
    .hs-spark { display: none; }
    .hs-val   { font-size: 1.6rem; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hs-slide.hs-entering,
    .hs-slide.hs-entering .hs-icon { animation-duration: 1ms !important; }
    .hs-progress { transition: none !important; }
    .hs-dot      { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/domain-providers/index.blade.php
═══════════════════════════════════════════════════════════ */

/* Provider list page — prl-* namespace */
.prl-header    { margin-bottom:24px; }
.prl-header h1 { font-size:1.25rem; font-weight:700; color:var(--da3-fg1,#f1f5f9); margin:0 0 4px; display:flex; align-items:center; gap:8px; }
.prl-header p  { font-size:.875rem; color:var(--da3-fg2,#94a3b8); margin:0; }

/* Flash */
.prl-flash { padding:12px 16px; border-radius:8px; font-size:.875rem; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.prl-flash.success { background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3); color:#10b981; }
.prl-flash.error   { background:rgba(239,68,68,.1);  border:1px solid rgba(239,68,68,.3);  color:#ef4444; }

/* Status banner */
.prl-banner    { display:flex; align-items:center; gap:12px; padding:13px 18px; border-radius:10px; margin-bottom:20px; font-size:.875rem; }
.prl-banner.ok  { background:rgba(16,185,129,.07); border:1px solid rgba(16,185,129,.22); color:var(--da3-fg1,#f1f5f9); }
.prl-banner.ok i   { color:#10b981; }
.prl-banner.warn   { background:rgba(245,158,11,.07); border:1px solid rgba(245,158,11,.22); color:#f59e0b; }

/* Table card */
.prl-card  { background:var(--da3-card,#1e293b); border:1px solid var(--da3-bd,#334155); border-radius:12px; overflow:hidden; }
.prl-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.prl-table thead th {
    padding:11px 18px; text-align:start; font-size:.7rem; font-weight:800;
    text-transform:uppercase; letter-spacing:.06em; color:var(--da3-fg3,#64748b);
    background:var(--da3-bg2,#0f172a); border-bottom:1px solid var(--da3-bd,#334155);
}
.prl-table tbody td { padding:15px 18px; border-top:1px solid var(--da3-line,#1e293b); vertical-align:middle; }
.prl-table tbody tr:hover { background:rgba(255,255,255,.02); }
.prl-table tbody tr.is-active-row { background:rgba(16,185,129,.04); }

/* Provider name cell */
.prl-name  { font-weight:700; color:var(--da3-fg1,#f1f5f9); font-size:.9375rem; display:flex; align-items:center; gap:8px; }
.prl-key   { font-size:.75rem; font-family:'SF Mono',Consolas,monospace; color:var(--da3-fg3,#64748b); margin-top:2px; }

/* Active badge */
.prl-active-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 9px;
                    border-radius:99px; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
                    background:#10b981; color:#fff; }

/* Mode badge */
.prl-mode  { display:inline-flex; align-items:center; gap:4px; padding:2px 9px;
             border-radius:99px; font-size:.7rem; font-weight:700; }
.prl-mode.test { background:rgba(245,158,11,.12); color:#f59e0b; }
.prl-mode.live { background:rgba(16,185,129,.1);  color:#10b981; }

/* Credential dots */
.prl-creds { display:flex; flex-direction:column; gap:3px; }
.prl-cred  { display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--da3-fg2,#94a3b8); }
.prl-cred .k { min-width:80px; color:var(--da3-fg3,#64748b); font-size:.75rem; font-weight:600; }
.prl-cred .v-set   { font-family:'SF Mono',Consolas,monospace; color:var(--da3-fg1,#f1f5f9); }
.prl-cred .v-unset { color:var(--da3-fg3,#64748b); font-style:italic; font-size:.75rem; }
.prl-cred .ok-dot  { width:6px; height:6px; border-radius:50%; background:#10b981; flex-shrink:0; }
.prl-cred .no-dot  { width:6px; height:6px; border-radius:50%; background:var(--da3-fg3,#64748b); flex-shrink:0; }

/* Test result inline */
.prl-test-result { font-size:.8rem; display:flex; align-items:center; gap:5px; }
.prl-test-result.ok   { color:#10b981; }
.prl-test-result.fail { color:#ef4444; }
.prl-test-result.none { color:var(--da3-fg3,#64748b); }

/* Spinner */
.prl-spin { display:none; width:11px; height:11px; border-radius:50%;
            border:1.5px solid currentColor; border-top-color:transparent;
            animation:prl-spin .6s linear infinite; vertical-align:middle; }
@keyframes prl-spin { to { transform:rotate(360deg); } }

/* Actions */
.prl-actions { display:flex; align-items:center; gap:6px; }
.prl-btn { display:inline-flex; align-items:center; gap:5px; padding:0 12px; height:32px;
           border-radius:7px; font-size:.8125rem; font-weight:600; border:1px solid;
           cursor:pointer; white-space:nowrap; text-decoration:none; }
.prl-btn.edit     { border-color:var(--da3-bd,#334155); color:var(--da3-fg1,#f1f5f9); background:transparent; }
.prl-btn.edit:hover { background:var(--da3-bg2,#0f172a); }
.prl-btn.test-btn { border-color:var(--da3-bd,#334155); color:var(--da3-fg2,#94a3b8); background:transparent; }
.prl-btn.test-btn:hover { background:var(--da3-bg2,#0f172a); color:var(--da3-fg1,#f1f5f9); }
.prl-btn.activate { border-color:#10b981; color:#10b981; background:transparent; }
.prl-btn.activate:hover { background:#10b981; color:#fff; }
.prl-btn.is-active-btn { background:rgba(16,185,129,.08); border-color:#10b981; color:#10b981; cursor:default; pointer-events:none; }

@media (max-width:768px) {
    .prl-table .hide-sm { display:none; }
    .prl-table thead th, .prl-table tbody td { padding:12px 10px; }
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/extras/index.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   GLOBAL EXTRAS — Dashboard (da3) design system
═══════════════════════════════════════════════════════════════ */
/* ── da3 design tokens (scoped — defaults to dark theme) ── */
.ex-page {
    max-width: 1200px;
    margin: 0 auto;
    --da3-card:    #1c1c1f;
    --da3-bd:      rgba(255,255,255,.055);
    --da3-bg2:     #111113;
    --da3-shadow:  0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-fg1:     #f4f4f5;
    --da3-fg2:     #a1a1aa;
    --da3-fg3:     #71717a;
    --da3-line:    rgba(255,255,255,.06);
    --da3-hover:   rgba(255,255,255,.03);
    --da3-r:       12px;
    --da3-gap:     16px;
    --da3-accent:  #3b82f6;
    --da3-abg:     rgba(59,130,246,.12);
}
body:not(.dark-mode) .ex-page {
    --da3-card:    #ffffff;
    --da3-bd:      #e4e4e7;
    --da3-bg2:     #f9f9fb;
    --da3-shadow:  0 1px 3px rgba(0,0,0,.07), 0 0 0 1px #e4e4e7;
    --da3-fg1:     #09090b;
    --da3-fg2:     #52525b;
    --da3-fg3:     #a1a1aa;
    --da3-line:    #f4f4f5;
    --da3-hover:   rgba(0,0,0,.02);
}

/* ── Hero ── */
.ex-hero {
    position: relative;
    display: flex; align-items: center; gap: 16px;
    padding: 20px 22px;
    margin-bottom: 16px;
    border-radius: 14px;
    border: 1px solid var(--da3-bd);
    background:
        radial-gradient(1100px 220px at 0% 0%, rgba(59,130,246,.10), transparent 60%),
        radial-gradient(900px 200px at 100% 100%, rgba(59,130,246,.10), transparent 60%),
        var(--da3-bg2);
    overflow: hidden;
}
body.dark-mode .ex-hero {
    background:
        radial-gradient(1100px 220px at 0% 0%, rgba(59,130,246,.18), transparent 60%),
        radial-gradient(900px 200px at 100% 100%, rgba(59,130,246,.18), transparent 60%),
        var(--da3-bg2);
}
.ex-hero-ico {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 8px 20px -8px rgba(59,130,246,.55);
}
.ex-hero-text { flex: 1; min-width: 0; }
.ex-hero-text strong {
    display: block;
    font-size: 17px; font-weight: 800;
    color: var(--da3-fg1);
    letter-spacing: -.2px;
    margin-bottom: 3px;
}
.ex-hero-text span {
    display: block;
    font-size: 12.5px; color: var(--da3-fg3);
    line-height: 1.55;
}
.ex-hero-stats { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.ex-stat {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    font-size: 11.5px; font-weight: 700;
    color: var(--da3-fg2);
}
.ex-stat i { font-size: 10px; }
.ex-stat-total i { color: var(--da3-fg3); }
.ex-stat-active i { color: #10b981; }
@media (max-width: 991px) {
    .ex-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ── Card (mirrors settings-card pattern) ── */
.ex-card {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 12px;
    box-shadow: var(--da3-shadow);
    margin-bottom: 16px;
    overflow: hidden;
}
.ex-card-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--da3-line, var(--da3-bd));
}
.ex-card-head .icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: rgba(59,130,246,.12);
    color: #3b82f6;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.ex-card-head h4 {
    font-size: 13.5px; font-weight: 700;
    color: var(--da3-fg1);
    margin: 0;
    letter-spacing: -.1px;
    line-height: 1.3;
    flex: 1; min-width: 0;
}
.ex-card-head .ex-card-action { margin-inline-start: auto; }
.ex-card-body { padding: 16px 18px; }

/* ── Edit banner ── */
.ex-edit-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border-radius: 12px;
    border: 1px solid rgba(245,158,11,.32);
    background: rgba(245,158,11,.08);
}
.ex-edit-info { display: flex; align-items: center; gap: 12px; }
.ex-edit-ico {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fb923c, #f59e0b);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px;
}
.ex-edit-text h6 { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--da3-fg1); }
.ex-edit-text p  { margin: 2px 0 0; font-size: 11.5px; color: var(--da3-fg3); }
.ex-edit-cancel {
    padding: 7px 14px;
    border-radius: 9px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-card);
    color: var(--da3-fg1);
    font-size: 12px; font-weight: 700;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.ex-edit-cancel:hover { background: var(--da3-bg2); border-color: #f59e0b; color: var(--da3-fg1); }

/* ── Form fields ── */
.ex-field { display: flex; flex-direction: column; }
.ex-field label {
    font-size: 12px; font-weight: 700;
    color: var(--da3-fg1);
    margin-bottom: 7px;
}
.ex-field input[type="text"],
.ex-field input[type="number"],
.ex-field .form-control {
    height: 42px;
    padding: 0 12px;
    border: 1.5px solid var(--da3-bd);
    border-radius: 10px;
    background: var(--da3-bg2);
    color: var(--da3-fg1);
    font-size: 13px; font-weight: 600;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}
.ex-field input:focus,
.ex-field .form-control:focus {
    border-color: var(--da3-accent, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

/* ── Radio group (type picker) ── */
.ex-type-group {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.ex-type-opt {
    position: relative;
    cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border: 1.5px solid var(--da3-bd);
    border-radius: 10px;
    background: var(--da3-bg2);
    transition: border-color .15s, background .15s, transform .15s;
    user-select: none;
}
.ex-type-opt:hover { border-color: var(--da3-accent, #3b82f6); transform: translateY(-1px); }
.ex-type-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ex-type-opt-ico {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 12px;
    flex-shrink: 0;
}
.ex-type-opt-label { font-size: 12.5px; font-weight: 700; color: var(--da3-fg1); }
.ex-type-opt.is-selected {
    border-color: var(--da3-accent, #3b82f6);
    background: rgba(59,130,246,.08);
    box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}
@media (max-width: 640px) { .ex-type-group { grid-template-columns: 1fr; } }

/* ── Color input polish ── */
.ex-color-wrap {
    display: flex; align-items: center; gap: 10px;
    height: 42px;
    padding: 4px 10px;
    border: 1.5px solid var(--da3-bd);
    border-radius: 10px;
    background: var(--da3-bg2);
}
.ex-color-wrap input[type="color"] {
    width: 36px; height: 32px;
    border: 0; padding: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
}
.ex-color-hex {
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 12px; font-weight: 800;
    color: var(--da3-fg2);
    text-transform: uppercase;
}

/* ── Primary button ── */
.ex-btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 7px;
    height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px -2px rgba(59,130,246,.45);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.ex-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); color: #fff; }
.ex-btn-primary:active { transform: translateY(0); }

/* ── Group sections inside table ── */
.ex-group {
    margin-bottom: 18px;
    border: 1px solid var(--da3-bd);
    border-radius: 10px;
    overflow: hidden;
    background: var(--da3-bg2);
}
.ex-group:last-child { margin-bottom: 0; }
.ex-group-head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--da3-card);
    border-bottom: 1px solid var(--da3-bd);
}
.ex-group-head-ico {
    width: 26px; height: 26px;
    border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 11px;
}
.ex-group-head-title {
    font-size: 12.5px; font-weight: 800;
    color: var(--da3-fg1);
    letter-spacing: -.1px;
}
.ex-group-count {
    margin-inline-start: auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    font-size: 10.5px; font-weight: 700;
    color: var(--da3-fg3);
}

/* ── Rows ── */
.ex-row {
    display: grid;
    grid-template-columns: 36px 1.4fr 1fr 1fr 0.9fr auto;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-top: 1px solid var(--da3-bd);
    background: var(--da3-card);
    transition: background .15s;
}
.ex-row:first-of-type { border-top: 0; }
.ex-row:hover { background: var(--da3-bg2); }
.ex-row-num {
    font-size: 11px; font-weight: 800;
    color: var(--da3-fg3);
    font-family: 'SF Mono', Consolas, monospace;
}
.ex-row-name { font-size: 13px; font-weight: 700; color: var(--da3-fg1); }
.ex-row-type {
    font-size: 11.5px;
    color: var(--da3-fg2);
}
.ex-row-value { font-size: 13px; font-weight: 700; color: var(--da3-fg1); font-family: 'SF Mono', Consolas, monospace; }
.ex-row-value-muted { color: var(--da3-fg3); font-weight: 600; }

.ex-color-chip {
    display: inline-block;
    width: 26px; height: 26px;
    border-radius: 8px;
    border: 2px solid var(--da3-card);
    box-shadow: 0 0 0 1px var(--da3-bd);
}

.ex-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
}
.ex-badge i { font-size: 8px; }
.ex-badge-on  { background: rgba(16,185,129,.12); color: #10b981; }
.ex-badge-off { background: rgba(239,68,68,.12);  color: #ef4444; }

/* ── Action buttons ── */
.ex-actions { display: flex; gap: 5px; }
.ex-act {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-bg2);
    color: var(--da3-fg2);
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.ex-act:hover  { border-color: var(--da3-accent, #3b82f6); color: var(--da3-fg1); }
.ex-act-on     { color: #10b981; }
.ex-act-off    { color: #f59e0b; }
.ex-act-danger:hover { background: rgba(239,68,68,.08); border-color: #ef4444; color: #ef4444; }

/* ── Empty state ── */
.ex-empty {
    padding: 38px 20px;
    text-align: center;
    color: var(--da3-fg3);
}
.ex-empty-ico {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: rgba(59,130,246,.10);
    color: #3b82f6;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px;
    margin-bottom: 10px;
}
.ex-empty p { font-size: 13px; margin: 0; }

/* ── Mobile rows ── */
@media (max-width: 768px) {
    .ex-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px 14px;
    }
    .ex-row > div, .ex-row > span { width: 100%; }
    .ex-row-num { display: none; }
    .ex-actions { justify-content: flex-end; }
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/features/show.blade.php
═══════════════════════════════════════════════════════════ */

.fg-wrap { max-width: 980px; margin: 0 auto; padding: 28px 18px 60px; }
.fg-back { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted,#6b7280); text-decoration:none; margin-bottom:14px; }
.fg-back:hover { color:var(--text,#111827); }
.fg-hero {
    display: grid; grid-template-columns: 88px 1fr; gap: 22px;
    align-items: center;
    padding: 30px 32px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(139,92,246,.05));
    border: 1px solid rgba(59,130,246,.18);
    margin-bottom: 22px;
}
body.dark-mode .fg-hero { background: linear-gradient(135deg, rgba(59,130,246,.15), rgba(139,92,246,.08)); border-color: rgba(59,130,246,.25); }
.fg-hero-icon {
    width: 88px; height: 88px; border-radius: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff; font-size: 36px;
    box-shadow: 0 8px 24px rgba(59,130,246,.35);
}
.fg-h-domain { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; margin-bottom: 6px; }
.fg-h-name { font-size: 28px; font-weight: 900; letter-spacing: -.02em; margin: 0 0 6px; line-height: 1.15; }
.fg-h-tagline { font-size: 16px; color: #6b7280; margin: 0; line-height: 1.5; }
body.dark-mode .fg-h-tagline { color: #9ca3af; }

.fg-status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 800;
    letter-spacing: .04em;
    margin-top: 10px;
}
.fg-status-locked { background: rgba(245,158,11,.16); color: #b45309; }
.fg-status-coming { background: rgba(139,92,246,.16); color: #6d28d9; }
.fg-status-active { background: rgba(16,185,129,.16); color: #047857; }
body.dark-mode .fg-status-locked { color: #fbbf24; }
body.dark-mode .fg-status-coming { color: #c4b5fd; }
body.dark-mode .fg-status-active { color: #34d399; }

.fg-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
}
@media (max-width: 820px) { .fg-grid { grid-template-columns: 1fr; } }

.fg-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
    padding: 22px 24px;
}
body.dark-mode .fg-card { background: #1c1c20; border-color: #2a2a30; }
.fg-card-h {
    font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #6b7280;
    margin: 0 0 14px;
}
.fg-desc {
    font-size: 15px; line-height: 1.65;
    color: var(--text, #1f2937);
    white-space: pre-line;
}
body.dark-mode .fg-desc { color: #d1d5db; }

.fg-benefits { list-style: none; padding: 0; margin: 0; }
.fg-benefits li {
    display: flex; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border, #e5e7eb);
    font-size: 14px;
    color: var(--text, #1f2937);
}
.fg-benefits li:last-child { border-bottom: none; }
body.dark-mode .fg-benefits li { color: #d1d5db; border-bottom-color: #2a2a30; }
.fg-bullet {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px;
}

.fg-cta {
    margin-top: 22px;
    display: flex; gap: 10px; flex-wrap: wrap;
}
.fg-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 14px; font-weight: 800;
    text-decoration: none;
    border: none; cursor: pointer;
    transition: filter .15s, transform .12s;
}
.fg-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.fg-btn-primary { background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: #fff; box-shadow: 0 4px 14px rgba(59,130,246,.3); }
.fg-btn-ghost   { background: transparent; color: #6b7280; border: 1px solid var(--border, #e5e7eb); }
body.dark-mode .fg-btn-ghost { color: #9ca3af; border-color: #2a2a30; }

.fg-meta-row {
    display: flex; gap: 18px; flex-wrap: wrap;
    margin-top: 14px;
    font-size: 12.5px; color: #6b7280;
}
.fg-meta-row span { display: inline-flex; align-items: center; gap: 5px; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/included/coupons/index.blade.php
═══════════════════════════════════════════════════════════ */

    .btn-action {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        border: none;
        transition: var(--transition-base);
    }
    .btn-action:hover { transform: translateY(-2px); }
    
    .edit-alert {
        background: var(--accent-soft);
        border: 1px solid var(--accent);
        border-radius: var(--radius-xl);
        padding: var(--space-4);
        margin-bottom: var(--space-6);
        animation: slideDown 0.3s ease-out;
    }
    
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .form-label-premium {
        font-size: 0.75rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-title);
        margin-bottom: 0.5rem;
    }

    @media (max-width: 768px) {
        .table thead { display: none; }
        .table tr {
            display: block;
            background: var(--bg-card);
            border-radius: var(--radius-xl);
            margin-bottom: var(--space-4);
            padding: var(--space-4);
            border: 1px solid var(--border-main);
            box-shadow: var(--shadow-sm);
        }
        .table td { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            border: none; 
            padding: var(--space-2) 0; 
            border-bottom: 1px solid var(--border-soft); 
        }
        .table td:last-child { border-bottom: none; justify-content: center; margin-top: 10px; }
        .table td::before {
            content: attr(data-label);
            font-weight: 800;
            color: var(--text-title);
            font-size: 0.75rem;
            text-transform: uppercase;
        }
    }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/layout/default.blade.php
═══════════════════════════════════════════════════════════ */

    /* ── Root tokens — available everywhere admin layout is loaded ───── */
    body.dark-mode {
        --da3g-card:   #1c1c1f;
        --da3g-bd:     rgba(255,255,255,.055);
        --da3g-bg2:    #111113;
        --da3g-shadow: 0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
        --da3g-fg1:    #f4f4f5;
        --da3g-fg2:    #a1a1aa;
        --da3g-fg3:    #71717a;
        --da3g-line:   rgba(255,255,255,.06);
        --da3g-hover:  rgba(255,255,255,.03);
        --da3g-accent: #3b82f6;
        --da3g-abg:    rgba(59,130,246,.12);
        --da3g-success: #10b981; --da3g-success-bg: rgba(16,185,129,.12);
        --da3g-warn:    #f59e0b; --da3g-warn-bg:    rgba(245,158,11,.12);
        --da3g-danger:  #ef4444; --da3g-danger-bg:  rgba(239,68,68,.12);
        --da3g-input-bg: rgba(255,255,255,.02);
    }
    body:not(.dark-mode) {
        --da3g-card:   #ffffff;
        --da3g-bd:     #e4e4e7;
        --da3g-bg2:    #f9f9fb;
        --da3g-shadow: 0 1px 3px rgba(0,0,0,.07), 0 0 0 1px #e4e4e7;
        --da3g-fg1:    #09090b;
        --da3g-fg2:    #52525b;
        --da3g-fg3:    #a1a1aa;
        --da3g-line:   #f4f4f5;
        --da3g-hover:  rgba(0,0,0,.02);
        --da3g-accent: #3b82f6;
        --da3g-abg:    rgba(59,130,246,.10);
        --da3g-success: #10b981; --da3g-success-bg: #d1fae5;
        --da3g-warn:    #f59e0b; --da3g-warn-bg:    #fef3c7;
        --da3g-danger:  #ef4444; --da3g-danger-bg:  #fef2f2;
        --da3g-input-bg: #ffffff;
    }

    /* ── Bootstrap card / table / form / button safety-net overrides ──
       Scoped to `.main-content` (the admin canvas) so these don't leak
       into the public store frontend. The styles target plain Bootstrap
       classes so even un-rebuilt views get a coherent look. */

    /* Cards */
    .page-content .card,
    .page-content > .container-fluid > .card,
    .page-content > .container > .card {
        background: var(--da3g-card);
        border: 1px solid var(--da3g-bd);
        border-radius: 12px;
        box-shadow: var(--da3g-shadow);
        color: var(--da3g-fg1);
    }
    .page-content .card .card-header,
    .page-content .card .card-footer {
        background: transparent;
        border-color: var(--da3g-line);
        color: var(--da3g-fg1);
    }
    .page-content .card .card-title { color: var(--da3g-fg1); }

    /* Tables */
    .page-content .table { color: var(--da3g-fg1); }
    .page-content .table thead th {
        background: var(--da3g-bg2);
        color: var(--da3g-fg2);
        border-bottom: 1px solid var(--da3g-line);
        font-size: 11.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        padding: 12px 14px;
    }
    .page-content .table tbody td {
        border-color: var(--da3g-line);
        background: transparent;
        padding: 11px 14px;
    }
    .page-content .table tbody tr:hover td { background: var(--da3g-hover); }
    .page-content .table-hover > tbody > tr:hover > * { background: var(--da3g-hover); color: inherit; }

    /* Form controls */
    .page-content .form-control,
    .page-content .form-select,
    .page-content textarea.form-control {
        background: var(--da3g-input-bg);
        border: 1px solid var(--da3g-bd);
        border-radius: 10px;
        color: var(--da3g-fg1);
        transition: border-color .15s, box-shadow .15s;
    }
    .page-content .form-control::placeholder,
    .page-content textarea::placeholder { color: var(--da3g-fg3); }
    .page-content .form-control:focus,
    .page-content .form-select:focus,
    .page-content textarea:focus {
        border-color: var(--da3g-accent);
        box-shadow: 0 0 0 3px var(--da3g-abg);
        background: var(--da3g-input-bg);
        color: var(--da3g-fg1);
    }
    .page-content .form-label { color: var(--da3g-fg2); font-weight: 600; }
    .page-content .input-group-text {
        background: var(--da3g-bg2);
        border-color: var(--da3g-bd);
        color: var(--da3g-fg2);
    }

    /* Buttons (only base — Bootstrap's btn-primary etc keep their colors) */
    .page-content .btn { border-radius: 10px; font-weight: 600; }
    .page-content .btn-light,
    .page-content .btn-outline-secondary {
        background: var(--da3g-bg2);
        border-color: var(--da3g-bd);
        color: var(--da3g-fg1);
    }
    .page-content .btn-light:hover,
    .page-content .btn-outline-secondary:hover {
        background: var(--da3g-abg);
        border-color: var(--da3g-accent);
        color: var(--da3g-accent);
    }

    /* Native select option dropdowns — explicit colors so OS picker matches */
    body.dark-mode .page-content select option,
    body.dark-mode .page-content .form-select option { background: #1e1e22; color: #f4f4f5; }
    body:not(.dark-mode) .page-content select option,
    body:not(.dark-mode) .page-content .form-select option { background: #ffffff; color: #111827; }

    /* Bootstrap badges — neutralize the high-contrast white-on-color when in dark mode */
    body.dark-mode .page-content .badge.bg-light { background: var(--da3g-bg2) !important; color: var(--da3g-fg1) !important; }

    /* Modals — gentle skin so modals match the surface */
    .modal-content {
        background: var(--da3g-card);
        color: var(--da3g-fg1);
        border: 1px solid var(--da3g-bd);
        border-radius: 14px;
    }
    .modal-content .modal-header,
    .modal-content .modal-footer { border-color: var(--da3g-line); }
    body.dark-mode .modal-content .btn-close { filter: invert(1) grayscale(1) opacity(.85); }

    /* Pagination */
    .page-content .pagination .page-link {
        background: var(--da3g-card);
        border-color: var(--da3g-bd);
        color: var(--da3g-fg1);
    }
    .page-content .pagination .page-link:hover { background: var(--da3g-hover); }
    .page-content .pagination .page-item.active .page-link {
        background: var(--da3g-accent);
        border-color: var(--da3g-accent);
        color: #fff;
    }
    .page-content .pagination .page-item.disabled .page-link {
        background: var(--da3g-card);
        color: var(--da3g-fg3);
    }

    /* Generic .text-muted / .text-secondary in admin context */
    .page-content .text-muted    { color: var(--da3g-fg3) !important; }
    .page-content .text-secondary{ color: var(--da3g-fg2) !important; }

    /* ── RTL flips for directional FontAwesome icons (admin-scoped) ── */
    html[dir="rtl"] .page-content .fa-arrow-left,
    html[dir="rtl"] .page-content .fa-arrow-right,
    html[dir="rtl"] .page-content .fa-arrow-right-long,
    html[dir="rtl"] .page-content .fa-arrow-left-long,
    html[dir="rtl"] .page-content .fa-chevron-left,
    html[dir="rtl"] .page-content .fa-chevron-right,
    html[dir="rtl"] .page-content .fa-angle-left,
    html[dir="rtl"] .page-content .fa-angle-right,
    html[dir="rtl"] .page-content .fa-arrow-right-to-bracket,
    html[dir="rtl"] .page-content .fa-arrow-left-from-bracket,
    html[dir="rtl"] .page-content .fa-arrow-up-right-from-square,
    html[dir="rtl"] .page-content .fa-circle-arrow-left,
    html[dir="rtl"] .page-content .fa-circle-arrow-right { transform: scaleX(-1); }

    /* ── Global responsive utilities ────────────────────────────────
       Applies across ALL admin pages. Auto-stacks grids, tightens
       paddings, and makes tables horizontally scrollable on small
       screens. */
    @media (max-width: 1100px) {
        .page-content .row.g-5 { --bs-gutter-y: 1rem; --bs-gutter-x: 1rem; }
    }
    @media (max-width: 900px) {
        /* Container side-padding compresses */
        .page-content .container,
        .page-content .container-fluid { padding-left: 16px; padding-right: 16px; }
        /* Cards tighten */
        .page-content .card { border-radius: 10px; }
        .page-content .card-body { padding: 14px; }
        .page-content .card-header { padding: 12px 14px; }
        /* Tables shrink type */
        .page-content .table { font-size: 12.5px; }
        .page-content .table thead th { padding: 9px 10px; font-size: 10.5px; }
        .page-content .table tbody td { padding: 9px 10px; }
        /* Force-wrap any wrapper that has a fixed grid into a single column */
        .page-content .row.gx-5 { --bs-gutter-x: .75rem; }
    }
    @media (max-width: 768px) {
        /* Table responsive — any table not already wrapped gets a scroll wrap */
        .page-content .table-responsive { -webkit-overflow-scrolling: touch; }
        /* Form inputs full-width by default */
        .page-content input[type="text"],
        .page-content input[type="email"],
        .page-content input[type="password"],
        .page-content input[type="number"],
        .page-content input[type="tel"],
        .page-content input[type="date"],
        .page-content input[type="datetime-local"],
        .page-content select.form-select,
        .page-content textarea { font-size: 14px; }
        /* Hero / header rows wrap */
        .page-content .d-flex.justify-content-between.align-items-center { flex-wrap: wrap; gap: 12px; }
        /* Mobile: ensure 44px touch target on icon buttons */
        .page-content .btn-icon,
        .page-content .btn-sm.btn-icon { min-width: 38px; min-height: 38px; }
    }
    @media (max-width: 560px) {
        /* Cards stack with reduced padding */
        .page-content .card-body { padding: 12px; }
        /* Hide non-essential breadcrumb separators */
        .page-content .breadcrumb-item + .breadcrumb-item::before { padding: 0 .25rem; }
        /* Buttons shrink slightly */
        .page-content .btn { padding: 7px 12px; font-size: 13px; }
        /* Page titles smaller */
        .page-content h1 { font-size: 1.35rem; }
        .page-content h2 { font-size: 1.15rem; }
        .page-content h3 { font-size: 1rem; }
        /* Modal full-screen-ish on mobile */
        .modal-dialog { margin: 8px; max-width: calc(100% - 16px); }
    }

    /* ── Accessibility: visible focus ring on interactive elements ── */
    .page-content button:focus-visible,
    .page-content a:focus-visible,
    .page-content .btn:focus-visible {
        outline: 2px solid var(--da3g-accent);
        outline-offset: 2px;
    }

    /* ── Print: hide chrome, keep content ───────────────────────── */
    @media print {
        .sidebar, .hd-topbar, .modal, .toast { display: none !important; }
        .page-content { padding: 0 !important; }
        .card { box-shadow: none !important; border: 1px solid #ddd !important; }
    }
    
                                /* ── New Order Toast Modal — wider, dashboard-grade design ── */
                                #order-modal .modal-dialog{
                                    max-width:560px;
                                    margin:30px auto;
                                }
                                @media(max-width:600px){
                                    #order-modal .modal-dialog{ max-width:calc(100% - 24px); margin:12px auto; }
                                }
                                #order-modal .om-card{
                                    background:#1e1e22;
                                    border:1px solid rgba(255,255,255,.08);
                                    border-radius:18px;
                                    overflow:hidden;
                                    box-shadow:0 32px 80px rgba(0,0,0,.5);
                                    color:#f4f4f5;
                                }
                                body:not(.dark-mode) #order-modal .om-card{
                                    background:#fff;
                                    border-color:#e5e7eb;
                                    color:#111827;
                                    box-shadow:0 32px 80px rgba(0,0,0,.18);
                                }

                                /* ── Top banner ── */
                                #order-modal .om-top{
                                    position:relative;
                                    padding:24px 26px;
                                    background:linear-gradient(135deg, #6366f1 0%, #4f46e5 60%, #4338ca 100%);
                                    color:#fff;
                                    display:flex;
                                    align-items:center;
                                    gap:16px;
                                    overflow:hidden;
                                }
                                #order-modal .om-top::before, #order-modal .om-top::after{
                                    content:''; position:absolute; border-radius:50%;
                                    pointer-events:none; background:rgba(255,255,255,.07);
                                }
                                #order-modal .om-top::before{ width:200px; height:200px; top:-90px; right:-50px; }
                                #order-modal .om-top::after { width:120px; height:120px; bottom:-50px; left:14%; background:rgba(255,255,255,.04); }

                                #order-modal .om-bell{
                                    position:relative; z-index:1;
                                    width:54px; height:54px; border-radius:14px;
                                    background:rgba(255,255,255,.18);
                                    border:1px solid rgba(255,255,255,.25);
                                    color:#fff;
                                    display:inline-flex; align-items:center; justify-content:center;
                                    font-size:22px;
                                    animation:omRing 1.2s ease-in-out 2;
                                    flex-shrink:0;
                                    backdrop-filter:blur(6px);
                                }
                                @keyframes omRing{
                                    0%,100%{transform:rotate(0)}
                                    25%{transform:rotate(-12deg)}
                                    75%{transform:rotate(12deg)}
                                }
                                #order-modal .om-top-text{ position:relative; z-index:1; flex:1; min-width:0; }
                                #order-modal .om-top-text h6{
                                    margin:0 0 4px;
                                    font-size:11px;
                                    font-weight:800;
                                    letter-spacing:.18em;
                                    text-transform:uppercase;
                                    color:rgba(255,255,255,.78);
                                }
                                #order-modal .om-top-text strong{
                                    display:block;
                                    font-size:19px;
                                    font-weight:900;
                                    letter-spacing:-.02em;
                                    color:#fff;
                                }
                                #order-modal .om-close{
                                    position:relative; z-index:1;
                                    width:34px; height:34px;
                                    border-radius:10px;
                                    border:1px solid rgba(255,255,255,.25);
                                    background:rgba(255,255,255,.12);
                                    color:#fff;
                                    display:inline-flex; align-items:center; justify-content:center;
                                    cursor:pointer;
                                    transition:.15s;
                                    flex-shrink:0;
                                }
                                #order-modal .om-close:hover{ background:rgba(255,255,255,.22); }

                                /* ── Body ── */
                                #order-modal .om-body{ padding:20px 26px 6px; }
                                #order-modal .om-row{
                                    display:flex;
                                    align-items:center;
                                    gap:14px;
                                    padding:14px 16px;
                                    border-radius:12px;
                                    background:rgba(255,255,255,.03);
                                    border:1px solid rgba(255,255,255,.06);
                                    margin-bottom:10px;
                                }
                                body:not(.dark-mode) #order-modal .om-row{
                                    background:#f9fafb;
                                    border-color:#e5e7eb;
                                }
                                #order-modal .om-row:last-child{ margin-bottom:0; }
                                #order-modal .om-ico{
                                    width:42px; height:42px; border-radius:11px;
                                    display:inline-flex; align-items:center; justify-content:center;
                                    font-size:16px;
                                    flex-shrink:0;
                                }
                                #order-modal .om-ico.user{ background:rgba(14,165,233,.18); color:#67e8f9; }
                                #order-modal .om-ico.cash{ background:rgba(16,185,129,.18); color:#34d399; }
                                #order-modal .om-ico.ord { background:rgba(245,158,11,.18); color:#fbbf24; }
                                body:not(.dark-mode) #order-modal .om-ico.user{ color:#0e7490; }
                                body:not(.dark-mode) #order-modal .om-ico.cash{ color:#047857; }
                                body:not(.dark-mode) #order-modal .om-ico.ord { color:#b45309; }

                                #order-modal .om-row .lbl{
                                    font-size:11px;
                                    color:#a1a1aa;
                                    text-transform:uppercase;
                                    letter-spacing:.06em;
                                    font-weight:800;
                                }
                                body:not(.dark-mode) #order-modal .om-row .lbl{ color:#6b7280; }
                                #order-modal .om-row .val{
                                    font-size:15px;
                                    color:#f4f4f5;
                                    font-weight:800;
                                    margin-top:3px;
                                    letter-spacing:-.01em;
                                }
                                body:not(.dark-mode) #order-modal .om-row .val{ color:#111827; }
                                #order-modal .om-row .val.amount{ color:#34d399; font-size:17px; }
                                body:not(.dark-mode) #order-modal .om-row .val.amount{ color:#047857; }
                                #order-modal .om-row .om-grow{ flex:1; min-width:0; }
                                #order-modal .om-row .om-grow .val{
                                    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
                                }
                                #order-modal .om-time{
                                    text-align:center;
                                    font-size:12px;
                                    color:#a1a1aa;
                                    padding:14px 26px 0;
                                    font-weight:600;
                                    letter-spacing:.02em;
                                }
                                body:not(.dark-mode) #order-modal .om-time{ color:#6b7280; }
                                #order-modal .om-time i{ margin-inline-end:6px; color:#818cf8; }

                                #order-modal .om-footer{
                                    display:flex;
                                    gap:10px;
                                    padding:20px 26px 24px;
                                }
                                #order-modal .om-btn{
                                    flex:1;
                                    text-align:center;
                                    padding:13px 18px;
                                    border-radius:12px;
                                    font-size:14px;
                                    font-weight:800;
                                    text-decoration:none;
                                    border:1.5px solid;
                                    cursor:pointer;
                                    transition:.15s;
                                    display:inline-flex; align-items:center; justify-content:center; gap:7px;
                                    letter-spacing:.01em;
                                }
                                #order-modal .om-btn-primary{
                                    background:linear-gradient(135deg, #6366f1, #4f46e5);
                                    color:#fff;
                                    border-color:#4f46e5;
                                    box-shadow:0 8px 20px rgba(99,102,241,.32);
                                }
                                #order-modal .om-btn-primary:hover{ color:#fff; transform:translateY(-1px); box-shadow:0 10px 28px rgba(99,102,241,.4); }
                                #order-modal .om-btn-ghost{
                                    background:rgba(255,255,255,.04);
                                    color:#d4d4d8;
                                    border-color:rgba(255,255,255,.12);
                                }
                                #order-modal .om-btn-ghost:hover{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.2); }
                                body:not(.dark-mode) #order-modal .om-btn-ghost{
                                    background:#f9fafb;
                                    color:#374151;
                                    border-color:#d1d5db;
                                }
                                body:not(.dark-mode) #order-modal .om-btn-ghost:hover{ background:#f3f4f6; color:#111827; border-color:#9ca3af; }
                                #order-modal .om-btn-ghost:hover{ color:var(--text-primary, #fff); border-color:var(--text-secondary, #94a3b8); }
                                
        #appToastContainer{
            position: fixed;
            top: 80px;
            right: 20px;
            z-index: 10500;
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 360px;
            max-width: calc(100vw - 40px);
            pointer-events: none;
        }
        html[dir="rtl"] #appToastContainer{ right: auto; left: 20px; }
        @media (max-width: 640px){
            #appToastContainer{ right: 10px; left: 10px; width: auto; }
            html[dir="rtl"] #appToastContainer{ right: 10px; left: 10px; }
        }

        .app-toast{
            pointer-events: auto;
            position: relative;
            overflow: hidden;
            background: #1c1c1f;
            color: #f4f4f5;
            border-radius: 12px;
            box-shadow: 0 10px 28px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.06);
            padding: 12px 14px 14px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            transform: translate3d(0, -14px, 0) scale(.97);
            opacity: 0;
            transition: transform .35s cubic-bezier(.2,.9,.3,1.3), opacity .25s ease, box-shadow .2s;
        }
        body:not(.dark-mode) .app-toast{
            background: #ffffff;
            color: #09090b;
            box-shadow: 0 10px 28px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
        }
        .app-toast.is-visible{ transform: translate3d(0,0,0) scale(1); opacity: 1; }
        .app-toast.is-exiting{ transform: translate3d(24px,0,0) scale(.96); opacity: 0; }
        html[dir="rtl"] .app-toast.is-exiting{ transform: translate3d(-24px,0,0) scale(.96); }

        .app-toast-icon{
            width: 38px; height: 38px;
            border-radius: 11px;
            display: flex; align-items: center; justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
        }
        .app-toast-body{ flex: 1; min-width: 0; }
        .app-toast.is-clickable .app-toast-body{ cursor: pointer; }
        .app-toast-title{
            font-weight: 700;
            font-size: 13.5px;
            line-height: 1.35;
            margin: 0 0 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .app-toast-msg{
            font-size: 12.5px;
            opacity: .78;
            line-height: 1.45;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .app-toast-time{
            font-size: 10.5px;
            opacity: .55;
            margin-top: 4px;
        }
        .app-toast-close{
            background: none;
            border: 0;
            color: inherit;
            font-size: 18px;
            line-height: 1;
            padding: 4px 7px;
            margin: -2px -4px 0 0;
            opacity: .5;
            cursor: pointer;
            flex-shrink: 0;
            border-radius: 6px;
            transition: opacity .15s, background .15s;
        }
        .app-toast-close:hover{ opacity: 1; background: rgba(127,127,127,.12); }

        /* Bottom progress bar — visual countdown to auto-dismiss */
        .app-toast-progress{
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 2.5px;
            background: var(--app-toast-accent, #3b82f6);
            transform-origin: left center;
            animation: appToastProgress 5.5s linear forwards;
        }
        html[dir="rtl"] .app-toast-progress{ transform-origin: right center; }
        .app-toast.is-paused .app-toast-progress{ animation-play-state: paused; }
        @keyframes appToastProgress{
            from { transform: scaleX(1); }
            to   { transform: scaleX(0); }
        }
        

/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/layout/header.blade.php
═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   Chat notification toast
   ══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   Chat notification toast — border-sweep edition
   ══════════════════════════════════════════════════════ */

/* ── Color tokens — use the same CSS vars as the header dropdown system ── */
/* Dark mode default (body.dark-mode or initial state) */
.hd-chat-toast {
    --_tbg:    var(--hd-dd-bg,    #27272a);
    --_tbd:    var(--hd-dd-border, rgba(255,255,255,.08));
    --_tfg:    var(--hd-text,     #e4e4e7);
    --_tmuted: var(--hd-muted,    #71717a);
    --_tshad:  0 14px 44px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.22);
    --_accent: var(--role-accent, #6366f1);
}
/* Light mode (body without .dark-mode class) */
body:not(.dark-mode) .hd-chat-toast {
    --_tbg:    var(--hd-dd-bg,    #ffffff);
    --_tbd:    var(--hd-dd-border, #e5e7eb);
    --_tfg:    var(--hd-text,     #111827);
    --_tmuted: var(--hd-muted,    #6b7280);
    --_tshad:  0 14px 44px rgba(0,0,0,.11), 0 2px 8px rgba(0,0,0,.06);
}

/* ── Wrapper (overflow:visible so caret isn't clipped) ── */
.hd-chat-toast {
    position: absolute;
    top: calc(100% + 13px);
    inset-inline-end: -4px;
    width: 292px;
    background: var(--_tbg);
    border: 1px solid var(--_tbd);
    border-radius: 14px;
    box-shadow: var(--_tshad);
    padding: 13px 13px 13px;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    overflow: visible;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease;
}
.hd-chat-toast.hd-toast-show { opacity: 1; transform: translateY(0); }

/* ── Caret arrow ── */
.hd-toast-caret {
    position: absolute;
    top: -7px;
    inset-inline-end: 14px;
    width: 13px; height: 13px;
    background: var(--_tbg);
    border-top:          1px solid var(--_tbd);
    border-inline-start: 1px solid var(--_tbd);
    transform: rotate(45deg);
    border-radius: 3px 0 0 0;
    pointer-events: none;
    z-index: 2;
}

/* ── Border sweep ring ─────────────────────────────────
   Three-layer trick:
   1. .hd-toast-sweep  — clips to the card shape
   2. ::before          — the rotating conic gradient (the "glow arc")
   3. ::after           — fills the interior with the card bg colour
   ── */
.hd-toast-sweep {
    position: absolute;
    inset: -1px;
    border-radius: 15px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity .2s;
}
.hd-chat-toast.hd-toast-show .hd-toast-sweep { opacity: 1; }

/* The spinning arc */
.hd-toast-sweep::before {
    content: '';
    position: absolute;
    /* Large square centred — ensures full coverage when rotating */
    inset: -120%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg 280deg,
        var(--_accent) 280deg 340deg,
        transparent 340deg 360deg
    );
    animation: sweep-spin 2.2s linear 2 forwards;
}

/* Inner fill — hides the gradient except at the border */
.hd-toast-sweep::after {
    content: '';
    position: absolute;
    inset: 1px;          /* 1 px "border" visible */
    border-radius: 14px;
    background: var(--_tbg);
}

@keyframes sweep-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Avatar ── */
.hd-chat-toast-avatar {
    width: 38px; height: 38px;
    border-radius: 50%; object-fit: cover; flex-shrink: 0;
    background: var(--_tbd);
    position: relative; z-index: 1;
}
.hd-chat-toast-avatar-fallback {
    width: 38px; height: 38px;
    border-radius: 50%; flex-shrink: 0;
    background: var(--_accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; color: #fff;
    position: relative; z-index: 1;
}

/* ── Body text ── */
.hd-chat-toast-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.hd-chat-toast-name {
    font-size: 13px; font-weight: 700;
    color: var(--_tfg);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 2px;
}
.hd-chat-toast-msg {
    font-size: 12px; color: var(--_tmuted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Close button ── */
.hd-chat-toast-close {
    flex-shrink: 0; background: none; border: none; padding: 0;
    color: var(--_tmuted); font-size: 13px; cursor: pointer;
    line-height: 1; align-self: flex-start;
    transition: color .15s;
    position: relative; z-index: 1;
}
.hd-chat-toast-close:hover { color: var(--_tfg); }

/* ── Page title breadcrumb ── */
.hd-page-title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-inline-start: 4px;
}
.hd-page-title::before {
    content: '';
    width: 1px;
    height: 18px;
    background: var(--hd-border);
    margin-inline-end: 4px;
}


/* ── Sidebar nav badges (chat + notifications unread counters) ── */
.sd-badge {
    margin-inline-start: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--sidebar-bg, transparent);
    flex-shrink: 0;
}
.sd-link.active .sd-badge { background: #fff; color: var(--role-accent, var(--primary)); }
/* Collapsed sidebar — keep badge visible as a small dot */
.sidebar-collapsed .sd-badge,
.sidebar.collapsed .sd-badge {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    min-width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
    line-height: 0;
}

/* ── Notification items ── */
.hd-notif-item {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--hd-dd-border);
    transition: background .12s;
    cursor: default;
}
.hd-notif-item:hover { background: var(--hd-dd-hover); }
.hd-notif-unread { background: var(--role-accent-soft, rgba(91,61,245,.06)); }
.hd-notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--role-accent, var(--primary));
    flex-shrink: 0;
    margin-top: 5px;
}
.hd-notif-body { flex: 1; min-width: 0; }
.hd-notif-title { font-size: .8rem; font-weight: 600; color: var(--hd-text); line-height: 1.3; }
.hd-notif-msg   { font-size: .74rem; color: var(--hd-muted); margin-top: 2px; line-height: 1.4; }
.hd-notif-time  { font-size: .67rem; color: var(--hd-muted); margin-top: 4px; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/layout/sidebar.blade.php
═══════════════════════════════════════════════════════════ */

    .sidebar .collapse-menu .sd-link {
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
    }
    .sidebar .collapse-menu .sd-link > i {
        width: 16px !important;
        min-width: 16px !important;
        height: 16px !important;
        font-size: 12px !important;
        margin: 0 !important;
        text-align: center !important;
        opacity: .8;
        flex-shrink: 0;
        color: inherit !important;
        background: transparent !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .sidebar .collapse-menu .sd-link.active > i { opacity: 1; }
    .sidebar .collapse-menu .sd-link > span { flex: 1; min-width: 0; }

    /* ════════════════════════════════════════════════════════════
       COLLAPSED SIDEBAR — Flyout popup
       Rendered as a separate floating element attached to <body>
       to escape any `overflow: hidden` on the sidebar's scroll container.
    ════════════════════════════════════════════════════════════ */
    body.sidebar-collapsed .sidebar .sd-item > .sd-link .nav-text { display: none; }
    body.sidebar-collapsed .sidebar .sd-link.dropdown-toggle::after { display: none !important; }

    /* The flyout itself (lives outside the sidebar in <body>) */
    .sb-flyout {
        position: fixed;
        display: none;
        min-width: 240px;
        max-width: 280px;
        background: var(--da3-card, #1c1c1f);
        border: 1px solid var(--da3-bd, rgba(255,255,255,.08));
        border-radius: 12px;
        padding: 6px;
        box-shadow: 0 16px 40px rgba(0,0,0,.3);
        z-index: 1100;
        animation: sbFlyout .18s cubic-bezier(.16,1,.3,1);
    }
    body:not(.dark-mode) .sb-flyout {
        background: #ffffff;
        border-color: #e2e8f0;
        box-shadow: 0 16px 40px rgba(15,23,42,.15);
    }
    .sb-flyout.is-visible { display: block; }
    .sb-flyout a.sb-flyout-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 7px;
        font-size: 13px;
        color: var(--da3-fg2, #a1a1aa);
        text-decoration: none;
        margin-bottom: 1px;
        transition: background .15s, color .15s;
    }
    .sb-flyout a.sb-flyout-link:hover {
        background: var(--da3-hover, rgba(255,255,255,.04));
        color: var(--da3-fg1, #f4f4f5);
    }
    body:not(.dark-mode) .sb-flyout a.sb-flyout-link:hover {
        background: #f1f5f9;
        color: #0f172a;
    }
    .sb-flyout a.sb-flyout-link.active {
        background: var(--role-accent-soft, rgba(91,61,245,.12));
        color: var(--role-accent, var(--primary));
    }
    .sb-flyout a.sb-flyout-link > i {
        width: 16px;
        font-size: 12px;
        opacity: .7;
        flex-shrink: 0;
        text-align: center;
    }

    @keyframes sbFlyout {
        from { opacity: 0; transform: translateX(-6px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    html[dir="rtl"] @keyframes sbFlyout {
        from { opacity: 0; transform: translateX(6px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    
/* ── Base badge layout ── */
.sb-plan-badge {
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    margin-top:      3px;
    padding:         2px 8px 2px 6px;
    border-radius:   20px;
    max-width:       100%;
    overflow:        hidden;
    position:        relative;
    flex-shrink:     0;
    text-decoration: none !important;
    cursor:          pointer;
    transition:      transform .15s ease, box-shadow .15s ease;
}
.sb-plan-badge:hover { transform: translateY(-1px); filter: brightness(1.1); }
/* shimmer sweep — shared */
.sb-plan-badge::before {
    content:         '';
    position:        absolute;
    inset:           0;
    background:      linear-gradient(105deg,
                         transparent 30%,
                         rgba(255,255,255,.15) 50%,
                         transparent 70%);
    background-size: 220% 100%;
    animation:       planShimmer 3.5s ease-in-out infinite;
    border-radius:   inherit;
    pointer-events:  none;
}
@keyframes planShimmer {
    0%   { background-position: 220% center; }
    100% { background-position: -220% center; }
}

/* ── Crown / icon ── */
.sb-plan-crown {
    font-size:  9px;
    flex-shrink:0;
    animation:  crownPulse 2.8s ease-in-out infinite;
}
@keyframes crownPulse {
    0%,100% { transform: scale(1);    opacity: 1;   }
    50%     { transform: scale(1.18); opacity: .8;  }
}

/* ── Plan name text ── */
.sb-plan-name {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .3px;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    max-width:      110px;
    line-height:    1.3;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ════════════════════════════════════════════
   TIER 1 — Trial / Free  →  Silver / Gray
   ════════════════════════════════════════════ */
.sb-plan-badge.tier-trial {
    background: linear-gradient(135deg, #374151 0%, #4b5563 50%, #374151 100%);
    border:     1px solid rgba(156,163,175,.35);
    box-shadow: 0 0 6px rgba(156,163,175,.15), inset 0 1px 0 rgba(255,255,255,.06);
}
.sb-plan-badge.tier-trial .sb-plan-crown {
    color:  #d1d5db;
    filter: drop-shadow(0 0 2px rgba(209,213,219,.5));
}
.sb-plan-badge.tier-trial .sb-plan-name {
    background-image: linear-gradient(90deg, #f3f4f6, #d1d5db, #9ca3af);
}

/* ════════════════════════════════════════════
   TIER 2 — Starter / Basic  →  Blue
   ════════════════════════════════════════════ */
.sb-plan-badge.tier-starter {
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 50%, #1e3a8a 100%);
    border:     1px solid rgba(96,165,250,.35);
    box-shadow: 0 0 8px rgba(59,130,246,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.sb-plan-badge.tier-starter .sb-plan-crown {
    color:  #93c5fd;
    filter: drop-shadow(0 0 3px rgba(147,197,253,.6));
}
.sb-plan-badge.tier-starter .sb-plan-name {
    background-image: linear-gradient(90deg, #eff6ff, #93c5fd, #60a5fa);
}

/* ════════════════════════════════════════════
   TIER 3 — Pro / Growth  →  Purple / Violet
   ════════════════════════════════════════════ */
.sb-plan-badge.tier-pro {
    background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #4c1d95 100%);
    border:     1px solid rgba(167,139,250,.4);
    box-shadow: 0 0 10px rgba(139,92,246,.3), inset 0 1px 0 rgba(255,255,255,.09);
}
.sb-plan-badge.tier-pro .sb-plan-crown {
    color:  #c4b5fd;
    filter: drop-shadow(0 0 4px rgba(196,181,253,.7));
}
.sb-plan-badge.tier-pro .sb-plan-name {
    background-image: linear-gradient(90deg, #f5f3ff, #c4b5fd, #a78bfa);
}

/* ════════════════════════════════════════════
   TIER 4 — Enterprise / Business  →  Gold
   ════════════════════════════════════════════ */
.sb-plan-badge.tier-enterprise {
    background: linear-gradient(135deg, #78350f 0%, #92400e 45%, #78350f 100%);
    border:     1px solid rgba(251,191,36,.4);
    box-shadow: 0 0 10px rgba(251,191,36,.22), inset 0 1px 0 rgba(255,255,255,.09);
}
.sb-plan-badge.tier-enterprise .sb-plan-crown {
    color:  #fbbf24;
    filter: drop-shadow(0 0 4px rgba(251,191,36,.7));
}
.sb-plan-badge.tier-enterprise .sb-plan-name {
    background-image: linear-gradient(90deg, #fef3c7, #fde68a, #fbbf24);
}

/* ── Collapsed sidebar — hide text, keep icon as circle ── */
body.sidebar-collapsed .sb-plan-name  { display: none; }
body.sidebar-collapsed .sb-plan-badge { padding: 4px 5px; border-radius: 50%; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/notifications/user_index.blade.php
═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   PLATFORM NOTIFICATIONS — Dashboard da3-system parity
   ══════════════════════════════════════════════════════════ */
.un-page {
    --da3-card:    #1c1c1f;
    --da3-bd:      rgba(255,255,255,.055);
    --da3-bg2:     #111113;
    --da3-shadow:  0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-fg1:     #f4f4f5;
    --da3-fg2:     #a1a1aa;
    --da3-fg3:     #71717a;
    --da3-line:    rgba(255,255,255,.06);
    --da3-hover:   rgba(255,255,255,.03);
    --da3-r:       12px;
    --da3-gap:     16px;
    --da3-accent:  #3b82f6;
    --da3-abg:     rgba(59,130,246,.12);

    max-width: 1100px;
    margin: 0 auto;
}
body:not(.dark-mode) .un-page {
    --da3-card:    #ffffff;
    --da3-bd:      #e4e4e7;
    --da3-bg2:     #f9f9fb;
    --da3-shadow:  0 1px 3px rgba(0,0,0,.07), 0 0 0 1px #e4e4e7;
    --da3-fg1:     #09090b;
    --da3-fg2:     #52525b;
    --da3-fg3:     #a1a1aa;
    --da3-line:    #f4f4f5;
    --da3-hover:   rgba(0,0,0,.02);
}

/* ─── Top bar (dashboard parity) ─────────────────────────── */
.un-topbar {
    background:    var(--da3-card);
    border:        1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow:    var(--da3-shadow);
    margin-bottom: var(--da3-gap);
    overflow:      hidden;
}
.un-topbar-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             14px;
    padding:         18px 22px 14px;
    flex-wrap:       wrap;
}
.un-topbar-id    { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.un-topbar-ico   {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0;
    position: relative;
}
.un-topbar-ico .badge-overlay {
    position: absolute;
    top: -4px; inset-inline-end: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 10px;
    border: 2px solid var(--da3-card);
    line-height: 1;
    min-width: 18px;
    text-align: center;
}
.un-topbar-info  { min-width: 0; }
.un-topbar-title {
    font-size: 20px; font-weight: 700;
    color: var(--da3-fg1);
    margin: 0 0 4px;
    letter-spacing: -.2px; line-height: 1.2;
}
.un-topbar-sub {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--da3-fg3);
    flex-wrap: wrap; margin: 0;
}
.un-topbar-sub .live-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600;
    color: #10b981;
    background: rgba(16,185,129,.1);
    border-radius: 20px;
    padding: 2px 9px 2px 7px;
}
.un-topbar-sub .live-pill.attention {
    color: #ef4444; background: rgba(239,68,68,.1);
}
.un-topbar-sub .live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    animation: unPulse 2s ease-in-out infinite;
}
@keyframes unPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(1.35)} }
.un-topbar-sub .dot-sep { color: var(--da3-fg3); opacity: .4; }

.un-topbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.un-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    transition: filter .15s, transform .15s;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}
.un-btn-primary {
    background: var(--da3-accent);
    color: #fff !important;
    border-color: var(--da3-accent);
    box-shadow: 0 2px 8px rgba(59,130,246,.28);
}
.un-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.un-btn-primary:disabled {
    background: var(--da3-bg2);
    color: var(--da3-fg3) !important;
    border-color: var(--da3-bd);
    box-shadow: none;
    cursor: not-allowed;
    opacity: .6;
}

/* ─── KPI strip ──────────────────────────────────────────── */
.un-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--da3-gap);
    margin-bottom: var(--da3-gap);
}
@media (max-width: 768px) { .un-kpis { grid-template-columns: 1fr; } }
.un-kpi {
    background:    var(--da3-card);
    border:        1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow:    var(--da3-shadow);
    padding:       16px 18px;
    position:      relative;
    overflow:      hidden;
    transition:    transform .18s ease;
}
.un-kpi:hover { transform: translateY(-2px); }
.un-kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--ic, var(--da3-accent));
    opacity: .85;
}
.un-kpi-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.un-kpi-label { font-size: 11px; font-weight: 600; color: var(--da3-fg2); text-transform: uppercase; letter-spacing: .06em; }
.un-kpi-ico {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--ic-bg, var(--da3-abg));
    color: var(--ic, var(--da3-accent));
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.un-kpi-num {
    font-size: 22px; font-weight: 800;
    color: var(--da3-fg1);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.un-kpi-sub { font-size: 11.5px; color: var(--da3-fg3); margin-top: 4px; font-weight: 500; }

/* ─── Notification list (single card) ─────────────────────── */
.un-list-card {
    background:    var(--da3-card);
    border:        1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow:    var(--da3-shadow);
    overflow:      hidden;
}

.un-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--da3-line);
    cursor: pointer;
    transition: background .15s, border-color .15s;
    position: relative;
    text-decoration: none;
    color: inherit;
}
.un-item:last-child { border-bottom: none; }
.un-item:hover { background: var(--da3-hover); text-decoration: none; color: inherit; }
.un-item.unread {
    background: rgba(59,130,246,.04);
    border-inline-start: 3px solid var(--da3-accent);
    padding-inline-start: 19px; /* compensate for the 3px border */
}
.un-item.unread:hover { background: rgba(59,130,246,.07); }

/* Unread dot indicator */
.un-dot {
    position: absolute;
    inset-inline-end: 20px;
    top: 22px;
    width: 8px; height: 8px;
    background: var(--da3-accent);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(59,130,246,.18);
    animation: unDotPulse 2s ease-in-out infinite;
}
@keyframes unDotPulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
    50%     { box-shadow: 0 0 0 6px rgba(59,130,246,.08); }
}

/* Thumbnail */
.un-thumb {
    width: 44px; height: 44px;
    border-radius: 11px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--da3-abg);
    color: var(--da3-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    border: 1px solid var(--da3-bd);
}
.un-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Content */
.un-content { flex: 1; min-width: 0; padding-inline-end: 24px; }
.un-title {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--da3-fg1);
    margin: 0 0 4px;
    line-height: 1.35;
    /* Tabular truncation on long titles */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.un-message {
    font-size: 12.5px;
    color: var(--da3-fg2);
    margin: 0 0 8px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.un-meta {
    font-size: 11px;
    color: var(--da3-fg3);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.un-meta i { font-size: 10px; opacity: .8; }
.un-meta .chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Empty state */
.un-empty {
    padding: 60px 24px;
    text-align: center;
    color: var(--da3-fg3);
}
.un-empty .empty-icon {
    width: 80px; height: 80px;
    background: var(--da3-bg2);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; color: var(--da3-fg3);
    margin: 0 auto 16px;
    border: 1px solid var(--da3-bd);
}
.un-empty h5 {
    font-size: 14px;
    font-weight: 700;
    color: var(--da3-fg1);
    margin: 0 0 6px;
}
.un-empty p { font-size: 12.5px; margin: 0; }

/* Pagination */
.un-pagination {
    padding: 14px 22px;
    border-top: 1px solid var(--da3-line);
    display: flex; align-items: center; justify-content: center;
}
.un-pagination .pagination {
    margin: 0;
}

/* ─── Modal (dark-mode-aware) ─────────────────────────────── */
.un-modal .modal-content {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 14px;
    color: var(--da3-fg1);
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.un-modal .modal-img-wrap img {
    width: 100%; height: 200px; object-fit: cover;
    border-radius: 14px 14px 0 0;
}
.un-modal .modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--da3-fg1);
    margin: 0 0 8px;
}
.un-modal .modal-text {
    font-size: 13px;
    color: var(--da3-fg2);
    line-height: 1.7;
    margin: 0 0 14px;
}
.un-modal .modal-meta {
    font-size: 11.5px;
    color: var(--da3-fg3);
    display: flex; align-items: center; gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--da3-line);
}
.un-modal .modal-close-btn {
    background: var(--da3-accent);
    color: #fff !important;
    border: 1px solid var(--da3-accent);
    border-radius: 9px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 700;
    width: 100%;
    transition: filter .15s, transform .15s;
    box-shadow: 0 2px 8px rgba(59,130,246,.28);
}
.un-modal .modal-close-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Responsive */
@media (max-width: 768px) {
    .un-topbar-row { padding: 14px 16px; }
    .un-topbar-title { font-size: 17px; }
    .un-item { padding: 14px 16px; gap: 10px; }
    .un-item.unread { padding-inline-start: 13px; }
    .un-content { padding-inline-end: 18px; }
    .un-dot { inset-inline-end: 12px; top: 18px; }
    .un-thumb { width: 38px; height: 38px; }
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/orders/print.blade.php
═══════════════════════════════════════════════════════════ */
@page { size: A4 portrait; margin: 0; }

/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/orders/statistics.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   ORDERS STATISTICS — Dashboard-grade
═══════════════════════════════════════════════════════ */

/* ── Orders page now uses .da3 wrapper — tokens inherit automatically ── */

/* ── Clickable KPI card (a tag wrapping da3-kpi-v3) ── */
.ord-kpi-link { text-decoration: none; color: inherit; display: block; }
.ord-kpi-link:hover { text-decoration: none; color: inherit; }

/* ── Legacy ord-stat cards kept for backward-compat (report page etc.) ── */
/* ════════════════════════════════════════════════════════════
   ORDERS TABS + FILTER — da3-* design system (inside .da3 wrapper)
   ════════════════════════════════════════════════════════════ */
.ord-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.ord-stat {
    background: var(--da3-bg2);
    border: 1px solid var(--da3-line);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex; align-items: center; gap: 14px;
    position: relative; overflow: hidden;
    transition: transform .15s, border-color .2s, box-shadow .2s;
    text-decoration: none; color: inherit;
}
.ord-stat::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--_ac, var(--da3-accent)) 8%, transparent) 0%, transparent 60%);
    pointer-events: none;
}
.ord-stat:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--_ac, var(--da3-accent)) 35%, var(--da3-line));
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    color: inherit;
}

.ord-stat-ico {
    width: 46px; height: 46px; border-radius: 13px;
    background: color-mix(in srgb, var(--_ac, var(--da3-accent)) 14%, transparent);
    color: var(--_ac, var(--da3-accent));
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0; position: relative; z-index: 1;
}
.ord-stat-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.ord-stat-val {
    display: block;
    font-size: 1.5rem; font-weight: 900;
    color: var(--da3-fg1);
    line-height: 1.05; letter-spacing: -.03em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ord-stat-lbl {
    display: block;
    font-size: .68rem; font-weight: 700;
    color: var(--da3-fg3);
    text-transform: uppercase; letter-spacing: .05em;
    margin-top: 4px;
}

/* Color presets via CSS custom property */
.ord-stat.s-blue   { --_ac: #6366f1; }
.ord-stat.s-green  { --_ac: #22c55e; }
.ord-stat.s-amber  { --_ac: #f59e0b; }
.ord-stat.s-red    { --_ac: #ef4444; }
.ord-stat.s-cyan   { --_ac: #06b6d4; }
.ord-stat.s-revenue { --_ac: #22c55e; border-color: color-mix(in srgb, #22c55e 25%, var(--da3-line)); }

/* Completion card */
.ord-stat.completion { grid-column: span 2; flex-direction: column; align-items: stretch; gap: 12px; }
.ord-stat.completion .ord-stat-top { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.ord-bar-track {
    width: 100%; height: 6px;
    background: var(--da3-line); border-radius: 999px;
    overflow: hidden; position: relative; z-index: 1;
}
.ord-bar-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #22c55e, #4ade80);
    transition: width .6s ease;
}

/* ── Controls card (da3-tc-card wrapper in HTML — these styles tune internals) ── */
.ord-controls-card { margin-bottom: var(--da3-gap, 14px); }

/* Controls inner head — tabs + action buttons */
.ord-tc-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--da3-line);
    flex-wrap: wrap;
}
.ord-tc-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Legacy tab row (kept for backward-compat) */
.ord-tabs-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px; flex-wrap: wrap;
}
.ord-tabs-wrap {
    flex: 1; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; min-width: 0;
}
.ord-tabs-wrap::-webkit-scrollbar { display: none; }
.ord-tabs-inner { display: flex; gap: 6px; white-space: nowrap; }

/* Google Sheets button */
.ord-gs-btn {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 10px;
    border: 1.5px solid color-mix(in srgb, #3b82f6 30%, var(--da3-line));
    background: color-mix(in srgb, #3b82f6 10%, transparent);
    color: #3b82f6; font-size: .8rem; font-weight: 800;
    text-decoration: none; cursor: pointer;
    transition: all .15s; font-family: inherit;
}
.ord-gs-btn:hover { background: color-mix(in srgb, #3b82f6 18%, transparent); transform: translateY(-1px); color: #3b82f6; }
.ord-gs-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* Export button */
.ord-export-btn {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 10px;
    border: 1.5px solid color-mix(in srgb, #22c55e 30%, var(--da3-line));
    background: color-mix(in srgb, #22c55e 10%, transparent);
    color: #22c55e; font-size: .8rem; font-weight: 800;
    text-decoration: none; cursor: pointer;
    transition: all .15s; font-family: inherit;
}
.ord-export-btn:hover { background: color-mix(in srgb, #22c55e 18%, transparent); transform: translateY(-1px); color: #22c55e; }

/* Tabs */
.ord-tab {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 10px;
    border: 1.5px solid var(--da3-line);
    background: var(--da3-bg1);
    color: var(--da3-fg2); font-weight: 700; font-size: .78rem;
    text-decoration: none; transition: all .15s;
}
.ord-tab:hover { border-color: var(--da3-accent); color: var(--da3-accent); }
.ord-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: color-mix(in srgb, var(--da3-fg3) 12%, transparent);
    color: var(--da3-fg2); font-size: .66rem; font-weight: 800;
}
.ord-tab.is-active { color: #fff !important; border-color: transparent !important; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.ord-tab.is-active .ord-tab-count { background: rgba(255,255,255,.25); color: #fff; }
.ord-tab.tab-all.is-active     { background: #6366f1; }
.ord-tab.tab-pending.is-active { background: #f59e0b; }
.ord-tab.tab-confirm.is-active { background: #06b6d4; }
.ord-tab.tab-deliver.is-active { background: #3b82f6; }
.ord-tab.tab-done.is-active    { background: #22c55e; }
.ord-tab.tab-cancel.is-active  { background: #ef4444; }

/* Filter row */
.ord-filter {
    display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
    padding: 14px 18px 16px;
    border-top: 1px solid var(--da3-line);
}
.ord-filter-field { flex: 1; min-width: 150px; }
.ord-filter-lbl {
    display: block;
    font-size: .67rem; font-weight: 700;
    color: var(--da3-fg3);
    text-transform: uppercase; letter-spacing: .05em;
    margin-bottom: 6px;
}
.ord-filter .form-control,
.ord-filter .form-select {
    height: 38px; padding: 0 12px;
    font-size: .82rem; font-weight: 600;
    border-radius: 10px;
    border: 1.5px solid var(--da3-line);
    background: var(--da3-bg1);
    color: var(--da3-fg1);
    box-shadow: none; font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.ord-filter .form-control:focus,
.ord-filter .form-select:focus {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--da3-accent) 15%, transparent);
    outline: none;
}
.ord-filter-actions { display: flex; gap: 6px; }
.ord-btn-search {
    height: 38px; padding: 0 18px; border-radius: 10px;
    font-size: .82rem; font-weight: 800; border: none;
    background: var(--da3-accent); color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: transform .15s, box-shadow .15s; font-family: inherit;
}
.ord-btn-search:hover { transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--da3-accent) 35%, transparent); color: #fff; }
.ord-btn-reset {
    height: 38px; width: 38px; border-radius: 10px;
    background: color-mix(in srgb, #ef4444 10%, transparent);
    color: #ef4444; border: 1.5px solid color-mix(in srgb, #ef4444 30%, var(--da3-line));
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; cursor: pointer; transition: all .15s;
}
.ord-btn-reset:hover { background: color-mix(in srgb, #ef4444 20%, transparent); color: #ef4444; }

@media (max-width: 640px) {
    .ord-tabs-row { flex-wrap: wrap; }
    .ord-export-btn, .ord-gs-btn { flex: 1; justify-content: center; }
}
@media (max-width: 768px) { .ord-stat.completion { grid-column: span 1; } }

/* ── Export Confirm Modal ───────────────────────────── */
.exp-modal-overlay {
    display:         none;
    position:        fixed;
    inset:           0;
    z-index:         99999;
    background:      rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    align-items:     center;
    justify-content: center;
    animation:       expFadeIn .2s ease;
}
.exp-modal-overlay.exp-open { display: flex; }
@keyframes expFadeIn { from { opacity:0 } to { opacity:1 } }

.exp-modal-card {
    background:    #1e1e22;
    border-radius: 20px;
    padding:       36px 32px 28px;
    width:         420px;
    max-width:     calc(100vw - 32px);
    text-align:    center;
    box-shadow:    0 24px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06);
    animation:     expCardIn .28s cubic-bezier(.19,1,.22,1);
    position:      relative;
}
@keyframes expCardIn {
    from { opacity:0; transform: scale(.88) translateY(20px); }
    to   { opacity:1; transform: scale(1)   translateY(0);    }
}

.exp-modal-icon {
    width:64px; height:64px; border-radius:18px;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color:#fff; font-size:28px;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 20px;
    box-shadow: 0 8px 24px rgba(22,163,74,.35);
}
.exp-modal-title {
    margin:0 0 10px; font-size:18px; font-weight:700;
    color: #f4f4f5;
}
.exp-modal-sub {
    margin:0 0 18px; font-size:13.5px; line-height:1.6;
    color: #a1a1aa;
}
.exp-modal-filters {
    display:inline-flex; align-items:center; gap:6px;
    background: rgba(var(--bs-primary-rgb, 91,61,245),.08);
    color: var(--bs-primary, #5b3df5);
    font-size:12px; font-weight:600;
    padding:5px 14px; border-radius:20px; margin-bottom:22px;
}
.exp-modal-actions {
    display:flex; gap:10px; justify-content:center; margin-top:4px;
}
.exp-btn-cancel {
    flex:1; padding:11px 0; border-radius:12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: #f4f4f5;
    font-size:14px; font-weight:600; cursor:pointer;
    transition: background .2s;
}
.exp-btn-cancel:hover { background: rgba(255,255,255,.1); }

.exp-btn-confirm {
    flex:1.5; padding:11px 0; border-radius:12px;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color:#fff; font-size:14px; font-weight:700;
    display:flex; align-items:center; justify-content:center; gap:8px;
    text-decoration:none; cursor:pointer;
    box-shadow: 0 4px 16px rgba(22,163,74,.35);
    transition: opacity .2s, transform .15s;
}
.exp-btn-confirm:hover { opacity:.9; color:#fff; transform:translateY(-1px); }
.exp-btn-confirm.exp-loading { pointer-events:none; opacity:.75; }
.exp-btn-confirm.exp-loading i { animation: expSpin .8s linear infinite; }
@keyframes expSpin { to { transform: rotate(360deg); } }
@keyframes gsOrdSpin { to { transform: rotate(360deg); } }
.gs-ord-spinning { animation: gsOrdSpin .9s linear infinite; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/otherpages/share.blade.php
═══════════════════════════════════════════════════════════ */

/* ================= SHARE PAGE ================= */
.share-wrapper{
    max-width:900px;
    margin:40px auto;
}
.share-manual{
    display:flex;
    justify-content:center;
    gap:14px;
    margin-top:25px;
    flex-wrap:wrap;
}

.share-btn{
    width:46px;
    height:46px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    color:#fff;
    border:none;
    cursor:pointer;
    transition:.25s ease;
}

.share-btn:hover{
    transform:translateY(-3px);
    opacity:.9;
}

/* COLORS */
.facebook{background:#1877f2}
.twitter{background:#000}
.linkedin{background:#0a66c2}
.telegram{background:#229ed9}
.whatsapp{background:#25d366}
.instagram{
    background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af);
}

/* HERO */
.share-hero{
    background:linear-gradient(135deg,#020617,#0f172a,#1e293b);
    border-radius:28px;
    padding:50px 30px 100px;
    text-align:center;
    color:#fff;
    position:relative;
    overflow:hidden;
}

.share-hero::after{
    content:"";
    position:absolute;
    inset:-40%;
    background:radial-gradient(circle at top,rgba(99,102,241,.25),transparent 60%);
    animation:rotateGlow 10s linear infinite;
}

@keyframes rotateGlow{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

.share-icon{
    width:64px;
    height:64px;
    border-radius:18px;
    background:rgba(255,255,255,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    margin:0 auto 14px;
}

.share-hero h2{
    font-weight:800;
    margin-bottom:6px;
}
#share-icons.is-hidden{
    display:none;
}

.share-hero p{
    opacity:.75;
    font-size:14px;
}

/* QR CARD */
.qr-card{
    background:#fff;
    width:260px;
    margin:-80px auto 0;
    border-radius:26px;
    padding:20px;
    text-align:center;
    box-shadow:0 30px 80px rgba(0,0,0,.35);
    animation:floatQR 4s ease-in-out infinite;
    position:relative;
    z-index:5;
}

@keyframes floatQR{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
}

.qr-inner{
    background:#f8fafc;
    border-radius:18px;
    padding:14px;
}

.qr-inner img{
    width:100%;
    height:auto;
}

/* ACTIONS */
.share-actions{
    margin-top:30px;
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
}

.share-actions .btn{
    border-radius:16px;
    padding:12px 22px;
    font-weight:600;
    min-width:160px;
}

.share-btn{
    opacity:0;
    animation:fadeUp .35s ease forwards;
}

.share-btn:nth-child(1){animation-delay:.05s}
.share-btn:nth-child(2){animation-delay:.1s}
.share-btn:nth-child(3){animation-delay:.15s}
.share-btn:nth-child(4){animation-delay:.2s}
.share-btn:nth-child(5){animation-delay:.25s}
.share-btn:nth-child(6){animation-delay:.3s}

@keyframes fadeUp{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
}


@keyframes pop{
    from{opacity:0;transform:scale(.9)}
    to{opacity:1;transform:scale(1)}
}

.share-note{
    text-align:center;
    font-size:13px;
    color:#64748b;
    margin-top:18px;
}
/* DOWNLOAD BUTTON */
.btn-download{
    background:linear-gradient(135deg,#e0e7ff,#f8fafc);
    color:#1e293b;
    border:1px solid #c7d2fe;
    border-radius:18px;
    padding:12px 26px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:10px;
    transition:.25s ease;
}

.btn-download i{
    color:#2563eb;
}

.btn-download:hover{
    background:linear-gradient(135deg,#c7d2fe,#eef2ff);
    transform:translateY(-1px);
}



/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/payment/partials/payment-card.blade.php
═══════════════════════════════════════════════════════════ */


/* ====== GRID ====== */
.pay-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    width:100%;
}

@media(max-width:1199px){
    .pay-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

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


/* ====== CARD ====== */
.pay-box{
    background:linear-gradient(160deg,#1e293b,#0f172a);
    border-radius:22px;
    padding:22px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border:1px solid rgba(255,255,255,.05);
    transition:.25s ease;

    position:relative;
    overflow:hidden;
}

.pay-box::before{
    content:"";
    position:absolute;
    top:-40%;
    right:-40%;


    background:radial-gradient(circle,rgba(255,255,255,.05),transparent 70%);
}



/* ====== HEADER ====== */
.pay-head{
    display:flex;
    align-items:center;
    gap:14px;
}

.pay-icon{
    width:52px;
    height:52px;
  

    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.pay-icon img{
    border-radius:8px;
    max-width:80%;
    max-height:80%;
    object-fit:cover;
}

.pay-title{
    color:#f8fafc;
    font-weight:700;
    font-size:15px;
}

.pay-sub{
    color:#94a3b8;
    font-size:12px;
    margin-top:4px;
}


/* ====== ACTIONS ====== */
.pay-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:20px;
    gap:12px;
    flex-wrap:wrap;
}

.pay-buttons{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.pay-btn{
    background:rgba(255,255,255,.08);
    border:none;
    color:#e2e8f0;
    padding:8px 14px;
    border-radius:10px;
    font-size:12px;
    font-weight:600;
    transition:.2s;
    white-space:nowrap;
}

.pay-btn:hover{
    background:rgba(255,255,255,.18);
}


/* ====== TOGGLE ====== */
.pay-toggle{
    position:relative;
    width:46px;
    height:24px;
}

.pay-toggle input{display:none}

.pay-track{
    position:absolute;
    inset:0;
    background:#475569;
    border-radius:50px;
    transition:.25s;
}

.pay-track:before{
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    left:3px;
    top:3px;
    background:white;
    border-radius:50%;
    transition:.25s;
}

.pay-toggle input:checked + .pay-track{
    background:#22c55e;
}

.pay-toggle input:checked + .pay-track:before{
    transform:translateX(22px);
}


/* ====== MOBILE ====== */
@media(max-width:600px){
    .pay-box{padding:18px;}
    .pay-actions{
        flex-direction:column;
        align-items:stretch;
    }
    .pay-btn{
        width:100%;
        text-align:center;
    }
}



/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/payment/partials/payment-form.blade.php
═══════════════════════════════════════════════════════════ */

.pf-form {
    --pf-radius:    12px;
    --pf-radius-sm: 9px;
    --pf-text:      var(--da3g-fg1, #f4f4f5);
    --pf-text-2:    var(--da3g-fg2, #a1a1aa);
    --pf-text-3:    var(--da3g-fg3, #71717a);
    --pf-card:      var(--da3g-card, #1c1c1f);
    --pf-bg2:       var(--da3g-bg2,  #111113);
    --pf-line:      var(--da3g-line, rgba(255,255,255,.06));
    --pf-line-2:    var(--da3g-bd,   rgba(255,255,255,.08));
    --pf-accent:    var(--da3g-accent, #3b82f6);
    --pf-accent-bg: var(--da3g-abg,    rgba(59,130,246,.12));
    --pf-success:   var(--da3g-success, #10b981);
    --pf-success-bg:var(--da3g-success-bg, rgba(16,185,129,.12));
    --pf-warn:      var(--da3g-warn, #f59e0b);
    --pf-warn-bg:   var(--da3g-warn-bg, rgba(245,158,11,.12));
    --pf-danger:    var(--da3g-danger, #ef4444);

    display: flex; flex-direction: column; gap: 14px;
}
body:not(.dark-mode) .pf-form {
    --pf-text:   #09090b;
    --pf-text-2: #52525b;
    --pf-text-3: #a1a1aa;
    --pf-card:   #ffffff;
    --pf-bg2:    #f9f9fb;
    --pf-line:   #f1f1f4;
    --pf-line-2: #e4e4e7;
}

/* Inline info banner (top of the form) */
.pf-info {
    background: var(--pf-accent-bg);
    border: 1px solid color-mix(in srgb, var(--pf-accent) 28%, transparent);
    border-radius: var(--pf-radius);
    overflow: hidden;
}
.pf-info-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--pf-accent) 14%, transparent) 0%, transparent 100%);
}
.pf-info-head .pf-info-ico {
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--pf-accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
.pf-info-head strong { font-size: 13px; font-weight: 800; color: var(--pf-text); }
.pf-info-head small  { display: block; font-size: 11.5px; color: var(--pf-text-2); margin-top: 2px; }
.pf-info-head .pf-info-chev {
    margin-inline-start: auto;
    width: 28px; height: 28px; border-radius: 7px;
    background: var(--pf-card);
    border: 1px solid var(--pf-line-2);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--pf-text-2); font-size: 11px;
    transition: transform .25s;
}
.pf-info.is-open .pf-info-chev { transform: rotate(180deg); }
.pf-info-body {
    padding: 0 16px;
    max-height: 0; overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
}
.pf-info.is-open .pf-info-body {
    max-height: 800px;
    padding: 14px 16px 16px;
    border-top: 1px solid color-mix(in srgb, var(--pf-accent) 22%, transparent);
}
.pf-info-desc {
    font-size: 12.5px; line-height: 1.7; color: var(--pf-text-2);
    margin-bottom: 12px;
}
.pf-info-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pf-info-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 7px;
    background: var(--pf-card); color: var(--pf-accent);
    border: 1px solid color-mix(in srgb, var(--pf-accent) 25%, transparent);
    font-size: 11.5px; font-weight: 700; text-decoration: none;
}
.pf-info-link:hover { background: var(--pf-accent); color: #fff; }
.pf-info-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-bottom: 12px; }
.pf-info-step {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--pf-card);
    border: 1px solid var(--pf-line-2);
    border-radius: 9px;
    padding: 10px 12px;
}
.pf-info-step-num {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--pf-accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.pf-info-step-txt { font-size: 12px; line-height: 1.6; color: var(--pf-text); }

/* Step with embedded callback URL — no card chrome, inline copy button */
.pf-info-step.is-cb {
    background: transparent !important;
    border: 0 !important;
    padding: 6px 0;
    grid-column: 1 / -1; /* span full row of the steps grid */
    align-items: center;
}
.pf-info-step.is-cb .pf-info-step-txt {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.pf-cb-inline {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--pf-line-2);
    border-radius: 7px;
    overflow: hidden;
    background: var(--pf-card);
}
.pf-cb-inline code {
    padding: 6px 10px;
    font-size: 11.5px; font-family: 'SF Mono', Monaco, monospace;
    color: var(--pf-text);
    background: transparent;
    direction: ltr; text-align: left; word-break: break-all;
}
.pf-cb-inline-copy {
    border: 0;
    border-inline-start: 1px solid var(--pf-line-2);
    background: var(--pf-accent); color: #fff;
    padding: 0 12px;
    font-size: 12px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px;
}
.pf-cb-inline-copy:hover { filter: brightness(1.1); }
.pf-info-cb {
    background: var(--pf-card);
    border: 1px dashed color-mix(in srgb, var(--pf-accent) 35%, transparent);
    border-radius: 9px;
    padding: 10px 12px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pf-info-cb-label { font-size: 11.5px; font-weight: 800; color: var(--pf-text-2); }
.pf-info-cb code {
    flex: 1; min-width: 200px;
    background: var(--pf-text); color: var(--pf-card);
    padding: 6px 10px; border-radius: 6px;
    font-size: 11.5px; font-family: 'SF Mono', Monaco, monospace;
    direction: ltr; text-align: left; word-break: break-all;
}
.pf-info-cb-copy {
    padding: 6px 12px; border-radius: 6px; border: 0;
    background: var(--pf-accent); color: #fff;
    font-size: 11px; font-weight: 800; cursor: pointer;
}
.pf-info-cb-copy:hover { filter: brightness(1.1); }

/* Generic 2-col row */
.pf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
}
@media (max-width: 900px) { .pf-row { grid-template-columns: 1fr; } }

/* 3-col row for the top trio: Identity + Logo + Commission */
.pf-row.is-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1100px) { .pf-row.is-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .pf-row.is-3 { grid-template-columns: 1fr; } }

/* Section card — dashboard-style: subtle background, clean borders */
.pf-section {
    background: var(--pf-card);
    border: 1px solid var(--pf-line-2);
    border-radius: var(--pf-radius);
    overflow: hidden;
    display: flex; flex-direction: column;
    min-width: 0;
}
.pf-section-head {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 800; color: var(--pf-text);
    padding: 12px 18px;
    background: var(--pf-bg2);
    border-bottom: 1px solid var(--pf-line);
}
.pf-section-body { padding: 16px 18px; flex: 1; }
.pf-section-head i.pf-head-ico {
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pf-accent-bg); color: var(--pf-accent);
    font-size: 12px;
}
.pf-section-head i.pf-head-ico.is-warn    { background: var(--pf-warn-bg);    color: var(--pf-warn); }
.pf-section-head i.pf-head-ico.is-success { background: var(--pf-success-bg); color: var(--pf-success); }
.pf-section-head i.pf-head-ico.is-purple  { background: rgba(168,85,247,.12); color: #a78bfa; }
.pf-section-head .pf-head-ext {
    margin-inline-start: auto;
    font-size: 11px; font-weight: 600; color: var(--pf-text-3);
}

/* Sub-section card — each subsec inside Gateway Settings is its own card */
.pf-subsec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 900px) { .pf-subsec-grid { grid-template-columns: 1fr; } }
.pf-subsec {
    background: var(--pf-bg2);
    border: 1px solid var(--pf-line-2);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 12px;
    min-width: 0;
}
.pf-subsec.is-full { grid-column: 1 / -1; }
.pf-subsec-title {
    font-size: 12px; font-weight: 800;
    color: var(--pf-text);
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pf-line);
    margin: -2px 0 2px;
}
.pf-subsec-title i {
    width: 22px; height: 22px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pf-accent-bg); 
    font-size: 10px;
}
.pf-subsec-title .pf-counter {
    margin-inline-start: auto;
    font-size: 10.5px; font-weight: 700;
    color: var(--pf-text-3);
    background: var(--pf-card);
    padding: 3px 8px; border-radius: 999px;
    border: 1px solid var(--pf-line-2);
}
.pf-subsec-info {
    margin-inline-start: auto;
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--pf-accent); color: #fff;
    border: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 13px;
    transition: filter .15s, transform .15s;
    flex-shrink: 0;
}
.pf-subsec-info:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; }
.pf-subsec-info:focus { outline: 2px solid var(--pf-accent-bg); outline-offset: 2px; }

/* Section info dialog — uses --da3g-* tokens directly for safe portability */
#pfSecInfoModal .modal-content {
    background: var(--da3g-card, #1c1c1f);
    border: 1px solid var(--da3g-bd, rgba(255,255,255,.08));
    border-radius: 14px;
    overflow: hidden;
    color: var(--da3g-fg1, #f4f4f5);
}
body:not(.dark-mode) #pfSecInfoModal .modal-content { background: #fff; color: #09090b; border-color: #e4e4e7; }
#pfSecInfoModal .modal-header {
    background: var(--da3g-bg2, #111113);
    border-bottom: 1px solid var(--da3g-line, rgba(255,255,255,.06));
    padding: 14px 18px;
    display: flex; align-items: center; gap: 10px;
}
body:not(.dark-mode) #pfSecInfoModal .modal-header { background: #f9f9fb; border-color: #f1f1f4; }
#pfSecInfoModal .pf-dlg-ico {
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--da3g-accent, #3b82f6); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
#pfSecInfoModal .modal-title {
    font-size: 14px; font-weight: 800;
    color: var(--da3g-fg1, #f4f4f5); margin: 0; flex: 1;
}
body:not(.dark-mode) #pfSecInfoModal .modal-title { color: #09090b; }
#pfSecInfoModal .modal-body { padding: 18px; }
#pfSecInfoModal .pf-dlg-intro {
    background: var(--da3g-bg2, #111113);
    border: 1px solid var(--da3g-bd, rgba(255,255,255,.06));
    border-radius: 9px;
    padding: 12px 14px;
    font-size: 12.5px; line-height: 1.7;
    color: var(--da3g-fg2, #a1a1aa);
    margin-bottom: 14px;
}
body:not(.dark-mode) #pfSecInfoModal .pf-dlg-intro { background: #f9f9fb; border-color: #e4e4e7; color: #52525b; }
#pfSecInfoModal .pf-dlg-steps { display: flex; flex-direction: column; gap: 8px; }
#pfSecInfoModal .pf-dlg-step {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--da3g-bg2, #111113);
    border: 1px solid var(--da3g-bd, rgba(255,255,255,.06));
    border-radius: 9px;
    padding: 10px 12px;
}
body:not(.dark-mode) #pfSecInfoModal .pf-dlg-step { background: #f9f9fb; border-color: #e4e4e7; }
#pfSecInfoModal .pf-dlg-step-num {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--da3g-accent, #3b82f6); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; flex-shrink: 0;
}
#pfSecInfoModal .pf-dlg-step-txt {
    font-size: 12.5px; line-height: 1.7;
    color: var(--da3g-fg1, #f4f4f5);
}
body:not(.dark-mode) #pfSecInfoModal .pf-dlg-step-txt { color: #09090b; }
#pfSecInfoModal .pf-dlg-step-txt code {
    background: var(--da3g-fg1, #f4f4f5); color: var(--da3g-card, #1c1c1f);
    padding: 1px 6px; border-radius: 5px;
    font-size: 11px; font-family: 'SF Mono', Monaco, monospace;
    direction: ltr; word-break: break-all;
}
body:not(.dark-mode) #pfSecInfoModal .pf-dlg-step-txt code { background: #09090b; color: #fff; }

/* Field grid */
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pf-grid.is-1 { grid-template-columns: 1fr; }
.pf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-field.is-full { grid-column: 1 / -1; }
.pf-label {
    font-size: 12.5px; font-weight: 700; color: var(--pf-text-2);
    display: flex; align-items: center; gap: 5px;
}
.pf-label .pf-req { color: var(--pf-danger); font-weight: 800; }
.pf-help { font-size: 11.5px; color: var(--pf-text-3); margin-top: 2px; }

/* Inputs */
.pf-form input[type="text"].form-control,
.pf-form input[type="password"].form-control,
.pf-form input[type="number"].form-control,
.pf-form input[type="url"].form-control,
.pf-form input[type="file"].form-control,
.pf-form select.form-control,
.pf-form textarea.form-control {
    width: 100%;
    background: var(--pf-bg2) !important;
    border: 1.5px solid var(--pf-line-2) !important;
    border-radius: var(--pf-radius-sm) !important;
    color: var(--pf-text) !important;
    padding: 10px 12px !important;
    font-size: 13px; font-weight: 600;
    font-family: inherit;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-shadow: none !important;
    line-height: 1.5;
}
.pf-form select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-size: 12px !important;
    background-position: right 12px center !important;
    padding-inline-end: 32px !important;
}
html[dir="rtl"] .pf-form select.form-control { background-position: left 12px center !important; padding-inline-end: 12px !important; padding-inline-start: 32px !important; }
.pf-form input.form-control:focus,
.pf-form select.form-control:focus,
.pf-form textarea.form-control:focus {
    border-color: var(--pf-accent) !important;
    box-shadow: 0 0 0 3px var(--pf-accent-bg) !important;
}
.pf-form input.form-control:read-only { opacity: .8; cursor: not-allowed; background: var(--pf-line) !important; }
.pf-form input[type="file"].form-control { padding: 7px 10px !important; }

/* Toggle row */
.pf-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    background: var(--pf-bg2);
    border: 1px solid var(--pf-line-2);
    border-radius: var(--pf-radius-sm);
    cursor: pointer;
}
.pf-toggle-row:hover { border-color: var(--pf-accent); }
.pf-toggle-row > span { font-size: 13px; font-weight: 700; color: var(--pf-text); }
.pf-toggle-row small { display: block; font-size: 11.5px; color: var(--pf-text-3); font-weight: 500; margin-top: 2px; }
.pf-switch {
    position: relative; width: 40px; height: 22px; flex-shrink: 0;
}
.pf-switch input { opacity: 0; width: 0; height: 0; }
.pf-switch span {
    position: absolute; inset: 0;
    background: var(--pf-line-2);
    border-radius: 999px;
    transition: background .25s;
}
.pf-switch span::before {
    content: ''; position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.25);
    transition: transform .25s;
}
html[dir="rtl"] .pf-switch span::before { left: auto; right: 2px; }
.pf-switch input:checked + span { background: var(--pf-success); }
.pf-switch input:checked + span::before { transform: translateX(18px); }
html[dir="rtl"] .pf-switch input:checked + span::before { transform: translateX(-18px); }

/* Mode option cards */
.pf-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-mode {
    border: 1.5px solid var(--pf-line-2);
    border-radius: var(--pf-radius);
    padding: 14px 16px;
    background: var(--pf-bg2);
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
    position: relative;
    display: flex; flex-direction: column; gap: 4px;
}
.pf-mode:hover { border-color: var(--pf-accent); transform: translateY(-1px); }
.pf-mode input { position: absolute; opacity: 0; pointer-events: none; }
.pf-mode.is-checked { border-color: var(--pf-success); background: var(--pf-success-bg); }
.pf-mode-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--pf-text); }
.pf-mode-desc { font-size: 12px; color: var(--pf-text-2); }

/* Auto info */
.pf-auto {
    background: var(--pf-success-bg);
    border: 1px solid color-mix(in srgb, var(--pf-success) 35%, transparent);
    border-radius: var(--pf-radius);
    padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
}
.pf-auto-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--pf-success); }
.pf-auto p  { margin: 0; font-size: 12.5px; color: var(--pf-text-2); }
.pf-auto ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pf-auto ul li { font-size: 12.5px; color: var(--pf-text); display: flex; align-items: flex-start; gap: 8px; }
.pf-auto ul li::before { content: '✓'; color: var(--pf-success); font-weight: 900; flex-shrink: 0; }
.pf-auto-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.pf-btn-sm {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 8px;
    font-size: 12px; font-weight: 700;
    text-decoration: none; border: 0; cursor: pointer;
    transition: filter .15s, transform .15s;
}
.pf-btn-sm:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pf-btn-success { background: var(--pf-success); color: #fff; }
.pf-btn-dark    { background: var(--pf-text); color: var(--pf-card); }

/* Commission badge */
.pf-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800;
    background: var(--pf-warn-bg); color: var(--pf-warn);
    border: 1px solid color-mix(in srgb, var(--pf-warn) 35%, transparent);
}

/* Image upload */
.pf-img-row {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.pf-img-preview, .pf-img-empty {
    width: 88px; height: 88px; flex-shrink: 0;
    border-radius: var(--pf-radius-sm);
    background: var(--pf-bg2);
}
.pf-img-preview {
    border: 1px solid var(--pf-line-2);
    object-fit: cover;
}
.pf-img-empty {
    border: 1.5px dashed var(--pf-line-2);
    display: flex; align-items: center; justify-content: center;
    color: var(--pf-text-3); font-size: 11px; text-align: center;
}
.pf-img-info { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }

/* Custom file input — fully replaces the native button */
.pf-file {
    position: relative !important;
    display: flex !important; align-items: stretch !important;
    background: var(--pf-bg2);
    border: 1.5px solid var(--pf-line-2);
    border-radius: var(--pf-radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    min-height: 44px;
}
.pf-file:hover { border-color: var(--pf-accent); }
.pf-file:focus-within { border-color: var(--pf-accent); box-shadow: 0 0 0 3px var(--pf-accent-bg); }
.pf-file input[type="file"] {
    position: absolute !important; inset: 0 !important;
    opacity: 0 !important; cursor: pointer !important;
    width: 100% !important; height: 100% !important;
    z-index: 3 !important;
    padding: 0 !important; border: 0 !important; background: transparent !important;
}
.pf-file-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 16px;
    background: var(--pf-accent); color: #fff;
    font-size: 12.5px; font-weight: 800;
    flex-shrink: 0; z-index: 1;
    pointer-events: none;
}
.pf-file-name {
    flex: 1; min-width: 0;
    display: flex; align-items: center;
    padding: 0 14px;
    color: var(--pf-text-2);
    font-size: 12.5px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    z-index: 1; pointer-events: none;
}
.pf-file-name.is-empty { color: var(--pf-text-3); font-weight: 500; font-style: italic; }

/* Foot — save bar */
.pf-foot {
    display: flex; justify-content: flex-end; align-items: center; gap: 10px;
    padding-top: 4px;
}
.pf-save {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 32px; border-radius: var(--pf-radius-sm);
    background: var(--pf-accent); color: #fff;
    font-size: 13.5px; font-weight: 800;
    border: 0; cursor: pointer;
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--pf-accent) 70%, transparent);
    transition: filter .15s, transform .15s;
}
.pf-save:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }

/* Mobile */
@media (max-width: 720px) {
    .pf-grid { grid-template-columns: 1fr; }
    .pf-modes { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/payment/partials/payment-info-modal.blade.php
═══════════════════════════════════════════════════════════ */

.pgi-modal .modal-content {
    background: var(--da3g-card, #1c1c1f) !important;
    color: var(--da3g-fg1, #f4f4f5);
    border: 0; border-radius: 14px; overflow: hidden;
}
body:not(.dark-mode) .pgi-modal .modal-content { background: #fff !important; color: #09090b; }

.pgi-head {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--da3g-line, rgba(255,255,255,.06));
}
.pgi-head .pgi-logo {
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--da3g-bg2, #111113);
    border: 1px solid var(--da3g-bd, rgba(255,255,255,.06));
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.pgi-head .pgi-logo img { width: 100%; height: 100%; object-fit: cover; }
.pgi-head .pgi-title  { flex: 1; }
.pgi-head h5 { font-size: 16px; font-weight: 800; margin: 0; color: var(--da3g-fg1, #f4f4f5); }
body:not(.dark-mode) .pgi-head h5 { color: #09090b; }
.pgi-head small { display: block; font-size: 12px; color: var(--da3g-fg3, #71717a); margin-top: 2px; }

.pgi-body { padding: 22px; }

.pgi-desc {
    background: var(--da3g-bg2, #111113);
    border: 1px solid var(--da3g-bd, rgba(255,255,255,.06));
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13px; line-height: 1.7;
    color: var(--da3g-fg2, #a1a1aa);
    margin-bottom: 18px;
}
body:not(.dark-mode) .pgi-desc { background: #f9f9fb; border-color: #e4e4e7; color: #52525b; }

.pgi-links {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 18px;
}
.pgi-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 8px;
    background: var(--da3g-abg, rgba(59,130,246,.12));
    color: var(--da3g-accent, #3b82f6);
    text-decoration: none;
    font-size: 12px; font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--da3g-accent,#3b82f6) 25%, transparent);
}
.pgi-link:hover { filter: brightness(1.1); color: var(--da3g-accent, #3b82f6); }

.pgi-section-title {
    font-size: 11.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--da3g-fg3, #71717a);
    margin: 0 0 12px;
    display: flex; align-items: center; gap: 8px;
}
.pgi-section-title::after { content: ''; flex: 1; height: 1px; background: var(--da3g-line, rgba(255,255,255,.06)); }

.pgi-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.pgi-step {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--da3g-bg2, #111113);
    border: 1px solid var(--da3g-bd, rgba(255,255,255,.06));
    border-radius: 10px;
    padding: 12px 14px;
}
body:not(.dark-mode) .pgi-step { background: #f9f9fb; border-color: #e4e4e7; }
.pgi-step-num {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--da3g-accent, #3b82f6); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.pgi-step-text { font-size: 13px; line-height: 1.6; color: var(--da3g-fg1, #f4f4f5); }
body:not(.dark-mode) .pgi-step-text { color: #09090b; }

.pgi-cb-box {
    background: var(--da3g-abg, rgba(59,130,246,.12));
    border: 1px solid color-mix(in srgb, var(--da3g-accent,#3b82f6) 25%, transparent);
    border-radius: 10px;
    padding: 14px 16px;
}
.pgi-cb-title {
    font-size: 13px; font-weight: 800; color: var(--da3g-fg1, #f4f4f5);
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
}
body:not(.dark-mode) .pgi-cb-title { color: #09090b; }
.pgi-cb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pgi-cb-row code {
    flex: 1; min-width: 200px;
    background: var(--da3g-fg1, #f4f4f5); color: var(--da3g-card, #1c1c1f);
    padding: 8px 12px; border-radius: 8px;
    font-size: 12px; font-family: 'SF Mono', Monaco, monospace;
    direction: ltr; text-align: left;
    word-break: break-all;
}
body:not(.dark-mode) .pgi-cb-row code { background: #09090b; color: #fff; }
.pgi-cb-copy {
    padding: 8px 14px; border-radius: 8px; border: 0;
    background: var(--da3g-accent, #3b82f6); color: #fff;
    font-size: 12px; font-weight: 800; cursor: pointer;
}
.pgi-cb-copy:hover { filter: brightness(1.1); }

.pgi-foot { padding: 14px 22px; border-top: 1px solid var(--da3g-line, rgba(255,255,255,.06)); display: flex; justify-content: flex-end; }
.pgi-foot button { padding: 8px 20px; border-radius: 8px; border: 1px solid var(--da3g-bd, rgba(255,255,255,.08)); background: var(--da3g-bg2, #111113); color: var(--da3g-fg2, #a1a1aa); font-size: 12.5px; font-weight: 700; }
body:not(.dark-mode) .pgi-foot button { background: #f9f9fb; color: #52525b; border-color: #e4e4e7; }

@media (max-width: 640px) {
    .pgi-cb-row code { font-size: 11px; }
    .pgi-cb-row { flex-direction: column; align-items: stretch; }
    .pgi-cb-copy { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/payment/partials/system-method-form.blade.php
═══════════════════════════════════════════════════════════ */

.smf {
    --smf-radius:   12px;
    --smf-text:     var(--da3g-fg1, #f4f4f5);
    --smf-text-2:   var(--da3g-fg2, #a1a1aa);
    --smf-text-3:   var(--da3g-fg3, #71717a);
    --smf-card:     var(--da3g-card, #1c1c1f);
    --smf-bg2:      var(--da3g-bg2,  #111113);
    --smf-line:     var(--da3g-line, rgba(255,255,255,.06));
    --smf-line-2:   var(--da3g-bd,   rgba(255,255,255,.08));
    --smf-accent:   var(--da3g-accent, #3b82f6);
    --smf-accent-bg:var(--da3g-abg,    rgba(59,130,246,.12));
    --smf-danger:   var(--da3g-danger, #ef4444);

    display: flex; flex-direction: column; gap: 14px;
}
body:not(.dark-mode) .smf {
    --smf-text:   #09090b;
    --smf-text-2: #52525b;
    --smf-text-3: #a1a1aa;
    --smf-card:   #ffffff;
    --smf-bg2:    #f9f9fb;
    --smf-line:   #f1f1f4;
    --smf-line-2: #e4e4e7;
}

/* Hero card */
.smf-hero {
    background: var(--smf-card);
    border: 1px solid color-mix(in srgb, var(--smf-accent) 28%, transparent);
    border-radius: var(--smf-radius);
    padding: 16px 18px;
    display: flex; align-items: center; gap: 14px;
    position: relative; overflow: hidden;
}
.smf-hero::before {
    content: ''; position: absolute;
    top: -40%; inset-inline-end: -10%;
    width: 220px; height: 220px;
    background: radial-gradient(circle, color-mix(in srgb, var(--smf-accent) 18%, transparent), transparent 65%);
    pointer-events: none;
}
.smf-hero-ico {
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--smf-accent-bg); color: var(--smf-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}
.smf-hero h2 { font-size: 16px; font-weight: 800; color: var(--smf-text); margin: 0 0 4px; }
.smf-hero p  { font-size: 12.5px; color: var(--smf-text-2); margin: 0; }
.smf-hero-info {
    margin-inline-start: auto;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--smf-accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: help;
}

/* 2-col row for the two cards */
.smf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 760px) { .smf-row { grid-template-columns: 1fr; } }

.smf-card {
    background: var(--smf-card);
    border: 1px solid var(--smf-line-2);
    border-radius: var(--smf-radius);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.smf-card-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    font-size: 13px; font-weight: 800; color: var(--smf-text);
    background: var(--smf-bg2);
    border-bottom: 1px solid var(--smf-line);
}
.smf-card-head i.smf-head-ico {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--smf-accent-bg); color: var(--smf-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
}
.smf-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 12px; }

.smf-field { display: flex; flex-direction: column; gap: 6px; }
.smf-label {
    font-size: 12.5px; font-weight: 700; color: var(--smf-text-2);
    display: flex; align-items: center; gap: 5px;
}
.smf-label .smf-req { color: var(--smf-danger); font-weight: 800; }
.smf input.form-control {
    background: var(--smf-bg2) !important;
    border: 1.5px solid var(--smf-line-2) !important;
    border-radius: 9px !important;
    color: var(--smf-text) !important;
    padding: 10px 12px !important;
    font-size: 13px; font-weight: 600;
    outline: none;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
}
.smf input.form-control:focus {
    border-color: var(--smf-accent) !important;
    box-shadow: 0 0 0 3px var(--smf-accent-bg) !important;
}
.smf input.form-control:read-only { opacity: .85; cursor: not-allowed; background: var(--smf-line) !important; }

/* Image card */
.smf-img-wrap {
    flex: 1;
    background: var(--smf-bg2);
    border: 1px dashed var(--smf-line-2);
    border-radius: 9px;
    padding: 18px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    text-align: center;
}
.smf-img-wrap > strong {
    font-size: 12.5px; font-weight: 700; color: var(--smf-text);
}
.smf-img-preview {
    width: 110px; height: 110px;
    border-radius: 12px;
    background: var(--smf-card);
    border: 1px solid var(--smf-line-2);
    object-fit: cover;
}
.smf-img-empty {
    width: 110px; height: 110px;
    border-radius: 12px;
    background: var(--smf-card);
    border: 1px dashed var(--smf-line-2);
    display: flex; align-items: center; justify-content: center;
    color: var(--smf-text-3); font-size: 24px;
}
.smf-file {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px;
    background: var(--smf-accent);
    color: #fff;
    border-radius: 9px;
    font-size: 12.5px; font-weight: 800;
    cursor: pointer;
    overflow: hidden;
    transition: filter .15s, transform .15s;
}
.smf-file:hover { filter: brightness(1.08); transform: translateY(-1px); }
.smf-file input[type="file"] {
    position: absolute; inset: 0;
    opacity: 0; cursor: pointer;
    width: 100%; height: 100%;
}
.smf-img-hint { font-size: 11.5px; color: var(--smf-text-3); }

/* Info banner */
.smf-info-banner {
    background: var(--smf-card);
    border: 1px solid var(--smf-line-2);
    border-radius: var(--smf-radius);
    overflow: hidden;
}
.smf-info-banner-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: var(--smf-bg2);
    border-bottom: 1px solid var(--smf-line);
    font-size: 13px; font-weight: 800; color: var(--smf-text);
}
.smf-info-banner-head i.smf-banner-ico {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--smf-bg2); color: var(--smf-text-2);
    border: 1px solid var(--smf-line-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
}
.smf-info-banner-body {
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
}
.smf-info-banner-body .smf-banner-i {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--smf-accent-bg); color: var(--smf-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
.smf-info-banner-body p {
    margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--smf-text-2);
}

/* Footer / action bar */
.smf-foot {
    display: flex; align-items: center; gap: 8px;
    padding-top: 4px;
    flex-wrap: wrap;
}
.smf-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px; border-radius: 9px;
    font-size: 13px; font-weight: 800;
    border: 1.5px solid transparent; cursor: pointer;
    transition: filter .15s, transform .15s;
}
.smf-btn-primary { background: var(--smf-accent); color: #fff; border-color: var(--smf-accent); }
.smf-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.smf-btn-ghost { background: var(--smf-bg2); color: var(--smf-text-2); border-color: var(--smf-line-2); }
.smf-btn-ghost:hover { color: var(--smf-text); border-color: var(--smf-accent); }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/pixel/index.blade.php
═══════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════
   PIXEL PAGE — design tokens matching dashboard
════════════════════════════════════════════════════ */
.pxp {
    --c:     #1c1c1f;
    --bd:    rgba(255,255,255,.06);
    --bg2:   #111113;
    --fg1:   #f4f4f5;
    --fg2:   #a1a1aa;
    --fg3:   #52525b;
    --line:  rgba(255,255,255,.05);
    --r:     14px;
    --accent:#3b82f6;
    margin: 0 auto;
}
body:not(.dark-mode) .pxp {
    --c:     #ffffff;
    --bd:    #e4e4e7;
    --bg2:   #f9f9fb;
    --fg1:   #09090b;
    --fg2:   #52525b;
    --fg3:   #a1a1aa;
    --line:  #f0f0f2;
}

/* ── Hero ── */
.pxp-hero {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 24px;
    border-radius: 18px;
    border: 1px solid var(--bd);
    background:
        radial-gradient(800px 200px at 0% 0%, rgba(99,102,241,.09), transparent 60%),
        radial-gradient(600px 180px at 100% 100%, rgba(236,72,153,.06), transparent 60%),
        var(--bg2);
    margin-bottom: 20px;
}
.pxp-hero-ico {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
    box-shadow: 0 8px 20px -6px rgba(99,102,241,.5);
}
.pxp-hero h1 { font-size: 19px; font-weight: 900; color: var(--fg1); margin: 0 0 3px; letter-spacing: -.02em; }
.pxp-hero p  { font-size: 12.5px; color: var(--fg3); margin: 0; }
.pxp-hero-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pxp-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--c);
    border: 1px solid var(--bd);
    font-size: 11.5px; font-weight: 700;
    color: var(--fg2);
}
.pxp-pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.pxp-pill.active-pill .dot { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.2); }
.pxp-pill.inactive-pill .dot { background: var(--fg3); }

/* ── Layout grid ── */
.pxp-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 340px;
    gap: 18px;
    align-items: start;
}
@media(max-width:991px){ .pxp-layout { grid-template-columns: 1fr; } }

/* ── Card base ── */
.pxp-card {
    background: var(--c);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    overflow: hidden;
}
.pxp-card-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
}
.pxp-card-head-ico {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.pxp-card-head h4 { font-size: 14px; font-weight: 800; color: var(--fg1); margin: 0; flex: 1; }
.pxp-card-head small { font-size: 11px; color: var(--fg3); }

/* ── Pixel rows ── */
.pxp-pixel-list { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }

.pxp-pixel-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1.5px solid var(--bd);
    border-radius: 12px;
    background: var(--bg2);
    transition: border-color .2s, box-shadow .2s;
}
.pxp-pixel-row:focus-within {
    border-color: var(--platform-color, var(--accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--platform-color, var(--accent)) 15%, transparent);
}
.pxp-pixel-row.is-active { border-color: color-mix(in srgb, var(--platform-color, var(--accent)) 40%, transparent); }

.pxp-plat-ico {
    width: 44px; height: 44px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.pxp-row-body { min-width: 0; }
.pxp-row-name {
    font-size: 13px; font-weight: 800;
    color: var(--fg1);
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 6px;
}
.pxp-row-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em;
}
.pxp-row-badge.is-live { background: rgba(34,197,94,.12); color: #16a34a; }
.pxp-row-badge.is-live i { font-size: 7px; }
.pxp-row-badge.is-off  { background: var(--bg2); color: var(--fg3); border: 1px solid var(--bd); }

.pxp-row-input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    background: var(--c);
    border: 1.5px solid var(--bd);
    border-radius: 9px;
    color: var(--fg1);
    font-size: 12.5px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-weight: 600;
    outline: none;
    transition: border-color .15s;
    direction: ltr;
}
.pxp-row-input:focus {
    border-color: var(--platform-color, var(--accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--platform-color, var(--accent)) 12%, transparent);
}
.pxp-row-input::placeholder { color: var(--fg3); font-family: inherit; }

.pxp-row-format {
    font-size: 10.5px;
    color: var(--fg3);
    font-weight: 600;
    margin-top: 4px;
    display: flex; align-items: center; gap: 5px;
}

/* Help toggle */
.pxp-row-help-btn {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1.5px solid var(--bd);
    background: var(--bg2);
    color: var(--fg3);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}
.pxp-row-help-btn:hover { border-color: var(--platform-color, var(--accent)); color: var(--platform-color, var(--accent)); }

.pxp-help-panel {
    display: none;
    grid-column: 1 / -1;
    margin-top: -4px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--bd);
    background: var(--bg2);
    font-size: 12px;
    line-height: 1.6;
    color: var(--fg2);
}
.pxp-help-panel.show { display: block; }
.pxp-help-where {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--c);
    border: 1px solid var(--bd);
    margin-bottom: 8px;
}
.pxp-help-where i { font-size: 12px; color: var(--platform-color, var(--accent)); margin-top: 2px; flex-shrink: 0; }
.pxp-help-where span { font-size: 12px; font-weight: 700; color: var(--fg1); }
.pxp-help-desc { color: var(--fg2); font-size: 11.5px; font-weight: 500; }
.pxp-help-link {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 8px;
    font-size: 11.5px; font-weight: 700;
    color: var(--platform-color, var(--accent));
    text-decoration: none;
}
.pxp-help-link:hover { text-decoration: underline; }

/* ── Save bar ── */
.pxp-save-bar {
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap;
}
.pxp-save-note { font-size: 11.5px; font-weight: 600; color: var(--fg3); display: flex; align-items: center; gap: 6px; }
.pxp-save-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 24px;
    border: 0; border-radius: 11px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    font-size: 13px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    box-shadow: 0 6px 18px -4px rgba(99,102,241,.45);
    transition: filter .15s, transform .15s;
}
.pxp-save-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* ── Chart card (right) ── */
.pxp-chart-wrap {
    position: sticky; top: 12px;
    display: flex; flex-direction: column; gap: 14px;
}

.pxp-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 16px 20px;
}
.pxp-stat {
    padding: 12px 14px;
    border-radius: 11px;
    border: 1px solid var(--bd);
    background: var(--bg2);
}
.pxp-stat-ico {
    font-size: 15px;
    margin-bottom: 8px;
    display: block;
}
.pxp-stat-num { font-size: 22px; font-weight: 900; color: var(--fg1); letter-spacing: -.03em; margin-bottom: 2px; }
.pxp-stat-lbl { font-size: 11px; font-weight: 600; color: var(--fg3); }

/* ── Dark-mode: force TikTok & X icons visible when platform color is black ── */
body.dark-mode .pxp-plat-ico .fa-tiktok,
body.dark-mode .pxp-plat-ico .fa-x-twitter,
body.dark-mode .pxp-stat .fa-tiktok,
body.dark-mode .pxp-stat .fa-x-twitter {
    background-color: #e4e4e7 !important;
}

/* how it works section */
.pxp-how {
    padding: 16px 20px;
}
.pxp-how-step {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 14px;
}
.pxp-how-step:last-child { margin-bottom: 0; }
.pxp-step-num {
    width: 24px; height: 24px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 900;
    flex-shrink: 0;
}
.pxp-step-body strong { font-size: 12.5px; font-weight: 800; color: var(--fg1); display: block; margin-bottom: 2px; }
.pxp-step-body p { font-size: 11.5px; color: var(--fg3); margin: 0; line-height: 1.5; }

/* Chart */
.pxp-chart-body { padding: 16px 20px; }
.pxp-chart-title { font-size: 12.5px; font-weight: 800; color: var(--fg1); margin-bottom: 14px; display: flex; align-items: center; gap: 7px; }
.pxp-chart-canvas { height: 200px; }

/* Alerts */
.pxp-alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 12.5px; font-weight: 600;
}
.pxp-alert i { font-size: 13px; margin-top: 1px; flex-shrink: 0; }
.pxp-alert-success { background: rgba(34,197,94,.09); border: 1px solid rgba(34,197,94,.2); color: #16a34a; }
.pxp-alert-info    { background: rgba(59,130,246,.09); border: 1px solid rgba(59,130,246,.2); color: #2563eb; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/plan/plan.blade.php
═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   SUBSCRIPTION PLANS — Dashboard da3-system parity
   uses the SAME tokens as the vendor dashboard
   ══════════════════════════════════════════════════════════ */
.pl-page {
    --da3-card:    #1c1c1f;
    --da3-bd:      rgba(255,255,255,.055);
    --da3-bg2:     #111113;
    --da3-shadow:  0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-fg1:     #f4f4f5;
    --da3-fg2:     #a1a1aa;
    --da3-fg3:     #71717a;
    --da3-line:    rgba(255,255,255,.06);
    --da3-hover:   rgba(255,255,255,.03);
    --da3-r:       12px;
    --da3-gap:     16px;
    --da3-accent:  #3b82f6;
    --da3-abg:     rgba(59,130,246,.12);
    margin: 0 auto;
}
body:not(.dark-mode) .pl-page {
    --da3-card:    #ffffff;
    --da3-bd:      #e4e4e7;
    --da3-bg2:     #f9f9fb;
    --da3-shadow:  0 1px 3px rgba(0,0,0,.07), 0 0 0 1px #e4e4e7;
    --da3-fg1:     #09090b;
    --da3-fg2:     #52525b;
    --da3-fg3:     #a1a1aa;
    --da3-line:    #f4f4f5;
    --da3-hover:   rgba(0,0,0,.02);
}

/* ─── Top bar (dashboard parity) ─────────────────────────── */
.pl-topbar {
    background:    var(--da3-card);
    border:        1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow:    var(--da3-shadow);
    margin-bottom: var(--da3-gap);
    overflow:      hidden;
}
.pl-topbar-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             14px;
    padding:         18px 22px 14px;
    flex-wrap:       wrap;
}
.pl-topbar-id    { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.pl-topbar-ico   {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0;
}
.pl-topbar-info  { min-width: 0; }
.pl-topbar-title {
    font-size: 20px; font-weight: 700;
    color: var(--da3-fg1);
    margin: 0 0 4px;
    letter-spacing: -.2px; line-height: 1.2;
}
.pl-topbar-sub {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--da3-fg3);
    flex-wrap: wrap; margin: 0;
}
.pl-topbar-sub .live-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600;
    color: #10b981;
    background: rgba(16,185,129,.1);
    border-radius: 20px;
    padding: 2px 9px 2px 7px;
}
.pl-topbar-sub .live-pill.warn {
    color: #f59e0b; background: rgba(245,158,11,.1);
}
.pl-topbar-sub .live-pill.err {
    color: #ef4444; background: rgba(239,68,68,.1);
}
.pl-topbar-sub .live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: .9;
    animation: plPulse 2s ease-in-out infinite;
}
@keyframes plPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(1.35)} }
.pl-topbar-sub .dot-sep { color: var(--da3-fg3); opacity: .4; }

.pl-topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ─── Countdown inside topbar (unified with banner) ──────── */
.pl-topbar-countdown {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    border-radius: 10px;
}
.pl-topbar-countdown .cd-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--da3-fg3);
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    flex-shrink: 0;
}
/* numbers row — ALWAYS left-to-right, no matter the page direction */
.pl-topbar-countdown .cd-numbers {
    display: flex;
    align-items: center;
    gap: 6px;
    direction: ltr;            /* lock numbers to d : h : m : s order */
    unicode-bidi: isolate;
}
.pl-topbar-countdown .cd-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    min-width: 30px;
}
.pl-topbar-countdown .cd-cell strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--da3-fg1);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: color .2s;
}
.pl-topbar-countdown .cd-cell span {
    font-size: 8.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--da3-fg3);
    margin-top: 3px;
    font-weight: 700;
}
.pl-topbar-countdown .cd-sep {
    color: var(--da3-fg3);
    font-weight: 700;
    opacity: .35;
    font-size: 13px;
    line-height: 1;
    align-self: center;
    /* Sit slightly above baseline so it aligns with the digits */
    margin-top: -8px;
}
.pl-topbar-countdown.is-expired strong { color: #ef4444; }
.pl-topbar-countdown.is-expiring strong { color: #f59e0b; }
.pl-topbar-countdown .cd-cell.tick-flash strong { color: var(--da3-accent); }
.pl-topbar-countdown.lifetime {
    background: rgba(16,185,129,.08);
    border-color: rgba(16,185,129,.25);
}
.pl-topbar-countdown.lifetime .cd-text {
    font-size: 12px;
    font-weight: 700;
    color: #10b981;
    padding: 2px 4px;
}
.pl-btn-add {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px;
    border-radius: 9px;
    background: var(--da3-accent);
    color: #fff !important;
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--da3-accent);
    transition: filter .15s, transform .15s;
    box-shadow: 0 2px 8px rgba(59,130,246,.28);
}
.pl-btn-add:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ─── KPI strip (vendor: shows plan stats) ───────────────── */
.pl-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--da3-gap);
    margin-bottom: var(--da3-gap);
}
@media (max-width: 991px) { .pl-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pl-kpis { grid-template-columns: 1fr; } }
.pl-kpi {
    background:    var(--da3-card);
    border:        1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow:    var(--da3-shadow);
    padding:       16px 18px;
    position:      relative;
    overflow:      hidden;
    transition:    transform .18s ease, box-shadow .18s ease;
}
.pl-kpi:hover { transform: translateY(-2px); }
.pl-kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--ic, var(--da3-accent));
    border-radius: var(--da3-r) var(--da3-r) 0 0;
    opacity: .85;
}
.pl-kpi-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pl-kpi-label { font-size: 11px; font-weight: 600; color: var(--da3-fg2); text-transform: uppercase; letter-spacing: .06em; }
.pl-kpi-ico {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--ic-bg, var(--da3-abg));
    color: var(--ic, var(--da3-accent));
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.pl-kpi-num {
    font-size: 22px; font-weight: 800;
    color: var(--da3-fg1);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.pl-kpi-sub { font-size: 11.5px; color: var(--da3-fg3); margin-top: 4px; font-weight: 500; }

/* ─── Active plan banner (countdown) ────────────────────── */
.pl-current-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    box-shadow: var(--da3-shadow);
    border-inline-start: 4px solid var(--da3-accent);
    border-radius: var(--da3-r);
    margin-bottom: var(--da3-gap);
    flex-wrap: wrap;
}
.pl-current-ico {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.pl-current-text { flex: 1; min-width: 0; }
.pl-current-text strong { display: block; font-size: 14px; color: var(--da3-fg1); font-weight: 700; }
.pl-current-text small  { font-size: 12px; color: var(--da3-fg3); }
.pl-current-countdown { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.pl-cd-cell {
    min-width: 52px;
    padding: 7px 10px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-bg2);
    border-radius: 9px;
    text-align: center;
    line-height: 1.15;
}
.pl-cd-cell strong { display: block; font-size: 16px; font-weight: 800; color: var(--da3-fg1); font-variant-numeric: tabular-nums; }
.pl-cd-cell span   { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: var(--da3-fg3); }
.pl-cd-cell.expired strong { color: #ef4444; font-size: 13px; }

/* ─── Section heading ───────────────────────────────────── */
.pl-section-hd {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--da3-fg3);
    margin: 22px 4px 12px;
    display: flex; align-items: center; gap: 8px;
}
.pl-section-hd::before {
    content: '';
    width: 3px; height: 12px;
    background: var(--da3-accent);
    border-radius: 2px;
}

/* ─── Plan grid ─────────────────────────────────────────── */
.pl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: var(--da3-gap);
}

.pl-card {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    padding: 22px 20px 18px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.pl-card:hover {
    border-color: rgba(59,130,246,.35);
    transform: translateY(-3px);
    box-shadow: var(--da3-shadow), 0 10px 28px rgba(0,0,0,.18);
}

/* Active card — accent stripe top */
.pl-card.is-current { border-color: var(--da3-accent); }
.pl-card.is-current::before {
    content: "";
    position: absolute;
    inset-inline-start: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--da3-accent);
}

/* Popular card — gold stripe */
.pl-card.is-popular::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #f59e0b;
    opacity: .8;
}

/* Recommended badge */
.pl-tag {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.pl-tag.current  { background: var(--da3-abg); color: var(--da3-accent); }
.pl-tag.popular  { background: rgba(245,158,11,.14); color: #f59e0b; }
.pl-tag.free     { background: rgba(16,185,129,.12); color: #10b981; }

/* Header */
.pl-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--da3-fg1);
    margin: 0 0 4px;
    letter-spacing: -.1px;
}
.pl-name + small {
    display: block;
    font-size: 12px;
    color: var(--da3-fg3);
    line-height: 1.5;
    min-height: 36px;
    margin-bottom: 16px;
}

/* Price — amount + period stay glued, RTL-safe */
.pl-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 0 16px;
    border-bottom: 1px dashed var(--da3-bd);
    margin-bottom: 16px;
    /* LTR by default; flip with logical row in RTL block below */
    flex-direction: row;
    flex-wrap: nowrap;
}
html[dir="rtl"] .pl-price {
    /* Reverse so the amount sits on the start and "/period" follows it */
    flex-direction: row;
}
.pl-price-amt {
    font-size: 30px;
    font-weight: 900;
    color: var(--da3-fg1);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
    flex-shrink: 0;
}
.pl-price-amt.free {
    color: #10b981;
    font-size: 26px;
}
.pl-price-per {
    font-size: 13px;
    color: var(--da3-fg3);
    font-weight: 600;
    line-height: 1.2;
    /* Stick to the amount visually */
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
}
.pl-price-slash {
    color: var(--da3-fg3);
    opacity: .5;
    font-weight: 400;
    font-size: 14px;
    margin-inline-end: 2px;
}

/* Features */
.pl-feats {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    flex: 1;
}
.pl-feats li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    font-size: 12.5px;
    color: var(--da3-fg1);
    line-height: 1.4;
}
.pl-feats li i {
    color: #10b981;
    font-size: 10px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(16,185,129,.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pl-feats li.addon i {
    color: var(--da3-accent);
    background: var(--da3-abg);
}

/* Action area */
.pl-cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 11px 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter .15s, transform .15s;
}
.pl-cta-primary {
    background: var(--da3-accent);
    color: #fff !important;
    border-color: var(--da3-accent);
    box-shadow: 0 2px 8px rgba(59,130,246,.28);
}
.pl-cta-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pl-cta-outline {
    background: transparent;
    color: var(--da3-fg1);
    border-color: var(--da3-bd);
}
.pl-cta-outline:hover { border-color: var(--da3-accent); color: var(--da3-accent); background: var(--da3-abg); }

.pl-toggle {
    width: 100%;
    padding: 10px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter .15s;
}
.pl-toggle.on  { background: rgba(16,185,129,.14); color: #10b981; border-color: rgba(16,185,129,.32); }
.pl-toggle.off { background: rgba(239,68,68,.1);   color: #ef4444; border-color: rgba(239,68,68,.28); }
.pl-toggle:hover { filter: brightness(1.08); }

.pl-admin-actions {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
.pl-admin-btn {
    flex: 1;
    height: 34px;
    border-radius: 8px;
    background: var(--da3-bg2);
    color: var(--da3-fg2);
    border: 1px solid var(--da3-bd);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    transition: .15s;
}
.pl-admin-btn:hover         { color: var(--da3-accent); border-color: var(--da3-accent); background: var(--da3-abg); }
.pl-admin-btn.danger:hover  { color: #ef4444; border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); }

.pl-status-msg {
    text-align: center;
    font-size: 11.5px;
    color: var(--da3-fg3);
    margin-top: 6px;
    line-height: 1.5;
}
.pl-status-msg strong.ok  { color: #10b981; }
.pl-status-msg strong.err { color: #ef4444; }

/* Responsive */
@media (max-width: 768px) {
    .pl-topbar-row { padding: 14px 16px; }
    .pl-topbar-title { font-size: 17px; }
    .pl-current-banner { flex-wrap: wrap; }
    .pl-current-countdown { width: 100%; justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   USAGE WIDGET — progress cards + activity timeline
   ══════════════════════════════════════════════════════════ */
.pl-usage-wrap {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    padding: 20px 22px;
    margin-bottom: var(--da3-gap);
}
.pl-usage-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.pl-usage-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-usage-ico {
    width: 42px; height: 42px; border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
    box-shadow: 0 6px 16px -4px rgba(59,130,246,.45);
}
.pl-usage-head h5 { font-size: 15px; font-weight: 800; color: var(--da3-fg1); margin: 0 0 2px; letter-spacing: -.1px; }
.pl-usage-head p  { font-size: 12px; color: var(--da3-fg3); margin: 0; font-weight: 500; }
.pl-usage-plan-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 999px;
    background: var(--da3-abg); color: var(--da3-accent);
    font-size: 12.5px; font-weight: 800;
    border: 1px solid color-mix(in srgb, var(--da3-accent) 30%, transparent);
}

/* Metric cards */
.pl-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.pl-usage-card {
    background: var(--da3-bg2);
    border: 1.5px solid var(--da3-bd);
    border-radius: 12px;
    padding: 16px 18px;
    transition: border-color .2s, box-shadow .2s;
}
.pl-usage-card.tone-warn    { border-color: rgba(245,158,11,.4); }
.pl-usage-card.tone-danger  { border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.04); }
.pl-usage-card.tone-lifetime { border-color: rgba(99,102,241,.3); }

.pl-usage-card-head {
    display: flex; align-items: center; gap: 9px; margin-bottom: 11px;
}
.pl-usage-card-ico {
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--da3-card); border: 1px solid var(--da3-bd);
    color: var(--da3-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
.tone-warn   .pl-usage-card-ico { color: #f59e0b; border-color: rgba(245,158,11,.3); }
.tone-danger .pl-usage-card-ico { color: #ef4444; border-color: rgba(239,68,68,.35); }
.pl-usage-card-label {
    font-size: 12.5px; font-weight: 800; color: var(--da3-fg2);
    text-transform: uppercase; letter-spacing: .04em;
}
.pl-usage-card-numbers {
    display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px;
}
.pl-usage-card-numbers strong {
    font-size: 28px; font-weight: 900; color: var(--da3-fg1);
    letter-spacing: -.6px; font-variant-numeric: tabular-nums;
    line-height: 1;
}
.pl-usage-card-limit {
    font-size: 13px; color: var(--da3-fg3); font-weight: 600;
}
.pl-usage-card-limit i { font-size: 11px; margin-inline-end: 3px; }

.pl-usage-bar {
    height: 6px; border-radius: 999px;
    background: var(--da3-bd);
    overflow: hidden; position: relative;
}
.pl-usage-bar-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #10b981, #22c55e);
    transition: width .8s cubic-bezier(.4,0,.2,1);
}
.tone-warn   .pl-usage-bar-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.tone-danger .pl-usage-bar-fill { background: linear-gradient(90deg, #ef4444, #f87171); }
.pl-usage-bar-fill.is-unlimited {
    width: 100% !important;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    animation: pl-pulse 2.4s ease-in-out infinite;
}
@keyframes pl-pulse { 50% { opacity: .65; } }

.pl-usage-bar-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 6px;
    font-size: 11px; font-weight: 700; color: var(--da3-fg3);
}
.pl-usage-warn-text { color: #ef4444; font-size: 10.5px; font-weight: 800; }
.tone-warn .pl-usage-warn-text { color: #f59e0b; }

/* ═══════════════════════════════════════════════════════════
   ACTIVITY LOG TIMELINE
   ══════════════════════════════════════════════════════════ */
.pl-log-wrap {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    margin-bottom: 22px;
    overflow: hidden;
}
.pl-log-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--da3-line);
}
.pl-log-ico {
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(168,85,247,.12); color: #a855f7;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.pl-log-head h5 { font-size: 14px; font-weight: 800; color: var(--da3-fg1); margin: 0; flex: 1; }
.pl-log-head small { font-size: 11px; color: var(--da3-fg3); font-weight: 600; }

.pl-log-list {
    list-style: none; padding: 8px 0; margin: 0;
    max-height: 360px; overflow-y: auto;
}
.pl-log-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 20px;
    border-bottom: 1px dashed var(--da3-line);
    transition: background .15s;
}
.pl-log-item:last-child { border-bottom: 0; }
.pl-log-item:hover { background: var(--da3-hover); }
.pl-log-dot {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
}
.pl-log-body { flex: 1; min-width: 0; }
.pl-log-title { font-size: 13px; font-weight: 800; color: var(--da3-fg1); line-height: 1.4; }
.pl-log-desc  { font-size: 11.5px; color: var(--da3-fg3); margin-top: 2px; line-height: 1.5; }
.pl-log-time  { font-size: 11px; color: var(--da3-fg3); font-weight: 600; flex-shrink: 0; white-space: nowrap; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/plan/plan_payment.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   PLAN PAYMENT — premium admin checkout (da3-* tokens)
   ═══════════════════════════════════════════════════════════ */
.pp-page {
    --da3-card:    #1c1c1f;
    --da3-bd:      rgba(255,255,255,.055);
    --da3-bg2:     #111113;
    --da3-shadow:  0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-fg1:     #f4f4f5;
    --da3-fg2:     #a1a1aa;
    --da3-fg3:     #71717a;
    --da3-line:    rgba(255,255,255,.06);
    --da3-r:       12px;
    --da3-gap:     16px;
    --da3-accent:  #3b82f6;
    --da3-abg:     rgba(59,130,246,.12);
    --da3-success: #10b981;
    --da3-success-bg: rgba(16,185,129,.12);
    --da3-warn:    #f59e0b;
    --da3-warn-bg:    rgba(245,158,11,.12);
    --da3-danger:  #ef4444;
    --da3-danger-bg: rgba(239,68,68,.12);
}
body:not(.dark-mode) .pp-page {
    --da3-card:    #ffffff;
    --da3-bd:      #e4e4e7;
    --da3-bg2:     #f8fafc;
    --da3-shadow:  0 1px 3px rgba(0,0,0,.06), 0 0 0 1px #e5e7eb;
    --da3-fg1:     #0f172a;
    --da3-fg2:     #475569;
    --da3-fg3:     #94a3b8;
    --da3-line:    #f1f5f9;
    --da3-abg:     rgba(59,130,246,.08);
    --da3-success-bg: rgba(16,185,129,.10);
    --da3-warn-bg:    rgba(245,158,11,.10);
    --da3-danger-bg:  rgba(239,68,68,.08);
}

/* ─── Hero ──────────────────────────────────────────────── */
.pp-hero {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    padding: 22px 26px;
    margin-bottom: var(--da3-gap);
    display: flex; align-items: center; gap: 18px;
    flex-wrap: wrap;
}
.pp-hero-ico {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--da3-accent), #1e40af);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    box-shadow: 0 8px 22px rgba(59,130,246,.35);
    flex-shrink: 0;
}
.pp-hero-text { flex: 1; min-width: 200px; }
.pp-hero h1 {
    font-size: 19px; font-weight: 700; color: var(--da3-fg1);
    margin: 0 0 4px; letter-spacing: -.02em;
}
.pp-hero p {
    font-size: 13px; color: var(--da3-fg3); margin: 0;
}
.pp-hero-back {
    height: 38px; padding: 0 16px;
    border-radius: 10px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
    font-size: 13px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 7px;
    text-decoration: none;
    transition: all .15s;
}
.pp-hero-back:hover {
    color: var(--da3-accent);
    border-color: var(--da3-accent);
    transform: translateY(-1px);
}
html[dir="rtl"] .pp-page .fa-arrow-left,
html[dir="rtl"] .pp-page .fa-arrow-right { transform: scaleX(-1); }

/* ─── Layout grid ───────────────────────────────────────── */
.pp-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--da3-gap);
    align-items: start;
}
@media (max-width: 960px) { .pp-grid { grid-template-columns: 1fr; } }

/* ─── Cards ─────────────────────────────────────────────── */
.pp-card {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    padding: 22px 26px;
    margin-bottom: var(--da3-gap);
}
.pp-card:last-child { margin-bottom: 0; }
.pp-card h3 {
    font-size: 14px; font-weight: 700;
    color: var(--da3-fg1);
    margin: 0 0 4px;
    letter-spacing: -.01em;
}
.pp-card h3 + p {
    color: var(--da3-fg3); font-size: 12px;
    margin: 0 0 18px; line-height: 1.5;
}

/* ─── Plan summary card (left column) ───────────────────── */
.pp-plan-header {
    background: linear-gradient(135deg, color-mix(in srgb, var(--da3-accent) 90%, #1e40af) 0%, #1e40af 100%);
    color: #fff;
    padding: 18px 20px;
    border-radius: 11px;
    margin-bottom: 18px;
}
.pp-plan-header h4 {
    font-size: 14.5px; font-weight: 800;
    margin: 0 0 4px;
    letter-spacing: .02em;
    text-transform: uppercase;
    opacity: .85;
}
.pp-plan-price {
    display: flex; align-items: baseline; gap: 6px;
    margin-top: 6px;
}
.pp-plan-price b {
    font-size: 32px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.pp-plan-price span {
    font-size: 13px; opacity: .85;
}
.pp-plan-desc {
    font-size: 12.5px;
    color: var(--da3-fg3);
    margin: 0 0 18px;
    line-height: 1.6;
}
.pp-features {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: 9px;
}
.pp-features li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13px;
    color: var(--da3-fg2);
    line-height: 1.5;
}
.pp-features li i {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--da3-success-bg);
    color: var(--da3-success);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
    margin-top: 2px;
}
.pp-features li span { flex: 1; }

/* ─── Coupon card ───────────────────────────────────────── */
.pp-coupon-row {
    display: flex; gap: 8px;
    background: var(--da3-bg2);
    border: 1px dashed var(--da3-bd);
    border-radius: 10px;
    padding: 8px;
    align-items: center;
}
.pp-coupon-row input {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--da3-fg1);
    font-size: 13.5px;
    padding: 8px 10px;
    outline: none;
    min-width: 0;
}
.pp-coupon-row input::placeholder { color: var(--da3-fg3); }
.pp-btn-apply,
.pp-btn-remove {
    height: 38px; padding: 0 18px;
    border-radius: 9px;
    font-size: 12.5px; font-weight: 700;
    border: 0;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.pp-btn-apply {
    background: var(--da3-accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(59,130,246,.30);
}
.pp-btn-apply:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pp-btn-remove {
    background: var(--da3-danger-bg);
    color: var(--da3-danger);
    border: 1px solid color-mix(in srgb, var(--da3-danger) 30%, transparent);
}
.pp-btn-remove:hover { background: var(--da3-danger); color: #fff; }

/* ─── Payment totals card ───────────────────────────────── */
.pp-totals { display: flex; flex-direction: column; gap: 1px; }
.pp-totals-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed var(--da3-line);
    font-size: 13px;
}
.pp-totals-row:last-child { border-bottom: 0; }
.pp-totals-row span { color: var(--da3-fg2); }
.pp-totals-row b {
    color: var(--da3-fg1);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pp-totals-row.is-discount span,
.pp-totals-row.is-discount b { color: var(--da3-success); }
.pp-totals-grand {
    margin-top: 6px;
    padding: 12px 14px;
    background: var(--da3-bg2);
    border-radius: 10px;
    border: 1px solid var(--da3-bd);
    display: flex; justify-content: space-between; align-items: center;
}
.pp-totals-grand span {
    font-size: 13px; font-weight: 700;
    color: var(--da3-fg1);
}
.pp-totals-grand b {
    font-size: 18px; font-weight: 800;
    color: var(--da3-success);
    font-variant-numeric: tabular-nums;
}

/* ─── Payment methods ───────────────────────────────────── */
.pp-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 540px) { .pp-methods { grid-template-columns: 1fr; } }

.pp-method {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--da3-bg2);
    border: 1.5px solid var(--da3-bd);
    border-radius: 11px;
    cursor: pointer;
    transition: all .15s;
    position: relative;
}
.pp-method:hover {
    border-color: color-mix(in srgb, var(--da3-accent) 40%, transparent);
    transform: translateY(-1px);
}
.pp-method img {
    width: 32px; height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}
.pp-method-name {
    flex: 1;
    font-size: 13px; font-weight: 700;
    color: var(--da3-fg1);
    min-width: 0;
    display: flex; flex-direction: column;
    gap: 2px;
}
.pp-method-balance {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--da3-success);
    font-family: 'Inter','SF Mono', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    display: inline-flex; align-items: center; gap: 4px;
}
.pp-method-balance.is-low {
    color: var(--da3-danger);
}
.pp-method-balance i {
    font-size: 9px;
    opacity: .85;
}
.pp-method.is-insufficient {
    opacity: .55;
    cursor: not-allowed;
}
.pp-method.is-insufficient:hover {
    transform: none;
    border-color: var(--da3-bd);
}
.pp-method input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--da3-bd);
    background: var(--da3-card);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color .15s;
}
.pp-method input[type="radio"]:checked {
    border-color: var(--da3-accent);
}
.pp-method input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--da3-accent);
}
.pp-method:has(input:checked) {
    border-color: var(--da3-accent);
    background: var(--da3-abg);
    box-shadow: 0 0 0 3px var(--da3-abg);
}

/* ─── Action row ────────────────────────────────────────── */
.pp-actions {
    display: flex; justify-content: flex-end; gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.pp-btn,
.pp-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 24px;
    border-radius: 11px;
    font-size: 13px; font-weight: 700;
    border: 1px solid var(--da3-bd);
    background: var(--da3-card);
    color: var(--da3-fg1);
    text-decoration: none;
    cursor: pointer;
    transition: all .15s;
}
.pp-btn:hover {
    border-color: var(--da3-danger);
    color: var(--da3-danger);
}
.pp-btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(59,130,246,.35);
}
.pp-btn-primary:hover {
    color: #fff;
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.pp-btn-primary:disabled,
.pp-btn-primary.btn-checkout-disabled {
    background: var(--da3-bg2);
    color: var(--da3-fg3);
    box-shadow: none;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

/* ─── Bootstrap modal restyle (subscription confirm dialogs) ─── */
.pp-page-modal .modal-content {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 14px;
    color: var(--da3-fg1);
}
.pp-page-modal .modal-header,
.pp-page-modal .modal-footer {
    border-color: var(--da3-line);
}
.pp-page-modal .modal-title {
    font-size: 14px; font-weight: 700;
    color: var(--da3-fg1);
}
.pp-page-modal .btn-close { filter: invert(.85); }
body:not(.dark-mode) .pp-page-modal .btn-close { filter: none; }
.pp-page-modal .form-control {
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
    border-radius: 9px;
    padding: 10px 13px;
}
.pp-page-modal .form-control:focus {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px var(--da3-abg);
}
.pp-page-modal label {
    color: var(--da3-fg1); font-size: 12.5px; font-weight: 600;
}
.pp-page-modal p { color: var(--da3-fg2); font-size: 13px; margin: 6px 0; }
.pp-page-modal p span { color: var(--da3-fg1); font-weight: 700; }
.pp-page-modal hr { border-color: var(--da3-line); opacity: .6; }
.pp-page-modal .btn-outline-danger {
    border-color: var(--da3-danger);
    color: var(--da3-danger);
    background: transparent;
}
.pp-page-modal .btn-outline-danger:hover {
    background: var(--da3-danger); color: #fff;
}
.pp-page-modal .btn-primary {
    background: var(--da3-accent);
    border-color: var(--da3-accent);
}
.pp-page-modal .btn-primary:hover { filter: brightness(1.08); }

/* "Available coupons" modal — list rows */
.pp-coupon-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    border-radius: 10px;
    margin-bottom: 8px;
}
.pp-coupon-card:last-child { margin-bottom: 0; }
.pp-coupon-code {
    font-family: 'SF Mono', Menlo, monospace;
    font-weight: 800; font-size: 13.5px;
    color: var(--da3-accent);
    background: var(--da3-abg);
    padding: 6px 10px;
    border-radius: 6px;
    letter-spacing: .04em;
}
.pp-coupon-empty {
    text-align: center;
    color: var(--da3-fg3);
    font-size: 13px;
    padding: 16px;
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/plan/usage_history.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   USAGE HISTORY — full audit page (da3 tokens)
   ══════════════════════════════════════════════════════════ */
.uh {
    --uh-card:   #1c1c1f;
    --uh-bd:     rgba(255,255,255,.06);
    --uh-bg2:    #111113;
    --uh-fg1:    #f4f4f5;
    --uh-fg2:    #a1a1aa;
    --uh-fg3:    #71717a;
    --uh-line:   rgba(255,255,255,.05);
    --uh-hover:  rgba(255,255,255,.03);
    --uh-r:      14px;
    --uh-accent: #3b82f6;
    --uh-abg:    rgba(59,130,246,.12);
    max-width: 1400px; margin: 0 auto;
}
body:not(.dark-mode) .uh {
    --uh-card:   #ffffff;
    --uh-bd:     #e4e4e7;
    --uh-bg2:    #f9f9fb;
    --uh-fg1:    #09090b;
    --uh-fg2:    #52525b;
    --uh-fg3:    #a1a1aa;
    --uh-line:   #f4f4f5;
    --uh-hover:  rgba(0,0,0,.02);
}

/* ── Hero ── */
.uh-hero {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 24px;
    border-radius: 18px; border: 1px solid var(--uh-bd);
    background:
        radial-gradient(700px 180px at 0% 0%, rgba(59,130,246,.08), transparent 60%),
        radial-gradient(500px 150px at 100% 100%, rgba(168,85,247,.06), transparent 60%),
        var(--uh-bg2);
    margin-bottom: 18px;
}
.uh-hero-ico {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    box-shadow: 0 8px 20px -6px rgba(59,130,246,.5);
}
.uh-hero h1 { font-size: 19px; font-weight: 900; color: var(--uh-fg1); margin: 0 0 3px; letter-spacing: -.02em; }
.uh-hero p  { font-size: 12.5px; color: var(--uh-fg3); margin: 0; }
.uh-hero-end { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.uh-export-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 18px;
    border: 1.5px solid var(--uh-bd); border-radius: 10px;
    background: var(--uh-card); color: var(--uh-fg1);
    font-size: 12.5px; font-weight: 700; cursor: pointer;
    text-decoration: none; font-family: inherit;
    transition: all .15s;
}
.uh-export-btn:hover { border-color: var(--uh-accent); color: var(--uh-accent); background: var(--uh-abg); }

/* ═══════════════════════════════════════════════════════════
   RESOURCE USAGE CARD — current consumption vs plan limits
   ══════════════════════════════════════════════════════════ */
.uh-resource-card {
    background: var(--uh-card);
    border: 1px solid var(--uh-bd);
    border-radius: 18px;
    padding: 22px 24px;
    margin-bottom: 18px;
    box-shadow: 0 0 0 1px var(--uh-line);
    position: relative;
    overflow: hidden;
}
.uh-resource-card::before {
    content: "";
    position: absolute; top: 0; inset-inline-start: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #6366f1, #a855f7);
}
.uh-resource-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.uh-resource-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.uh-resource-head-ico {
    width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px;
    box-shadow: 0 6px 16px -4px rgba(59,130,246,.45);
}
.uh-resource-head h5 {
    font-size: 15px; font-weight: 800; color: var(--uh-fg1);
    margin: 0 0 3px; letter-spacing: -.1px;
}
.uh-resource-head p {
    font-size: 12.5px; color: var(--uh-fg3); margin: 0; font-weight: 500;
}
.uh-resource-head p strong { color: var(--uh-fg1); font-weight: 800; }
.uh-plan-pill {
    display: inline-flex; align-items: center; gap: 5px;
    margin-inline-start: 6px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--uh-abg); color: var(--uh-accent);
    border: 1px solid color-mix(in srgb, var(--uh-accent) 25%, transparent);
    font-size: 11px; font-weight: 800;
}
.uh-plan-pill i { font-size: 9px; }

/* Resource consumption table — sits underneath the chart */
.uh-resource-list {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--uh-line);
    overflow-x: auto;
}
.uh-resource-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}
.uh-resource-table thead th {
    text-align: start;
    padding: 10px 14px;
    background: var(--uh-bg2);
    color: var(--uh-fg3);
    font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--uh-bd);
    white-space: nowrap;
}
.uh-resource-table thead th:first-child { border-start-start-radius: 10px; }
.uh-resource-table thead th:last-child  { border-start-end-radius: 10px; text-align: center; }
.uh-resource-table .uh-th-num { text-align: center; width: 110px; }
.uh-resource-table .uh-th-bar { min-width: 200px; }
.uh-resource-table .uh-th-status { width: 150px; text-align: center; }

.uh-resource-table tbody tr {
    transition: background .15s;
}
.uh-resource-table tbody tr:hover { background: var(--uh-hover); }
.uh-resource-table tbody td {
    padding: 14px;
    border-bottom: 1px dashed var(--uh-line);
    vertical-align: middle;
}
.uh-resource-table tbody tr:last-child td { border-bottom: 0; }

/* Resource cell — icon + label */
.uh-td-name {
    display: flex; align-items: center; gap: 11px;
    min-width: 160px;
}
.uh-td-ico {
    width: 36px; height: 36px; border-radius: 10px;
    background: color-mix(in srgb, var(--ico) 12%, transparent);
    color: var(--ico);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.uh-td-label {
    font-size: 13.5px; font-weight: 800; color: var(--uh-fg1);
}

/* Number cells */
.uh-td-num {
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.uh-td-num strong {
    font-size: 17px; font-weight: 900; color: var(--uh-fg1);
}
.uh-td-unl {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 800; color: #a855f7;
}
.uh-td-unl i { font-size: 10px; }
.uh-dash { color: var(--uh-fg3); font-weight: 700; }

/* Progress bar inside the row */
.uh-td-bar-wrap {
    display: flex; align-items: center; gap: 10px;
    min-width: 200px;
}
.uh-td-bar-track {
    flex: 1; height: 8px; border-radius: 999px;
    background: var(--uh-bd);
    overflow: hidden;
}
.uh-td-bar-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #10b981, #22c55e);
    transition: width .9s cubic-bezier(.4,0,.2,1);
}
.tone-warn   .uh-td-bar-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.tone-danger .uh-td-bar-fill { background: linear-gradient(90deg, #ef4444, #f87171); }
.uh-td-bar-fill.is-unlimited {
    background: linear-gradient(90deg, #6366f1, #a855f7);
    animation: uh-pulse 2.4s ease-in-out infinite;
}
@keyframes uh-pulse { 50% { opacity: .65; } }
.uh-td-bar-pct {
    font-size: 11.5px; font-weight: 800;
    color: var(--uh-fg2);
    font-variant-numeric: tabular-nums;
    min-width: 38px; text-align: end;
}

/* Status badge column */
.uh-td-status { text-align: center; }
.uh-status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px; font-weight: 800;
}
.uh-status-badge i { font-size: 10px; }
.uh-status-badge.ok      { background: rgba(16,185,129,.12); color: #10b981; }
.uh-status-badge.warn    { background: rgba(245,158,11,.12); color: #f59e0b; }
.uh-status-badge.danger  { background: rgba(239,68,68,.12);  color: #ef4444; }
.uh-status-badge.reached {
    background: rgba(220,38,38,.18);
    color: #fca5a5;
    border: 1px solid rgba(220,38,38,.55);
}
body:not(.dark-mode) .uh-status-badge.reached {
    background: #ef4444;
    color: #fff;
    border-color: #b91c1c;
}
.uh-status-badge.unlim   { background: rgba(168,85,247,.12); color: #a855f7; }

/* Row tone — subtle left accent */
.uh-resource-table tbody tr.tone-danger  { background: rgba(239,68,68,.04); }
.uh-resource-table tbody tr.tone-reached { background: rgba(239,68,68,.08); }
.uh-resource-table tbody tr.tone-warn    { background: rgba(245,158,11,.04); }
.tone-reached .uh-td-bar-fill { background: linear-gradient(90deg, #dc2626, #ef4444); }

/* Mobile: stack progress + status below numbers */
@media (max-width: 720px) {
    .uh-resource-table thead { display: none; }
    .uh-resource-table tbody tr {
        display: block; padding: 10px;
        border: 1px solid var(--uh-bd); border-radius: 10px;
        margin-bottom: 8px;
    }
    .uh-resource-table tbody td {
        display: flex; justify-content: space-between; align-items: center;
        padding: 6px 4px; border: 0;
    }
    .uh-resource-table tbody td.uh-td-bar { display: block; padding-top: 8px; }
    .uh-resource-table tbody td.uh-td-name { padding-bottom: 8px; }
}

/* Consumption chart inside the resource card */
.uh-consumption-chart {
    padding-top: 16px;
    border-top: 1px solid var(--uh-line);
}
.uh-consumption-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.uh-consumption-head h6 {
    font-size: 13px; font-weight: 800; color: var(--uh-fg1); margin: 0;
}
.uh-consumption-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.uh-legend {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--uh-fg2); font-weight: 700;
}
.uh-legend-dot { width: 9px; height: 9px; border-radius: 50%; }

/* ── Stats cards ── */
.uh-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.uh-stat {
    background: var(--uh-card);
    border: 1px solid var(--uh-bd);
    border-radius: var(--uh-r);
    padding: 16px 18px;
    transition: border-color .2s;
}
.uh-stat:hover { border-color: color-mix(in srgb, var(--uh-accent) 40%, var(--uh-bd)); }
.uh-stat-head {
    display: flex; align-items: center; gap: 9px; margin-bottom: 10px;
}
.uh-stat-ico {
    width: 32px; height: 32px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
.uh-stat-label {
    font-size: 11px; font-weight: 800; color: var(--uh-fg3);
    text-transform: uppercase; letter-spacing: .05em;
}
.uh-stat-value {
    font-size: 26px; font-weight: 900; color: var(--uh-fg1);
    letter-spacing: -.6px; font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* ── Layout: main + side ── */
.uh-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 1024px) {
    .uh-layout { grid-template-columns: 1fr; }
}

/* ── Card base ── */
.uh-card {
    background: var(--uh-card);
    border: 1px solid var(--uh-bd);
    border-radius: var(--uh-r);
    overflow: hidden;
}
.uh-card-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--uh-line);
}
.uh-card-head-ico {
    width: 32px; height: 32px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.uh-card-head h4 { font-size: 14px; font-weight: 800; color: var(--uh-fg1); margin: 0; flex: 1; }
.uh-card-head small { font-size: 11px; color: var(--uh-fg3); font-weight: 600; }

/* ── Filter bar ── */
.uh-filters {
    padding: 14px 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    border-bottom: 1px solid var(--uh-line);
    align-items: end;
}
.uh-field { display: flex; flex-direction: column; gap: 4px; }
.uh-field label {
    font-size: 10.5px; font-weight: 800; color: var(--uh-fg3);
    text-transform: uppercase; letter-spacing: .04em;
}
.uh-input, .uh-select {
    height: 38px; padding: 0 12px;
    background: var(--uh-bg2);
    border: 1.5px solid var(--uh-bd);
    border-radius: 9px; color: var(--uh-fg1);
    font-size: 12.5px; font-weight: 600; outline: none;
    transition: border-color .15s; font-family: inherit;
}
.uh-input:focus, .uh-select:focus {
    border-color: var(--uh-accent);
    box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.uh-filter-btns { display: flex; gap: 6px; align-items: stretch; }
.uh-btn-apply {
    flex: 1; height: 38px; padding: 0 16px;
    border: 0; border-radius: 9px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff; font-size: 12.5px; font-weight: 800;
    cursor: pointer; font-family: inherit;
    box-shadow: 0 4px 12px -4px rgba(59,130,246,.4);
    transition: filter .15s, transform .15s;
}
.uh-btn-apply:hover { filter: brightness(1.08); transform: translateY(-1px); }
.uh-btn-clear {
    height: 38px; padding: 0 12px;
    border: 1.5px solid var(--uh-bd); border-radius: 9px;
    background: var(--uh-bg2); color: var(--uh-fg2);
    font-size: 12.5px; font-weight: 700;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
    transition: all .15s;
}
.uh-btn-clear:hover { border-color: #ef4444; color: #ef4444; }

/* ── Table ── */
.uh-table-wrap { overflow-x: auto; }
.uh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.uh-table thead th {
    text-align: start;
    padding: 12px 18px;
    background: var(--uh-bg2);
    color: var(--uh-fg3);
    font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--uh-line);
    white-space: nowrap;
}
.uh-table tbody td {
    padding: 14px 18px;
    border-bottom: 1px dashed var(--uh-line);
    color: var(--uh-fg1);
    vertical-align: middle;
}
.uh-table tbody tr:last-child td { border-bottom: 0; }
.uh-table tbody tr:hover { background: var(--uh-hover); }

.uh-event-cell {
    display: flex; align-items: center; gap: 10px; min-width: 160px;
}
.uh-event-ico {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
}
.uh-event-label {
    font-size: 12.5px; font-weight: 800; color: var(--uh-fg1);
}
.uh-title-cell { font-weight: 700; color: var(--uh-fg1); }
.uh-desc-cell  { color: var(--uh-fg2); font-weight: 500; font-size: 12px; max-width: 380px; }
.uh-resource-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px;
    background: var(--uh-bg2);
    border: 1px solid var(--uh-bd);
    font-size: 10.5px; font-weight: 800;
    color: var(--uh-fg2);
    text-transform: uppercase; letter-spacing: .03em;
}
.uh-usage-cell {
    font-variant-numeric: tabular-nums;
    color: var(--uh-fg2); font-weight: 700; font-size: 12px;
}
.uh-time-cell {
    font-size: 11.5px; color: var(--uh-fg3); font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Empty state ── */
.uh-empty {
    padding: 60px 20px; text-align: center; color: var(--uh-fg3);
}
.uh-empty i { font-size: 36px; opacity: .25; display: block; margin-bottom: 12px; }
.uh-empty p { font-size: 13px; font-weight: 700; margin: 0; }

/* ── Pagination ── */
.uh-pagination {
    padding: 14px 18px;
    border-top: 1px solid var(--uh-line);
    display: flex; justify-content: center;
}
.uh-pagination .pagination {
    margin: 0; gap: 4px; display: inline-flex; list-style: none; padding: 0;
}
.uh-pagination .page-link,
.uh-pagination .page-item span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 10px;
    background: var(--uh-bg2);
    border: 1px solid var(--uh-bd);
    border-radius: 8px;
    color: var(--uh-fg2);
    font-size: 12px; font-weight: 700;
    text-decoration: none;
    transition: all .15s;
}
.uh-pagination .page-link:hover { background: var(--uh-abg); color: var(--uh-accent); border-color: var(--uh-accent); }
.uh-pagination .page-item.active .page-link {
    background: var(--uh-accent); color: #fff; border-color: var(--uh-accent);
}
.uh-pagination .page-item.disabled .page-link { opacity: .4; cursor: not-allowed; }

/* ── Sidebar: chart + breakdown ── */
.uh-chart-body { padding: 16px 18px; }
.uh-chart-canvas { height: 200px; }
.uh-breakdown { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.uh-bd-row { display: flex; align-items: center; gap: 10px; }
.uh-bd-ico {
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; flex-shrink: 0;
}
.uh-bd-body { flex: 1; min-width: 0; }
.uh-bd-label { font-size: 12px; font-weight: 800; color: var(--uh-fg1); margin-bottom: 4px; }
.uh-bd-bar { height: 4px; border-radius: 999px; background: var(--uh-bd); overflow: hidden; }
.uh-bd-bar-fill { height: 100%; border-radius: 999px; transition: width .8s; }
.uh-bd-count {
    font-size: 12px; font-weight: 900; color: var(--uh-fg1);
    font-variant-numeric: tabular-nums; min-width: 30px; text-align: end;
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/plan/_form.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PLAN FORM — Dashboard-matched (da3 design system, purple admin)
   ═══════════════════════════════════════════════════════════════ */
.da3.da3-admin { --role-accent: #7c3aed; --role-accent-soft: rgba(124,58,237,.1); }
.da3-admin .da3-btn-primary { box-shadow: 0 2px 8px rgba(124,58,237,.32); }

.da3-role-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    background: rgba(124,58,237,.12); color: #a78bfa;
}
.da3-role-badge .da3-live-dot { background: #10b981; }

/* ── Section card (each form section sits in one) ── */
.pln-section {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    padding: 22px 24px;
    margin-bottom: var(--da3-gap);
}
.pln-section-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--da3-line);
}
.pln-section-ico {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
    background: var(--da3-abg);
    color: var(--da3-accent);
}
.pln-section-title {
    margin: 0; font-size: 15px; font-weight: 800;
    color: var(--da3-fg1);
    letter-spacing: -.01em;
}
.pln-section-sub {
    margin: 2px 0 0; font-size: 12px;
    color: var(--da3-fg3); font-weight: 500;
}

/* ── Grid layout for fields ── */
.pln-grid    { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.pln-col-12  { grid-column: span 12; }
.pln-col-6   { grid-column: span 6; }
.pln-col-4   { grid-column: span 4; }
.pln-col-3   { grid-column: span 3; }
@media (max-width: 900px) {
    .pln-col-6, .pln-col-4, .pln-col-3 { grid-column: span 12; }
}

/* ── Field styling ── */
.pln-field { display: flex; flex-direction: column; gap: 6px; }
/* `.dn` is toggled by plan.js to show/hide the duration/limit pairs.
   Without this override our `display:flex` wins and the field stays visible. */
.pln-field.dn { display: none !important; }
.pln-field label {
    font-size: 12.5px; font-weight: 700;
    color: var(--da3-fg1);
    display: inline-flex; align-items: center; gap: 5px;
}
.pln-field label .req { color: #ef4444; font-size: 13px; }
.pln-field input[type="text"],
.pln-field input[type="number"],
.pln-field input[type="email"],
.pln-field textarea,
.pln-field select {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    background: var(--da3-bg2);
    border: 1.5px solid var(--da3-bd);
    border-radius: 9px;
    color: var(--da3-fg1);
    font-size: 13.5px; font-weight: 600; font-family: inherit;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.pln-field textarea { height: auto; min-height: 88px; padding: 12px 14px; resize: vertical; }
.pln-field input::placeholder, .pln-field textarea::placeholder { color: var(--da3-fg3); font-weight: 500; }
.pln-field input:focus, .pln-field textarea:focus, .pln-field select:focus {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
.pln-field-hint { font-size: 11px; color: var(--da3-fg3); margin-top: -2px; }
.pln-field-err  { font-size: 11.5px; color: #ef4444; margin-top: 2px; font-weight: 600; }

/* ── Toggle card (feature switch with icon + label) ── */
.pln-toggles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.pln-toggle {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    background: var(--da3-bg2);
    border: 1.5px solid var(--da3-bd);
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s;
    position: relative;
}
.pln-toggle:hover { border-color: var(--da3-accent); background: var(--da3-abg); }
.pln-toggle input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 36px; height: 20px;
    background: var(--da3-line);
    border-radius: 999px;
    position: relative;
    cursor: pointer; flex-shrink: 0;
    transition: background .15s;
}
.pln-toggle input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px; inset-inline-start: 2px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s, background .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.pln-toggle input[type="checkbox"]:checked {
    background: var(--cc, var(--da3-accent));
}
html[dir="rtl"] .pln-toggle input[type="checkbox"]:checked::after { transform: translateX(-16px); }
html[dir="ltr"] .pln-toggle input[type="checkbox"]:checked::after { transform: translateX(16px); }

.pln-toggle-ico {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: var(--cc-bg, rgba(124,58,237,.10));
    color: var(--cc, #7c3aed);
    font-size: 13px;
}
.pln-toggle-lbl {
    flex: 1; min-width: 0;
    font-size: 13px; font-weight: 700;
    color: var(--da3-fg1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Featured "popular" toggle is wider + gold accent */
.pln-popular {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(124,58,237,.06));
    border-color: rgba(245,158,11,.32);
}
.pln-popular .pln-toggle-ico { background: rgba(245,158,11,.14); color: #f59e0b; }
.pln-popular .pln-toggle-lbl { color: var(--da3-fg1); font-size: 13.5px; font-weight: 800; }
.pln-popular input[type="checkbox"]:checked { background: #f59e0b; }
.pln-popular-desc {
    font-size: 11.5px; color: var(--da3-fg3); margin-top: 1px; font-weight: 500;
    display: block;
}

/* ── Addon card grid (plan_addons) ── */
.pln-addons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.pln-addon {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: var(--da3-bg2);
    border: 1.5px solid var(--da3-bd);
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s;
}
.pln-addon:hover { border-color: var(--da3-accent); background: var(--da3-abg); }
.pln-addon input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px;
    border: 2px solid var(--da3-bd);
    border-radius: 5px;
    cursor: pointer; flex-shrink: 0;
    transition: all .15s;
    position: relative;
}
.pln-addon input[type="checkbox"]:checked {
    background: var(--da3-accent);
    border-color: var(--da3-accent);
}
.pln-addon input[type="checkbox"]:checked::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #fff;
    font-size: 10px;
    position: absolute;
    top: 1px; left: 2px;
}
.pln-addon img {
    width: 30px; height: 30px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--da3-line);
}
.pln-addon-info { flex: 1; min-width: 0; }
.pln-addon-name {
    font-size: 13px; font-weight: 700;
    color: var(--da3-fg1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pln-addon-price {
    font-size: 11px; font-weight: 700;
    color: #f59e0b;
    background: rgba(245,158,11,.12);
    padding: 2px 8px;
    border-radius: 999px;
    margin-inline-start: auto;
    flex-shrink: 0;
}

/* ── Section-head count badge + bulk actions ── */
.pln-count-badge {
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 800;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    margin-inline-start: 8px;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
.pln-bulk-actions {
    display: flex; gap: 6px;
    flex-shrink: 0;
}
.pln-bulk-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 11px;
    border-radius: 8px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-bg2);
    color: var(--da3-fg2);
    font-size: 11.5px; font-weight: 700; font-family: inherit;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.pln-bulk-btn:hover {
    border-color: var(--da3-accent);
    color: var(--da3-accent);
    background: var(--da3-abg);
}
.pln-bulk-btn i { font-size: 10px; }

/* Addon fallback icon when no image */
.pln-addon-fallback {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: rgba(124,58,237,.10);
    color: var(--da3-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.pln-addon-slug {
    font-size: 10.5px;
    color: var(--da3-fg3);
    font-family: 'SF Mono', Menlo, monospace;
    margin-top: 1px;
}

/* ── Theme tools: search + category chips ── */
.pln-theme-tools {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--da3-line);
}
.pln-search-wrap {
    position: relative;
    flex: 1; min-width: 200px;
}
.pln-search-wrap i {
    position: absolute; top: 50%; transform: translateY(-50%);
    color: var(--da3-fg3); font-size: 11px; pointer-events: none;
}
html[dir="rtl"] .pln-search-wrap i { right: 12px; }
html[dir="ltr"] .pln-search-wrap i { left: 12px; }
.pln-search-wrap input {
    width: 100%;
    height: 38px;
    padding: 0 36px;
    background: var(--da3-bg2);
    border: 1.5px solid var(--da3-bd);
    border-radius: 9px;
    color: var(--da3-fg1);
    font-size: 13px; font-weight: 600; font-family: inherit;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.pln-search-wrap input:focus {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
.pln-cat-chips {
    display: flex; gap: 6px; flex-wrap: wrap;
}
.pln-cat-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-bg2);
    color: var(--da3-fg2);
    font-size: 11.5px; font-weight: 700; font-family: inherit;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.pln-cat-chip:hover { border-color: var(--da3-accent); color: var(--da3-accent); }
.pln-cat-chip.is-active {
    background: var(--da3-accent);
    border-color: var(--da3-accent);
    color: #fff;
    box-shadow: 0 3px 10px rgba(124,58,237,.28);
}
.pln-cat-chip span {
    font-size: 10.5px;
    font-weight: 800;
    background: rgba(255,255,255,.22);
    padding: 1px 7px;
    border-radius: 999px;
}
.pln-cat-chip:not(.is-active) span {
    background: var(--da3-line);
    color: var(--da3-fg3);
}

/* ── Theme picker grid ── */
.pln-themes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    list-style: none;
    padding: 0; margin: 0;
    max-height: 540px;
    overflow-y: auto;
    padding-inline-end: 6px;
}
.pln-themes::-webkit-scrollbar { width: 8px; }
.pln-themes::-webkit-scrollbar-track { background: var(--da3-bg2); border-radius: 4px; }
.pln-themes::-webkit-scrollbar-thumb { background: var(--da3-bd); border-radius: 4px; }
.pln-themes::-webkit-scrollbar-thumb:hover { background: var(--da3-fg3); }
.pln-themes li { position: relative; }
.pln-theme-item.is-hidden { display: none; }
.pln-themes input { display: none; }
.pln-themes label {
    display: block;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    border: 2.5px solid var(--da3-bd);
    transition: all .15s;
    background: var(--da3-bg2);
    position: relative;
}
.pln-themes label::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 8px; inset-inline-end: 8px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--da3-accent);
    color: #fff;
    font-size: 11px;
    display: none;
    align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(124,58,237,.4);
    z-index: 2;
}
.pln-themes label img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    display: block;
    background: var(--da3-line);
}
.pln-theme-noimg img { display: none; }
.pln-theme-noimg::before {
    content: '\f03e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 16 / 11;
    background: var(--da3-bg2);
    color: var(--da3-fg3);
    font-size: 26px;
    opacity: .35;
}
.pln-theme-name {
    display: block;
    padding: 8px 10px 9px;
    font-size: 11.5px; font-weight: 700;
    color: var(--da3-fg1);
    background: var(--da3-card);
    border-top: 1px solid var(--da3-line);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pln-theme-flag {
    position: absolute;
    top: 8px; inset-inline-start: 8px;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.pln-theme-flag-featured { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.pln-theme-flag-new      { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }

.pln-themes input:checked + label {
    border-color: var(--da3-accent);
    box-shadow: 0 6px 18px rgba(124,58,237,.22);
    transform: translateY(-2px);
}
.pln-themes input:checked + label::after { display: flex; }

/* Empty state (when filter returns nothing) */
.pln-themes-empty {
    grid-column: 1 / -1;
    padding: 30px 16px;
    text-align: center;
    color: var(--da3-fg3);
    font-size: 13px;
    background: var(--da3-bg2);
    border: 1.5px dashed var(--da3-bd);
    border-radius: 10px;
}
.pln-themes-empty i { font-size: 22px; opacity: .4; display: block; margin-bottom: 6px; }

/* ═══════════════════════════════════════════════════════════
   SMART LAYOUT — 2-column on desktop (form + sticky sidebar)
   ═══════════════════════════════════════════════════════════ */
.pln-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--da3-gap);
    align-items: flex-start;
}
.pln-layout-main { min-width: 0; }

/* Sticky right-rail preview — stays in view while the form scrolls.
   Internal scroll if content exceeds viewport. */
.pln-layout-side {
    position: sticky;
    top: 76px;
    align-self: start;

    overflow-y: auto;
    overflow-x: hidden;
    padding-inline-end: 4px;
    scrollbar-width: thin;
}
.pln-layout-side::-webkit-scrollbar      { width: 6px; }
.pln-layout-side::-webkit-scrollbar-track{ background: transparent; }
.pln-layout-side::-webkit-scrollbar-thumb{ background: var(--da3-bd); border-radius: 3px; }
.pln-layout-side::-webkit-scrollbar-thumb:hover { background: var(--da3-fg3); }
@media (max-width: 1100px) {
    .pln-layout { grid-template-columns: 1fr; }
    .pln-layout-side { position: static; max-height: none; overflow: visible; }
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM PREVIEW CARD — SaaS-grade live preview
   ═══════════════════════════════════════════════════════════ */

/* ── Rail header (above the card) ── */
.pv-rail-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
    padding: 0 2px;
}
.pv-rail-head-ico {
    width: 30px; height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--da3-accent), #2563eb);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    box-shadow: 0 4px 10px rgba(124,58,237,.32);
    flex-shrink: 0;
}
.pv-rail-head-text { flex: 1; min-width: 0; }
.pv-rail-head-text h3 {
    margin: 0; font-size: 13px; font-weight: 800;
    color: var(--da3-fg1);
    letter-spacing: -.01em;
}
.pv-rail-head-text p {
    margin: 1px 0 0; font-size: 10.5px;
    color: var(--da3-fg3); font-weight: 500;
}
.pv-rail-live {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(16,185,129,.10);
    color: #10b981;
    font-size: 10px; font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.pv-rail-live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #10b981;
    animation: pvPulse 1.8s ease-in-out infinite;
}
@keyframes pvPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(1.4)} }

/* ── The preview card itself ── */
.pln-preview {
    position: relative;
    background: var(--da3-card);
    border: 1.5px solid var(--da3-bd);
    border-radius: 18px;
    box-shadow: 0 14px 36px rgba(0,0,0,.08), 0 0 0 1px var(--da3-bd);
    padding: 22px 20px 20px;
    overflow: visible;
    transition: box-shadow .25s ease, transform .15s;
}
.pln-preview.is-popular {
    border-color: rgba(124,58,237,.45);
    background:
        linear-gradient(180deg, rgba(124,58,237,.06), transparent 35%),
        var(--da3-card);
    box-shadow: 0 14px 36px rgba(124,58,237,.18), 0 0 0 1px rgba(124,58,237,.32);
}
.pln-preview.is-popular::before {
    content: '';
    position: absolute; top: 0; left: 20%; right: 20%; height: 3px;
    background: linear-gradient(90deg, transparent, #f59e0b 30%, var(--da3-accent) 70%, transparent);
    border-radius: 999px;
}

/* "Most popular" badge floats above the card edge */
.pln-pop-tag {
    display: none;
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #f59e0b 0%, var(--da3-accent) 100%);
    color: #fff;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: .5px; text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(245,158,11,.42), 0 2px 4px rgba(0,0,0,.08);
    z-index: 3;
    white-space: nowrap;
}
.pln-preview.is-popular .pln-pop-tag { display: inline-flex; align-items: center; gap: 5px; }

/* ── HERO block: tier chip + name + description ── */
.pv-hero { margin-bottom: 18px; }
.pv-tier {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: .4px; text-transform: uppercase;
    background: var(--cc-bg, rgba(100,116,139,.10));
    color: var(--cc, #64748b);
    margin-bottom: 10px;
}
.pv-tier i { font-size: 9px; opacity: .85; }
.pv-tier[data-tier="free"]       { --cc:#64748b; --cc-bg:rgba(100,116,139,.10); }
.pv-tier[data-tier="starter"]    { --cc:#10b981; --cc-bg:rgba(16,185,129,.10); }
.pv-tier[data-tier="growth"]     { --cc:#7c3aed; --cc-bg:rgba(124,58,237,.10); }
.pv-tier[data-tier="enterprise"] { --cc:#f59e0b; --cc-bg:rgba(245,158,11,.12); }

.pln-preview-name {
    font-size: 22px; font-weight: 900;
    color: var(--da3-fg1);
    margin: 0 0 6px;
    line-height: 1.15;
    letter-spacing: -.02em;
}
.pln-preview-name:empty::before {
    content: attr(data-empty);
    color: var(--da3-fg3); font-style: italic; font-weight: 600;
}
.pln-preview-desc {
    font-size: 12.5px; color: var(--da3-fg2);
    margin: 0;
    line-height: 1.5;
    min-height: 34px;
}
.pln-preview-desc:empty::before {
    content: attr(data-empty);
    color: var(--da3-fg3); font-style: italic;
}

/* ── DUAL PRICING: monthly card + yearly card side-by-side ── */
.pv-pricing {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.pv-pricing:has(.pv-price-block.is-yearly:not([style*="display:none"])) {
    grid-template-columns: 1fr 1fr;
}
.pv-price-block {
    background: var(--da3-bg2);
    border: 1.5px solid var(--da3-bd);
    border-radius: 12px;
    padding: 12px 14px;
    position: relative;
    transition: all .15s ease;
}
.pv-price-block.is-yearly {
    background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(37,99,235,.05));
    border-color: rgba(124,58,237,.28);
}
.pv-price-cycle {
    display: block;
    font-size: 10px; font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--da3-fg3);
    margin-bottom: 4px;
}
.pv-price-block.is-yearly .pv-price-cycle { color: var(--da3-accent); }
.pv-price-amount {
    display: flex; align-items: baseline; gap: 2px;
}
.pv-price-cur {
    font-size: 14px; font-weight: 700;
    color: var(--da3-fg2);
}
.pln-preview-price-val {
    font-size: 28px; font-weight: 900;
    color: var(--da3-fg1);
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pv-price-suffix {
    font-size: 11.5px;
    color: var(--da3-fg3);
    font-weight: 600;
    margin-inline-start: 4px;
}
.pv-price-billed {
    display: block;
    font-size: 10.5px;
    color: var(--da3-fg3);
    margin-top: 4px;
    font-weight: 500;
}

/* Yearly savings callout (sits between price + meta) */
.pv-savings {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(16,185,129,.04));
    border: 1px solid rgba(16,185,129,.28);
    border-radius: 8px;
    color: #10b981;
    font-size: 11.5px; font-weight: 700;
    width: fit-content;
}
.pv-savings i { font-size: 11px; }
body.dark-mode .pv-savings { color: #34d399; }

/* ── BLOCK: a card section (Includes / Addons / Themes) ── */
.pv-block {
    padding: 14px 0;
    border-top: 1px solid var(--da3-line);
}
.pv-block-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
    gap: 8px;
}
.pv-block-title {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 800;
    color: var(--da3-fg1);
    letter-spacing: -.01em;
}
.pv-block-title i {
    color: var(--da3-accent);
    font-size: 11px;
}
.pv-block-counter {
    display: inline-flex; align-items: baseline; gap: 1px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--da3-abg);
    color: var(--da3-accent);
    font-size: 10.5px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.pv-block-counter-total {
    color: var(--da3-fg3);
    font-weight: 600;
    margin-inline-start: 2px;
    opacity: .8;
}

/* Features progress bar */
.pv-progress {
    height: 5px;
    background: var(--da3-line);
    border-radius: 999px;
    overflow: hidden;
    margin: 4px 0 12px;
}
.pv-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, var(--da3-accent) 100%);
    border-radius: 999px;
    transition: width .35s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 10px rgba(124,58,237,.4);
}

/* Features list — shows ALL enabled features, scrollable if too tall */
.pln-preview-features {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 2px;
    max-height: 320px; overflow-y: auto;
    scrollbar-width: thin;
}
.pln-preview-features::-webkit-scrollbar { width: 4px; }
.pln-preview-features::-webkit-scrollbar-thumb { background: var(--da3-bd); border-radius: 2px; }
.pln-preview-feat {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--da3-fg1);
    padding: 5px 0;
    font-weight: 500;
}
.pln-preview-feat i {
    color: #10b981; font-size: 9px;
    background: rgba(16,185,129,.14);
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pln-preview-feat span {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pln-preview-feat.is-more {
    color: var(--da3-fg3);
    font-style: italic;
    font-weight: 600;
}
.pln-preview-feat.is-more i {
    background: var(--da3-line);
    color: var(--da3-fg3);
}

/* Legacy `.pv-col` (kept for compatibility) */
.pv-col { display: block; min-width: 0; }
.pv-col-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--da3-fg3);
    margin-bottom: 8px;
}
.pv-col-head i { font-size: 10px; opacity: .85; }
.pv-col-head .pv-section-cnt {
    margin-inline-start: auto;
    background: var(--da3-abg);
    color: var(--da3-accent);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px; font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.pln-preview-empty {
    text-align: center;
    color: var(--da3-fg3);
    font-size: 11.5px;
    padding: 14px 8px;
    font-style: italic;
}

/* ── Meta chips row (duration · tax) — tier chip moved into hero ── */
.pv-meta {
    display: flex; flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}
.pv-meta-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    background: var(--da3-bg2);
    color: var(--da3-fg2);
    border: 1px solid var(--da3-bd);
}
.pv-meta-chip i { font-size: 9px; opacity: .85; }
#pvDurChip { background: rgba(14,165,233,.10); color: #0ea5e9; border-color: rgba(14,165,233,.25); }
#pvTaxChip { background: rgba(236,72,153,.10); color: #ec4899; border-color: rgba(236,72,153,.25); }

/* (Legacy `.pv-section` styles kept as fallback — sections inside the
   horizontal banner now use `.pv-col` + `.pv-col-head` instead.) */
.pv-section { margin: 0; padding: 0; border: 0; }
.pv-section-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 800;
    color: var(--da3-fg3);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}
.pv-section-head i { color: var(--da3-accent); font-size: 10px; opacity: .85; }
.pv-section-cnt {
    margin-inline-start: auto;
    display: inline-flex; align-items: center;
    background: var(--da3-abg);
    color: var(--da3-accent);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    letter-spacing: 0;
}

/* Addon list inside the preview */
.pv-addon-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 2px;
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.pv-addon-list::-webkit-scrollbar { width: 4px; }
.pv-addon-list::-webkit-scrollbar-thumb { background: var(--da3-bd); border-radius: 2px; }
.pv-addon-row {
    display: flex; align-items: center; gap: 7px;
    font-size: 11.5px;
    color: var(--da3-fg2);
    padding: 4px 0;
}
.pv-addon-row .pv-addon-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--da3-accent);
    flex-shrink: 0;
}
.pv-addon-row .pv-addon-name {
    flex: 1; min-width: 0;
    color: var(--da3-fg1);
    font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-addon-row .pv-addon-cost {
    color: #f59e0b;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.pv-addon-row .pv-addon-cost.is-included {
    color: #10b981;
    font-weight: 700;
}

/* Themes block — list of selected themes with name + price (top N) */
.pv-theme-list {
    list-style: none; padding: 0; margin: 0 0 6px;
    display: flex; flex-direction: column; gap: 2px;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.pv-theme-list::-webkit-scrollbar { width: 4px; }
.pv-theme-list::-webkit-scrollbar-thumb { background: var(--da3-bd); border-radius: 2px; }
.pv-theme-row {
    display: flex; align-items: center; gap: 7px;
    font-size: 11.5px;
    padding: 4px 0;
    color: var(--da3-fg2);
}
.pv-theme-row .pv-theme-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #7c3aed;
    flex-shrink: 0;
}
.pv-theme-row .pv-theme-name {
    flex: 1; min-width: 0;
    color: var(--da3-fg1);
    font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-theme-row .pv-theme-cost {
    color: #f59e0b;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.pv-theme-row .pv-theme-cost.is-free {
    color: #10b981;
    font-weight: 700;
}
.pv-themes-text {
    font-size: 11px;
    color: var(--da3-fg3);
    margin: 0;
    line-height: 1.5;
    font-style: italic;
}
.pv-themes-text:empty { display: none; }

/* ── Empty state for the Themes column ── */
.pv-themes-empty-state {
    display: flex; flex-direction: column; gap: 4px;
}
.pv-themes-empty-state .pv-themes-text {
    font-size: 11.5px;
    color: var(--da3-fg3);
    margin: 0;
    line-height: 1.5;
    font-style: italic;
}



.pln-preview-tier {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    background: var(--cc-bg, rgba(124,58,237,.10));
    color: var(--cc, var(--da3-accent));
    margin-inline-start: 6px;
    vertical-align: middle;
}
.pln-preview-tier i { font-size: 8px; }

/* ── Smart hint badges (shown next to price field, scale field, etc.) ── */
.pln-hint-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--cc-bg, rgba(124,58,237,.10));
    color: var(--cc, var(--da3-accent));
    margin-top: 2px;
    width: fit-content;
    transition: opacity .2s;
}
.pln-hint-badge i { font-size: 9px; }
.pln-hint-badge[data-tier="free"]   { --cc:#64748b; --cc-bg:rgba(100,116,139,.10); }
.pln-hint-badge[data-tier="starter"]{ --cc:#10b981; --cc-bg:rgba(16,185,129,.10); }
.pln-hint-badge[data-tier="growth"] { --cc:#7c3aed; --cc-bg:rgba(124,58,237,.10); }
.pln-hint-badge[data-tier="enterprise"] { --cc:#f59e0b; --cc-bg:rgba(245,158,11,.10); }
.pln-hint-badge.is-hidden { display: none; }

/* ── Free-plan auto-hide rule ── */
.pln-hide-free { transition: opacity .2s, max-height .25s; }
body.is-free-plan .pln-hide-free {
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding-top: 0; padding-bottom: 0;
    border-width: 0;
}

/* ── Inline warning banner (is_popular conflict) ── */
.pln-warn {
    display: none;
    align-items: center; gap: 9px;
    background: rgba(245,158,11,.10);
    border: 1px solid rgba(245,158,11,.32);
    color: #b45309;
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 12px; font-weight: 600;
    margin-top: 10px;
}
.pln-warn.is-visible { display: flex; }
.pln-warn i { color: #f59e0b; font-size: 13px; flex-shrink: 0; }
body.dark-mode .pln-warn { color: #fbbf24; background: rgba(245,158,11,.12); }

/* ── Auto-suggested yearly indicator (info chip next to yearly input) ── */
.pln-yearly-save {
    display: none;
    align-items: center; gap: 4px;
    color: #10b981;
    font-size: 11px; font-weight: 700;
    margin-top: 2px;
}
.pln-yearly-save.is-visible { display: inline-flex; }

/* ── Disabled save button styling ── */
.pln-btn-primary:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
    filter: grayscale(.3);
}

/* ── Sticky action bar ── */
.pln-actions {
    position: sticky;
    bottom: 0;
    z-index: 30;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: 0 -6px 18px rgba(0,0,0,.06);
    padding: 14px 22px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin-top: var(--da3-gap);
}
.pln-actions-hint {
    font-size: 11.5px; color: var(--da3-fg3);
    display: inline-flex; align-items: center; gap: 6px;
}
.pln-actions-hint i { color: #10b981; }
.pln-actions-buttons { display: flex; gap: 8px; flex-shrink: 0; }
.pln-btn {
    height: 40px; padding: 0 18px;
    border-radius: 9px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-bg2);
    color: var(--da3-fg2);
    font-size: 13px; font-weight: 700; font-family: inherit;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all .15s;
    text-decoration: none;
}
.pln-btn:hover { border-color: var(--da3-accent); color: var(--da3-accent); }
.pln-btn-primary {
    background: var(--da3-accent);
    border-color: var(--da3-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(124,58,237,.32);
}
.pln-btn-primary:hover { filter: brightness(1.1); color: #fff; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/product/edit_product.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   PRODUCT WIZARD — da3g Design System
   All colors via CSS variables — dark / light modes automatic.
   No hardcoded palette · no body.dark-mode overrides needed.
   ═══════════════════════════════════════════════════════════════════ */

/* PAGE */
.product-builder {
    background: transparent;
    padding: 0 0 110px;
    font-family: 'Zain', system-ui, -apple-system, "Segoe UI", sans-serif;
}
.product-builder * { box-sizing: border-box; }

/* TWO-COLUMN LAYOUT */
.builder-layout {
    display: grid;
    grid-template-columns: minmax(300px, 360px) 1fr;
    gap: 16px;
    align-items: start;
    direction: ltr;
}

/* ── HEADER ──────────────────────────────────────────────────── */
.builder-header {
    background: var(--da3g-card);
    border: 1px solid var(--da3g-bd);
    box-shadow: var(--da3g-shadow);
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.product-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--da3g-fg1);
    letter-spacing: -.01em;
    margin: 0;
    line-height: 1.2;
}
.status-badge {
    background: rgba(245,158,11,.12);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,.22);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── PREVIEW PANEL (sticky left sidebar) ─────────────────────── */
.preview-panel {
    direction: rtl;
    background: var(--da3g-card);
    border: 1px solid var(--da3g-bd);
    box-shadow: var(--da3g-shadow);
    border-radius: 12px;
    padding: 16px;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
.preview-image {
    height: 210px;
    background: var(--da3g-bg2);
    border: 1px solid var(--da3g-bd);
    border-radius: 10px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.preview-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-name-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 5px;
}
.preview-name-row h2 {
    font-size: 14px;
    font-weight: 700;
    color: var(--da3g-fg1);
    margin: 0;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}
.preview-sku {
    font-size: 10.5px;
    color: var(--da3g-fg2);
    background: var(--da3g-bg2);
    border: 1px solid var(--da3g-bd);
    padding: 2px 7px;
    border-radius: 5px;
    font-family: 'SF Mono', Consolas, monospace;
    white-space: nowrap;
    flex-shrink: 0;
}
.preview-category { font-size: 11.5px; color: var(--da3g-fg2); margin-bottom: 6px; }
.preview-pricing { margin-bottom: 6px; }
.preview-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--da3g-success, #10b981);
    letter-spacing: -.02em;
}
.preview-old-price {
    font-size: 12.5px;
    color: var(--da3g-fg3);
    text-decoration: line-through;
    margin-inline-end: 5px;
}
.preview-stock { font-size: 11px; color: var(--da3g-success, #10b981); margin-bottom: 8px; }
.preview-desc-wrapper { position: relative; font-size: 12px; line-height: 1.65; color: var(--da3g-fg2); }
.preview-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: .3s ease;
}
.preview-desc.expanded { -webkit-line-clamp: unset; overflow: visible; }
.inline-more {
    position: absolute; bottom: 0; left: 0;
    background: linear-gradient(to left, var(--da3g-card) 40%, transparent);
    padding-right: 4px;
    font-weight: 700; font-size: 11.5px;
    color: var(--da3g-accent, #3b82f6);
    cursor: pointer;
}
.toggle-desc-btn {
    border: none; background: none;
    color: var(--da3g-accent, #3b82f6);
    font-size: 11.5px; font-weight: 700;
    cursor: pointer; margin-top: 4px;
}

/* ── FORM PANEL ──────────────────────────────────────────────── */
.form-panel { direction: rtl; display: flex; flex-direction: column; }

/* ── STEPPER ─────────────────────────────────────────────────── */
.stepper {
    --st-bd:     var(--da3g-bd);
    --st-bg:     var(--da3g-bg2);
    --st-fg:     var(--da3g-fg3);
    --st-act:    var(--da3g-accent, #3b82f6);
    --st-act-bg: var(--da3g-abg, rgba(59,130,246,.10));
    --st-done:   var(--da3g-success, #10b981);
    --st-err:    var(--da3g-danger, #ef4444);
    background: var(--da3g-card);
    border: 1px solid var(--da3g-bd);
    box-shadow: var(--da3g-shadow);
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 12px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}
.stepper::before {
    content: '';
    position: absolute;
    top: 33px; left: 30px; right: 30px;
    height: 2px;
    background: var(--st-bd);
    border-radius: 10px;
    z-index: 0;
}
.stepper-progress {
    position: absolute;
    top: 33px; left: 30px;
    height: 2px; width: 0;
    background: var(--st-act);
    border-radius: 10px;
    z-index: 1;
    transition: width .35s ease;
}
.step {
    text-align: center; flex: 1; z-index: 2;
    cursor: pointer; user-select: none; transition: opacity .15s;
}
.step.is-locked { cursor: not-allowed; opacity: .6; }
.step span {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--st-bg);
    border: 2px solid var(--st-bd);
    color: var(--st-fg);
    margin: auto auto 5px;
    font-weight: 700; font-size: 12.5px;
    transition: all .2s ease;
    position: relative;
}
.step.active span {
    background: var(--st-act); border-color: var(--st-act); color: #fff;
    box-shadow: 0 0 0 3px var(--st-act-bg);
}
.step.completed span {
    background: var(--st-done); border-color: var(--st-done); color: #fff;
}
.step.completed span::before {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 12px; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--st-done); border-radius: 50%;
}
.step.has-error span {
    background: var(--st-err); border-color: var(--st-err); color: #fff;
    animation: stepShake .35s ease;
}
.step.has-error span::after {
    content: '\f12a'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 12px; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--st-err); border-radius: 50%;
}
@keyframes stepShake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}
.step p { font-size: 11px; font-weight: 600; color: var(--st-fg); margin: 0; transition: color .15s; }
.step.active p    { color: var(--st-act); }
.step.completed p { color: var(--st-done); }
.step.has-error p { color: var(--st-err); }

/* ── STEP ANIMATION ──────────────────────────────────────────── */
.step-content { animation: stepFadeIn .22s ease; }
@keyframes stepFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── STEP HEADER ─────────────────────────────────────────────── */
.step-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px; padding-bottom: 12px;
    border-bottom: 1px solid var(--da3g-bd);
    flex-wrap: wrap;
}
.step-header-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.step-header-ico {
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
.step-header-text strong {
    font-size: 13.5px; font-weight: 700; color: var(--da3g-fg1);
    display: block; line-height: 1.2;
}
.step-header-text span {
    font-size: 11px; color: var(--da3g-fg3);
    font-weight: 500; display: block; margin-top: 2px;
    line-height: 1.4;
}
.step-header-count {
    font-size: 11px; font-weight: 600; color: var(--da3g-fg3);
    background: var(--da3g-bg2); border: 1px solid var(--da3g-bd);
    border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}

/* ── FORM CARDS ──────────────────────────────────────────────── */
.widget-card,
.product-builder .card,
.media-card {
    background: var(--da3g-card);
    border: 1px solid var(--da3g-bd);
    box-shadow: var(--da3g-shadow);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 12px;
}
.product-builder .card-body { background: transparent; padding: 0; }
.widget-title,
.section-title {
    font-size: 13px; font-weight: 700;
    color: var(--da3g-fg1); margin-bottom: 14px;
}

/* ── FORM CONTROLS ───────────────────────────────────────────── */
.product-builder .form-control,
.product-builder .form-select,
.product-builder textarea {
    background: var(--da3g-bg2);
    border: 1px solid var(--da3g-bd);
    color: var(--da3g-fg1);
    border-radius: 8px;
    height: 40px;
    font-size: 13.5px;
    padding: 8px 12px;
    transition: border-color .2s, box-shadow .2s, background .2s;
    font-family: inherit;
    margin-bottom: 0;
    width: 100%;
}
.product-builder textarea { height: auto; min-height: 100px; }
.product-builder .form-control:focus,
.product-builder .form-select:focus,
.product-builder textarea:focus {
    border-color: var(--da3g-accent, #3b82f6);
    box-shadow: 0 0 0 3px var(--da3g-abg, rgba(59,130,246,.10));
    outline: none;
    background: var(--da3g-card);
}
.product-builder .form-control::placeholder,
.product-builder textarea::placeholder { color: var(--da3g-fg3); opacity: 1; }
.product-builder .form-label {
    color: var(--da3g-fg2); font-size: 12.5px;
    font-weight: 600; margin-bottom: 5px;
    display: block;
}
.product-builder .form-label.is-required::after,
.product-builder label.is-required::after { content: ' *'; color: var(--da3g-danger, #ef4444); }
.product-builder .text-muted { color: var(--da3g-fg3) !important; }
.product-builder small { color: var(--da3g-fg3); font-size: 11px; margin-top: 3px; display: block; }
.product-builder .form-check-label { color: var(--da3g-fg2); font-size: 13px; }
.product-builder .form-check-input { accent-color: var(--da3g-accent, #3b82f6); }

/* FIELD VALIDATION */
.field-error {
    display: block; color: var(--da3g-danger, #ef4444);
    font-size: 11.5px; font-weight: 600;
    margin-top: 4px; line-height: 1.3;
}
.field-error::before { content: '✖ '; }
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--da3g-danger, #ef4444) !important;
    box-shadow: 0 0 0 3px var(--da3g-danger-bg, rgba(239,68,68,.12)) !important;
}
.form-control.is-valid,
.form-select.is-valid { border-color: var(--da3g-success, #10b981) !important; }

/* ── NAVIGATION BUTTONS ──────────────────────────────────────── */
.step-actions {
    margin-top: 14px;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: var(--da3g-bg2);
    border-radius: 10px;
    border: 1px solid var(--da3g-bd);
}
.step-actions button {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid transparent;
    padding: 9px 16px; border-radius: 8px;
    font-weight: 700; font-size: 13px;
    cursor: pointer; transition: all .15s;
    min-width: 95px; justify-content: center;
    font-family: inherit;
}
.btn-prev {
    background: var(--da3g-card);
    color: var(--da3g-fg2);
    border-color: var(--da3g-bd);
}
.btn-prev:hover {
    background: var(--da3g-bg2);
    color: var(--da3g-fg1);
    border-color: var(--da3g-accent, #3b82f6);
}
.btn-next {
    background: var(--da3g-accent, #3b82f6);
    color: #fff;
    border-color: var(--da3g-accent, #3b82f6);
    box-shadow: 0 2px 8px var(--da3g-abg, rgba(59,130,246,.20));
}
.btn-next:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-next:disabled { opacity: .65; cursor: not-allowed; transform: none !important; filter: none !important; }
.btn-next.is-submit {
    background: var(--da3g-success, #10b981);
    border-color: var(--da3g-success, #10b981);
    box-shadow: 0 2px 8px var(--da3g-success-bg, rgba(16,185,129,.20));
    min-width: 145px; font-size: 13.5px;
}

/* ── FOOTER ──────────────────────────────────────────────────── */
.builder-footer {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: var(--da3g-card);
    border-top: 1px solid var(--da3g-bd);
    box-shadow: 0 -4px 16px rgba(0,0,0,.06);
    padding: 10px 28px; z-index: 999;
}
.footer-content { display: flex; justify-content: flex-end; }
.footer-save-btn {
    background: var(--da3g-accent, #3b82f6);
    color: #fff; border: 0;
    padding: 10px 22px; border-radius: 8px;
    font-weight: 700; font-size: 13px; cursor: pointer;
    box-shadow: 0 2px 8px var(--da3g-abg, rgba(59,130,246,.20));
    font-family: inherit; transition: all .15s;
}
.footer-save-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ── UPLOAD BOX ──────────────────────────────────────────────── */
.upload-box {
    display: flex; justify-content: center; align-items: center;
    border: 2px dashed var(--da3g-bd);
    border-radius: 10px; padding: 26px 20px;
    background: var(--da3g-bg2);
    cursor: pointer; transition: .2s; max-width: 100%;
}
.upload-box:hover {
    border-color: var(--da3g-accent, #3b82f6);
    background: var(--da3g-abg, rgba(59,130,246,.06));
}
.upload-content { text-align: center; color: var(--da3g-fg2); }
.upload-content i { font-size: 26px; color: var(--da3g-accent, #3b82f6); margin-bottom: 8px; display: block; }
.upload-text strong { font-size: 13px; font-weight: 700; color: var(--da3g-fg1); display: block; }
.upload-text span { font-size: 11.5px; color: var(--da3g-fg3); margin-top: 2px; display: block; }

/* ── IMAGE GALLERY ───────────────────────────────────────────── */
.gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gallery img { width: 100%; height: 96px; object-fit: cover; border-radius: 7px; }
.preview-item {
    width: 84px; height: 84px;
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--da3g-bd);
    position: relative; background: var(--da3g-bg2);
    transition: border-color .15s, transform .15s;
}
.preview-item:hover { border-color: var(--da3g-accent, #3b82f6); transform: scale(1.04); }
.preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-remove {
    position: absolute; top: 3px; inset-inline-end: 3px;
    width: 18px; height: 18px;
    background: rgba(239,68,68,.85); color: #fff;
    border-radius: 50%; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; line-height: 1; transition: background .15s;
}
.preview-remove:hover { background: #ef4444; }

/* ── VARIANTS ────────────────────────────────────────────────── */
.variants-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.variants-table thead th {
    background: var(--da3g-bg2); color: var(--da3g-fg3);
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 9px 10px; border-bottom: 1px solid var(--da3g-bd);
    white-space: nowrap; text-align: start;
}
.variants-table tbody td {
    padding: 7px 10px; border-bottom: 1px solid var(--da3g-bd);
    vertical-align: middle; color: var(--da3g-fg1);
}
.variants-table tbody tr:last-child td { border-bottom: none; }
.variants-table .form-control { height: 32px; font-size: 12px; padding: 5px 9px; }
.variant-color-dot {
    width: 13px; height: 13px; border-radius: 50%;
    border: 1px solid var(--da3g-bd); display: inline-block; flex-shrink: 0;
}
.remove-variant-btn,
.remove-extra-btn {
    width: 28px; height: 28px; border-radius: 7px;
    border: 1px solid var(--da3g-danger-bg, rgba(239,68,68,.25));
    background: var(--da3g-danger-bg, rgba(239,68,68,.10));
    color: var(--da3g-danger, #ef4444);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; transition: all .15s;
}
.remove-variant-btn:hover,
.remove-extra-btn:hover {
    background: var(--da3g-danger, #ef4444); color: #fff;
    border-color: var(--da3g-danger, #ef4444);
}

/* ── EXTRAS ──────────────────────────────────────────────────── */
.extra-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--da3g-bd);
}
.extra-item:last-child { border-bottom: none; }
.extras-list { }

/* ── RADIO WRAPPER + TOOLTIP ─────────────────────────────────── */
.radio-wrapper { position: relative; display: inline-block; }
.radio-tooltip {
    display: none; position: absolute; bottom: 110%; left: 50%;
    transform: translateX(-50%);
    background: var(--da3g-card); border: 1px solid var(--da3g-bd);
    color: var(--da3g-fg2); font-size: 11px; padding: 5px 9px;
    border-radius: 7px; white-space: nowrap;
    box-shadow: var(--da3g-shadow); z-index: 10; margin-bottom: 5px;
    pointer-events: none;
}
.radio-wrapper:hover .radio-tooltip { display: block; }

/* ── PRODUCT TYPE LOCKED ─────────────────────────────────────── */
.ptype-locked-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 700; padding: 3px 9px;
    border-radius: 999px; background: rgba(245,158,11,.10);
    color: #f59e0b; border: 1px solid rgba(245,158,11,.22);
    margin-inline-start: 8px; vertical-align: middle;
}
.ptype-locked-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-radius: 10px;
    background: var(--da3g-bg2); border: 1px solid var(--da3g-bd);
    border-inline-start: 3px solid var(--da3g-accent, #3b82f6);
}
.ptype-locked-card.is-digital  { border-inline-start-color: #8b5cf6; }
.ptype-locked-card.is-physical { border-inline-start-color: var(--da3g-accent, #3b82f6); }
.ptype-locked-ico {
    width: 38px; height: 38px; border-radius: 9px;
    background: var(--da3g-abg, rgba(59,130,246,.12));
    color: var(--da3g-accent, #3b82f6);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.ptype-locked-card.is-digital .ptype-locked-ico { background: rgba(139,92,246,.12); color: #8b5cf6; }
.ptype-locked-body { flex: 1; min-width: 0; }
.ptype-locked-body strong {
    display: block; font-size: 13px; font-weight: 700;
    color: var(--da3g-fg1); margin-bottom: 2px;
}
.ptype-locked-body span { display: block; font-size: 11.5px; color: var(--da3g-fg2); line-height: 1.5; }
.ptype-locked-cta {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px; border: 1px solid var(--da3g-bd);
    background: var(--da3g-card); color: var(--da3g-fg2);
    border-radius: 7px; font-size: 11px; font-weight: 600;
    text-decoration: none; transition: all .15s;
    flex-shrink: 0; white-space: nowrap;
}
.ptype-locked-cta:hover {
    border-color: var(--da3g-accent, #3b82f6);
    color: var(--da3g-accent, #3b82f6);
    background: var(--da3g-abg, rgba(59,130,246,.06));
}

/* ── AI BUTTON ───────────────────────────────────────────────── */
.ai-btn {
    display: flex; align-items: center; gap: 7px;
    border: none; padding: 7px 13px; border-radius: 8px;
    font-size: 12px; font-weight: 700; cursor: pointer; color: #fff;
    background: linear-gradient(135deg, #0f172a, #1e293b, #334155);
    box-shadow: 0 4px 12px rgba(15,23,42,.18);
    transition: .2s; white-space: nowrap; font-family: inherit;
}
.ai-btn .icon { font-size: 13px; }
.ai-btn.loading { opacity: .7; pointer-events: none; position: relative; }
.ai-btn.loading::after {
    content: ""; position: absolute; right: 12px;
    width: 13px; height: 13px;
    border: 2px solid #fff; border-top-color: transparent;
    border-radius: 50%; animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.desc-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.desc-card textarea { min-height: 130px; resize: vertical; }

/* ── MODALS ──────────────────────────────────────────────────── */
.modal-content,
.extras-modal {
    background: var(--da3g-card);
    border: 1px solid var(--da3g-bd);
    border-radius: 12px;
}
.modal-header {
    border-bottom: 1px solid var(--da3g-bd);
    padding: 15px 20px;
}
.modal-title { color: var(--da3g-fg1); font-size: 15px; font-weight: 700; }
.modal-body  { padding: 16px 20px; }
.modal-footer { border-top: 1px solid var(--da3g-bd); padding: 12px 20px; }
.product-builder .btn-close { filter: none; opacity: .5; }
.product-builder .btn-close:hover { opacity: .8; }

/* Buttons inside modals */
.product-builder .btn-outline-primary {
    border-color: var(--da3g-accent, #3b82f6);
    color: var(--da3g-accent, #3b82f6);
    background: transparent; border-radius: 7px;
    font-size: 12.5px; font-weight: 600;
}
.product-builder .btn-outline-primary:hover { background: var(--da3g-abg, rgba(59,130,246,.08)); }
.product-builder .btn-dark {
    background: var(--da3g-fg1); color: var(--da3g-card);
    border-color: var(--da3g-fg1); border-radius: 7px;
    font-size: 12.5px; font-weight: 600;
}
.btn-add-extra {
    background: var(--da3g-accent, #3b82f6); color: #fff; border: none;
    border-radius: 8px; padding: 10px 18px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    transition: all .15s; font-family: inherit; width: 100%;
}
.btn-add-extra:hover { filter: brightness(1.08); }
.modern-input {
    background: var(--da3g-bg2);
    border: 1px solid var(--da3g-bd);
    color: var(--da3g-fg1); border-radius: 8px;
    height: 40px; padding: 8px 12px; font-size: 13.5px;
    transition: border-color .2s, box-shadow .2s; width: 100%;
    font-family: inherit;
}
.modern-input:focus {
    border-color: var(--da3g-accent, #3b82f6);
    box-shadow: 0 0 0 3px var(--da3g-abg, rgba(59,130,246,.10));
    outline: none;
    background: var(--da3g-card);
}

/* ── REVIEW STEP (Step 5) ────────────────────────────────────── */
.rv-card {
    background: var(--da3g-card);
    border: 1px solid var(--da3g-bd);
    border-radius: 12px;
    box-shadow: var(--da3g-shadow);
    overflow: hidden;
    margin-bottom: 12px;
}
.rv-hero {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 18px; padding: 18px;
}
.rv-gallery {
    position: relative; width: 100%; height: 240px;
    background: var(--da3g-bg2); border-radius: 10px;
    overflow: hidden; border: 1px solid var(--da3g-bd);
}
.rv-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-gallery-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100%; color: var(--da3g-fg3); gap: 6px;
}
.rv-gallery-empty i { font-size: 30px; opacity: .45; }
.rv-gallery-empty span { font-size: 11.5px; font-weight: 600; }
.rv-gallery-count {
    position: absolute; bottom: 8px; inset-inline-end: 8px;
    background: rgba(0,0,0,.5); color: #fff;
    padding: 3px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: none;
}
.rv-thumbs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.rv-thumbs img {
    width: 44px; height: 44px; object-fit: cover;
    border-radius: 6px; border: 2px solid transparent;
    cursor: pointer; transition: border-color .15s;
}
.rv-thumbs img.active { border-color: var(--da3g-accent, #3b82f6); }
.rv-title {
    font-size: 17px; font-weight: 800; color: var(--da3g-fg1);
    letter-spacing: -.01em; margin: 0 0 5px;
}
.rv-category { font-size: 12px; color: var(--da3g-fg2); margin-bottom: 8px; }
.rv-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.rv-price { font-size: 20px; font-weight: 900; color: var(--da3g-success, #10b981); letter-spacing: -.02em; }
.rv-old-price { font-size: 13px; color: var(--da3g-fg3); text-decoration: line-through; }
.rv-discount {
    padding: 2px 7px; background: var(--da3g-success-bg, rgba(16,185,129,.12));
    color: var(--da3g-success, #10b981);
    border-radius: 999px; font-size: 11px; font-weight: 700;
}
.rv-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rv-stat-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; background: var(--da3g-bg2);
    border: 1px solid var(--da3g-bd); border-radius: 6px;
    font-size: 11.5px; color: var(--da3g-fg2); font-weight: 600;
}
.rv-stat-chip i { font-size: 10px; color: var(--da3g-fg3); }
.rv-desc { font-size: 12px; color: var(--da3g-fg2); line-height: 1.7; margin-bottom: 10px; }
.rv-section { padding: 12px 18px; border-top: 1px solid var(--da3g-bd); }
.rv-section-title {
    font-size: 11px; font-weight: 700; color: var(--da3g-fg3);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
.rv-variants-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.rv-variants-table th {
    background: var(--da3g-bg2); color: var(--da3g-fg3);
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 7px 10px; border-bottom: 1px solid var(--da3g-bd);
}
.rv-variants-table td {
    padding: 7px 10px; border-bottom: 1px solid var(--da3g-bd);
    font-size: 12px; color: var(--da3g-fg1);
}
.rv-variants-table tr:last-child td { border-bottom: none; }
.rv-extras-list { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-extra-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    background: var(--da3g-abg, rgba(59,130,246,.08));
    border: 1px solid rgba(59,130,246,.18);
    border-radius: 6px; font-size: 11.5px;
    color: var(--da3g-accent, #3b82f6); font-weight: 600;
}
.rv-video-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--da3g-accent, #3b82f6);
    font-size: 12px; font-weight: 600; text-decoration: none;
}
.rv-video-link:hover { text-decoration: underline; }

/* Digital product attachment section */
.product-builder .alert-info {
    background: var(--da3g-abg, rgba(59,130,246,.08));
    border: 1px solid rgba(59,130,246,.2);
    color: var(--da3g-fg2); border-radius: 8px;
}

/* ── MULTILANG SECTION ───────────────────────────────────────── */
.lang-section {
    border-top: 1px solid var(--da3g-bd);
    padding-top: 14px;
    margin-top: 14px;
}
.lang-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 6px;
    font-size: 11px; font-weight: 700;
    background: var(--da3g-bg2); border: 1px solid var(--da3g-bd);
    color: var(--da3g-fg2); margin-bottom: 10px;
}
.lang-badge .fi { font-size: 12px; }
.lang-tag {
    display: inline-block;
    padding: 2px 8px; border-radius: 5px;
    font-size: 10.5px; font-weight: 700;
    background: var(--da3g-bg2); border: 1px solid var(--da3g-bd);
    color: var(--da3g-fg2); margin-inline-end: 6px;
    vertical-align: middle;
    letter-spacing: .02em;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .builder-layout { grid-template-columns: 1fr; }
    .preview-panel { order: -1; position: static; max-height: none; }
}
@media (max-width: 768px) {
    .stepper::before { left: 22px; right: 22px; }
    .stepper-progress { left: 22px; }
    .stepper { padding: 12px 10px; }
    .step span { width: 28px; height: 28px; font-size: 11px; }
    .step p { font-size: 9.5px; }
    .builder-layout { gap: 10px; }
    .builder-header { padding: 12px 16px; }
    .product-title { font-size: 16px; }
}
@media (max-width: 640px) {
    .rv-hero { grid-template-columns: 1fr; }
    .rv-gallery { height: 200px; }
    .ptype-locked-card { flex-wrap: wrap; }
    .ptype-locked-cta { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD-MATCH SUPPLEMENT (.da3 scope wraps .product-builder)
   Maps wizard chrome to the dashboard's .da3-top-bar / .da3-card
   ═══════════════════════════════════════════════════════════════ */
.product-builder.da3 { padding-top: 4px; }

/* ── Top bar (replaces the plain header) ───────────────────── */
.product-builder .builder-header {
    background: var(--da3-card, var(--da3g-card));
    border: 1px solid var(--da3-bd, var(--da3g-bd));
    box-shadow: var(--da3-shadow, var(--da3g-shadow));
    border-radius: 12px;
    padding: 16px 22px 14px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.builder-greeting { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.builder-welcome {
    font-size: 20px; font-weight: 700;
    color: var(--da3-fg1, var(--da3g-fg1));
    margin: 0; line-height: 1.2; letter-spacing: -.01em;
}
.builder-welcome strong { font-weight: 800; }
.builder-sub-row {
    display: flex; align-items: center;
    gap: 10px; flex-wrap: wrap;
    font-size: 12px; color: var(--da3-fg2, var(--da3g-fg2));
}
.builder-live-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    background: rgba(16,185,129,.12);
    border: 1px solid rgba(16,185,129,.28);
    color: #10b981;
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
}
.builder-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,.22);
    animation: liveDotPulse 1.6s ease-in-out infinite;
}
@keyframes liveDotPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: .55; transform: scale(.85); }
}
.builder-divider {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--da3-fg3, var(--da3g-fg3));
    opacity: .55;
}
.builder-meta {
    color: var(--da3-fg2, var(--da3g-fg2));
    font-size: 12px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 5px;
}
.builder-meta i { color: var(--da3-fg3, var(--da3g-fg3)); font-size: 11px; }
.builder-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Status pill (replaces .status-badge) — dashboard look */
.product-builder .status-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(245,158,11,.12);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,.28);
    font-size: 11.5px; font-weight: 700;
    padding: 4px 11px;
    border-radius: 999px;
    letter-spacing: .01em;
    white-space: nowrap;
}
.product-builder .status-badge::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px currentColor;
    opacity: .35;
}
.product-builder .status-badge.is-published {
    background: rgba(16,185,129,.12);
    color: #10b981;
    border-color: rgba(16,185,129,.28);
}
.product-builder .status-badge.is-inactive {
    background: rgba(113,113,122,.12);
    color: var(--da3-fg3, var(--da3g-fg3));
    border-color: rgba(113,113,122,.28);
}
.product-builder .status-badge.is-deleted {
    background: rgba(239,68,68,.12);
    color: #ef4444;
    border-color: rgba(239,68,68,.28);
}

/* ── Dashboard-style card upgrade ──────────────────────────── */
.product-builder.da3 .widget-card,
.product-builder.da3 .card,
.product-builder.da3 .media-card {
    background: var(--da3-card, var(--da3g-card));
    border: 1px solid var(--da3-bd, var(--da3g-bd));
    box-shadow: var(--da3-shadow, var(--da3g-shadow));
    border-radius: var(--da3-r, 12px);
    padding: 20px;
    margin-bottom: var(--da3-gap, 14px);
}
.product-builder.da3 .widget-title,
.product-builder.da3 .section-title {
    font-size: 13.5px; font-weight: 800;
    color: var(--da3-fg1, var(--da3g-fg1));
    margin-bottom: 14px;
    letter-spacing: -.005em;
    display: flex; align-items: center; gap: 6px;
}

/* Stepper card uses da3 card surface too */
.product-builder.da3 .stepper {
    background: var(--da3-card, var(--da3g-card));
    border: 1px solid var(--da3-bd, var(--da3g-bd));
    box-shadow: var(--da3-shadow, var(--da3g-shadow));
    border-radius: var(--da3-r, 12px);
    margin-bottom: var(--da3-gap, 14px);
}

/* Preview panel matches dashboard card */
.product-builder.da3 .preview-panel {
    background: var(--da3-card, var(--da3g-card));
    border: 1px solid var(--da3-bd, var(--da3g-bd));
    box-shadow: var(--da3-shadow, var(--da3g-shadow));
    border-radius: var(--da3-r, 12px);
}

/* ── Dashboard button look ─────────────────────────────────── */
.product-builder.da3 .btn-next {
    background: var(--da3-accent, var(--da3g-accent, #3b82f6));
    border-color: var(--da3-accent, var(--da3g-accent, #3b82f6));
    padding: 9px 18px; border-radius: 8px;
    font-weight: 700; font-size: 13px;
    box-shadow: 0 2px 8px rgba(59,130,246,.18);
}
.product-builder.da3 .footer-save-btn {
    background: var(--da3-accent, var(--da3g-accent, #3b82f6));
    padding: 10px 22px; border-radius: 8px;
    font-weight: 700; font-size: 13.5px;
    box-shadow: 0 2px 10px rgba(59,130,246,.22);
}
.product-builder.da3 .btn-prev {
    background: var(--da3-card, var(--da3g-card));
    border: 1px solid var(--da3-bd, var(--da3g-bd));
    color: var(--da3-fg2, var(--da3g-fg2));
    padding: 9px 18px; border-radius: 8px;
    font-weight: 700; font-size: 13px;
}

/* Footer matches da3 card surface */
.product-builder.da3 ~ .builder-footer,
.product-builder.da3 .builder-footer {
    background: var(--da3-card, var(--da3g-card));
    border-top: 1px solid var(--da3-bd, var(--da3g-bd));
}

/* ── Responsive header ─────────────────────────────────────── */
@media (max-width: 640px) {
    .product-builder .builder-header { padding: 14px 16px; flex-direction: column; align-items: flex-start; }
    .builder-actions { width: 100%; justify-content: flex-end; }
    .builder-welcome { font-size: 17px; }
}



/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/product/product.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   PRODUCTS PAGE — da3g design-token system
   All colors use CSS variables — light/dark handled automatically
   ═══════════════════════════════════════════════════════════ */

/* ── Top action bar ── */
/* ── Products — Page header (dashboard-style) ──────────────────────── */
.prd-page-hd {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             16px;
    margin-bottom:   22px;
    flex-wrap:       wrap;
}
.prd-page-hd__left {
    display:     flex;
    align-items: flex-start;
    gap:         14px;
    min-width:   0;
    flex:        1;
}
.prd-page-hd__icon {
    width:           44px;
    height:          44px;
    border-radius:   12px;
    background:      rgba(99,102,241,.13);
    color:           #6366f1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       18px;
    flex-shrink:     0;
    margin-top:      2px;
}
body.dark-mode .prd-page-hd__icon { background: rgba(99,102,241,.2); }
.prd-page-hd__title {
    font-size:      1.35rem;
    font-weight:    900;
    color:          var(--da3g-fg1);
    margin:         0 0 2px;
    letter-spacing: -.025em;
    line-height:    1.15;
}
.prd-page-hd__sub {
    font-size:  .8rem;
    color:      var(--da3g-fg3);
    margin:     0 0 8px;
    font-weight: 600;
}

/* Limit progress bar */
.prd-limit-bar {
    height:        5px;
    width:         200px;
    max-width:     100%;
    background:    var(--da3g-bd);
    border-radius: 999px;
    overflow:      hidden;
    margin-top:    4px;
}
.prd-limit-bar__fill {
    height:         100%;
    border-radius:  999px;
    background:     #34d399;
    transition:     width .6s cubic-bezier(.4,0,.2,1);
}
.prd-limit-bar__fill.is-warn { background: #f59e0b; }
.prd-limit-bar__fill.is-full { background: #ef4444; }

.prd-page-hd__actions {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
    flex-shrink: 0;
}

/* Locked Add button (limit reached) */
.prd-act-btn.is-limit {
    background: linear-gradient(135deg, #6b7280, #52525b);
    border-color: #6b7280;
    cursor: pointer;
}
.prd-act-btn.is-limit:hover { box-shadow: 0 10px 26px rgba(107,114,128,.35); color: #fff; }

.prd-actions-row {
    display: flex; gap: 8px; flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: 18px;
}
.prd-act-btn {
    height: 38px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: .82rem; font-weight: 800;
    border: 1.5px solid var(--da3g-bd);
    background: var(--da3g-card);
    color: var(--da3g-fg2);
    display: inline-flex; align-items: center; gap: 7px;
    text-decoration: none;
    transition: all .15s;
    cursor: pointer;
    font-family: inherit;
    box-shadow: var(--da3g-shadow, none);
}
.prd-act-btn:hover { color: var(--da3g-fg1); border-color: var(--da3g-accent); transform: translateY(-1px); }
.prd-act-btn.primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: #2563eb;
    color: #fff;
    box-shadow: 0 8px 20px rgba(59,130,246,.3);
}
.prd-act-btn.primary:hover { color: #fff; box-shadow: 0 10px 26px rgba(59,130,246,.4); }

/* Views column */
.prd-views {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(59,130,246,.12);
    color: var(--da3g-accent);
    border: 1px solid rgba(59,130,246,.25);
    font-size: .78rem; font-weight: 800;
    font-family: 'SF Mono', monospace;
}
.prd-views i { font-size: .72rem; opacity: .8; }
.prd-views.zero { background: var(--da3g-bg2); color: var(--da3g-fg3); border-color: var(--da3g-bd); }

/* ── Stats ── */
.prd-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.prd-stat {
    background: var(--da3g-card);
    border: 1px solid var(--da3g-bd);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex; align-items: center; gap: 14px;
    position: relative; overflow: hidden;
    transition: transform .15s, border-color .15s, box-shadow .15s;
    box-shadow: var(--da3g-shadow, none);
}
.prd-stat::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--accent-glow, rgba(59,130,246,.08)) 0%, transparent 60%);
    pointer-events: none;
}
.prd-stat:hover {
    transform: translateY(-2px);
    border-color: var(--accent-color, var(--da3g-accent));
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.prd-stat-ico {
    width: 46px; height: 46px; border-radius: 12px;
    background: var(--accent-bg, var(--da3g-abg));
    color: var(--accent-color, var(--da3g-accent));
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
    position: relative; z-index: 1;
}
.prd-stat-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.prd-stat-val  { display: block; font-size: 1.55rem; font-weight: 900; color: var(--da3g-fg1); line-height: 1.05; letter-spacing: -.03em; }
.prd-stat-lbl  { display: block; font-size: .7rem; font-weight: 800; color: var(--da3g-fg3); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }

.prd-stat.s-purple { --accent-color: #818cf8; --accent-bg: rgba(99,102,241,.15);  --accent-glow: rgba(99,102,241,.08); }
.prd-stat.s-green  { --accent-color: #34d399; --accent-bg: rgba(16,185,129,.15);  --accent-glow: rgba(16,185,129,.08); }
.prd-stat.s-amber  { --accent-color: #fbbf24; --accent-bg: rgba(245,158,11,.15);  --accent-glow: rgba(245,158,11,.08); }
.prd-stat.s-red    { --accent-color: #f87171; --accent-bg: rgba(239,68,68,.15);   --accent-glow: rgba(239,68,68,.08); }
.prd-stat.s-blue   { --accent-color: #60a5fa; --accent-bg: rgba(59,130,246,.15);  --accent-glow: rgba(59,130,246,.08); }
body:not(.dark-mode) .prd-stat.s-purple { --accent-color: #4f46e5; }
body:not(.dark-mode) .prd-stat.s-green  { --accent-color: #047857; }
body:not(.dark-mode) .prd-stat.s-amber  { --accent-color: #b45309; }
body:not(.dark-mode) .prd-stat.s-red    { --accent-color: #b91c1c; }
body:not(.dark-mode) .prd-stat.s-blue   { --accent-color: #2563eb; }

/* ── Toolbar (search + filters) ── */
.prd-toolbar {
    background: var(--da3g-card);
    border: 1px solid var(--da3g-bd);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    box-shadow: var(--da3g-shadow, none);
}
.prd-search { flex: 1; min-width: 220px; position: relative; }
.prd-search i {
    position: absolute; top: 50%; transform: translateY(-50%);
    color: var(--da3g-fg3); font-size: .8rem; pointer-events: none;
}
html[dir="rtl"] .prd-search i { right: 12px; }
html[dir="ltr"] .prd-search i { left: 12px; }
.prd-search input {
    width: 100%; height: 38px; padding: 0 36px;
    background: var(--da3g-bg2);
    border: 1.5px solid var(--da3g-bd);
    border-radius: 10px;
    color: var(--da3g-fg1);
    font-size: .85rem; font-weight: 600;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    font-family: inherit;
}
.prd-search input:focus {
    border-color: var(--da3g-accent);
    box-shadow: 0 0 0 3px var(--da3g-abg);
}
.prd-search input::placeholder { color: var(--da3g-fg3); }

.prd-filters { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.prd-filter-pill {
    padding: 7px 13px;
    border: 1.5px solid var(--da3g-bd);
    border-radius: 999px;
    background: var(--da3g-bg2);
    color: var(--da3g-fg2);
    font-size: .75rem; font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex; align-items: center; gap: 5px;
    font-family: inherit;
}
.prd-filter-pill:hover { border-color: var(--da3g-accent); color: var(--da3g-accent); }
.prd-filter-pill.is-active {
    background: var(--da3g-accent);
    border-color: var(--da3g-accent);
    color: #fff;
}
.prd-filter-pill .count {
    background: rgba(255,255,255,.25);
    padding: 1px 6px;
    border-radius: 999px;
    font-size: .68rem; font-weight: 800;
}
.prd-filter-pill:not(.is-active) .count {
    background: var(--da3g-bd);
    border: 1px solid var(--da3g-bd);
    color: var(--da3g-fg3);
}

/* ── Table ── */
.prd-tbl-wrap {
    background: var(--da3g-card);
    border: 1px solid var(--da3g-bd);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--da3g-shadow, none);
}
.prd-tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.prd-tbl thead tr {
    background: var(--da3g-bg2);
    border-bottom: 1px solid var(--da3g-bd);
}
.prd-tbl thead th {
    font-size: .68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--da3g-fg3);
    padding: 14px 16px;
    border-bottom: 1px solid var(--da3g-bd);
    white-space: nowrap;
    text-align: start;
}
.prd-tbl tbody tr { transition: background .12s; }
.prd-tbl tbody tr:hover { background: var(--da3g-bg2); }
.prd-tbl tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--da3g-bd);
    vertical-align: middle;
    color: var(--da3g-fg1);
}
.prd-tbl tbody tr:last-child td { border-bottom: none; }

/* Image cell */
.prd-img-wrap {
    width: 52px; height: 52px;
    border-radius: 10px;
    background: var(--da3g-bg2);
    border: 1px solid var(--da3g-bd);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.prd-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Name cell */
.prd-name {
    font-size: .9rem; font-weight: 800;
    color: var(--da3g-fg1);
    margin-bottom: 4px;
    letter-spacing: -.01em;
}
.prd-name-meta {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .7rem; color: var(--da3g-fg3);
    font-weight: 600;
}
.prd-name-meta i { font-size: .65rem; opacity: .7; }

/* Draft badge */
.prd-draft-badge {
    display: inline-flex; align-items: center; gap: 4px;
    margin-inline-start: 8px;
    padding: 2px 8px;
    font-size: .65rem; font-weight: 800;
    border-radius: 999px;
    background: var(--da3g-warn-bg, rgba(245,158,11,.15));
    color: var(--da3g-warn, #fbbf24);
    border: 1px solid rgba(245,158,11,.3);
    letter-spacing: .02em;
    vertical-align: middle;
}
.prd-draft-badge i { font-size: .6rem; }

/* Index cell */
.prd-idx {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 24px; padding: 0 8px;
    border-radius: 6px;
    background: var(--da3g-bg2);
    color: var(--da3g-fg3);
    font-size: .72rem; font-weight: 800;
    font-family: 'SF Mono', monospace;
}

/* Price cell */
.prd-price {
    font-size: 1rem; font-weight: 900;
    color: var(--da3g-success, #34d399);
    letter-spacing: -.02em;
    white-space: nowrap;
}

/* Stock badge */
.prd-stock-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .68rem; font-weight: 800;
    border: 1px solid;
    margin-bottom: 4px;
}
.prd-stock-badge.in  { background: var(--da3g-success-bg, rgba(16,185,129,.15)); color: var(--da3g-success, #34d399); border-color: rgba(16,185,129,.3); }
.prd-stock-badge.low { background: var(--da3g-warn-bg,    rgba(245,158,11,.15)); color: var(--da3g-warn,    #fbbf24); border-color: rgba(245,158,11,.3); }
.prd-stock-badge.out { background: var(--da3g-danger-bg,  rgba(239,68,68,.15));  color: var(--da3g-danger,  #f87171); border-color: rgba(239,68,68,.3); }
.prd-stock-qty { display: block; font-size: .7rem; color: var(--da3g-fg3); font-weight: 600; }
.prd-stock-qty strong { color: var(--da3g-fg1); font-weight: 800; }

/* Status pill */
/* ── Toggle switch (active/inactive product) ────────────────────────── */
.prd-switch {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.prd-switch-input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.prd-switch-track {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--da3-bg2, #e4e4e7);
    border: 1px solid var(--da3-bd, #d4d4d8);
    transition: background .18s ease, border-color .18s ease;
    flex-shrink: 0;
}
.prd-switch-thumb {
    position: absolute;
    top: 50%;
    inset-inline-start: 2px;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    transition: inset-inline-start .22s cubic-bezier(.4,0,.2,1);
}
.prd-switch-input:checked ~ .prd-switch-track {
    background: #10b981;
    border-color: #059669;
}
.prd-switch-input:checked ~ .prd-switch-track .prd-switch-thumb {
    inset-inline-start: 18px;
}
.prd-switch-label {
    font-size: .72rem;
    font-weight: 800;
    color: var(--da3-fg3);
    min-width: 48px;
}
.prd-switch-input:checked ~ .prd-switch-label {
    color: #10b981;
}
.prd-switch.is-disabled { opacity: .55; cursor: not-allowed; }
.prd-switch.is-busy { opacity: .7; pointer-events: none; }
.prd-switch.is-busy .prd-switch-track { background: var(--da3-bg2); }

.prd-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .7rem; font-weight: 800;
    cursor: pointer;
    border: 1px solid;
    text-decoration: none;
    transition: transform .15s;
}
.prd-status:hover { transform: translateY(-1px); }
.prd-status.active   { background: var(--da3g-success-bg, rgba(16,185,129,.15)); color: var(--da3g-success, #34d399); border-color: rgba(16,185,129,.3); }
.prd-status.inactive { background: var(--da3g-danger-bg,  rgba(239,68,68,.15));  color: var(--da3g-danger,  #f87171); border-color: rgba(239,68,68,.3); }
.prd-status .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* Action buttons */
.prd-actions { display: flex; gap: 5px; justify-content: center; }
.prd-act {
    width: 34px; height: 34px;
    border-radius: 9px;
    border: 1px solid var(--da3g-bd);
    background: var(--da3g-bg2);
    color: var(--da3g-fg3);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem;
    transition: all .15s;
    text-decoration: none;
}
.prd-act:hover { transform: translateY(-1px); }
.prd-act.edit:hover { background: rgba(59,130,246,.15); color: #60a5fa; border-color: #3b82f6; }
.prd-act.del:hover  { background: var(--da3g-danger-bg, rgba(239,68,68,.15)); color: var(--da3g-danger, #f87171); border-color: rgba(239,68,68,.5); }

/* J.4 — Bulk operations */
.prd-check { width: 18px; height: 18px; cursor: pointer; accent-color: var(--da3g-accent); }
.prd-bulk-bar {
    position: sticky; top: 8px; z-index: 30;
    margin: 0 0 16px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(99,102,241,.18));
    border: 1px solid rgba(99,102,241,.45);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(59,130,246,.18), 0 0 0 1px rgba(99,102,241,.10);
    backdrop-filter: blur(8px);
    animation: prd-bulk-in .22s ease-out;
}
@keyframes prd-bulk-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.prd-bulk-info {
    display: flex; align-items: center; gap: 12px;
    color: var(--da3g-fg2);
    font-size: .88rem; font-weight: 700;
}
.prd-bulk-info i { color: var(--da3g-accent); font-size: 1rem; }
.prd-bulk-info strong { color: var(--da3g-fg1); font-size: 1.05rem; }
.prd-bulk-clear {
    margin-inline-start: 8px;
    padding: 4px 12px;
    background: transparent;
    border: 1px solid var(--da3g-bd);
    color: var(--da3g-fg2);
    border-radius: 999px;
    font-size: .72rem; font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.prd-bulk-clear:hover { background: var(--da3g-bg2); color: var(--da3g-fg1); }
.prd-bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.prd-bulk-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 10px;
    border: 1px solid var(--da3g-bd);
    background: var(--da3g-card);
    color: var(--da3g-fg1);
    font-size: .82rem; font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}
.prd-bulk-btn i { font-size: .85rem; }
.prd-bulk-btn.activate   { color: var(--da3g-success, #4ade80); border-color: rgba(34,197,94,.4); }
.prd-bulk-btn.activate:hover   { background: var(--da3g-success-bg, rgba(34,197,94,.15)); border-color: #22c55e; }
.prd-bulk-btn.deactivate { color: var(--da3g-warn,    #fbbf24); border-color: rgba(245,158,11,.4); }
.prd-bulk-btn.deactivate:hover { background: var(--da3g-warn-bg,    rgba(245,158,11,.15)); border-color: #f59e0b; }
.prd-bulk-btn.delete     { color: var(--da3g-danger,  #f87171); border-color: rgba(239,68,68,.4); }
.prd-bulk-btn.delete:hover     { background: var(--da3g-danger-bg,  rgba(239,68,68,.15)); border-color: #ef4444; }

/* Empty state */
.prd-empty { padding: 60px 24px; text-align: center; }
.prd-empty-icon {
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: var(--da3g-bg2);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: var(--da3g-fg3);
}
.prd-empty h3 { font-size: 1rem; font-weight: 800; color: var(--da3g-fg1); margin: 0 0 4px; }
.prd-empty p  { font-size: .82rem; color: var(--da3g-fg3); margin: 0; }

/* ── Mobile cards ── */
@media (max-width: 768px) {
    .prd-tbl thead { display: none; }
    .prd-tbl tbody tr { display: block; padding: 12px; border-bottom: 1px solid var(--da3g-bd); }
    .prd-tbl tbody tr:last-child { border-bottom: none; }
    .prd-tbl tbody td {
        display: flex; justify-content: space-between; align-items: center;
        padding: 6px 0;
        border-bottom: 1px solid var(--da3g-bd);
    }
    .prd-tbl tbody td:last-child {
        border-bottom: none;
        justify-content: center;
        padding-top: 10px;
    }
    .prd-tbl tbody td::before {
        content: attr(data-label);
        font-size: .68rem; font-weight: 800;
        text-transform: uppercase; letter-spacing: .04em;
        color: var(--da3g-fg3);
        flex-shrink: 0; margin-inline-end: .5rem;
    }
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/product/steps/step5.blade.php
═══════════════════════════════════════════════════════════ */

/* ════════ Review Card — da3g Design System ════════ */
.rv-card {
    background: var(--da3g-card);
    border: 1px solid var(--da3g-bd);
    border-radius: 16px;
    box-shadow: var(--da3g-shadow);
    overflow: hidden;
    margin-bottom: 18px;
}

/* Hero row: gallery + identity */
.rv-hero {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    padding: 20px;
}
@media (max-width: 640px) { .rv-hero { grid-template-columns: 1fr; } }

.rv-gallery {
    position: relative;
    width: 100%; height: 280px;
    background: var(--da3g-bg2);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--da3g-bd);
}
.rv-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-gallery-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100%; color: var(--da3g-fg3); gap: 6px;
}
.rv-gallery-empty i { font-size: 36px; opacity: .5; }
.rv-gallery-empty span { font-size: 12px; font-weight: 600; }
.rv-gallery-count {
    position: absolute;
    bottom: 10px; inset-inline-end: 10px;
    background: rgba(0,0,0,.55); color: #fff;
    padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: none;
}

.rv-thumbs { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.rv-thumbs img {
    width: 50px; height: 50px; object-fit: cover;
    border-radius: 8px; border: 1.5px solid var(--da3g-bd);
    cursor: pointer; opacity: .65;
    transition: opacity .15s, border-color .15s, transform .15s;
}
.rv-thumbs img.is-active {
    opacity: 1; border-color: var(--da3g-accent, #3b82f6); transform: scale(1.04);
}

.rv-identity { min-width: 0; }
.rv-type-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    background: var(--da3g-abg, rgba(59,130,246,.12));
    color: var(--da3g-accent, #3b82f6);
    border-radius: 999px; font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
.rv-type-pill.is-digital { background: rgba(139,92,246,.12); color: #8b5cf6; }

.rv-name {
    font-size: 22px; font-weight: 800; color: var(--da3g-fg1);
    margin: 0 0 6px; line-height: 1.25; letter-spacing: -.2px; word-break: break-word;
}
.rv-name.is-empty { color: var(--da3g-fg3); font-style: italic; font-weight: 600; font-size: 16px; }

.rv-category { font-size: 12.5px; color: var(--da3g-fg2); margin: 0 0 14px; }
.rv-category i { color: var(--da3g-fg3); margin-inline-end: 4px; }

/* Price block */
.rv-price-block {
    display: flex; align-items: baseline; gap: 10px;
    padding: 14px 0;
    border-top: 1px dashed var(--da3g-bd);
    border-bottom: 1px dashed var(--da3g-bd);
    margin-bottom: 14px; flex-wrap: wrap;
}
.rv-price {
    font-size: 26px; font-weight: 900;
    color: var(--da3g-success, #10b981);
    font-variant-numeric: tabular-nums; letter-spacing: -.4px;
}
.rv-price.is-empty { color: var(--da3g-danger, #ef4444); font-size: 16px; font-style: italic; }
.rv-old-price { font-size: 14px; color: var(--da3g-fg3); text-decoration: line-through; font-weight: 600; }
.rv-discount-badge {
    background: var(--da3g-danger-bg, rgba(239,68,68,.12));
    color: var(--da3g-danger, #ef4444);
    padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800;
}

/* Quick stats row */
.rv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.rv-stat {
    padding: 10px 12px;
    background: var(--da3g-bg2);
    border: 1px solid var(--da3g-bd);
    border-radius: 10px;
}
.rv-stat-label {
    font-size: 10.5px; color: var(--da3g-fg3); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px;
}
.rv-stat-value { font-size: 13.5px; font-weight: 700; color: var(--da3g-fg1); font-variant-numeric: tabular-nums; }
.rv-stat-value.ok     { color: var(--da3g-success, #10b981); }
.rv-stat-value.warn   { color: var(--da3g-warn, #f59e0b); }
.rv-stat-value.danger { color: var(--da3g-danger, #ef4444); }

/* Section blocks */
.rv-section { padding: 18px 20px; border-top: 1px solid var(--da3g-bd); }
.rv-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.rv-section-head i {
    width: 26px; height: 26px; border-radius: 7px;
    background: var(--da3g-abg, rgba(59,130,246,.12));
    color: var(--da3g-accent, #3b82f6);
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}
.rv-section-head h4 { margin: 0; font-size: 14px; font-weight: 800; color: var(--da3g-fg1); }
.rv-section-empty { font-size: 12.5px; color: var(--da3g-fg3); font-style: italic; }

.rv-desc { font-size: 13.5px; color: var(--da3g-fg2); line-height: 1.7; white-space: pre-wrap; word-break: break-word; }

/* Variants table */
.rv-variants-wrap { overflow-x: auto; }
.rv-variants { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rv-variants th {
    background: var(--da3g-bg2); color: var(--da3g-fg3);
    font-weight: 700; text-align: start; padding: 8px 10px;
    border-bottom: 1px solid var(--da3g-bd);
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
}
.rv-variants td {
    padding: 10px; border-bottom: 1px solid var(--da3g-bd);
    color: var(--da3g-fg1); font-weight: 600;
}
.rv-color-swatch {
    display: inline-block; width: 14px; height: 14px;
    border-radius: 50%; vertical-align: middle;
    margin-inline-end: 5px; border: 1px solid var(--da3g-bd);
}

/* Final confirm card */
.rv-confirm {
    margin-top: 4px; padding: 14px 18px;
    background: var(--da3g-success-bg, rgba(16,185,129,.06));
    border: 1px solid rgba(16,185,129,.25);
    border-radius: 12px; display: flex; align-items: center; gap: 12px;
}
.rv-confirm i {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(16,185,129,.16); color: var(--da3g-success, #10b981);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.rv-confirm strong {
    display: block; color: var(--da3g-success, #10b981);
    font-weight: 800; font-size: 13.5px; margin-bottom: 2px;
}
.rv-confirm span { display: block; font-size: 11.5px; color: var(--da3g-success, #10b981); opacity: .85; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/product_fake_view/index.blade.php
═══════════════════════════════════════════════════════════ */

:root{
    --fv:#334155;
    --fv-dark:#1e293b;
    --text:#0f172a;
    --muted:#64748b;
    --card:#ffffff;
    --border:#e2e8f0;
}

/* LAYOUT */
.fv-wrap{max-width:1250px;margin:auto;}
.fv-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px}

/* HERO */
.fv-hero{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--fv-dark),var(--fv));
    border-radius:26px;
    padding:38px;
    color:#fff;
    margin-bottom:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.fv-hero::after{
    content:"";
    position:absolute;
    width:380px;height:380px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    right:-120px;top:-120px;
}
.fv-badge{
    background:#fff;
    color:var(--fv-dark);
    padding:6px 14px;
    font-weight:800;
    border-radius:999px;
    font-size:12px;
    display:inline-block;
    margin-bottom:10px;
}

/* CARD */
.fv-card{
    background:var(--card);
    border-radius:22px;
    padding:30px;
    border:1px solid var(--border);
    box-shadow:0 15px 40px rgba(0,0,0,.05);
}
.fv-title{
    font-weight:900;
    font-size:18px;
    margin-bottom:24px;
    color:var(--text);
}

/* FORM */
.form-control{
    border-radius:14px;
    padding:12px 14px;
}
.form-label{font-weight:700}

/* SWITCH */
.switch{width:56px;height:30px;position:relative}
.switch input{display:none}
.slider{
    position:absolute;inset:0;
    background:#e5e7eb;border-radius:999px;
    transition:.3s
}
.slider:before{
    content:"";position:absolute;
    width:22px;height:22px;
    left:4px;top:4px;
    background:#fff;border-radius:50%;
    transition:.3s;
    box-shadow:0 4px 10px rgba(0,0,0,.25)
}
.switch input:checked + .slider{background:var(--fv)}
.switch input:checked + .slider:before{transform:translateX(26px)}

/* INFO */
.fv-info{list-style:none;padding:0;margin:0}
.fv-info li{
    display:flex;
    gap:10px;
    font-size:14px;
    padding:10px 0;
    border-bottom:1px solid #f1f5f9;
}
.fv-info li:last-child{border:none}
.fv-info i{color:#22c55e;margin-top:4px}

/* NOTE */
.fv-note{
    background:#f8fafc;
    border:1px dashed var(--border);
    border-radius:16px;
    padding:18px;
    margin-top:22px;
    font-size:14px;
    color:#475569;
}

/* BUTTON */
.btn-fv{
    background:linear-gradient(135deg,var(--fv),var(--fv-dark));
    color:#fff;border:none;
    font-weight:900;
    border-radius:14px;
    padding:12px 28px;
}

/* ================= RTL ================= */
.fv-wrap{
    direction: rtl;
}
.fv-hero,
.fv-card,
.fv-info,
.fv-note{
    text-align:right;
}

/* ================= MOBILE ================= */
@media (max-width:768px){

/* الشبكة */
.fv-grid{
    grid-template-columns:1fr;
    gap:18px;
}

/* HERO */
.fv-hero{
    flex-direction:column;
    text-align:center;
    padding:26px 18px;
    border-radius:22px;
}
.fv-hero i{
    margin-top:14px;
    font-size:42px !important;
}

/* الكروت */
.fv-card{
    padding:20px;
    border-radius:18px;
}

/* صف المين/ماكس */
.row.g-3{
    flex-direction:column;
}
.row.g-3 .col-md-6{
    width:100%;
}

/* الحقول */
.form-control{
    padding:10px 12px;
    font-size:14px;
}

/* السويتش بلوك */
.d-flex.justify-content-between.align-items-center.mb-4{
    flex-direction:column;
    align-items:flex-start !important;
    gap:10px;
}

/* زر الحفظ */
.btn-fv{
    width:100%;
    padding:12px 0;
    font-size:14px;
}

}



/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/reports/index.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   REPORTS PAGE — Dashboard-grade analytics
   ═══════════════════════════════════════════════════════════ */

/* ── Top action row ── */
.rp-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.rp-period-tabs {
    display: inline-flex;
    background: #1e1e22;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
}
.rp-period-tab {
    padding: 7px 14px;
    border-radius: 9px;
    background: transparent;
    color: #a1a1aa;
    border: none;
    font-size: .8rem; font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s;
    font-family: inherit;
}
.rp-period-tab:hover { color: #f4f4f5; }
.rp-period-tab.is-active {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    box-shadow: 0 4px 14px rgba(59,130,246,.3);
}
.rp-date-range {
    display: inline-flex; gap: 6px; align-items: center;
}
.rp-date-range input[type="date"] {
    height: 36px; padding: 0 12px;
    border-radius: 9px;
    border: 1.5px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: #f4f4f5;
    font-size: .78rem; font-weight: 600;
    outline: none;
    font-family: inherit;
}
.rp-apply-btn {
    height: 36px; padding: 0 16px;
    border-radius: 9px;
    background: rgba(255,255,255,.06);
    border: 1.5px solid rgba(255,255,255,.1);
    color: #f4f4f5;
    font-size: .78rem; font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}
.rp-apply-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
body:not(.dark-mode) .rp-period-tabs { background: #fff; border-color: #e5e7eb; }
body:not(.dark-mode) .rp-period-tab { color: #6b7280; }
body:not(.dark-mode) .rp-date-range input[type="date"] { background: #f9fafb; border-color: #d1d5db; color: #111827; }
body:not(.dark-mode) .rp-apply-btn { background: #f9fafb; color: #374151; border-color: #d1d5db; }

/* ── KPI cards ── */
.rp-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.rp-kpi {
    background: #1e1e22;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    padding: 18px 20px;
    position: relative; overflow: hidden;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.rp-kpi::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--rp-glow) 0%, transparent 60%);
    pointer-events: none;
}
.rp-kpi:hover { transform: translateY(-2px); border-color: var(--rp-color); box-shadow: 0 10px 24px rgba(0,0,0,.18); }

.rp-kpi-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
    position: relative; z-index: 1;
}
.rp-kpi-ico {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--rp-bg);
    color: var(--rp-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.rp-kpi-trend {
    font-size: .68rem; font-weight: 800;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: #a1a1aa;
}
.rp-kpi-val {
    font-size: 1.7rem; font-weight: 900;
    color: #f4f4f5;
    line-height: 1.05;
    letter-spacing: -.03em;
    margin: 0 0 4px;
    position: relative; z-index: 1;
}
.rp-kpi-lbl {
    font-size: .72rem; font-weight: 800;
    color: #a1a1aa;
    text-transform: uppercase; letter-spacing: .05em;
    margin: 0;
    position: relative; z-index: 1;
}

.rp-kpi.k-purple { --rp-color: #93c5fd; --rp-bg: rgba(59,130,246,.15); --rp-glow: rgba(59,130,246,.08); }
.rp-kpi.k-green  { --rp-color: #34d399; --rp-bg: rgba(16,185,129,.15); --rp-glow: rgba(16,185,129,.08); }
.rp-kpi.k-blue   { --rp-color: #818cf8; --rp-bg: rgba(99,102,241,.15); --rp-glow: rgba(99,102,241,.08); }
.rp-kpi.k-cyan   { --rp-color: #67e8f9; --rp-bg: rgba(6,182,212,.15);  --rp-glow: rgba(6,182,212,.08); }
.rp-kpi.k-amber  { --rp-color: #fbbf24; --rp-bg: rgba(245,158,11,.15); --rp-glow: rgba(245,158,11,.08); }
.rp-kpi.k-red    { --rp-color: #fca5a5; --rp-bg: rgba(239,68,68,.15);  --rp-glow: rgba(239,68,68,.08); }
.rp-kpi.k-pink   { --rp-color: #f9a8d4; --rp-bg: rgba(236,72,153,.15); --rp-glow: rgba(236,72,153,.08); }
.rp-kpi.k-orange { --rp-color: #fdba74; --rp-bg: rgba(249,115,22,.15); --rp-glow: rgba(249,115,22,.08); }

body:not(.dark-mode) .rp-kpi { background: #fff; border-color: #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
body:not(.dark-mode) .rp-kpi-val { color: #111827; }
body:not(.dark-mode) .rp-kpi-lbl { color: #6b7280; }
body:not(.dark-mode) .rp-kpi-trend { background: #f3f4f6; color: #6b7280; }
body:not(.dark-mode) .rp-kpi.k-purple { --rp-color: #2563eb; }
body:not(.dark-mode) .rp-kpi.k-green  { --rp-color: #047857; }
body:not(.dark-mode) .rp-kpi.k-blue   { --rp-color: #4f46e5; }
body:not(.dark-mode) .rp-kpi.k-cyan   { --rp-color: #0e7490; }
body:not(.dark-mode) .rp-kpi.k-amber  { --rp-color: #b45309; }
body:not(.dark-mode) .rp-kpi.k-red    { --rp-color: #b91c1c; }
body:not(.dark-mode) .rp-kpi.k-pink   { --rp-color: #9d174d; }
body:not(.dark-mode) .rp-kpi.k-orange { --rp-color: #c2410c; }

/* ── Chart card ── */
.rp-grid { display: grid; gap: 18px; margin-bottom: 18px; }
.rp-grid.cols-2  { grid-template-columns: 2fr 1fr; }
.rp-grid.cols-3  { grid-template-columns: 1fr 1fr 1fr; }
.rp-grid.cols-22 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
    .rp-grid.cols-2, .rp-grid.cols-3, .rp-grid.cols-22 { grid-template-columns: 1fr; }
}

.rp-card {
    background: #1e1e22;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    overflow: hidden;
}
.rp-card-head {
    padding: 16px 20px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.rp-card-head h3 {
    margin: 0;
    font-size: .95rem; font-weight: 800;
    color: #f4f4f5;
    display: flex; align-items: center; gap: 9px;
}
.rp-card-head h3 i {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(59,130,246,.15);
    color: #93c5fd;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
}
.rp-card-head .meta { font-size: .72rem; color: #a1a1aa; font-weight: 700; }
.rp-card-body { padding: 18px 20px; }
.rp-chart-canvas { height: 260px; position: relative; }
.rp-chart-canvas.tall { height: 320px; }

body:not(.dark-mode) .rp-card { background: #fff; border-color: #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
body:not(.dark-mode) .rp-card-head { border-bottom-color: #e5e7eb; }
body:not(.dark-mode) .rp-card-head h3 { color: #111827; }
body:not(.dark-mode) .rp-card-head .meta { color: #6b7280; }
body:not(.dark-mode) .rp-card-head h3 i { background: rgba(59,130,246,.1); color: #2563eb; }

/* ── Marketing pixels card ───────────────────────────────────
   Each cell uses --pxc (set inline) for the platform brand accent.
   Active cells get a soft tinted background + side bar; inactive
   ones stay muted so the eye lands on what's wired up. */
.rp-pixel-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(239,68,68,.12); color: #f87171;
    font-size: .68rem; font-weight: 800; letter-spacing: .02em;
    margin-inline-end: 8px;
}
.rp-pixel-badge.is-on { background: rgba(16,185,129,.14); color: #34d399; }
body:not(.dark-mode) .rp-pixel-badge { background: rgba(239,68,68,.1); color: #b91c1c; }
body:not(.dark-mode) .rp-pixel-badge.is-on { background: rgba(16,185,129,.1); color: #047857; }
.rp-pixel-cta {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .68rem; font-weight: 800; color: #93c5fd;
    text-decoration: none; padding: 4px 10px;
    border-radius: 999px;
    background: rgba(59,130,246,.12);
    transition: background .15s ease;
}
.rp-pixel-cta:hover { background: rgba(59,130,246,.22); color: #bfdbfe; }
body:not(.dark-mode) .rp-pixel-cta { color: #1d4ed8; background: rgba(59,130,246,.1); }
body:not(.dark-mode) .rp-pixel-cta:hover { background: rgba(59,130,246,.18); }

.rp-pixel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.rp-pixel-cell {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.05);
    transition: transform .15s ease, background .15s ease;
}
.rp-pixel-cell::before {
    content: '';
    position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px;
    width: 3px; border-radius: 2px;
    background: rgba(148,163,184,.3);
}
.rp-pixel-cell.is-on { background: color-mix(in srgb, var(--pxc) 7%, transparent); border-color: color-mix(in srgb, var(--pxc) 18%, transparent); }
.rp-pixel-cell.is-on::before { background: var(--pxc); }
.rp-pixel-cell.is-on:hover { transform: translateY(-1px); }
.rp-pixel-cell.is-off { opacity: .65; }

body:not(.dark-mode) .rp-pixel-cell { background: #f9fafb; border-color: #e5e7eb; }
body:not(.dark-mode) .rp-pixel-cell.is-on { background: color-mix(in srgb, var(--pxc) 8%, #fff); border-color: color-mix(in srgb, var(--pxc) 25%, #fff); }

.rp-pixel-ico {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    background: color-mix(in srgb, var(--pxc) 18%, transparent);
    color: var(--pxc);
}
.rp-pixel-cell.is-off .rp-pixel-ico { background: rgba(148,163,184,.12); color: #94a3b8; }
.rp-pixel-info { flex: 1; min-width: 0; }
.rp-pixel-name {
    font-size: .8rem; font-weight: 800; color: #f4f4f5;
    display: flex; align-items: center; gap: 6px;
}
body:not(.dark-mode) .rp-pixel-name { color: #111827; }
.rp-pixel-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(239,68,68,.18);
}
.rp-pixel-cell.is-on .rp-pixel-dot {
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16,185,129,.22);
}
.rp-pixel-id {
    margin-top: 2px;
    font-size: .68rem; font-weight: 700;
    color: #a1a1aa;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .04em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-pixel-id.muted { color: #71717a; font-style: italic; font-family: inherit; letter-spacing: 0; }
body:not(.dark-mode) .rp-pixel-id { color: #6b7280; }
body:not(.dark-mode) .rp-pixel-id.muted { color: #9ca3af; }

.rp-pixel-stat { text-align: center; padding-inline-start: 6px; }
.rp-pixel-stat .num {
    font-size: 1.05rem; font-weight: 900;
    color: var(--pxc);
    line-height: 1;
}
.rp-pixel-cell.is-off .rp-pixel-stat .num { color: #71717a; }
.rp-pixel-stat .lbl {
    font-size: .62rem; font-weight: 700;
    color: #a1a1aa;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 3px;
}
body:not(.dark-mode) .rp-pixel-stat .lbl { color: #6b7280; }

.rp-pixel-empty {
    margin-top: 12px;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(245,158,11,.08);
    border: 1px dashed rgba(245,158,11,.25);
    color: #fbbf24;
    font-size: .78rem; font-weight: 600;
}
body:not(.dark-mode) .rp-pixel-empty { background: rgba(245,158,11,.08); color: #b45309; border-color: rgba(245,158,11,.35); }

/* ── Source/payment list ── */
.rp-bar-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.rp-bar-item:last-child { border-bottom: none; }
.rp-bar-ico {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,.04);
    color: #d4d4d8;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.rp-bar-grow { flex: 1; min-width: 0; }
.rp-bar-row1 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.rp-bar-name { font-size: .82rem; font-weight: 800; color: #f4f4f5; }
.rp-bar-val  { font-size: .78rem; font-weight: 800; color: #a1a1aa; }
.rp-bar-track {
    height: 6px;
    background: rgba(255,255,255,.05);
    border-radius: 999px;
    overflow: hidden;
}
.rp-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #3b82f6, #93c5fd);
}
body:not(.dark-mode) .rp-bar-item { border-bottom-color: #f3f4f6; }
body:not(.dark-mode) .rp-bar-ico  { background: #f3f4f6; color: #4b5563; }
body:not(.dark-mode) .rp-bar-name { color: #111827; }
body:not(.dark-mode) .rp-bar-val  { color: #6b7280; }
body:not(.dark-mode) .rp-bar-track { background: #e5e7eb; }

/* ── Heatmap (day of week) ── */
.rp-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.rp-week-cell {
    aspect-ratio: 1;
    border-radius: 10px;
    background: rgba(59,130,246,.08);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #f4f4f5;
    padding: 4px;
    border: 1px solid rgba(59,130,246,.1);
    transition: transform .15s;
}
.rp-week-cell:hover { transform: scale(1.04); }
.rp-week-cell .day { font-size: .65rem; color: #a1a1aa; font-weight: 700; margin-bottom: 2px; }
.rp-week-cell .cnt { font-size: 1rem; font-weight: 900; }
body:not(.dark-mode) .rp-week-cell { color: #111827; border-color: rgba(59,130,246,.18); }
body:not(.dark-mode) .rp-week-cell .day { color: #6b7280; }

/* ── List tables (top products / customers) ── */
.rp-list { padding: 8px 0; }
.rp-list-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 20px;
    transition: background .12s;
}
.rp-list-item:hover { background: rgba(255,255,255,.03); }
.rp-list-rank {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(59,130,246,.15);
    color: #93c5fd;
    font-size: .72rem; font-weight: 900;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rp-list-rank.top1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #422006; }
.rp-list-rank.top2 { background: linear-gradient(135deg, #d4d4d8, #a1a1aa); color: #18181b; }
.rp-list-rank.top3 { background: linear-gradient(135deg, #fb923c, #ea580c); color: #fff; }
.rp-list-thumb {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.06);
}
.rp-list-info { flex: 1; min-width: 0; }
.rp-list-name {
    font-size: .85rem; font-weight: 800;
    color: #f4f4f5;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-list-meta { font-size: .72rem; color: #a1a1aa; font-weight: 600; margin-top: 2px; }
.rp-list-val {
    font-size: .88rem; font-weight: 900;
    color: #34d399;
    white-space: nowrap;
    flex-shrink: 0;
}
.rp-list-val.muted { color: #d4d4d8; }
body:not(.dark-mode) .rp-list-item:hover { background: #f9fafb; }
body:not(.dark-mode) .rp-list-rank { background: rgba(59,130,246,.1); color: #2563eb; }
body:not(.dark-mode) .rp-list-name { color: #111827; }
body:not(.dark-mode) .rp-list-meta { color: #6b7280; }
body:not(.dark-mode) .rp-list-val  { color: #047857; }
body:not(.dark-mode) .rp-list-val.muted { color: #374151; }
body:not(.dark-mode) .rp-list-thumb { background: #f9fafb; border-color: #e5e7eb; }

.rp-list-empty {
    padding: 32px 20px;
    text-align: center;
    color: #a1a1aa;
    font-size: .82rem;
    font-weight: 600;
}
body:not(.dark-mode) .rp-list-empty { color: #6b7280; }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/shipping/index.blade.php
═══════════════════════════════════════════════════════════ */

    .card-ui {
        background: var(--bg-surface);
        border-radius: var(--radius-xl);
        padding: var(--space-6);
        border: 1px solid var(--border-soft);
        box-shadow: var(--shadow-sm);
        margin-bottom: var(--space-6);
    }

    .form-label-premium {
        font-size: 0.75rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-title);
        margin-bottom: 0.5rem;
    }

    .btn-action {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        border: none;
        transition: var(--transition-base);
    }
    .btn-action:hover { transform: translateY(-2px); }

    .warning-alert {
        background: #fff7ed;
        border: 1px solid #fed7aa;
        color: #92400e;
        border-radius: var(--radius-lg);
        padding: var(--space-3) var(--space-4);
        font-size: 0.8125rem;
        font-weight: 600;
        margin-top: var(--space-2);
        display: none;
    }

    @media (max-width: 768px) {
        .custom-table thead { display: none; }
        .custom-table tr {
            display: block;
            background: var(--bg-card);
            border-radius: var(--radius-xl);
            margin-bottom: var(--space-4);
            padding: var(--space-4);
            border: 1px solid var(--border-main);
            box-shadow: var(--shadow-sm);
        }
        .custom-table td { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            border: none; 
            padding: var(--space-2) 0; 
            border-bottom: 1px solid var(--border-soft); 
        }
        .custom-table td:last-child { border-bottom: none; justify-content: center; margin-top: 10px; }
        .custom-table td::before {
            content: attr(data-label);
            font-weight: 800;
            color: var(--text-title);
            font-size: 0.75rem;
            text-transform: uppercase;
        }
    }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/smart_offers/index.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   SMART OFFERS HUB — Revenue module, da3-* design system
   ═══════════════════════════════════════════════════════════ */
.so-page {
    --da3-card:    #1c1c1f;
    --da3-bd:      rgba(255,255,255,.055);
    --da3-bg2:     #111113;
    --da3-shadow:  0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-fg1:     #f4f4f5;
    --da3-fg2:     #a1a1aa;
    --da3-fg3:     #71717a;
    --da3-line:    rgba(255,255,255,.06);
    --da3-r:       12px;
    --da3-gap:     16px;
    --da3-accent:  #8b5cf6;
    --da3-abg:     rgba(139,92,246,.12);
    --da3-success: #10b981; --da3-success-bg: rgba(16,185,129,.12);
    --da3-warn:    #f59e0b; --da3-warn-bg:    rgba(245,158,11,.12);
    --da3-danger:  #ef4444; --da3-danger-bg:  rgba(239,68,68,.12);
}
body:not(.dark-mode) .so-page {
    --da3-card:    #ffffff;
    --da3-bd:      #e5e7eb;
    --da3-bg2:     #f8fafc;
    --da3-shadow:  0 1px 3px rgba(0,0,0,.06), 0 0 0 1px #e5e7eb;
    --da3-fg1:     #0f172a;
    --da3-fg2:     #475569;
    --da3-fg3:     #94a3b8;
    --da3-line:    #f1f5f9;
    --da3-abg:     rgba(139,92,246,.08);
    --da3-success-bg: #d1fae5;
    --da3-warn-bg:    #fef3c7;
    --da3-danger-bg:  #fee2e2;
}

/* ── Hero / header ── */
.so-hero {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    padding: 22px 26px;
    margin-bottom: var(--da3-gap);
    display: flex;
    align-items: center; gap: 18px;
    flex-wrap: wrap;
}
.so-hero-ico {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    box-shadow: 0 8px 22px rgba(139,92,246,.32);
    flex-shrink: 0;
}
.so-hero-text { flex: 1; min-width: 220px; }
.so-hero h1 {
    font-size: 20px; font-weight: 700;
    margin: 0 0 4px;
    color: var(--da3-fg1);
    letter-spacing: -.02em;
}
.so-hero p { font-size: 13px; color: var(--da3-fg3); margin: 0; }
.so-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.so-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 16px;
    border-radius: 10px;
    font-size: 13px; font-weight: 700;
    border: 1px solid var(--da3-bd);
    background: var(--da3-bg2);
    color: var(--da3-fg1);
    text-decoration: none;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.so-btn:hover { transform: translateY(-1px); border-color: var(--da3-accent); color: var(--da3-accent); }
.so-btn.primary {
    background: linear-gradient(135deg, var(--da3-accent), #ec4899);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(139,92,246,.32);
}
.so-btn.primary:hover { color: #fff; filter: brightness(1.08); }
.so-btn.danger { color: var(--da3-danger); }
.so-btn.danger:hover { border-color: var(--da3-danger); color: var(--da3-danger); }

/* ── Stats grid ── */
.so-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: var(--da3-gap);
}
.so-stat {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    padding: 16px 18px;
    display: flex; align-items: center; gap: 12px;
    transition: transform .15s, border-color .15s;
    position: relative; overflow: hidden;
}
.so-stat:hover { transform: translateY(-2px); border-color: var(--da3-accent); }
.so-stat-ico {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.so-stat-num {
    font-size: 19px; font-weight: 800;
    color: var(--da3-fg1);
    line-height: 1.1; letter-spacing: -.02em;
}
.so-stat-lbl { font-size: 11.5px; color: var(--da3-fg3); margin-top: 2px; font-weight: 600; }

/* ── Quick-create grid (4 type cards) ── */
.so-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: var(--da3-gap);
}
.so-type-card {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    padding: 18px 20px;
    display: flex; align-items: center; gap: 14px;
    transition: transform .15s, border-color .15s, box-shadow .15s;
    text-decoration: none;
    cursor: pointer;
}
.so-type-card:hover {
    transform: translateY(-3px);
    border-color: currentColor;
    box-shadow: 0 14px 32px rgba(0,0,0,.18);
}
.so-type-card-ico {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}
.so-type-card-body h4 {
    font-size: 14px; font-weight: 700;
    color: var(--da3-fg1); margin: 0 0 2px;
}
.so-type-card-body p { font-size: 11.5px; color: var(--da3-fg3); margin: 0; }

/* ── Filters bar ── */
.so-filters {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    padding: 14px 18px;
    margin-bottom: var(--da3-gap);
}
.so-search {
    position: relative;
    max-width: 380px;
    margin-bottom: 12px;
}
.so-search input {
    width: 100%; height: 38px;
    padding: 0 14px 0 38px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    border-radius: 9px;
    color: var(--da3-fg1);
    font-size: 13px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
html[dir="rtl"] .so-search input { padding: 0 38px 0 14px; }
.so-search input:focus {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px var(--da3-abg);
}
.so-search i {
    position: absolute; top: 50%; transform: translateY(-50%);
    inset-inline-start: 14px;
    color: var(--da3-fg3); font-size: 13px;
    pointer-events: none;
}
.so-filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.so-filter-row + .so-filter-row { margin-top: 8px; }
.so-chip {
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg2);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 12px; font-weight: 600;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.so-chip:hover { color: var(--da3-accent); border-color: var(--da3-accent); }
.so-chip.is-on {
    background: var(--da3-accent);
    color: #fff;
    border-color: var(--da3-accent);
}
.so-chip i { font-size: 11px; }
.so-filter-label {
    font-size: 11px; font-weight: 700;
    color: var(--da3-fg3);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 8px 0 0;
    align-self: center;
}

/* ── Offers table / list ── */
.so-list-wrap {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    overflow: hidden;
}
.so-row {
    display: grid;
    grid-template-columns: 1fr 120px 140px 180px 120px;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--da3-line);
    align-items: center;
    transition: background .15s;
}
.so-row:last-child { border-bottom: 0; }
.so-row:hover { background: var(--da3-bg2); }
.so-row.head {
    background: var(--da3-bg2);
    font-size: 11px; font-weight: 700;
    color: var(--da3-fg3);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.so-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.so-name-ico {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.so-name-text { min-width: 0; }
.so-name-text h5 {
    font-size: 13.5px; font-weight: 700;
    color: var(--da3-fg1);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.so-name-text small { font-size: 11px; color: var(--da3-fg3); }
.so-type-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    color: var(--da3-fg2);
    width: fit-content;
}
.so-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    width: fit-content;
}
.so-status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.so-metric { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--da3-fg3); }
.so-metric b { font-size: 13px; color: var(--da3-fg1); font-weight: 700; }
.so-row-actions { display: flex; gap: 5px; justify-content: flex-end; }
.so-icon-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg2);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all .15s;
    text-decoration: none;
}
.so-icon-btn:hover { color: var(--da3-accent); border-color: var(--da3-accent); }
.so-icon-btn.danger:hover { color: var(--da3-danger); border-color: var(--da3-danger); }

/* ── Empty state ── */
.so-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--da3-fg3);
}
.so-empty i { font-size: 48px; opacity: .3; display: block; margin: 0 auto 14px; }
.so-empty h4 { color: var(--da3-fg2); font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.so-empty p { font-size: 13px; margin: 0 0 16px; }

/* ── RTL ── */
html[dir="rtl"] .so-page .fa-arrow-right,
html[dir="rtl"] .so-page .fa-arrow-left,
html[dir="rtl"] .so-page .fa-chevron-right,
html[dir="rtl"] .so-page .fa-chevron-left { transform: scaleX(-1); }

/* ── Responsive ── */
@media (max-width: 980px) {
    .so-row { grid-template-columns: 1fr 100px 100px; }
    .so-row > :nth-child(4), .so-row > :nth-child(5) { display: none; }
    .so-row.head > :nth-child(4), .so-row.head > :nth-child(5) { display: none; }
}
@media (max-width: 600px) {
    .so-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 14px; }
    .so-row.head { display: none; }
    .so-row > :nth-child(2), .so-row > :nth-child(3) { display: none; }
    .so-row-actions { justify-content: flex-start; margin-top: 6px; }
    .so-stats { grid-template-columns: 1fr 1fr; }
    .so-types { grid-template-columns: 1fr 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/tawk_settings/tawk_setting.blade.php
═══════════════════════════════════════════════════════════ */

:root{
    --tawk:#4CAF50;
    --tawk-dark:#2E7D32;
    --text:#0f172a;
    --muted:#64748b;
    --card:#ffffff;
    --border:#e2e8f0;
}

/* LAYOUT */
.tw-wrap{max-width:1250px;margin:auto;}
.tw-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px}

/* HERO */
.tw-hero{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--tawk-dark),var(--tawk));
    border-radius:26px;
    padding:38px;
    color:#fff;
    margin-bottom:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.tw-hero::after{
    content:"";
    position:absolute;
    width:380px;height:380px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    right:-120px;top:-120px;
}
.tw-badge{
    background:#fff;
    color:var(--tawk-dark);
    padding:6px 14px;
    font-weight:800;
    border-radius:999px;
    font-size:12px;
    display:inline-block;
    margin-bottom:10px;
}

/* CARD */
.tw-card{
    background:var(--card);
    border-radius:22px;
    padding:30px;
    border:1px solid var(--border);
    box-shadow:0 15px 40px rgba(0,0,0,.05);
}
.tw-title{
    font-weight:900;
    font-size:18px;
    margin-bottom:24px;
    color:var(--text);
}

/* INFO LIST */
.tw-info{list-style:none;padding:0;margin:0}
.tw-info li{
    display:flex;
    gap:10px;
    font-size:14px;
    padding:10px 0;
    border-bottom:1px solid #f1f5f9;
}
.tw-info li:last-child{border:none}
.tw-info i{color:var(--tawk);margin-top:4px}

/* GUIDE BOX */
.tw-guide{
    background:#f0fdf4;
    border:1px dashed var(--tawk);
    border-radius:16px;
    padding:18px;
    margin-top:22px;
}
.tw-guide h6{
    font-weight:900;
    margin-bottom:10px;
    color:#14532d;
}
.tw-guide li{font-size:14px;margin-bottom:6px;color:#14532d}
textarea {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
}

textarea::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* FORM */
.form-control{
    border-radius:14px;
    padding:12px 14px;
}
.form-label{font-weight:700}

/* SWITCH */
.switch{width:56px;height:30px;position:relative}
.switch input{display:none}
.slider{
    position:absolute;inset:0;
    background:#e5e7eb;border-radius:999px;
    transition:.3s
}
.slider:before{
    content:"";position:absolute;
    width:22px;height:22px;
    left:4px;top:4px;
    background:#fff;border-radius:50%;
    transition:.3s;
    box-shadow:0 4px 10px rgba(0,0,0,.25)
}
.switch input:checked + .slider{background:var(--tawk)}
.switch input:checked + .slider:before{transform:translateX(26px)}

/* BUTTON */
.btn-tw{
    background:linear-gradient(135deg,var(--tawk),var(--tawk-dark));
    color:#fff;border:none;
    font-weight:900;
    border-radius:14px;
    padding:12px 28px;
}
.tw-link{
    color:var(--tawk);
    font-weight:800;
    text-decoration:none;
}
.tw-link:hover{
    text-decoration:underline;
    color:var(--tawk-dark);
}
/* ================= RTL ================= */
.tw-wrap{
    direction: rtl;
}
.tw-hero,
.tw-card,
.tw-info,
.tw-guide{
    text-align: right;
}

/* ================= MOBILE ================= */
@media (max-width:768px){

/* الشبكة */
.tw-grid{
    grid-template-columns:1fr;
    gap:18px;
}

/* HERO */
.tw-hero{
    flex-direction:column;
    text-align:center;
    padding:26px 18px;
    border-radius:22px;
}
.tw-hero img{
    margin-top:14px;
    width:54px !important;
}

/* الكروت */
.tw-card{
    padding:20px;
    border-radius:18px;
}

/* النصوص */
.tw-info li{
    font-size:13px;
    padding:8px 0;
}
.tw-guide li{
    font-size:13px;
}

/* الفورم */
.form-control{
    padding:10px 12px;
    font-size:14px;
}

/* السويتش صف لوحده */
.tw-card .d-flex.justify-content-between{
    flex-direction:column;
    align-items:flex-start !important;
    gap:10px;
}

/* زر الحفظ */
.btn-tw{
    width:100%;
    padding:12px 0;
    font-size:14px;
}

}



/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/tax/index.blade.php
═══════════════════════════════════════════════════════════ */


/* CARD */
.soft-card{
    background:#fff;
    border-radius:var(--card-radius);
    box-shadow:0 15px 40px rgba(0,0,0,.04);
    border:1px solid var(--border);
}

/* TITLE */
.page-title{
    font-size:20px;
    font-weight:700;
    color:var(--text-main);
}

/* FORM */
.form-control{
    height:46px;
    border-radius:12px;
    border:1px solid var(--border);
}
.form-control:focus{
    box-shadow:none;
    border-color:#c7d2fe;
}

/* BUTTONS */
.btn-soft-info{background:var(--info-bg);color:var(--info-text);border-radius:12px;font-size:13px;}
.btn-soft-success{background:var(--success-bg);color:var(--success-text);border-radius:12px;font-size:13px;}
.btn-soft-danger{background:var(--danger-bg);color:var(--danger-text);border-radius:12px;font-size:13px;}

/* TABLE */
.table thead th{
    font-size:13px;
    color:var(--muted);
    font-weight:600;
    background:var(--soft-bg);
    border-bottom:1px solid var(--border);
}
.table tbody td{
    vertical-align:middle;
    border-bottom:1px solid var(--border);
    font-size:14px;
}

/* STATUS */
.badge-success{color:var(--success-text);}
.badge-danger{color:var(--danger-text);}

/* WRAPPER */
.page-wrapper{max-width:1200px;margin:auto;}

/* MOBILE */
@media (max-width:768px){
    .soft-card{padding:16px !important;border-radius:14px;}
    .page-title{font-size:18px;text-align:center;}
    .table thead{display:none;}
    .table tbody tr{
        display:block;
        background:#fff;
        margin-bottom:14px;
        border-radius:14px;
        padding:12px;
        box-shadow:0 6px 20px rgba(0,0,0,.05);
    }
    .table tbody td{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:6px 0;
        border:none;
        font-size:14px;
    }
    .table tbody td::before{font-weight:600;color:#64748b;}
    .table tbody td:nth-child(1)::before{content:"#";}
    .table tbody td:nth-child(2)::before{content:"الاسم";}
    .table tbody td:nth-child(3)::before{content:"النوع";}
    .table tbody td:nth-child(4)::before{content:"القيمة";}
    .table tbody td:nth-child(5)::before{content:"الحالة";}
    .table tbody td:nth-child(6)::before{content:"الإجراءات";}
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/theme/add.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══ Theme add/edit — premium form (da3 tokens) ═══ */
.tform-page {
    --da3-card:    #1c1c1f;
    --da3-bd:      rgba(255,255,255,.055);
    --da3-bg2:     #111113;
    --da3-fg1:     #f4f4f5;
    --da3-fg2:     #a1a1aa;
    --da3-fg3:     #71717a;
    --da3-line:    rgba(255,255,255,.06);
    --da3-r:       12px;
    --da3-accent:  #3b82f6;
    max-width: 1100px;
    margin: 0 auto;
}
body:not(.dark-mode) .tform-page {
    --da3-card:    #ffffff;
    --da3-bd:      #e4e4e7;
    --da3-bg2:     #f9f9fb;
    --da3-fg1:     #09090b;
    --da3-fg2:     #52525b;
    --da3-fg3:     #a1a1aa;
    --da3-line:    #f4f4f5;
}
.tform-hero {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px;
    margin-bottom: 18px;
    border-radius: 14px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-bg2);
}
.tform-hero-ico {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.tform-hero h1 { font-size: 18px; font-weight: 800; color: var(--da3-fg1); margin: 0; }
.tform-hero p  { font-size: 12.5px; color: var(--da3-fg3); margin: 2px 0 0; }
.tform-back {
    margin-inline-start: auto;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
    font-size: 12.5px; font-weight: 700;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s;
}
.tform-back:hover { background: var(--da3-bg2); color: var(--da3-fg1); }

.tform-card {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 18px;
}
.tform-card-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--da3-line);
}
.tform-card-head .icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: rgba(59,130,246,.12);
    color: #3b82f6;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.tform-card-head h4 { font-size: 14px; font-weight: 800; color: var(--da3-fg1); margin: 0; flex: 1; }
.tform-card-head .step-no {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(59,130,246,.12);
    color: #3b82f6;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
}
.tform-card-body { padding: 18px 20px; }

.tform-field { margin-bottom: 14px; }
.tform-field label {
    display: block;
    font-size: 12.5px; font-weight: 700;
    color: var(--da3-fg1);
    margin-bottom: 6px;
}
.tform-field label .req { color: #ef4444; }
.tform-field input[type="text"],
.tform-field input[type="number"],
.tform-field input[type="url"],
.tform-field input[type="email"],
.tform-field select,
.tform-field textarea {
    width: 100%;
    padding: 0 14px;
    height: 42px;
    border: 1.5px solid var(--da3-bd);
    border-radius: 10px;
    background: var(--da3-bg2);
    color: var(--da3-fg1);
    font-size: 13px; font-weight: 500;
    font-family: inherit;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.tform-field textarea { height: auto; padding: 11px 14px; resize: vertical; min-height: 90px; line-height: 1.55; }
.tform-field input:focus, .tform-field select:focus, .tform-field textarea:focus {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.tform-help {
    font-size: 11px;
    color: var(--da3-fg3);
    margin-top: 4px;
}

.tform-color {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 12px;
    border: 1.5px solid var(--da3-bd);
    border-radius: 10px;
    background: var(--da3-bg2);
    height: 42px;
}
.tform-color input[type="color"] {
    width: 30px; height: 30px;
    border: 0; padding: 0; cursor: pointer;
    background: transparent;
    border-radius: 6px;
}
.tform-color input[type="text"] {
    border: 0; background: transparent; padding: 0;
    color: var(--da3-fg1);
    font-family: 'SF Mono', Consolas, monospace;
    font-weight: 800; font-size: 12.5px;
    text-transform: uppercase;
    flex: 1; outline: none; height: auto;
}

.tform-radio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 540px) { .tform-radio-grid { grid-template-columns: repeat(2, 1fr); } }
.tform-radio {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border: 1.5px solid var(--da3-bd);
    border-radius: 10px;
    background: var(--da3-bg2);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.tform-radio:hover { border-color: var(--da3-accent); }
.tform-radio input { position: absolute; opacity: 0; pointer-events: none; }
.tform-radio span { font-size: 12.5px; font-weight: 700; color: var(--da3-fg1); }
.tform-radio.is-selected {
    border-color: var(--da3-accent);
    background: rgba(59,130,246,.06);
    box-shadow: 0 0 0 2px rgba(59,130,246,.12);
}

.tform-toggle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 768px) { .tform-toggle-grid { grid-template-columns: repeat(2, 1fr); } }
.tform-toggle {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border: 1.5px solid var(--da3-bd);
    border-radius: 10px;
    background: var(--da3-bg2);
    cursor: pointer;
    user-select: none;
}
.tform-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.tform-toggle .knob {
    width: 18px; height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--da3-bd);
    background: var(--da3-card);
    display: inline-flex; align-items: center; justify-content: center;
    color: transparent;
    font-size: 9px;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
}
.tform-toggle input:checked + .knob {
    background: var(--da3-accent);
    border-color: var(--da3-accent);
    color: #fff;
}
.tform-toggle span { font-size: 12px; font-weight: 700; color: var(--da3-fg1); }

.tform-upload {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    border: 1.5px dashed var(--da3-bd);
    border-radius: 10px;
    background: var(--da3-bg2);
    cursor: pointer;
    position: relative;
    transition: border-color .2s;
}
.tform-upload:hover { border-color: var(--da3-accent); }
.tform-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tform-upload-preview {
    width: 80px; height: 56px;
    border-radius: 8px;
    background: var(--da3-card);
    background-size: cover; background-position: center;
    border: 1px solid var(--da3-bd);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--da3-fg3);
    flex-shrink: 0;
}
.tform-upload-info { flex: 1; }
.tform-upload-title { font-size: 12.5px; font-weight: 800; color: var(--da3-fg1); }
.tform-upload-sub   { font-size: 11px; color: var(--da3-fg3); margin-top: 2px; }

.tform-actions {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 18px 22px;
    border-top: 1px solid var(--da3-line);
    background: var(--da3-bg2);
}
.tform-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    font-size: 13px; font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: transform .15s, filter .15s, background .15s;
}
.tform-btn-primary {
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: #fff;
    box-shadow: 0 6px 18px -4px rgba(59,130,246,.55);
}
.tform-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.07); color: #fff; }
.tform-btn-secondary {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
}
.tform-btn-secondary:hover { background: var(--da3-bg2); color: var(--da3-fg1); }

.tform-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tform-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 768px) { .tform-grid-2, .tform-grid-3 { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/theme/edit.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   THEME EDIT — premium admin form (da3-* tokens)
   ═══════════════════════════════════════════════════════════ */
.te-page {
    --da3-card:    #1c1c1f;
    --da3-bd:      rgba(255,255,255,.055);
    --da3-bg2:     #111113;
    --da3-shadow:  0 0 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.32);
    --da3-fg1:     #f4f4f5;
    --da3-fg2:     #a1a1aa;
    --da3-fg3:     #71717a;
    --da3-line:    rgba(255,255,255,.06);
    --da3-r:       12px;
    --da3-gap:     16px;
    --da3-accent:  #3b82f6;
    --da3-abg:     rgba(59,130,246,.12);
    --da3-success: #10b981; --da3-success-bg: rgba(16,185,129,.12);
    --da3-warn:    #f59e0b; --da3-warn-bg:    rgba(245,158,11,.12);
    --da3-danger:  #ef4444;
}
body:not(.dark-mode) .te-page {
    --da3-card:    #ffffff;
    --da3-bd:      #e4e4e7;
    --da3-bg2:     #f8fafc;
    --da3-shadow:  0 1px 3px rgba(0,0,0,.06), 0 0 0 1px #e5e7eb;
    --da3-fg1:     #0f172a;
    --da3-fg2:     #475569;
    --da3-fg3:     #94a3b8;
    --da3-line:    #f1f5f9;
    --da3-abg:     rgba(59,130,246,.08);
}

/* Hero */
.te-hero {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    padding: 22px 26px;
    margin-bottom: var(--da3-gap);
    display: flex; align-items: center; gap: 18px;
    flex-wrap: wrap;
}
.te-hero-thumb {
    width: 72px; height: 72px;
    border-radius: 12px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    overflow: hidden;
    flex-shrink: 0;
}
.te-hero-thumb img { width: 100%; height: 100%; object-fit: cover; }
.te-hero-text { flex: 1; min-width: 200px; }
.te-hero h1 {
    font-size: 19px; font-weight: 700; color: var(--da3-fg1);
    margin: 0 0 4px; letter-spacing: -.02em;
}
.te-hero p {
    font-size: 13px; color: var(--da3-fg3); margin: 0;
    font-family: 'SF Mono', Menlo, monospace;
}
.te-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.te-link-btn {
    height: 36px; padding: 0 14px;
    border-radius: 9px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
    font-size: 12.5px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 7px;
    text-decoration: none;
    transition: all .15s;
}
.te-link-btn:hover { color: var(--da3-accent); border-color: var(--da3-accent); transform: translateY(-1px); }

/* Main 2-column layout — content on the left, sticky stats on the right */
.te-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--da3-gap);
    align-items: start;
}
@media (max-width: 1100px) { .te-grid { grid-template-columns: 1fr; } }

/* Inner 2-card row inside the main column (status + language support) */
.te-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--da3-gap);
    align-items: start;
}
@media (max-width: 900px) { .te-grid-2 { grid-template-columns: 1fr; } }

/* Sticky side column — keeps the stats panel visible while scrolling */
.te-side { position: sticky; top: 20px; }

/* Cards */
.te-card {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    padding: 22px 26px;
    margin-bottom: var(--da3-gap);
}
.te-card h3 {
    font-size: 14px; font-weight: 700;
    color: var(--da3-fg1);
    margin: 0 0 4px;
    letter-spacing: -.01em;
}
.te-card h3 + p {
    color: var(--da3-fg3); font-size: 12px;
    margin: 0 0 18px; line-height: 1.5;
}

/* Form fields */
.te-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.te-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.te-row-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .te-row-2, .te-row-3, .te-row-4 { grid-template-columns: 1fr; } }

.te-field { margin-bottom: 14px; }
.te-field:last-child { margin-bottom: 0; }
.te-field label {
    display: block;
    font-size: 12.5px; font-weight: 600;
    color: var(--da3-fg1);
    margin-bottom: 6px;
}
.te-field label .req { color: var(--da3-danger); margin-inline-start: 3px; }
.te-field input[type="text"],
.te-field input[type="number"],
.te-field input[type="url"],
.te-field textarea,
.te-field select {
    width: 100%;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
    border-radius: 9px;
    padding: 10px 13px;
    font-size: 13.5px;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}

/* Clean native-style chevron on select dropdowns (replaces the
   browser's default red/underlined option styling). */
.te-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: right 12px center;
    padding-inline-end: 34px;
    cursor: pointer;
}
html[dir="rtl"] .te-field select {
    background-position: left 12px center;
    padding-inline-end: 13px;
    padding-inline-start: 34px;
}
/* Style each <option> so it inherits the form palette
   (light dropdown panel on some browsers default to white). */
.te-field select option {
    background: var(--da3-card);
    color: var(--da3-fg1);
    font-weight: 500;
}

.te-field input:focus, .te-field textarea:focus, .te-field select:focus {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px var(--da3-abg);
}
.te-field textarea { min-height: 80px; resize: vertical; }
.te-field small { display: block; margin-top: 5px; color: var(--da3-fg3); font-size: 11.5px; }

/* Color input wrapper */
.te-color {
    display: flex; align-items: center; gap: 8px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    border-radius: 9px;
    padding: 6px 10px;
}
.te-color input[type="color"] {
    width: 36px; height: 36px;
    border: 0; padding: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
}
.te-color input[type="text"] {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--da3-fg1);
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 13px;
    padding: 8px 4px;
    outline: none;
    text-transform: uppercase;
}

/* Toggle */
.te-toggle {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    border-radius: 9px;
    margin-bottom: 8px;
    transition: border-color .15s, background .15s;
}
.te-toggle:last-child { margin-bottom: 0; }

/* Wrap container — packs toggles into a 2-up grid so a card with 6+
   toggles is half as tall. Each toggle keeps its full label+switch
   layout but its outer margin is reset so the grid `gap` controls
   spacing. Collapses to 1-up on narrow screens. */
.te-toggle-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.te-toggle-wrap > .te-toggle { margin-bottom: 0; }
@media (max-width: 600px) {
    .te-toggle-wrap { grid-template-columns: 1fr; }
}

/* Support-toggle group — radio-style rows arranged as a 3-up grid so
   the "exactly one of three" choice is visible at a glance. The
   `.te-support-label` and any trailing hidden inputs span the full
   row so they don't break the grid layout. */
.te-support-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.te-support-label {
    grid-column: 1 / -1;
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--da3-fg3);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.te-support-group .te-toggle {
    margin-bottom: 0;
    cursor: pointer;
}
.te-support-group > input[type="hidden"] { grid-column: 1 / -1; }
@media (max-width: 600px) {
    .te-support-group { grid-template-columns: 1fr; }
}

.te-toggle-body b { display: block; font-size: 13px; font-weight: 700; color: var(--da3-fg1); }
.te-toggle-body small { font-size: 11.5px; color: var(--da3-fg3); }
.te-switch {
    position: relative;
    width: 38px; height: 22px;
    background: #52525b;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
    margin-top: 2px;
}
.te-switch::after {
    content: '';
    position: absolute;
    top: 2px; inset-inline-start: 2px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform .18s, inset-inline-start .18s;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.te-switch input { opacity: 0; position: absolute; pointer-events: none; }
.te-switch:has(input:checked) { background: var(--da3-accent); }
.te-switch:has(input:checked)::after { inset-inline-start: 18px; }

/* Compact image picker — horizontal layout to keep the row height matched
   to the sibling inputs (category / slug). Thumbnail on the inline-start,
   choose-button on the inline-end. Live preview updates via FileReader. */
.te-image-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--da3-bg2);
    border: 1px dashed var(--da3-bd);
    border-radius: 9px;
    padding: 8px;
    transition: border-color .15s, background .15s;
    height: 60px;        /* matches the height of category/slug inputs */
    box-sizing: border-box;
}
.te-image-picker:hover { border-color: var(--da3-accent); }
.te-image-thumb {
    width: 60px;
    height: 44px;
    border-radius: 7px;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    overflow: hidden;
    flex-shrink: 0;
}
.te-image-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.te-image-controls {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}
.te-image-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%;
    height: 30px;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
    border-radius: 7px;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}
.te-image-btn:hover { border-color: var(--da3-accent); color: var(--da3-accent); }
.te-image-btn i { font-size: 10.5px; }
.te-image-filename {
    display: block;
    font-size: 10.5px;
    color: var(--da3-fg3);
    font-family: 'SF Mono', Menlo, monospace;
    direction: ltr;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 12px;
}

/* Stats card — three editable metrics in a single row */
.te-stats-card h3 {
    font-size: 14px; font-weight: 700;
    color: var(--da3-fg1);
    margin: 0 0 4px;
    letter-spacing: -.01em;
}
.te-stats-card h3 + p {
    color: var(--da3-fg3); font-size: 12px;
    margin: 0 0 18px; line-height: 1.5;
}
/* Stats inputs stack vertically in the narrow side column.
   On smaller screens (where the side column collapses below the main),
   they spread out into a 3-up row again to use the wider real-estate. */
.te-stats-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (max-width: 1100px) {
    .te-stats-row { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 700px) {
    .te-stats-row { grid-template-columns: 1fr; }
}
.te-stat-field { position: relative; }
.te-stat-field label {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--da3-fg2);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.te-stat-field label i {
    width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--da3-accent);
    font-size: 11px;
}
.te-stat-field input[type="number"] {
    width: 100%;
    height: 40px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
    border-radius: 9px;
    padding: 0 14px;
    font-size: 14.5px;
    font-weight: 600;
    font-family: 'Inter','SF Mono', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.te-stat-field input[type="number"]:focus {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px var(--da3-abg);
}
.te-palette-strip {
    display: flex; height: 36px;
    border-radius: 9px;
    overflow: hidden;
    border: 1px solid var(--da3-bd);
    margin-bottom: 12px;
}
.te-palette-strip > span { flex: 1; }
.te-summary-row {
    display: flex; justify-content: space-between;
    padding: 8px 0;
    font-size: 12.5px;
    color: var(--da3-fg2);
    border-bottom: 1px dashed var(--da3-line);
}
.te-summary-row:last-child { border-bottom: 0; }
.te-summary-row b { color: var(--da3-fg1); font-weight: 700; }
.te-summary-sub {
    margin: 4px 0 12px;
    font-size: 11.5px;
    color: var(--da3-fg3);
    line-height: 1.5;
}

/* Rating input has a "/ 5" suffix to make the scale obvious */
.te-rating-input { position: relative; }
.te-rating-input input { padding-inline-end: 44px !important; }
.te-rating-suffix {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    inset-inline-end: 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--da3-fg3);
    pointer-events: none;
    font-family: 'Inter','SF Mono', system-ui, sans-serif;
}

/* Actions footer */
.te-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 18px 0;
}
.te-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 40px; padding: 0 22px;
    border-radius: 10px;
    font-size: 13px; font-weight: 700;
    border: 1px solid var(--da3-bd);
    background: var(--da3-card);
    color: var(--da3-fg1);
    text-decoration: none;
    cursor: pointer;
    transition: all .15s;
}
.te-btn:hover { transform: translateY(-1px); border-color: var(--da3-accent); }
.te-btn.primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(59,130,246,.32);
}
.te-btn.primary:hover { color: #fff; filter: brightness(1.08); }

html[dir="rtl"] .te-page .fa-arrow-left,
html[dir="rtl"] .te-page .fa-arrow-right { transform: scaleX(-1); }


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/theme/index.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   THEMES MARKETPLACE — Premium card grid (matches addons design)
   ═══════════════════════════════════════════════════════════════ */
.da3.da3-admin { --role-accent: #7c3aed; --role-accent-soft: rgba(124,58,237,.1); }
.da3-admin .da3-btn-primary { box-shadow: 0 2px 8px rgba(124,58,237,.32); }

.da3-role-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    background: rgba(124,58,237,.12); color: #a78bfa;
}
.da3-role-badge .da3-live-dot { background: #10b981; }

/* ── Toolbar ── */
.thm-toolbar {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: var(--da3-r);
    box-shadow: var(--da3-shadow);
    padding: 12px 16px;
    margin-bottom: var(--da3-gap);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.thm-search { flex: 1; min-width: 220px; position: relative; }
.thm-search i {
    position: absolute; top: 50%; transform: translateY(-50%);
    color: var(--da3-fg3); font-size: 13px; pointer-events: none;
}
html[dir="rtl"] .thm-search i { right: 14px; }
html[dir="ltr"] .thm-search i { left: 14px; }
.thm-search input {
    width: 100%; height: 40px; padding: 0 40px;
    background: var(--da3-bg2);
    border: 1.5px solid var(--da3-bd);
    border-radius: 10px;
    color: var(--da3-fg1);
    font-size: 13px; font-weight: 600; font-family: inherit;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.thm-search input::placeholder { color: var(--da3-fg3); }
.thm-search input:focus {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}

.thm-filters {
    display: inline-flex; gap: 4px;
    background: var(--da3-bg2);
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--da3-bd);
}
.thm-filter-pill {
    padding: 7px 14px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--da3-fg2);
    font-size: 12px; font-weight: 700; font-family: inherit;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex; align-items: center; gap: 6px;
}
.thm-filter-pill:hover:not(.is-active) { color: var(--da3-fg1); background: var(--da3-card); }
.thm-filter-pill.is-active {
    background: var(--da3-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(124,58,237,.32);
}
.thm-filter-pill .count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
    color: #fff;
    font-size: 10.5px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.thm-filter-pill:not(.is-active) .count {
    background: var(--da3-card);
    color: var(--da3-fg3);
    border: 1px solid var(--da3-line);
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM CARD GRID
   ═══════════════════════════════════════════════════════════════ */
.thm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 18px;
    align-items: stretch;
}

/* ── Card shell ── */
.thm-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--da3-card);
    border: 1.5px solid var(--da3-bd);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 1px var(--da3-bd);
    transition: transform .25s cubic-bezier(.4,0,.2,1),
                box-shadow .25s,
                border-color .15s;
    height: 100%;
    --card-accent: #a78bfa;
}
.thm-card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, transparent, transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s;
    z-index: 2;
}
.thm-card:hover {
    transform: translateY(-4px) scale(1.005);
    box-shadow: 0 20px 40px rgba(0,0,0,.18),
                0 0 0 1px var(--card-accent),
                0 8px 32px color-mix(in srgb, var(--card-accent) 25%, transparent);
    border-color: transparent;
}
.thm-card:hover::before {
    background: linear-gradient(135deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 50%, transparent));
    opacity: 1;
}
.thm-card.is-inactive { opacity: .55; filter: saturate(.7); }
.thm-card.is-inactive:hover { opacity: 1; filter: saturate(1); }

/* ── Cover area (theme preview — taller aspect for visual impact) ── */
.thm-cover {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--card-accent) 18%, transparent),
        color-mix(in srgb, var(--card-accent) 5%, var(--da3-bg2)));
}
.thm-cover-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center top;
    transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.thm-card:hover .thm-cover-bg { transform: scale(1.06); }
.thm-cover::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 45%,
        rgba(15,23,42,.65) 100%);
    pointer-events: none;
}
.thm-cover-fallback {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 56px;
    color: color-mix(in srgb, var(--card-accent) 55%, transparent);
    opacity: .85;
    z-index: 1;
}

/* Floating chips on cover */
.thm-cover-chips {
    position: absolute; top: 12px; left: 12px; right: 12px;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px;
    z-index: 3;
    pointer-events: none;
}
.thm-cover-chips > * { pointer-events: auto; }
.thm-cover-chips-start { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.thm-cover-chips-end   { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

.thm-flag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(255,255,255,.18);
}
.thm-flag i { font-size: 9px; }
.thm-flag.is-status-on  { background: rgba(16,185,129,.85);  color: #fff; }
.thm-flag.is-status-off { background: rgba(15,23,42,.75);    color: rgba(255,255,255,.85); }
.thm-flag.is-featured   { background: linear-gradient(135deg, rgba(245,158,11,.95), rgba(217,119,6,.95)); color: #fff; }
.thm-flag.is-new        { background: rgba(16,185,129,.85);  color: #fff; }
.thm-flag.is-id         { background: rgba(15,23,42,.55);    color: #fff; font-family: 'SF Mono', Menlo, monospace; }
.thm-flag .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: thmPulse 2s ease-in-out infinite;
}
@keyframes thmPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.3); } }

/* Bottom-edge price overlay — same adaptive logic as addons */
.thm-cover-price {
    position: absolute;
    bottom: 12px;
    inset-inline-end: 12px;
    z-index: 3;
    display: inline-flex; align-items: baseline; gap: 3px;
    padding: 7px 13px;
    background: var(--da3-card);
    border: 1.5px solid var(--da3-bd);
    border-radius: 12px;
    box-shadow:
        0 6px 18px rgba(0,0,0,.25),
        0 0 0 4px rgba(255,255,255,.06);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    color: var(--da3-fg1);
}
body:not(.dark-mode) .thm-cover-price {
    background: #ffffff;
    border-color: #e4e4e7;
    box-shadow:
        0 8px 22px rgba(15, 23, 42, .18),
        0 0 0 3px rgba(255, 255, 255, .6);
}
.thm-cover-price-amount {
    font-size: 16.5px; font-weight: 900;
    color: var(--da3-fg1);
    line-height: 1;
}
body:not(.dark-mode) .thm-cover-price-amount { color: #09090b; }
.thm-cover-price-cur {
    font-size: 11.5px; font-weight: 700;
    color: var(--da3-fg2);
    margin-inline-start: 2px;
    line-height: 1;
}
body:not(.dark-mode) .thm-cover-price-cur { color: #475569; }
.thm-cover-price-lifetime {
    display: inline-flex; align-items: center; gap: 4px;
    margin-inline-start: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,.18);
    color: inherit;
    font-size: 9.5px; font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
}
.thm-cover-price-lifetime i { font-size: 8px; }
body:not(.dark-mode) .thm-cover-price-lifetime { background: rgba(0,0,0,.06); }
.thm-cover-price.is-free {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #059669;
    box-shadow:
        0 6px 18px rgba(16, 185, 129, .42),
        0 0 0 4px rgba(16, 185, 129, .08);
    color: #ffffff !important;
    padding: 8px 14px;
}
.thm-cover-price.is-free .thm-cover-price-amount {
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #ffffff !important;
}
body:not(.dark-mode) .thm-cover-price.is-free .thm-cover-price-amount { color: #ffffff !important; }

/* ── Body ── */
.thm-card-body {
    flex: 1;
    padding: 16px 18px 14px;
    display: flex; flex-direction: column;
    gap: 10px;
    background: var(--da3-card);
    position: relative;
    z-index: 1;
}

/* Title row with mini accent icon */
.thm-title-row {
    display: flex; align-items: flex-start; gap: 10px;
}
.thm-title-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--card-accent) 14%, transparent);
    color: var(--card-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.thm-title-text { flex: 1; min-width: 0; }
.thm-card-name {
    font-size: 15px; font-weight: 800;
    color: var(--da3-fg1);
    margin: 0 0 3px;
    line-height: 1.3;
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.thm-card-name-alt {
    display: inline-block;
    font-size: 11px;
    color: var(--da3-fg3);
    font-weight: 500;
    direction: ltr; unicode-bidi: isolate;
}

/* Mini info row */
.thm-meta-row {
    display: flex; align-items: center; gap: 12px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px dashed var(--da3-line);
    flex-wrap: wrap;
}
.thm-meta-item {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700;
    color: var(--da3-fg2);
}
.thm-meta-item i {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: var(--da3-bg2);
    color: var(--card-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px;
}

/* ── Footer (actions) ── */
.thm-foot {
    padding: 12px 18px;
    background: var(--da3-bg2);
    border-top: 1px solid var(--da3-line);
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
}
.thm-foot-info {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 700;
    color: var(--da3-fg3);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.thm-foot-info i { font-size: 10px; opacity: .7; }

.thm-actions { display: flex; gap: 4px; align-items: center; }
.thm-act {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg2);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    transition: all .15s;
    text-decoration: none;
}
.thm-act:hover {
    color: var(--card-accent, var(--da3-accent));
    border-color: var(--card-accent, var(--da3-accent));
    background: color-mix(in srgb, var(--card-accent, var(--da3-accent)) 10%, transparent);
    transform: translateY(-1px);
}
.thm-act.del:hover {
    color: #ef4444;
    border-color: #ef4444;
    background: rgba(239,68,68,.1);
}

/* ── Empty state ── */
.thm-empty {
    grid-column: 1 / -1;
    padding: 60px 20px;
    text-align: center;
    background: var(--da3-card);
    border: 1.5px dashed var(--da3-bd);
    border-radius: var(--da3-r);
}
.thm-empty-icon {
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: var(--da3-abg);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    color: var(--da3-accent);
}
.thm-empty h3 { font-size: 1.05rem; font-weight: 800; color: var(--da3-fg1); margin: 0 0 4px; }
.thm-empty p  { font-size: .82rem; color: var(--da3-fg3); margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   ADD / EDIT MODAL (existing behaviour preserved)
   ═══════════════════════════════════════════════════════════════ */
.thm-modal-backdrop {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
}
.thm-modal-backdrop.open { display: flex; }
.thm-modal {
    background: var(--da3-card);
    width: min(560px, 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.4);
    animation: thmModalIn .25s cubic-bezier(.34,1.56,.64,1);
    border: 1px solid var(--da3-bd);
}
@keyframes thmModalIn { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.thm-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--da3-line);
}
.thm-modal-head h3 {
    margin: 0;
    font-size: 1rem; font-weight: 800;
    color: var(--da3-fg1);
    display: flex; align-items: center; gap: 9px;
}
.thm-modal-head h3 i { color: var(--da3-accent); }
.thm-modal-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--da3-bd);
    background: var(--da3-bg2);
    color: var(--da3-fg2);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.thm-modal-close:hover { background: var(--da3-abg); color: var(--da3-accent); }
.thm-modal-body { padding: 22px; }
.thm-field { margin-bottom: 16px; }
.thm-field:last-child { margin-bottom: 0; }
.thm-field label {
    display: block;
    font-size: .78rem; font-weight: 800;
    color: var(--da3-fg1);
    margin-bottom: 7px;
}
.thm-field label .req { color: #ef4444; }
.thm-field input[type="text"],
.thm-field input[type="number"],
.thm-field textarea,
.thm-field select {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--da3-bd);
    border-radius: 10px;
    background: var(--da3-bg2);
    color: var(--da3-fg1);
    font-size: .88rem; font-weight: 600; font-family: inherit;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.thm-field input:focus, .thm-field textarea:focus, .thm-field select:focus {
    border-color: var(--da3-accent);
    box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
.thm-upload {
    position: relative;
    border: 1.5px dashed var(--da3-bd);
    border-radius: 12px;
    padding: 22px;
    text-align: center;
    cursor: pointer;
    background: var(--da3-bg2);
    transition: border-color .15s, background .15s;
}
.thm-upload:hover { border-color: var(--da3-accent); background: var(--da3-abg); }
.thm-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.thm-upload-icon { font-size: 26px; color: var(--da3-fg3); margin-bottom: 6px; }
.thm-upload-text { font-size: .82rem; font-weight: 700; color: var(--da3-fg1); }
.thm-upload-sub  { font-size: .7rem; color: var(--da3-fg3); margin-top: 2px; }
.thm-upload-preview {
    width: 84px; height: 84px;
    margin: 0 auto 8px;
    border-radius: 10px;
    background-size: cover; background-position: center;
    background-color: var(--da3-card);
    border: 1px solid var(--da3-line);
}
.thm-modal-foot {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 16px 22px;
    border-top: 1px solid var(--da3-line);
    background: var(--da3-bg2);
}
.thm-btn {
    height: 38px; padding: 0 16px;
    border-radius: 9px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-card);
    color: var(--da3-fg2);
    font-size: .82rem; font-weight: 700; font-family: inherit;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all .15s;
}
.thm-btn:hover { border-color: var(--da3-accent); color: var(--da3-accent); }
.thm-btn-primary {
    background: var(--da3-accent);
    border-color: var(--da3-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(124,58,237,.32);
}
.thm-btn-primary:hover { filter: brightness(1.1); color: #fff; }

@media (max-width: 540px) {
    .thm-grid { grid-template-columns: 1fr; gap: 14px; }
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/theme/marketplace.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   THEME MARKETPLACE — Real catalog (scales to 100+ themes)
═══════════════════════════════════════════════════════════════════ */
/* Marketplace inherits the dashboard `--da3g-*` palette so it looks
   identical to other admin pages (payments, currencies, addons…). */
.mkt-page {
    --pg-radius:      14px;
    --pg-radius-sm:   10px;
    --pg-radius-pill: 999px;
    --pg-text:        var(--da3g-fg1, #f4f4f5);
    --pg-text-2:      var(--da3g-fg2, #a1a1aa);
    --pg-text-3:      var(--da3g-fg3, #71717a);
    --pg-card:        var(--da3g-card, #1c1c1f);
    --pg-bg2:         var(--da3g-bg2, #111113);
    --pg-line:        var(--da3g-line, rgba(255,255,255,.06));
    --pg-line-2:      var(--da3g-bd,   rgba(255,255,255,.055));
    --pg-hover:       var(--da3g-hover, rgba(255,255,255,.03));
    --pg-accent:      var(--da3g-accent, #3b82f6);
    --pg-accent-bg:   var(--da3g-abg,    rgba(59,130,246,.12));
    --pg-accent-2:    color-mix(in srgb, var(--pg-accent) 22%, transparent);
    --pg-accent-glow: color-mix(in srgb, var(--pg-accent) 70%, transparent);
    --pg-success:     var(--da3g-success, #10b981);
    --pg-success-bg:  var(--da3g-success-bg, rgba(16,185,129,.12));
    --pg-warn:        var(--da3g-warn, #f59e0b);
    --pg-warn-bg:     var(--da3g-warn-bg, rgba(245,158,11,.12));
    --pg-danger:      var(--da3g-danger, #ef4444);
    --pg-danger-bg:   var(--da3g-danger-bg, rgba(239,68,68,.12));

    /* Legacy aliases — kept so older selectors continue to work. */
    --da3-card:   var(--pg-card);
    --da3-bd:     var(--pg-line-2);
    --da3-bg2:    var(--pg-bg2);
    --da3-fg1:    var(--pg-text);
    --da3-fg2:    var(--pg-text-2);
    --da3-fg3:    var(--pg-text-3);
    --da3-line:   var(--pg-line);
    --da3-hover:  var(--pg-hover);
    --da3-accent: var(--pg-accent);
    --da3-r:      var(--pg-radius);
    --role-accent:        var(--pg-accent);
    --role-accent-soft:   var(--pg-accent-bg);
    --role-accent-soft-2: var(--pg-accent-2);
    --role-accent-strong: color-mix(in srgb, var(--pg-accent) 82%, #000);
    --role-accent-glow:   var(--pg-accent-glow);

    margin: 0 auto;
    color: var(--pg-text);
}
body:not(.dark-mode) .mkt-page {
    --pg-text:    #09090b;
    --pg-text-2:  #52525b;
    --pg-text-3:  #a1a1aa;
    --pg-card:    #ffffff;
    --pg-bg2:     #f9f9fb;
    --pg-line:    #f4f4f5;
    --pg-line-2:  #e4e4e7;
    --pg-hover:   rgba(0,0,0,.02);
}

/* ── Page hero — identical to the dashboard's payments page ─── */
.mkt-hero {
    background: var(--pg-card);
    border: 1px solid var(--pg-line-2);
    border-radius: var(--pg-radius);
    padding: 22px 26px;
    margin-bottom: 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.mkt-hero::before {
    /* Same accent glow as the payments page hero — top-right radial. */
    content: '';
    position: absolute;
    top: -30%; inset-inline-end: -10%;
    width: 220px; height: 220px;
    background: radial-gradient(circle, color-mix(in srgb, var(--pg-accent) 18%, transparent), transparent 65%);
    pointer-events: none;
}
.mkt-hero-text { position: relative; z-index: 1; min-width: 0; flex: 1 1 360px; }
.mkt-hero-title {
    display: flex; align-items: center; gap: 14px;
    margin: 0 0 4px;
    font-size: 22px; font-weight: 900;
    color: var(--pg-text);
    letter-spacing: -.02em;
}
.mkt-hero-title .icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--pg-accent-bg);
    color: var(--pg-accent);
    font-size: 22px;
    flex-shrink: 0;
}
.mkt-hero-sub {
    margin: 0;
    font-size: 12.5px; color: var(--pg-text-3);
    line-height: 1.55;
}
.mkt-hero-stats {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
}
.mkt-hero-stat {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--pg-bg2);
    border: 1px solid var(--pg-line-2);
    border-radius: var(--pg-radius-sm);
    color: var(--pg-text);
    font-size: 13px; font-weight: 700;
}
.mkt-hero-stat i { color: var(--pg-accent); font-size: 14px; }
.mkt-hero-stat strong { font-weight: 900; font-size: 14.5px; }
.mkt-hero-stat small {
    display: block;
    color: var(--pg-text-3);
    font-weight: 600;
    font-size: 10.5px;
    margin-top: 1px;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.mkt-hero-stat-text { display: flex; flex-direction: column; line-height: 1.1; }



/* ── Layout: sidebar + main ── */
.mkt-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
@media (max-width: 991px) {
    .mkt-layout { grid-template-columns: 1fr; }
    .mkt-sidebar { position: static !important; }
}

/* ── Sidebar (sticky + own scroll if content tall) ── */
.mkt-sidebar {
    position: sticky;
    top: 80px; /* below admin top bar — keep visible while scrolling */
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 14px;
    padding: 6px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--da3-bd) transparent;
    align-self: start; /* sticky needs an align-self other than stretch in a grid */
}
.mkt-sidebar::-webkit-scrollbar { width: 6px; }
.mkt-sidebar::-webkit-scrollbar-track { background: transparent; }
.mkt-sidebar::-webkit-scrollbar-thumb {
    background: var(--da3-bd);
    border-radius: 999px;
}
.mkt-sidebar::-webkit-scrollbar-thumb:hover { background: var(--da3-fg3); }
.mkt-side-section {
    padding: 12px 14px;
    border-bottom: 1px solid var(--da3-line);
}
.mkt-side-section:last-child { border-bottom: 0; }
.mkt-side-title {
    font-size: 10.5px; font-weight: 800;
    color: var(--da3-fg3);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}
.mkt-side-title i { font-size: 9px; }

.mkt-chip-list { display: flex; flex-direction: column; gap: 4px; }
.mkt-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    color: var(--da3-fg2);
    font-size: 12.5px;
    font-weight: 600;
    transition: background .12s, color .12s;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: start;
    width: 100%;
}
.mkt-chip:hover { background: var(--da3-bg2); color: var(--da3-fg1); }
.mkt-chip.is-active {
    background: var(--role-accent-soft, rgba(59,130,246,.14));
    color: var(--role-accent, #3b82f6);
}
.mkt-chip i { font-size: 11px; width: 14px; text-align: center; }
.mkt-chip .count {
    margin-inline-start: auto;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--da3-fg3);
    background: var(--da3-bg2);
    padding: 1px 7px;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
}
.mkt-chip.is-active .count { background: var(--role-accent-soft-2); color: var(--role-accent, #3b82f6); }

.mkt-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--da3-fg1);
    font-weight: 600;
    user-select: none;
    transition: background .12s;
}
.mkt-toggle-row:hover { background: var(--da3-bg2); }
.mkt-toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.mkt-toggle-knob {
    width: 30px; height: 17px;
    border-radius: 999px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    position: relative;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.mkt-toggle-knob::after {
    content: '';
    position: absolute;
    top: 1px; left: 1px;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--da3-fg3);
    transition: transform .2s, background .2s;
}
html[dir="rtl"] .mkt-toggle-knob::after { left: auto; right: 1px; }
.mkt-toggle-row input:checked ~ .mkt-toggle-knob {
    background: var(--role-accent, #3b82f6);
    border-color: var(--role-accent, #3b82f6);
}
.mkt-toggle-row input:checked ~ .mkt-toggle-knob::after {
    background: #fff;
    transform: translateX(13px);
}
html[dir="rtl"] .mkt-toggle-row input:checked ~ .mkt-toggle-knob::after { transform: translateX(-13px); }

.mkt-reset-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(59,130,246,.08);
    border: 1.5px solid var(--da3-accent);
    color: var(--da3-accent);
    font-size: 12.5px; font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    box-shadow: 0 0 0 0 var(--role-accent-soft-2);
    transition: background .18s, color .18s, box-shadow .18s, transform .15s;
}
.mkt-reset-btn:hover {
    background: var(--da3-accent);
    color: #fff;
    box-shadow: 0 6px 16px -4px rgba(59,130,246,.45), 0 0 0 3px rgba(59,130,246,.15);
    transform: translateY(-1px);
}
.mkt-reset-btn:active { transform: translateY(0); }

/* Sidebar select dropdown (used by Style filter, etc.) */
.mkt-select-wrap { position: relative; }
.mkt-select {
    width: 100%;
    height: 38px;
    padding: 0 32px 0 12px;
    background: var(--da3-bg2);
    border: 1.5px solid var(--da3-bd);
    border-radius: 9px;
    color: var(--da3-fg1);
    font-size: 12.5px; font-weight: 700;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .15s, box-shadow .15s;
}
html[dir="rtl"] .mkt-select { padding: 0 12px 0 32px; }
.mkt-select:hover  { border-color: var(--da3-fg3); }
.mkt-select:focus  { border-color: var(--da3-accent); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.mkt-select option {
    background: var(--da3-card);
    color: var(--da3-fg1);
    font-weight: 600;
}
.mkt-select-chev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--da3-fg3);
    font-size: 10px;
    pointer-events: none;
}
html[dir="rtl"] .mkt-select-chev { left: 12px; }
html[dir="ltr"] .mkt-select-chev { right: 12px; }

/* ── Toolbar ── */
/* ── Toolbar — boxed card like the payments page ─────────────── */
.mkt-toolbar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px;
    padding: 14px 18px;
    background: var(--pg-card);
    border: 1px solid var(--pg-line-2);
    border-radius: var(--pg-radius);
    flex-wrap: wrap;
}
.mkt-search {
    flex: 1; min-width: 240px;
    position: relative;
}
.mkt-search i {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    color: var(--da3-fg3);
    font-size: 13px;
    pointer-events: none;
}
html[dir="rtl"] .mkt-search i { right: 16px; }
html[dir="ltr"] .mkt-search i { left: 16px; }
.mkt-search input {
    width: 100%;
    height: 42px;
    padding: 0 44px;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 10px;
    color: var(--da3-fg1);
    font-size: 13px; font-weight: 500;
    font-family: inherit;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.mkt-search input:focus { border-color: var(--role-accent); box-shadow: 0 0 0 3px var(--role-accent-soft-2); }
.mkt-search input::placeholder { color: var(--da3-fg3); font-weight: 500; }



/* Sort dropdown — pill with chevron */
.mkt-sort-wrap {
    position: relative;
    flex-shrink: 0;
}
.mkt-sort {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex; align-items: center;
    height: 42px;
    padding-inline-start: 16px;
    padding-inline-end: 38px;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 10px;
    font-size: 12.5px; font-weight: 700;
    color: var(--da3-fg1);
    font-family: inherit;
    outline: none;
    cursor: pointer;
    min-width: 160px;
    transition: border-color .15s;
}
.mkt-sort:focus,
.mkt-sort:hover { border-color: var(--role-accent); }
.mkt-sort-chev {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    inset-inline-end: 14px;
    font-size: 10px;
    color: var(--da3-fg3);
    pointer-events: none;
}

.mkt-view-toggle {
    display: inline-flex;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
    flex-shrink: 0;
    height: 42px;
}
.mkt-view-toggle button {
    width: 34px; height: 32px;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--da3-fg3);
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, color .15s;
    display: inline-flex; align-items: center; justify-content: center;
}
.mkt-view-toggle button:hover { color: var(--da3-fg1); }
.mkt-view-toggle button.is-active {
    background: var(--role-accent-soft);
    color: var(--role-accent);
}

/* Mobile filters drawer trigger */
.mkt-filters-mobile { display: none; }
@media (max-width: 991px) {
    .mkt-filters-mobile {
        display: inline-flex; align-items: center; gap: 6px;
        height: 42px;
        padding: 0 14px;
        background: var(--role-accent, #3b82f6);
        border: 0;
        border-radius: 10px;
        color: #fff;
        font-size: 12.5px; font-weight: 700;
        cursor: pointer;
        font-family: inherit;
    }
    .mkt-sidebar { display: none; }
    .mkt-sidebar.is-open {
        display: block;
        position: fixed; inset: 0;
        z-index: 1000;
        margin: 0; border-radius: 0;
        overflow-y: auto;
    }
}

/* ── Grid of theme cards ── */
.mkt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.mkt-list-view .mkt-grid {
    grid-template-columns: 1fr;
}
.mkt-list-view .mkt-card {
    display: grid;
    grid-template-columns: 280px 1fr auto;
    align-items: center;
    gap: 18px;
}
.mkt-list-view .mkt-card-cover { aspect-ratio: 16/10; }

/* ═══════════════════════════════════════════════════════════════════
   THEME CARD — Professional product-card spec
   • Elevation 1 at rest → 3 on hover (consistent shadow scale)
   • Visual hierarchy through size/weight + whitespace (not just color)
   • 44pt minimum touch targets on every interactive element
   • State clarity: rest / hover / focus-visible / active / disabled
   • Press feedback: scale(.985) within 120ms (Material spec)
   • Reduced-motion: transitions cancel, transforms disabled
═══════════════════════════════════════════════════════════════════ */
.mkt-card {
    position: relative;
    background: var(--pg-card);
    border: 1px solid var(--pg-line-2);
    border-radius: var(--pg-radius);
    overflow: hidden;
    display: flex; flex-direction: column;
    isolation: isolate;
}
/* Card stays static — no hover/active/focus-within outlines.
   Buttons inside the card keep their own :focus-visible rings, so
   keyboard a11y is preserved without ringing the whole card. */

/* ── Cover — image hero with subtle hover zoom ───────────────── */
.mkt-card-cover {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background-color: var(--pg-bg2);
    background-image: linear-gradient(135deg, var(--_pri, #3b82f6) 0%, var(--_sec, #1e40af) 100%);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--pg-line);
}
.mkt-card-cover::after {
    /* Soft top-to-bottom gradient so floating chips stay readable on
       light photos. Only visible on the cover, not the body. */
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 28%, transparent 70%, rgba(0,0,0,.22) 100%);
    pointer-events: none;
    z-index: 1;
}
.mkt-card-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.mkt-card-cover-chrome {
    position: absolute; top: 10px; inset-inline-start: 12px;
    display: flex; gap: 4px; z-index: 2;
}
.mkt-card-cover-chrome span {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255,255,255,.55);
}
.mkt-card-cover-chrome span:nth-child(1) { background: #FF5F57; }
.mkt-card-cover-chrome span:nth-child(2) { background: #FEBC2E; }
.mkt-card-cover-chrome span:nth-child(3) { background: #28C840; }

/* Mini mockup fallback when no image */
.mkt-card-mockup {
    position: absolute;
    inset: 32px 16px 0 16px;
    background: rgba(255,255,255,.96);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    box-shadow: 0 10px 28px -8px rgba(0,0,0,.4);
}
body.dark-mode .mkt-card-mockup { background: rgba(20,20,24,.96); }
.mkt-mock-line {
    height: 6px;
    background: rgba(0,0,0,.10);
    border-radius: 3px;
    margin: 8px;
}
body.dark-mode .mkt-mock-line { background: rgba(255,255,255,.10); }
.mkt-mock-line.is-accent { background: var(--_pri, #3b82f6); }
.mkt-mock-line.w-30 { width: 30%; }
.mkt-mock-line.w-50 { width: 50%; }
.mkt-mock-line.w-70 { width: 70%; }
.mkt-mock-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
    padding: 8px;
}
.mkt-mock-tile {
    aspect-ratio: 1;
    background: rgba(0,0,0,.08);
    border-radius: 4px;
}
body.dark-mode .mkt-mock-tile { background: rgba(255,255,255,.08); }
.mkt-mock-tile.is-pri { background: var(--_pri, #3b82f6); opacity: .8; }

/* ── Badge cluster — minimal floating UI on the cover ─────────
   Only the ACTIVE state lives here (the most important signal).
   Tier/new/featured badges moved DOWN to the body so the image
   stays clean and the most precious visual asset doesn't compete. */
.mkt-card-badges {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    display: flex; flex-direction: row; gap: 6px; align-items: center;
    z-index: 3;
    max-width: calc(100% - 64px);
    flex-wrap: wrap;
}
.mkt-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px; font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.mkt-badge i { font-size: 8px; }
/* All floating badges on the cover use a glass-on-dark look for
   readability across any underlying image. */
.mkt-badge {
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
}
.mkt-badge.tier-free      { background: rgba(16,185,129,.88); border-color: rgba(255,255,255,.20); }
.mkt-badge.tier-pro       { background: rgba(99,102,241,.92);  border-color: rgba(255,255,255,.20); }
.mkt-badge.tier-premium   {
    background: linear-gradient(135deg, rgba(253,224,71,.95), rgba(245,158,11,.95));
    color: #422006;
    border-color: rgba(255,255,255,.4);
    box-shadow: 0 4px 14px -4px rgba(245,158,11,.55);
}
.mkt-badge.is-new         { background: rgba(59,130,246,.92); }
.mkt-badge.is-featured    { background: linear-gradient(135deg, rgba(244,114,182,.95), rgba(236,72,153,.95)); }
.mkt-badge.is-soon        {
    background: linear-gradient(135deg, rgba(168,85,247,.95), rgba(124,58,237,.95));
    box-shadow: 0 4px 14px -4px rgba(124,58,237,.55);
}
.mkt-badge.is-owned       { background: rgba(16,185,129,.92); }
.mkt-badge.is-active-pill {
    background: rgba(16,185,129,.95);
    box-shadow: 0 4px 14px -4px rgba(16,185,129,.55);
    border-color: rgba(255,255,255,.30);
}

/* Active-marker overlay */
/* Old active border ring — replaced by the corner accent in the
   "ACTIVE STATE" block further down. Kept empty to avoid having to
   re-anchor edits elsewhere. */
.mkt-card-active-pill-legacy {
    position: absolute; bottom: 10px; inset-inline-start: 12px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #10b981;
    color: #fff;
    font-size: 10px; font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    box-shadow: 0 3px 10px -2px rgba(16,185,129,.5);
    z-index: 3;
}
.mkt-card-active-pill i { font-size: 8px; }


/* ═══════════════════════════════════════════════════════════════
   CARD BODY — Tight typographic hierarchy, generous whitespace
═══════════════════════════════════════════════════════════════ */
.mkt-card-body {
    padding: 18px 18px 16px;
    flex: 1;
    display: flex; flex-direction: column;
    gap: 10px;
}

/* ── Head row: tiny meta label (category · style) + version ── */
.mkt-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
}
.mkt-card-cat {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--role-accent, #3b82f6);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mkt-card-cat i { font-size: 10px; opacity: .7; }
.mkt-card-version {
    display: inline-flex; align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--da3-bg2);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg3);
    font-size: 10.5px; font-weight: 700;
    font-family: 'JetBrains Mono','Menlo', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Name + Tier inline ─────────────────────────────────── */
.mkt-card-name-wrap {
    display: flex; align-items: center; gap: 10px;
    margin-top: 2px;
    min-width: 0;
}
.mkt-card-name {
    font-size: 18px; font-weight: 800;
    color: var(--da3-fg1);
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.mkt-card-tier-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px; font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
    border: 1px solid transparent;
}
.mkt-card-tier-pill.tier-free    { background: rgba(16,185,129,.14);  color: #10b981; border-color: rgba(16,185,129,.25); }
.mkt-card-tier-pill.tier-pro     { background: rgba(99,102,241,.14);  color: #818cf8; border-color: rgba(99,102,241,.30); }
.mkt-card-tier-pill.tier-premium { background: rgba(245,158,11,.14);  color: #fbbf24; border-color: rgba(245,158,11,.32); }

/* ── Tagline / description ──────────────────────────────── */
.mkt-card-tagline {
    font-size: 13px;
    color: var(--da3-fg2);
    line-height: 1.55;
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.6em;       /* reserve 2-line height to prevent CLS */
}

/* ── Stats strip — subtle inset block ───────────────────── */
.mkt-card-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    margin-top: 4px;
    background: var(--pg-bg2);
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-radius-sm);
}
.mkt-card-price {
    font-size: 17px; font-weight: 800;
    color: var(--da3-fg1);
    font-family: 'Inter','SF Mono', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1;
}
.mkt-card-price.is-free {
    color: #10b981;
    font-size: 13.5px;
    display: inline-flex; align-items: center; gap: 6px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
}
.mkt-card-price.is-free i { font-size: 12px; }

.mkt-card-stats {
    display: inline-flex; align-items: center; gap: 14px;
    font-size: 12px;
    color: var(--da3-fg3);
}
.mkt-card-rating {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--da3-fg1);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mkt-card-rating i { color: #f59e0b; font-size: 11px; }
.mkt-card-rating small { color: var(--da3-fg3); font-weight: 500; }
.mkt-card-installs {
    display: inline-flex; align-items: center; gap: 5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.mkt-card-installs i { font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════
   ACTION BUTTONS — 44pt touch targets, single primary CTA
═══════════════════════════════════════════════════════════════ */
.mkt-card-actions {
    display: flex; align-items: stretch; gap: 8px;
    margin-top: auto;
    padding-top: 14px;
}
.mkt-act-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: var(--pg-radius-sm);
    font-size: 12.5px; font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    border: 1.5px solid var(--pg-line-2);
    background: var(--pg-bg2);
    color: var(--pg-text);
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        background    .15s ease,
        border-color  .15s ease,
        color         .15s ease,
        box-shadow    .15s ease;
}
.mkt-act-btn:hover {
    border-color: var(--pg-accent);
    color: var(--pg-accent);
}
.mkt-act-btn:focus-visible {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}
.mkt-act-btn i { font-size: 12.5px; }

/* Primary (Install / Buy) — the one CTA per card */
.mkt-act-btn.is-primary {
    background: var(--pg-accent);
    border-color: var(--pg-accent);
    color: #fff;
    box-shadow: 0 8px 20px -8px var(--pg-accent-glow);
}
.mkt-act-btn.is-primary:hover {
    background: color-mix(in srgb, var(--pg-accent) 88%, #000);
    border-color: color-mix(in srgb, var(--pg-accent) 88%, #000);
    color: #fff;
    filter: brightness(1.05);
}
/* "Already active" state — green pill with high-contrast text.
   Works in BOTH dark and light modes (no transparent fades that
   would wash out on a white background). */
.mkt-act-btn.is-primary[disabled],
.mkt-act-btn.is-primary[aria-disabled="true"] {
    background: var(--pg-success-bg, rgba(16,185,129,.14));
    border-color: color-mix(in srgb, var(--pg-success) 35%, transparent);
    color: var(--pg-success, #10b981);
    cursor: default;
    box-shadow: none;
    filter: none;
    font-weight: 800;
}
.mkt-act-btn.is-primary[disabled] i,
.mkt-act-btn.is-primary[aria-disabled="true"] i {
    color: var(--pg-success, #10b981);
}
body:not(.dark-mode) .mkt-act-btn.is-primary[disabled],
body:not(.dark-mode) .mkt-act-btn.is-primary[aria-disabled="true"] {
    background: rgba(16,185,129,.10);
    color: #059669;
    border-color: rgba(16,185,129,.30);
}
body:not(.dark-mode) .mkt-act-btn.is-primary[disabled] i,
body:not(.dark-mode) .mkt-act-btn.is-primary[aria-disabled="true"] i {
    color: #059669;
}

/* "Coming soon" CTA — purple/violet tones, mirrors the .is-soon badge.
   Overrides the green disabled state above so the button reads as an
   intentional "teaser" state, not a broken/inactive control. */
.mkt-act-btn.is-primary.is-soon-btn,
.mkt-act-btn.is-primary.is-soon-btn[disabled],
.mkt-act-btn.is-primary.is-soon-btn[aria-disabled="true"] {
    background: linear-gradient(135deg, rgba(168,85,247,.18), rgba(124,58,237,.14));
    border-color: color-mix(in srgb, #a855f7 35%, transparent);
    color: #a855f7;
    cursor: not-allowed;
}
.mkt-act-btn.is-primary.is-soon-btn i,
.mkt-act-btn.is-primary.is-soon-btn[disabled] i,
.mkt-act-btn.is-primary.is-soon-btn[aria-disabled="true"] i {
    color: #a855f7;
}
body:not(.dark-mode) .mkt-act-btn.is-primary.is-soon-btn,
body:not(.dark-mode) .mkt-act-btn.is-primary.is-soon-btn[disabled],
body:not(.dark-mode) .mkt-act-btn.is-primary.is-soon-btn[aria-disabled="true"] {
    background: linear-gradient(135deg, rgba(168,85,247,.12), rgba(124,58,237,.08));
    color: #7c3aed;
    border-color: rgba(124,58,237,.30);
}
body:not(.dark-mode) .mkt-act-btn.is-primary.is-soon-btn i,
body:not(.dark-mode) .mkt-act-btn.is-primary.is-soon-btn[disabled] i,
body:not(.dark-mode) .mkt-act-btn.is-primary.is-soon-btn[aria-disabled="true"] i {
    color: #7c3aed;
}

/* Icon-only variant — square 44pt for secondary actions */
.mkt-act-btn.is-icon {
    flex: 0 0 44px;
    min-width: 44px;
    padding: 0;
}

/* ───── Coming-soon card overlay ──────────────────────────────
   The entire card (cover + body + actions) is tinted under a
   purple gradient. The underlying content is hinted at — but
   intentionally not legible — and a premium centered composition
   (animated hourglass ring + "قريبًا" headline + subtitle)
   communicates the teaser state. */
/* "Coming soon" card — body content is rendered as dash placeholders
   (see the Blade markup) so the real theme details never reach the
   page. The cover image stays visible with the floating "قريبًا"
   badge that the cover badges row already provides. */
.mkt-card.is-soon .mkt-card-body { pointer-events: none; user-select: none; }
.mkt-card.is-soon .mkt-card-body * {
    /* Dim the dashes so they read as "placeholder content" rather than
       broken text — visible enough to convey "info hidden", but quiet
       enough not to compete with the cover image + "قريبًا" badge. */
    color: var(--tx-fg3, #71717a) !important;
}
.mkt-card.is-soon .mkt-card-tier-pill {
    background: rgba(168,85,247,.16) !important;
    color: #c4b5fd !important;
}

.mkt-soon-cover {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    overflow: hidden;
    backdrop-filter: saturate(125%) blur(5px);
    -webkit-backdrop-filter: saturate(125%) blur(3px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
/* Soft radial glows + a slow diagonal shine sweep */
.mkt-soon-cover::before {
    content: '';
    position: absolute; inset: 0;
 
    pointer-events: none;
}
.mkt-soon-cover::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(115deg,
        transparent 35%,
        rgba(255,255,255,.20) 50%,
        transparent 65%
    );
   
    animation: mktSoonShine 3.4s linear infinite;
    pointer-events: none;
}

/* Centered composition */
.mkt-soon-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 24px;
    color: #fff;
}
.mkt-soon-ring {
    width: 86px; height: 86px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    border: 2px solid rgba(255,255,255,.32);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 0 0 6px rgba(255,255,255,.06),
        0 16px 40px -10px rgba(0,0,0,.40);
    position: relative;
}
/* Soft pulsing halo */
.mkt-soon-ring::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.22);
    opacity: 0;
    animation: mktSoonPulse 2.4s ease-out infinite;
}
@keyframes mktSoonPulse {
    0%   { opacity: 0; transform: scale(.92); }
    40%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.20); }
}
.mkt-soon-ring i {
    font-size: 32px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.30);
    animation: mktSoonFlip 2.8s ease-in-out infinite;
}
@keyframes mktSoonFlip {
    0%,  40% { transform: rotate(0); }
    50%, 90% { transform: rotate(180deg); }
    100%     { transform: rotate(360deg); }
}
.mkt-soon-title {
    font-size: 26px;
    font-weight: 900;
    margin: 0 0 6px;
    letter-spacing: -.02em;
    text-shadow: 0 2px 12px rgba(0,0,0,.30);
}
.mkt-soon-sub {
    font-size: 12.5px;
    color: rgba(255,255,255,.88);
    margin: 0;
    line-height: 1.65;
    font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
    .mkt-soon-cover::after,
    .mkt-soon-ring::before,
    .mkt-soon-ring i { animation: none; }
}

/* Buy CTA price chip — high-contrast badge on the trailing edge */
.mkt-act-price {
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(0,0,0,.30);
    color: #fff;
    font-size: 12px; font-weight: 900;
    font-family: 'Inter','SF Mono', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    margin-inline-start: 2px;
    border: 1px solid rgba(255,255,255,.10);
}

/* Reduced-motion: cancel the remaining button-press transform too */
@media (prefers-reduced-motion: reduce) {
    .mkt-act-btn { transition: none !important; }
    .mkt-act-btn:active { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   THEME PURCHASE DIALOG
═══════════════════════════════════════════════════════════════════ */
/* Modal is HIDDEN by default (display:none) — JS adds .is-open which
   switches it to flex + applies the animation. Avoids the `hidden`
   HTML-attribute pitfall where CSS transitions don't fire on the
   initial flip from display:none. */
.mkt-buy-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1050;
    display: none;
    opacity: 0;
    transition: opacity .2s ease;
}
.mkt-buy-backdrop.is-open { display: block; opacity: 1; }
.mkt-buy-modal {
    position: fixed;
    top: 50%; inset-inline-start: 50%;
    transform: translate(-50%, -50%) scale(.97);
    z-index: 1060;
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    background: var(--pg-card);
    border: 1px solid var(--pg-line-2);
    border-radius: var(--pg-radius);
    box-shadow: 0 24px 60px -12px rgba(0,0,0,.45);
    display: none;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
}
html[dir="rtl"] .mkt-buy-modal { transform: translate(50%, -50%) scale(.97); }
.mkt-buy-modal.is-open {
    display: flex;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
html[dir="rtl"] .mkt-buy-modal.is-open { transform: translate(50%, -50%) scale(1); }
.mkt-buy-modal form { display: flex; flex-direction: column; max-height: inherit; min-height: 0; flex: 1; }

.mkt-buy-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--pg-line);
    background: var(--pg-card);
}
.mkt-buy-head-text h2 {
    margin: 0 0 4px;
    font-size: 17px; font-weight: 900; color: var(--pg-text);
    letter-spacing: -.01em;
}
.mkt-buy-head-text p {
    margin: 0; font-size: 12.5px; color: var(--pg-text-3);
}
.mkt-buy-close {
    width: 36px; height: 36px;
    border-radius: 10px;
    border: 1px solid var(--pg-line-2);
    background: var(--pg-bg2);
    color: var(--pg-text-2);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.mkt-buy-close:hover {
    color: var(--pg-danger); border-color: var(--pg-danger); background: var(--pg-danger-bg);
}

.mkt-buy-summary {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 16px;
    padding: 18px 22px;
    background: var(--pg-bg2);
    border-bottom: 1px solid var(--pg-line);
}
.mkt-buy-thumb {
    position: relative;
    width: 96px; height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--pg-card);
    border: 1px solid var(--pg-line-2);
}
.mkt-buy-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-buy-thumb img:not([src]),
.mkt-buy-thumb img[src=""] { display: none; }
.mkt-buy-thumb-fallback {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--pg-text-3);
    font-size: 22px;
}
.mkt-buy-thumb img[src]:not([src=""]) ~ .mkt-buy-thumb-fallback { display: none; }

.mkt-buy-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mkt-buy-info-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 10.5px; font-weight: 700;
    color: var(--pg-accent);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.mkt-buy-name {
    margin: 0;
    font-size: 18px; font-weight: 800;
    color: var(--pg-text);
    letter-spacing: -.02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mkt-buy-desc {
    margin: 0;
    font-size: 12.5px;
    color: var(--pg-text-3);
    line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.mkt-buy-desc:empty { display: none; }
.mkt-buy-tier-pill {
    align-self: flex-start; margin-top: 4px;
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--pg-accent-bg);
    color: var(--pg-accent);
    border: 1px solid color-mix(in srgb, var(--pg-accent) 30%, transparent);
    font-size: 10.5px; font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.mkt-buy-tier-pill:empty { display: none; }

.mkt-buy-price-block {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 2px;
}
.mkt-buy-price-block small {
    font-size: 10.5px; font-weight: 700;
    color: var(--pg-text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.mkt-buy-price-block strong {
    font-size: 22px; font-weight: 900;
    color: var(--pg-text);
    letter-spacing: -.02em;
    font-family: 'Inter','SF Mono', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: baseline; gap: 4px;
}
.mkt-buy-currency {
    font-size: 12px;
    color: var(--pg-text-3);
    font-weight: 700;
}


.mkt-buy-payments {
    padding: 18px 22px;
    flex: 1; min-height: 0;
    overflow-y: auto;
}
.mkt-buy-section-head { margin-bottom: 12px; }
.mkt-buy-section-head h4 {
    margin: 0 0 2px;
    font-size: 13px; font-weight: 800;
    color: var(--pg-text);
}
.mkt-buy-section-head small {
    font-size: 11.5px; color: var(--pg-text-3);
}
.mkt-buy-pay-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.mkt-pay-option { cursor: pointer; position: relative; }
.mkt-pay-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.mkt-pay-card {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: var(--pg-bg2);
    border: 1.5px solid var(--pg-line-2);
    border-radius: var(--pg-radius-sm);
    transition: all .15s;
    min-height: 64px;
}
.mkt-pay-option:hover .mkt-pay-card { border-color: var(--pg-accent); }
.mkt-pay-option input:checked + .mkt-pay-card {
    border-color: var(--pg-accent);
    background: var(--pg-accent-bg);
    box-shadow: 0 0 0 1px var(--pg-accent) inset;
}
.mkt-pay-option input:focus-visible + .mkt-pay-card {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}

/* Logo box (fixed) — sits on the leading edge next to the name */
.mkt-pay-logo {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
 
    display: inline-flex;
    align-items: center;
 
}
.mkt-pay-logo img {
  
  border-radius: 8px;
    object-fit: contain;
}
.mkt-pay-logo i { font-size: 16px; color: var(--pg-text-2); }

/* Body — name + (for wallet) live balance */
.mkt-pay-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    gap: 2px;
    line-height: 1.25;
    text-align: start;
}
.mkt-pay-name {
    font-size: 13.5px; font-weight: 800;
    color: var(--pg-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mkt-pay-balance {
    display: inline-flex; align-items: baseline; gap: 5px;
    font-size: 11.5px;
    color: var(--pg-text-3);
    font-weight: 600;
}
.mkt-pay-balance strong {
    font-size: 12.5px;
    color: var(--pg-success);
    font-weight: 900;
    font-family: 'Inter','SF Mono', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
}

.mkt-pay-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--pg-line-2);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: transparent;
    background: var(--pg-card);
    transition: all .15s;
}
.mkt-pay-check i { font-size: 12px; }
.mkt-pay-option input:checked + .mkt-pay-card .mkt-pay-check {
    border-color: var(--pg-accent);
    background: var(--pg-accent);
    color: #fff;
}

.mkt-buy-empty {
    padding: 28px 16px;
    text-align: center;
    background: var(--pg-bg2);
    border: 1px dashed var(--pg-line-2);
    border-radius: var(--pg-radius-sm);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.mkt-buy-empty i { font-size: 24px; color: var(--pg-warn); margin-bottom: 4px; }
.mkt-buy-empty strong { font-size: 13px; color: var(--pg-text); }
.mkt-buy-empty small  { font-size: 11.5px; color: var(--pg-text-3); }

.mkt-buy-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 16px 22px;
    border-top: 1px solid var(--pg-line);
    background: var(--pg-card);
    flex-wrap: wrap;
}
.mkt-buy-secure {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--pg-text-3);
    font-weight: 600;
}
.mkt-buy-secure i { color: var(--pg-success); }
.mkt-buy-actions { display: inline-flex; align-items: center; gap: 10px; }
.mkt-buy-cancel,
.mkt-buy-confirm {
    height: 44px; padding: 0 18px;
    border-radius: var(--pg-radius-sm);
    font-size: 13px; font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: all .15s;
    border: 1.5px solid var(--pg-line-2);
    background: var(--pg-bg2);
    color: var(--pg-text);
}
.mkt-buy-cancel:hover { border-color: var(--pg-danger); color: var(--pg-danger); }
.mkt-buy-confirm {
    background: var(--pg-accent);
    border-color: var(--pg-accent);
    color: #fff;
}
.mkt-buy-confirm:hover {
    background: color-mix(in srgb, var(--pg-accent) 88%, #000);
    border-color: color-mix(in srgb, var(--pg-accent) 88%, #000);
    filter: brightness(1.05);
}
.mkt-buy-confirm[disabled] {
    background: var(--pg-line-2);
    border-color: var(--pg-line-2);
    color: var(--pg-text-3);
    cursor: not-allowed;
    box-shadow: none;
}
/* Active processing state — keep the accent so it reads as "working
   on it" rather than "disabled / unavailable". */
.mkt-buy-confirm[data-loading="1"] {
    background: var(--pg-accent) !important;
    border-color: var(--pg-accent) !important;
    color: #fff !important;
    cursor: wait !important;
    opacity: .92;
}
.mkt-buy-confirm[data-loading="1"] i { font-size: 13px; }
.mkt-buy-confirm i { font-size: 11px; }
.mkt-buy-confirm-price {
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(0,0,0,.28);
    font-size: 12px; font-weight: 900;
    font-family: 'Inter','SF Mono', system-ui, sans-serif;
    margin-inline-start: 2px;
}

@media (max-width: 540px) {
    .mkt-buy-summary {
        grid-template-columns: 72px 1fr;
        grid-template-rows: auto auto;
        padding: 14px;
    }
    .mkt-buy-thumb { width: 72px; height: 56px; }
    .mkt-buy-price-block {
        grid-column: 1 / -1;
        align-items: stretch;
        padding-top: 10px;
        border-top: 1px dashed var(--pg-line);
    }
    .mkt-buy-pay-grid { grid-template-columns: 1fr; }
    .mkt-buy-foot { flex-direction: column; align-items: stretch; }
    .mkt-buy-secure { order: 99; justify-content: center; }
    .mkt-buy-actions { justify-content: stretch; }
    .mkt-buy-cancel,
    .mkt-buy-confirm { flex: 1; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   ACTIVE STATE — Green border + glow (matches the "Active" badge
   and the "مفعّل" CTA, so all three visual cues line up).
═══════════════════════════════════════════════════════════════ */
.mkt-card.is-active {
    border-color: var(--pg-success, #10b981);
    box-shadow: 0 0 0 1px var(--pg-success, #10b981) inset;
}
body:not(.dark-mode) .mkt-card.is-active {
    border-color: #10b981;
    box-shadow: 0 0 0 1px #10b981 inset;
}


/* ═══════════════════════════════════════════════════════════════
   GRID — Responsive columns + narrow-card collapse to icon buttons
═══════════════════════════════════════════════════════════════ */
.mkt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
@media (max-width: 540px) {
    .mkt-grid { grid-template-columns: 1fr; }
    .mkt-card-body { padding: 16px 14px 14px; }
    .mkt-card-name { font-size: 17px; }
}
/* When a card is narrower than ~280px, the secondary action labels
   become noise. Collapse them to icon-only so the primary CTA stays
   readable. */
@container (max-width: 280px) {
    .mkt-card-actions .mkt-act-btn:not(.is-primary) span { display: none; }
    .mkt-card-actions .mkt-act-btn:not(.is-primary) {
        flex: 0 0 44px;
        min-width: 44px;
        padding: 0;
    }
}
.mkt-card { container-type: inline-size; }

/* Empty state */
.mkt-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: var(--da3-card);
    border: 1px dashed var(--da3-bd);
    border-radius: 14px;
}
.mkt-empty-ico {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: var(--role-accent-soft, rgba(59,130,246,.14));
    color: var(--role-accent, #3b82f6);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px;
    margin-bottom: 14px;
}
.mkt-empty h4 { font-size: 16px; font-weight: 800; color: var(--da3-fg1); margin: 0 0 6px; }
.mkt-empty p  { font-size: 13px; color: var(--da3-fg3); margin: 0 auto 18px; max-width: 360px; line-height: 1.5; }

/* Pagination wrapper */
.mkt-paging {
    margin-top: 22px;
    display: flex; justify-content: center;
}
.mkt-paging .pagination { gap: 4px; margin: 0; }
.mkt-paging .page-link {
    padding: 7px 12px;
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    color: var(--da3-fg1);
    font-size: 12.5px; font-weight: 700;
    border-radius: 8px !important;
}
.mkt-paging .page-item.active .page-link {
    background: var(--role-accent, #3b82f6);
    border-color: var(--role-accent, #3b82f6);
    color: #fff;
}
.mkt-paging .page-item.disabled .page-link { opacity: .4; }

/* Mobile drawer header */
.mkt-side-mobile-head {
    display: none;
    padding: 14px 18px;
    border-bottom: 1px solid var(--da3-line);
    align-items: center; justify-content: space-between;
}
@media (max-width: 991px) {
    .mkt-sidebar.is-open .mkt-side-mobile-head { display: flex; }
}
.mkt-side-close {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid var(--da3-bd);
    background: var(--da3-bg2);
    color: var(--da3-fg1);
    font-size: 13px;
    cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/transaction/transaction.blade.php
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   TRANSACTIONS — dashboard-style page (same tokens as payments etc.)
═══════════════════════════════════════════════════════════════════ */
.tx-page {
    --tx-radius: 14px;
    --tx-radius-sm: 10px;
    --tx-radius-pill: 999px;
    --tx-text: var(--da3g-fg1, #f4f4f5);
    --tx-text-2: var(--da3g-fg2, #a1a1aa);
    --tx-text-3: var(--da3g-fg3, #71717a);
    --tx-card: var(--da3g-card, #1c1c1f);
    --tx-bg2: var(--da3g-bg2, #111113);
    --tx-line: var(--da3g-line, rgba(255, 255, 255, .06));
    --tx-line-2: var(--da3g-bd, rgba(255, 255, 255, .055));
    --tx-hover: var(--da3g-hover, rgba(255, 255, 255, .03));
    --tx-accent: var(--da3g-accent, #3b82f6);
    --tx-accent-bg: var(--da3g-abg, rgba(59, 130, 246, .12));
    --tx-success: var(--da3g-success, #10b981);
    --tx-success-bg: var(--da3g-success-bg, rgba(16, 185, 129, .12));
    --tx-warn: var(--da3g-warn, #f59e0b);
    --tx-warn-bg: var(--da3g-warn-bg, rgba(245, 158, 11, .12));
    --tx-danger: var(--da3g-danger, #ef4444);
    --tx-danger-bg: var(--da3g-danger-bg, rgba(239, 68, 68, .12));

    margin: 0 auto;
    color: var(--tx-text);
}

body:not(.dark-mode) .tx-page {
    --tx-text: #09090b;
    --tx-text-2: #52525b;
    --tx-text-3: #a1a1aa;
    --tx-card: #ffffff;
    --tx-bg2: #f9f9fb;
    --tx-line: #f4f4f5;
    --tx-line-2: #e4e4e7;
    --tx-hover: rgba(0, 0, 0, .02);
}

/* ── Hero ───────────────────────────────────────────────────── */
.tx-hero {
    background: var(--tx-card);
    border: 1px solid var(--tx-line-2);
    border-radius: var(--tx-radius);
    padding: 22px 26px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.tx-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    inset-inline-end: -10%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, color-mix(in srgb, var(--tx-accent) 18%, transparent), transparent 65%);
    pointer-events: none;
}

.tx-hero-content {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 260px;
    position: relative;
    z-index: 1;
}

.tx-hero-ico {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--tx-accent-bg);
    color: var(--tx-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.tx-hero h1 {
    font-size: 22px;
    font-weight: 900;
    color: var(--tx-text);
    margin: 0 0 4px;
    letter-spacing: -.02em;
}

.tx-hero p {
    font-size: 12.5px;
    color: var(--tx-text-3);
    margin: 0;
}

.tx-hero-stats {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tx-stat {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--tx-bg2);
    border: 1px solid var(--tx-line-2);
    border-radius: var(--tx-radius-sm);
}

.tx-stat-ico {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.tx-stat-ico.is-total {
    background: var(--tx-accent-bg);
    color: var(--tx-accent);
}

.tx-stat-ico.is-revenue {
    background: var(--tx-success-bg);
    color: var(--tx-success);
}

.tx-stat-ico.is-pending {
    background: var(--tx-warn-bg);
    color: var(--tx-warn);
}

.tx-stat-ico.is-rejected {
    background: var(--tx-danger-bg);
    color: var(--tx-danger);
}

.tx-stat-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.tx-stat-text strong {
    font-size: 14.5px;
    font-weight: 900;
    color: var(--tx-text);
    font-variant-numeric: tabular-nums;
    font-family: 'Inter', 'SF Mono', system-ui, sans-serif;
}

.tx-stat-text small {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--tx-text-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px;
}

/* ── Toolbar / Filters ──────────────────────────────────────── */
.tx-toolbar {
    background: var(--tx-card);
    border: 1px solid var(--tx-line-2);
    border-radius: var(--tx-radius);
    padding: 14px 18px;
    margin-bottom: 16px;
}

.tx-filters {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.tx-field {
    position: relative;
    flex: 1 1 200px;
    min-width: 0;
}

.tx-field label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--tx-text-3);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}

.tx-input,
.tx-select {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    background: var(--tx-bg2);
    border: 1.5px solid var(--tx-line-2);
    border-radius: var(--tx-radius-sm);
    color: var(--tx-text);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.tx-input:focus,
.tx-select:focus {
    border-color: var(--tx-accent);
    box-shadow: 0 0 0 3px var(--tx-accent-bg);
}

.tx-select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: right 14px center;
    padding-inline-end: 36px;
}

html[dir="rtl"] .tx-select {
    background-position: left 14px center;
    padding-inline-end: 14px;
    padding-inline-start: 36px;
}

/* ── Searchable vendor combobox ─────────────────────────────── */
.tx-combo {
    position: relative;
}

.tx-combo-trigger {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    background: var(--tx-bg2);
    border: 1.5px solid var(--tx-line-2);
    border-radius: var(--tx-radius-sm);
    color: var(--tx-text);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: border-color .15s, box-shadow .15s;
}

.tx-combo-trigger:hover {
    border-color: var(--tx-accent);
}

.tx-combo-trigger[aria-expanded="true"] {
    border-color: var(--tx-accent);
    box-shadow: 0 0 0 3px var(--tx-accent-bg);
}

.tx-combo-value {
    flex: 1;
    min-width: 0;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tx-combo-chev {
    font-size: 10px;
    color: var(--tx-text-3);
    transition: transform .2s;
    flex-shrink: 0;
}

.tx-combo-trigger[aria-expanded="true"] .tx-combo-chev {
    transform: rotate(180deg);
}

.tx-combo-panel {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    width: 100%;
    min-width: 280px;
    max-height: 320px;
    background: var(--tx-card);
    border: 1px solid var(--tx-line-2);
    border-radius: var(--tx-radius-sm);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .35);
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: txComboFade .15s ease;
}

@keyframes txComboFade {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tx-combo-search {
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid var(--tx-line);
}

.tx-combo-search i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-start: 22px;
    color: var(--tx-text-3);
    font-size: 11px;
    pointer-events: none;
}

.tx-combo-search input {
    width: 100%;
    height: 36px;
    padding-inline-start: 32px;
    padding-inline-end: 12px;
    background: var(--tx-bg2);
    border: 1px solid var(--tx-line-2);
    border-radius: 8px;
    color: var(--tx-text);
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
}

.tx-combo-search input:focus {
    border-color: var(--tx-accent);
}

.tx-combo-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
}

.tx-combo-list::-webkit-scrollbar {
    width: 6px;
}

.tx-combo-list::-webkit-scrollbar-thumb {
    background: var(--tx-line-2);
    border-radius: 3px;
}

.tx-combo-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tx-text);
    cursor: pointer;
    transition: background .12s;
}

.tx-combo-opt:hover {
    background: var(--tx-hover);
}

.tx-combo-opt.is-selected {
    background: var(--tx-accent-bg);
    color: var(--tx-accent);
}

.tx-combo-opt[hidden] {
    display: none;
}

.tx-combo-opt i {
    font-size: 12px;
    color: var(--tx-text-3);
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tx-bg2);
    flex-shrink: 0;
}

.tx-combo-opt.is-selected i {
    background: color-mix(in srgb, var(--tx-accent) 18%, transparent);
    color: var(--tx-accent);
}

.tx-combo-avatar {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--tx-accent-bg);
    color: var(--tx-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    flex-shrink: 0;
}

.tx-combo-empty {
    padding: 20px 14px;
    text-align: center;
    font-size: 12.5px;
    color: var(--tx-text-3);
}

.tx-actions {
    display: flex;
    gap: 8px;
    align-self: flex-end;
    flex-shrink: 0;
}

.tx-btn {
    height: 42px;
    padding: 0 18px;
    border-radius: var(--tx-radius-sm);
    border: 0;
    font-size: 13px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: filter .15s, box-shadow .15s;
}

.tx-btn-primary {
    background: var(--tx-accent);
    color: #fff;
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--tx-accent) 70%, transparent);
}

.tx-btn-primary:hover {
    filter: brightness(1.08);
    color: #fff;
}

.tx-btn-ghost {
    background: var(--tx-bg2);
    color: var(--tx-text);
    border: 1.5px solid var(--tx-line-2);
}

.tx-btn-ghost:hover {
    border-color: var(--tx-accent);
    color: var(--tx-accent);
}

/* ── Table card ─────────────────────────────────────────────── */
.tx-table-card {
    background: var(--tx-card);
    border: 1px solid var(--tx-line-2);
    border-radius: var(--tx-radius);
    overflow: hidden;
}

.tx-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--tx-line);
}

.tx-table-head h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--tx-text);
}

.tx-count-pill {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tx-text-3);
    padding: 6px 12px;
    background: var(--tx-bg2);
    border-radius: var(--tx-radius-pill);
    border: 1px solid var(--tx-line-2);
}

.tx-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.tx-table thead th {
    background: var(--tx-bg2);
    padding: 12px 16px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--tx-text-2);
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 1px solid var(--tx-line);
    text-align: start;
    white-space: nowrap;
}

.tx-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--tx-line);
    color: var(--tx-text);
    vertical-align: middle;
    font-size: 13px;
}

.tx-table tbody tr {
    transition: background .12s;
}

.tx-table tbody tr:hover {
    background: var(--tx-hover);
}

.tx-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Idx cell */
.tx-idx {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tx-text-3);
    font-family: 'Inter', 'SF Mono', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
}

/* Transaction number */
.tx-number {
    font-family: 'JetBrains Mono', 'Menlo', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--tx-text);
    direction: ltr;
}

.tx-number-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tx-number-cell small {
    color: var(--tx-text-3);
    font-size: 11px;
    font-family: inherit;
}

/* Plan name with type-icon */
.tx-plan {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tx-plan-ico {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tx-accent-bg);
    color: var(--tx-accent);
    font-size: 13px;
    flex-shrink: 0;
}

/* Type chip variants — each transaction shows ONE color-coded square
   indicating what kind of transaction it is. The chip's color cues the
   reader instantly (purple = theme, blue = plan, etc.) and the icon
   inside reinforces the category. */
.tx-plan-ico.is-plan {
    background: var(--tx-accent-bg);
    color: var(--tx-accent);
}

.tx-plan-ico.is-theme {
    background: rgba(168, 85, 247, .14);
    color: #c084fc;
}

.tx-plan-ico.is-addon {
    background: rgba(16, 185, 129, .14);
    color: #10b981;
}

.tx-plan-ico.is-payment {
    background: rgba(245, 158, 11, .14);
    color: #f59e0b;
}

.tx-plan-name {
    font-weight: 700;
    color: var(--tx-text);
}

/* Amount with credit/debit accent */
.tx-amount {
    font-family: 'Inter', 'SF Mono', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 14px;
    color: var(--tx-text);
    white-space: nowrap;
}

.tx-amount.is-credit {
    color: var(--tx-success);
}

.tx-amount.is-debit {
    color: var(--tx-danger);
}

.tx-amount-sign {
    font-size: 12px;
    margin-inline-end: 2px;
}

.tx-amount-value {
    font-variant-numeric: tabular-nums;
}

/* Cash-flow direction chip — REPLACES the generic plan icon. A square
   tile (matching `.tx-plan-ico` dimensions) holding a clear `+`
   (credit) or `−` (debit). Intent is obvious at a glance without
   relying on color alone. */
.tx-flow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    border-radius: 9px;

    flex-shrink: 0;
    line-height: 1;

    border: 1.5px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease;
}

.tx-flow i {
    font-size: 14px;
    font-weight: 900;
}

/* Credit */
.tx-flow-in {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 4px 12px rgba(16,185,129,.10);
}

/* Debit */
.tx-flow-out {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 4px 12px rgba(239,68,68,.10);
}



/* Payment / Date / Status cells */
.tx-payment {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--tx-radius-pill);
    background: var(--tx-bg2);
    border: 1px solid var(--tx-line-2);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tx-text-2);
}

.tx-date {
    font-family: 'Inter', 'SF Mono', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    color: var(--tx-text);
}

.tx-date-empty {
    color: var(--tx-text-3);
}

.tx-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--tx-radius-pill);
    font-size: 11px;
    font-weight: 800;
    border: 1px solid;
}

.tx-status i {
    font-size: 8px;
}

.tx-status.is-pending {
    background: var(--tx-warn-bg);
    color: var(--tx-warn);
    border-color: color-mix(in srgb, var(--tx-warn) 25%, transparent);
}

.tx-status.is-approved {
    background: var(--tx-success-bg);
    color: var(--tx-success);
    border-color: color-mix(in srgb, var(--tx-success) 25%, transparent);
}

.tx-status.is-rejected {
    background: var(--tx-danger-bg);
    color: var(--tx-danger);
    border-color: color-mix(in srgb, var(--tx-danger) 25%, transparent);
}

/* Action buttons */
.tx-row-actions {
    display: inline-flex;
    gap: 6px;
}

.tx-row-act {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--tx-bg2);
    border: 1px solid var(--tx-line-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tx-text-2);
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    font-size: 12.5px;
}

.tx-row-act:hover {
    background: var(--tx-accent-bg);
    border-color: var(--tx-accent);
    color: var(--tx-accent);
}

/* Empty state */
.tx-empty {
    padding: 60px 20px;
    text-align: center;
    background: var(--tx-card);
}

.tx-empty-ico {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--tx-accent-bg);
    color: var(--tx-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 14px;
}

.tx-empty h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--tx-text);
    margin: 0 0 6px;
}

.tx-empty p {
    font-size: 13px;
    color: var(--tx-text-3);
    margin: 0;
    max-width: 360px;
    margin: 0 auto;
}

/* ── Responsive: stack rows as cards on mobile ───────────────── */
@media (max-width: 768px) {
    .tx-table thead {
        display: none;
    }

    .tx-table,
    .tx-table tbody,
    .tx-table tr,
    .tx-table td {
        display: block;
        width: 100%;
    }

    .tx-table tbody tr {
        padding: 14px;
        margin: 10px;
        background: var(--tx-bg2);
        border: 1px solid var(--tx-line-2);
        border-radius: var(--tx-radius-sm);
    }

    .tx-table tbody td {
        padding: 8px 0;
        border-bottom: 1px dashed var(--tx-line);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .tx-table tbody td:last-child {
        border-bottom: 0;
    }

    .tx-table tbody td::before {
        content: attr(data-label);
        font-size: 10.5px;
        font-weight: 700;
        color: var(--tx-text-3);
        text-transform: uppercase;
        letter-spacing: .05em;
    }
}


/* ═══════════════════════════════════════════════════════════
   Extracted from: admin/vendor_shipping/shipments.blade.php
═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   VENDOR SHIPMENTS TABLE — page-scoped styles
══════════════════════════════════════════════════ */
.vsm-wrap {
    background: var(--da3-card);
    border: 1px solid var(--da3-bd);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--da3-shadow);
}

/* ── Table head ── */
.vsm-tbl thead tr {
    background: var(--da3-bg2);
    border-bottom: 1px solid var(--da3-line);
}
.vsm-tbl thead th {
    font-size: .68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--da3-fg3);
    padding: 12px 16px; border: none;
    white-space: nowrap;
}

/* ── Table body ── */
.vsm-tbl tbody tr { border-bottom: 1px solid var(--da3-line); transition: background .12s; }
.vsm-tbl tbody tr:last-child { border-bottom: none; }
.vsm-tbl tbody tr:hover { background: var(--da3-hover); }
.vsm-tbl tbody td  { padding: 14px 16px; border: none; vertical-align: middle; color: var(--da3-fg1); }

/* ── Shipment number ── */
.vsm-num {
    font-size: .82rem; font-weight: 800;
    color: var(--da3-accent);
    font-family: 'SF Mono','Fira Code',monospace;
    letter-spacing: .02em;
}
.vsm-date {
    font-size: .68rem; color: var(--da3-fg3); font-weight: 600;
    margin-top: 3px; display: block;
}

/* ── Order link ── */
.vsm-order-link {
    font-size: .82rem; font-weight: 700;
    color: var(--da3-fg2); text-decoration: none;
    transition: color .12s;
}
.vsm-order-link:hover { color: var(--da3-accent); }

/* ── Provider cell ── */
.vsm-provider { display: flex; align-items: center; gap: 8px; }
.vsm-provider-logo {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--da3-bg2); border: 1px solid var(--da3-bd);
    object-fit: contain; padding: 3px; flex-shrink: 0;
}
.vsm-provider-name { font-size: .82rem; font-weight: 700; color: var(--da3-fg1); }

/* ── Tracking number ── */
.vsm-tracking {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 7px;
    font-size: .72rem; font-weight: 700;
    font-family: 'SF Mono','Fira Code',monospace;
    background: var(--da3-bg2);
    color: var(--da3-fg2);
    border: 1px solid var(--da3-bd);
    white-space: nowrap;
}
.vsm-tracking i { font-size: .62rem; }
.vsm-no-tracking { font-size: .72rem; color: var(--da3-fg3); font-style: italic; }

/* ── Status badge ── */
.vsm-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 999px;
    font-size: .7rem; font-weight: 800;
    white-space: nowrap;
}
.vsm-badge .dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

/* ── Action button ── */
.vsm-act {
    display: inline-flex; align-items: center; gap: 5px;
    height: 32px; padding: 0 13px;
    border-radius: 8px;
    font-size: .76rem; font-weight: 700;
    background: var(--da3-bg2); color: var(--da3-fg2);
    border: 1px solid var(--da3-bd);
    text-decoration: none; transition: all .14s;
    white-space: nowrap;
}
.vsm-act:hover {
    background: var(--da3-abg); color: var(--da3-accent);
    border-color: var(--da3-accent); transform: translateY(-1px);
}
.vsm-act i { font-size: .68rem; }

/* ── Empty state ── */
.vsm-empty {
    padding: 64px 24px; text-align: center;
}
.vsm-empty-icon {
    width: 64px; height: 64px; border-radius: 16px;
    background: var(--da3-bg2);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: var(--da3-fg3);
    margin: 0 auto 16px;
}
.vsm-empty-title { font-size: 1rem; font-weight: 800; color: var(--da3-fg1); margin-bottom: 5px; }
.vsm-empty-sub   { font-size: .82rem; color: var(--da3-fg2); font-weight: 600; }

/* ── Pagination wrapper ── */
.vsm-pagination {
    padding: 14px 20px;
    border-top: 1px solid var(--da3-line);
    background: var(--da3-bg2);
}

/* ── Mobile cards ── */
@media (max-width: 768px) {
    .vsm-tbl thead { display: none; }
    .vsm-tbl tbody tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--da3-line) !important; }
    .vsm-tbl tbody tr:last-child { border-bottom: none !important; }
    .vsm-tbl tbody td {
        display: flex; justify-content: space-between; align-items: center;
        padding: 5px 0; border-bottom: 1px solid var(--da3-line) !important;
    }
    .vsm-tbl tbody td:last-child { border-bottom: none !important; justify-content: flex-end; padding-top: 10px; }
    .vsm-tbl tbody td::before {
        content: attr(data-label);
        font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
        color: var(--da3-fg3); flex-shrink: 0; margin-inline-end: .5rem;
    }
}


/* ════════════════════════════════════════════════════════════
   ABANDONED CARTS  (ac-*)
   ════════════════════════════════════════════════════════════ */

/* ── Type-filter pills ── */
.ac-type-filter {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .32rem .85rem; border-radius: 20px; font-size: .72rem; font-weight: 700;
    border: 1.5px solid var(--da3-line); color: var(--da3-fg2);
    background: var(--da3-bg1); cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
}
.ac-type-filter:hover { border-color: var(--da3-accent); color: var(--da3-accent); }
.ac-type-filter.is-active {
    background: var(--da3-accent); border-color: var(--da3-accent);
    color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--da3-accent) 30%, transparent);
}

/* ── Idle time badges ── */
.ac-idle-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .22rem .65rem; border-radius: 12px; font-size: .68rem; font-weight: 700;
    letter-spacing: .02em;
}
.ac-idle-hot  { background: color-mix(in srgb, #ef4444 12%, transparent); color: #ef4444; }
.ac-idle-warm { background: color-mix(in srgb, #f97316 12%, transparent); color: #f97316; }
.ac-idle-cold { background: color-mix(in srgb, var(--da3-fg3) 12%, transparent); color: var(--da3-fg3); }

body.dark-mode .ac-idle-hot  { background: color-mix(in srgb, #ef4444 20%, transparent); }
body.dark-mode .ac-idle-warm { background: color-mix(in srgb, #f97316 20%, transparent); }
body.dark-mode .ac-idle-cold { background: color-mix(in srgb, var(--da3-fg3) 20%, transparent); }

/* ── WhatsApp action button ── */
.ac-wa-btn,
.da3-icon-btn--wa {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px; border: none; cursor: pointer;
    background: color-mix(in srgb, #25d366 14%, transparent);
    color: #25d366; font-size: .85rem;
    transition: background .18s, transform .15s;
}
.ac-wa-btn:hover,
.da3-icon-btn--wa:hover {
    background: #25d366; color: #fff;
    transform: scale(1.08);
}

/* ── Delete action button ── */
.ac-del-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px; border: none; cursor: pointer;
    background: color-mix(in srgb, #ef4444 12%, transparent);
    color: #ef4444; font-size: .85rem;
    transition: background .18s, transform .15s;
}
.ac-del-btn:hover { background: #ef4444; color: #fff; transform: scale(1.08); }

/* ── Cart items modal ── */
.ac-modal-backdrop {
    position: fixed; inset: 0; z-index: 1800;
    background: rgba(0,0,0,.45); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .22s;
}
.ac-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }

.ac-modal {
    background: var(--da3-bg1); border-radius: 18px;
    border: 1px solid var(--da3-line);
    box-shadow: 0 24px 64px rgba(0,0,0,.22);
    width: min(640px, 96vw); max-height: 80vh;
    display: flex; flex-direction: column;
    transform: translateY(18px) scale(.97);
    transition: transform .22s;
}
.ac-modal-backdrop.is-open .ac-modal { transform: translateY(0) scale(1); }

.ac-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px 16px; border-bottom: 1px solid var(--da3-line); flex-shrink: 0;
}
.ac-modal-title {
    font-size: .95rem; font-weight: 700; color: var(--da3-fg1);
}
.ac-modal-close {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--da3-line);
    background: var(--da3-bg2); color: var(--da3-fg2); cursor: pointer; font-size: .8rem;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.ac-modal-close:hover { background: var(--da3-accent); color: #fff; border-color: var(--da3-accent); }

.ac-modal-body { overflow-y: auto; flex: 1; padding: 18px 22px; }

.ac-modal-loading {
    display: flex; align-items: center; justify-content: center;
    gap: .5rem; padding: 40px 0; color: var(--da3-fg3); font-size: .85rem;
}
.ac-modal-loading i { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Cart table row highlight on hover ── */
.ac-cart-row { transition: background .15s; }
.ac-cart-row:hover { background: color-mix(in srgb, var(--da3-accent) 5%, transparent) !important; }


/* ════════════════════════════════════════════════════════════
   PIXEL TRACKING REPORTS  (px-*)
   ════════════════════════════════════════════════════════════ */

/* ── Conversion funnel ── */
.px-funnel {
    display: flex; align-items: stretch; gap: 0;
    border: 1px solid var(--da3-line); border-radius: 16px; overflow: hidden;
}
.px-funnel-step {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    padding: 22px 14px 18px; position: relative; text-align: center;
    background: var(--da3-bg2);
    transition: background .18s;
}
.px-funnel-step:not(:last-child) { border-inline-end: 1px solid var(--da3-line); }
.px-funnel-step:hover { background: color-mix(in srgb, var(--da3-accent) 5%, transparent); }

.px-funnel-ico {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; margin-bottom: 10px;
    background: color-mix(in srgb, var(--da3-accent) 12%, transparent);
    color: var(--da3-accent);
}
.px-funnel-step:nth-child(1) .px-funnel-ico { background: color-mix(in srgb, #6366f1 12%, transparent); color: #6366f1; }
.px-funnel-step:nth-child(2) .px-funnel-ico { background: color-mix(in srgb, #f97316 12%, transparent); color: #f97316; }
.px-funnel-step:nth-child(3) .px-funnel-ico { background: color-mix(in srgb, #ef4444 12%, transparent); color: #ef4444; }
.px-funnel-step:nth-child(4) .px-funnel-ico { background: color-mix(in srgb, #22c55e 12%, transparent); color: #22c55e; }

.px-funnel-num {
    font-size: 1.5rem; font-weight: 800; color: var(--da3-fg1); line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.px-funnel-lbl {
    font-size: .7rem; font-weight: 700; color: var(--da3-fg3);
    text-transform: uppercase; letter-spacing: .04em; margin-top: 3px;
}
.px-funnel-sub {
    font-size: .72rem; color: var(--da3-fg2); margin-top: 6px;
    padding: .18rem .55rem; border-radius: 10px;
    background: color-mix(in srgb, var(--da3-fg3) 10%, transparent);
}
.px-funnel-arrow {
    position: absolute; inset-inline-end: -1px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--da3-bg1); border: 1px solid var(--da3-line);
    display: flex; align-items: center; justify-content: center;
    font-size: .55rem; color: var(--da3-fg3); z-index: 2;
}

/* ── Platform icon ── */
.px-plat-ico {
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem; color: #fff; flex-shrink: 0;
}

/* ── Pixel health grid ── */
.px-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.px-health-card {
    border-radius: 14px; border: 1.5px solid var(--da3-line);
    background: var(--da3-bg2); padding: 16px 16px 14px;
    display: flex; flex-direction: column; gap: 10px;
    transition: border-color .18s, box-shadow .18s;
}
.px-health-card:hover {
    box-shadow: 0 4px 20px color-mix(in srgb, var(--da3-accent) 10%, transparent);
}
.px-health-card.is-ok  { border-color: color-mix(in srgb, #22c55e 40%, var(--da3-line)); }
.px-health-card.is-miss { border-color: color-mix(in srgb, #ef4444 30%, var(--da3-line)); opacity: .8; }

.px-health-ico {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: #fff; flex-shrink: 0;
}

.px-health-body { flex: 1; }

.px-health-name {
    font-size: .75rem; font-weight: 700; color: var(--da3-fg2);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px;
}
.px-health-id {
    font-size: .82rem; font-weight: 600; color: var(--da3-fg1);
    font-family: 'Courier New', monospace; word-break: break-all;
}
.px-health-miss {
    font-size: .78rem; color: var(--da3-fg3); font-style: italic;
}

.px-health-stat {
    display: flex; align-items: center; justify-content: space-between;
}
.px-health-status {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .68rem; font-weight: 700; padding: .2rem .6rem; border-radius: 10px;
}
.px-health-card.is-ok  .px-health-status { background: color-mix(in srgb, #22c55e 14%, transparent); color: #22c55e; }
.px-health-card.is-miss .px-health-status { background: color-mix(in srgb, #ef4444 14%, transparent); color: #ef4444; }

.px-health-link {
    font-size: .72rem; font-weight: 600; color: var(--da3-accent);
    text-decoration: none; display: inline-flex; align-items: center; gap: .25rem;
    transition: opacity .15s;
}
.px-health-link:hover { opacity: .75; }

/* ── Responsive: funnel stacks on small screens ── */
@media (max-width: 640px) {
    .px-funnel { flex-direction: column; }
    .px-funnel-step:not(:last-child) { border-inline-end: none; border-block-end: 1px solid var(--da3-line); }
    .px-funnel-arrow { display: none; }
    .px-health-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
    .px-health-grid { grid-template-columns: 1fr; }
}



/* ════════════════════════════════════════════════════════════════════════════
 *  UNIFIED TABLE SYSTEM — Global override for ALL admin tables
 *  Strategy: target every <table> inside .page-content regardless of class.
 *  This block must stay at the END of style.css so it wins all specificity
 *  battles against Bootstrap and per-page custom classes.
 *
 *  Covers: .table, .cus-tbl, .ord-tbl, .tx-table, .ctr-table, .cty-table,
 *          .cur-table, .adm-table, .audit-table, .prd-tbl, .pgw-table,
 *          .uh-table, .h-table, .mkt-table, .prl-table, .pp-table,
 *          .pga-table, and any unnamed <table> — all in one shot.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Table token layer (dark default) ──────────────────────────────────────  */
.page-content,
.main-content,
.main-content-rtl {
  --tbl-bg:        #1e1e22;
  --tbl-head-bg:   rgba(255,255,255,.03);
  --tbl-head-fg:   #a1a1aa;
  --tbl-fg:        #f4f4f5;
  --tbl-fg2:       #a1a1aa;
  --tbl-border:    rgba(255,255,255,.07);
  --tbl-hover:     rgba(255,255,255,.04);
  --tbl-stripe:    rgba(255,255,255,.02);
  --tbl-radius:    14px;
  --tbl-shadow:    0 4px 24px rgba(0,0,0,.22);
  --tbl-head-wt:   600;
  --tbl-head-size: 12px;
  --tbl-row-size:  13.5px;
}

/* ── Light mode token override ─────────────────────────────────────────────  */
body:not(.dark-mode) .page-content,
body:not(.dark-mode) .main-content,
body:not(.dark-mode) .main-content-rtl {
  --tbl-bg:        #ffffff;
  --tbl-head-bg:   #f8fafc;
  --tbl-head-fg:   #64748b;
  --tbl-fg:        #0f172a;
  --tbl-fg2:       #64748b;
  --tbl-border:    #f1f5f9;
  --tbl-hover:     #f8fafc;
  --tbl-stripe:    #fafafa;
  --tbl-shadow:    0 1px 4px rgba(0,0,0,.06), 0 0 0 1px #e2e8f0;
}

/* ── Wrapper reset — kill conflicting backgrounds on every known wrapper ── */
.page-content .table-responsive,
.page-content [class*="-tbl-wrap"],
.page-content [class*="-table-wrap"],
.page-content .data-table-wrap,
.page-content .ord-tbl-wrap,
.page-content .cus-tbl-wrap,
.page-content .prd-tbl-wrap,
.page-content .ctr-table-wrap,
.page-content .cty-table-wrap,
.page-content .cur-table-wrap,
.page-content .audit-table-wrap,
.page-content .pgw-table-wrap,
.page-content .uh-table-wrap,
.page-content .x-ui-table-wrap,
.page-content .mkt-table-wrap {
  background:    var(--tbl-bg)    !important;
  border:        1px solid var(--tbl-border) !important;
  border-radius: var(--tbl-radius) !important;
  box-shadow:    var(--tbl-shadow) !important;
  overflow:      hidden;
  margin-bottom: 24px;
}

/* ── The <table> itself ─────────────────────────────────────────────────── */
.page-content table {
  background:    transparent !important;
  color:         var(--tbl-fg) !important;
  border-color:  transparent !important;
  width:         100%;
  margin-bottom: 0 !important;
  border-collapse: collapse;
}

/* ── Kill Bootstrap's tbody top border (the most common culprit) ────────── */
.page-content table > :not(:first-child) {
  border-top: none !important;
}

/* ── Kill Bootstrap's cell-level border bleed ──────────────────────────── */
.page-content table > :not(caption) > * {
  background-color: transparent !important;
  border-bottom-color: var(--tbl-border) !important;
  box-shadow: none !important;
}
.page-content table > :not(caption) > * > * {
  background-color: transparent !important;
  border-bottom-color: var(--tbl-border) !important;
  box-shadow: none !important;
  padding: 12px 14px;
  color: var(--tbl-fg) !important;
}

/* ── <thead> ────────────────────────────────────────────────────────────── */
.page-content table thead,
.page-content table thead tr,
.page-content table thead th,
.page-content table thead td {
  background-color: var(--tbl-head-bg)  !important;
  color:            var(--tbl-head-fg)  !important;
  border-bottom:    1px solid var(--tbl-border) !important;
  border-color:     var(--tbl-border) !important;
  font-size:        var(--tbl-head-size) !important;
  font-weight:      var(--tbl-head-wt)  !important;
  text-transform:   uppercase;
  letter-spacing:   .04em;
  padding:          10px 14px !important;
  white-space:      nowrap;
}

/* ── <tbody> rows ────────────────────────────────────────────────────────── */
.page-content table tbody tr {
  background-color: transparent !important;
  border-color:     var(--tbl-border) !important;
  transition:       background .12s;
}
.page-content table tbody tr:hover {
  background-color: var(--tbl-hover) !important;
}
.page-content table tbody td,
.page-content table tbody th {
  font-size:     var(--tbl-row-size) !important;
  color:         var(--tbl-fg) !important;
  border-bottom: 1px solid var(--tbl-border) !important;
  border-color:  var(--tbl-border) !important;
  vertical-align: middle !important;
  padding:       10px 14px !important;
}
.page-content table tbody tr:last-child td,
.page-content table tbody tr:last-child th {
  border-bottom: none !important;
}

/* ── Stripe (opt-in via .table-striped, doesn't fight hover) ──────────── */
.page-content table.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--tbl-stripe) !important;
  --bs-table-accent-bg: transparent;
}

/* ── Standalone <table> NOT inside a wrapper — give it its own card shell ── */
.page-content .table-responsive:not([class*="-wrap"] .table-responsive) {
  background:    var(--tbl-bg);
  border:        1px solid var(--tbl-border);
  border-radius: var(--tbl-radius);
  box-shadow:    var(--tbl-shadow);
  overflow:      hidden;
  margin-bottom: 24px;
}

/* ── DataTables overrides (applies when JS lib adds its own wrappers) ───── */
.page-content .dataTables_wrapper {
  background:    var(--tbl-bg)     !important;
  border:        1px solid var(--tbl-border) !important;
  border-radius: var(--tbl-radius) !important;
  box-shadow:    var(--tbl-shadow) !important;
  padding:       16px !important;
  margin-bottom: 24px;
}
.page-content .dataTables_wrapper .dataTables_filter input,
.page-content .dataTables_wrapper .dataTables_length select {
  background: rgba(255,255,255,.05) !important;
  border:     1px solid var(--tbl-border) !important;
  color:      var(--tbl-fg) !important;
  border-radius: 8px;
  padding: 5px 10px;
}
body:not(.dark-mode) .page-content .dataTables_wrapper .dataTables_filter input,
body:not(.dark-mode) .page-content .dataTables_wrapper .dataTables_length select {
  background: #f8fafc !important;
}
.page-content .dataTables_wrapper .dataTables_info,
.page-content .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--tbl-fg2) !important;
}
.page-content .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.page-content .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--tbl-hover) !important;
  border-color: var(--tbl-border) !important;
  color: var(--tbl-fg) !important;
}

/* ── table-light / thead-light Bootstrap helpers — neutralize ──────────── */
.page-content table .table-light,
.page-content table thead.table-light tr,
.page-content table thead.table-light th {
  background-color: var(--tbl-head-bg) !important;
  color:            var(--tbl-head-fg) !important;
  border-color:     var(--tbl-border)  !important;
}

/* ── Scrollbar inside table-responsive ─────────────────────────────────── */
.page-content .table-responsive::-webkit-scrollbar { height: 5px; }
.page-content .table-responsive::-webkit-scrollbar-track { background: transparent; }
.page-content .table-responsive::-webkit-scrollbar-thumb {
  background: var(--tbl-border);
  border-radius: 4px;
}

/* ── Dashboard quick-tables (not inside .page-content) ─────────────────── */
.da3 table,
.da3-card table {
  color:        var(--da3-fg1) !important;
  border-color: var(--da3-line) !important;
}
.da3 table > :not(:first-child),
.da3-card table > :not(:first-child) { border-top: none !important; }
.da3 table > :not(caption) > * > *,
.da3-card table > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--da3-fg1) !important;
  border-color: var(--da3-line) !important;
}
.da3 table thead th,
.da3-card table thead th {
  background: var(--da3-bg2) !important;
  color:      var(--da3-fg2) !important;
  font-size:  11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.da3 table tbody tr:hover > *,
.da3-card table tbody tr:hover > * {
  background-color: var(--da3-hover) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * END UNIFIED TABLE SYSTEM
 * ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
 * DASHBOARD REDESIGN v4 — KPI delta, 4-col grid, clean accents
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Replace rainbow gradients with clean single-color accent ── */
.da3-getting-started::before {
  background: var(--da3-accent) !important;
  opacity:    .65 !important;
}
.da3-briefing::before {
  background: var(--da3-accent) !important;
  opacity:    .55 !important;
}

/* ── 4-column KPI grid ──────────────────────────────────────── */
.da3-kpis-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) { .da3-kpis-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .da3-kpis-4 { grid-template-columns: 1fr; } }

/* ── KPI delta badge ────────────────────────────────────────── */
.da3-kpi-delta {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  font-size:   11px;
  font-weight: 600;
  padding:     3px 9px;
  border-radius: 999px;
  margin-bottom: 6px;
  white-space: nowrap;
  max-width:   100%;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.da3-kpi-delta.da3-tone-up   { color: #10b981; background: rgba(16,185,129,.12); }
.da3-kpi-delta.da3-tone-down { color: #ef4444; background: rgba(239,68,68,.12);  }
.da3-kpi-delta.da3-tone-warn { color: #f59e0b; background: rgba(245,158,11,.12); }
.da3-kpi-delta.da3-tone-flat { color: var(--da3-fg3); background: var(--da3-line); }

/* ── Larger KPI number in 4-col layout ─────────────────────── */
.da3-kpis-4 .da3-kpi {
  padding: 18px 20px 14px;
}
.da3-kpis-4 .da3-kpi-num {
  font-size:     30px;
  margin-bottom: 6px;
}
.da3-kpis-4 .da3-kpi-label {
  font-size: 11.5px;
}
.da3-kpis-4 .da3-kpi-ico {
  width:  36px;
  height: 36px;
  font-size: 14px;
}

/* ── Top bar: clean bottom edge without strip ───────────────── */
.da3-top-bar {
  border-bottom-left-radius:  var(--da3-r);
  border-bottom-right-radius: var(--da3-r);
}
.da3-greeting {
  padding-bottom: 20px;
}

/* ── Welcome text: slightly larger name ─────────────────────── */
.da3-welcome strong {
  font-size: 22px;
}

/* ════════════════════════════════════════════════════════════════════════════
 * END DASHBOARD REDESIGN v4
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Greeting inline — name next to welcome text ── */
.da3-welcome        { font-size: 18px; font-weight: 600; color: var(--da3-fg1); margin: 0 0 6px; line-height: 1.4; }
.da3-welcome strong { display: inline; font-size: inherit; font-weight: 800; color: var(--da3-fg1); }

/* ════════════════════════════════════════════════════════════════════════════
 * GETTING STARTED v4 — compact banner (replaces da3-getting-started)
 * ════════════════════════════════════════════════════════════════════════════ */
.gs4 {
  background:    var(--da3-card);
  border:        1px solid var(--da3-bd);
  border-radius: var(--da3-r);
  box-shadow:    var(--da3-shadow);
  padding:       16px 20px 14px;
  margin-bottom: var(--da3-gap);
  position:      relative;
  overflow:      hidden;
}
.gs4::before {
  content: '';
  position: absolute;
  top: 0; inset-inline-start: 0; inset-inline-end: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--da3-accent) 0%, #8b5cf6 100%);
}

/* Top row */
.gs4-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.gs4-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.gs4-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(99,102,241,.13);
  color: #818cf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.gs4-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--da3-fg1);
  line-height: 1.3;
}
.gs4-count {
  font-size: 12px;
  color: var(--da3-fg3);
  font-weight: 500;
  margin-top: 2px;
}

/* Progress */
.gs4-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.gs4-bar-w {
  width: 130px;
  height: 6px;
  background: var(--da3-line);
  border-radius: 999px;
  overflow: hidden;
}
.gs4-bar-f {
  height: 100%;
  background: linear-gradient(90deg, var(--da3-accent), #8b5cf6);
  border-radius: inherit;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.gs4-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--da3-accent);
  min-width: 38px;
  text-align: start;
}

/* Dismiss button */
.gs4-x {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid var(--da3-bd);
  color: var(--da3-fg3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.gs4-x:hover { background: var(--da3-hover); color: var(--da3-fg1); border-color: var(--da3-accent); }

/* Steps row */
.gs4-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gs4-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all .15s ease;
}
.gs4-done {
  background: rgba(34,197,94,.10);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,.2);
  pointer-events: none;
}
.gs4-todo {
  background: rgba(37,99,235,.09);
  color: var(--da3-accent);
  border: 1px solid rgba(37,99,235,.2);
}
.gs4-todo:hover {
  background: var(--da3-accent);
  color: #fff;
  border-color: var(--da3-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37,99,235,.3);
}
.gs4-ext {
  font-size: 9px;
  opacity: .6;
}

@media (max-width: 768px) {
  .gs4-bar-w { width: 80px; }
}
@media (max-width: 480px) {
  .gs4-progress { width: 100%; }
  .gs4-bar-w { flex: 1; }
}
/* ════════════════════════════════════════════════════════════════════════════
 * END GETTING STARTED v4
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Column stack: two cards stacked vertically in one grid cell ── */
.da3-col-stack {
  display: flex;
  flex-direction: column;
  gap: var(--da3-gap);
}

/* ════════════════════════════════════════════════════════════════════════════
 * KPI CARD v2 — icon left, content right, clean layout
 * ════════════════════════════════════════════════════════════════════════════ */
.da3-kpi-v2 {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px 18px 0;
  position: relative;
  overflow: hidden;
}

/* Remove old top colored bar — icon color is enough */
.da3-kpi-v2::before { display: none !important; }

/* Colored left border instead — subtle accent */
.da3-kpi-v2::after {
  content: '';
  position: absolute;
  top: 20%; bottom: 20%;
  inset-inline-start: 0;
  width: 3px;
  background: var(--ic, var(--da3-accent));
  border-radius: 0 3px 3px 0;
  opacity: .75;
}

/* Icon */
.da3-kpi-v2-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--ic-bg, var(--da3-abg));
  color: var(--ic, var(--da3-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 14px;
  flex-shrink: 0;
}

/* Body */
.da3-kpi-v2-body {
  flex: 1;
  min-width: 0;
}
.da3-kpi-v2 .da3-kpi-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--da3-fg3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.da3-kpi-v2 .da3-kpi-num {
  font-size: 26px;
  font-weight: 800;
  color: var(--da3-fg1);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  margin-bottom: 8px;
}
.da3-kpi-v2 .da3-kpi-delta {
  margin-bottom: 10px;
}

/* Sparkline flush to bottom */
.da3-kpi-v2 .da3-kpi-spark {
  height: 40px;
  margin: 0 -18px;
  margin-top: auto;
}

/* Hover */
.da3-kpi-v2:hover {
  transform: translateY(-2px);
  box-shadow: var(--da3-shadow), 0 8px 24px rgba(0,0,0,.12);
}

/* ════════════════════════════════════════════════════════════════════════════
 * END KPI CARD v2
 * ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
 * KPI CARD v3 — Premium design: icon top-right, big number, sparkline, MoM trend
 * ════════════════════════════════════════════════════════════════════════════ */

/* Card wrapper */
.da3-kpi.da3-kpi-v3 {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 0;
  position: relative;
  overflow: hidden;
  gap: 0;
  transition: transform .2s ease, box-shadow .2s ease;
  min-height: 172px;
}

/* Radial glow behind icon — top-end corner */
.da3-kpi.da3-kpi-v3::before {
  content: '';
  position: absolute;
  top: -20px;
  inset-inline-end: -20px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ic-glow, rgba(59,130,246,.1)) 0%, transparent 70%);
  pointer-events: none;
}

.da3-kpi.da3-kpi-v3:hover {
  transform: translateY(-3px);
  box-shadow: var(--da3-shadow), 0 10px 28px rgba(0,0,0,.14);
}

/* ── Head row: label left, icon right ── */
.da3-kpi-v3-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.da3-kpi-v3-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--da3-fg3);
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.3;
  max-width: 65%;
}

.da3-kpi-v3-ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--ic-bg, rgba(59,130,246,.14));
  color: var(--ic, var(--da3-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--ic-glow, rgba(59,130,246,.2));
}

/* ── Content row: number/unit left, sparkline right ── */
.da3-kpi-v3-content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  margin-bottom: 12px;
}

.da3-kpi-v3-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--da3-fg1);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 4px;
  white-space: nowrap;
}

.da3-kpi-v3-unit {
  font-size: 12px;
  color: var(--da3-fg3);
  font-weight: 500;
  line-height: 1.4;
}

.da3-kpi-v3-spark {
  width: 44%;
  height: 48px;
  flex-shrink: 0;
  opacity: .85;
}
.da3-kpi-v3-spark canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ── Footer row: trend badge + period ── */
.da3-kpi-v3-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--da3-line, var(--da3-bd));
  margin: 0 -20px;
  padding-inline: 20px;
  min-height: 40px;
}

.da3-kpi-v3-period {
  font-size: 11.5px;
  color: var(--da3-fg3);
  font-weight: 400;
}

/* Trend badge */
.da3-kpi-v3-trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Tone variants ── */
.da3-tone-up {
  background: rgba(16,185,129,.13);
  color: #10b981;
  border: 1px solid rgba(16,185,129,.22);
}
.da3-tone-down {
  background: rgba(239,68,68,.13);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.22);
}
.da3-tone-flat {
  background: rgba(148,163,184,.12);
  color: var(--da3-fg2);
  border: 1px solid rgba(148,163,184,.2);
}

/* ── Bottom colored accent bar ── */
.da3-kpi-v3-bar {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 3px;
  background: var(--ic, var(--da3-accent));
  opacity: .7;
  border-radius: 0 0 14px 14px;
  transition: opacity .2s;
}
.da3-kpi.da3-kpi-v3:hover .da3-kpi-v3-bar {
  opacity: 1;
}

/* Light mode adjustments */
body:not(.dark-mode) .da3-tone-up   { background: rgba(16,185,129,.1);  }
body:not(.dark-mode) .da3-tone-down { background: rgba(239,68,68,.1);   }
body:not(.dark-mode) .da3-tone-flat { background: rgba(100,116,139,.09); }

/* Responsive — stack to 2 cols on tablet, 1 on mobile */
@media (max-width: 900px) {
  .da3-kpis-4 { grid-template-columns: repeat(2, 1fr); }
  .da3-kpi.da3-kpi-v3 { min-height: 160px; }
}
@media (max-width: 500px) {
  .da3-kpis-4 { grid-template-columns: 1fr; }
  .da3-kpi-v3-num { font-size: 24px; }
  .da3-kpi-v3-spark { width: 38%; height: 40px; }
}

/* ════════════════════════════════════════════════════════════════════════════
 * END KPI CARD v3
 * ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
 * HERO GREETING BAR — new top banner with icon, name, meta, actions
 * ════════════════════════════════════════════════════════════════════════════ */

.da3-hero-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  background: var(--da3-card);
  border: 1px solid var(--da3-bd);
  border-radius: 14px;
  box-shadow: var(--da3-shadow);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

/* Subtle accent glow at inline-end (icon side) */
.da3-hero-bar::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 220px;
  background: radial-gradient(ellipse at 80% 50%, rgba(37,99,235,.08) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Icon wrapper ── */
.da3-hero-ico-wrap {
  position: relative;
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  order: 1; /* appears last in LTR DOM → inline-end in RTL */
}

[dir="rtl"] .da3-hero-ico-wrap { margin-inline-start: auto; }
[dir="ltr"] .da3-hero-ico-wrap { margin-inline-start: auto; }

.da3-hero-ico {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  box-shadow: 0 6px 20px rgba(37,99,235,.35);
  position: relative;
  z-index: 1;
}

/* Sparkle decorations */
.da3-hero-sp {
  position: absolute;
  color: var(--da3-accent);
  font-size: 10px;
  font-style: normal;
  line-height: 1;
  animation: da3-sparkle 2.5s ease-in-out infinite;
}
.da3-hero-sp1 { top: -3px;  inset-inline-end: -4px; font-size: 13px; animation-delay: 0s; }
.da3-hero-sp2 { bottom: 0px; inset-inline-start: -6px; font-size: 9px;  animation-delay: .6s; }
.da3-hero-sp3 { top: 50%;   inset-inline-start: -10px; font-size: 7px;  animation-delay: 1.2s; }

@keyframes da3-sparkle {
  0%, 100% { opacity: .6; transform: scale(1)   rotate(0deg); }
  50%       { opacity: 1;  transform: scale(1.3) rotate(20deg); }
}

/* ── Text block ── */
.da3-hero-text {
  flex: 1;
  min-width: 0;
}

.da3-hero-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--da3-fg2);
  margin: 0 0 7px;
  line-height: 1.3;
}

.da3-hero-title strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--da3-accent);
  display: inline;
}

.da3-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.da3-hero-divider {
  color: var(--da3-fg3);
  font-size: 13px;
}

.da3-hero-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--da3-fg3);
  font-weight: 500;
}

/* ── Actions ── */
.da3-hero-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Light mode */
body:not(.dark-mode) .da3-hero-bar {
  background: #fff;
  border-color: #e4e4e7;
}
body:not(.dark-mode) .da3-hero-bar::after {
  background: radial-gradient(ellipse at 80% 50%, rgba(37,99,235,.05) 0%, transparent 70%);
}

/* Responsive */
@media (max-width: 768px) {
  .da3-hero-bar {
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 16px;
  }
  .da3-hero-ico-wrap {
    width: 56px;
    height: 56px;
    order: unset;
    margin-inline-start: 0;
  }
  .da3-hero-ico { width: 56px; height: 56px; font-size: 22px; }
  .da3-hero-title { font-size: 14px; }
  .da3-hero-title strong { font-size: 16px; }
  .da3-hero-actions { width: 100%; }
}

@media (max-width: 480px) {
  .da3-hero-actions .da3-btn { flex: 1; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════════════
 * END HERO GREETING BAR
 * ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
 * HERO BAR — layout fix: icon must be first (rightmost in RTL)
 * In RTL flex-row, first DOM item = rightmost. Remove order:1 + bad margins.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Reset the broken order/margin from the previous block */
.da3-hero-ico-wrap {
  order: 0 !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}
[dir="rtl"] .da3-hero-ico-wrap,
[dir="ltr"]  .da3-hero-ico-wrap {
  margin-inline-start: 0 !important;
}

/* In LTR push icon to the end with order */
[dir="ltr"] .da3-hero-ico-wrap { order: 3 !important; }
[dir="ltr"] .da3-hero-actions  { order: 1 !important; }
[dir="ltr"] .da3-hero-text     { order: 2 !important; }

/* ════════════════════════════════════════════════════════════════════════════
 * END HERO BAR layout fix
 * ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
 * HERO ICON — dark bg, white bag, green dots (matching reference)
 * ════════════════════════════════════════════════════════════════════════════ */

/* Dark icon box — override previous blue gradient */
.da3-hero-ico {
  background: rgba(255,255,255,.07) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.08),
              0 4px 16px rgba(0,0,0,.4) !important;
  border: 1px solid rgba(255,255,255,.08);
  color: #fff !important;
  font-size: 26px !important;
}

/* Remove previous ::after glow on bar (too much blue) */
.da3-hero-bar::after { display: none !important; }

/* Green dots */
.da3-hero-dot {
  position: absolute;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 5px rgba(34,197,94,.7);
  pointer-events: none;
  animation: da3-dot-pulse 2.2s ease-in-out infinite;
}

/* Position & size each dot */
.da3-hero-dot1 { width: 7px; height: 7px; top:  -3px; inset-inline-end: -3px; animation-delay: 0s; }
.da3-hero-dot2 { width: 5px; height: 5px; bottom: 2px; inset-inline-end: -5px; animation-delay: .5s; }
.da3-hero-dot3 { width: 5px; height: 5px; top: 10px;   inset-inline-start: -5px; animation-delay: 1s; }
.da3-hero-dot4 { width: 4px; height: 4px; bottom: -3px; inset-inline-start: 6px;  animation-delay: 1.5s; }

@keyframes da3-dot-pulse {
  0%, 100% { opacity: .5; transform: scale(1);   }
  50%       { opacity: 1;  transform: scale(1.35); }
}

/* Hide old ✦ star spans if they still exist */
.da3-hero-sp { display: none !important; }

/* Light mode: keep dark icon box (it looks good on light bg too) */
body:not(.dark-mode) .da3-hero-ico {
  background: rgba(0,0,0,.08) !important;
  border-color: rgba(0,0,0,.1);
  color: #1e293b !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * END HERO ICON fix
 * ════════════════════════════════════════════════════════════════════════════ */

/* Remove KPI v3 bottom accent bar */
.da3-kpi-v3-bar { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════════
 * HERO ICON — circular glassmorphism
 * ════════════════════════════════════════════════════════════════════════════ */
.da3-hero-ico-wrap {
  width: 76px  !important;
  height: 76px !important;
}

.da3-hero-ico {
  width: 76px  !important;
  height: 76px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(12px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.12),
    inset 0 -1px 1px rgba(0,0,0,.25),
    0 6px 24px rgba(0,0,0,.45) !important;
  font-size: 26px !important;
  color: #fff !important;
}

/* Light mode glass */
body:not(.dark-mode) .da3-hero-ico {
  background: rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.12) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.6),
    0 4px 16px rgba(0,0,0,.12) !important;
  color: #1e293b !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * END HERO ICON glass
 * ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
 * HERO ICON — glass v2: blue-tinted dark glass, precise small dots
 * ════════════════════════════════════════════════════════════════════════════ */

.da3-hero-ico-wrap {
  width: 82px  !important;
  height: 82px !important;
}

.da3-hero-ico {
  width: 82px  !important;
  height: 82px !important;
  border-radius: 50% !important;
  /* Blue-tinted dark glass */
  background: radial-gradient(circle at 35% 35%,
    rgba(99,130,255,.18) 0%,
    rgba(30,40,80,.55)   55%,
    rgba(10,12,30,.75)   100%) !important;
  backdrop-filter: blur(16px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
  border: 1px solid rgba(120,150,255,.22) !important;
  box-shadow:
    inset 0 1.5px 2px rgba(160,180,255,.15),
    inset 0 -2px 4px  rgba(0,0,10,.4),
    0 0 0 4px          rgba(60,90,200,.07),
    0 8px 28px         rgba(0,0,0,.5) !important;
  font-size: 25px !important;
  color: #fff !important;
}

/* Green dots — smaller, precise, subtler */
.da3-hero-dot {
  border-radius: 50% !important;
  background: #4ade80 !important;
  box-shadow: 0 0 4px rgba(74,222,128,.8), 0 0 8px rgba(74,222,128,.4) !important;
}
.da3-hero-dot1 { width: 6px !important; height: 6px !important; top: 4px  !important; inset-inline-end: 6px  !important; }
.da3-hero-dot2 { width: 4px !important; height: 4px !important; top: 22px !important; inset-inline-start: -2px !important; }
.da3-hero-dot3 { width: 5px !important; height: 5px !important; bottom: 8px !important; inset-inline-end: 2px !important; }
.da3-hero-dot4 { width: 3px !important; height: 3px !important; bottom: 16px !important; inset-inline-start: 5px !important; }

/* ════════════════════════════════════════════════════════════════════════════
 * END HERO ICON glass v2
 * ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
 * ORDERS BY STATUS — new full-width card design (da3-osc)
 * ════════════════════════════════════════════════════════════════════════════ */

.da3-osc { padding: 24px; }

/* ── Header ── */
.da3-osc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.da3-osc-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--da3-fg1);
}
.da3-osc-title i { color: var(--da3-accent); font-size: 18px; }
.da3-osc-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: var(--da3-bg2);
  border: 1px solid var(--da3-bd);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--da3-fg2);
}

/* ── Middle: side % + donut + side % ── */
.da3-osc-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-bottom: 32px;
}

/* Side percentage card */
.da3-osc-side {
  flex: 1;
  max-width: 160px;
  background: var(--da3-bg2);
  border: 1px solid var(--da3-bd);
  border-radius: 14px;
  padding: 20px 18px;
  text-align: center;
}
.da3-osc-pct {
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 8px;
}
.da3-osc-lbl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: var(--da3-fg2);
  font-weight: 500;
}
.da3-osc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Donut wrapper */
.da3-osc-donut-wrap {
  position: relative;
  width: 240px;
  height: 240px;
  flex-shrink: 0;
}
.da3-osc-donut-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  filter: drop-shadow(0 0 18px rgba(99,102,241,.25));
}
.da3-osc-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.da3-osc-num {
  font-size: 48px;
  font-weight: 800;
  color: var(--da3-fg1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.da3-osc-sub {
  font-size: 12px;
  color: var(--da3-fg3);
  font-weight: 500;
  margin-top: 4px;
}

/* ── Bottom 4 status cards ── */
.da3-osc-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.da3-osc-card {
  background: var(--da3-bg2);
  border: 1px solid var(--da3-bd);
  border-radius: 14px;
  padding: 18px 16px 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 110px;
}
.da3-osc-card-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sc) 14%, transparent);
  color: var(--sc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border: 1px solid color-mix(in srgb, var(--sc) 25%, transparent);
  margin-bottom: 4px;
}
.da3-osc-card-num {
  font-size: 26px;
  font-weight: 800;
  color: var(--da3-fg1);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.da3-osc-card-lbl {
  font-size: 12.5px;
  color: var(--da3-fg3);
  font-weight: 500;
  padding-bottom: 14px;
}
/* Colored bottom bar */
.da3-osc-card-bar {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--sc);
  border-radius: 0 0 14px 14px;
}

/* ── Footer ── */
.da3-osc-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 16px;
  border-top: 1px solid var(--da3-line, var(--da3-bd));
  font-size: 12.5px;
  color: var(--da3-fg3);
}

/* color-mix fallback for older browsers */
@supports not (background: color-mix(in srgb, red 14%, transparent)) {
  .da3-osc-card-ico { background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.12); }
}

/* Responsive */
@media (max-width: 900px) {
  .da3-osc-cards { grid-template-columns: repeat(2, 1fr); }
  .da3-osc-donut-wrap { width: 200px; height: 200px; }
  .da3-osc-num { font-size: 38px; }
}
@media (max-width: 640px) {
  .da3-osc-body { flex-direction: column; gap: 20px; }
  .da3-osc-side { max-width: 100%; width: 100%; display: flex; align-items: center; justify-content: space-between; }
  .da3-osc-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .da3-osc-cards { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
 * END ORDERS BY STATUS
 * ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
 * OSC — compact mode (inside 3fr grid column) + entrance animations
 * ════════════════════════════════════════════════════════════════════════════ */

/* When inside a grid column, compact the donut */
.da3-grid .da3-osc { padding: 20px 18px; }

.da3-grid .da3-osc-donut-wrap {
  width: 170px;
  height: 170px;
}
.da3-grid .da3-osc-num  { font-size: 34px; }
.da3-grid .da3-osc-sub  { font-size: 11px; }
.da3-grid .da3-osc-body { gap: 16px; margin-bottom: 20px; }

.da3-grid .da3-osc-side {
  flex: 1;
  max-width: 110px;
  padding: 14px 12px;
  border-radius: 12px;
}
.da3-grid .da3-osc-pct  { font-size: 22px; }

.da3-grid .da3-osc-cards {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.da3-grid .da3-osc-card { min-height: 90px; padding: 14px 12px 0; border-radius: 12px; }
.da3-grid .da3-osc-card-ico  { width: 34px; height: 34px; font-size: 14px; }
.da3-grid .da3-osc-card-num  { font-size: 22px; }
.da3-grid .da3-osc-card-lbl  { font-size: 11.5px; padding-bottom: 12px; }
.da3-grid .da3-osc-head      { margin-bottom: 18px; }
.da3-grid .da3-osc-title     { font-size: 14px; }

/* ── Entrance animations ── */

/* Side % cards */
.da3-osc-side {
  animation: osc-fade-up .45s ease both;
}
.da3-osc-side:nth-child(1) { animation-delay: .1s; }
.da3-osc-side:nth-child(3) { animation-delay: .2s; }

/* Donut wrapper */
.da3-osc-donut-wrap {
  animation: osc-scale-in .5s cubic-bezier(.34,1.56,.64,1) .05s both;
}

/* Bottom status cards — stagger */
.da3-osc-card {
  animation: osc-fade-up .4s ease both;
}
.da3-osc-card:nth-child(1) { animation-delay: .25s; }
.da3-osc-card:nth-child(2) { animation-delay: .32s; }
.da3-osc-card:nth-child(3) { animation-delay: .39s; }
.da3-osc-card:nth-child(4) { animation-delay: .46s; }

/* Footer */
.da3-osc-foot { animation: osc-fade-up .35s ease .55s both; }

/* Keyframes */
@keyframes osc-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes osc-scale-in {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}

/* Card hover lift */
.da3-osc-card {
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: default;
}
.da3-osc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

/* ════════════════════════════════════════════════════════════════════════════
 * END OSC compact + animations
 * ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
 * REVENUE CHART — toggle bar/line + year select
 * ════════════════════════════════════════════════════════════════════════════ */

.rev-toggles {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rev-tog {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--da3-bd);
  background: transparent;
  color: var(--da3-fg3);
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.rev-tog:hover {
  background: var(--da3-abg);
  color: var(--da3-accent);
  border-color: var(--da3-accent);
}
.rev-tog-active {
  background: var(--da3-accent) !important;
  color: #fff !important;
  border-color: var(--da3-accent) !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.28);
}

.rev-yr-sel {
  margin-inline-start: 4px;
}

/* ════════════════════════════════════════════════════════════════════════════
 * END REVENUE CHART toggles
 * ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
 * OSC v2 — full-width premium redesign
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Card ── */
.da3-osc {
  padding: 28px 28px 20px;
}

/* ── Header ── */
.da3-osc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.da3-osc-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  color: var(--da3-fg1);
}
.da3-osc-title i { font-size: 20px; color: var(--da3-accent); }
.da3-osc-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  background: var(--da3-bg2);
  border: 1px solid var(--da3-bd);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--da3-fg2);
}

/* ── Middle body: side | donut | side ── */
.da3-osc-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin-bottom: 40px;
}

/* Side % card */
.da3-osc-side {
  flex: 0 0 160px;
  background: var(--da3-bg2);
  border: 1px solid var(--da3-bd);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  animation: osc-fade-up .45s ease both;
}
.da3-osc-side:nth-of-type(1) { animation-delay: .15s; }
.da3-osc-side:nth-of-type(3) { animation-delay: .25s; }

.da3-osc-pct {
  font-size: 36px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 10px;
}
.da3-osc-lbl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  color: var(--da3-fg2);
  font-weight: 600;
}
.da3-osc-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Donut wrapper ── */
.da3-osc-donut-wrap {
  position: relative;
  width: 300px;
  height: 300px;
  flex-shrink: 0;
  animation: osc-scale-in .55s cubic-bezier(.34,1.56,.64,1) .05s both;
}
.da3-osc-donut-wrap canvas {
  position: relative;
  z-index: 2;
  width: 100% !important;
  height: 100% !important;
  filter: drop-shadow(0 0 22px rgba(99,102,241,.3));
}

/* Glow rings behind donut */
.osc-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.osc-ring-1 {
  border: 1px solid rgba(99,102,241,.12);
  margin: -18px;
  animation: osc-ring-pulse 3s ease-in-out infinite;
}
.osc-ring-2 {
  border: 1px solid rgba(99,102,241,.07);
  margin: -36px;
  animation: osc-ring-pulse 3s ease-in-out 1s infinite;
}

@keyframes osc-ring-pulse {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.03); }
}

/* Center label */
.da3-osc-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}
.da3-osc-num {
  font-size: 64px;
  font-weight: 900;
  color: var(--da3-fg1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.da3-osc-sub {
  font-size: 13px;
  color: var(--da3-fg3);
  font-weight: 500;
  margin-top: 6px;
}

/* ── Bottom 4 cards ── */
.da3-osc-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.da3-osc-card {
  background: var(--da3-bg2);
  border: 1px solid var(--da3-bd);
  border-radius: 16px;
  padding: 20px 18px 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 100px;
  animation: osc-fade-up .4s ease both;
  animation-delay: var(--delay, 0ms);
  transition: transform .18s ease, box-shadow .18s ease;
}
.da3-osc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

/* Icon circle */
.da3-osc-card-left { flex-shrink: 0; }
.da3-osc-card-ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sc) 12%, transparent);
  border: 2px solid color-mix(in srgb, var(--sc) 35%, transparent);
  color: var(--sc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* Number + label */
.da3-osc-card-right {
  flex: 1;
  min-width: 0;
  padding-bottom: 18px;
}
.da3-osc-card-num {
  font-size: 32px;
  font-weight: 900;
  color: var(--da3-fg1);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 4px;
}
.da3-osc-card-lbl {
  font-size: 13px;
  color: var(--da3-fg3);
  font-weight: 500;
}

/* Bottom color bar */
.da3-osc-card-bar {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--sc);
  border-radius: 0 0 16px 16px;
}

/* ── Footer ── */
.da3-osc-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--da3-line, var(--da3-bd));
  font-size: 13px;
  color: var(--da3-fg3);
}

/* color-mix fallback */
@supports not (background: color-mix(in srgb, red 12%, transparent)) {
  .da3-osc-card-ico { background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.15); }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .da3-osc-donut-wrap { width: 260px; height: 260px; }
  .da3-osc-num { font-size: 52px; }
  .da3-osc-body { gap: 28px; }
}
@media (max-width: 768px) {
  .da3-osc-cards { grid-template-columns: repeat(2, 1fr); }
  .da3-osc-body  { flex-direction: column; gap: 20px; }
  .da3-osc-side  { flex: 0 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; }
  .da3-osc-donut-wrap { width: 220px; height: 220px; }
  .da3-osc-num { font-size: 44px; }
}
@media (max-width: 480px) {
  .da3-osc-cards { grid-template-columns: 1fr 1fr; }
  .da3-osc { padding: 18px 16px 14px; }
}

/* Remove compact-grid overrides for standalone osc */
.da3-osc:not(.da3-grid *) .da3-osc-donut-wrap { width: 300px; height: 300px; }

/* ════════════════════════════════════════════════════════════════════════════
 * END OSC v2
 * ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
 * CHARTS ROW — 1:1 grid + compact OSC override
 * ════════════════════════════════════════════════════════════════════════════ */

/* Equal 50/50 grid */
.da3-grid-1-1 {
  grid-template-columns: 1fr 1fr;
}

/* Stretch both cards to same height */
.da3-charts-row {
  align-items: stretch;
}
.da3-charts-row > .da3-card,
.da3-charts-row > .da3-osc {
  display: flex;
  flex-direction: column;
}
/* Revenue chart fills remaining height */
.da3-charts-row > .da3-card .da3-chart {
  flex: 1;
  min-height: 220px;
}

/* ── OSC compact inside the 1:1 grid ── */
.da3-charts-row .da3-osc { padding: 22px 20px 16px; }

.da3-charts-row .da3-osc-head    { margin-bottom: 20px; }
.da3-charts-row .da3-osc-title   { font-size: 15px; }
.da3-charts-row .da3-osc-body    { gap: 18px; margin-bottom: 20px; flex: 1; align-items: center; }

.da3-charts-row .da3-osc-donut-wrap {
  width: 190px !important;
  height: 190px !important;
}
.da3-charts-row .da3-osc-num { font-size: 42px !important; }
.da3-charts-row .da3-osc-sub { font-size: 11px !important; }

.da3-charts-row .da3-osc-side {
  flex: 1;
  max-width: 120px !important;
  padding: 16px 14px !important;
  border-radius: 12px !important;
}
.da3-charts-row .da3-osc-pct  { font-size: 24px !important; margin-bottom: 6px !important; }
.da3-charts-row .da3-osc-lbl  { font-size: 12px; }

.da3-charts-row .da3-osc-cards {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}
.da3-charts-row .da3-osc-card {
  min-height: 80px !important;
  padding: 14px 12px 0 !important;
  border-radius: 12px !important;
  gap: 10px !important;
}
.da3-charts-row .da3-osc-card-ico { width: 36px !important; height: 36px !important; font-size: 14px !important; }
.da3-charts-row .da3-osc-card-num { font-size: 22px !important; }
.da3-charts-row .da3-osc-card-lbl { font-size: 11px !important; padding-bottom: 12px !important; }

/* Compact glow rings */
.da3-charts-row .osc-ring-1 { margin: -12px; }
.da3-charts-row .osc-ring-2 { margin: -24px; }

/* Responsive: stack below 900px */
@media (max-width: 900px) {
  .da3-grid-1-1 { grid-template-columns: 1fr; }
  .da3-charts-row .da3-osc-donut-wrap { width: 220px !important; height: 220px !important; }
  .da3-charts-row .da3-osc-num { font-size: 52px !important; }
  .da3-charts-row .da3-osc-cards { grid-template-columns: repeat(4, 1fr) !important; }
  .da3-charts-row .da3-osc-side { max-width: 140px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
 * END CHARTS ROW
 * ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
 * OSC BOTTOM CARDS — exact reference match
 * ════════════════════════════════════════════════════════════════════════════ */

/* Card: horizontal flex, icon left + number/label right */
.da3-osc-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 18px 22px !important;
  border-radius: 14px !important;
  min-height: 88px !important;
  position: relative;
  overflow: hidden;
}

/* Icon: circle with colored STROKE, transparent fill */
.da3-osc-card-ico {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 2px solid var(--sc) !important;
  color: var(--sc) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 10px color-mix(in srgb, var(--sc) 30%, transparent) !important;
}

/* Number: large, white */
.da3-osc-card-right {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.da3-osc-card-num {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: var(--da3-fg1) !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}
.da3-osc-card-lbl {
  font-size: 12px !important;
  color: var(--da3-fg3) !important;
  font-weight: 500 !important;
  padding-bottom: 0 !important;
}

/* Bottom gradient bar */
.da3-osc-card-bar {
  position: absolute !important;
  bottom: 0 !important;
  inset-inline: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, var(--sc), transparent) !important;
  border-radius: 0 !important;
  opacity: .85;
}

/* Compact overrides in grid */
.da3-charts-row .da3-osc-card {
  padding: 14px 14px 20px !important;
  gap: 10px !important;
  min-height: 78px !important;
}
.da3-charts-row .da3-osc-card-ico { width: 38px !important; height: 38px !important; font-size: 14px !important; }
.da3-charts-row .da3-osc-card-num { font-size: 22px !important; }

/* ════════════════════════════════════════════════════════════════════════════
 * END OSC BOTTOM CARDS
 * ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
 * OSC CARDS — force 4 in one row, content centered
 * ════════════════════════════════════════════════════════════════════════════ */

/* Always 4 columns regardless of context */
.da3-osc-cards {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* Center icon + text vertically and horizontally */
.da3-osc-card {
  justify-content: center !important;
  align-items: center !important;
}

.da3-osc-card-right {
  align-items: flex-start;
}

/* ════════════════════════════════════════════════════════════════════════════
 * END OSC CARDS row fix
 * ════════════════════════════════════════════════════════════════════════════ */

/* Force 4 columns — override all previous compact rules */
.da3-osc .da3-osc-cards,
.da3-charts-row .da3-osc .da3-osc-cards,
.da3-grid .da3-osc .da3-osc-cards {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * OSC PROGRESS ROWS — replaces bottom mini-cards
 * ════════════════════════════════════════════════════════════════════════════ */

.da3-osc-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.da3-osc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  animation: osc-fade-up .35s ease both;
}

/* Name + dot — fixed width inline-start */
.da3-osc-row-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 110px;
  justify-content: flex-end;
}
[dir="ltr"] .da3-osc-row-meta { justify-content: flex-start; }

.da3-osc-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.da3-osc-row-nm {
  font-size: 13px;
  font-weight: 600;
  color: var(--da3-fg2);
  white-space: nowrap;
}

/* Track bar */
.da3-osc-row-track {
  flex: 1;
  height: 7px;
  background: var(--da3-bg2);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--da3-bd);
}
.da3-osc-row-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 60%, transparent), var(--sc));
  transition: width .7s cubic-bezier(.4,0,.2,1);
}

/* Count number — fixed width inline-end */
.da3-osc-row-cnt {
  flex: 0 0 32px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Compact inside grid column */
.da3-charts-row .da3-osc-rows { gap: 11px; }
.da3-charts-row .da3-osc-row-meta { flex: 0 0 90px; }
.da3-charts-row .da3-osc-row-nm { font-size: 12px; }
.da3-charts-row .da3-osc-track { height: 6px; }

/* ════════════════════════════════════════════════════════════════════════════
 * END OSC PROGRESS ROWS
 * ════════════════════════════════════════════════════════════════════════════ */

/* OSC rows — equal height + uniform spacing */
.da3-osc-rows { gap: 16px !important; }
.da3-osc-row  { min-height: 32px !important; align-items: center !important; }
.da3-osc-row-track { height: 8px !important; }
.da3-osc-row-fill  { height: 8px !important; }
.da3-osc-row-meta  { flex: 0 0 100px !important; }
.da3-osc-row-cnt   { flex: 0 0 28px !important; }

/* OSC rows — tight spacing + aligned start */
.da3-osc-rows { gap: 10px !important; }
.da3-osc-row-meta {
  flex: 0 0 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
  justify-content: flex-end !important;
}
[dir="ltr"] .da3-osc-row-meta { justify-content: flex-start !important; }

/* OSC rows — remove all spacing between rows, strict alignment */
.da3-osc-rows { gap: 0 !important; }
.da3-osc-row {
  padding: 7px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid transparent;
}
.da3-osc-row-cnt {
  flex: 0 0 22px !important;
  min-width: 22px !important;
  text-align: start !important;
}
.da3-osc-row-track { flex: 1 !important; }

/* OSC rows — fixed-width number column so all bars start at exact same point */
.da3-osc-row-cnt {
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  text-align: center !important;
  display: inline-block !important;
}

/* OSC rows — meta fixed-width, content right-aligned (RTL start) */
.da3-osc-row-meta {
  flex: 0 0 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  justify-content: flex-start !important;
  gap: 6px !important;
}
.da3-osc-row-nm {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* OSC rows — track starts right after name, extends full remaining width */
.da3-osc-row-meta {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: unset !important;
  max-width: unset !important;
  white-space: nowrap !important;
}
.da3-osc-row-track {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}


/* ════════════════════════════════════════════════════════════════════════════
 * RECENT ORDERS TABLE  (.da3-ro-*)
 * ════════════════════════════════════════════════════════════════════════════ */

/* Card overrides */
.da3-ro-card { padding: 0; overflow: hidden; }
.da3-ro-card .da3-card-head {
  padding: 8px 20px;
  border-bottom: 1px solid var(--da3-bd);
  margin-bottom: 0;
}

/* Column template — shared between header + rows */
.da3-ro-cols {
  display: grid;
  grid-template-columns: 2.2fr 1.5fr 1.1fr 1.3fr 1.4fr 52px;
  align-items: center;
  gap: 0;
}

/* ── Header ── */
.da3-ro-labels {
  display: grid;
  grid-template-columns: 2.2fr 1.5fr 1.1fr 1.3fr 1.4fr 52px;
  align-items: center;
  padding: 0 20px;
  height: 38px;
  background: var(--da3-bg2);
  border-bottom: 1px solid var(--da3-bd);
}
.da3-ro-labels span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--da3-fg3);
  white-space: nowrap;
}
.da3-ro-labels span:last-child { text-align: center; }

/* ── List ── */
.da3-ro-list { display: flex; flex-direction: column; }

/* ── Row ── */
.da3-ro-row {
  display: grid;
  grid-template-columns: 2.2fr 1.5fr 1.1fr 1.3fr 1.4fr 52px;
  align-items: center;
  padding: 0 20px;
  height: 52px;
  border-bottom: 1px solid var(--da3-line);
  position: relative;
  transition: background 120ms ease;
  opacity: 0;
  animation: roIn 200ms ease-out forwards;
}
.da3-ro-row:last-child  { border-bottom: none; }
.da3-ro-row:hover       { background: color-mix(in srgb, var(--da3-accent) 4%, transparent); }
.da3-ro-row::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--da3-accent);
  opacity: 0;
  transition: opacity 120ms ease;
}
[dir="ltr"] .da3-ro-row::before { border-radius: 3px 0 0 3px; }
.da3-ro-row:hover::before { opacity: 1; }

@keyframes roIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.da3-ro-row:nth-child(1) { animation-delay:  30ms; }
.da3-ro-row:nth-child(2) { animation-delay:  60ms; }
.da3-ro-row:nth-child(3) { animation-delay:  90ms; }
.da3-ro-row:nth-child(4) { animation-delay: 120ms; }
.da3-ro-row:nth-child(5) { animation-delay: 150ms; }
.da3-ro-row:nth-child(6) { animation-delay: 180ms; }
.da3-ro-row:nth-child(7) { animation-delay: 210ms; }
.da3-ro-row:nth-child(8) { animation-delay: 240ms; }

/* ── Cell ── */
.da3-ro-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  overflow: hidden;
}

/* ── Order icon ── */
.da3-ro-ico-wrap {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--da3-accent) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--da3-accent);
}

/* ── Avatar ── */
.da3-av {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--da3-accent) 15%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--da3-accent);
  text-transform: uppercase;
}

/* ── Text ── */
.da3-ro-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--da3-fg1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.da3-ro-val {
  font-size: 13px;
  font-weight: 400;
  color: var(--da3-fg1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Badge ── */
.da3-ro-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  background: color-mix(in srgb, var(--bc) 13%, transparent);
  color: var(--bc);
  border: 1px solid color-mix(in srgb, var(--bc) 22%, transparent);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.da3-ro-bdot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Actions ── */
.da3-ro-actions { justify-content: center; }
.da3-ro-act-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  color: var(--da3-fg3);
  border: 1px solid var(--da3-bd);
  text-decoration: none;
  font-size: 13px;
  transition: background 150ms, color 150ms, border-color 150ms;
}
.da3-ro-act-btn:hover {
  background: color-mix(in srgb, var(--da3-accent) 10%, transparent);
  color: var(--da3-accent);
  border-color: var(--da3-accent);
}

/* ── Empty state ── */
.da3-ro-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--da3-fg3);
  font-size: 13px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .da3-ro-labels { display: none; }
  .da3-ro-row {
    grid-template-columns: 1fr 1fr;
    height: auto;
    padding: 12px 16px;
    gap: 8px;
    border-bottom: 1px solid var(--da3-bd);
  }
  .da3-ro-row:hover::before { display: none; }
  .da3-ro-actions { justify-content: flex-start; }
}

/* ═══════════════════ END RECENT ORDERS ═══════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
 * TOP SELLING — Premium full-width  (.da3-ts-*)
 * ════════════════════════════════════════════════════════════════════════════ */

.da3-ts-card {
  padding: 0;
  overflow: hidden;
}

/* ── Header ── */
.da3-ts-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--da3-bd);
}
.da3-ts-sub {
  font-size: 12px;
  color: var(--da3-fg3);
  font-weight: 400;
}

/* ── Body: hero + list side by side ── */
.da3-ts-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 320px;
}

/* ─── HERO panel (rank #1) ─── */
.da3-ts-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: linear-gradient(145deg, #0d1117 0%, #161b2e 40%, #1a1040 100%);
  border-inline-end: 1px solid rgba(255,255,255,.06);
  text-align: center;
  overflow: hidden;
}

/* Crown top-start */
.da3-ts-crown {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-start: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #f59e0b;
}

/* Badge top-end */
.da3-ts-hero-badge {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(59,130,246,.15);
  border: 1px solid rgba(59,130,246,.3);
  color: #93c5fd;
  font-size: 11px;
  font-weight: 600;
}

/* Glow ring behind image */
.da3-ts-hero-glow {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,.25) 0%, transparent 70%);
  pointer-events: none;
}

/* Product image */
.da3-ts-hero-img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  border-radius: 14px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 8px 24px rgba(59,130,246,.3));
  margin-bottom: 14px;
}

.da3-ts-hero-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  max-width: 200px;
  line-height: 1.3;
}
.da3-ts-hero-num {
  font-size: 36px;
  font-weight: 800;
  color: #60a5fa;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.da3-ts-hero-lbl {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  margin-bottom: 14px;
  margin-top: 2px;
}

/* Progress bar */
.da3-ts-hero-bar-wrap {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,.1);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 8px;
}
.da3-ts-hero-bar {
  height: 100%;
  width: var(--p, 0%);
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 99px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.da3-ts-hero-pct {
  font-size: 11px;
  color: rgba(255,255,255,.4);
}

/* ─── List panel (ranks 2-5) ─── */
.da3-ts-list {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
}

.da3-ts-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--da3-line);
  transition: background 120ms ease;
}
.da3-ts-row:last-child { border-bottom: none; }
.da3-ts-row:hover      { background: var(--da3-bg2); }

/* rank badge — first DOM child, rightmost in RTL */
.da3-ts-rnk-badge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

/* product image — second DOM child */
.da3-ts-row-img {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--da3-bd);
}

/* info block — flexible middle */
.da3-ts-row-info {
  flex: 1;
  min-width: 0;
}
.da3-ts-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--da3-fg1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.da3-ts-row-cnt {
  font-size: 11px;
  color: var(--da3-fg3);
  margin-bottom: 8px;
}
.da3-ts-row-bar-w {
  height: 4px;
  background: var(--da3-line);
  border-radius: 99px;
  overflow: hidden;
}
.da3-ts-row-bar {
  height: 100%;
  border-radius: 99px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
}

/* % tag — last DOM child, leftmost in RTL */
.da3-ts-pct-tag {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  width: 48px;
  text-align: center;
}

/* keep old name for compat (no longer used) */
.da3-ts-row-top { display: contents; }

/* rank badge DUPLICATE removal — keep this block only */
._da3-ts-rnk-unused {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

/* ─── Footer stats ─── */
.da3-ts-footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--da3-bd);
}
.da3-ts-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-inline-end: 1px solid var(--da3-bd);
}
.da3-ts-stat:last-child { border-inline-end: none; }

.da3-ts-stat-ico {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--si) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--si) 22%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--si);
}
.da3-ts-stat-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--da3-fg1);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.da3-ts-stat-lbl {
  font-size: 11px;
  color: var(--da3-fg3);
  margin-top: 2px;
}

/* ─── Responsive ─── */
@media (max-width: 991px) {
  .da3-ts-body { grid-template-columns: 1fr; }
  .da3-ts-hero { border-inline-end: none; border-bottom: 1px solid var(--da3-bd); padding: 28px 20px; }
  .da3-ts-footer { grid-template-columns: repeat(2, 1fr); }
  .da3-ts-stat:nth-child(2) { border-inline-end: none; }
  .da3-ts-stat:nth-child(3) { border-top: 1px solid var(--da3-bd); }
  .da3-ts-stat:nth-child(4) { border-top: 1px solid var(--da3-bd); border-inline-end: none; }
}
@media (max-width: 575px) {
  .da3-ts-footer { grid-template-columns: 1fr 1fr; }
  .da3-ts-row { padding: 10px 14px; }
  .da3-ts-pct-tag { width: 40px; font-size: 11px; }
}


/* ════════════════════════════════════════════════════════════════════════════
 * TOP SELLING — Hero rank #1 panel  (.da3-ts-h1-*)
 * ════════════════════════════════════════════════════════════════════════════ */

/* Wrapper: always dark panel */
.da3-ts-h1 {
  position: relative;
  margin: 0 12px 4px;
  border-radius: 12px;
  background: linear-gradient(145deg, #0a0e1a 0%, #111827 40%, #1a1040 100%);
  padding: 14px 16px 16px;
  overflow: hidden;
  text-align: center;
}
body:not(.dark-mode) .da3-ts-h1 {
  background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 50%, #1a3a5c 100%);
}

/* Radial glow — centered */
.da3-ts-h1-glow {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,.22) 0%, transparent 70%);
  pointer-events: none;
}

/* Top row: crown left + badge right */
.da3-ts-h1-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.da3-ts-h1-crown {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(245,158,11,.15);
  border: 1px solid rgba(245,158,11,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #f59e0b;
  flex-shrink: 0;
}
.da3-ts-h1-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(59,130,246,.15);
  border: 1px solid rgba(59,130,246,.28);
  color: #93c5fd;
  font-size: 10px;
  font-weight: 600;
}

/* Product image */
.da3-ts-h1-img-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.da3-ts-h1-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 6px 16px rgba(59,130,246,.35));
}

/* Name */
.da3-ts-h1-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 4px;
}

/* Count row */
.da3-ts-h1-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  margin-bottom: 10px;
}
.da3-ts-h1-num {
  font-size: 28px;
  font-weight: 800;
  color: #60a5fa;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.da3-ts-h1-lbl {
  font-size: 12px;
  color: rgba(255,255,255,.5);
}

/* Progress bar */
.da3-ts-h1-bar-w {
  height: 4px;
  background: rgba(255,255,255,.1);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 6px;
}
.da3-ts-h1-bar {
  height: 100%;
  width: var(--p, 0%);
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 99px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.da3-ts-h1-pct {
  font-size: 10px;
  color: rgba(255,255,255,.35);
}

/* ── Overrides when inside col-stack ── */
.da3-col-stack .da3-ts-card              { padding: 0; overflow: hidden; }
.da3-col-stack .da3-ts-card .da3-ts-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--da3-bd); margin-bottom: 0; }
.da3-col-stack .da3-ts-card .da3-ts-sub  { font-size: 11px; color: var(--da3-fg3); }
.da3-col-stack .da3-ts-footer            { display: none; }
.da3-col-stack .da3-ts-body              { display: block; }

/* ── List rows in col-stack ── */
.da3-col-stack .da3-ts-list    { padding: 4px 0 8px; }
.da3-col-stack .da3-ts-row     { padding: 8px 16px; gap: 8px; }
.da3-col-stack .da3-ts-row-img { width: 38px; height: 38px; }
.da3-col-stack .da3-ts-rnk-badge { width: 26px; height: 26px; font-size: 12px; border-radius: 7px; }
.da3-col-stack .da3-ts-pct-tag  { width: 42px; font-size: 11px; }
.da3-col-stack .da3-ts-row-name { font-size: 12px; }
.da3-col-stack .da3-ts-row-cnt  { font-size: 10px; }

/* dark/light mode — list rows use tokens so no override needed */
.da3-ts-row       { border-bottom-color: var(--da3-line); }
.da3-ts-row:hover { background: var(--da3-bg2); }
.da3-ts-row-bar-w { background: var(--da3-line); }

/* ═══════════════════ END TOP SELLING HERO ═══════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
 * TOP VIEWED  (.da3-tv-*)
 * ════════════════════════════════════════════════════════════════════════════ */

.da3-tv-card { padding: 0; overflow: hidden; }
.da3-tv-card .da3-card-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--da3-bd);
  margin-bottom: 0;
}

.da3-tv-list { display: flex; flex-direction: column; }

.da3-tv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--da3-line);
  transition: background 120ms ease;
}
.da3-tv-row:last-child { border-bottom: none; }
.da3-tv-row:hover      { background: var(--da3-bg2); }

/* Rank circle */
.da3-tv-rnk {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

/* Product image */
.da3-tv-img {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid var(--da3-bd);
}

/* Info block */
.da3-tv-info {
  flex: 1;
  min-width: 0;
}
.da3-tv-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--da3-fg1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.da3-tv-views {
  font-size: 11px;
  color: var(--da3-fg3);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Count */
.da3-tv-count {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--da3-fg1);
  font-variant-numeric: tabular-nums;
  width: 28px;
  text-align: center;
}

/* Trend + sparkline */
.da3-tv-trend {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 56px;
}
.da3-tv-pct {
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.da3-tv-spark {
  width: 52px;
  height: 20px;
  display: block;
}

/* ═══════════════════ END TOP VIEWED ═══════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
 * TOP SELLING v2  (.da3-ts2-*)
 * ════════════════════════════════════════════════════════════════════════════ */

.da3-ts2-card { padding: 0; overflow: hidden; }
.da3-ts2-card .da3-card-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--da3-bd);
  margin-bottom: 0;
}

.da3-ts2-list { display: flex; flex-direction: column; }

.da3-ts2-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--da3-line);
  transition: background 120ms ease;
}
.da3-ts2-row:last-child { border-bottom: none; }
.da3-ts2-row:hover      { background: var(--da3-bg2); }

/* Rank circle */
.da3-ts2-rnk {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

/* Image */
.da3-ts2-img {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid var(--da3-bd);
}

/* Info: name + bar */
.da3-ts2-info {
  flex: 1;
  min-width: 0;
}
.da3-ts2-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--da3-fg1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}
.da3-ts2-bar-w {
  height: 4px;
  background: var(--da3-line);
  border-radius: 99px;
  overflow: hidden;
}
.da3-ts2-bar {
  height: 100%;
  border-radius: 99px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
}

/* Count */
.da3-ts2-count {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  width: 28px;
  text-align: center;
}

/* ═══════════════════ END TOP SELLING v2 ═══════════════════ */


/* ═══════════════════ TOP CUSTOMERS + RATINGS WRAP ═══════════════════ */

.da3-tc-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 991px) { .da3-tc-wrap { grid-template-columns: 1fr; } }

/* Card shell */
.da3-tc-card, .da3-rv-card {
  padding: 0; overflow: hidden;
  background: var(--da3g-card);
  border: 1px solid var(--da3g-bd);
  border-radius: 14px;
  box-shadow: var(--da3g-shadow);
}

/* ── Shared header ── */
.da3-tc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--da3g-bd);
}
.da3-tc-head-start { display: flex; align-items: center; gap: 12px; }
.da3-tc-icon {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: color-mix(in srgb, #f59e0b 15%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: #f59e0b;
}
.da3-tc-title { font-size: 14px; font-weight: 700; color: var(--da3g-fg1); line-height: 1.25; }
.da3-tc-sub   { font-size: 11px; color: var(--da3g-fg3); margin-top: 2px; }
.da3-tc-all-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 9999px;
  border: 1.5px solid var(--da3g-accent);
  color: var(--da3g-accent);
  font-size: 12px; font-weight: 600; text-decoration: none;
  transition: background 150ms, color 150ms; white-space: nowrap;
}
.da3-tc-all-btn:hover { background: var(--da3g-accent); color: #fff; }
/* LTR: flip arrow + move it after text */
[dir="ltr"] .da3-tc-all-btn { flex-direction: row-reverse; }
[dir="ltr"] .da3-tc-all-btn i { transform: scaleX(-1); }

/* ── Column headers ── */
.da3-tc-cols {
  display: grid;
  grid-template-columns: 52px 1fr 140px;
  align-items: center;
  padding: 0 20px; height: 32px;
  background: var(--da3g-bg2);
  border-bottom: 1px solid var(--da3g-bd);
}
.da3-tc-cols span {
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--da3g-fg3);
}

/* ── Row ── */
.da3-tc-row {
  display: grid;
  grid-template-columns: 52px 1fr 140px;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--da3g-line);
  transition: background 120ms ease;
}
.da3-tc-row:last-child { border-bottom: none; }
.da3-tc-row:hover { background: color-mix(in srgb, var(--da3g-accent) 5%, transparent); }

/* ── Rank medals ── */
.da3-tc-rank { display: flex; align-items: center; justify-content: center; }

/* SVG medal icon */
.da3-medal-svg {
  width: 36px; height: 50px; display: block; flex-shrink: 0;
  overflow: visible;
}

/* ── Avatar + name ── */
.da3-tc-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.da3-tc-av {
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.da3-tc-txt   { min-width: 0; }
.da3-tc-name  { font-size: 13px; font-weight: 700; color: var(--da3g-fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da3-tc-email { font-size: 11px; color: var(--da3g-fg3); margin-top: 1px; direction: ltr; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Plain rank number (4,5) ── */
.da3-tc-num {
  font-size: 15px; font-weight: 700; color: var(--da3g-fg2);
  text-align: center;
}

/* ── Orders column (stacked: number → chart → trend) ── */
.da3-tc-orders {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 3px; min-width: 0;
}
.da3-tc-cnt {
  font-size: 22px; font-weight: 800; color: var(--da3g-fg1);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.da3-tc-spark {
  width: 100%; height: 28px; display: block;
  overflow: visible;
}
.da3-tc-trend-row {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  justify-content: flex-end;
}
.da3-tc-trend-val  { font-size: 12px; font-weight: 700; line-height: 1; }
.da3-tc-trend-lbl  { font-size: 10px; color: var(--da3g-fg3); white-space: nowrap; }
.da3-tc-mom-up   { color: #10b981; }
.da3-tc-mom-down { color: #ef4444; }
.da3-tc-mom-flat { color: var(--da3g-fg3); }

/* ═══════════════════ END TOP CUSTOMERS + RATINGS ═══════════════════ */



/* ═══════════════════ RATINGS CARD v2 ═══════════════════ */

/* Shared avatar */
.da3-rv-av {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid;
  flex-shrink: 0; min-width: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
/* Shared text */
.da3-rv-rname   { font-size: 13px; font-weight: 700; color: var(--da3g-fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da3-rv-product { font-size: 11px; color: var(--da3g-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Body: 2 columns (score right | list left) */
.da3-rv-body {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
}
/* RTL: score panel on right (first in DOM), list on left */
[dir="rtl"] .da3-rv-body { direction: rtl; }
/* LTR: score panel on left (first in DOM), list on right */
[dir="ltr"] .da3-rv-body { direction: ltr; }

/* ── Left panel: review cards list ── */
.da3-rv-list-panel {
  border-inline-start: 1px solid var(--da3g-bd);
  display: flex; flex-direction: column;
  padding: 8px;
  gap: 6px;
}
.da3-rv-item {
  border: 1px solid var(--da3g-bd);
  border-radius: 9px;
  padding: 7px 10px;
  background: var(--da3g-bg);
  transition: background 120ms ease;
}
.da3-rv-item:hover { background: color-mix(in srgb, var(--da3g-accent) 5%, transparent); }
.da3-rv-item-top {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 4px;
}
.da3-rv-item-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.da3-rv-item-stars { display: flex; gap: 1px; flex-shrink: 0; margin-inline-start: auto; }
.da3-rv-item-desc {
  font-size: 12px; color: var(--da3g-fg2); line-height: 1.4;
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.da3-rv-item-time {
  font-size: 10.5px; color: var(--da3g-fg3);
  display: flex; align-items: center; gap: 4px;
  justify-content: flex-end;
}
/* "عرض الكل" footer */
.da3-rv-list-foot { padding: 6px 4px 2px; text-align: center; margin-top: auto; }
.da3-rv-see-all {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--da3g-accent);
  text-decoration: none; transition: opacity 150ms;
}
.da3-rv-see-all:hover { opacity: .7; }

/* ── Left panel: score section + featured review ── */
.da3-rv-side-panel {
  display: flex; flex-direction: column;
}

/* Score section */
.da3-rv-score-section {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--da3g-bd);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center;
}
.da3-rv-score-lbl {
  font-size: 11px; color: var(--da3g-fg3);
  font-weight: 500; letter-spacing: .03em;
}
.da3-rv-big {
  font-size: 52px; font-weight: 800; color: var(--da3g-fg1);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.da3-rv-stars { display: flex; align-items: center; gap: 3px; }
.da3-rv-total { font-size: 11px; color: var(--da3g-fg3); }

/* Distribution bars */
.da3-rv-dist {
  width: 100%; display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px;
}
.da3-rv-bar-row   { display: flex; align-items: center; gap: 8px; }
.da3-rv-bar-lbl   { font-size: 11px; font-weight: 600; color: var(--da3g-fg2); min-width: 28px; text-align: start; white-space: nowrap; }
.da3-rv-bar-track { flex: 1; height: 6px; border-radius: 99px; background: var(--da3g-line); overflow: hidden; }
.da3-rv-bar-fill  { height: 100%; border-radius: 99px; transition: width .8s cubic-bezier(.4,0,.2,1); }
.da3-rv-bar-cnt   { font-size: 11px; color: var(--da3g-fg3); min-width: 18px; text-align: end; font-variant-numeric: tabular-nums; }

/* Featured review */
.da3-rv-featured {
  flex: 1;
  margin: 14px;
  padding: 14px 16px;
  border: 1px solid var(--da3g-bd);
  border-radius: 12px;
  background: color-mix(in srgb, var(--da3g-accent) 4%, var(--da3g-bg));
  display: flex; flex-direction: column; gap: 10px;
}
.da3-rv-featured-head {
  display: flex; align-items: center; gap: 10px;
}
.da3-rv-featured-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.da3-rv-featured-stars { display: flex; gap: 2px; flex-shrink: 0; }
.da3-rv-featured-desc {
  font-size: 13px; color: var(--da3g-fg2); line-height: 1.6;
  flex: 1;
}
.da3-rv-featured-footer {
  display: flex; align-items: center;
  justify-content: flex-end; /* date at end = left in RTL */
  padding-top: 8px;
  border-top: 1px solid var(--da3g-line);
}
.da3-rv-featured-date {
  font-size: 11px; color: var(--da3g-fg3);
  display: flex; align-items: center; gap: 5px;
}
.da3-rv-verified {
  font-size: 11px; font-weight: 600; color: #10b981;
  display: flex; align-items: center; gap: 4px;
}

/* ═══════════════════ END RATINGS CARD v2 ═══════════════════ */


/* ══════════════════════════════════════════════════════════
   INQUIRIES + SHIPMENTS CARDS
══════════════════════════════════════════════════════════ */
.da3-is-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 991px) { .da3-is-wrap { grid-template-columns: 1fr; } }

.da3-is-card { padding: 0; overflow: hidden; }

/* List container */
.da3-is-list {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}

/* Empty state */
.da3-is-empty {
  padding: 28px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--da3g-fg3);
}

/* Row */
.da3-is-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--da3g-line);
  transition: background 120ms ease;
}
.da3-is-row:last-child { border-bottom: none; }
.da3-is-row:hover { background: color-mix(in srgb, var(--da3g-accent) 5%, transparent); }

/* Avatar circle */
.da3-is-av {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 50%; border: 1.5px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}

/* Info col */
.da3-is-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.da3-is-name {
  font-size: 13px; font-weight: 700; color: var(--da3g-fg1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.da3-is-product {
  font-size: 11px; color: var(--da3g-accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.da3-is-msg {
  font-size: 11px; color: var(--da3g-fg3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Meta col (status + time) */
.da3-is-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px; flex-shrink: 0;
}
.da3-is-status {
  font-size: 10.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  white-space: nowrap;
}
.da3-is-time {
  font-size: 10px; color: var(--da3g-fg3);
  display: flex; align-items: center; gap: 3px;
  white-space: nowrap;
}

/* Unread badge in header subtitle */
.da3-is-badge {
  display: inline-flex; align-items: center;
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #f59e0b;
  font-size: 10.5px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  margin-inline-start: 6px;
}
/* ─── Reply button inside inquiry row ──────────── */
.da3-is-reply-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; border: none; cursor: pointer;
  background: color-mix(in srgb, #8b5cf6 12%, transparent);
  color: #8b5cf6; font-size: 12px; margin-top: 2px;
  transition: background .15s, transform .15s;
  flex-shrink: 0;
}
.da3-is-reply-btn:hover { background: color-mix(in srgb, #8b5cf6 22%, transparent); transform: scale(1.08); }
.da3-is-reply-btn:active { transform: scale(.95); }

/* ═══════════════════ END INQUIRIES + SHIPMENTS ════════════ */

/* ══════════════════════════════════════════════════════════
   QUICK REPLY MODAL  — using system design tokens
══════════════════════════════════════════════════════════ */

/* accent for inquiries (purple) — local override */
.da3-pq-modal { --pq-accent: #8b5cf6; --pq-accent-dark: #7c3aed; }

/* ── Overlay & positioning ── */
.da3-pq-modal {
  display: none; position: fixed; inset: 0;
  z-index: var(--z-modal, 1050);
  align-items: center; justify-content: center;
  padding: var(--space-4, 16px);
}
.da3-pq-modal.is-open { display: flex; }

.da3-pq-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: pqFadeIn var(--duration-fast, 150ms) var(--ease-out);
}

/* ── Dialog shell ── */
.da3-pq-dialog {
  position: relative; z-index: 1;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 16px);
  width: min(500px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.25));
  animation: pqSlideUp var(--duration-base, 250ms) var(--ease-out);
}

@keyframes pqFadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes pqSlideUp { from { opacity:0; transform:translateY(20px) scale(.97) } to { opacity:1; transform:none } }

/* ── Header ── */
.da3-pq-dialog-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.da3-pq-dialog-title {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--text-base, 14px); font-weight: 700;
  color: var(--text-primary);
}
.da3-pq-dialog-icon {
  width: 34px; height: 34px; border-radius: var(--radius-sm, 6px);
  background: rgba(139,92,246,.15);
  color: var(--pq-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.da3-pq-close {
  width: 32px; height: 32px; border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border-color); cursor: pointer;
  background: var(--card-bg); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
  flex-shrink: 0;
}
.da3-pq-close:hover {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.3);
  color: var(--danger, #dc2626);
}

/* ── Scrollable body ── */
.da3-pq-body { overflow-y: auto; flex: 1; }

/* ── Customer info chips ── */
.da3-pq-info-strip {
  padding: 12px 18px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.da3-pq-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius-sm, 6px);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: var(--text-xs, 11px); font-weight: 500;
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.da3-pq-chip i { color: var(--pq-accent); font-size: 10px; flex-shrink: 0; }

/* ── Original message ── */
.da3-pq-orig-wrap { padding: 14px 18px 0; }
.da3-pq-orig-label {
  font-size: var(--text-xs, 11px); font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--pq-accent);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.da3-pq-orig-label::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border-color);
}
.da3-pq-orig-msg {
  font-size: var(--text-sm, 13px); line-height: var(--line-relaxed, 1.7);
  color: var(--text-secondary);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-inline-start: 3px solid var(--pq-accent);
  border-radius: var(--radius-md, 10px);
  padding: 10px 14px;
  white-space: pre-wrap; word-break: break-word;
}

/* ── Reply form ── */
.da3-pq-form { padding: 14px 18px 18px; }
.da3-pq-label {
  display: block;
  font-size: var(--text-sm, 13px); font-weight: 600;
  color: var(--text-primary); margin-bottom: 6px;
}
.da3-pq-required { color: var(--danger, #dc2626); margin-inline-start: 2px; }

.da3-pq-textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 10px);
  padding: 10px 14px;
  font-size: var(--text-base, 14px); line-height: var(--line-relaxed, 1.7);
  font-family: var(--font-family, inherit); resize: vertical;
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  min-height: 120px;
}
.da3-pq-textarea::placeholder { color: var(--text-muted); }
.da3-pq-textarea:focus {
  outline: none;
  border-color: var(--pq-accent);
  box-shadow: 0 0 0 3px rgba(139,92,246,.15);
}
.da3-pq-textarea.da3-pq-input-error {
  border-color: var(--danger, #dc2626);
  box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}

/* ── Action buttons ── */
.da3-pq-actions {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px;
}
.da3-pq-send-btn {
  height: 38px; padding: 0 20px;
  border-radius: var(--radius-md, 10px); border: none; cursor: pointer;
  background: var(--pq-accent-dark);
  color: #fff;
  font-size: var(--text-sm, 13px); font-weight: 700;
  font-family: var(--font-family, inherit);
  display: inline-flex; align-items: center; gap: 7px;
  transition: opacity var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
  box-shadow: 0 2px 10px rgba(124,58,237,.35);
  flex-shrink: 0;
}
.da3-pq-send-btn:hover  { opacity: .88; box-shadow: 0 4px 18px rgba(124,58,237,.45); }
.da3-pq-send-btn:active { transform: scale(.97); }
.da3-pq-send-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.da3-pq-cancel-btn {
  height: 38px; padding: 0 16px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-sm, 13px);
  cursor: pointer; font-family: var(--font-family, inherit);
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.da3-pq-cancel-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* ── Toast notification ── */
.da3-pq-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(12px);
  min-width: 200px; max-width: 340px;
  padding: 10px 20px; border-radius: var(--radius-md, 10px);
  font-size: var(--text-sm, 13px); font-weight: 600;
  color: #fff; z-index: var(--z-toast, 1070);
  opacity: 0;
  transition: opacity .22s var(--ease-out), transform .26s var(--ease-out);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  text-align: center; pointer-events: none;
  display: flex; align-items: center; gap: 7px; justify-content: center;
}
.da3-pq-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.da3-pq-toast--success { background: var(--color-success, #10b981); }
.da3-pq-toast--error   { background: var(--color-danger, #ef4444); }

/* ── Mobile: bottom sheet ── */
@media (max-width: 520px) {
  .da3-pq-modal { padding: 0; align-items: flex-end; }
  .da3-pq-dialog {
    border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
    width: 100%; max-height: 92dvh;
  }
  @keyframes pqSlideUp { from { transform:translateY(100%) } to { transform:translateY(0) } }
}


/* ══════════════════════════════════════════════════════════
   UNIFIED HERO CARD  —  Greeting + Plan merged
══════════════════════════════════════════════════════════ */
.da3-hero-card {
  background: var(--da3g-card);
  border: 1px solid var(--da3g-bd);
  border-radius: 14px;
  box-shadow: var(--da3g-shadow);
  margin-bottom: 20px;
  overflow: hidden;
}

/* Main row */
.da3-hc-main {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
}

/* Greeting */
.da3-hc-greet  { flex: 1; min-width: 0; }
.da3-hc-hello  { font-size: 12px; color: var(--da3g-fg3); font-weight: 500; margin-bottom: 3px; }
.da3-hc-name   {
  font-size: 22px; font-weight: 700; color: var(--da3g-fg1);
  margin: 0 0 8px; line-height: 1.2;
}
.da3-hc-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.da3-hc-sep  { color: var(--da3g-fg3); font-size: 13px; }
.da3-hc-date { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--da3g-fg3); }

/* Vertical separator */
.da3-hc-vsep {
  width: 1px; height: 52px; flex-shrink: 0;
  background: var(--da3g-line);
}

/* Plan section */
.da3-hc-plan {
  display: flex; align-items: center; gap: 16px; flex-shrink: 0;
}
.da3-hc-badge {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 10px; border: 1px solid;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.da3-hc-plan-info {
  display: flex; flex-direction: column; gap: 5px;
}
.da3-hc-plan-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--da3g-fg2);
}
.da3-hc-plan-row i { font-size: 11px; flex-shrink: 0; }
.da3-hc-warn   { color: #f59e0b; }
.da3-hc-danger { color: #ef4444; }
.da3-hc-muted  { color: var(--da3g-fg3) !important; }

/* Renew button */
.da3-hc-renew {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px; border-radius: 9999px;
  color: #fff; font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: opacity 150ms, transform 120ms;
}
.da3-hc-renew:hover { opacity: .88; color: #fff; transform: translateY(-1px); }
.da3-hc-renew i { font-size: 12px; }

/* Progress strip at bottom edge */
.da3-hc-prog { height: 4px; background: var(--da3g-line); }
.da3-hc-prog-fill {
  height: 100%;
  transition: width .8s cubic-bezier(.4,0,.2,1);
  border-start-end-radius: 2px;
  border-end-end-radius: 2px;
}

/* Responsive */
@media (max-width: 768px) {
  .da3-hc-main   { flex-wrap: wrap; padding: 16px; gap: 14px; }
  .da3-hc-vsep   { display: none; }
  .da3-hc-plan   { flex-wrap: wrap; width: 100%; }
  .da3-hc-renew  { flex: 1; justify-content: center; }
  .da3-hc-name   { font-size: 18px; }
}
/* ══════════════════════════════════════════════════════════
   END UNIFIED HERO CARD
══════════════════════════════════════════════════════════ */