@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  --primary: #0f172a;
  --primary-soft: #17243a;
  --accent: #B8298A;
  --accent-2: #7E1A5E;
  --bg: #f8fafc;
  --card: #ffffff;
  --muted: #64748b;
  --line: #e2e8f0;
  --teal: #334155;
  --shadow: 0 18px 55px rgba(15, 23, 42, 0.12);
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html body.panelChoiceBody {
  min-height: 100vh !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 28px !important;
  color: var(--primary) !important;
  background: linear-gradient(180deg, #f8fafc, #ffffff 58%, #FBF2F8) !important;
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif !important;
}

html body.panelChoiceBody .panelChoice {
  width: min(920px, calc(100vw - 32px)) !important;
  padding: 30px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.12) !important;
}

html body.panelChoiceBody .panelLogo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 22px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08) !important;
}

html body.panelChoiceBody .panelLogo img {
  width: 46px !important;
  height: 46px !important;
  object-fit: contain !important;
}

html body.panelChoiceBody .kicker {
  margin: 0 0 10px !important;
  color: #B8298A !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

html body.panelChoiceBody h1 {
  max-width: 720px !important;
  margin: 0 !important;
  color: #0f172a !important;
  font-size: clamp(34px, 5vw, 56px) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

html body.panelChoiceBody .panelChoiceGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 28px !important;
}

html body.panelChoiceBody .panelChoiceGrid a {
  display: grid !important;
  gap: 10px !important;
  min-height: 144px !important;
  padding: 22px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06) !important;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

html body.panelChoiceBody .panelChoiceGrid a:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(184, 41, 138, 0.36) !important;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.1) !important;
}

html body.panelChoiceBody .panelChoiceGrid strong {
  color: #0f172a !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
}

html body.panelChoiceBody .panelChoiceGrid span {
  color: #64748b !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

* {
  box-sizing: border-box;
}

body.panelBody {
  margin: 0 !important;
  min-height: 100vh;
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr);
  color: var(--primary);
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 90, 95, 0.08), transparent 28%),
    radial-gradient(circle at 10% 88%, rgba(15, 92, 104, 0.08), transparent 26%),
    var(--bg) !important;
  font-weight: 700;
}

body,
input,
select,
textarea,
button {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.sidebar {
  position: sticky !important;
  top: 0;
  width: auto !important;
  height: 100vh;
  padding: 22px 16px !important;
  display: flex !important;
  flex-direction: column;
  gap: 22px;
  color: #e2e8f0;
  background: linear-gradient(180deg, #0b1220, #132239) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

html body.panelBody .sidebar,
html body.panelBody aside.sidebar {
  background: linear-gradient(180deg, #071526, #0f172a 62%, #111827) !important;
}

.panelLogo img {
  width: 132px !important;
  height: auto !important;
  object-fit: contain;
}

html body.panelBody .panelLogo.logoAsset,
html body.panelBody .panelLogo.loginLogo.logoAsset,
html body.panelBody .sidebar .panelLogo.logoAsset,
html body.panelBody .loginGate .panelLogo.logoAsset {
  width: auto !important;
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.panelBody .loginCard .panelLogo.logoAsset {
  display: inline-flex !important;
  width: fit-content !important;
  margin-bottom: 14px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: var(--primary) !important;
}

html body.panelBody .panelLogo.logoAsset img,
html body.panelBody .panelLogo.loginLogo.logoAsset img,
html body.panelBody .sidebar .panelLogo.logoAsset img {
  width: 132px !important;
  max-width: 132px !important;
  filter: none !important;
}

.sidebar nav {
  display: grid;
  gap: 8px;
}

.sidebar nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 14px;
  color: #cbd5e1 !important;
  background: transparent;
  font-size: 14px;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.sidebar nav a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(2px);
}

.agencyStatus {
  margin-top: auto;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
}

.agencyStatus span,
.agencyStatus strong {
  display: block;
}

.agencyStatus span {
  color: #94a3b8;
  font-size: 12px;
}

.agencyStatus strong {
  margin-top: 5px;
  color: #fff;
  font-size: 15px;
}

.panelMain {
  width: min(1220px, calc(100vw - 310px)) !important;
  margin: 0 auto !important;
  padding: 28px 0 54px !important;
}

.panelHeader,
.accountPanel,
.approvalPanel,
.livePanel,
.uploadPanel,
.settingsPanel,
.notificationPanel,
.paymentPanel {
  border: 1px solid var(--line) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07) !important;
}

.panelHeader {
  padding: 24px !important;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(36, 59, 90, 0.96)) !important;
  color: #fff;
}

.panelHeader h1 {
  max-width: 880px;
  margin: 8px 0 8px !important;
  color: #fff !important;
  font-size: clamp(30px, 3.3vw, 48px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

.panelSubtext,
.formNote {
  color: var(--muted) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.panelHeader .panelSubtext {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.78) !important;
}

.kicker {
  margin: 0 !important;
  color: #fbbf24 !important;
  text-transform: uppercase;
  font-size: 12px !important;
}

.panelStats {
  margin-top: 18px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px !important;
}

.agencyMode .panelStats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.panelStats article {
  min-height: 100px;
  padding: 18px !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.panelStats span {
  display: block;
  color: var(--muted) !important;
  font-size: 13px !important;
}

.panelStats strong {
  display: block;
  margin-top: 8px;
  color: var(--primary) !important;
  font-size: 30px !important;
  line-height: 1 !important;
}

.accountPanel,
.panelGrid,
.singleApproval {
  margin-top: 18px !important;
}

.accountPanel,
.approvalPanel,
.livePanel,
.uploadPanel {
  padding: 22px !important;
}

.reservationDesk {
  padding: 22px !important;
}

.reservationLayout {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(620px, 1.28fr);
  gap: 16px;
  margin-top: 12px;
}

.reservationForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #f8fafc;
}

.reservationForm label:nth-last-of-type(1),
.reservationForm button {
  grid-column: 1 / -1;
}

.reservationForm button {
  min-height: 46px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-weight: 850;
}

.reservationBoard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.reservationColumn {
  min-height: 220px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #f8fafc;
}

.reservationColumnHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.reservationColumnHead strong {
  color: var(--primary);
  font-size: 14px;
}

.reservationColumnHead span {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #fff;
  background: var(--primary);
  font-size: 12px;
}

.reservationCard {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

.reservationCard strong,
.reservationCard span,
.reservationCard small,
.reservationCard p {
  min-width: 0;
}

.reservationCard span,
.reservationCard small,
.reservationCard p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.reservationCard div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 4px;
}

.reservationCard button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 30px;
  padding: 0 4px !important;
  border-radius: 999px;
  color: var(--primary);
  background: #e2e8f0 !important;
  font-size: 9.5px !important;
  white-space: nowrap;
}

.reservationColumn[data-status="approved"] .reservationColumnHead span,
.reservationColumn[data-status="approved"] .reservationCard button[data-reservation-status="approved"] {
  color: #fff;
  background: #334155 !important;
}

.reservationColumn[data-status="cancelled"] .reservationColumnHead span,
.reservationColumn[data-status="cancelled"] .reservationCard button[data-reservation-status="cancelled"] {
  color: #fff;
  background: #991b1b !important;
}

.reservationColumn[data-status="noshow"] .reservationColumnHead span,
.reservationColumn[data-status="noshow"] .reservationCard button[data-reservation-status="noshow"] {
  color: #fff;
  background: #92400e !important;
}

.reservationCard button.danger {
  color: #fff !important;
  background: #7f1d1d !important;
}

.panelGrid,
.singleApproval {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

.panelSectionHead h2,
.uploadPanel h2 {
  margin: 8px 0 !important;
  color: var(--primary) !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
}

.formGrid,
.agencyAccountForm,
.adminSettingsForm {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
}

.uploadPanel .formGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.uploadPanel > label {
  display: block;
}

.uploadPanel > label textarea {
  min-height: 74px !important;
}

.uploadPanel #submitListingButton,
.uploadPanel .formNote {
  margin-top: 10px;
}

label {
  color: var(--primary) !important;
  font-size: 13px !important;
}

input,
select,
textarea {
  width: 100% !important;
  min-height: 44px;
  margin-top: 7px;
  padding: 0 13px !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  color: var(--primary) !important;
  background: #f8fafc !important;
  outline: 0;
  font-weight: 650;
  min-width: 0;
  text-overflow: ellipsis;
}

textarea {
  min-height: 92px;
  padding-top: 12px !important;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--teal) !important;
  background: #fff !important;
}

button {
  border: 0;
  cursor: pointer;
}

.uploadPanel > button,
.agencyAccountForm button,
.adminSettingsForm button,
.buyPlan,
.modalActions button,
.approvalList button,
.liveList button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  font-weight: 800;
}

.planCards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px !important;
}

.planCards article {
  min-height: 148px;
  padding: 16px !important;
  border: 1px solid var(--line) !important;
  border-radius: 22px !important;
  background: #fff !important;
}

.planCards article.selected {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--primary), var(--primary-soft)) !important;
}

.planCards strong,
.planCards span,
.planCards small {
  display: block;
}

.planCards span {
  margin-top: 10px;
  font-size: 26px;
}

.photoPreview {
  display: grid;
  place-items: center;
  min-height: 88px !important;
  margin: 14px 0;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 18px !important;
  background: #f8fafc !important;
  overflow: hidden;
}

.photoPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.approvalList,
.liveList,
.agencyAccountList,
.notificationList,
.paymentTable {
  display: grid;
  gap: 12px;
}

.approvalList article,
.liveList article,
.agencyAccountList article,
.notificationList article,
.paymentTable article {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.loginGate {
  position: fixed !important;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(16px);
}

.loginGate.hidden {
  display: none !important;
}

.loginCard {
  width: min(520px, 100%);
  padding: 28px !important;
  border: 1px solid var(--line);
  border-radius: 26px !important;
  background: #fff !important;
  box-shadow: var(--shadow);
}

.loginCard h1 {
  margin: 10px 0 18px;
  color: var(--primary);
  font-size: 30px;
  line-height: 1.1;
}

.loginCard button {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.modalBackdrop {
  position: fixed !important;
  inset: 0;
  z-index: 160;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.68);
  backdrop-filter: blur(14px);
}

.modalBackdrop.open,
.modalBackdrop:not([aria-hidden="true"]) {
  display: grid;
}

.modalCard {
  width: min(900px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 24px !important;
  border-radius: 24px !important;
  background: #fff !important;
}

@media (max-width: 1100px) {
  body.panelBody {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative !important;
    height: auto;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
  }

  .sidebar nav {
    display: flex;
    min-width: max-content;
  }

  .agencyStatus {
    display: none;
  }

  .panelMain {
    width: min(100% - 28px, 1220px) !important;
  }

  .panelStats,
  .agencyMode .panelStats,
  .panelGrid,
  .singleApproval,
  .reservationLayout,
  .planCards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .reservationBoard {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .sidebar {
    padding: 14px !important;
  }

  .panelLogo img {
    width: 108px !important;
  }

  .panelHeader h1 {
    font-size: 30px !important;
  }

  .panelStats,
  .agencyMode .panelStats,
  .panelGrid,
  .singleApproval,
  .reservationLayout,
  .reservationForm,
  .reservationBoard,
  .formGrid,
  .agencyAccountForm,
  .adminSettingsForm,
  .planCards {
    grid-template-columns: 1fr !important;
  }
}

/* Final panel cleanup: keep panel colors aligned with the dark footer system. */
html body.panelBody aside.sidebar,
html body.panelBody .sidebar {
  background: linear-gradient(180deg, #071526 0%, #0f172a 62%, #111827 100%) !important;
}

html body.panelBody .panelHeader {
  background: linear-gradient(135deg, #071526 0%, #0f172a 64%, #1e293b 100%) !important;
}

html body.panelBody .agencyStatus {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

html body.panelBody .panelLogo.logoAsset,
html body.panelBody .panelLogo.loginLogo.logoAsset,
html body.panelBody .sidebar .panelLogo.logoAsset {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.panelBody .reservationCard div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html body.panelBody .reservationCard button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 30px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  color: #0f172a !important;
  background: #e2e8f0 !important;
  box-shadow: none !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body.panelBody .reservationColumn[data-status="approved"] .reservationColumnHead span,
html body.panelBody .reservationColumn[data-status="approved"] .reservationCard button[data-reservation-status="approved"] {
  color: #fff !important;
  background: #334155 !important;
}

html body.panelBody .reservationColumn[data-status="cancelled"] .reservationColumnHead span,
html body.panelBody .reservationColumn[data-status="cancelled"] .reservationCard button[data-reservation-status="cancelled"] {
  color: #fff !important;
  background: #991b1b !important;
}

html body.panelBody .reservationColumn[data-status="noshow"] .reservationColumnHead span,
html body.panelBody .reservationColumn[data-status="noshow"] .reservationCard button[data-reservation-status="noshow"] {
  color: #fff !important;
  background: #92400e !important;
}

html body.panelBody .reservationCard button.danger {
  color: #fff !important;
  background: #7f1d1d !important;
}

/* v121 final panel mobile lock: this block must stay last. */
@media (max-width: 760px) {
  html body.panelBody,
  html body.panelChoiceBody {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  html body.panelBody .sidebar,
  html body.panelBody aside.sidebar {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 12px auto 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  html body.panelBody .sidebar nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  html body.panelBody .sidebar nav a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 9px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  html body.panelBody .panelMain {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;
    margin: 12px auto 24px !important;
    padding: 0 !important;
  }

  html body.panelChoiceBody .panelChoice {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;
    padding: 18px !important;
  }

  html body.panelChoiceBody .panelChoiceGrid {
    grid-template-columns: 1fr !important;
  }
}

/* v121 final panel mobile lock: this block must stay last. */
@media (max-width: 760px) {
  html body.panelBody,
  html body.panelChoiceBody {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  html body.panelBody .sidebar,
  html body.panelBody aside.sidebar {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 12px auto 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  html body.panelBody .sidebar nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  html body.panelBody .sidebar nav a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 9px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  html body.panelBody .panelMain {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;
    margin: 12px auto 24px !important;
    padding: 0 !important;
  }

  html body.panelChoiceBody .panelChoice {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;
    padding: 18px !important;
  }

  html body.panelChoiceBody .panelChoiceGrid {
    grid-template-columns: 1fr !important;
  }
}

/* v121 audit fix: panel navigation must not run offscreen on phones. */
html body.panelBody {
  overflow-x: clip !important;
}

html body.panelBody .sidebar nav a,
html body.panelBody .panelHeaderMeta a {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 760px) {
  html body.panelBody .panelShell {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.panelBody .sidebar,
  html body.panelBody aside.sidebar {
    position: static !important;
    width: calc(100% - 24px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 12px auto 0 !important;
    padding: 12px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  html body.panelBody .sidebar .panelLogo,
  html body.panelBody .sidebar .panelLogo.logoAsset {
    min-height: 56px !important;
    justify-content: flex-start !important;
    padding: 0 !important;
  }

  html body.panelBody .sidebar .panelLogo.logoAsset img {
    width: 50px !important;
    height: 50px !important;
  }

  html body.panelBody .sidebar nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  html body.panelBody .sidebar nav a {
    width: 100% !important;
    min-height: 36px !important;
    padding: 9px 10px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
  }

  html body.panelBody .accountBadge {
    margin-top: 10px !important;
    padding: 10px !important;
    font-size: 12px !important;
  }

  html body.panelBody .panelMain {
    width: calc(100% - 24px) !important;
    margin: 12px auto 24px !important;
    padding: 0 !important;
    min-width: 0 !important;
  }

  html body.panelBody .panelHero,
  html body.panelBody .loginCard,
  html body.panelBody .panelGrid,
  html body.panelBody .stats,
  html body.panelBody .uploadPanel,
  html body.panelBody .livePanel,
  html body.panelBody .reservationDesk,
  html body.panelBody .paymentPanel,
  html body.panelBody .accountPanel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body.panelBody .stats,
  html body.panelBody .formGrid,
  html body.panelBody .planCards,
  html body.panelBody .reservationBoard,
  html body.panelBody .panelGrid,
  html body.panelBody main.panelMain section.panelGrid.singleApproval > .uploadPanel,
  html body.panelBody .uploadPanel > .formGrid {
    grid-template-columns: 1fr !important;
  }

  html body.panelBody .reservationBoard {
    overflow: visible !important;
  }

  html body.panelBody h1 {
    font-size: 30px !important;
    line-height: 1 !important;
  }

  html body.panelBody h2 {
    font-size: 22px !important;
    line-height: 1.08 !important;
  }
}

/* v8.3 final palette override: this block intentionally lives at EOF. */
html body.panelBody,
html body.panelBody .loginGate {
  color: #101827 !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(211, 25, 150, 0.10), transparent 28%),
    radial-gradient(circle at 90% 8%, rgba(255, 198, 231, 0.12), transparent 30%),
    linear-gradient(180deg, #FBF2F8 0%, #f8fafc 45%, #FBF2F8 100%) !important;
}

html body.panelBody .loginCard,
html body.panelBody .panelHeader,
html body.panelBody .accountPanel,
html body.panelBody .reservationDesk,
html body.panelBody .uploadPanel,
html body.panelBody .livePanel,
html body.panelBody .approvalPanel,
html body.panelBody .paymentPanel,
html body.panelBody .notificationPanel,
html body.panelBody .settingsPanel,
html body.panelBody .panelStats article,
html body.panelBody .planCard,
html body.panelBody .reservationColumn {
  background:
    radial-gradient(circle at 100% 100%, rgba(211, 25, 150, 0.05), transparent 34%),
    rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(211, 25, 150, 0.14) !important;
  box-shadow: 0 22px 66px rgba(104, 35, 82, 0.08) !important;
}

html body.panelBody .sidebar,
html body.panelBody aside.sidebar {
  background:
    radial-gradient(circle at 14% 2%, rgba(255, 255, 255, 0.14), transparent 24%),
    linear-gradient(180deg, #B8298A 0%, #B8298A 48%, #7E1A5E 100%) !important;
  box-shadow: 18px 0 60px rgba(104, 35, 82, 0.16) !important;
}

html body.panelBody .loginCard .panelLogo.logoAsset {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.panelBody .kicker,
html body.panelBody .panelHeader .kicker,
html body.panelBody .panelSectionHead .kicker,
html body.panelBody .planCard .kicker,
html body.panelBody .panelStats span {
  color: #b87319 !important;
}

html body.panelBody button,
html body.panelBody .buyPlan,
html body.panelBody .submitBtn,
html body.panelBody .modalActions button,
html body.panelBody form button[type="submit"],
html body.panelBody main.panelMain section.panelGrid.singleApproval #submitListingButton {
  color: #fff !important;
  background: linear-gradient(135deg, #B8298A 0%, #B8298A 100%) !important;
  box-shadow: 0 16px 32px rgba(211, 25, 150, 0.17) !important;
}

html body.panelBody .reservationCard button {
  color: #101827 !important;
  background: rgba(255, 244, 251, 0.9) !important;
  box-shadow: none !important;
}

html body.panelBody .planCard.featured,
html body.panelBody .planCards article.selected {
  color: #fff !important;
  background: linear-gradient(135deg, #101827 0%, #7E1A5E 55%, #B8298A 100%) !important;
}

html body.panelBody .planCard.featured *,
html body.panelBody .planCards article.selected * {
  color: inherit !important;
}

/* v8.2 final palette override: this block intentionally lives at EOF. */
html body.panelBody,
html body.panelBody .loginGate {
  color: #101827 !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(211, 25, 150, 0.10), transparent 28%),
    radial-gradient(circle at 90% 8%, rgba(255, 198, 231, 0.12), transparent 30%),
    linear-gradient(180deg, #FBF2F8 0%, #f8fafc 45%, #FBF2F8 100%) !important;
}

html body.panelBody .loginCard,
html body.panelBody .panelHeader,
html body.panelBody .accountPanel,
html body.panelBody .reservationDesk,
html body.panelBody .uploadPanel,
html body.panelBody .livePanel,
html body.panelBody .approvalPanel,
html body.panelBody .paymentPanel,
html body.panelBody .notificationPanel,
html body.panelBody .settingsPanel,
html body.panelBody .panelStats article,
html body.panelBody .planCard,
html body.panelBody .reservationColumn {
  background:
    radial-gradient(circle at 100% 100%, rgba(211, 25, 150, 0.05), transparent 34%),
    rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(211, 25, 150, 0.14) !important;
  box-shadow: 0 22px 66px rgba(104, 35, 82, 0.08) !important;
}

html body.panelBody .sidebar,
html body.panelBody aside.sidebar {
  background:
    radial-gradient(circle at 14% 2%, rgba(255, 255, 255, 0.14), transparent 24%),
    linear-gradient(180deg, #B8298A 0%, #B8298A 48%, #7E1A5E 100%) !important;
  box-shadow: 18px 0 60px rgba(104, 35, 82, 0.16) !important;
}

html body.panelBody .loginCard .panelLogo.logoAsset {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.panelBody .kicker,
html body.panelBody .panelHeader .kicker,
html body.panelBody .panelSectionHead .kicker,
html body.panelBody .planCard .kicker,
html body.panelBody .panelStats span {
  color: #b87319 !important;
}

html body.panelBody button,
html body.panelBody .buyPlan,
html body.panelBody .submitBtn,
html body.panelBody .modalActions button,
html body.panelBody form button[type="submit"],
html body.panelBody main.panelMain section.panelGrid.singleApproval #submitListingButton {
  color: #fff !important;
  background: linear-gradient(135deg, #B8298A 0%, #B8298A 100%) !important;
  box-shadow: 0 16px 32px rgba(211, 25, 150, 0.17) !important;
}

html body.panelBody .reservationCard button {
  color: #101827 !important;
  background: rgba(255, 244, 251, 0.9) !important;
  box-shadow: none !important;
}

html body.panelBody .planCard.featured,
html body.panelBody .planCards article.selected {
  color: #fff !important;
  background: linear-gradient(135deg, #101827 0%, #7E1A5E 55%, #B8298A 100%) !important;
}

html body.panelBody .planCard.featured *,
html body.panelBody .planCards article.selected * {
  color: inherit !important;
}

/* v8.1 final palette override: soft brand-white, no stray brand login surfaces */
html body.panelBody,
html body.panelBody .loginGate {
  color: #101827 !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(211, 25, 150, 0.10), transparent 28%),
    radial-gradient(circle at 90% 8%, rgba(255, 198, 231, 0.12), transparent 30%),
    linear-gradient(180deg, #FBF2F8 0%, #f8fafc 45%, #FBF2F8 100%) !important;
}

html body.panelBody .loginCard,
html body.panelBody .panelHeader,
html body.panelBody .accountPanel,
html body.panelBody .reservationDesk,
html body.panelBody .uploadPanel,
html body.panelBody .livePanel,
html body.panelBody .approvalPanel,
html body.panelBody .paymentPanel,
html body.panelBody .notificationPanel,
html body.panelBody .settingsPanel,
html body.panelBody .panelStats article,
html body.panelBody .planCard,
html body.panelBody .reservationColumn {
  background:
    radial-gradient(circle at 100% 100%, rgba(211, 25, 150, 0.05), transparent 34%),
    rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(211, 25, 150, 0.14) !important;
  box-shadow: 0 22px 66px rgba(104, 35, 82, 0.08) !important;
}

html body.panelBody .sidebar,
html body.panelBody aside.sidebar {
  background:
    radial-gradient(circle at 14% 2%, rgba(255, 255, 255, 0.14), transparent 24%),
    linear-gradient(180deg, #B8298A 0%, #B8298A 48%, #7E1A5E 100%) !important;
  box-shadow: 18px 0 60px rgba(104, 35, 82, 0.16) !important;
}

html body.panelBody .loginCard .panelLogo.logoAsset {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.panelBody .panelLogo.logoAsset img,
html body.panelBody .panelLogo.loginLogo.logoAsset img,
html body.panelBody .sidebar .panelLogo.logoAsset img {
  object-fit: contain !important;
}

html body.panelBody .kicker,
html body.panelBody .panelHeader .kicker,
html body.panelBody .panelSectionHead .kicker,
html body.panelBody .planCard .kicker,
html body.panelBody .panelStats span {
  color: #b87319 !important;
}

html body.panelBody button,
html body.panelBody .buyPlan,
html body.panelBody .submitBtn,
html body.panelBody .modalActions button,
html body.panelBody form button[type="submit"],
html body.panelBody main.panelMain section.panelGrid.singleApproval #submitListingButton {
  color: #fff !important;
  background: linear-gradient(135deg, #B8298A 0%, #B8298A 100%) !important;
  box-shadow: 0 16px 32px rgba(211, 25, 150, 0.17) !important;
}

html body.panelBody .planCard.featured,
html body.panelBody .planCards article.selected {
  color: #fff !important;
  background: linear-gradient(135deg, #101827 0%, #7E1A5E 55%, #B8298A 100%) !important;
}

html body.panelBody .planCard.featured *,
html body.panelBody .planCards article.selected * {
  color: inherit !important;
}

/* v8 unified soft brand-white panel theme */
html body.panelBody {
  color: #101827 !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(201, 22, 143, 0.08), transparent 28%),
    radial-gradient(circle at 92% 6%, rgba(255, 144, 205, 0.08), transparent 24%),
    linear-gradient(180deg, #FBF2F8 0%, #f8fafc 42%, #FBF2F8 100%) !important;
}

html body.panelBody .sidebar {
  color: #fff !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.13), transparent 24%),
    linear-gradient(180deg, #B8298A 0%, #B8298A 46%, #7E1A5E 100%) !important;
  border-right: 0 !important;
  box-shadow: 18px 0 70px rgba(97, 37, 78, 0.16) !important;
}

html body.panelBody .sidebar .panelLogo,
html body.panelBody .sidebar .panelLogo.logoAsset {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

html body.panelBody .panelHero,
html body.panelBody .accountPanel,
html body.panelBody .uploadPanel,
html body.panelBody .livePanel,
html body.panelBody .reservationDesk,
html body.panelBody .paymentPanel,
html body.panelBody .panelCard,
html body.panelBody .statCard,
html body.panelBody .reservationColumn,
html body.panelBody .planCard {
  background:
    radial-gradient(circle at 100% 100%, rgba(201, 22, 143, 0.05), transparent 32%),
    rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(201, 22, 143, 0.14) !important;
  box-shadow: 0 22px 70px rgba(97, 37, 78, 0.08) !important;
}

html body.panelBody .panelHero {
  border-left: 5px solid #B8298A !important;
}

html body.panelBody .kicker,
html body.panelBody .panelSectionHead .kicker,
html body.panelBody .planCard .kicker,
html body.panelBody .statCard span {
  color: #a66a1b !important;
}

html body.panelBody .reservationForm button,
html body.panelBody .agencyAccountForm button,
html body.panelBody .adminSettingsForm button,
html body.panelBody .planCard button,
html body.panelBody .buyPlan,
html body.panelBody .submitBtn,
html body.panelBody form button[type="submit"],
html body.panelBody #submitListingButton,
html body.panelBody .approvalButtons button {
  color: #fff !important;
  background: linear-gradient(135deg, #B8298A 0%, #B8298A 100%) !important;
  box-shadow: 0 16px 32px rgba(201, 22, 143, 0.18) !important;
}

html body.panelBody input,
html body.panelBody select,
html body.panelBody textarea {
  border-color: rgba(201, 22, 143, 0.18) !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

html body.panelBody input:focus,
html body.panelBody select:focus,
html body.panelBody textarea:focus {
  border-color: rgba(201, 22, 143, 0.5) !important;
  box-shadow: 0 0 0 4px rgba(201, 22, 143, 0.08) !important;
}

html body.panelBody .planCard.featured,
html body.panelBody .planCard[data-plan="temel"] {
  color: #fff !important;
  background: linear-gradient(135deg, #101827 0%, #7E1A5E 55%, #B8298A 100%) !important;
  border-color: rgba(201, 22, 143, 0.26) !important;
}

html body.panelBody .planCard.featured *,
html body.panelBody .planCard[data-plan="temel"] * {
  color: inherit !important;
}

/* v8 unified soft brand-white panel theme */
html body.panelBody {
  background:
    radial-gradient(circle at 12% 0%, rgba(201, 22, 143, 0.1), transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(255, 144, 205, 0.08), transparent 28%),
    linear-gradient(180deg, #FBF2F8 0%, #ffffff 42%, #FBF2F8 100%) !important;
  color: #101827 !important;
}

html body.panelBody .sidebar {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.14), transparent 28%),
    linear-gradient(180deg, #B8298A 0%, #B8298A 55%, #7E1A5E 100%) !important;
  box-shadow: 18px 0 60px rgba(97, 37, 78, 0.12) !important;
}

html body.panelBody .sidebar .panelLogo,
html body.panelBody .sidebar .panelLogo.logoAsset {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html body.panelBody .panelHero,
html body.panelBody .accountPanel,
html body.panelBody .uploadPanel,
html body.panelBody .livePanel,
html body.panelBody .reservationDesk,
html body.panelBody .paymentPanel,
html body.panelBody .panelCard,
html body.panelBody .statCard,
html body.panelBody .reservationColumn,
html body.panelBody .planCard {
  background:
    radial-gradient(circle at 100% 100%, rgba(201, 22, 143, 0.055), transparent 32%),
    rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(201, 22, 143, 0.14) !important;
  box-shadow: 0 22px 70px rgba(97, 37, 78, 0.075) !important;
}

html body.panelBody .statCard strong,
html body.panelBody .kicker,
html body.panelBody .panelSectionHead .kicker,
html body.panelBody .planCard .kicker {
  color: #a66a1b !important;
}

html body.panelBody .reservationForm button,
html body.panelBody .agencyAccountForm button,
html body.panelBody .adminSettingsForm button,
html body.panelBody .planCard button,
html body.panelBody .buyPlan,
html body.panelBody .submitBtn,
html body.panelBody form button[type="submit"],
html body.panelBody main.panelMain section.panelGrid.singleApproval #submitListingButton {
  color: #fff !important;
  background: linear-gradient(135deg, #B8298A 0%, #B8298A 100%) !important;
  box-shadow: 0 14px 30px rgba(201, 22, 143, 0.22) !important;
}

html body.panelBody .reservationColumn[data-status="approved"] .reservationCard button[data-reservation-status="approved"] {
  color: #fff !important;
  background: #B8298A !important;
}

html body.panelBody input,
html body.panelBody select,
html body.panelBody textarea {
  border-color: rgba(201, 22, 143, 0.16) !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

html body.panelBody input:focus,
html body.panelBody select:focus,
html body.panelBody textarea:focus {
  border-color: rgba(201, 22, 143, 0.45) !important;
  box-shadow: 0 0 0 4px rgba(201, 22, 143, 0.08) !important;
}

/* v7 Turna-style dashboard refresh: compact, brand, full panel pages. */
html body.panelBody {
  --panel-ink: #0f172a;
  --panel-brand: #B8298A;
  --panel-brand-soft: #FBF2F8;
  --panel-brand-accent: #B8298A;
  --panel-orange: #B8298A;
  --panel-muted: #64748b;
  --panel-line: #FBF2F8;
  --panel-surface: rgba(255, 255, 255, 0.94);
  --panel-shadow: 0 20px 55px rgba(15, 23, 42, 0.08);
  grid-template-columns: 248px minmax(0, 1fr) !important;
  align-items: start !important;
  background:
    radial-gradient(circle at 11% 9%, rgba(168, 85, 247, 0.1), transparent 28%),
    radial-gradient(circle at 94% 18%, rgba(236, 72, 153, 0.12), transparent 26%),
    linear-gradient(180deg, #fdf7ff 0%, #f8fafc 54%, #fbf5ff 100%) !important;
  color: var(--panel-ink) !important;
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 650 !important;
}

html body.panelBody .sidebar,
html body.panelBody aside.sidebar {
  width: 248px !important;
  min-width: 248px !important;
  padding: 18px 14px !important;
  gap: 16px !important;
  background:
    linear-gradient(180deg, rgba(7, 19, 41, 0.98), rgba(14, 39, 78, 0.98) 62%, rgba(9, 18, 34, 0.98)) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 18px 0 50px rgba(15, 23, 42, 0.14) !important;
}

html body.panelBody .sidebar .panelLogo.logoAsset {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 68px !important;
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

html body.panelBody .sidebar .panelLogo.logoAsset img {
  width: 152px !important;
  max-width: 152px !important;
  height: auto !important;
}

html body.panelBody .sidebar nav {
  gap: 6px !important;
}

html body.panelBody .sidebar nav a {
  min-height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  color: #F4DDEB !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

html body.panelBody .sidebar nav a:hover,
html body.panelBody .sidebar nav a:focus-visible {
  color: #0f172a !important;
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  transform: translateX(3px) !important;
}

html body.panelBody .agencyStatus {
  padding: 14px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)) !important;
}

html body.panelBody .panelMain {
  width: min(100% - 40px, 1500px) !important;
  max-width: 1500px !important;
  margin: 0 auto !important;
  padding: 22px 0 46px !important;
}

html body.panelBody .panelHeader {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: auto !important;
  margin: 0 0 16px !important;
  padding: 22px 24px !important;
  border: 1px solid var(--panel-line) !important;
  border-radius: 28px !important;
  color: var(--panel-ink) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(253, 247, 255, 0.96)),
    radial-gradient(circle at 95% 12%, rgba(168, 85, 247, 0.16), transparent 26%) !important;
  box-shadow: var(--panel-shadow) !important;
  overflow: hidden !important;
}

html body.panelBody .panelHeader::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 6px !important;
  background: linear-gradient(180deg, var(--panel-brand), var(--panel-orange)) !important;
}

html body.panelBody .panelHeader .kicker,
html body.panelBody .panelSectionHead .kicker,
html body.panelBody .kicker {
  color: #B8298A !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

html body.panelBody .panelHeader h1 {
  max-width: 960px !important;
  margin: 4px 0 8px !important;
  color: var(--panel-ink) !important;
  font-size: clamp(26px, 2.25vw, 38px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

html body.panelBody .panelSubtext,
html body.panelBody .formNote,
html body.panelBody .paymentNotice {
  color: var(--panel-muted) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 650 !important;
}

html body.panelBody .panelHeaderMeta {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 270px !important;
}

html body.panelBody .panelHeaderMeta span,
html body.panelBody .panelHeaderMeta a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid var(--panel-line) !important;
  background: #fff !important;
  color: var(--panel-ink) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
}

html body.panelBody .panelHeaderMeta span {
  color: #fff !important;
  background: linear-gradient(135deg, #0f172a, #B8298A) !important;
  border-color: transparent !important;
}

html body.panelBody .panelStats,
html body.panelBody .agencyMode .panelStats,
html body.panelBody .adminMode .panelStats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 16px !important;
}

html body.panelBody .panelStats article {
  position: relative !important;
  min-height: 94px !important;
  padding: 16px !important;
  border: 1px solid var(--panel-line) !important;
  border-radius: 22px !important;
  background: var(--panel-surface) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

html body.panelBody .panelStats article::after {
  content: "" !important;
  position: absolute !important;
  right: 14px !important;
  top: 14px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.14), rgba(249, 115, 22, 0.16)) !important;
}

html body.panelBody .panelStats article:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(168, 85, 247, 0.28) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.1) !important;
}

html body.panelBody .panelStats span {
  color: var(--panel-muted) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

html body.panelBody .panelStats strong {
  margin-top: 8px !important;
  color: var(--panel-ink) !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

html body.panelBody .accountPanel,
html body.panelBody .reservationDesk,
html body.panelBody .uploadPanel,
html body.panelBody .livePanel,
html body.panelBody .approvalPanel,
html body.panelBody .paymentPanel,
html body.panelBody .notificationPanel,
html body.panelBody .settingsPanel {
  margin: 0 0 16px !important;
  padding: 20px !important;
  border: 1px solid var(--panel-line) !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: var(--panel-shadow) !important;
}

html body.panelBody .panelSectionHead {
  display: grid !important;
  gap: 4px !important;
  margin-bottom: 16px !important;
}

html body.panelBody .panelSectionHead h2,
html body.panelBody .uploadPanel h2,
html body.panelBody .livePanel h2,
html body.panelBody .approvalPanel h2,
html body.panelBody .paymentPanel h2 {
  margin: 0 !important;
  color: var(--panel-ink) !important;
  font-size: clamp(20px, 1.55vw, 28px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

html body.panelBody .reservationLayout {
  display: grid !important;
  grid-template-columns: minmax(310px, 0.74fr) minmax(0, 1.26fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

html body.panelBody .reservationForm,
html body.panelBody .agencyAccountForm,
html body.panelBody .adminSettingsForm {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 14px !important;
  border: 1px solid var(--panel-line) !important;
  border-radius: 22px !important;
  background: #FBF2F8 !important;
}

html body.panelBody .reservationForm label:has(textarea),
html body.panelBody .reservationForm button,
html body.panelBody .agencyAccountForm button,
html body.panelBody .adminSettingsForm button {
  grid-column: 1 / -1 !important;
}

html body.panelBody label {
  color: var(--panel-ink) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

html body.panelBody input,
html body.panelBody select,
html body.panelBody textarea {
  min-height: 44px !important;
  width: 100% !important;
  margin-top: 6px !important;
  padding: 10px 12px !important;
  border: 1px solid #F4DDEB !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--panel-ink) !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

html body.panelBody textarea {
  min-height: 86px !important;
  resize: vertical !important;
}

html body.panelBody input:focus,
html body.panelBody select:focus,
html body.panelBody textarea:focus {
  outline: 3px solid rgba(168, 85, 247, 0.12) !important;
  border-color: rgba(168, 85, 247, 0.44) !important;
}

html body.panelBody button,
html body.panelBody .buyPlan,
html body.panelBody .modalActions button {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #0f172a, #B8298A) !important;
  box-shadow: 0 14px 30px rgba(168, 85, 247, 0.18) !important;
  cursor: pointer !important;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease !important;
}

html body.panelBody button:hover,
html body.panelBody .buyPlan:hover,
html body.panelBody .modalActions button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 36px rgba(168, 85, 247, 0.22) !important;
}

html body.panelBody .reservationBoard {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(190px, 1fr)) !important;
  gap: 10px !important;
  overflow-x: auto !important;
  padding-bottom: 4px !important;
}

html body.panelBody .reservationColumn {
  min-width: 190px !important;
  min-height: 230px !important;
  padding: 12px !important;
  border: 1px solid #F4DDEB !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #FBF2F8, #ffffff) !important;
}

html body.panelBody .reservationColumnHead {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}

html body.panelBody .reservationColumnHead strong {
  color: var(--panel-ink) !important;
  font-size: 13px !important;
}

html body.panelBody .reservationColumnHead span {
  min-width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: #B8298A !important;
  background: var(--panel-brand-soft) !important;
  font-size: 12px !important;
}

html body.panelBody .reservationCard,
html body.panelBody .liveItem,
html body.panelBody .approvalItem,
html body.panelBody .agencyAccountItem,
html body.panelBody .paymentRow,
html body.panelBody .notificationItem {
  padding: 12px !important;
  border: 1px solid #FBF2F8 !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05) !important;
}

html body.panelBody .reservationCard {
  display: grid !important;
  gap: 7px !important;
}

html body.panelBody .reservationCard div {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html body.panelBody .reservationCard button {
  min-height: 30px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  background: #FBF2F8 !important;
  color: #334155 !important;
  box-shadow: none !important;
}

html body.panelBody .planCards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body.panelBody .planCards article {
  min-height: 160px !important;
  padding: 18px !important;
  border: 1px solid var(--panel-line) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, #ffffff, #FBF2F8) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06) !important;
}

html body.panelBody .planCards article.selected {
  color: #fff !important;
  background: linear-gradient(135deg, #0f172a, #B8298A) !important;
  border-color: transparent !important;
}

html body.panelBody .planCards strong {
  color: inherit !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
}

html body.panelBody .planCards span {
  margin: 12px 0 8px !important;
  color: inherit !important;
  font-size: 24px !important;
  line-height: 1.05 !important;
}

html body.panelBody .planCards small {
  color: inherit !important;
  opacity: 0.82 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

html body.panelBody main.panelMain section.panelGrid.singleApproval {
  gap: 16px !important;
}

html body.panelBody main.panelMain section.panelGrid.singleApproval > .uploadPanel {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.24fr) minmax(0, 0.76fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

html body.panelBody .uploadPanel > .kicker,
html body.panelBody .uploadPanel > h2,
html body.panelBody .uploadPanel > .photoPreview,
html body.panelBody .uploadPanel > label,
html body.panelBody .uploadPanel > button,
html body.panelBody .uploadPanel > .formNote {
  grid-column: 1 !important;
}

html body.panelBody .uploadPanel > .formGrid {
  grid-column: 2 !important;
  grid-row: 1 / span 7 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 14px !important;
  border: 1px solid var(--panel-line) !important;
  border-radius: 22px !important;
  background: #FBF2F8 !important;
}

html body.panelBody .photoPreview {
  min-height: 128px !important;
  border: 1px dashed #F4DDEB !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.06), rgba(236, 72, 153, 0.04)) !important;
}

html body.panelBody .photoPreview img {
  width: 100% !important;
  height: 100% !important;
  min-height: 128px !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

html body.panelBody .adminGrid,
html body.panelBody .panelGrid.adminGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

html body.panelBody .approvalList,
html body.panelBody .liveList,
html body.panelBody .notificationList,
html body.panelBody .paymentTable,
html body.panelBody .agencyAccountList {
  display: grid !important;
  gap: 10px !important;
}

html body.panelBody .modalBackdrop {
  z-index: 10000 !important;
  backdrop-filter: blur(12px) !important;
  background: rgba(15, 23, 42, 0.55) !important;
}

html body.panelBody .modalCard {
  border: 1px solid var(--panel-line) !important;
  border-radius: 28px !important;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28) !important;
}

html body.panelBody .loginGate {
  background:
    radial-gradient(circle at 20% 10%, rgba(168, 85, 247, 0.18), transparent 32%),
    linear-gradient(135deg, #fdf7ff, #FBF2F8) !important;
}

html body.panelBody .loginCard {
  border: 1px solid var(--panel-line) !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.14) !important;
}

html body.panelBody .panelMain > * {
  animation: panelDashboardIn 520ms cubic-bezier(.2, .85, .24, 1) both !important;
}

html body.panelBody .panelMain > *:nth-child(2) { animation-delay: 60ms !important; }
html body.panelBody .panelMain > *:nth-child(3) { animation-delay: 120ms !important; }
html body.panelBody .panelMain > *:nth-child(4) { animation-delay: 180ms !important; }
html body.panelBody .panelMain > *:nth-child(5) { animation-delay: 240ms !important; }

@keyframes panelDashboardIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 1200px) {
  html body.panelBody {
    grid-template-columns: 1fr !important;
  }

  html body.panelBody .sidebar,
  html body.panelBody aside.sidebar {
    position: sticky !important;
    z-index: 20 !important;
    top: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 12px !important;
    overflow-x: auto !important;
  }

  html body.panelBody .sidebar .panelLogo.logoAsset {
    min-height: 52px !important;
    min-width: 148px !important;
    padding: 8px 10px !important;
  }

  html body.panelBody .sidebar .panelLogo.logoAsset img {
    width: 128px !important;
  }

  html body.panelBody .sidebar nav {
    display: flex !important;
    min-width: max-content !important;
  }

  html body.panelBody .panelMain {
    width: min(100% - 24px, 1100px) !important;
    padding-top: 16px !important;
  }

  html body.panelBody .panelHeader,
  html body.panelBody .reservationLayout,
  html body.panelBody main.panelMain section.panelGrid.singleApproval > .uploadPanel,
  html body.panelBody .adminGrid,
  html body.panelBody .panelGrid.adminGrid {
    grid-template-columns: 1fr !important;
  }

  html body.panelBody .panelHeaderMeta {
    justify-content: flex-start !important;
    min-width: 0 !important;
  }

  html body.panelBody .uploadPanel > .formGrid,
  html body.panelBody .uploadPanel > .kicker,
  html body.panelBody .uploadPanel > h2,
  html body.panelBody .uploadPanel > .photoPreview,
  html body.panelBody .uploadPanel > label,
  html body.panelBody .uploadPanel > button,
  html body.panelBody .uploadPanel > .formNote {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  html body.panelBody .uploadPanel > .formGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  html body.panelBody .panelMain {
    width: min(100% - 16px, 680px) !important;
    padding-bottom: 28px !important;
  }

  html body.panelBody .panelHeader,
  html body.panelBody .accountPanel,
  html body.panelBody .reservationDesk,
  html body.panelBody .uploadPanel,
  html body.panelBody .livePanel,
  html body.panelBody .approvalPanel,
  html body.panelBody .paymentPanel {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  html body.panelBody .panelHeader h1 {
    font-size: 25px !important;
  }

  html body.panelBody .panelStats,
  html body.panelBody .agencyMode .panelStats,
  html body.panelBody .adminMode .panelStats,
  html body.panelBody .reservationForm,
  html body.panelBody .agencyAccountForm,
  html body.panelBody .adminSettingsForm,
  html body.panelBody .planCards,
  html body.panelBody .uploadPanel > .formGrid {
    grid-template-columns: 1fr !important;
  }

  html body.panelBody .reservationBoard {
    grid-template-columns: repeat(4, minmax(210px, 1fr)) !important;
    overflow-x: auto !important;
  }

  html body.panelBody .sidebar nav a {
    min-height: 38px !important;
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.panelBody .panelMain > * {
    animation: none !important;
  }
}

/* v7.1 panel fit polish */
html body.panelBody .sidebar .panelLogo.logoAsset {
  justify-content: center !important;
  min-height: 76px !important;
}

html body.panelBody .sidebar .panelLogo.logoAsset img,
html body.panelBody .panelLogo.logoAsset img,
html body.panelBody .panelLogo.loginLogo.logoAsset img {
  width: 72px !important;
  max-width: 72px !important;
  height: 72px !important;
  object-fit: contain !important;
}

html body.panelBody .loginCard .panelLogo.logoAsset {
  width: 84px !important;
  height: 84px !important;
  padding: 6px !important;
}

html body.panelBody .reservationBoard::-webkit-scrollbar,
html body.panelBody .sidebar::-webkit-scrollbar {
  height: 8px !important;
}

html body.panelBody .reservationBoard::-webkit-scrollbar-thumb,
html body.panelBody .sidebar::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.18) !important;
}

html body.panelBody .reservationColumn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html body.panelBody .reservationColumn[data-status="pending"] {
  border-top: 4px solid #B8298A !important;
}

html body.panelBody .reservationColumn[data-status="approved"] {
  border-top: 4px solid #16a34a !important;
}

html body.panelBody .reservationColumn[data-status="cancelled"] {
  border-top: 4px solid #dc2626 !important;
}

html body.panelBody .reservationColumn[data-status="noshow"] {
  border-top: 4px solid #B8298A !important;
}

html body.panelBody .panelHeaderMeta a:hover {
  color: #fff !important;
  background: var(--panel-brand) !important;
  border-color: var(--panel-brand) !important;
}

@media (max-width: 1200px) {
  html body.panelBody .sidebar .panelLogo.logoAsset {
    min-width: 78px !important;
  }

  html body.panelBody .sidebar .panelLogo.logoAsset img {
    width: 48px !important;
    height: 48px !important;
  }
}

/* Compact corporate console for listing and reservation operations. */
html body.panelBody .reservationDesk .panelSectionHead,
html body.panelBody .paymentPanel .panelSectionHead,
html body.panelBody .uploadPanel .panelSectionHead {
  display: grid !important;
  grid-template-columns: minmax(220px, 0.45fr) minmax(360px, 0.55fr) !important;
  align-items: end !important;
  gap: 16px !important;
}

html body.panelBody .reservationDesk .panelSectionHead h2,
html body.panelBody .paymentPanel .panelSectionHead h2 {
  margin: 2px 0 0 !important;
}

html body.panelBody .reservationDesk .panelSectionHead .formNote,
html body.panelBody .paymentPanel .panelSectionHead .formNote {
  max-width: 620px;
  justify-self: end;
}

html body.panelBody .uploadPanel {
  display: grid !important;
  grid-template-columns: minmax(220px, 0.22fr) minmax(620px, 0.78fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

html body.panelBody .uploadPanel > .kicker,
html body.panelBody .uploadPanel > h2,
html body.panelBody .uploadPanel > .photoPreview,
html body.panelBody .uploadPanel > label,
html body.panelBody .uploadPanel > button,
html body.panelBody .uploadPanel > .formNote {
  grid-column: auto !important;
}

html body.panelBody .uploadPanel > .kicker,
html body.panelBody .uploadPanel > h2,
html body.panelBody .uploadPanel > .photoPreview,
html body.panelBody .uploadPanel > label,
html body.panelBody .uploadPanel > button,
html body.panelBody .uploadPanel > .formNote {
  grid-column: 1 !important;
}

html body.panelBody .uploadPanel > .formGrid {
  grid-column: 2 !important;
  grid-row: 1 / span 6 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body.panelBody .uploadPanel > h2 {
  font-size: 22px !important;
}

html body.panelBody .uploadPanel .photoPreview {
  margin: 8px 0 !important;
}

html body.panelBody .reservationBoard {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body.panelBody .reservationColumn {
  min-height: 210px !important;
}

@media (max-width: 1180px) {
  html body.panelBody .uploadPanel,
  html body.panelBody .reservationDesk .panelSectionHead,
  html body.panelBody .paymentPanel .panelSectionHead {
    grid-template-columns: 1fr !important;
  }

  html body.panelBody .uploadPanel > .formGrid,
  html body.panelBody .uploadPanel > .kicker,
  html body.panelBody .uploadPanel > h2,
  html body.panelBody .uploadPanel > .photoPreview,
  html body.panelBody .uploadPanel > label,
  html body.panelBody .uploadPanel > button,
  html body.panelBody .uploadPanel > .formNote {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  html body.panelBody .uploadPanel > .formGrid,
  html body.panelBody .reservationBoard {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

html body.panelBody main.panelMain section.panelGrid.singleApproval {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
}

html body.panelBody main.panelMain section.panelGrid.singleApproval > .uploadPanel,
html body.panelBody main.panelMain section.panelGrid.singleApproval > .livePanel {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

html body.panelBody main.panelMain section.panelGrid.singleApproval > .uploadPanel {
  grid-template-columns: minmax(230px, 0.24fr) minmax(720px, 0.76fr) !important;
}

html body.panelBody main.panelMain section.panelGrid.singleApproval > .uploadPanel > button,
html body.panelBody main.panelMain section.panelGrid.singleApproval #submitListingButton {
  color: #fff !important;
  background: linear-gradient(135deg, #0f172a 0%, #334155 100%) !important;
}

html body.panelBody .accountPanel,
html body.panelBody .reservationDesk,
html body.panelBody .panelCard,
html body.panelBody .statCard {
  border-color: #E2E8F0 !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08) !important;
}

html body.panelBody .reservationForm button,
html body.panelBody .agencyAccountForm button,
html body.panelBody .adminSettingsForm button,
html body.panelBody .planCard button,
html body.panelBody .buyPlan,
html body.panelBody .submitBtn,
html body.panelBody form button[type="submit"] {
  color: #fff !important;
  background: linear-gradient(135deg, #0f172a 0%, #334155 100%) !important;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16) !important;
}

html body.panelBody button:disabled,
html body.panelBody .approvalButtons button:disabled,
html body.panelBody #submitListingButton:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.35);
  box-shadow: none;
}

html body.panelBody .reservationCard button {
  background: #e2e8f0 !important;
  box-shadow: none !important;
}

html body.panelBody .reservationColumn[data-status="approved"] .reservationCard button[data-reservation-status="approved"] {
  color: #fff !important;
  background: #334155 !important;
}

html body.panelBody .reservationColumn[data-status="cancelled"] .reservationCard button[data-reservation-status="cancelled"] {
  color: #fff !important;
  background: #991b1b !important;
}

html body.panelBody .reservationColumn[data-status="noshow"] .reservationCard button[data-reservation-status="noshow"] {
  color: #fff !important;
  background: #92400e !important;
}

html body.panelBody .reservationCard button.danger {
  color: #fff !important;
  background: #7f1d1d !important;
}
/* v121 EOF panel mobile lock: actual final override. */
@media (max-width: 760px) {
  html body.panelBody,
  html body.panelChoiceBody {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  html body.panelBody .sidebar,
  html body.panelBody aside.sidebar {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 12px auto 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  html body.panelBody .sidebar nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  html body.panelBody .sidebar nav a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 9px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  html body.panelBody .panelMain {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;
    margin: 12px auto 24px !important;
    padding: 0 !important;
  }

  html body.panelChoiceBody .panelChoice {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;
    padding: 18px !important;
  }

  html body.panelChoiceBody .panelChoiceGrid {
    grid-template-columns: 1fr !important;
  }
}