@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800;900&display=swap");

:root {
  --magenta: #bd1688;
  --magenta-dark: #7e0f75;
  --purple: #6c2bd9;
  --blue: #0057bd;
  --ink: #092d44;
  --muted: #557086;
  --line: #e7d7ec;
  --paper: #ffffff;
  --soft: #fbf3ff;
  --green: #00bd4f;
  --shadow: 0 18px 46px rgba(9, 45, 68, 0.14);
}

/* v56 final lock - amber/white panels */
html body,
html body.panelBody,
html body.panelChoiceBody {
  background:
    radial-gradient(circle at 12% 8%, rgba(245, 158, 11, .18), transparent 28%),
    linear-gradient(180deg, #fffaf2 0%, #fff 48%, #fff7ed 100%) !important;
  color: #17130c !important;
}

html body .sidebar,
html body .panelSidebar {
  background: linear-gradient(180deg, #351704, #7c2d12 58%, #b45309) !important;
}

html body .panelHero,
html body .statCard,
html body .uploadPanel,
html body .livePanel,
html body .approvalPanel,
html body .settingsPanel,
html body .agencyAccountPanel,
html body .paymentPanel,
html body .notificationPanel,
html body .modalCard,
html body .panelChoiceGrid a,
html body .panelChoice,
html body .liveItem,
html body .approvalItem,
html body .agencyAccountItem,
html body .paymentRow,
html body .notificationItem {
  border-color: #f0dec7 !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 18px 56px rgba(120, 53, 15, .08) !important;
}

html body .panelHero {
  border-left: 6px solid #f59e0b !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,247,237,.94)) !important;
}

html body .kicker,
html body .statCard span,
html body .formNote,
html body .paymentNotice {
  color: #b45309 !important;
}

html body button,
html body .approve,
html body .buyPlan,
html body .submitButton,
html body .modalActions button {
  background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 30px rgba(234, 88, 12, .18) !important;
}

html body button.reject,
html body .reject,
html body .softDanger {
  background: #fff7ed !important;
  color: #9a3412 !important;
  border: 1px solid #fed7aa !important;
  box-shadow: none !important;
}

html body input,
html body select,
html body textarea {
  border-color: #f0dec7 !important;
  background: #fff !important;
}

html body input:focus,
html body select:focus,
html body textarea:focus {
  outline: 3px solid rgba(245, 158, 11, .18) !important;
  border-color: #f59e0b !important;
}

/* v57 final cascade lock - official corporate panels */
html body,
html body.panelBody,
html body.panelChoiceBody {
  background:
    radial-gradient(circle at 12% 8%, rgba(191, 160, 104, .14), transparent 28%),
    linear-gradient(180deg, #f8fafc 0%, #fff 48%, #f5f7fa 100%) !important;
  color: #101828 !important;
}

html body .sidebar,
html body .panelSidebar {
  background: linear-gradient(180deg, #071526, #0f233e 58%, #243b5a) !important;
}

html body .panelHero,
html body .statCard,
html body .uploadPanel,
html body .livePanel,
html body .approvalPanel,
html body .settingsPanel,
html body .agencyAccountPanel,
html body .paymentPanel,
html body .notificationPanel,
html body .modalCard,
html body .panelChoiceGrid a,
html body .panelChoice,
html body .liveItem,
html body .approvalItem,
html body .agencyAccountItem,
html body .paymentRow,
html body .notificationItem {
  border-color: #e4e8ef !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 18px 56px rgba(16, 24, 40, .08) !important;
}

html body .panelHero {
  border-left-color: #bfa068 !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
}

html body .kicker,
html body .statCard span,
html body .formNote,
html body .paymentNotice {
  color: #9a6b24 !important;
}

html body button,
html body .approve,
html body .buyPlan,
html body .submitButton,
html body .modalActions button {
  background: linear-gradient(135deg, #0f233e, #1e3a5f) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(15, 35, 62, .18) !important;
}

html body button.reject,
html body .reject,
html body .softDanger {
  background: #f8fafc !important;
  color: #0f233e !important;
  border-color: #d8dee8 !important;
}

html body input,
html body select,
html body textarea {
  border-color: #d8dee8 !important;
}

html body input:focus,
html body select:focus,
html body textarea:focus {
  outline: 3px solid rgba(15, 35, 62, .12) !important;
  border-color: #1e3a5f !important;
}

/* v57 - official corporate palette for panels */
html body,
html body.panelBody,
html body.panelChoiceBody {
  background:
    radial-gradient(circle at 12% 8%, rgba(191, 160, 104, .14), transparent 28%),
    linear-gradient(180deg, #f8fafc 0%, #fff 48%, #f5f7fa 100%) !important;
  color: #101828 !important;
}

html body .sidebar,
html body .panelSidebar {
  background: linear-gradient(180deg, #071526, #0f233e 58%, #243b5a) !important;
}

html body .panelHero,
html body .statCard,
html body .uploadPanel,
html body .livePanel,
html body .approvalPanel,
html body .settingsPanel,
html body .agencyAccountPanel,
html body .paymentPanel,
html body .notificationPanel,
html body .modalCard,
html body .panelChoiceGrid a,
html body .panelChoice,
html body .liveItem,
html body .approvalItem,
html body .agencyAccountItem,
html body .paymentRow,
html body .notificationItem {
  border-color: #e4e8ef !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 18px 56px rgba(16, 24, 40, .08) !important;
}

html body .panelHero {
  border-left-color: #bfa068 !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
}

html body .kicker,
html body .statCard span,
html body .formNote,
html body .paymentNotice {
  color: #9a6b24 !important;
}

html body button,
html body .approve,
html body .buyPlan,
html body .submitButton,
html body .modalActions button {
  background: linear-gradient(135deg, #0f233e, #1e3a5f) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(15, 35, 62, .18) !important;
}

html body button.reject,
html body .reject,
html body .softDanger {
  background: #f8fafc !important;
  color: #0f233e !important;
  border-color: #d8dee8 !important;
}

html body input,
html body select,
html body textarea {
  border-color: #d8dee8 !important;
}

html body input:focus,
html body select:focus,
html body textarea:focus {
  outline: 3px solid rgba(15, 35, 62, .12) !important;
  border-color: #1e3a5f !important;
}

/* v56 - amber/white panel theme */
:root {
  --ink: #17130c;
  --muted: #766a5b;
  --line: #f0dec7;
  --panel: #ffffff;
  --soft: #fff8ef;
  --magenta: #e46f16;
  --purple: #b45309;
  --amber: #f59e0b;
  --orange: #ea580c;
}

body,
.panelBody,
.panelChoiceBody {
  color: var(--ink) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(245, 158, 11, .18), transparent 28%),
    linear-gradient(180deg, #fffaf2 0%, #fff 48%, #fff7eb 100%) !important;
}

.sidebar,
.panelSidebar {
  background: linear-gradient(180deg, #351704, #7c2d12 58%, #b45309) !important;
  color: #fff !important;
}

.logoAsset img,
.panelLogo img {
  filter: drop-shadow(0 14px 26px rgba(43, 21, 6, .2)) !important;
}

.panelHero,
.statCard,
.uploadPanel,
.livePanel,
.approvalPanel,
.settingsPanel,
.agencyAccountPanel,
.paymentPanel,
.notificationPanel,
.modalCard,
.panelChoiceGrid a,
.panelChoice {
  border: 1px solid rgba(240, 222, 199, .96) !important;
  background: rgba(255, 255, 255, .95) !important;
  box-shadow: 0 18px 56px rgba(120, 53, 15, .08) !important;
}

.panelHero {
  border-left: 6px solid #f59e0b !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 247, 237, .92)) !important;
}

.kicker,
.panelHero .kicker,
.statCard span,
.paymentNotice,
.formNote {
  color: #b45309 !important;
}

button,
.approve,
.buyPlan,
.submitButton,
.panelCta,
.modalActions button,
.requestForm button {
  background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 30px rgba(234, 88, 12, .18) !important;
}

button.reject,
.reject,
.softDanger {
  background: #fff7ed !important;
  color: #9a3412 !important;
  border: 1px solid #fed7aa !important;
  box-shadow: none !important;
}

input,
select,
textarea {
  border-color: #f0dec7 !important;
  background: #fff !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(245, 158, 11, .18) !important;
  border-color: #f59e0b !important;
}

.status.live {
  background: #ffedd5 !important;
  color: #9a3412 !important;
}

.listingWithPhoto,
.liveItem,
.approvalItem,
.agencyAccountItem,
.paymentRow,
.notificationItem {
  border-color: #f0dec7 !important;
  background: #fff !important;
  box-shadow: 0 12px 36px rgba(120, 53, 15, .07) !important;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.hero {
  min-height: 690px;
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(rgba(92, 38, 90, 0.16), rgba(9, 45, 68, 0.28)), url("uyguna-konakla-hero.png") center / cover;
}

.topNav {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px clamp(18px, 4vw, 52px);
}

.logo {
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  line-height: 1;
  color: #fff;
  font-weight: 1000;
  letter-spacing: 0;
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.navActions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.navActions a,
.outline {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  color: #fff;
  padding: 0 18px;
  font-weight: 850;
  backdrop-filter: blur(12px);
}

.outline {
  background: rgba(255, 255, 255, 0.14);
}

.heroCenter {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 28px auto 0;
  padding: 0 18px;
  text-align: center;
}

.brandKicker {
  margin: 0;
  color: #e5ff2b;
  font-size: clamp(0.95rem, 1.5vw, 1.28rem);
  font-weight: 950;
}

.hero h1 {
  max-width: 790px;
  margin: 18px auto 0;
  color: #fff;
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: 0;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
}

.subline {
  margin: 18px auto 0;
  max-width: 760px;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  font-weight: 850;
}

.searchTabs {
  width: max-content;
  max-width: 100%;
  margin: 28px auto 0;
  display: flex;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  padding: 7px;
  backdrop-filter: blur(14px);
  animation: floatUp 520ms ease both;
}

.searchTabs button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  padding: 0 18px;
  font-weight: 950;
}

.searchTabs .active {
  background: #fff;
  color: var(--magenta);
}

.searchBar {
  max-width: 1420px;
  margin: 12px auto 0;
  min-height: 84px;
  display: grid;
  grid-template-columns: minmax(250px, 1.6fr) minmax(210px, 1fr) minmax(170px, 0.82fr) minmax(190px, 0.9fr) 94px;
  align-items: stretch;
  border: 6px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  animation: searchIn 620ms ease both;
}

.searchBar label {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 0 24px;
  color: var(--ink);
  text-align: left;
  border-right: 1px solid #dce6ed;
}

.searchBar span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.searchBar input,
.searchBar select {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 1.05rem;
  font-weight: 900;
}

.searchBar button {
  border: 0;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  margin: auto 10px;
  background: var(--magenta);
  color: #fff;
  font-size: 2.15rem;
  line-height: 1;
}

.compareCheck {
  width: max-content;
  max-width: 100%;
  margin: 12px auto 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.compareCheck input {
  width: 18px;
  height: 18px;
  accent-color: var(--magenta);
}

.quickTags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.quickTags button {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  padding: 0 22px;
  font-weight: 950;
  backdrop-filter: blur(12px);
}

.latest {
  padding: 26px clamp(18px, 3vw, 50px) 70px;
  background: #fff;
}

.emptyListings {
  grid-column: 1 / -1;
  min-height: 220px;
  border: 1px dashed #d6b9e6;
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(189, 22, 136, 0.08), transparent 28%),
    #fff;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  text-align: center;
  color: var(--muted);
  animation: cardIn 500ms ease both;
}

.emptyListings strong {
  color: var(--ink);
  font-size: 1.2rem;
}

.emptyListings div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.emptyListings a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--magenta);
  color: #fff;
  padding: 0 16px;
  font-weight: 900;
}

.sectionTitle {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  margin-bottom: 24px;
}

.sectionTitle h2 {
  margin: 0;
  color: var(--magenta-dark);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
}

.sectionTitle p,
.kicker {
  color: var(--muted);
  font-weight: 800;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 18px;
}

.dealCard {
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.dealCard:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 58px rgba(9, 45, 68, 0.18);
}

.animatedCard {
  opacity: 0;
  transform: translateY(14px);
  animation: cardIn 520ms ease forwards;
}

.dealImage {
  position: relative;
  height: 178px;
  overflow: hidden;
}

.dealImage img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.score,
.time,
.price {
  position: absolute;
  border-radius: 999px;
  color: #fff;
  font-weight: 950;
}

.score {
  left: 14px;
  top: 14px;
  background: var(--green);
  padding: 5px 9px;
  font-size: 0.78rem;
}

.time {
  right: 14px;
  top: 14px;
  background: #fff;
  color: var(--ink);
  padding: 5px 9px;
  font-size: 0.78rem;
}

.price {
  right: 0;
  bottom: 0;
  border-radius: 10px 0 0 0;
  background: #07314a;
  padding: 9px 12px;
  font-size: 1.25rem;
}

.price small {
  font-size: 0.8rem;
}

.dealBody {
  padding: 14px;
}

.dates {
  margin: 0 0 12px;
  color: var(--ink);
  font-weight: 800;
}

.dealBody h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
}

.meta,
.license {
  margin: 0 0 8px;
  color: var(--muted);
  line-height: 1.4;
  font-size: 0.86rem;
}

.license {
  font-size: 0.92rem;
}

.dealBody a {
  min-height: 42px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid var(--magenta);
  border-radius: 999px;
  color: var(--magenta);
  padding: 0 14px;
  font-size: 0.9rem;
  font-weight: 950;
}

.dealBody a span {
  font-size: 0.95rem;
}

.agencyFlow,
.requestBox {
  max-width: 1180px;
  margin: 0 auto 70px;
  padding: 38px;
  border-radius: 28px;
  background: var(--soft);
}

.agencyFlow h2,
.requestBox h2,
.panelHeader h1 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.12;
}

.agencyFlow p {
  color: var(--muted);
  line-height: 1.7;
  font-size: 1.03rem;
}

.flowSteps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0;
}

.flowSteps article {
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 18px;
}

.flowSteps span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--magenta);
  color: #fff;
  font-weight: 950;
}

.flowSteps strong {
  display: block;
  margin-top: 16px;
}

.panelCta,
.requestForm button,
.uploadPanel button,
.listingAction {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--magenta);
  color: #fff;
  padding: 0 22px;
  font-weight: 950;
}

.requestBox {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.7fr);
  gap: 24px;
  align-items: center;
}

.requestForm {
  display: grid;
  gap: 12px;
}

.requestForm input,
.requestForm select,
.uploadPanel input,
.uploadPanel select,
.uploadPanel textarea,
.agencyAccountForm input,
.agencyAccountForm select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 0 14px;
}

.uploadPanel input[readonly] {
  background: #f8f3fb;
  color: var(--muted);
}

textarea {
  min-height: 88px;
  padding-top: 12px;
  resize: vertical;
}

.panelBody {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
  background:
    radial-gradient(circle at 82% -6%, rgba(189, 22, 136, 0.12), transparent 24%),
    linear-gradient(135deg, #fbf9fd, #f2edf8);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 24%),
    #26063d;
  color: #fff;
}

.panelLogo {
  display: block;
  font-size: 1.42rem;
  font-weight: 1000;
}

.sidebar nav {
  display: grid;
  gap: 10px;
  margin-top: 34px;
}

.sidebar nav a {
  min-height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.92rem;
  font-weight: 800;
  transition: background 160ms ease, transform 160ms ease;
}

.sidebar nav a:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateX(2px);
}

.agencyStatus {
  margin-top: 30px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
}

.agencyStatus span {
  display: block;
  color: rgba(255, 255, 255, 0.7);
}

.panelMain {
  padding: 22px clamp(18px, 2vw, 30px) 34px;
}

.panelHeader {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: start;
  margin-bottom: 18px;
}

.panelSubtext {
  max-width: 680px;
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.9rem;
}

.small {
  min-width: 120px;
}

.panelStats,
.panelGrid,
.liveList {
  display: grid;
  gap: 16px;
}

.panelStats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

.panelTools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.panelTools article {
  min-height: 96px;
  border: 1px solid rgba(231, 215, 236, 0.94);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(251, 243, 255, 0.9));
  box-shadow: 0 14px 30px rgba(9, 45, 68, 0.06);
  padding: 14px;
  animation: cardIn 460ms ease both;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.panelTools article:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(9, 45, 68, 0.1);
}

.panelTools span {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--magenta);
  font-size: 0.78rem;
  font-weight: 1000;
}

.panelTools strong {
  display: block;
  font-size: 1rem;
}

.panelTools p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.42;
}

.panelStats article,
.uploadPanel,
.approvalPanel,
.livePanel,
.accountPanel,
.approvalItem,
.liveItem {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(9, 45, 68, 0.06);
  animation: cardIn 420ms ease both;
}

.panelStats article {
  min-height: 84px;
  padding: 13px 14px;
}

.panelStats span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.panelStats strong {
  display: block;
  margin-top: 8px;
  font-size: 1.18rem;
}

.panelGrid {
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1fr);
  align-items: start;
}

.panelGrid.singleApproval {
  grid-template-columns: minmax(560px, 0.9fr) minmax(420px, 1fr);
}

.panelGrid.adminGrid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.uploadPanel,
.approvalPanel,
.livePanel,
.accountPanel {
  padding: 18px;
}

.uploadPanel {
  display: grid;
  gap: 10px;
}

.formGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 12px;
}

.uploadPanel label,
.agencyAccountForm label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 850;
}

.uploadPanel h2,
.panelSectionHead h2 {
  font-size: 1.12rem;
}

.formNote {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.photoPreview {
  min-height: 140px;
  border: 1px dashed #c9aadd;
  border-radius: 18px;
  background: #fbf3ff;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--muted);
  font-weight: 850;
}

.uploadPanel button:hover,
.panelCta:hover,
.emptyListings a:hover,
.dealBody a:hover,
.modalActions a:hover,
.loginCard button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.uploadPanel button,
.panelCta,
.emptyListings a,
.dealBody a,
.modalActions a,
.loginCard button {
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.photoPreview img {
  width: 100%;
  height: 170px;
  display: block;
  object-fit: cover;
}

.panelSectionHead h2,
.uploadPanel h2 {
  margin: 0 0 14px;
}

.accountPanel {
  margin-bottom: 16px;
}

.agencyAccountForm {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(150px, 0.8fr) minmax(140px, 0.7fr) minmax(120px, 0.55fr) 150px;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
}

.agencyAccountForm button,
.agencyAccountItem button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: var(--magenta);
  color: #fff;
  padding: 0 15px;
  font-weight: 900;
}

.agencyAccountItem button.reject {
  background: #d72b58;
}

.agencyAccountList {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.agencyAccountItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.agencyAccountItem strong {
  display: block;
  font-size: 0.96rem;
}

.agencyAccountItem span {
  color: var(--muted);
  font-size: 0.84rem;
}

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

.approvalItem,
.liveItem {
  padding: 12px;
  display: grid;
  gap: 8px;
}

.approvalItem:hover,
.liveItem:hover,
.panelStats article:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(9, 45, 68, 0.1);
}

.approvalItem,
.liveItem,
.panelStats article {
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.listingWithPhoto {
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
}

.listingWithPhoto img {
  width: 108px;
  height: 78px;
  border-radius: 12px;
  object-fit: cover;
}

.modalBackdrop,
.loginGate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(18, 5, 31, 0.56);
  backdrop-filter: blur(12px);
}

.modalBackdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.modalBackdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.modalCard,
.loginCard {
  width: min(520px, 100%);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(9, 45, 68, 0.24);
  padding: 28px;
  animation: modalIn 260ms ease both;
}

.modalIcon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 950;
}

.modalCard h2,
.loginCard h1 {
  margin: 16px 0 8px;
  font-size: 1.45rem;
}

.modalCard p,
.loginError {
  color: var(--muted);
  line-height: 1.55;
}

.modalActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.modalActions a,
.modalActions button,
.loginCard button {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--magenta);
  color: #fff;
  padding: 0 16px;
  font-weight: 900;
}

.modalActions button {
  background: #eef3f7;
  color: var(--ink);
}

.loginGate.hidden {
  display: none;
}

.loginCard {
  display: grid;
  gap: 12px;
}

.loginLogo {
  color: var(--magenta);
}

.loginCard input {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 14px;
}

.loginError {
  min-height: 22px;
  margin: 0;
  color: #d72b58;
  font-weight: 800;
}

.approvalItem .row,
.liveItem .row {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.approvalItem .row strong,
.liveItem .row strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.approvalItem span,
.liveItem span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.38;
}

.status {
  width: max-content;
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  background: #fff0c8;
  color: #805d00;
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.status.live {
  background: #dff9e8;
  color: #007a34;
}

.approvalButtons {
  display: flex;
  gap: 8px;
}

.approvalButtons button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  color: #fff;
  font-weight: 850;
}

.approve { background: var(--green); }
.reject { background: #d72b58; }

.roleSelect {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 18px;
  padding: 28px;
  background: linear-gradient(135deg, #fbf3ff, #fff);
  text-align: center;
}

.logo.dark {
  color: var(--magenta);
  text-shadow: none;
}

.roleSelect h1 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 3rem);
}

.roleSelect p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--muted);
  line-height: 1.55;
}

.roleCards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.roleCards a {
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 24px;
  display: grid;
  align-content: center;
  gap: 10px;
  text-align: left;
}

.roleCards strong {
  font-size: 1.35rem;
}

.roleCards span {
  color: var(--muted);
  line-height: 1.45;
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes floatUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Final product polish */
.hero {
  min-height: 620px;
  background:
    linear-gradient(180deg, rgba(98, 8, 78, 0.18), rgba(11, 42, 55, 0.5)),
    url("uyguna-konakla-hero.png") center / cover;
}

.topNav {
  max-width: 1500px;
  margin: 0 auto;
}

.heroCenter {
  max-width: 1320px;
  margin-top: 18px;
}

.hero h1 {
  max-width: 760px;
  font-size: clamp(2rem, 3.45vw, 3.35rem);
  line-height: 1.06;
}

.subline {
  max-width: 700px;
  font-size: clamp(0.98rem, 1.16vw, 1.14rem);
}

.searchTabs {
  margin-top: 22px;
}

.searchBar {
  max-width: 1360px;
  min-height: 78px;
  border-width: 5px;
  grid-template-columns: minmax(260px, 1.45fr) minmax(220px, 1fr) minmax(170px, 0.75fr) minmax(190px, 0.85fr) 88px;
}

.searchBar label {
  padding: 0 22px;
}

.searchBar input,
.searchBar select {
  font-size: 1rem;
}

.searchBar button {
  width: 60px;
  height: 60px;
}

.homeSummary {
  width: min(1180px, calc(100% - 36px));
  margin: -46px auto 24px;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.homeSummary article {
  border: 1px solid rgba(231, 215, 236, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 48px rgba(9, 45, 68, 0.12);
  padding: 16px 18px;
}

.homeSummary strong {
  display: block;
  color: var(--ink);
  font-size: 0.98rem;
}

.homeSummary span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.latest {
  padding-top: 18px;
  background:
    linear-gradient(180deg, #fff, #fbf8fc 62%, #fff);
}

.sectionTitle {
  max-width: 1450px;
  margin-left: auto;
  margin-right: auto;
}

.cards {
  max-width: 1450px;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.dealCard {
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(9, 45, 68, 0.1);
}

.dealImage {
  height: 154px;
}

.dealBody {
  padding: 12px;
}

.dealBody h3 {
  min-height: 42px;
  font-size: 0.98rem;
  line-height: 1.25;
}

.agencyFlow,
.requestBox {
  border-radius: 20px;
  box-shadow: 0 16px 44px rgba(9, 45, 68, 0.07);
}

.panelBody {
  grid-template-columns: 232px minmax(0, 1fr);
  background:
    radial-gradient(circle at 86% -10%, rgba(189, 22, 136, 0.12), transparent 24%),
    linear-gradient(135deg, #fbfaff, #f4eef8 46%, #f8fbff);
}

.sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(189, 22, 136, 0.2), transparent 26%),
    #1e0733;
}

.panelMain {
  max-width: 1580px;
  width: 100%;
}

.panelHeader {
  min-height: 74px;
  align-items: center;
  border: 1px solid rgba(231, 215, 236, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 16px 38px rgba(9, 45, 68, 0.06);
  padding: 18px;
}

.panelHeader h1 {
  max-width: 920px;
  font-size: clamp(1.35rem, 1.65vw, 1.85rem);
}

.panelStats {
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.panelStats article,
.panelTools article,
.uploadPanel,
.approvalPanel,
.livePanel,
.accountPanel {
  border-radius: 16px;
  border-color: rgba(231, 215, 236, 0.88);
  box-shadow: 0 14px 32px rgba(9, 45, 68, 0.07);
}

.panelStats article {
  min-height: 78px;
  background: linear-gradient(135deg, #fff, #fbf7ff);
}

.panelTools article {
  min-height: 88px;
}

.panelGrid.singleApproval {
  grid-template-columns: minmax(540px, 0.78fr) minmax(480px, 1fr);
}

.panelGrid.adminGrid {
  grid-template-columns: minmax(460px, 0.9fr) minmax(520px, 1fr);
}

.uploadPanel,
.approvalPanel,
.livePanel,
.accountPanel {
  background: rgba(255, 255, 255, 0.92);
}

.approvalItem,
.liveItem,
.agencyAccountItem {
  border-radius: 14px;
  background: linear-gradient(135deg, #fff, #fcf9ff);
}

.listingWithPhoto {
  grid-template-columns: 112px minmax(0, 1fr);
}

.listingWithPhoto img {
  width: 112px;
  height: 82px;
}

.approvalButtons {
  flex-wrap: wrap;
  margin-top: 10px;
}

.approvalButtons button,
.agencyAccountItem button,
.agencyAccountForm button {
  min-height: 36px;
  font-size: 0.82rem;
}

.softDanger {
  background: #f09a20 !important;
}

/* Search engine + operating panels */
body {
  background: #ffffff;
}

.hero {
  min-height: 575px;
  background:
    linear-gradient(180deg, rgba(190, 15, 137, 0.94), rgba(190, 15, 137, 0.94)),
    url("uyguna-konakla-hero.png") center bottom / cover;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  bottom: -28px;
  width: 34vw;
  max-width: 560px;
  height: 250px;
  background: url("uyguna-konakla-hero.png") center / cover;
  filter: saturate(1.12);
  opacity: 0.96;
  pointer-events: none;
}

.hero::before {
  left: -5vw;
  background-position: left bottom;
}

.hero::after {
  right: -5vw;
  background-position: right bottom;
}

.topNav {
  min-height: 78px;
  justify-content: center;
}

.logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(2.35rem, 4.4vw, 4.3rem);
  font-weight: 1000;
}

.navActions {
  margin-left: auto;
}

.navActions a {
  min-height: 38px;
  padding: 0 15px;
  font-size: 0.9rem;
}

.heroCenter {
  margin-top: 12px;
}

.brandKicker {
  color: #dfff00;
  font-size: clamp(1rem, 1.4vw, 1.28rem);
}

.hero h1 {
  max-width: 780px;
  margin-top: 12px;
  font-size: clamp(2.05rem, 3.25vw, 3.2rem);
}

.subline {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.searchTabs {
  margin-top: 24px;
  background: rgba(255, 255, 255, 0.2);
}

.searchBar {
  max-width: 1260px;
  min-height: 76px;
  margin-top: 12px;
  border: 0;
  grid-template-columns: minmax(240px, 1.55fr) minmax(210px, 1.05fr) minmax(160px, 0.78fr) minmax(180px, 0.86fr) 92px;
  box-shadow: 0 28px 80px rgba(82, 5, 65, 0.32);
}

.searchBar label {
  padding: 0 24px;
}

.searchBar span {
  font-size: 0.76rem;
}

.searchBar input,
.searchBar select {
  font-size: 1.06rem;
}

.searchBar button {
  width: 62px;
  height: 62px;
  background: #c01791;
  box-shadow: 0 8px 22px rgba(192, 23, 145, 0.38);
}

.providerStrip {
  max-width: 980px;
  margin: 13px auto 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.providerStrip span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  padding: 0 12px;
  font-size: 0.78rem;
  font-weight: 900;
  backdrop-filter: blur(12px);
}

.quickTags {
  margin-top: 18px;
}

.homeSummary {
  margin-top: -34px;
}

.homeSummary article {
  border-radius: 12px;
}

.latest {
  padding-bottom: 54px;
}

.cards {
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
}

.dealCard {
  border: 1px solid #f0d9eb;
}

.dealImage {
  height: 146px;
}

.price {
  border-radius: 12px 0 0 0;
  font-size: 1.08rem;
}

.score,
.time {
  font-size: 0.72rem;
}

.dealBody h3 {
  margin-bottom: 6px;
}

.dealBody a {
  min-height: 38px;
  font-size: 0.84rem;
}

.panelBody {
  grid-template-columns: 238px minmax(0, 1fr);
  background: #f6f2f8;
}

.sidebar {
  padding: 22px 16px;
  background: #170326;
}

.panelLogo {
  padding: 0 8px;
}

.sidebar nav {
  gap: 8px;
  margin-top: 28px;
}

.sidebar nav a {
  min-height: 42px;
  border-radius: 9px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
}

.sidebar nav a:hover {
  background: rgba(255, 255, 255, 0.1);
}

.agencyStatus {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}

.panelMain {
  padding: 18px 22px 34px;
}

.panelHeader {
  min-height: 92px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(252, 246, 255, 0.96));
  padding: 18px 20px;
}

.panelHeader h1 {
  font-size: clamp(1.28rem, 1.55vw, 1.72rem);
}

.panelStats {
  gap: 10px;
}

.panelStats article {
  min-height: 74px;
  border-radius: 12px;
  padding: 12px 14px;
}

.panelStats strong {
  font-size: 1.1rem;
}

.panelTools {
  gap: 10px;
}

.panelTools article {
  min-height: 82px;
  border-radius: 12px;
  padding: 13px;
}

.panelTools p {
  font-size: 0.82rem;
}

.accountPanel,
.uploadPanel,
.approvalPanel,
.livePanel {
  border-radius: 14px;
  padding: 16px;
}

.panelGrid.singleApproval {
  grid-template-columns: minmax(520px, 0.82fr) minmax(480px, 1fr);
}

.panelGrid.adminGrid {
  grid-template-columns: minmax(500px, 1fr) minmax(500px, 1fr);
}

.agencyAccountForm {
  grid-template-columns: minmax(210px, 1.2fr) minmax(140px, 0.78fr) minmax(130px, 0.68fr) minmax(110px, 0.55fr) 140px;
}

.formGrid {
  gap: 10px;
}

.photoPreview {
  min-height: 118px;
  border-radius: 12px;
}

.photoPreview img {
  height: 132px;
}

.compactPreview {
  min-height: 96px;
}

.compactPreview img {
  height: 120px;
}

.approvalList,
.liveList,
.agencyAccountList {
  gap: 10px;
}

.approvalItem,
.liveItem,
.agencyAccountItem {
  border: 1px solid #ead9f0;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(9, 45, 68, 0.055);
}

.listingWithPhoto {
  grid-template-columns: 120px minmax(0, 1fr);
}

.listingWithPhoto img {
  width: 120px;
  height: 90px;
}

.adminListingCard p,
.listingWithPhoto p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.42;
}

.approvalButtons {
  gap: 7px;
}

.approvalButtons button,
.agencyAccountItem button,
.agencyAccountForm button {
  border-radius: 9px;
}

.status {
  border-radius: 999px;
}

.listingEditCard {
  width: min(760px, 100%);
}

.listingEditCard > label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 850;
}

.listingEditCard input,
.listingEditCard select,
.listingEditCard textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 14px;
}

.listingEditCard textarea {
  min-height: 92px;
  padding-top: 12px;
}

/* Emergency rebuild: clean hero, real search controls, no exposed passwords */
.hero {
  min-height: 560px !important;
  background:
    linear-gradient(180deg, rgba(188, 17, 139, 0.9), rgba(188, 17, 139, 0.88)),
    url("uyguna-konakla-hero.png") center bottom / cover no-repeat !important;
}

.hero::before,
.hero::after {
  display: none !important;
}

.heroCenter {
  max-width: 1380px;
  margin-top: 6px;
}

.hero h1 {
  max-width: 720px;
  font-size: clamp(1.9rem, 3vw, 3rem) !important;
  line-height: 1.08;
}

.brandKicker,
.subline {
  text-shadow: 0 8px 24px rgba(75, 0, 62, 0.22);
}

.searchBar {
  max-width: 1380px !important;
  min-height: 78px !important;
  grid-template-columns:
    minmax(220px, 1.35fr)
    minmax(150px, 0.78fr)
    minmax(150px, 0.78fr)
    minmax(230px, 1fr)
    minmax(165px, 0.75fr)
    88px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 26px 70px rgba(82, 5, 65, 0.28) !important;
}

.searchBar label {
  min-width: 0;
  padding: 0 20px !important;
  border-right: 1px solid #dfe6ec;
}

.searchBar input[type="date"] {
  color-scheme: light;
  cursor: pointer;
}

.guestSelects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.guestSelects select {
  min-width: 0;
}

.searchBar button {
  width: 60px !important;
  height: 60px !important;
  margin: auto 10px !important;
}

.providerStrip {
  margin-top: 10px;
}

.quickTags {
  margin-top: 14px;
}

.roleSelect h1 {
  font-size: clamp(1.9rem, 3vw, 3.1rem) !important;
}

.roleCards span {
  font-size: 0.95rem;
}

.panelBody {
  background:
    linear-gradient(135deg, #f8f7fb, #f2edf6) !important;
}

.panelHeader,
.accountPanel,
.uploadPanel,
.approvalPanel,
.livePanel,
.panelStats article,
.panelTools article {
  box-shadow: 0 10px 26px rgba(9, 45, 68, 0.055) !important;
}

.panelHeader {
  border-radius: 12px !important;
}

.panelStats article,
.panelTools article {
  border-radius: 10px !important;
}

@media (max-width: 1120px) {
  .searchBar {
    grid-template-columns: 1fr 1fr !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .searchBar button {
    width: calc(100% - 20px) !important;
    border-radius: 14px !important;
    grid-column: 1 / -1;
  }
}

/* v18: obvious scroll animation layer */
.scrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: calc(var(--page-scroll, 0) * 100%);
  height: 5px;
  background: linear-gradient(90deg, #c0178e, #7224d8, #ff79d6);
  box-shadow: 0 8px 22px rgba(169, 28, 151, 0.32);
  transform-origin: left center;
  pointer-events: none;
}

.hero {
  background-position: center calc(50% + var(--hero-shift, 0px)) !important;
}

.heroCenter {
  transform: translateY(calc(var(--hero-shift, 0px) * -0.22)) scale(var(--hero-fade, 1)) !important;
  transition: transform 80ms linear !important;
  will-change: transform !important;
}

.searchBar {
  transform: translateY(calc(var(--hero-shift, 0px) * -0.08)) !important;
  transition: transform 80ms linear, box-shadow 220ms ease !important;
}

.scrollMotion {
  perspective: 900px !important;
  backface-visibility: hidden !important;
}

.scrollMotion.is-visible {
  animation: visiblePulse 900ms cubic-bezier(.16, 1, .3, 1) both !important;
}

.segmentGrid article.scrollMotion.is-visible,
.flowSteps article.scrollMotion.is-visible,
.boardMetrics div.scrollMotion.is-visible,
.dealCard.scrollMotion.is-visible {
  animation: cardScrollPop 760ms cubic-bezier(.16, 1, .3, 1) both !important;
}

@keyframes visiblePulse {
  0% {
    opacity: 0;
    transform: translateY(70px) scale(0.94);
    filter: blur(12px);
  }
  70% {
    opacity: 1;
    transform: translateY(-8px) scale(1.012);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes cardScrollPop {
  0% {
    opacity: 0;
    transform: translateY(58px) rotateX(10deg) scale(0.93);
    filter: blur(10px);
  }
  72% {
    opacity: 1;
    transform: translateY(-6px) rotateX(0) scale(1.018);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0) scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scrollProgress {
    display: none !important;
  }

  .heroCenter,
  .searchBar {
    transform: none !important;
  }
}

/* v22: actual scroll-linked parallax movement */
.realScrollMotion {
  will-change: transform, opacity !important;
  transition:
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease !important;
}

.realScrollMotion.motionActive {
  border-color: rgba(192, 24, 143, 0.28) !important;
  box-shadow:
    0 28px 72px rgba(48, 23, 65, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

.premiumReveal.reveal.realScrollMotion,
.premiumReveal.reveal.realScrollMotion.in-view,
.premiumReveal.reveal.realScrollMotion.is-visible {
  filter: none !important;
  animation-name: none !important;
}

.operationsBoard.realScrollMotion,
.segmentShowcase.realScrollMotion,
.agencyFlow.realScrollMotion,
.requestBox.realScrollMotion {
  transition:
    box-shadow 240ms ease,
    border-color 240ms ease !important;
}

.boardPanel.realScrollMotion,
.boardMetrics div.realScrollMotion,
.segmentGrid article.realScrollMotion,
.flowSteps article.realScrollMotion,
.dealCard.realScrollMotion {
  transition:
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease !important;
}

.motionActive::before {
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .realScrollMotion {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* v23: OtelContract-style dark SaaS motion and layout override */
body {
  background: #f5f7fb !important;
}

.scrollProgress {
  height: 4px !important;
  background: linear-gradient(90deg, #ffffff, #9b5cff, #d21c98) !important;
  opacity: 0.95 !important;
}

.hero {
  min-height: 660px !important;
  background:
    linear-gradient(90deg, rgba(10, 18, 31, 0.94), rgba(18, 24, 39, 0.72) 46%, rgba(34, 11, 39, 0.58)),
    url("uyguna-konakla-hero.png") center / cover no-repeat !important;
  animation: ocHeroDrift 22s ease-in-out infinite alternate !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.06) 1px, transparent 1px) !important;
  background-size: 72px 72px !important;
  opacity: 0.18 !important;
  pointer-events: none !important;
}

.topNav {
  align-items: center !important;
}

.heroCenter {
  max-width: 1180px !important;
  text-align: left !important;
  margin-left: max(28px, calc((100vw - 1180px) / 2)) !important;
  margin-right: auto !important;
  padding-top: 42px !important;
  transform: translateY(calc(var(--hero-shift, 0px) * -0.08)) !important;
}

.brandKicker {
  width: fit-content !important;
  margin: 0 0 16px !important;
  color: #d8c7ff !important;
  font-size: 0.98rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.hero h1 {
  max-width: 900px !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(3.2rem, 6.8vw, 6.6rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.045em !important;
  text-align: left !important;
}

.subline {
  max-width: 760px !important;
  margin: 22px 0 0 !important;
  color: rgba(255,255,255,0.78) !important;
  font-size: clamp(1.05rem, 1.5vw, 1.32rem) !important;
  text-align: left !important;
}

.searchTabs {
  margin: 34px 0 18px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

.searchBar {
  margin-left: 0 !important;
  margin-right: 0 !important;
  animation: none !important;
  box-shadow: 0 28px 90px rgba(0,0,0,0.32) !important;
}

main {
  gap: 72px !important;
  padding-top: 74px !important;
}

.latest,
.operationsBoard,
.segmentShowcase,
.agencyFlow,
.requestBox {
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: min(1180px, calc(100% - 48px)) !important;
}

.operationsBoard {
  color: #fff !important;
  background:
    linear-gradient(135deg, #111827, #251134 52%, #4a1454) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 34px 96px rgba(17, 24, 39, 0.24) !important;
}

.operationsBoard::after,
.segmentShowcase::after,
.agencyFlow::after,
.requestBox::after,
.boardPanel::after,
.segmentGrid article::after,
.flowSteps article::after,
.dealCard::after {
  display: none !important;
}

.boardPanel {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

.boardMetrics div {
  background: rgba(255,255,255,0.92) !important;
}

.segmentShowcase,
.agencyFlow,
.requestBox {
  background: rgba(255,255,255,0.94) !important;
  border: 1px solid rgba(218, 224, 235, 0.95) !important;
  box-shadow: 0 28px 82px rgba(20, 25, 40, 0.08) !important;
}

.segmentGrid article,
.flowSteps article,
.dealCard,
.emptyListings {
  background: #fff !important;
  border: 1px solid rgba(218, 224, 235, 0.98) !important;
  box-shadow: 0 18px 48px rgba(20, 25, 40, 0.075) !important;
}

.premiumReveal.reveal,
.premiumReveal.reveal.in-view,
.premiumReveal.reveal.is-visible {
  animation: none !important;
  filter: none !important;
}

.ocMotion {
  will-change: transform, opacity !important;
  transition:
    box-shadow 260ms ease,
    border-color 260ms ease,
    background 260ms ease !important;
}

.ocMotion.motionActive {
  border-color: rgba(98, 56, 189, 0.32) !important;
  box-shadow: 0 34px 92px rgba(20, 25, 40, 0.14) !important;
}

.segmentGrid article:hover,
.flowSteps article:hover,
.dealCard:hover,
.boardMetrics div:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 30px 76px rgba(20, 25, 40, 0.15) !important;
}

.boardTimeline span {
  animation: ocStatusPulse 3.8s ease-in-out infinite !important;
}

.boardTimeline span:nth-child(2) {
  animation-delay: 450ms !important;
}

.boardTimeline span:nth-child(3) {
  animation-delay: 900ms !important;
}

.boardMetrics div {
  animation: ocMetricFloat 5.4s ease-in-out infinite !important;
}

.boardMetrics div:nth-child(2) {
  animation-delay: 800ms !important;
}

.boardMetrics div:nth-child(3) {
  animation-delay: 1400ms !important;
}

@keyframes ocHeroDrift {
  from {
    background-position: center center;
  }
  to {
    background-position: center 44%;
  }
}

@keyframes ocMetricFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes ocStatusPulse {
  0%, 100% {
    background-color: rgba(255,255,255,0.1);
  }
  50% {
    background-color: rgba(255,255,255,0.24);
  }
}

@media (max-width: 760px) {
  .heroCenter {
    width: calc(100% - 28px) !important;
    margin-left: 14px !important;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 13vw, 4rem) !important;
  }
}

/* v19: fix !important collision so JS scroll motion is actually visible */
.scrollProgress {
  height: 8px !important;
  background: linear-gradient(90deg, #ff5bd7, #8b2cff, #18d5ff) !important;
}

.scrollMotion {
  transition:
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease !important;
}

.scrollMotion.scroll-live {
  border-color: rgba(192, 24, 143, 0.36) !important;
  box-shadow:
    0 30px 82px rgba(88, 27, 120, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.operationsBoard.scroll-live {
  box-shadow:
    0 34px 100px rgba(76, 20, 96, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* v20: OtelContract-like premium motion, no chaotic pop effects */
.scrollProgress {
  height: 3px !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(192, 24, 143, 0.88), rgba(114, 36, 216, 0.92)) !important;
  box-shadow: none !important;
}

.hero {
  background-position: center calc(50% + var(--hero-shift, 0px)) !important;
}

.heroCenter {
  transform: translateY(calc(var(--hero-shift, 0px) * -0.12)) scale(var(--hero-fade, 1)) !important;
  transition: transform 180ms linear !important;
}

.searchBar {
  transform: translateY(calc(var(--hero-shift, 0px) * -0.035)) !important;
  transition: transform 180ms linear, box-shadow 240ms ease !important;
}

.scrollMotion,
.scrollMotion.is-visible,
.scrollMotion.scroll-live,
.premiumReveal {
  animation: none !important;
}

.premiumReveal.reveal {
  opacity: 0 !important;
  transform: translate3d(0, 34px, 0) !important;
  filter: none !important;
  transition:
    opacity 820ms cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
    transform 820ms cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
    box-shadow 240ms ease,
    border-color 240ms ease !important;
  will-change: opacity, transform !important;
}

.premiumReveal.reveal.in-view,
.premiumReveal.reveal.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  filter: none !important;
}

.operationsBoard.premiumReveal.reveal,
.segmentShowcase.premiumReveal.reveal,
.agencyFlow.premiumReveal.reveal,
.requestBox.premiumReveal.reveal {
  transform: translate3d(0, 46px, 0) !important;
}

.operationsBoard.premiumReveal.reveal.in-view,
.segmentShowcase.premiumReveal.reveal.in-view,
.agencyFlow.premiumReveal.reveal.in-view,
.requestBox.premiumReveal.reveal.in-view {
  transform: translate3d(0, 0, 0) !important;
}

.boardPanel.premiumReveal.reveal,
.boardMetrics div.premiumReveal.reveal,
.segmentGrid article.premiumReveal.reveal,
.flowSteps article.premiumReveal.reveal,
.dealCard.premiumReveal.reveal {
  transform: translate3d(0, 26px, 0) scale(0.985) !important;
}

.boardPanel.premiumReveal.reveal.in-view,
.boardMetrics div.premiumReveal.reveal.in-view,
.segmentGrid article.premiumReveal.reveal.in-view,
.flowSteps article.premiumReveal.reveal.in-view,
.dealCard.premiumReveal.reveal.in-view {
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.dealCard:hover,
.segmentGrid article:hover,
.flowSteps article:hover,
.boardMetrics div:hover,
.boardPanel:hover {
  transform: translate3d(0, -6px, 0) !important;
  border-color: rgba(192, 24, 143, 0.22) !important;
  box-shadow:
    0 26px 62px rgba(48, 23, 65, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

.operationsBoard:hover,
.segmentShowcase:hover,
.agencyFlow:hover,
.requestBox:hover {
  border-color: rgba(192, 24, 143, 0.16) !important;
  box-shadow:
    0 30px 82px rgba(48, 23, 65, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

@supports (animation-timeline: view()) {
  .latest,
  .operationsBoard,
  .segmentShowcase,
  .agencyFlow,
  .requestBox,
  .dealCard,
  .boardPanel,
  .boardMetrics div,
  .segmentGrid article,
  .flowSteps article {
    animation-name: none !important;
    animation-timeline: auto !important;
  }
}

/* v21: visible OtelContract-style motion system */
.hero {
  background-size: 112% !important;
  animation: heroCinema 18s ease-in-out infinite alternate !important;
}

.searchBar {
  animation: searchBreath 4.5s ease-in-out infinite !important;
}

.operationsBoard,
.segmentShowcase,
.agencyFlow,
.requestBox,
.boardPanel,
.segmentGrid article,
.flowSteps article,
.dealCard {
  position: relative !important;
  overflow: hidden !important;
}

.operationsBoard::after,
.segmentShowcase::after,
.agencyFlow::after,
.requestBox::after,
.boardPanel::after,
.segmentGrid article::after,
.flowSteps article::after,
.dealCard::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.28) 48%,
    transparent 58%,
    transparent 100%
  ) !important;
  transform: translateX(-120%) !important;
  animation: premiumSheen 6.8s ease-in-out infinite !important;
}

.segmentGrid article:nth-child(2)::after,
.flowSteps article:nth-child(2)::after,
.boardMetrics div:nth-child(2)::after {
  animation-delay: 650ms !important;
}

.segmentGrid article:nth-child(3)::after,
.flowSteps article:nth-child(3)::after,
.boardMetrics div:nth-child(3)::after {
  animation-delay: 1200ms !important;
}

.premiumReveal.reveal.in-view,
.premiumReveal.reveal.is-visible {
  animation: premiumEnter 900ms cubic-bezier(.16, 1, .3, 1) both !important;
}

.boardPanel.premiumReveal.reveal.in-view,
.boardMetrics div.premiumReveal.reveal.in-view,
.segmentGrid article.premiumReveal.reveal.in-view,
.flowSteps article.premiumReveal.reveal.in-view,
.dealCard.premiumReveal.reveal.in-view {
  animation:
    premiumCardEnter 820ms cubic-bezier(.16, 1, .3, 1) both,
    premiumFloat 5.8s ease-in-out 900ms infinite !important;
}

.segmentGrid article:nth-child(2),
.flowSteps article:nth-child(2),
.boardMetrics div:nth-child(2) {
  animation-delay: 120ms, 1.2s !important;
}

.segmentGrid article:nth-child(3),
.flowSteps article:nth-child(3),
.boardMetrics div:nth-child(3) {
  animation-delay: 220ms, 1.7s !important;
}

.segmentGrid article:nth-child(4),
.flowSteps article:nth-child(4) {
  animation-delay: 320ms, 2.1s !important;
}

.panelStats article,
.uploadPanel,
.approvalPanel,
.livePanel,
.accountPanel {
  animation: panelSoftRise 720ms cubic-bezier(.16, 1, .3, 1) both !important;
}

.panelStats article:nth-child(2) { animation-delay: 90ms !important; }
.panelStats article:nth-child(3) { animation-delay: 180ms !important; }
.panelStats article:nth-child(4) { animation-delay: 270ms !important; }

@keyframes heroCinema {
  0% {
    background-position: center calc(50% + var(--hero-shift, 0px));
  }
  100% {
    background-position: center calc(46% + var(--hero-shift, 0px));
  }
}

@keyframes searchBreath {
  0%, 100% {
    box-shadow: 0 30px 80px rgba(39, 14, 59, 0.22) !important;
  }
  50% {
    box-shadow: 0 38px 96px rgba(142, 28, 153, 0.34) !important;
  }
}

@keyframes premiumSheen {
  0% {
    transform: translateX(-125%);
    opacity: 0;
  }
  18% {
    opacity: 0.8;
  }
  42% {
    transform: translateX(125%);
    opacity: 0;
  }
  100% {
    transform: translateX(125%);
    opacity: 0;
  }
}

@keyframes premiumEnter {
  0% {
    opacity: 0;
    transform: translate3d(0, 48px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes premiumCardEnter {
  0% {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(0.975);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes premiumFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -7px, 0);
  }
}

@keyframes panelSoftRise {
  0% {
    opacity: 0;
    transform: translateY(22px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero,
  .searchBar,
  .premiumReveal.reveal.in-view,
  .premiumReveal.reveal.is-visible,
  .boardPanel.premiumReveal.reveal.in-view,
  .boardMetrics div.premiumReveal.reveal.in-view,
  .segmentGrid article.premiumReveal.reveal.in-view,
  .flowSteps article.premiumReveal.reveal.in-view,
  .dealCard.premiumReveal.reveal.in-view,
  .panelStats article,
  .uploadPanel,
  .approvalPanel,
  .livePanel,
  .accountPanel {
    animation: none !important;
  }
}

/* Uyguna Konakla final direction */
:root {
  --magenta: #c4148c;
  --magenta-dark: #9b0f72;
  --blue: #075eb8;
  --ink: #08314c;
  --muted: #5f768b;
  --line: #d9e2ea;
  --soft: #f4f9fd;
}

.hero {
  min-height: 650px !important;
  background:
    linear-gradient(180deg, rgba(8, 49, 76, 0.18), rgba(8, 49, 76, 0.42)),
    url("uyguna-konakla-hero.png") center bottom / cover no-repeat !important;
}

.topNav {
  max-width: 1500px;
  min-height: 76px;
  padding-top: 18px;
}

.logo {
  font-size: clamp(2rem, 3.8vw, 3.55rem) !important;
  color: #fff !important;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}

.navActions {
  margin-left: auto;
}

.navActions a {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.12);
}

.heroCenter {
  margin-top: 26px;
}

.brandKicker {
  color: rgba(255, 255, 255, 0.94) !important;
  letter-spacing: 0;
}

.hero h1 {
  max-width: 790px;
  color: #fff;
  font-size: clamp(2.15rem, 3.65vw, 3.7rem) !important;
}

.subline {
  color: rgba(255, 255, 255, 0.96);
}

.searchTabs {
  margin-top: 28px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.24);
}

.searchTabs .active {
  color: var(--blue);
}

.searchBar {
  margin-top: 14px !important;
  max-width: 1320px !important;
  min-height: 82px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 28px 70px rgba(4, 35, 55, 0.22) !important;
}

.searchBar button {
  background: var(--blue) !important;
  box-shadow: 0 10px 28px rgba(7, 94, 184, 0.35) !important;
}

.compareCheck,
.providerStrip,
.quickTags {
  display: none !important;
}

.latest {
  padding-top: 54px;
}

.emptyListings {
  min-height: 170px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(8, 49, 76, 0.08);
}

.emptyListings strong {
  font-size: 1.25rem;
}

.bestPriceBadge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  border-radius: 999px;
  background: #0db45f;
  color: #fff;
  padding: 6px 10px;
  font-size: 0.74rem;
  font-weight: 1000;
  box-shadow: 0 10px 24px rgba(13, 180, 95, 0.3);
}

.dealCard {
  border: 1px solid #e5edf3;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(8, 49, 76, 0.1);
  animation: softRise 520ms ease both;
}

.dealImage {
  height: 168px;
}

.dealBody a {
  border-color: var(--blue);
  color: var(--blue);
}

.price {
  background: #08314c;
}

.agencyFlow,
.requestBox {
  max-width: 1280px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f7fbff, #ffffff);
  box-shadow: 0 18px 54px rgba(8, 49, 76, 0.08);
}

.agencyFlow {
  position: relative;
  overflow: hidden;
  padding: 44px;
}

.agencyFlow::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--blue), var(--magenta));
}

.flowSteps {
  gap: 16px;
}

.flowSteps article {
  min-height: 210px;
  border: 1px solid #dde8f0;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(8, 49, 76, 0.06);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.flowSteps article:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(8, 49, 76, 0.12);
}

.flowSteps span,
.panelCta,
.requestForm button {
  background: var(--blue);
}

.requestBox {
  background:
    linear-gradient(135deg, rgba(7, 94, 184, 0.06), rgba(196, 20, 140, 0.07)),
    #fff;
}

.requestForm {
  grid-template-columns: 1fr 1fr;
}

.requestForm select,
.requestForm button {
  grid-column: span 2;
}

.requestForm button {
  border-radius: 12px;
}

.panelBody {
  background: #f4f7fb !important;
}

.sidebar {
  background: #08263d !important;
}

.panelStats article,
.panelTools article,
.uploadPanel,
.approvalPanel,
.livePanel,
.accountPanel,
.approvalItem,
.liveItem {
  border-color: #dfe8ef !important;
}

.panelStats article,
.panelTools article,
.uploadPanel,
.approvalPanel,
.livePanel,
.accountPanel {
  background: #fff !important;
}

.panelHeader,
.panelStats article,
.panelTools article,
.uploadPanel,
.approvalPanel,
.livePanel,
.accountPanel,
.approvalItem,
.liveItem,
.agencyAccountItem {
  animation: softRise 460ms ease both;
}

.approvalButtons button,
.agencyAccountItem button,
.agencyAccountForm button,
.modalActions a,
.modalActions button,
.loginCard button {
  background: var(--blue);
}

.reject,
.agencyAccountItem button.reject {
  background: #d72b58 !important;
}

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

  .requestForm select,
  .requestForm button {
    grid-column: auto;
  }
}

/* v6 SaaS polish: coastal palette, compact panels, fixed modals */
:root {
  --blue: #0b67b2;
  --blue-dark: #083c63;
  --cyan: #00a6c8;
  --ink: #0a2f47;
  --muted: #5d7286;
  --line: #dce7ef;
  --soft: #f4f8fb;
}

.hero {
  min-height: 620px !important;
  background:
    linear-gradient(180deg, rgba(9, 55, 83, 0.08), rgba(9, 55, 83, 0.32)),
    url("uyguna-konakla-hero.png") center bottom / cover no-repeat !important;
}

.logo {
  font-size: clamp(1.85rem, 3.1vw, 3rem) !important;
}

.hero h1 {
  font-size: clamp(2rem, 3.25vw, 3.35rem) !important;
}

.searchTabs .active {
  color: var(--blue) !important;
}

.searchBar {
  width: min(1280px, calc(100% - 44px)) !important;
  grid-template-columns:
    minmax(210px, 1.25fr)
    minmax(142px, 0.7fr)
    minmax(142px, 0.7fr)
    minmax(220px, 0.92fr)
    minmax(150px, 0.68fr)
    76px !important;
  overflow: hidden !important;
}

.searchBar button {
  width: 56px !important;
  height: 56px !important;
  margin: auto 10px !important;
  background: var(--blue) !important;
}

.searchBar label {
  padding: 0 16px !important;
}

.searchBar input,
.searchBar select {
  font-size: 0.98rem !important;
}

.commissionModel {
  width: min(1280px, calc(100% - 36px));
  margin: 0 auto 70px;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1fr);
  gap: 28px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(11, 103, 178, 0.08), rgba(0, 166, 200, 0.06)),
    #fff;
  box-shadow: 0 22px 60px rgba(10, 47, 71, 0.08);
  padding: 36px;
  animation: softRise 520ms ease both;
}

.commissionModel h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 2.15rem);
}

.commissionModel p {
  color: var(--muted);
  line-height: 1.7;
}

.commissionCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.commissionCards article {
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  padding: 18px;
}

.commissionCards strong {
  display: block;
  color: var(--blue-dark);
  font-size: 1.05rem;
}

.commissionCards span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.9rem;
}

.panelBody {
  grid-template-columns: 230px minmax(0, 1fr) !important;
  background: #f5f8fb !important;
}

.sidebar {
  background: linear-gradient(180deg, #082c49, #061d31) !important;
}

.panelMain {
  padding: 16px 18px 28px !important;
  max-width: none !important;
}

.panelHeader {
  min-height: 80px !important;
  padding: 16px !important;
}

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

.panelStats article {
  min-height: 74px !important;
}

.panelTools {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.panelGrid.singleApproval,
.panelGrid.adminGrid {
  grid-template-columns: minmax(430px, 0.78fr) minmax(430px, 1fr) !important;
  gap: 14px !important;
}

.agencyAccountForm {
  grid-template-columns: repeat(5, minmax(130px, 1fr)) !important;
}

.adminSettingsForm {
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 0.8fr) minmax(120px, 0.5fr) 180px !important;
}

.modalBackdrop {
  align-items: start !important;
  overflow-y: auto !important;
}

.modalCard,
.listingEditCard {
  margin: 28px auto !important;
  max-height: calc(100vh - 56px) !important;
  overflow-y: auto !important;
  border-radius: 18px !important;
}

.listingEditCard {
  width: min(820px, calc(100vw - 32px)) !important;
  padding: 22px !important;
}

.listingEditCard .modalActions {
  position: sticky;
  bottom: -22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), #fff);
  padding-top: 12px;
}

.photoPreview,
.compactPreview {
  min-height: 92px !important;
}

.compactPreview img,
.photoPreview img {
  height: 112px !important;
}

.panelCta,
.requestForm button,
.flowSteps span,
.approvalButtons button,
.agencyAccountItem button,
.agencyAccountForm button,
.loginCard button {
  background: var(--blue) !important;
}

.softDanger {
  background: #f3a11a !important;
}

@media (max-width: 1180px) {
  .searchBar,
  .panelGrid.singleApproval,
  .panelGrid.adminGrid,
  .commissionModel,
  .commissionCards,
  .agencyAccountForm,
  .adminSettingsForm {
    grid-template-columns: 1fr !important;
  }

  .panelBody {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    position: static !important;
    height: auto !important;
  }
}

/* v7 purple SaaS redesign + listing fee model */
:root {
  --magenta: #c0188f;
  --magenta-dark: #8e106d;
  --purple: #5b2bbf;
  --purple-ink: #230a38;
  --ink: #082f49;
  --muted: #62778d;
  --line: #e4dbea;
  --soft: #fbf6ff;
}

.hero {
  min-height: 640px !important;
  background:
    linear-gradient(180deg, rgba(76, 24, 86, 0.18), rgba(87, 17, 86, 0.38)),
    url("uyguna-konakla-hero.png") center bottom / cover no-repeat !important;
}

.logo {
  font-size: clamp(1.9rem, 3.2vw, 3.2rem) !important;
}

.hero h1 {
  max-width: 830px;
  font-size: clamp(2.05rem, 3.35vw, 3.55rem) !important;
}

.searchTabs {
  background: rgba(255, 255, 255, 0.26) !important;
}

.searchTabs .active {
  color: var(--magenta) !important;
}

.searchBar {
  box-shadow: 0 28px 80px rgba(82, 16, 83, 0.25) !important;
}

.searchBar button {
  background: linear-gradient(135deg, var(--magenta), var(--purple)) !important;
  box-shadow: 0 12px 28px rgba(192, 24, 143, 0.34) !important;
}

.panelBody {
  background:
    radial-gradient(circle at 18% -10%, rgba(192, 24, 143, 0.14), transparent 26%),
    radial-gradient(circle at 92% 6%, rgba(91, 43, 191, 0.11), transparent 24%),
    #f8f5fb !important;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(192, 24, 143, 0.24), transparent 34%),
    #1d082f !important;
}

.panelMain {
  display: grid;
  gap: 14px;
}

.panelHeader,
.panelStats article,
.accountPanel,
.uploadPanel,
.approvalPanel,
.livePanel,
.approvalItem,
.liveItem,
.agencyAccountItem {
  border-color: rgba(228, 219, 234, 0.95) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 16px 42px rgba(35, 10, 56, 0.075) !important;
}

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

.panelHeader::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--magenta), var(--purple));
}

.panelStats {
  margin-bottom: 0 !important;
}

.panelStats article {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.panelStats article:hover,
.accountPanel:hover,
.uploadPanel:hover,
.approvalPanel:hover,
.livePanel:hover {
  transform: translateY(-2px);
  border-color: rgba(192, 24, 143, 0.38) !important;
  box-shadow: 0 20px 52px rgba(35, 10, 56, 0.1) !important;
}

.panelTools {
  display: none !important;
}

.agencyFlow {
  background:
    linear-gradient(135deg, rgba(192, 24, 143, 0.07), rgba(91, 43, 191, 0.055)),
    #fff !important;
}

.agencyFlow::before {
  background: linear-gradient(90deg, var(--magenta), var(--purple)) !important;
}

.flowSteps span,
.panelCta,
.requestForm button,
.approvalButtons button,
.agencyAccountItem button,
.agencyAccountForm button,
.modalActions a,
.modalActions button,
.loginCard button {
  background: linear-gradient(135deg, var(--magenta), var(--purple)) !important;
}

.reject,
.agencyAccountItem button.reject {
  background: #dc315c !important;
}

.softDanger {
  background: #f59e0b !important;
}

.requestBox {
  background:
    linear-gradient(135deg, rgba(192, 24, 143, 0.08), rgba(91, 43, 191, 0.06)),
    #fff !important;
}

.commissionModel,
.commissionCards {
  display: none !important;
}

.adminSettingsForm {
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 0.8fr) minmax(150px, 0.55fr) 190px !important;
}

.agencyAccountForm {
  grid-template-columns: minmax(210px, 1.1fr) minmax(220px, 1fr) minmax(150px, 0.7fr) minmax(130px, 0.55fr) minmax(120px, 0.55fr) 145px !important;
}

/* v8 modal + marketplace rationale polish */
#submitModal {
  background:
    radial-gradient(circle at 26% 22%, rgba(192, 24, 143, 0.34), transparent 32%),
    radial-gradient(circle at 72% 78%, rgba(91, 43, 191, 0.28), transparent 30%),
    rgba(22, 7, 34, 0.64) !important;
  backdrop-filter: blur(18px) saturate(1.16) !important;
}

#submitModal .modalCard {
  width: min(560px, calc(100vw - 34px)) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(251, 244, 255, 0.9)) !important;
  box-shadow:
    0 34px 100px rgba(24, 6, 36, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  animation: modalFloatIn 320ms cubic-bezier(.2,.8,.2,1) both !important;
}

#submitModal .modalIcon {
  background: linear-gradient(135deg, #14c86b, #06a85a) !important;
  box-shadow: 0 16px 34px rgba(6, 168, 90, 0.28);
}

#submitModal .modalActions {
  justify-content: flex-start;
}

#submitModal .modalActions button {
  min-width: 132px;
  color: #fff !important;
  background: linear-gradient(135deg, var(--magenta), var(--purple)) !important;
  box-shadow: 0 14px 32px rgba(142, 16, 109, 0.26);
}

.agencyFlow {
  border: 1px solid rgba(228, 219, 234, 0.92);
}

.flowSteps article {
  position: relative;
  overflow: hidden;
}

.flowSteps article::after {
  content: "";
  position: absolute;
  inset: auto -30% -45% 40%;
  height: 90px;
  background: radial-gradient(circle, rgba(192, 24, 143, 0.1), transparent 65%);
  transition: transform 220ms ease;
}

.flowSteps article:hover::after {
  transform: scale(1.4);
}

@keyframes modalFloatIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes softRise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 980px) {
  .searchBar,
  .cards,
  .flowSteps,
  .requestBox,
  .panelBody,
  .panelGrid,
  .panelGrid.singleApproval,
  .panelGrid.adminGrid,
  .panelStats,
  .panelTools,
  .homeSummary,
  .agencyAccountForm,
  .agencyAccountItem {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .hero {
    min-height: 640px;
  }

  .homeSummary {
    margin-top: -28px;
  }

  .searchBar {
    border-radius: 28px;
    overflow: visible;
  }

  .hero::before,
  .hero::after {
    width: 48vw;
    opacity: 0.45;
  }

  .logo {
    position: static;
    transform: none;
  }

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

  .searchBar label {
    border-right: 0;
    border-bottom: 1px solid #dce6ed;
    min-height: 74px;
  }

  .searchBar button {
    border-radius: 18px;
    width: calc(100% - 20px);
    height: 56px;
  }
}

@media (max-width: 640px) {
  .navActions {
    display: none;
  }

  .hero {
    min-height: 610px;
  }

  .hero h1 {
    font-size: 2.1rem;
  }

  .hero::before,
  .hero::after {
    display: none;
  }

  .homeSummary {
    width: calc(100% - 24px);
  }

  .searchBar {
    min-height: auto;
  }

  .searchTabs {
    width: 100%;
    overflow-x: auto;
    justify-content: start;
  }

  .searchTabs button {
    flex: 0 0 auto;
  }

  .sectionTitle,
  .panelHeader {
    display: block;
  }

  .roleCards,
  .listingWithPhoto,
  .formGrid {
    grid-template-columns: 1fr;
  }

  .listingWithPhoto img {
    width: 100%;
    height: 160px;
  }
}

/* v9: denser SaaS homepage + city picker */
body {
  font-family: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  background:
    linear-gradient(180deg, #fff 0%, #fbf7ff 46%, #fff 100%) !important;
}

main {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 247, 255, 0.92) 42%, #fff 100%) !important;
}

.hero {
  background:
    linear-gradient(180deg, rgba(86, 32, 82, 0.16), rgba(121, 25, 102, 0.34)),
    linear-gradient(90deg, rgba(16, 35, 59, 0.16), rgba(178, 23, 134, 0.1)),
    url("uyguna-konakla-hero.png") center / cover !important;
}

.heroCenter {
  max-width: 1240px !important;
}

.hero h1 {
  max-width: 980px !important;
  margin-inline: auto !important;
  font-size: clamp(2.55rem, 5.2vw, 5.4rem) !important;
  letter-spacing: 0 !important;
  line-height: 0.98 !important;
}

.brandKicker,
.subline,
.searchTabs button,
.searchBar span,
.sectionTitle h2,
.agencyFlow h2,
.requestBox h2 {
  letter-spacing: 0 !important;
}

.searchBar {
  overflow: visible !important;
  isolation: isolate;
  box-shadow: 0 30px 80px rgba(39, 14, 59, 0.22) !important;
}

.cityPicker {
  position: relative;
  z-index: 20;
}

.cityDropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  width: min(520px, calc(100vw - 34px));
  max-height: 360px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(187, 149, 214, 0.46);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 28px 70px rgba(46, 18, 66, 0.24);
  backdrop-filter: blur(18px) saturate(1.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 60;
}

.cityDropdown.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.cityDropdown button {
  min-height: 42px;
  border: 1px solid rgba(222, 205, 235, 0.9);
  border-radius: 14px;
  color: var(--ink);
  background: linear-gradient(135deg, #fff, #fbf4ff);
  font-weight: 850;
  text-align: left;
  padding: 0 13px;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.cityDropdown button:hover {
  transform: translateY(-2px);
  border-color: rgba(192, 24, 143, 0.45);
  box-shadow: 0 12px 26px rgba(93, 36, 123, 0.14);
}

.sectionTitle.stacked {
  display: block !important;
  max-width: 870px;
}

.sectionTitle.stacked h2 {
  margin: 8px 0 12px;
  font-size: clamp(2rem, 3.1vw, 3.65rem);
  line-height: 1.05;
}

.sectionTitle.stacked p {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.75;
}

.operationSummary,
.operationsBoard,
.segmentShowcase {
  width: min(1500px, calc(100% - 56px));
  margin: 34px auto 0;
  border: 1px solid rgba(226, 211, 239, 0.92);
  border-radius: 30px;
}

.operationSummary {
  padding: clamp(28px, 4vw, 56px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(252, 244, 255, 0.9)),
    linear-gradient(90deg, rgba(192, 24, 143, 0.05), rgba(91, 43, 191, 0.06));
  box-shadow: 0 28px 80px rgba(47, 22, 66, 0.08);
}

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

.operationCards article,
.segmentGrid article {
  min-height: 198px;
  padding: 24px;
  border: 1px solid rgba(226, 211, 239, 0.94);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 44px rgba(47, 22, 66, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.operationCards article:hover,
.segmentGrid article:hover {
  transform: translateY(-5px);
  border-color: rgba(192, 24, 143, 0.38);
  box-shadow: 0 28px 58px rgba(47, 22, 66, 0.12);
}

.operationCards span {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--magenta), var(--purple));
  font-weight: 950;
}

.operationCards strong,
.segmentGrid strong {
  display: block;
  margin-top: 22px;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 950;
}

.operationCards p,
.segmentGrid span,
.boardCopy p {
  color: var(--muted);
  line-height: 1.62;
}

.operationsBoard {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(420px, 1.15fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 58px);
  color: #fff;
  background:
    linear-gradient(135deg, #28103a 0%, #68165e 48%, #8b1ec1 100%);
  box-shadow: 0 32px 92px rgba(75, 22, 91, 0.2);
}

.operationsBoard .kicker {
  color: #ffc8f2;
}

.boardCopy h2 {
  margin: 8px 0 16px;
  font-size: clamp(2rem, 3vw, 3.5rem);
  line-height: 1.04;
}

.boardCopy p {
  color: rgba(255, 255, 255, 0.76);
}

.boardPanel {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 24px 70px rgba(9, 8, 28, 0.18);
}

.boardTop,
.boardTimeline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.boardTop strong {
  font-size: 1.24rem;
}

.boardTop span,
.boardTimeline span {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 9px 13px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.88rem;
  font-weight: 850;
}

.boardMetrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 22px 0;
}

.boardMetrics div {
  min-height: 150px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
}

.boardMetrics span,
.boardMetrics small {
  display: block;
  color: var(--muted);
  font-weight: 800;
}

.boardMetrics strong {
  display: block;
  margin: 12px 0 8px;
  font-size: clamp(1.7rem, 2.8vw, 2.65rem);
  line-height: 1;
}

.boardTimeline .done {
  background: rgba(34, 197, 94, 0.2);
}

.boardTimeline .active {
  background: rgba(255, 255, 255, 0.24);
}

.segmentShowcase {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 24px;
  align-items: stretch;
  padding: clamp(26px, 4vw, 46px);
  background: #fff;
  box-shadow: 0 24px 70px rgba(47, 22, 66, 0.07);
}

.segmentShowcase h2 {
  margin: 8px 0 0;
  font-size: clamp(1.9rem, 2.5vw, 3rem);
  line-height: 1.05;
}

.segmentGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.segmentGrid article {
  min-height: 160px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(251, 244, 255, 0.94));
}

.segmentGrid span {
  display: block;
  margin-top: 10px;
}

.agencyFlow {
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(47, 22, 66, 0.08);
}

.agencyFlow .flowSteps article {
  animation: softRise 500ms ease both;
}

@media (max-width: 1100px) {
  .operationCards,
  .segmentGrid,
  .operationsBoard,
  .segmentShowcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operationsBoard,
  .segmentShowcase {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .operationSummary,
  .operationsBoard,
  .segmentShowcase {
    width: calc(100% - 24px);
    border-radius: 24px;
  }

  .operationCards,
  .segmentGrid,
  .boardMetrics {
    grid-template-columns: 1fr;
  }

  .cityDropdown {
    grid-template-columns: 1fr;
    width: calc(100vw - 34px);
  }

  .hero h1 {
    font-size: clamp(2rem, 12vw, 3.1rem) !important;
  }
}

/* v10: fix hero scale, city layer and compact operation panel */
.hero {
  min-height: 590px !important;
  overflow: visible !important;
  z-index: 30;
}

main {
  position: relative;
  z-index: 1;
}

.topNav {
  padding-top: 18px !important;
  padding-bottom: 12px !important;
}

.logo {
  font-size: clamp(1.55rem, 2.45vw, 2.45rem) !important;
}

.heroCenter {
  max-width: 1080px !important;
  padding-top: clamp(28px, 5vw, 64px) !important;
}

.brandKicker {
  font-size: clamp(1rem, 1.7vw, 1.45rem) !important;
}

.hero h1 {
  max-width: 760px !important;
  margin-top: 10px !important;
  font-size: clamp(2.05rem, 3.35vw, 3.45rem) !important;
  line-height: 1.08 !important;
}

.subline {
  max-width: 760px !important;
  margin-top: 14px !important;
  font-size: clamp(1rem, 1.5vw, 1.25rem) !important;
}

.searchTabs {
  margin-top: 22px !important;
}

.searchBar {
  position: relative;
  z-index: 70;
  margin-top: 18px !important;
}

.cityPicker {
  z-index: 90 !important;
}

.cityDropdown {
  z-index: 999 !important;
  top: calc(100% + 10px) !important;
  max-height: 310px !important;
}

.operationSummary {
  width: min(1420px, calc(100% - 44px)) !important;
  margin-top: 42px !important;
  padding: clamp(22px, 3vw, 34px) !important;
  border-radius: 24px !important;
}

.sectionTitle.stacked {
  max-width: 760px !important;
}

.sectionTitle.stacked h2 {
  font-size: clamp(1.65rem, 2.35vw, 2.75rem) !important;
  line-height: 1.12 !important;
}

.sectionTitle.stacked p {
  font-size: 0.98rem !important;
  line-height: 1.62 !important;
}

.operationCards {
  gap: 14px !important;
  margin-top: 22px !important;
}

.operationCards article {
  min-height: 150px !important;
  padding: 18px !important;
  border-radius: 20px !important;
}

.operationCards span {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  font-size: 1.08rem !important;
}

.operationCards strong {
  margin-top: 14px !important;
  font-size: 1rem !important;
}

.operationCards p {
  margin-bottom: 0 !important;
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
}

@media (max-width: 900px) {
  .hero {
    min-height: 620px !important;
  }

  .hero h1 {
    max-width: 620px !important;
    font-size: clamp(1.9rem, 6vw, 3rem) !important;
  }
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: clamp(1.85rem, 9vw, 2.55rem) !important;
  }

  .operationSummary {
    width: calc(100% - 22px) !important;
  }
}

/* v11: remove oversized dropdown inheritance and duplicate-card feel */
.hero {
  min-height: 545px !important;
}

.heroCenter {
  padding-top: clamp(18px, 3.4vw, 42px) !important;
}

.hero h1 {
  max-width: 700px !important;
  font-size: clamp(1.9rem, 2.85vw, 3.05rem) !important;
  line-height: 1.09 !important;
}

.subline {
  font-size: clamp(0.95rem, 1.15vw, 1.08rem) !important;
}

.searchBar .cityDropdown {
  width: min(430px, calc(100vw - 34px)) !important;
  max-height: 285px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  padding: 10px !important;
  border-radius: 18px !important;
}

.searchBar .cityDropdown button {
  all: unset;
  box-sizing: border-box;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(222, 205, 235, 0.9);
  border-radius: 12px;
  color: var(--ink);
  background: linear-gradient(135deg, #fff, #fbf4ff);
  font-family: "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.searchBar .cityDropdown button:hover {
  transform: translateY(-1px);
  border-color: rgba(192, 24, 143, 0.45);
  box-shadow: 0 10px 22px rgba(93, 36, 123, 0.12);
}

.latest {
  padding-top: 58px !important;
}

.operationsBoard {
  width: min(1380px, calc(100% - 52px)) !important;
  margin-top: 28px !important;
  padding: clamp(24px, 3.3vw, 42px) !important;
  border-radius: 24px !important;
}

.boardCopy h2 {
  font-size: clamp(1.9rem, 2.65vw, 3rem) !important;
}

.boardPanel {
  padding: 18px !important;
  border-radius: 22px !important;
}

.boardMetrics div {
  min-height: 120px !important;
  padding: 16px !important;
  border-radius: 18px !important;
}

.boardMetrics strong {
  font-size: clamp(1.6rem, 2.3vw, 2.25rem) !important;
}

.segmentShowcase {
  width: min(1380px, calc(100% - 52px)) !important;
  padding: clamp(22px, 3vw, 34px) !important;
  border-radius: 24px !important;
}

.segmentShowcase h2 {
  font-size: clamp(1.75rem, 2.35vw, 2.65rem) !important;
}

.segmentGrid article {
  min-height: 128px !important;
  padding: 18px !important;
  border-radius: 18px !important;
}

.agencyFlow {
  width: min(1380px, calc(100% - 52px)) !important;
  padding: clamp(24px, 3.2vw, 40px) !important;
  border-radius: 24px !important;
}

.agencyFlow h2 {
  font-size: clamp(1.75rem, 2.5vw, 2.8rem) !important;
}

.flowSteps {
  gap: 14px !important;
}

.flowSteps article {
  min-height: 148px !important;
  padding: 18px !important;
  border-radius: 18px !important;
}

.flowSteps span {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  font-size: 1rem !important;
}

.flowSteps strong {
  font-size: 1rem !important;
}

.flowSteps p {
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
}

@media (max-width: 700px) {
  .searchBar .cityDropdown {
    grid-template-columns: 1fr !important;
  }
}

/* v12: align all homepage cards with hero width and match tighter reference typography */
:root {
  --page-shell: min(1180px, calc(100% - 40px));
}

body,
button,
input,
select,
textarea {
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

.logo,
.hero h1,
.sectionTitle h2,
.boardCopy h2,
.segmentShowcase h2,
.agencyFlow h2,
.requestBox h2,
.dealBody h3,
.panelHeader h1 {
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}

.heroCenter,
.searchBar,
.latest,
.operationsBoard,
.segmentShowcase,
.agencyFlow,
.requestBox {
  width: var(--page-shell) !important;
  max-width: var(--page-shell) !important;
}

.heroCenter {
  margin-inline: auto !important;
}

.searchBar {
  margin-left: auto !important;
  margin-right: auto !important;
}

.latest {
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.operationsBoard,
.segmentShowcase,
.agencyFlow,
.requestBox {
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero h1 {
  max-width: 780px !important;
  font-size: clamp(2.15rem, 3.15vw, 3.35rem) !important;
  line-height: 1.03 !important;
}

.operationsBoard {
  grid-template-columns: minmax(280px, 0.82fr) minmax(360px, 1fr) !important;
  gap: 26px !important;
  padding: 32px !important;
}

.boardCopy h2 {
  font-size: clamp(1.85rem, 2.3vw, 2.55rem) !important;
  line-height: 1.05 !important;
}

.boardCopy p {
  font-size: 0.96rem !important;
  line-height: 1.55 !important;
}

.boardMetrics {
  gap: 10px !important;
}

.boardMetrics div {
  min-height: 104px !important;
}

.boardMetrics strong {
  font-size: clamp(1.45rem, 2vw, 2rem) !important;
}

.segmentShowcase {
  grid-template-columns: 0.62fr 1.38fr !important;
  gap: 18px !important;
}

.segmentShowcase h2 {
  font-size: clamp(1.7rem, 2.15vw, 2.45rem) !important;
}

.segmentGrid {
  gap: 10px !important;
}

.segmentGrid article {
  min-height: 116px !important;
  padding: 16px !important;
}

.agencyFlow {
  margin-top: 0 !important;
}

.agencyFlow h2 {
  font-size: clamp(1.65rem, 2.15vw, 2.45rem) !important;
  line-height: 1.08 !important;
}

.requestBox {
  grid-template-columns: 0.85fr 0.75fr !important;
}

@media (max-width: 980px) {
  :root {
    --page-shell: min(100% - 24px, 720px);
  }

  .operationsBoard,
  .segmentShowcase,
  .requestBox {
    grid-template-columns: 1fr !important;
  }

  .hero h1 {
    font-size: clamp(1.9rem, 6.2vw, 2.9rem) !important;
  }
}

/* v13: compact city suggestions, softer cards, visible motion */
.searchBar .cityDropdown {
  top: calc(100% + 8px) !important;
  left: 10px !important;
  width: min(360px, calc(100vw - 34px)) !important;
  max-height: 260px !important;
  padding: 8px !important;
  gap: 6px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    0 18px 42px rgba(59, 24, 77, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(18px) saturate(1.22) !important;
}

.searchBar .cityDropdown.singleResult {
  width: auto !important;
  min-width: 138px !important;
  max-width: 220px !important;
  grid-template-columns: 1fr !important;
  padding: 6px !important;
}

.searchBar .cityDropdown button {
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(222, 204, 236, 0.68) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  color: #15344a !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.searchBar .cityDropdown button:hover {
  background: rgba(249, 239, 255, 0.95) !important;
  border-color: rgba(184, 68, 174, 0.34) !important;
  transform: translateY(-1px) !important;
}

.latest,
.operationsBoard,
.segmentShowcase,
.agencyFlow,
.requestBox {
  animation: sectionFloatIn 640ms cubic-bezier(.2,.8,.2,1) both;
}

.operationsBoard { animation-delay: 90ms; }
.segmentShowcase { animation-delay: 150ms; }
.agencyFlow { animation-delay: 210ms; }
.requestBox { animation-delay: 270ms; }

.dealCard,
.boardPanel,
.boardMetrics div,
.segmentGrid article,
.flowSteps article,
.requestBox,
.emptyListings {
  border-color: rgba(226, 213, 238, 0.7) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(253, 247, 255, 0.72)) !important;
  box-shadow:
    0 18px 46px rgba(48, 23, 65, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transition:
    transform 220ms cubic-bezier(.2,.8,.2,1),
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease !important;
}

.dealCard:hover,
.segmentGrid article:hover,
.flowSteps article:hover,
.boardMetrics div:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(189, 22, 136, 0.24) !important;
  box-shadow:
    0 24px 58px rgba(48, 23, 65, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

.operationsBoard {
  background:
    linear-gradient(135deg, rgba(51, 20, 70, 0.96), rgba(116, 25, 113, 0.94) 58%, rgba(136, 37, 191, 0.92)) !important;
}

.flowSteps span,
.panelCta,
.requestForm button {
  box-shadow: 0 12px 26px rgba(161, 29, 147, 0.18) !important;
}

.flowSteps article::after {
  display: none !important;
}

@keyframes sectionFloatIn {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .latest,
  .operationsBoard,
  .segmentShowcase,
  .agencyFlow,
  .requestBox,
  .dealCard,
  .segmentGrid article,
  .flowSteps article,
  .boardMetrics div {
    animation: none !important;
    transition: none !important;
  }
}

/* v14: transparent PNG logo integration */
.logo.logoAsset,
.panelLogo.logoAsset {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: transparent !important;
  text-shadow: none !important;
  line-height: 1 !important;
}

.logo.logoAsset {
  width: clamp(138px, 14vw, 190px) !important;
  height: 76px !important;
  padding: 0 !important;
}

.logo.logoAsset img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 12px 24px rgba(20, 9, 32, 0.28));
}

.panelLogo.logoAsset {
  width: 168px !important;
  height: 92px !important;
  padding: 10px 12px !important;
  border-radius: 20px !important;
}

.loginCard .panelLogo.logoAsset {
  background: linear-gradient(135deg, rgba(51, 20, 70, 0.94), rgba(142, 30, 144, 0.9)) !important;
  box-shadow: 0 18px 42px rgba(48, 23, 65, 0.16);
}

.sidebar .panelLogo.logoAsset {
  background: rgba(255, 255, 255, 0.08) !important;
}

.panelLogo.logoAsset img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.24));
}

/* v15: rebuilt homepage flow, collision-proof cards, real scroll reveals */
html {
  scroll-behavior: smooth;
}

main {
  display: grid !important;
  gap: clamp(34px, 6vw, 76px) !important;
  padding: clamp(44px, 6vw, 82px) 0 clamp(64px, 7vw, 110px) !important;
  overflow: clip !important;
  background:
    linear-gradient(180deg, #fff 0%, #fbf7ff 36%, #fff 72%) !important;
}

.latest,
.operationsBoard,
.segmentShowcase,
.agencyFlow,
.requestBox {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 28px !important;
}

.latest {
  display: grid !important;
  gap: 22px !important;
  padding: 0 !important;
  background: transparent !important;
}

.sectionTitle {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.78fr) minmax(260px, 0.92fr) !important;
  gap: 22px !important;
  align-items: end !important;
}

.sectionTitle h2 {
  margin: 0 !important;
  color: #951176 !important;
  font-size: clamp(1.75rem, 2.35vw, 2.65rem) !important;
  line-height: 1.05 !important;
}

.sectionTitle p {
  justify-self: end !important;
  max-width: 520px !important;
  margin: 0 !important;
  color: #61738a !important;
  font-weight: 750 !important;
  line-height: 1.55 !important;
}

.cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.emptyListings {
  min-height: 150px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 26px !important;
}

.operationsBoard {
  min-height: auto !important;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(22px, 3vw, 36px) !important;
  padding: clamp(28px, 4vw, 48px) !important;
  background:
    linear-gradient(135deg, rgba(31, 19, 47, 0.96), rgba(101, 25, 104, 0.95) 54%, rgba(139, 38, 183, 0.92)) !important;
  box-shadow: 0 28px 80px rgba(70, 21, 86, 0.2) !important;
}

.boardPanel {
  min-width: 0 !important;
}

.boardMetrics {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
}

.boardMetrics div {
  min-width: 0 !important;
}

.boardTimeline {
  flex-wrap: wrap !important;
}

.segmentShowcase,
.agencyFlow,
.requestBox {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(253, 247, 255, 0.78)) !important;
  border: 1px solid rgba(226, 213, 238, 0.72) !important;
  box-shadow:
    0 26px 70px rgba(48, 23, 65, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.segmentShowcase {
  grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1.42fr) !important;
  align-items: center !important;
  gap: clamp(20px, 3vw, 34px) !important;
  padding: clamp(26px, 4vw, 44px) !important;
}

.segmentGrid,
.flowSteps {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.segmentGrid article,
.flowSteps article {
  min-width: 0 !important;
  min-height: 132px !important;
  border-radius: 22px !important;
  padding: 20px !important;
  overflow: hidden !important;
}

.segmentGrid article {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.segmentGrid strong,
.flowSteps strong {
  margin-top: 0 !important;
  font-size: 1.03rem !important;
}

.segmentGrid span,
.flowSteps p {
  color: #60748d !important;
  font-size: 0.95rem !important;
}

.agencyFlow {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 22px !important;
  padding: clamp(28px, 4vw, 46px) !important;
}

.agencyFlow > div:first-child {
  max-width: 860px !important;
}

.flowSteps {
  margin: 0 !important;
}

.flowSteps span {
  margin-bottom: 14px !important;
}

.panelCta {
  width: fit-content !important;
}

.requestBox {
  align-items: center !important;
  gap: clamp(22px, 4vw, 42px) !important;
  padding: clamp(28px, 4vw, 46px) !important;
}

.requestForm {
  min-width: 0 !important;
}

.reveal {
  opacity: 0 !important;
  transform: translateY(34px) scale(0.985) !important;
  filter: blur(8px) !important;
  transition:
    opacity 760ms cubic-bezier(.2,.8,.2,1) var(--reveal-delay, 0ms),
    transform 760ms cubic-bezier(.2,.8,.2,1) var(--reveal-delay, 0ms),
    filter 760ms cubic-bezier(.2,.8,.2,1) var(--reveal-delay, 0ms) !important;
  will-change: opacity, transform, filter;
}

.reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: blur(0) !important;
}

.boardMetrics div.reveal,
.segmentGrid article.reveal,
.flowSteps article.reveal,
.dealCard.reveal {
  transform: translateY(28px) scale(0.96) !important;
}

.boardMetrics div.reveal.is-visible,
.segmentGrid article.reveal.is-visible,
.flowSteps article.reveal.is-visible,
.dealCard.reveal.is-visible {
  transform: translateY(0) scale(1) !important;
}

@media (max-width: 980px) {
  main {
    gap: 34px !important;
    padding-top: 34px !important;
  }

  .sectionTitle,
  .operationsBoard,
  .segmentShowcase,
  .requestBox {
    grid-template-columns: 1fr !important;
  }

  .sectionTitle p {
    justify-self: start !important;
  }

  .cards,
  .segmentGrid,
  .flowSteps,
  .boardMetrics {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* v16: fixed search icon, city chips and repeatable scroll motion */
.searchBar .searchSubmit {
  flex: 0 0 78px !important;
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;
  min-height: 78px !important;
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #c0178e, #7224d8) !important;
  box-shadow: 0 18px 40px rgba(125, 30, 155, 0.32) !important;
  overflow: hidden !important;
}

.searchBar .searchSubmit svg {
  width: 30px !important;
  height: 30px !important;
  display: block !important;
  fill: currentColor !important;
  pointer-events: none !important;
}

.searchBar .searchSubmit:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 22px 48px rgba(125, 30, 155, 0.4) !important;
}

.cityPicker {
  overflow: visible !important;
}

.searchBar .cityDropdown {
  left: 0 !important;
  top: calc(100% + 12px) !important;
  width: min(390px, calc(100vw - 32px)) !important;
  max-height: 246px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start !important;
  padding: 10px !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(226, 211, 239, 0.86) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 44px rgba(36, 16, 52, 0.16) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
}

.searchBar .cityDropdown.singleResult {
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
  grid-template-columns: 1fr !important;
}

.searchBar .cityDropdown button,
.searchBar .cityDropdown button[type="button"] {
  all: unset !important;
  box-sizing: border-box !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 12px !important;
  border: 1px solid rgba(222, 205, 235, 0.78) !important;
  border-radius: 12px !important;
  color: #14324a !important;
  background: rgba(255, 255, 255, 0.82) !important;
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.searchBar .cityDropdown button:hover,
.searchBar .cityDropdown button:focus-visible {
  color: #7b166f !important;
  background: #fbf3ff !important;
  border-color: rgba(192, 24, 143, 0.34) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

.reveal {
  opacity: 0 !important;
  transform: translate3d(0, 46px, 0) scale(0.965) !important;
  filter: blur(10px) !important;
  transition:
    opacity 880ms cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
    transform 880ms cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
    filter 880ms cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms) !important;
}

.reveal.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: blur(0) !important;
}

.segmentGrid article.reveal,
.flowSteps article.reveal,
.boardMetrics div.reveal,
.dealCard.reveal {
  transform: translate3d(0, 36px, 0) rotateX(7deg) scale(0.96) !important;
  transform-origin: center bottom !important;
}

.segmentGrid article.reveal.is-visible,
.flowSteps article.reveal.is-visible,
.boardMetrics div.reveal.is-visible,
.dealCard.reveal.is-visible {
  transform: translate3d(0, 0, 0) rotateX(0) scale(1) !important;
}

@media (max-width: 760px) {
  .searchBar .searchSubmit {
    width: calc(100% - 20px) !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 8px 10px 10px !important;
  }

  .searchBar .cityDropdown {
    width: calc(100vw - 40px) !important;
    grid-template-columns: 1fr !important;
  }
}

/* v17: px logo scale, direct scroll-motion compatibility, rebuilt panels */
.logo.logoAsset {
  width: 280px !important;
  height: 132px !important;
}

.topNav {
  min-height: 118px !important;
  align-items: flex-start !important;
}

.heroCenter {
  padding-top: 6px !important;
}

.panelLogo.logoAsset {
  width: 224px !important;
  height: 126px !important;
  padding: 12px !important;
}

.loginCard .panelLogo.logoAsset {
  width: 260px !important;
  height: 140px !important;
}

.scrollMotion {
  will-change: transform, opacity, filter !important;
}

@supports (animation-timeline: view()) {
  .latest,
  .operationsBoard,
  .segmentShowcase,
  .agencyFlow,
  .requestBox,
  .dealCard,
  .boardPanel,
  .boardMetrics div,
  .segmentGrid article,
  .flowSteps article {
    animation-name: scrollViewRise !important;
    animation-duration: 1ms !important;
    animation-fill-mode: both !important;
    animation-timeline: view() !important;
    animation-range: entry 0% cover 34% !important;
  }
}

@keyframes scrollViewRise {
  from {
    opacity: 0.2;
    transform: translateY(48px) scale(0.96);
    filter: blur(9px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

body.panelBody {
  color: #10283c !important;
  background:
    linear-gradient(135deg, #13091f 0 260px, #f7f2fb 260px 100%) !important;
}

.panelBody {
  grid-template-columns: 286px minmax(0, 1fr) !important;
  min-height: 100vh !important;
}

.sidebar {
  padding: 24px 20px !important;
  background:
    linear-gradient(180deg, rgba(195, 31, 150, 0.18), rgba(111, 35, 193, 0.08) 42%, transparent),
    linear-gradient(180deg, #190626, #10031c) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 18px 0 60px rgba(35, 8, 52, 0.16) !important;
}

.sidebar nav {
  gap: 9px !important;
  margin-top: 22px !important;
}

.sidebar nav a {
  min-height: 46px !important;
  padding: 0 14px !important;
  border-radius: 15px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(255, 255, 255, 0.065) !important;
  font-weight: 850 !important;
}

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

.agencyStatus {
  border-radius: 22px !important;
  padding: 18px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

.panelMain {
  display: grid !important;
  gap: 20px !important;
  padding: 24px 28px 44px !important;
  max-width: none !important;
}

.panelHeader {
  min-height: 150px !important;
  display: flex !important;
  align-items: center !important;
  padding: 26px 30px !important;
  border: 1px solid rgba(228, 215, 238, 0.82) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(251, 243, 255, 0.86)),
    linear-gradient(90deg, rgba(192, 24, 143, 0.12), rgba(111, 35, 193, 0.1)) !important;
  box-shadow:
    0 24px 70px rgba(47, 17, 66, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
  overflow: hidden !important;
}

.panelHeader::before {
  width: 7px !important;
  background: linear-gradient(180deg, #c0178e, #7224d8) !important;
}

.panelHeader h1 {
  max-width: 980px !important;
  font-size: clamp(2rem, 3vw, 3.25rem) !important;
  line-height: 1.02 !important;
  color: #10283c !important;
}

.panelSubtext {
  max-width: 840px !important;
  margin-top: 10px !important;
  color: #64768b !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

.panelStats {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 14px !important;
}

.panelStats article,
.accountPanel,
.uploadPanel,
.approvalPanel,
.livePanel,
.approvalItem,
.liveItem,
.agencyAccountItem {
  border: 1px solid rgba(226, 213, 238, 0.78) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(253, 247, 255, 0.78)) !important;
  box-shadow:
    0 18px 48px rgba(47, 17, 66, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.panelStats article {
  min-height: 112px !important;
  padding: 18px 20px !important;
  display: grid !important;
  align-content: center !important;
}

.panelStats span {
  color: #6a7d91 !important;
  font-size: 0.9rem !important;
}

.panelStats strong {
  margin-top: 9px !important;
  color: #10283c !important;
  font-size: 1.85rem !important;
  line-height: 1 !important;
}

.panelGrid,
.panelGrid.adminGrid,
.panelGrid.singleApproval {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: start !important;
}

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

.panelSectionHead h2,
.uploadPanel h2 {
  font-size: clamp(1.28rem, 1.8vw, 1.75rem) !important;
  color: #10283c !important;
}

.formGrid,
.agencyAccountForm,
.adminSettingsForm {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 14px !important;
}

.uploadPanel input,
.uploadPanel select,
.uploadPanel textarea,
.agencyAccountForm input,
.agencyAccountForm select,
.loginCard input,
.requestForm input,
.requestForm select {
  min-height: 50px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(211, 196, 224, 0.9) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.uploadPanel button,
.agencyAccountForm button,
.loginCard button,
.approvalButtons button,
.listingAction {
  min-height: 48px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #c0178e, #7224d8) !important;
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(126, 33, 151, 0.24) !important;
}

.loginGate {
  background:
    linear-gradient(135deg, rgba(18, 5, 31, 0.78), rgba(105, 22, 102, 0.62)),
    url("uyguna-konakla-hero.png") center / cover !important;
  backdrop-filter: blur(16px) !important;
}

.loginCard {
  border-radius: 32px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 34px 100px rgba(23, 5, 39, 0.28) !important;
  backdrop-filter: blur(18px) !important;
}

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

  .sidebar {
    position: static !important;
    height: auto !important;
  }

  .panelGrid,
  .panelGrid.adminGrid,
  .panelGrid.singleApproval {
    grid-template-columns: 1fr !important;
  }

  .logo.logoAsset {
    width: 220px !important;
    height: 106px !important;
  }
}

/* v35 panel logo visibility fix */
.panelBody .panelLogo.logoAsset,
.loginGate .panelLogo.logoAsset,
.sidebar .panelLogo.logoAsset {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 210px !important;
  height: 104px !important;
  padding: 10px 14px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #12091d, #5f166f 55%, #a5168a) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 22px 54px rgba(37, 10, 52, .2) !important;
  color: transparent !important;
}

.panelBody .panelLogo.logoAsset img,
.loginGate .panelLogo.logoAsset img,
.sidebar .panelLogo.logoAsset img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.32)) !important;
}

/* v38 enterprise panel and billing polish */
.panelBody {
  background:
    radial-gradient(circle at 18% 10%, rgba(192, 23, 142, .12), transparent 32%),
    linear-gradient(135deg, #f7f5fb, #eef3f8 46%, #fff) !important;
  font-family: "Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
}

.panelMain {
  max-width: 1480px !important;
}

.panelHeader,
.panelStats article,
.accountPanel,
.uploadPanel,
.approvalPanel,
.livePanel,
.liveItem,
.approvalItem,
.agencyAccountItem,
.paymentRow {
  border: 1px solid rgba(226, 214, 237, .84) !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: 0 22px 70px rgba(26, 17, 45, .08) !important;
}

.panelHeader {
  min-height: 128px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(250,246,255,.9)),
    radial-gradient(circle at 90% 10%, rgba(192,23,142,.18), transparent 34%) !important;
}

.panelHeader h1 {
  font-size: clamp(1.8rem, 2.4vw, 2.75rem) !important;
  letter-spacing: -.03em !important;
  line-height: 1.06 !important;
}

.paymentPanel {
  margin: 18px 0 !important;
}

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

.planCards article,
.paymentRow {
  border-radius: 18px;
  padding: 18px;
}

.planCards article {
  display: grid;
  gap: 7px;
  border: 1px solid #e5d8ef;
  background: linear-gradient(180deg, #fff, #fbf8ff);
}

.planCards article.selected {
  color: #fff;
  background: linear-gradient(145deg, #16081f, #721c8f 58%, #c0178e);
}

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

.planCards span {
  font-size: 1.45rem;
  font-weight: 1000;
}

.paymentNotice {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  color: #5c2b73;
  background: #f8eaff;
  font-weight: 850;
}

.paymentTable {
  display: grid;
  gap: 12px;
}

.paymentRow {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 120px 150px auto;
  gap: 14px;
  align-items: center;
}

.paymentRow div {
  display: grid;
  gap: 4px;
}

.paymentRow span {
  color: #617083;
  font-weight: 800;
}

.paymentRow button {
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  padding: 0 14px;
  color: #fff;
  background: linear-gradient(135deg, #7b2bd8, #c0178e);
  font-weight: 900;
}

@media (max-width: 980px) {
  .planCards,
  .paymentRow {
    grid-template-columns: 1fr;
  }
}
/* v40: cleaner SaaS-style panels for listing-fee model */
.panelBody {
  background:
    radial-gradient(circle at 18% 8%, rgba(192, 23, 142, .16), transparent 32%),
    linear-gradient(180deg, #f8f5fb 0%, #eef3f8 100%);
  color: #101827;
  font-family: "Inter Tight", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.sidebar {
  background: linear-gradient(180deg, #171229, #2a1038 58%, #13091f);
  border-right: 1px solid rgba(255,255,255,.08);
}

.sidebar nav a,
.agencyStatus {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.075);
  transition: transform .2s ease, background .2s ease;
}

.sidebar nav a:hover {
  transform: translateX(4px);
  background: rgba(255,255,255,.13);
}

.panelMain {
  padding: 34px;
}

.panelHeader,
.panelStats article,
.accountPanel,
.uploadPanel,
.livePanel,
.approvalPanel {
  border: 1px solid rgba(226, 215, 239, .95);
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 22px 72px rgba(16, 24, 39, .08);
}

.panelHeader {
  padding: 28px;
  background:
    linear-gradient(135deg, rgba(192, 23, 142, .12), rgba(108, 37, 215, .08)),
    rgba(255,255,255,.92);
}

.panelHeader h1 {
  max-width: 920px;
  font-size: clamp(2rem, 3.1vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -.03em;
}

.panelSubtext,
.formNote {
  color: #657086;
  line-height: 1.6;
}

.panelStats {
  gap: 14px;
}

.panelStats article {
  min-height: 112px;
  padding: 20px;
}

.panelStats article span,
.panelSectionHead .kicker,
.kicker {
  color: #8c187b;
}

.panelStats article strong {
  font-size: 1.65rem;
}

.accountPanel,
.uploadPanel,
.livePanel,
.approvalPanel {
  padding: 24px;
}

.formGrid {
  gap: 14px;
}

.formGrid label,
.uploadPanel > label,
.agencyAccountForm label,
.settingsPanel label,
.loginCard input {
  color: #506176;
  font-weight: 800;
}

.formGrid input,
.formGrid select,
.formGrid textarea,
.uploadPanel textarea,
.agencyAccountForm input,
.agencyAccountForm select,
.settingsPanel input,
.loginCard input,
.photoPreview {
  border: 1px solid #e2d7ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.uploadPanel button,
.agencyAccountForm button,
.settingsPanel button,
.approvalButtons button,
.modalActions button,
.loginCard button {
  border-radius: 999px;
  background: linear-gradient(135deg, #c0178e, #6c25d7);
  box-shadow: 0 14px 32px rgba(108, 37, 215, .18);
}

.approvalButtons .reject,
.softDanger {
  background: #fff !important;
  color: #a32964 !important;
  border: 1px solid #f0cfe4 !important;
  box-shadow: none !important;
}

.liveItem,
.approvalItem,
.agencyAccountItem,
.paymentRow {
  border: 1px solid #e8dff0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(16,24,39,.055);
}

.listingWithPhoto img {
  border-radius: 14px;
}

.status.live {
  background: #eaf8ef;
  color: #11703a;
}

.loginGate {
  background:
    linear-gradient(120deg, rgba(8,13,24,.72), rgba(75,18,84,.55)),
    url("uyguna-konakla-hero.png") center / cover no-repeat;
}

.loginCard {
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 28px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 34px 110px rgba(0,0,0,.24);
}

.modalCard {
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 10%, rgba(192,23,142,.16), transparent 30%),
    #fff;
}

@media (max-width: 980px) {
  .panelMain {
    padding: 18px;
  }

  .panelHeader h1 {
    font-size: clamp(1.7rem, 8vw, 2.4rem);
  }
}

.panelChoiceBody {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    linear-gradient(120deg, rgba(8,13,24,.72), rgba(75,18,84,.55)),
    url("uyguna-konakla-hero.png") center / cover no-repeat;
}

.panelChoice {
  width: min(920px, 100%);
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 32px;
  color: #fff;
  background: rgba(18, 16, 32, .62);
  backdrop-filter: blur(22px);
  box-shadow: 0 34px 120px rgba(0,0,0,.28);
}

.panelChoice .panelLogo {
  width: fit-content;
  margin-bottom: 18px;
}

.panelChoice .panelLogo img {
  width: 210px;
  height: 96px;
}

.panelChoice h1 {
  max-width: 680px;
  margin: 0 0 28px;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
}

.panelChoiceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.panelChoiceGrid a {
  min-height: 150px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 22px;
  background: rgba(255,255,255,.12);
  transition: transform .2s ease, background .2s ease;
}

.panelChoiceGrid a:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,.18);
}

.panelChoiceGrid strong {
  font-size: 1.25rem;
}

.panelChoiceGrid span {
  color: rgba(255,255,255,.76);
}

@media (max-width: 720px) {
  .panelChoiceGrid {
    grid-template-columns: 1fr;
  }
}
/* v43 professional panel and package system refresh */
:root {
  --uk-bg: #f7f4fb;
  --uk-panel: rgba(255, 255, 255, 0.9);
  --uk-ink: #10243a;
  --uk-muted: #667891;
  --uk-line: rgba(137, 76, 173, 0.18);
  --uk-purple: #8c1ed0;
  --uk-magenta: #c91493;
  --uk-deep: #230934;
  --uk-shadow: 0 24px 70px rgba(54, 23, 84, 0.12);
  --uk-radius: 28px;
}

.panelBody {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  background:
    radial-gradient(circle at 20% 10%, rgba(202, 20, 147, 0.16), transparent 32%),
    linear-gradient(135deg, #fbf7ff 0%, #f5f7fb 48%, #f6edf9 100%);
  color: var(--uk-ink);
  font-family: Inter, Arial, sans-serif;
  overflow-x: hidden;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 28px 22px;
  background: linear-gradient(180deg, #220730, #12071f);
  color: #fff;
  box-shadow: 22px 0 60px rgba(18, 7, 31, 0.18);
  z-index: 20;
}

.sidebar .panelLogo img {
  width: 180px;
  height: auto;
  object-fit: contain;
}

.sidebar nav {
  display: grid;
  gap: 10px;
  margin-top: 34px;
}

.sidebar nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.07);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.sidebar nav a:hover {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.2);
}

.agencyStatus {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 26px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.agencyStatus span,
.panelSubtext,
.formNote,
.listingMeta,
.notificationItem p {
  color: var(--uk-muted);
}

.agencyStatus strong {
  display: block;
  color: #fff;
  margin-top: 4px;
}

.panelMain {
  width: min(100%, 1540px);
  margin: 0 auto;
  padding: 34px 32px 56px;
}

.panelHeader {
  min-height: unset;
  padding: 34px 36px;
  border-radius: var(--uk-radius);
  border: 1px solid var(--uk-line);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.96), rgba(253, 246, 255, 0.88)),
    radial-gradient(circle at 4% 0%, rgba(140, 30, 208, 0.18), transparent 34%);
  box-shadow: var(--uk-shadow);
  overflow: hidden;
}

.panelHeader h1 {
  margin: 8px 0 8px;
  max-width: 920px;
  color: var(--uk-ink);
  font-size: clamp(32px, 3vw, 52px);
  line-height: 1.04;
  letter-spacing: 0;
}

.panelHeader.compact h1 {
  font-size: clamp(30px, 2.55vw, 46px);
}

.kicker {
  margin: 0 0 8px;
  color: #9b147e;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

.panelStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.panelStats article,
.accountPanel,
.uploadPanel,
.livePanel,
.approvalPanel {
  border: 1px solid var(--uk-line);
  border-radius: 24px;
  background: var(--uk-panel);
  box-shadow: 0 18px 54px rgba(54, 23, 84, 0.08);
  backdrop-filter: blur(18px);
}

.panelStats article {
  padding: 22px;
}

.panelStats span {
  display: block;
  color: var(--uk-muted);
  font-size: 14px;
  font-weight: 850;
}

.panelStats strong {
  display: block;
  margin-top: 10px;
  font-size: 32px;
  line-height: 1;
  color: var(--uk-ink);
}

.accountPanel,
.uploadPanel,
.livePanel,
.approvalPanel {
  padding: 28px;
  margin-bottom: 24px;
}

.panelSectionHead h2,
.uploadPanel h2,
.livePanel h2,
.approvalPanel h2 {
  margin: 0 0 10px;
  color: var(--uk-ink);
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.12;
}

.panelGrid {
  display: grid;
  grid-template-columns: minmax(420px, 0.95fr) minmax(520px, 1.05fr);
  gap: 22px;
  align-items: start;
}

.adminGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.agencyAccountForm.adminSettingsForm {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

label {
  display: grid;
  gap: 7px;
  color: #5e718a;
  font-weight: 850;
}

input,
select,
textarea {
  width: 100%;
  min-height: 52px;
  box-sizing: border-box;
  border: 1px solid rgba(105, 72, 133, 0.2);
  border-radius: 14px;
  background: #fff;
  color: var(--uk-ink);
  padding: 0 15px;
  font: 800 15px/1.35 Inter, Arial, sans-serif;
  outline: none;
}

textarea {
  min-height: 116px;
  padding-top: 14px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(140, 30, 208, 0.6);
  box-shadow: 0 0 0 4px rgba(140, 30, 208, 0.1);
}

button,
.buyPlan {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--uk-magenta), var(--uk-purple));
  color: #fff;
  min-height: 48px;
  padding: 0 22px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 16px 38px rgba(142, 30, 202, 0.22);
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

.planCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.planCards article {
  min-height: 154px;
  padding: 22px;
  border: 1px solid rgba(137, 76, 173, 0.2);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(250,246,255,0.84));
  box-shadow: 0 12px 34px rgba(54, 23, 84, 0.07);
}

.planCards article.selected {
  background: linear-gradient(135deg, #250a36, #9f168e 52%, #c81894);
  color: #fff;
}

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

.planCards strong {
  font-size: 17px;
}

.planCards span {
  margin: 10px 0 6px;
  font-size: 30px;
  font-weight: 950;
}

.planCards small {
  color: inherit;
  opacity: 0.78;
  font-weight: 800;
}

.planCards button {
  margin-top: 18px;
  background: #fff;
  color: #8f168b;
  box-shadow: none;
}

.paymentNotice,
.saveNotice {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(154, 33, 190, 0.08);
  color: #7d1778;
  font-weight: 850;
}

.approvalItem,
.liveItem,
.agencyAccountItem,
.notificationItem,
.paymentRow {
  display: grid;
  gap: 12px;
  padding: 16px;
  margin-top: 14px;
  border: 1px solid rgba(137, 76, 173, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.listingCardPanel {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.listingCardPanel img {
  width: 92px;
  height: 74px;
  border-radius: 14px;
  object-fit: cover;
  background: #f2edf8;
}

.listingCardPanel h3 {
  margin: 0 0 4px;
  color: var(--uk-ink);
  font-size: 18px;
  line-height: 1.15;
}

.statusPill,
.paymentStatus,
.notificationStatus {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(23, 171, 105, 0.12);
  color: #047849;
  font-weight: 900;
}

.itemActions,
.modalActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.itemActions button,
.modalActions button {
  min-height: 42px;
  padding: 0 16px;
}

.itemActions button:nth-child(2),
.modalActions button:nth-child(2) {
  background: #eef0f6;
  color: var(--uk-ink);
  box-shadow: none;
}

.loginGate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 100;
  background:
    linear-gradient(135deg, rgba(18, 7, 31, 0.76), rgba(151, 24, 139, 0.54)),
    url("uyguna-konakla-hero.png") center/cover;
}

.loginGate.hidden {
  display: none;
}

.loginCard {
  width: min(100%, 520px);
  padding: 34px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(24px);
}

.loginCard h1 {
  margin: 10px 0 22px;
  color: var(--uk-ink);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.07;
}

.loginLogo img {
  width: 190px;
}

.panelChoiceBody {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background:
    radial-gradient(circle at 75% 15%, rgba(202, 20, 147, 0.16), transparent 28%),
    linear-gradient(135deg, #190725, #f7f3fb 45%, #fff);
  font-family: Inter, Arial, sans-serif;
}

.panelChoice {
  width: min(100%, 1080px);
  padding: 34px;
  border-radius: 30px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(137, 76, 173, 0.18);
  box-shadow: var(--uk-shadow);
}

.panelChoice h1 {
  margin: 18px 0 8px;
  color: var(--uk-ink);
  font-size: clamp(34px, 5vw, 70px);
  line-height: 0.98;
}

.choiceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.choiceGrid a {
  display: block;
  min-height: 150px;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid var(--uk-line);
  color: var(--uk-ink);
  text-decoration: none;
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}

.choiceGrid a:hover {
  transform: translateY(-5px);
  box-shadow: var(--uk-shadow);
}

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

  .sidebar {
    position: relative;
    height: auto;
  }

  .agencyStatus {
    position: static;
    margin-top: 18px;
  }

  .panelStats,
  .planCards,
  .panelGrid,
  .adminGrid,
  .formGrid,
  .agencyAccountForm,
  .agencyAccountForm.adminSettingsForm,
  .choiceGrid {
    grid-template-columns: 1fr;
  }
}

/* v46 final compact panel headline pass */
.panelHeader {
  padding: 22px 24px !important;
}

.panelHeader h1,
.panelHeader.compact h1 {
  max-width: 880px !important;
  font-size: clamp(24px, 2vw, 30px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em !important;
}

body.panelBody .panelMain .panelHeader h1,
body.panelBody .panelMain .panelHeader.compact h1 {
  font-size: clamp(23px, 1.8vw, 28px) !important;
  line-height: 1.08 !important;
}

/* v47 compact card pass */
.panelStats article {
  min-height: 74px !important;
  padding: 13px 14px !important;
}

.panelStats strong {
  font-size: 23px !important;
}

.planCards article {
  min-height: 104px !important;
  padding: 14px !important;
}

.planCards span {
  font-size: 21px !important;
}

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

/* v43 modal hardening: keep dialogs above every panel layer */
.modalBackdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5000 !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  background:
    radial-gradient(circle at 45% 35%, rgba(201, 21, 146, 0.26), transparent 30%),
    rgba(18, 7, 31, 0.62) !important;
  backdrop-filter: blur(18px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.modalBackdrop.open,
.modalBackdrop[aria-hidden="false"] {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.modalCard {
  position: relative !important;
  z-index: 5001 !important;
  width: min(100%, 620px) !important;
  max-height: calc(100vh - 56px) !important;
  overflow: auto !important;
  padding: 34px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(252,245,255,0.94)) !important;
  box-shadow: 0 36px 100px rgba(10, 4, 20, 0.34) !important;
}

.modalCard h2 {
  margin: 14px 0 10px !important;
  color: var(--uk-ink) !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  line-height: 1.08 !important;
}

.modalCard p {
  width: auto !important;
  color: var(--uk-muted) !important;
  font-weight: 760 !important;
  line-height: 1.55 !important;
}

.modalIcon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #c91592, #8724d4) !important;
}

/* v45 panel visual reset: restore Inter Tight and move away from demo cards */
.panelBody,
.panelBody button,
.panelBody input,
.panelBody select,
.panelBody textarea,
.panelChoiceBody,
.panelChoiceBody button {
  font-family: "Inter Tight", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

.panelBody {
  background:
    radial-gradient(circle at 16% 0%, rgba(208, 24, 145, .15), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(121, 18, 214, .13), transparent 24%),
    linear-gradient(180deg, #f8f5fc 0%, #f3f5fa 100%) !important;
}

.sidebar {
  background:
    radial-gradient(circle at 35% 10%, rgba(208, 24, 145, .28), transparent 30%),
    linear-gradient(180deg, #171021, #0e121f) !important;
}

.panelHeader,
.accountPanel,
.uploadPanel,
.livePanel,
.approvalPanel,
.panelStats article {
  border-color: rgba(121, 18, 214, .14) !important;
  background: rgba(255,255,255,.86) !important;
  box-shadow: 0 22px 70px rgba(31, 16, 48, .10) !important;
}

.panelHeader {
  padding: 38px !important;
  background:
    linear-gradient(120deg, rgba(255,255,255,.93), rgba(249,244,255,.82)),
    radial-gradient(circle at 95% 0%, rgba(208, 24, 145, .17), transparent 34%) !important;
}

.panelHeader h1 {
  max-width: 980px !important;
  font-size: clamp(36px, 4vw, 66px) !important;
  line-height: .94 !important;
  letter-spacing: -0.035em !important;
}

.panelHeader.compact h1 {
  font-size: clamp(34px, 3.45vw, 58px) !important;
}

.panelStats strong {
  font-size: 38px !important;
  letter-spacing: -0.035em !important;
}

.planCards article,
.agencyAccountItem,
.approvalItem,
.liveItem,
.notificationItem,
.paymentRow {
  border-radius: 22px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(250,246,255,.82)) !important;
}

.planCards article.selected {
  background: linear-gradient(135deg, #171021, #7912d6 58%, #d01891) !important;
}

.listingCardPanel h3 {
  font-size: 22px !important;
  letter-spacing: -0.02em !important;
}

/* v46 compact operational panels */
.panelBody {
  grid-template-columns: 236px minmax(0, 1fr) !important;
  background: #f6f7fb !important;
}

.sidebar {
  padding: 20px 16px !important;
  background: linear-gradient(180deg, #111827, #1d1030) !important;
}

.sidebar .panelLogo img {
  width: 150px !important;
}

.sidebar nav {
  margin-top: 22px !important;
  gap: 8px !important;
}

.sidebar nav a {
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
}

.agencyStatus {
  left: 16px !important;
  right: 16px !important;
  bottom: 18px !important;
  padding: 14px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
}

.panelMain {
  width: min(100%, 1400px) !important;
  padding: 22px 24px 40px !important;
}

.panelHeader {
  padding: 24px !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 38px rgba(16,24,40,.06) !important;
}

.panelHeader h1,
.panelHeader.compact h1 {
  max-width: 880px !important;
  font-size: clamp(28px, 2.4vw, 40px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.025em !important;
}

.panelSubtext {
  max-width: 820px !important;
  font-size: 15px !important;
}

.panelStats {
  gap: 12px !important;
  margin: 16px 0 !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
}

.panelStats article {
  padding: 16px !important;
  border-radius: 16px !important;
}

.panelStats span {
  font-size: 12px !important;
}

.panelStats strong {
  margin-top: 6px !important;
  font-size: 26px !important;
}

.accountPanel,
.uploadPanel,
.livePanel,
.approvalPanel {
  padding: 20px !important;
  margin-bottom: 16px !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 38px rgba(16,24,40,.06) !important;
}

.panelSectionHead h2,
.uploadPanel h2,
.livePanel h2,
.approvalPanel h2 {
  font-size: clamp(22px, 1.8vw, 30px) !important;
  line-height: 1.08 !important;
}

.panelGrid {
  grid-template-columns: minmax(420px, .88fr) minmax(440px, 1.12fr) !important;
  gap: 16px !important;
}

.formGrid,
.agencyAccountForm {
  gap: 12px !important;
}

.agencyAccountForm.adminSettingsForm {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

label {
  gap: 6px !important;
  font-size: 13px !important;
}

input,
select,
textarea {
  min-height: 44px !important;
  border-radius: 12px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
}

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

button,
.buyPlan {
  min-height: 42px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
}

.planCards {
  gap: 12px !important;
  margin-top: 14px !important;
}

.planCards article {
  min-height: 128px !important;
  padding: 16px !important;
  border-radius: 16px !important;
}

.planCards span {
  margin: 8px 0 4px !important;
  font-size: 24px !important;
}

.paymentNotice,
.saveNotice {
  margin-top: 12px !important;
  padding: 11px 12px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
}

.approvalItem,
.liveItem,
.agencyAccountItem,
.notificationItem,
.paymentRow {
  margin-top: 10px !important;
  padding: 12px !important;
  border-radius: 14px !important;
  gap: 8px !important;
}

.listingCardPanel {
  grid-template-columns: 74px minmax(0, 1fr) !important;
  gap: 10px !important;
}

.listingCardPanel img {
  width: 74px !important;
  height: 58px !important;
  border-radius: 10px !important;
}

.listingCardPanel h3 {
  font-size: 17px !important;
}

.listingMeta,
.formNote,
.notificationItem p {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.statusPill,
.paymentStatus,
.notificationStatus {
  min-height: 26px !important;
  padding: 0 9px !important;
  font-size: 12px !important;
}

.loginCard {
  width: min(100%, 440px) !important;
  padding: 26px !important;
  border-radius: 22px !important;
}

.loginCard h1 {
  font-size: clamp(25px, 2.6vw, 34px) !important;
}

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

  .panelGrid,
  .adminGrid,
  .agencyAccountForm.adminSettingsForm {
    grid-template-columns: 1fr !important;
  }
}
/* v48 - panel redesign override */
:root {
  --panel-bg: #fbf8fd;
  --panel-ink: #121826;
  --panel-muted: #667085;
  --panel-line: #e8ddeb;
  --panel-purple: #714184;
  --panel-purple-dark: #261432;
  --panel-soft: #f4edf7;
  --panel-shadow: 0 18px 45px rgba(54, 37, 72, 0.09);
}

body.panelBody {
  display: grid !important;
  grid-template-columns: 236px 1fr !important;
  min-height: 100vh !important;
  background:
    radial-gradient(circle at top left, rgba(132, 72, 151, 0.1), transparent 30%),
    var(--panel-bg) !important;
  color: var(--panel-ink) !important;
  font-family: "Inter Tight", "Inter", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  overflow-x: hidden !important;
}

.sidebar {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  width: 236px !important;
  padding: 22px 18px !important;
  background: linear-gradient(180deg, #21112d, #351744) !important;
  color: #fff !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 12px 0 34px rgba(38, 20, 50, 0.1) !important;
}

.panelLogo.logoAsset,
.panelLogo.loginLogo.logoAsset {
  display: inline-flex !important;
  width: 150px !important;
  min-width: 150px !important;
  margin: 0 0 22px !important;
}

.panelLogo.logoAsset img,
.panelLogo.loginLogo.logoAsset img {
  display: block !important;
  width: 150px !important;
  height: auto !important;
  object-fit: contain !important;
}

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

.sidebar nav a {
  min-height: 40px !important;
  padding: 0 13px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  color: rgba(255, 255, 255, 0.82) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

.sidebar nav a:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

.agencyStatus {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 22px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.agencyStatus span {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 12px !important;
}

.agencyStatus strong {
  display: block !important;
  margin-top: 4px !important;
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}

.panelMain {
  width: 100% !important;
  max-width: 1360px !important;
  min-width: 0 !important;
  padding: 28px !important;
  margin: 0 auto !important;
}

.panelHeader.compact {
  min-height: 0 !important;
  padding: 26px !important;
  margin: 0 0 18px !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 238, 249, 0.9)),
    #fff !important;
  border: 1px solid var(--panel-line) !important;
  box-shadow: var(--panel-shadow) !important;
}

.panelHeader.compact h1 {
  max-width: 900px !important;
  color: var(--panel-ink) !important;
  font-size: clamp(24px, 2.2vw, 34px) !important;
  line-height: 1.08 !important;
  margin: 8px 0 !important;
  letter-spacing: 0 !important;
}

.panelSubtext,
.formNote,
.panelSectionHead p {
  max-width: 820px !important;
  color: var(--panel-muted) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.kicker,
.panelSectionHead .kicker {
  color: var(--panel-purple) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

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

.adminMode .panelStats {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.panelStats article {
  min-height: 84px !important;
  padding: 16px !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid var(--panel-line) !important;
  box-shadow: 0 10px 28px rgba(54, 37, 72, 0.05) !important;
}

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

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

.accountPanel,
.uploadPanel,
.livePanel,
.approvalPanel,
.paymentPanel,
.notificationPanel,
.settingsPanel {
  min-width: 0 !important;
  padding: 22px !important;
  margin: 0 0 18px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid var(--panel-line) !important;
  box-shadow: var(--panel-shadow) !important;
}

.panelSectionHead h2,
.uploadPanel h2,
.livePanel h2,
.approvalPanel h2 {
  color: var(--panel-ink) !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  margin: 6px 0 8px !important;
  letter-spacing: 0 !important;
}

.panelGrid,
.panelGrid.singleApproval,
.panelGrid.adminGrid {
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

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

label {
  min-width: 0 !important;
  color: #475467 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
}

input,
select,
textarea {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  margin-top: 5px !important;
  border: 1px solid #ddd2e5 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--panel-ink) !important;
  padding: 0 12px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  outline: 0 !important;
}

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

button,
.buyPlan,
#submitListingButton,
.modalActions button {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #75418a, #9b4bae) !important;
  color: #fff !important;
  padding: 0 16px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 12px 24px rgba(117, 65, 138, 0.18) !important;
}

.photoPreview,
.compactPreview {
  min-height: 96px !important;
  max-height: 190px !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  border: 1px dashed #d8c7e1 !important;
  background: var(--panel-soft) !important;
  display: grid !important;
  place-items: center !important;
  color: var(--panel-muted) !important;
  font-size: 13px !important;
}

.photoPreview img,
.compactPreview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

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

.planCards article {
  min-height: 126px !important;
  padding: 16px !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid var(--panel-line) !important;
  box-shadow: none !important;
}

.planCards article.selected {
  background: linear-gradient(135deg, #633276, #9d4aae) !important;
  color: #fff !important;
}

.planCards strong {
  font-size: 15px !important;
  line-height: 1.2 !important;
}

.planCards span {
  display: block !important;
  margin-top: 8px !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}

.planCards small {
  display: block !important;
  margin-top: 8px !important;
  color: inherit !important;
  opacity: 0.78 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.paymentNotice,
.saveNotice {
  margin-top: 12px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: var(--panel-soft) !important;
  color: #5e356f !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.liveList,
.approvalList,
.notificationList,
.agencyAccountList,
.paymentTable {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.listingRow,
.approvalCard,
.agencyAccountRow,
.notificationItem,
.paymentRow {
  min-width: 0 !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid var(--panel-line) !important;
  box-shadow: none !important;
}

.listingRow h3,
.approvalCard h3,
.agencyAccountRow h3 {
  font-size: 16px !important;
  line-height: 1.25 !important;
  margin: 0 0 6px !important;
  color: var(--panel-ink) !important;
}

.listingRow p,
.approvalCard p,
.agencyAccountRow p,
.notificationItem p,
.paymentRow p {
  color: var(--panel-muted) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.modalBackdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: none !important;
  place-items: center !important;
  padding: 24px !important;
  background: rgba(18, 16, 26, 0.56) !important;
  backdrop-filter: blur(12px) !important;
}

.modalBackdrop[aria-hidden="false"],
.modalBackdrop.open {
  display: grid !important;
}

.modalCard {
  width: min(620px, calc(100vw - 32px)) !important;
  max-height: min(760px, calc(100vh - 42px)) !important;
  overflow: auto !important;
  padding: 24px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid var(--panel-line) !important;
  box-shadow: 0 28px 90px rgba(10, 8, 15, 0.34) !important;
}

.modalIcon {
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #75418a, #9b4bae) !important;
  color: #fff !important;
  font-size: 24px !important;
}

.modalCard h2 {
  color: var(--panel-ink) !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
}

.modalCard p {
  color: var(--panel-muted) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.loginGate {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(137, 73, 158, 0.2), transparent 32%),
    linear-gradient(135deg, #fbf8fd, #f4edf7) !important;
}

.loginGate.hidden,
.loginGate[aria-hidden="true"] {
  display: none !important;
}

.loginCard {
  width: min(440px, calc(100vw - 32px)) !important;
  padding: 26px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid var(--panel-line) !important;
  box-shadow: 0 24px 70px rgba(54, 37, 72, 0.16) !important;
}

.loginCard h1 {
  color: var(--panel-ink) !important;
  font-size: 25px !important;
  line-height: 1.12 !important;
  margin: 6px 0 18px !important;
}

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

  .sidebar {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding: 14px !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .sidebar nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .agencyStatus {
    display: none !important;
  }

  .panelMain {
    padding: 18px !important;
  }

  .panelStats,
  .adminMode .panelStats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .panelGrid,
  .panelGrid.singleApproval,
  .panelGrid.adminGrid,
  .planCards {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .panelMain {
    padding: 12px !important;
  }

  .panelHeader.compact,
  .accountPanel,
  .uploadPanel,
  .livePanel,
  .approvalPanel {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .formGrid,
  .agencyAccountForm,
  .adminSettingsForm,
  .panelStats,
  .adminMode .panelStats {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    grid-template-columns: 1fr !important;
  }

  .sidebar nav {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* v56 final cascade lock - amber/white panels */
html body,
html body.panelBody,
html body.panelChoiceBody {
  background:
    radial-gradient(circle at 12% 8%, rgba(245, 158, 11, .18), transparent 28%),
    linear-gradient(180deg, #fffaf2 0%, #fff 48%, #fff7ed 100%) !important;
  color: #17130c !important;
}

html body .sidebar,
html body .panelSidebar {
  background: linear-gradient(180deg, #351704, #7c2d12 58%, #b45309) !important;
}

html body .panelHero,
html body .statCard,
html body .uploadPanel,
html body .livePanel,
html body .approvalPanel,
html body .settingsPanel,
html body .agencyAccountPanel,
html body .paymentPanel,
html body .notificationPanel,
html body .modalCard,
html body .panelChoiceGrid a,
html body .panelChoice,
html body .liveItem,
html body .approvalItem,
html body .agencyAccountItem,
html body .paymentRow,
html body .notificationItem {
  border-color: #f0dec7 !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 18px 56px rgba(120, 53, 15, .08) !important;
}

html body .panelHero {
  border-left: 6px solid #f59e0b !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,247,237,.94)) !important;
}

html body .kicker,
html body .statCard span,
html body .formNote,
html body .paymentNotice {
  color: #b45309 !important;
}

html body button,
html body .approve,
html body .buyPlan,
html body .submitButton,
html body .modalActions button {
  background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 30px rgba(234, 88, 12, .18) !important;
}

html body button.reject,
html body .reject,
html body .softDanger {
  background: #fff7ed !important;
  color: #9a3412 !important;
  border: 1px solid #fed7aa !important;
  box-shadow: none !important;
}

html body input,
html body select,
html body textarea {
  border-color: #f0dec7 !important;
  background: #fff !important;
}

html body input:focus,
html body select:focus,
html body textarea:focus {
  outline: 3px solid rgba(245, 158, 11, .18) !important;
  border-color: #f59e0b !important;
}


/* v57 EOF corporate lock */
html body, html body.panelBody, html body.panelChoiceBody { background: radial-gradient(circle at 12% 8%, rgba(191,160,104,.14), transparent 28%), linear-gradient(180deg,#f8fafc 0%,#fff 48%,#f5f7fa 100%) !important; color:#101828 !important; }
html body .sidebar, html body .panelSidebar { background:linear-gradient(180deg,#071526,#0f233e 58%,#243b5a) !important; }
html body .panelHero, html body .statCard, html body .uploadPanel, html body .livePanel, html body .approvalPanel, html body .settingsPanel, html body .agencyAccountPanel, html body .paymentPanel, html body .notificationPanel, html body .modalCard, html body .panelChoiceGrid a, html body .panelChoice, html body .liveItem, html body .approvalItem, html body .agencyAccountItem, html body .paymentRow, html body .notificationItem { border-color:#e4e8ef !important; background:rgba(255,255,255,.97) !important; box-shadow:0 18px 56px rgba(16,24,40,.08) !important; }
html body .panelHero { border-left-color:#bfa068 !important; background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(248,250,252,.96)) !important; }
html body .kicker, html body .statCard span, html body .formNote, html body .paymentNotice { color:#9a6b24 !important; }
html body button, html body .approve, html body .buyPlan, html body .submitButton, html body .modalActions button { background:linear-gradient(135deg,#0f233e,#1e3a5f) !important; color:#fff !important; box-shadow:0 14px 30px rgba(15,35,62,.18) !important; }
html body button.reject, html body .reject, html body .softDanger { background:#f8fafc !important; color:#0f233e !important; border-color:#d8dee8 !important; }
html body input, html body select, html body textarea { border-color:#d8dee8 !important; }
html body input:focus, html body select:focus, html body textarea:focus { outline:3px solid rgba(15,35,62,.12) !important; border-color:#1e3a5f !important; }

/* v57 EOF specificity fix */
html body .loginCard button, html body .panelBody button, html body .panelChoice button, html body .panelMain button, html body form button, html body .approve, html body .buyPlan, html body .submitButton, html body .modalActions button { background:linear-gradient(135deg,#0f233e,#1e3a5f) !important; color:#fff !important; box-shadow:0 14px 30px rgba(15,35,62,.18) !important; }
html body .loginCard .kicker, html body .panelMain .kicker, html body p.kicker, html body .statCard span, html body .formNote, html body .paymentNotice { color:#9a6b24 !important; }

/* v58 restrained corporate panel palette */
html body,
html body.panelBody,
html body.panelChoiceBody {
  background:
    radial-gradient(circle at 10% 0%, rgba(191, 160, 104, .10), transparent 28%),
    radial-gradient(circle at 92% 6%, rgba(23, 96, 107, .08), transparent 30%),
    linear-gradient(180deg, #fbfcfe 0%, #ffffff 48%, #f5f7fb 100%) !important;
  color: #111827 !important;
}

html body .sidebar,
html body .panelSidebar {
  background: linear-gradient(180deg, #071526, #123047 58%, #17606b) !important;
}

html body .panelHero,
html body .statCard,
html body .uploadPanel,
html body .livePanel,
html body .approvalPanel,
html body .settingsPanel,
html body .agencyAccountPanel,
html body .paymentPanel,
html body .notificationPanel,
html body .modalCard,
html body .panelChoiceGrid a,
html body .panelChoice,
html body .liveItem,
html body .approvalItem,
html body .agencyAccountItem,
html body .paymentRow,
html body .notificationItem {
  border-color: #e5e9f0 !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 18px 54px rgba(17, 24, 39, .07) !important;
}

html body .panelHero {
  border-left-color: #17606b !important;
  background:
    radial-gradient(circle at 94% 12%, rgba(23, 96, 107, .09), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(248,250,252,.96)) !important;
}

html body .kicker,
html body .loginCard .kicker,
html body .panelMain .kicker,
html body p.kicker,
html body .statCard span,
html body .formNote,
html body .paymentNotice {
  color: #9a6b24 !important;
}

html body button,
html body .loginCard button,
html body .panelBody button,
html body .panelChoice button,
html body .panelMain button,
html body form button,
html body .approve,
html body .buyPlan,
html body .submitButton,
html body .modalActions button {
  background: linear-gradient(135deg, #123047, #17606b) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 30px rgba(18, 48, 71, .18) !important;
}

html body button.reject,
html body .reject,
html body .softDanger {
  background: #f8fafc !important;
  color: #123047 !important;
  border: 1px solid #d8dee8 !important;
  box-shadow: none !important;
}

html body input,
html body select,
html body textarea {
  border-color: #d8dee8 !important;
  background: #fff !important;
  color: #111827 !important;
}

html body input:focus,
html body select:focus,
html body textarea:focus {
  outline: 3px solid rgba(23, 96, 107, .14) !important;
  border-color: #17606b !important;
}

/* v61 panel redesign: compact corporate SaaS */
html body.panelBody {
  --panel-bg: #f5f7fb;
  --panel-ink: #101522;
  --panel-muted: #667085;
  --panel-line: #dfe7ef;
  --panel-primary: #0d3443;
  --panel-primary-2: #176b73;
  --panel-accent: #bd9144;
  background:
    radial-gradient(circle at 12% 0%, rgba(23,107,115,.10), transparent 30%),
    linear-gradient(180deg, #f8fafc, var(--panel-bg)) !important;
  color: var(--panel-ink) !important;
}

html body.panelBody .panelSidebar {
  background: linear-gradient(180deg, #071927, #0d3443) !important;
  border-right: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 18px 0 54px rgba(15, 35, 62, .16) !important;
}

html body.panelBody .panelMain {
  padding: 28px !important;
}

html body.panelBody .panelHero {
  min-height: auto !important;
  padding: 28px !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 88% 18%, rgba(189,145,68,.14), transparent 24%),
    linear-gradient(135deg, #ffffff, #f7fbfc) !important;
  border: 1px solid var(--panel-line) !important;
  box-shadow: 0 20px 58px rgba(16, 21, 34, .07) !important;
}

html body.panelBody .panelHero h1 {
  max-width: 920px !important;
  font-size: clamp(30px, 3.2vw, 48px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  color: var(--panel-ink) !important;
}

html body.panelBody .panelHero p,
html body.panelBody .uploadPanel p,
html body.panelBody .livePanel p,
html body.panelBody .approvalPanel p,
html body.panelBody .paymentPanel p,
html body.panelBody .notificationPanel p,
html body.panelBody .settingsPanel p {
  color: var(--panel-muted) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

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

html body.panelBody .statCard,
html body.panelBody .uploadPanel,
html body.panelBody .livePanel,
html body.panelBody .approvalPanel,
html body.panelBody .settingsPanel,
html body.panelBody .agencyAccountPanel,
html body.panelBody .paymentPanel,
html body.panelBody .notificationPanel,
html body.panelBody .modalCard {
  border: 1px solid var(--panel-line) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 18px 48px rgba(16, 21, 34, .06) !important;
}

html body.panelBody .statCard {
  min-height: 96px !important;
  padding: 18px !important;
}

html body.panelBody .statCard span {
  color: var(--panel-muted) !important;
  font-size: 13px !important;
}

html body.panelBody .statCard strong {
  color: var(--panel-primary) !important;
  font-size: 28px !important;
}

html body.panelBody .panelGrid,
html body.panelBody .panelGrid.adminGrid {
  display: grid !important;
  grid-template-columns: minmax(380px, .86fr) minmax(460px, 1.14fr) !important;
  gap: 18px !important;
}

html body.panelBody .uploadPanel,
html body.panelBody .livePanel,
html body.panelBody .approvalPanel,
html body.panelBody .settingsPanel,
html body.panelBody .agencyAccountPanel,
html body.panelBody .paymentPanel,
html body.panelBody .notificationPanel {
  padding: 24px !important;
}

html body.panelBody .uploadPanel h2,
html body.panelBody .livePanel h2,
html body.panelBody .approvalPanel h2,
html body.panelBody .settingsPanel h2,
html body.panelBody .agencyAccountPanel h2,
html body.panelBody .paymentPanel h2,
html body.panelBody .notificationPanel h2 {
  font-size: 24px !important;
  line-height: 1.12 !important;
  color: var(--panel-ink) !important;
}

html body.panelBody input,
html body.panelBody select,
html body.panelBody textarea {
  min-height: 48px !important;
  border-radius: 14px !important;
  border: 1px solid var(--panel-line) !important;
  background: #fff !important;
  font-size: 15px !important;
  color: var(--panel-ink) !important;
}

html body.panelBody textarea {
  min-height: 112px !important;
}

html body.panelBody button,
html body.panelBody .submitButton,
html body.panelBody .buyPlan,
html body.panelBody .approve,
html body.panelBody .modalActions button,
html body.panelBody .agencyAccountForm button {
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--panel-primary), var(--panel-primary-2)) !important;
  box-shadow: 0 14px 32px rgba(13,52,67,.18) !important;
  transition: transform .24s ease, box-shadow .24s ease !important;
}

html body.panelBody button:hover,
html body.panelBody .submitButton:hover,
html body.panelBody .buyPlan:hover,
html body.panelBody .approve:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 40px rgba(13,52,67,.24) !important;
}

html body.panelBody .liveItem,
html body.panelBody .approvalItem,
html body.panelBody .agencyAccountItem,
html body.panelBody .agencyAccountRow,
html body.panelBody .paymentRow,
html body.panelBody .notificationItem {
  border-radius: 18px !important;
  border: 1px solid var(--panel-line) !important;
  background: linear-gradient(180deg, #fff, #f9fbfd) !important;
  box-shadow: 0 12px 36px rgba(16,21,34,.05) !important;
}

html body.panelBody .loginGate {
  background:
    radial-gradient(circle at 74% 16%, rgba(189,145,68,.18), transparent 25%),
    linear-gradient(135deg, #071927, #0d3443 55%, #176b73) !important;
}

html body.panelBody .loginCard {
  width: min(440px, calc(100vw - 32px)) !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.28) !important;
}

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

html body.panelBody .panelMain > *,
html body.panelBody .loginCard {
  animation: panelRise .72s cubic-bezier(.16,1,.3,1) both !important;
}

html body.panelBody .panelMain > *:nth-child(2) { animation-delay: 70ms !important; }
html body.panelBody .panelMain > *:nth-child(3) { animation-delay: 140ms !important; }
html body.panelBody .panelMain > *:nth-child(4) { animation-delay: 210ms !important; }

@keyframes panelRise {
  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (max-width: 1180px) {
  html body.panelBody .panelStats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.panelBody .panelGrid,
  html body.panelBody .panelGrid.adminGrid {
    grid-template-columns: 1fr !important;
  }
}