/* Keystone Seller frontend polish — iOS-inspired liquid glass */
:root {
  --ks-glass: rgba(255, 255, 255, .62);
  --ks-glass-strong: rgba(255, 255, 255, .78);
  --ks-glass-soft: rgba(244, 248, 255, .48);
  --ks-glass-border: rgba(255, 255, 255, .82);
  --ks-glass-edge: rgba(49, 84, 150, .16);
  --ks-glass-shadow: 0 24px 70px rgba(38, 62, 108, .15), inset 0 1px 0 rgba(255, 255, 255, .88);
  --ks-glass-shadow-soft: 0 14px 40px rgba(38, 62, 108, .11), inset 0 1px 0 rgba(255, 255, 255, .72);
  --ks-glass-blur: blur(24px) saturate(155%);
  --ks-glass-text: #13213a;
  --ks-glass-muted: #52627c;
  --ks-glass-accent: #4f46e5;
  --ks-glass-accent-soft: rgba(79, 70, 229, .12);
}
html[data-theme="dark"] {
  --ks-glass: rgba(11, 20, 38, .58);
  --ks-glass-strong: rgba(15, 25, 47, .78);
  --ks-glass-soft: rgba(21, 34, 61, .44);
  --ks-glass-border: rgba(178, 204, 255, .18);
  --ks-glass-edge: rgba(130, 164, 234, .18);
  --ks-glass-shadow: 0 26px 74px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .09);
  --ks-glass-shadow-soft: 0 16px 42px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .07);
  --ks-glass-text: #f4f7ff;
  --ks-glass-muted: #aab8d0;
  --ks-glass-accent: #9b9cff;
  --ks-glass-accent-soft: rgba(129, 140, 248, .16);
}
.glass-surface,
.glass-panel,
.feature-card,
.step-card,
.template-shelf,
.tpl-card,
.django-rail-card,
.review-card,
.faq-item,
.ad-request-head,
.ad-channel,
.ad-request-form,
.ad-history {
  position: relative;
  isolation: isolate;
  background: linear-gradient(145deg, var(--ks-glass-strong), var(--ks-glass-soft)) !important;
  border: 1px solid var(--ks-glass-border) !important;
  box-shadow: var(--ks-glass-shadow-soft) !important;
  -webkit-backdrop-filter: var(--ks-glass-blur);
  backdrop-filter: var(--ks-glass-blur);
}
.glass-surface::before,
.glass-panel::before,
.feature-card::before,
.step-card::before,
.template-shelf::before,
.ad-request-head::before,
.ad-request-form::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.28), transparent 38%, rgba(125,211,252,.06) 72%, rgba(255,255,255,.12));
}
html[data-theme="dark"] .glass-surface::before,
html[data-theme="dark"] .glass-panel::before,
html[data-theme="dark"] .feature-card::before,
html[data-theme="dark"] .step-card::before,
html[data-theme="dark"] .template-shelf::before,
html[data-theme="dark"] .ad-request-head::before,
html[data-theme="dark"] .ad-request-form::before {
  background: linear-gradient(135deg, rgba(255,255,255,.09), transparent 40%, rgba(99,102,241,.07));
}
.hero-modern .glass-panel {
  overflow: visible;
  background: linear-gradient(145deg, rgba(255,255,255,.68), rgba(220,235,255,.38)) !important;
  box-shadow: 0 34px 90px rgba(50, 75, 140, .2), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
html[data-theme="dark"] .hero-modern .glass-panel {
  background: linear-gradient(145deg, rgba(19,31,57,.66), rgba(8,17,34,.46)) !important;
}
.hero-modern .growth-launch-card,
.hero-modern .mini-card.hero-insight-card,
.hero-modern .float-chip {
  background: linear-gradient(145deg, var(--ks-glass-strong), var(--ks-glass-soft)) !important;
  border: 1px solid var(--ks-glass-border) !important;
  box-shadow: var(--ks-glass-shadow-soft) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.hero-modern .growth-launch-logo,
.hero-modern .hero-insight-icon,
.hero-modern .growth-preview-icon,
.hero-modern .float-chip .ic {
  width: 46px !important;
  height: 46px !important;
  flex-basis: 46px !important;
  border-radius: 14px !important;
  font-size: 18px !important;
}
.hero-modern .growth-launch-logo .ks-local-icon,
.hero-modern .hero-insight-icon .ks-local-icon { width: 23px !important; height: 23px !important; }
.hero-modern .mini-card.hero-insight-card { min-height: 92px; height: auto; }
.hero-modern .growth-live-badge {
  color: #0b6b43 !important;
  background: rgba(16, 185, 129, .14) !important;
  border: 1px solid rgba(5, 150, 105, .25) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
html[data-theme="dark"] .hero-modern .growth-live-badge {
  color: #86efac !important;
  background: rgba(16, 185, 129, .12) !important;
  border-color: rgba(110, 231, 183, .22) !important;
}
.hero-modern .hero-insight-copy strong,
.hero-modern .growth-launch-title strong,
.hero-modern .growth-preview-copy strong { color: var(--ks-glass-text) !important; }
.hero-modern .hero-insight-copy span,
.hero-modern .growth-launch-title span,
.hero-modern .growth-preview-copy span { color: var(--ks-glass-muted) !important; }
.domain-marquee,
.domain-marquee * { pointer-events: none !important; user-select: none; }
.domain-marquee .item { cursor: default; }
.domain-marquee .item i {
  display: inline-grid;
  place-items: center;
  line-height: 1;
  transform: translateY(1px);
}
.template-shelf { padding: clamp(20px, 3vw, 34px); border-radius: 30px; overflow: hidden; }
.template-shelf + .template-shelf { margin-top: 28px; }
.django-placeholder {
  display: grid !important;
  place-items: center;
  align-content: center;
  gap: 8px;
  background:
    radial-gradient(circle at 25% 20%, rgba(129,140,248,.28), transparent 42%),
    linear-gradient(145deg, rgba(30,64,175,.12), rgba(14,165,233,.08)) !important;
}
.django-placeholder .ks-local-icon { width: 46px; height: 46px; color: #4f46e5; }
.django-placeholder small { color: var(--ks-glass-muted) !important; }
.django-runtime-chip { background: rgba(15, 118, 110, .84) !important; color: #fff !important; }
.feature-card,
.step-card { border-radius: 24px !important; overflow: hidden; }
.feature-card .feature-icon,
.step-card .step-icon { transform: scale(.88); transform-origin: center; }
.experience-hero-section { padding-block: 56px !important; }
.experience-hero-section .container {
  border-radius: 34px;
  padding: clamp(24px, 4vw, 48px);
  background: linear-gradient(145deg, var(--ks-glass), var(--ks-glass-soft));
  border: 1px solid var(--ks-glass-border);
  box-shadow: var(--ks-glass-shadow);
  -webkit-backdrop-filter: var(--ks-glass-blur);
  backdrop-filter: var(--ks-glass-blur);
}
.experience-hero-grid { min-height: 390px !important; gap: clamp(28px, 5vw, 70px) !important; }
.experience-hero-copy h2 { font-size: clamp(1.75rem, 3.4vw, 3rem) !important; }
.experience-hero-copy > p:not(.experience-lead) { display: none; }
.experience-hero-visual { min-height: 330px !important; height: 330px !important; }
.city-platform { transform: scale(.88); transform-origin: center bottom; }
.arcade-cabinet { transform: scale(.86); transform-origin: center; }
.visual-float-card {
  background: var(--ks-glass-strong) !important;
  border: 1px solid var(--ks-glass-border) !important;
  box-shadow: var(--ks-glass-shadow-soft) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.advertising-ecosystem { padding-block: 64px; }
.advertising-glass {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
  overflow: hidden;
  padding: clamp(28px, 5vw, 58px);
  border-radius: 34px;
}
.advertising-copy h2 { margin: 14px 0 12px; color: var(--ks-glass-text); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 950; }
.advertising-copy p { max-width: 650px; margin: 0 0 22px; color: var(--ks-glass-muted); line-height: 2; }
.advertising-channels { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.advertising-channels span {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 999px;
  color: var(--ks-glass-text); background: var(--ks-glass-soft); border: 1px solid var(--ks-glass-border);
}
.advertising-preview { position: relative; min-height: 300px; display: grid; place-items: center; }
.advertising-preview::before,
.advertising-preview::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(2px);
}
.advertising-preview::before { width: 250px; height: 250px; background: rgba(99,102,241,.2); }
.advertising-preview::after { width: 160px; height: 160px; transform: translate(90px,-70px); background: rgba(14,165,233,.18); }
.ad-preview-window {
  position: relative; z-index: 1; width: min(100%, 390px); padding: 28px; border-radius: 26px;
  color: var(--ks-glass-text); background: linear-gradient(145deg, var(--ks-glass-strong), var(--ks-glass-soft));
  border: 1px solid var(--ks-glass-border); box-shadow: var(--ks-glass-shadow);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
}
.ad-preview-label { display: inline-flex; padding: 7px 10px; border-radius: 999px; color: #fff; background: linear-gradient(135deg,#4f46e5,#0284c7); font-size: .74rem; font-weight: 850; }
.ad-preview-window strong { display: block; margin: 20px 0 26px; font-size: 1.45rem; line-height: 1.7; }
.ad-preview-route { display: flex; align-items: center; gap: 9px; color: var(--ks-glass-accent); }
.ad-preview-route i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: var(--ks-glass-accent-soft); }
.ad-preview-route span { flex: 1; height: 1px; background: linear-gradient(90deg,transparent,var(--ks-glass-accent),transparent); }

/* Advertising request */
.ad-request-page {
  background:
    radial-gradient(700px 420px at 8% 8%, rgba(99,102,241,.13), transparent 70%),
    radial-gradient(620px 380px at 92% 35%, rgba(14,165,233,.1), transparent 68%);
}
.ad-request-shell { max-width: 1040px !important; gap: 16px !important; }
.ad-request-head,.ad-request-form,.ad-history { border-radius: 26px !important; }
.ad-channel-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.ad-channel { min-width: 0; border-radius: 20px !important; padding: 16px !important; }
.ad-channel-icon { flex: 0 0 auto; }
.ad-request-form { padding: clamp(18px,3vw,30px) !important; }
.ad-field input,
.ad-field textarea,
.ad-field select {
  width: 100%;
  color: var(--ks-glass-text) !important;
  background: rgba(255,255,255,.52) !important;
  border: 1px solid var(--ks-glass-edge) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
html[data-theme="dark"] .ad-field input,
html[data-theme="dark"] .ad-field textarea,
html[data-theme="dark"] .ad-field select {
  color: #f8fafc !important;
  background: rgba(8,17,34,.62) !important;
  border-color: rgba(148,163,184,.28) !important;
  color-scheme: dark;
}
.ad-field input::placeholder,
.ad-field textarea::placeholder { color: var(--ks-glass-muted); opacity: .82; }
.ad-field input:focus,
.ad-field textarea:focus,
.ad-field select:focus {
  border-color: rgba(99,102,241,.75) !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,.13) !important;
}
.ad-image-picker { color: var(--ks-glass-text) !important; background: var(--ks-glass-soft) !important; border-color: var(--ks-glass-edge) !important; }

/* Customer dashboard */
.dashboard-overview { display: grid; gap: 18px; color: var(--ks-glass-text); }
.dashboard-welcome {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(22px,4vw,38px); border-radius: 28px;
}
.dashboard-kicker,.dashboard-section-kicker {
  display: block; margin-bottom: 6px; color: var(--ks-glass-accent); font-size: .75rem; font-weight: 900; letter-spacing: .02em;
}
.dashboard-welcome h1 { margin: 0; color: var(--ks-glass-text); font-size: clamp(1.65rem,3vw,2.45rem); font-weight: 950; }
.dashboard-welcome p { margin: 8px 0 0; color: var(--ks-glass-muted); line-height: 1.85; }
.dashboard-command-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.dashboard-metric { display: flex; align-items: center; gap: 14px; min-height: 106px; padding: 18px; border-radius: 22px; }
.dashboard-metric-icon {
  width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 46px;
  color: var(--ks-glass-accent); background: var(--ks-glass-accent-soft); border-radius: 15px;
}
.dashboard-metric strong { display: block; color: var(--ks-glass-text); font-size: 1.38rem; font-weight: 950; }
.dashboard-metric span:last-child { color: var(--ks-glass-muted); font-size: .78rem; }
.dashboard-quick-actions {
  display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; padding: 10px; border-radius: 24px;
}
.dashboard-quick-actions a {
  min-height: 86px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 12px 8px;
  color: var(--ks-glass-muted); border-radius: 17px; text-align: center; text-decoration: none;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.dashboard-quick-actions a i { color: var(--ks-glass-accent); font-size: 1.15rem; }
.dashboard-quick-actions a span { font-size: .72rem; font-weight: 800; }
.dashboard-quick-actions a:hover { color: var(--ks-glass-text); background: var(--ks-glass-accent-soft); transform: translateY(-2px); }
.dashboard-content-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.dashboard-panel { min-width: 0; padding: 22px; border-radius: 26px; }
.dashboard-panel-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 14px; }
.dashboard-panel-head h2 { margin: 0; color: var(--ks-glass-text); font-size: 1.05rem; font-weight: 950; }
.dashboard-panel-head > a { color: var(--ks-glass-accent); font-size: .74rem; font-weight: 850; text-decoration: none; }
.dashboard-item-list { display: grid; gap: 7px; }
.dashboard-list-item {
  display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 11px; align-items: center;
  min-width: 0; padding: 9px; border-radius: 16px; background: rgba(255,255,255,.24); border: 1px solid transparent;
}
html[data-theme="dark"] .dashboard-list-item { background: rgba(5,12,25,.24); }
.dashboard-list-item:hover { border-color: var(--ks-glass-edge); }
.dashboard-item-thumb { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; color: var(--ks-glass-accent); background: var(--ks-glass-accent-soft); }
.dashboard-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dashboard-item-copy { min-width: 0; }
.dashboard-item-copy h3 { margin: 0 0 3px; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-item-copy h3 a { color: var(--ks-glass-text); text-decoration: none; }
.dashboard-item-copy span { color: var(--ks-glass-muted); font-size: .7rem; }
.dashboard-list-item form { margin: 0; }
.dashboard-icon-button {
  width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border-radius: 12px;
  color: var(--ks-glass-accent); background: var(--ks-glass-accent-soft); border: 0; text-decoration: none; cursor: pointer;
}
.dashboard-icon-button--danger { color: #dc2626; background: rgba(239,68,68,.1); }
.dashboard-empty { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 92px; padding: 14px; border-radius: 16px; background: var(--ks-glass-soft); }
.dashboard-empty > i { color: var(--ks-glass-accent); font-size: 1.2rem; }
.dashboard-empty strong,.dashboard-empty span { display: block; }
.dashboard-empty strong { color: var(--ks-glass-text); font-size: .8rem; }
.dashboard-empty span { margin-top: 3px; color: var(--ks-glass-muted); font-size: .7rem; }
.dashboard-account-strip {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) auto; gap: 16px; align-items: center;
  padding: 18px 20px; border-radius: 22px;
}
.dashboard-account-strip span,.dashboard-account-strip strong { display: block; }
.dashboard-account-strip span { color: var(--ks-glass-muted); font-size: .68rem; }
.dashboard-account-strip strong { margin-top: 3px; color: var(--ks-glass-text); font-size: .78rem; overflow-wrap: anywhere; }

:where(a,button,input,textarea,select):focus-visible {
  outline: 3px solid rgba(99,102,241,.45) !important;
  outline-offset: 3px;
}
@media (max-width: 900px) {
  .advertising-glass,.dashboard-content-grid { grid-template-columns: 1fr; }
  .advertising-preview { min-height: 240px; }
  .dashboard-quick-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ad-channel-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .experience-hero-section { padding-block: 30px !important; }
  .experience-hero-section .container { border-radius: 24px; padding: 22px 16px; }
  .experience-hero-grid { min-height: 0 !important; }
  .experience-hero-visual { min-height: 270px !important; height: 270px !important; }
  .advertising-glass { padding: 24px 18px; border-radius: 24px; }
  .dashboard-welcome { align-items: flex-start; flex-direction: column; border-radius: 22px; }
  .dashboard-command-grid { grid-template-columns: 1fr; }
  .dashboard-metric { min-height: 86px; }
  .dashboard-quick-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-panel { padding: 16px; border-radius: 22px; }
  .dashboard-empty { grid-template-columns: auto 1fr; }
  .dashboard-empty .ks-btn { grid-column: 1 / -1; }
  .dashboard-account-strip { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-quick-actions a,
  .feature-card,
  .step-card,
  .float-chip,
  .visual-float-card { animation: none !important; transition-duration: .01ms !important; transform: none !important; }
}

/* Final-layer overrides for higher-specificity legacy hero surfaces. */
html[data-theme="dark"] .hero-modern .hero-visual .glass-panel {
  background: linear-gradient(145deg, rgba(19,31,57,.68), rgba(8,17,34,.50)) !important;
  border-color: rgba(178,204,255,.18) !important;
  box-shadow: 0 34px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.09) !important;
}
html[data-theme="dark"] .hero-modern .hero-visual .hero-insight-card,
html[data-theme="dark"] .hero-modern .hero-visual .float-chip {
  background: linear-gradient(145deg, rgba(22,35,62,.70), rgba(10,20,38,.52)) !important;
  border-color: rgba(178,204,255,.18) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.city-hero-visual .visual-float-card,
.city-hero-visual .visual-float-card i {
  color: #16324f !important;
}
.arcade-hero-visual .visual-float-card,
.arcade-hero-visual .visual-float-card i {
  color: #43206b !important;
}
html[data-theme="dark"] .city-hero-visual .visual-float-card,
html[data-theme="dark"] .city-hero-visual .visual-float-card i {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .arcade-hero-visual .visual-float-card,
html[data-theme="dark"] .arcade-hero-visual .visual-float-card i {
  color: #f3e8ff !important;
}

/* Full-width editorial sections; feature and process sections keep their reading width. */
@media (min-width: 992px) {
  .template-shelves-section > .container,
  .city-hero-section > .container,
  .arcade-hero-section > .container,
  .advertising-ecosystem > .container {
    width: calc(100% - clamp(32px, 4vw, 88px));
    max-width: none;
  }
}
.advertising-ecosystem > .container {
  border-radius: 34px;
  background: linear-gradient(145deg, var(--ks-glass), var(--ks-glass-soft));
  border: 1px solid var(--ks-glass-border);
  box-shadow: var(--ks-glass-shadow);
  -webkit-backdrop-filter: var(--ks-glass-blur);
  backdrop-filter: var(--ks-glass-blur);
}
.advertising-glass {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.hero-modern .mini-card.hero-insight-card,
.hero-modern .float-chip {
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.hero-modern .mini-card.hero-insight-card:hover,
.hero-modern .float-chip:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: rgba(99, 160, 255, .55) !important;
  box-shadow: 0 20px 45px rgba(38, 76, 150, .22), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
@media (max-width: 680px) {
  .advertising-ecosystem > .container { border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-modern .mini-card.hero-insight-card:hover,
  .hero-modern .float-chip:hover { transform: none; }
}