:root {
  --ink: #17223a;
  --soft-ink: #43536f;
  --muted: #75839a;
  --line: #dbe4f0;
  --paper: #f7faff;
  --panel: #ffffff;
  --nav: #ffffff;
  --teal: #1f63d6;
  --teal-deep: #0f3f95;
  --blue: #1f63d6;
  --amber: #f08a24;
  --amber-soft: #fff4e8;
  --bad: #b42318;
  --good: #157347;
  --shadow: 0 18px 48px rgba(31, 99, 214, 0.10);
  --neo-shadow: 12px 12px 28px rgba(133, 158, 194, 0.18), -12px -12px 28px rgba(255, 255, 255, 0.95);
  --neo-shadow-soft: 8px 8px 18px rgba(133, 158, 194, 0.12), -8px -8px 18px rgba(255, 255, 255, 0.92);
  --neo-inset: inset 5px 5px 14px rgba(133, 158, 194, 0.13), inset -5px -5px 14px rgba(255, 255, 255, 0.96);
  --surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.94));
  --transition-smooth: 280ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-float: 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.topbar-row {
  width: auto;
  display: contents;
}

.topbar-menu {
  width: auto;
  display: contents;
  min-width: 0;
}

.nav-toggle {
  display: none;
  min-height: 42px;
  padding: 9px 14px;
  color: var(--teal-deep);
  background: #f5f9ff;
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-weight: 800;
}

.editor-upload-status {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.editor-upload-status[data-state="loading"] {
  color: var(--teal-deep);
}

.editor-upload-status[data-state="ready"] {
  color: var(--good);
}

.editor-upload-status[data-state="error"] {
  color: var(--bad);
}

.guide-page {
  display: grid;
  gap: 22px;
}

.guide-intro-rich {
  padding: 24px 26px;
}

.guide-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 28px;
}

.guide-hero h1 {
  margin: 0;
}

.guide-hero .lead {
  margin-bottom: 0;
  max-width: 760px;
}

.guide-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

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

.guide-quick-grid article,
.guide-accordion {
  padding: 22px;
}

.guide-quick-grid p {
  margin-bottom: 0;
}

.guide-accordion-stack {
  display: grid;
  gap: 16px;
}

.guide-accordion {
  overflow: hidden;
  transition: border-color 240ms ease, box-shadow 280ms ease, transform 240ms ease;
}

.guide-accordion:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(31, 99, 214, 0.12);
}

.guide-accordion.is-open {
  border-color: rgba(31, 99, 214, 0.28);
  box-shadow: 0 22px 42px rgba(31, 99, 214, 0.14);
}

.guide-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.guide-accordion-heading,
.guide-accordion-meta,
.guide-accordion-heading strong,
.guide-accordion-heading small,
.guide-accordion-count {
  display: block;
}

.guide-accordion-heading {
  min-width: 0;
}

.guide-accordion-heading small,
.guide-accordion-count,
.guide-video-copy span {
  color: var(--muted);
}

.guide-accordion-meta {
  display: grid;
  justify-items: end;
  gap: 10px;
  flex: 0 0 auto;
}

.guide-accordion-hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
  color: var(--teal-deep);
  background: linear-gradient(135deg, rgba(31, 99, 214, 0.08), rgba(240, 138, 36, 0.12));
  border: 1px solid rgba(31, 99, 214, 0.18);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.guide-accordion-icon {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(31, 99, 214, 0.16);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.guide-accordion-icon::before,
.guide-accordion-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.guide-accordion-icon::after {
  width: 2px;
  height: 10px;
}

.guide-accordion.is-open .guide-accordion-icon {
  transform: rotate(180deg);
}

.guide-accordion.is-open .guide-accordion-icon::after {
  opacity: 0;
}

.guide-accordion-panel {
  overflow: hidden;
  height: auto;
  opacity: 1;
  transition: height 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms ease;
}

.guide-accordion-body {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.guide-video-card {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.guide-video-frame {
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, #eaf2ff, #fdf4ea);
  aspect-ratio: 16 / 9;
}

.guide-video-frame iframe,
.guide-video-placeholder {
  width: 100%;
  height: 100%;
  border: 0;
}

.guide-video-placeholder {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 18px;
  text-align: center;
  color: var(--soft-ink);
}

.guide-video-copy {
  display: grid;
  align-content: center;
  gap: 8px;
}

.guide-accordion.is-open .guide-video-card {
  animation: guide-card-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.guide-accordion.is-open .guide-video-card:nth-child(2) {
  animation-delay: 40ms;
}

.guide-accordion.is-open .guide-video-card:nth-child(3) {
  animation-delay: 80ms;
}

@keyframes guide-card-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1180px) {
  .article-editor-head,
  .dashboard-head-actions,
  .compose-summary-row,
  .guide-hero {
    align-items: stretch;
  }

  .article-editor-head,
  .guide-hero {
    flex-direction: column;
  }

  .dashboard-head-actions,
  .compose-summary-row {
    flex-wrap: wrap;
  }

  .automation-topic-row,
  .automation-topic-row.used {
    grid-template-columns: auto minmax(58px, 72px) minmax(0, 1fr);
  }

  .automation-topic-edit,
  .automation-topic-static {
    min-width: 0;
  }
}

@media (max-width: 920px) {
  .topbar {
    gap: 12px !important;
    padding: 12px 14px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  .topbar-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    grid-column: 1 / -1;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .topbar-menu {
    width: 100%;
    display: grid;
    gap: 10px;
    align-items: stretch;
    grid-column: 1 / -1;
  }

  .topbar-menu[hidden] {
    display: none;
  }

  .nav-left {
    width: 100%;
    display: block !important;
  }

  .primary-nav,
  .account-nav {
    width: 100%;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
    border-left: 0 !important;
  }

  .primary-nav::after,
  .account-nav::after {
    display: none !important;
  }

  .primary-nav a,
  .account-nav a,
  .account-nav form,
  .account-nav .button.small,
  .account-nav .credit-pill,
  .link-button {
    min-width: 0;
    flex: 1 1 180px;
    justify-content: center;
    text-align: center;
  }

  .primary-nav a,
  .account-nav a:not(.button):not(.credit-pill),
  .link-button {
    padding: 10px 12px !important;
    background: #f8fbff;
  }

  .dashboard-compose-shell,
  .article-editor-grid,
  .guide-quick-grid,
  .guide-video-card {
    grid-template-columns: 1fr;
  }

  .compose-main-grid,
  .columns {
    grid-template-columns: 1fr !important;
  }

  .article-editor-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .automation-hour-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  main {
    width: min(100% - 16px, 1220px);
    padding-top: 22px;
  }

  .topbar {
    width: min(100% - 12px, 1220px) !important;
    margin-top: 8px;
    padding: 10px !important;
  }

  .brand {
    font-size: 22px;
  }

  .primary-nav a,
  .account-nav a,
  .account-nav form,
  .account-nav .button.small,
  .account-nav .credit-pill,
  .link-button {
    flex-basis: 100%;
  }

  .guide-accordion,
  .guide-quick-grid article,
  .guide-hero {
    padding: 18px;
  }

  .guide-accordion-trigger {
    align-items: flex-start;
    flex-direction: column;
  }

  .guide-accordion-meta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .guide-video-card {
    padding: 14px;
  }

  .automation-hour-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.automation-add-image-button::before,
.automation-add-image-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  background: currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.automation-add-image-button::before {
  width: 10px;
  height: 2px;
}

.automation-add-image-button::after {
  width: 2px;
  height: 10px;
}

.automation-add-image-button.is-strip-add::before {
  width: 11px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.automation-add-image-button.is-strip-add::after {
  width: 2px;
  height: 11px;
  transform: translate(-50%, -50%);
}

.image-delete-button::before,
.image-delete-button::after,
.topic-delete-button::before,
.topic-delete-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  inset: auto;
  width: 9px;
  height: 2px;
  display: block;
  background: currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.image-delete-button::after,
.topic-delete-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.compose-form.is-submitting button[type="submit"] {
  cursor: progress;
  opacity: 0.75;
}

@property --score-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #1765ff;
}

@property --score-dot {
  syntax: "<color>";
  inherits: true;
  initial-value: #3bc878;
}

@property --score-good {
  syntax: "<color>";
  inherits: true;
  initial-value: #33bd73;
}

@property --score-warn {
  syntax: "<color>";
  inherits: true;
  initial-value: #ff9f1c;
}

@property --score-bar-start {
  syntax: "<color>";
  inherits: true;
  initial-value: #7d49ff;
}

@property --score-bar-end {
  syntax: "<color>";
  inherits: true;
  initial-value: #33bd73;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Aptos", "Segoe UI", sans-serif;
  background:
    linear-gradient(135deg, rgba(31, 99, 214, 0.07), transparent 32%),
    linear-gradient(245deg, rgba(240, 138, 36, 0.08), transparent 34%),
    var(--paper);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(31, 99, 214, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(31, 99, 214, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 65%);
}

body::after {
  content: "";
  position: fixed;
  right: -10vw;
  bottom: -18vh;
  width: 46vw;
  height: 46vw;
  pointer-events: none;
  background: radial-gradient(circle, rgba(31, 99, 214, 0.10), transparent 62%);
  filter: blur(18px);
}

a {
  color: var(--teal-deep);
  font-weight: 760;
  text-decoration: none;
}

main {
  width: min(1220px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 76px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  width: min(1220px, calc(100% - 24px));
  min-height: 74px;
  margin: 12px auto 0;
  padding: 0 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand primary account";
  align-items: center;
  justify-content: stretch;
  gap: 18px;
  color: #fff;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(219, 228, 240, 0.9);
  border-radius: 8px;
  box-shadow: 18px 18px 42px rgba(133, 158, 194, 0.16), -14px -14px 32px rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), background var(--transition-smooth);
}

.topbar-menu .primary-nav,
.topbar-menu .account-nav {
  min-width: 0;
}

.nav-left,
.account-nav,
.primary-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.nav-left {
  grid-area: brand;
}

.primary-nav {
  grid-area: primary;
}

.account-nav {
  grid-area: account;
  justify-content: flex-end;
}

.brand {
  color: var(--teal-deep);
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.brand-text {
  line-height: 1;
}

.brand-mark {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #0f3f95);
  border-radius: 8px;
  font: 900 19px "Aptos", "Segoe UI", sans-serif;
}

nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

nav a,
.link-button {
  color: var(--soft-ink);
}

nav form {
  margin: 0;
}

.primary-nav {
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.primary-nav a,
.account-nav a:not(.button):not(.credit-pill),
.link-button {
  padding: 9px 10px;
  border-radius: 8px;
  transition: color 160ms ease, background-color 160ms ease;
}

.primary-nav a:hover,
.account-nav a:not(.button):not(.credit-pill):hover,
.link-button:hover {
  color: var(--teal-deep);
  background: #edf4ff;
}

.hero,
.dashboard-hero,
.billing-layout,
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 28px;
  align-items: center;
}

.billing-page {
  display: grid;
  gap: 24px;
}

.billing-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--neo-shadow);
  animation: rise-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.billing-hero h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: 0;
}

.billing-hero .lead {
  margin-bottom: 0;
}

.billing-shell {
  display: grid;
  gap: 18px;
}

.billing-packages {
  display: grid;
  gap: 16px;
  padding: 28px;
  background: transparent;
}

.billing-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.hero {
  min-height: calc(100vh - 170px);
}

.pro-hero {
  align-items: center;
  min-height: auto;
  padding: 18px 0 6px;
}

.hero-copy {
  max-width: 790px;
  animation: rise-in 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero h1,
.dashboard-hero h1,
.billing-layout h1,
.auth-layout h1 {
  margin: 0;
  max-width: 920px;
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: clamp(42px, 7vw, 86px);
  line-height: 1.01;
  letter-spacing: -0.03em;
}

.pro-hero h1 {
  max-width: 840px;
  font-size: clamp(36px, 4.7vw, 60px);
  line-height: 1.07;
}

.dashboard-hero h1,
.billing-layout h1,
.auth-layout h1 {
  font-size: clamp(38px, 5vw, 66px);
}

h2 {
  margin: 0;
  color: var(--ink);
  font-size: 25px;
  letter-spacing: 0;
}

.lead {
  max-width: 780px;
  color: var(--soft-ink);
  font-size: 20px;
  line-height: 1.68;
}

.hero-proof {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.hero-proof span {
  padding: 10px 14px;
  color: var(--teal-deep);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 850;
  box-shadow: var(--neo-shadow-soft);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--amber);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-card,
.panel,
.stat-card,
.feature-band > div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.hero-insight {
  min-height: 390px;
  padding: 24px;
  display: grid;
  align-content: center;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(31, 99, 214, 0.16);
  animation: float-in 820ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.insight-orbit {
  position: relative;
  width: 190px;
  height: 190px;
  margin: 0 auto 4px;
  display: grid;
  place-items: center;
  color: var(--teal-deep);
  background:
    radial-gradient(circle, #fff 0 38%, transparent 39%),
    conic-gradient(from 90deg, rgba(31, 99, 214, 0.20), rgba(240, 138, 36, 0.24), rgba(31, 99, 214, 0.20));
  border: 1px solid var(--line);
  border-radius: 999px;
}

.insight-orbit strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
}

.orbit-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--blue);
  border: 4px solid #fff;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(31, 99, 214, 0.22);
}

.orbit-dot.one {
  top: 17px;
  left: 86px;
}

.orbit-dot.two {
  right: 22px;
  bottom: 48px;
  background: var(--amber);
}

.orbit-dot.three {
  left: 26px;
  bottom: 44px;
}

.insight-list {
  display: grid;
  gap: 10px;
}

.insight-list div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.insight-list span {
  color: var(--amber);
  font-weight: 900;
}

.insight-list strong {
  color: var(--ink);
}

.insight-list small {
  color: var(--muted);
  font-weight: 750;
}

.hero-card {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.metric-line {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.metric-line span,
.stat-card span,
.stat-card small,
.muted {
  color: var(--muted);
}

.metric-line strong,
.stat-card strong {
  display: block;
  margin-top: 7px;
  color: var(--ink);
  font-size: 22px;
}

.feature-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}

.pro-band {
  margin-top: 18px;
}

.feature-band > div {
  padding: 22px;
  box-shadow: var(--neo-shadow-soft);
  animation: rise-in 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: transform var(--transition-float), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.feature-band > div:nth-child(2) {
  animation-delay: 80ms;
}

.feature-band > div:nth-child(3) {
  animation-delay: 160ms;
}

.feature-band span {
  color: var(--amber);
  font-weight: 900;
}

.feature-band strong {
  display: block;
  margin: 12px 0 8px;
  font-size: 19px;
}

.feature-band p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.live-metrics {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 22px;
  margin-top: 22px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--neo-shadow);
}

.live-metrics h2 {
  max-width: 460px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
}

.metric-cluster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.metric-cluster article {
  padding: 22px;
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: inset 5px 5px 14px rgba(133, 158, 194, 0.13), inset -5px -5px 14px rgba(255, 255, 255, 0.9);
}

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

.metric-cluster strong {
  display: block;
  margin: 8px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1;
  color: var(--teal-deep);
}

.metric-cluster strong.bump {
  animation: number-bump 360ms ease-out;
}

.workflow-section {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 22px;
  margin-top: 22px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--neo-shadow);
}

.workflow-section h2 {
  max-width: 520px;
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: clamp(23px, 2.9vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.workflow-grid {
  display: grid;
  gap: 12px;
}

.workflow-grid div {
  padding: 16px;
  background: linear-gradient(180deg, #f9fbff, #f2f7ff);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--neo-inset);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.workflow-grid strong,
.workflow-grid span {
  display: block;
}

.workflow-grid strong {
  font-size: 17px;
  line-height: 1.3;
}

.workflow-grid span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.panel {
  padding: 24px;
  margin-bottom: 22px;
  animation: rise-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  box-shadow: var(--neo-shadow);
  transition: transform var(--transition-float), box-shadow var(--transition-smooth), border-color var(--transition-smooth), background var(--transition-smooth);
}

.narrow {
  max-width: 560px;
}

.auth-layout .narrow,
.billing-layout .panel {
  margin: 0;
}

.dashboard-hero {
  margin-bottom: 20px;
}

.dashboard-pro {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--neo-shadow);
}

.dashboard-actions,
.actions,
.section-head,
.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.dashboard-actions form {
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.stat-card {
  padding: 22px;
  box-shadow: var(--neo-shadow-soft);
  transition: transform var(--transition-float), box-shadow var(--transition-smooth), border-color var(--transition-smooth), background var(--transition-smooth);
}

.stat-card:hover,
.site-card:hover,
.feature-band > div:hover {
  transform: translateY(-4px);
  box-shadow: 20px 20px 40px rgba(133, 158, 194, 0.18), -10px -10px 24px rgba(255, 255, 255, 0.92);
}

.elevated-stats .stat-card {
  border-top: 4px solid var(--blue);
}

.elevated-stats .stat-card:nth-child(2) {
  border-top-color: var(--amber);
}

.elevated-stats .stat-card:nth-child(3) {
  border-top-color: #6f8fce;
}

.stat-card strong {
  margin: 8px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 48px;
  line-height: 1;
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(380px, 1.05fr);
  gap: 22px;
  align-items: start;
}

.generate-panel {
  position: sticky;
  top: 104px;
}

.pro-workspace > .panel {
  border-top: 4px solid #eef4ff;
}

.stack {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.soft {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

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

label {
  display: grid;
  gap: 7px;
  color: var(--soft-ink);
  font-size: 13px;
  font-weight: 780;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid #cfdad4;
  border-radius: 8px;
  padding: 12px 13px;
  color: var(--ink);
  background: linear-gradient(180deg, #fbfdff, #f2f7ff);
  font: 16px "Aptos", "Segoe UI", sans-serif;
  outline: none;
  box-shadow: var(--neo-inset);
  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth), background var(--transition-smooth), transform var(--transition-smooth);
}

input:disabled {
  color: var(--muted);
  background: #f4f7fb;
  cursor: not-allowed;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--teal);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(31, 99, 214, 0.10), 0 12px 24px rgba(31, 99, 214, 0.08);
  transform: translateY(-1px);
}

textarea {
  resize: vertical;
}

.technical-field,
.public-file-editor textarea {
  min-height: 0;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: "Cascadia Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.55;
}

.site-settings .technical-field {
  background: #fbfdff;
}

.check {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 10px;
}

.check input {
  width: auto;
}

.button,
button {
  border: 0;
  border-radius: 8px;
  padding: 13px 18px;
  color: #fff;
  background: var(--teal);
  font: 850 15px "Aptos", "Segoe UI", sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-shadow: 10px 10px 24px rgba(31, 99, 214, 0.18), -6px -6px 18px rgba(255, 255, 255, 0.55);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), background var(--transition-smooth), color var(--transition-smooth), border-color var(--transition-smooth);
}

.button:hover,
button:hover {
  background: var(--teal-deep);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 14px 16px 32px rgba(31, 99, 214, 0.22), -6px -6px 16px rgba(255, 255, 255, 0.5);
}

.button:active,
button:active {
  transform: translateY(0);
  box-shadow: none;
}

.button.ghost {
  color: var(--teal-deep);
  background: linear-gradient(180deg, #f8fbff, #e8f1ff);
}

.button.accent,
button.accent {
  color: #251705;
  background: linear-gradient(180deg, #fff8ee, #ffe8c8);
  border: 1px solid rgba(201, 130, 43, 0.45);
}

.button.accent:hover,
button.accent:hover {
  background: #f7dfb9;
}

.button.danger,
button.danger {
  color: var(--bad);
  background: linear-gradient(180deg, #fff8f7, #ffe6e3);
  border: 1px solid #ffd0cc;
}

.button.danger:hover,
button.danger:hover {
  color: #fff;
  background: var(--bad);
}

.button.small {
  padding: 9px 12px;
  font-size: 13px;
  min-height: 38px;
}

button:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.link-button {
  padding: 0;
  min-height: 0;
  background: transparent;
}

.link-button:hover {
  color: var(--teal-deep);
  background: transparent;
}

.credit-pill,
.cost-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 11px;
  color: #251705;
  background: var(--amber-soft);
  border: 1px solid rgba(201, 130, 43, 0.45);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.package-preview-grid,
.billing-package-grid {
  display: grid;
  gap: 14px;
}

.package-preview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.package-chip,
.billing-package-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--neo-shadow-soft);
}

.package-chip {
  padding: 16px;
}

.package-chip strong,
.package-chip span,
.package-chip small,
.billing-package-card strong,
.billing-package-card b,
.billing-package-card small,
.billing-package-card span {
  display: block;
}

.package-chip strong,
.billing-package-card strong {
  font-size: 18px;
}

.package-chip span,
.billing-package-card b {
  margin-top: 8px;
  color: var(--teal-deep);
  font-weight: 900;
}

.package-chip small,
.billing-package-card small {
  margin-top: 6px;
  color: var(--muted);
}

.billing-package-grid {
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  align-items: stretch;
  margin-top: 4px;
}

.billing-package-card {
  padding: 24px;
  gap: 16px;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  isolation: isolate;
  min-height: 392px;
  border-radius: 26px;
  transition:
    transform var(--transition-float),
    box-shadow var(--transition-smooth),
    border-color var(--transition-smooth),
    background var(--transition-smooth);
}

.billing-package-card::before {
  content: "";
  position: absolute;
  inset: auto -12% -34% auto;
  width: 210px;
  height: 210px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(31, 99, 214, 0.18), transparent 68%);
  z-index: -1;
}

.billing-package-card:hover {
  transform: translateY(-8px) scale(1.012);
  box-shadow: 24px 24px 44px rgba(133, 158, 194, 0.19), -12px -12px 28px rgba(255, 255, 255, 0.92);
}

.billing-package-card.featured {
  border-color: rgba(31, 99, 214, 0.34);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 255, 0.98)),
    var(--surface);
  box-shadow: 18px 18px 40px rgba(31, 99, 214, 0.14), -10px -10px 26px rgba(255, 255, 255, 0.92);
}

.billing-package-card.premium {
  min-height: 410px;
  border: 2px solid rgba(31, 99, 214, 0.48);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(239, 246, 255, 0.99)),
    var(--surface);
  box-shadow: 24px 24px 52px rgba(31, 99, 214, 0.20), -12px -12px 30px rgba(255, 255, 255, 0.96);
  transform: translateY(-8px);
}

.billing-package-card.premium::before {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(240, 138, 36, 0.3), rgba(31, 99, 214, 0.19) 42%, transparent 70%);
}

.billing-package-card.premium:hover {
  transform: translateY(-14px) scale(1.026);
  box-shadow: 34px 38px 70px rgba(31, 99, 214, 0.28), -14px -14px 34px rgba(255, 255, 255, 0.98);
}

.billing-package-card.featured::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0 38%, rgba(255, 255, 255, 0.42) 48%, transparent 58% 100%);
  transform: translateX(-120%);
  animation: package-sheen 3.4s ease-in-out infinite;
  z-index: -1;
}

.billing-badge {
  width: fit-content;
  min-height: 32px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #251705;
  background: linear-gradient(180deg, #fff8ee, #ffe4bd);
  border: 1px solid rgba(201, 130, 43, 0.45);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
  box-shadow: 0 10px 18px rgba(201, 130, 43, 0.12);
}

.billing-badge.starter {
  color: #214061;
  background: linear-gradient(180deg, rgba(245, 249, 255, 0.98), rgba(226, 236, 248, 0.98));
  border-color: rgba(160, 187, 219, 0.74);
  box-shadow: 0 10px 20px rgba(116, 148, 186, 0.14);
}

.billing-package-card.premium .billing-badge {
  color: #fff;
  background: linear-gradient(135deg, #1b66e3, #0c7d86);
  border-color: rgba(15, 63, 149, 0.28);
  box-shadow: 0 16px 28px rgba(31, 99, 214, 0.24);
}

.billing-flags {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
}

.billing-package-head {
  display: grid;
  gap: 8px;
}

.billing-badge.is-empty,
.billing-bonus.is-empty {
  visibility: hidden;
}

.billing-package-subtitle {
  color: var(--muted);
  font-size: 14px;
  font-weight: 760;
  letter-spacing: 0.01em;
}

.billing-package-card strong {
  min-height: 0;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.billing-price-block {
  display: grid;
  gap: 8px;
  padding: 18px 18px 16px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(249, 252, 255, 0.96), rgba(238, 245, 255, 0.96)),
    var(--surface);
  border: 1px solid rgba(206, 221, 245, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 10px 12px 22px rgba(168, 187, 218, 0.16);
}

.billing-package-card.featured .billing-price-block {
  background:
    linear-gradient(180deg, rgba(242, 249, 255, 0.98), rgba(228, 240, 255, 0.96)),
    var(--surface);
  border-color: rgba(160, 191, 239, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 14px 16px 30px rgba(31, 99, 214, 0.14);
}

.billing-package-card.premium .billing-price-block {
  background:
    linear-gradient(135deg, rgba(14, 50, 110, 0.98), rgba(21, 116, 139, 0.96) 55%, rgba(240, 138, 36, 0.92)),
    var(--surface);
  border-color: rgba(16, 65, 140, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 18px 20px 36px rgba(31, 99, 214, 0.22);
}

.billing-package-card b {
  color: var(--teal-deep);
  font-family: "Aptos Display", "Segoe UI", "Trebuchet MS", sans-serif;
  font-size: clamp(34px, 3vw, 52px);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  letter-spacing: -0.04em;
}

.billing-package-card.premium b {
  color: #fff;
}

.billing-bonus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #0f4261;
  background: linear-gradient(180deg, rgba(233, 246, 255, 0.98), rgba(209, 234, 255, 0.96));
  border: 1px solid rgba(121, 177, 229, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 20px rgba(70, 131, 196, 0.12);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.billing-package-card.premium .billing-bonus {
  color: #fff;
  background: linear-gradient(135deg, rgba(240, 138, 36, 0.98), rgba(249, 188, 77, 0.94));
  border-color: rgba(235, 171, 70, 0.54);
  box-shadow: 0 14px 24px rgba(240, 138, 36, 0.22);
}

.billing-price-note {
  color: var(--soft-ink);
  font-size: 13px;
  font-weight: 760;
}

.billing-package-card.premium .billing-price-note {
  color: rgba(255, 255, 255, 0.78);
}

.billing-price-value {
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.billing-package-card.premium .billing-price-value {
  text-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

.billing-price-currency {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0;
  color: #58718f;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: "Aptos", "Segoe UI", "Trebuchet MS", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: none;
  opacity: 0.9;
  transform: translateY(-1px);
}

.billing-package-card.premium .billing-price-currency {
  color: rgba(255, 255, 255, 0.9);
  opacity: 0.96;
}

.billing-package-meta {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 14px;
  background: linear-gradient(180deg, #f8fbff, #eff5ff);
  border: 1px solid rgba(207, 224, 251, 0.8);
  border-radius: 18px;
  box-shadow: var(--neo-inset);
}

.billing-package-meta span {
  color: var(--soft-ink);
  font-size: 13px;
  font-weight: 780;
  line-height: 1.35;
}

.billing-package-card .button {
  width: 100%;
  align-self: end;
}

@keyframes package-sheen {
  0%,
  42% {
    transform: translateX(-120%);
  }
  72%,
  100% {
    transform: translateX(120%);
  }
}

.table {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1.25fr 0.75fr auto;
  gap: 14px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow-wrap: anywhere;
  box-shadow: var(--neo-shadow-soft);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.site-grid {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.site-card {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--neo-shadow-soft);
  transition: transform var(--transition-float), box-shadow var(--transition-smooth), border-color var(--transition-smooth), background var(--transition-smooth);
}

.admin-user-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.admin-user-card {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: inset 4px 4px 12px rgba(133, 158, 194, 0.10), inset -4px -4px 12px rgba(255, 255, 255, 0.9);
}

.admin-user-card strong,
.admin-user-card span {
  display: block;
}

.admin-user-card span {
  margin-top: 4px;
  color: var(--muted);
}

.inline-admin-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 10px;
}

.admin-article-row {
  grid-template-columns: 1fr auto auto;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.article-card {
  min-height: 220px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--neo-shadow);
  transition: transform var(--transition-float), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.article-card:hover {
  transform: translateY(-3px);
}

.article-card span {
  color: var(--amber);
  font-size: 12px;
  font-weight: 900;
}

.article-card strong {
  margin: 12px 0;
  font-size: 22px;
}

.article-card p {
  color: var(--muted);
  line-height: 1.55;
}

.article-detail {
  max-width: 900px;
  margin: 0 auto;
  padding: 34px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--neo-shadow);
}

.article-detail h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
}

.article-body {
  margin-top: 28px;
  color: var(--soft-ink);
  font-size: 18px;
  line-height: 1.72;
}

.article-body h1 {
  display: none;
}

.article-body h2 {
  margin-top: 30px;
  font-size: 28px;
}

.article-body .keskin-map-wrap,
.article-rich-editor .keskin-map-wrap {
  width: 100%;
  min-height: 420px;
  margin: 24px 0;
  overflow: hidden;
  border-radius: 10px;
  background: #eef2f7;
}

.article-body .keskin-map-wrap iframe,
.article-rich-editor .keskin-map-wrap iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: 420px !important;
  min-height: 420px;
  border: 0;
}

.site-card-head,
.site-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.site-card-head strong,
.site-card-head span {
  display: block;
}

.site-card-head span {
  margin-top: 4px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.site-mode {
  padding: 8px 10px;
  color: var(--teal-deep);
  background: #edf4ff;
  border: 1px solid #cfe0fb;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.site-actions {
  justify-content: flex-start;
  margin-top: 14px;
}

.site-actions form {
  margin: 0;
}

.site-settings {
  margin-top: 14px;
}

.site-settings form.stack {
  padding-top: 4px;
}

.status {
  font-weight: 900;
}

.status.completed,
.notice.good {
  color: var(--good);
}

.status.running {
  color: var(--blue);
}

.status.failed,
.notice.bad {
  color: var(--bad);
}

.notice {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  overflow-wrap: anywhere;
  box-shadow: var(--neo-shadow-soft);
}

.toast {
  position: fixed;
  top: 94px;
  right: max(18px, calc((100vw - 1220px) / 2));
  z-index: 50;
  width: min(420px, calc(100vw - 36px));
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #b9d8c8;
  border-left: 5px solid var(--good);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(23, 34, 58, 0.18);
  animation: toast-in 240ms ease-out;
}

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

.toast span {
  margin-top: 4px;
  color: var(--muted);
}

.article-progress-popover {
  position: fixed;
  right: max(18px, calc((100vw - 1220px) / 2));
  bottom: 22px;
  z-index: 70;
  width: min(440px, calc(100vw - 36px));
  display: grid;
  gap: 13px;
  padding: 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #cfe0fb;
  border-radius: 8px;
  box-shadow: 0 28px 76px rgba(23, 34, 58, 0.22);
  animation: toast-in 220ms ease-out;
}

.article-progress-popover[hidden] {
  display: none;
}

.article-progress-head,
.article-progress-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.article-progress-head strong,
.article-progress-head span {
  display: block;
}

.article-progress-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.article-progress-track {
  height: 10px;
  overflow: hidden;
  background: #e9f1ff;
  border-radius: 999px;
}

.article-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), #33bd73, var(--blue));
  background-size: 220% 100%;
  border-radius: inherit;
  animation: article-progress-shimmer 2.8s linear infinite;
  transition: width 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes article-progress-shimmer {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 220% 50%;
  }
}

.article-progress-popover[data-state="failed"] .article-progress-track span {
  background: linear-gradient(90deg, #f08a24, var(--bad));
  animation: none;
}

.article-progress-popover[data-state="completed"] {
  border-color: rgba(51, 189, 115, 0.45);
}

.article-progress-foot {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.article-progress-foot a {
  color: var(--blue);
  font-weight: 900;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-note {
  margin: 18px 0 0;
  color: var(--muted);
}

.strong-note {
  margin: 0;
  padding: 12px 14px;
  color: var(--teal-deep);
  background: linear-gradient(180deg, #f8fbff, #e8f1ff);
  border: 1px solid #cfe0fb;
  border-radius: 8px;
  font-weight: 750;
}

.advanced-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfdff, #f4f8ff);
  box-shadow: var(--neo-shadow-soft);
}

.advanced-box summary {
  cursor: pointer;
  padding: 13px 14px;
  color: var(--soft-ink);
  font-weight: 850;
}

.advanced-box .stack {
  margin: 0;
  padding: 0 14px 14px;
}

.test-box {
  padding: 18px;
  border: 1px solid rgba(201, 130, 43, 0.35);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffaf1, #fff);
  box-shadow: var(--neo-shadow-soft);
}

.auth-shell {
  min-height: calc(100vh - 170px);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.72fr);
  gap: 24px;
  align-items: center;
}

.auth-panel,
.auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--neo-shadow);
  animation: rise-in 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.auth-panel {
  min-height: 460px;
  padding: 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(31, 99, 214, 0.10), transparent 42%),
    linear-gradient(245deg, rgba(240, 138, 36, 0.13), transparent 36%),
    #fbfdff;
}

.auth-panel h1 {
  margin: 0;
  max-width: 620px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 0.98;
}

.auth-panel p {
  max-width: 620px;
  color: var(--soft-ink);
  font-size: 19px;
  line-height: 1.55;
}

.auth-points {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.auth-points span {
  width: fit-content;
  padding: 10px 12px;
  color: var(--teal-deep);
  background: linear-gradient(180deg, #f8fbff, #e9f2ff);
  border: 1px solid #cfe0fb;
  border-radius: 8px;
  font-weight: 850;
  box-shadow: var(--neo-shadow-soft);
}

.auth-card {
  padding: 28px;
  animation-delay: 90ms;
}

.topbar,
.hero-card,
.panel,
.stat-card,
.feature-band > div,
.dashboard-pro,
.auth-panel,
.auth-card,
.article-card,
.article-detail,
.workflow-section {
  border-radius: 26px;
}

.topbar {
  border-radius: 24px;
}

.brand-mark,
.primary-nav a,
.account-nav a:not(.button):not(.credit-pill),
.link-button,
input,
textarea,
select,
.button,
button,
.notice,
.advanced-box,
.site-card,
.row,
.metric-line,
.workflow-grid div {
  border-radius: 16px;
}

.hero-live-card {
  min-height: 430px;
  padding: 28px;
  display: grid;
  gap: 18px;
  align-content: center;
  background:
    radial-gradient(circle at 20% 12%, rgba(31, 99, 214, 0.13), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(240, 138, 36, 0.16), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.92));
  border: 1px solid rgba(219, 228, 240, 0.9);
  border-radius: 34px;
  box-shadow: var(--neo-shadow);
  overflow: hidden;
  position: relative;
  animation: float-in 860ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.hero-live-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(31, 99, 214, 0.08);
  border-radius: 28px;
  pointer-events: none;
}

.hero-live-main,
.hero-live-secondary {
  position: relative;
  padding: 22px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(219, 228, 240, 0.92);
  border-radius: 26px;
  box-shadow: inset 8px 8px 18px rgba(133, 158, 194, 0.11), inset -8px -8px 18px rgba(255, 255, 255, 0.92);
}

.hero-live-main span,
.hero-live-main small,
.hero-live-secondary span,
.hero-live-secondary small {
  display: block;
  color: var(--muted);
  font-weight: 850;
}

.hero-live-main small,
.hero-live-secondary small {
  margin-top: 8px;
  font-size: 13px;
}

.rolling-number {
  position: relative;
  display: block;
  height: 82px;
  margin: 8px 0 2px;
  overflow: hidden;
  color: var(--teal-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(54px, 7vw, 82px);
  line-height: 82px;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.rolling-number.compact {
  height: 58px;
  font-size: clamp(38px, 5vw, 56px);
  line-height: 58px;
}

.roll-old,
.roll-new {
  position: absolute;
  inset: 0;
  display: block;
  will-change: transform, opacity;
}

.roll-old {
  animation: roll-old-up 430ms cubic-bezier(0.22, 0.72, 0.2, 1) both;
}

.roll-new {
  animation: roll-new-up 430ms cubic-bezier(0.22, 0.72, 0.2, 1) both;
}

@keyframes roll-old-up {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-105%);
  }
}

@keyframes roll-new-up {
  from {
    opacity: 0;
    transform: translateY(105%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.blog-hero {
  margin-bottom: 22px;
  background:
    radial-gradient(circle at 12% 16%, rgba(31, 99, 214, 0.10), transparent 36%),
    radial-gradient(circle at 88% 8%, rgba(240, 138, 36, 0.14), transparent 30%),
    rgba(255, 255, 255, 0.92);
}

.article-card {
  min-height: 360px;
  padding: 14px;
  gap: 0;
  overflow: hidden;
}

.article-card img,
.article-placeholder,
.article-cover {
  width: 100%;
  object-fit: cover;
  border: 1px solid rgba(219, 228, 240, 0.9);
  border-radius: 22px;
}

.article-card img,
.article-placeholder {
  aspect-ratio: 16 / 10;
  margin-bottom: 18px;
}

.article-placeholder {
  background:
    radial-gradient(circle at 20% 24%, rgba(31, 99, 214, 0.22), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(240, 138, 36, 0.22), transparent 26%),
    linear-gradient(145deg, #ffffff, #edf4ff);
  box-shadow: inset 8px 8px 18px rgba(133, 158, 194, 0.12), inset -8px -8px 18px rgba(255, 255, 255, 0.9);
}

.article-card span,
.article-card strong,
.article-card p {
  margin-left: 8px;
  margin-right: 8px;
}

.article-card strong {
  line-height: 1.18;
}

.article-cover {
  max-height: 460px;
  margin-top: 24px;
  box-shadow: var(--shadow);
}

.scroll-sentinel {
  min-height: 90px;
}

.scroll-sentinel::after {
  content: "";
  width: 42px;
  height: 42px;
  display: block;
  margin: 26px auto 0;
  border-radius: 999px;
  background: linear-gradient(145deg, #ffffff, #edf4ff);
  box-shadow: inset 6px 6px 14px rgba(133, 158, 194, 0.16), inset -6px -6px 14px rgba(255, 255, 255, 0.96);
  animation: pulse-soft 1.2s ease-in-out infinite;
}

@keyframes pulse-soft {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.62;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

.admin-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

.admin-users-panel {
  overflow: hidden;
  min-height: 760px;
}

.admin-table {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  max-height: 980px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  min-width: 100%;
}

.admin-user-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  margin: 16px 0 4px;
}

.admin-row {
  display: grid;
  grid-template-columns: minmax(250px, 1.55fr) minmax(160px, 0.9fr) minmax(150px, 0.88fr) minmax(300px, 1.2fr);
  gap: 12px;
  align-items: center;
  padding: 18px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: inset 5px 5px 14px rgba(133, 158, 194, 0.08), inset -5px -5px 14px rgba(255, 255, 255, 0.9);
}

.admin-row.ip-alert {
  border-color: rgba(180, 35, 24, 0.55);
  background: linear-gradient(180deg, #fff7f6, #fff);
}

.invite-card.ip-alert {
  border-color: rgba(180, 35, 24, 0.55);
  background: linear-gradient(180deg, #fff7f6, #fff);
}

.ip-log-list .invite-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.admin-row-head {
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--muted);
  background: rgba(247, 250, 255, 0.96);
  box-shadow: 0 10px 24px rgba(133, 158, 194, 0.10);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-row strong,
.admin-row small {
  display: block;
}

.admin-row small {
  margin-top: 4px;
  color: var(--muted);
}

.admin-row .admin-ip-line {
  color: var(--bad);
  font-weight: 900;
}

.admin-account-meta {
  display: grid;
  gap: 8px;
  align-content: start;
}

.admin-user-stats {
  color: var(--soft-ink);
  font-weight: 800;
}

.admin-user-stats small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-weight: 750;
  overflow-wrap: anywhere;
}

.admin-actions-cell {
  display: grid;
  gap: 10px;
  justify-items: stretch;
}

.admin-actions-cell .inline-admin-form {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) minmax(84px, 0.8fr) auto;
  gap: 8px;
}

.admin-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-content: start;
}

.admin-subscription-panel {
  display: grid;
  gap: 12px;
}

.admin-subscription-form,
.admin-subscription-revoke {
  display: grid;
  gap: 10px;
}

.admin-subscription-revoke {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.admin-subscription-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: 10px;
}

.admin-subscription-panel select,
.admin-subscription-panel input {
  width: 100%;
}

.invite-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-height: none;
  overflow: auto;
  margin-top: 18px;
  padding-right: 2px;
}

.invite-card {
  padding: 14px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: inset 5px 5px 14px rgba(133, 158, 194, 0.08), inset -5px -5px 14px rgba(255, 255, 255, 0.92);
  min-height: 172px;
}

.invite-card strong,
.invite-card span,
.invite-card small {
  display: block;
  overflow-wrap: anywhere;
}

.invite-card span {
  margin-top: 6px;
  color: var(--teal-deep);
  font-weight: 850;
}

.invite-card small {
  margin-top: 5px;
  color: var(--muted);
}

.button,
button,
.site-card,
.article-card,
.stat-card {
  transform: translateZ(0);
}

.button:hover,
button:hover,
.article-card:hover,
.stat-card:hover,
.site-card:hover,
.feature-band > div:hover {
  transform: translateY(-3px);
}

@keyframes drop-in {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes number-bump {
  0% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(-4px) scale(1.035);
    color: var(--amber);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 920px) {
  .hero,
  .dashboard-hero,
  .billing-layout,
  .billing-hero,
  .auth-layout,
  .auth-shell,
  .workspace-grid,
  .stats-grid,
  .feature-band,
  .live-metrics,
  .metric-cluster,
  .workflow-section,
  .article-grid,
  .admin-layout,
  .columns {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-top: 26px;
  }

  .generate-panel {
    position: static;
  }

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

  .admin-user-card,
  .inline-admin-form,
  .admin-row,
  .admin-actions-cell .inline-admin-form {
    grid-template-columns: 1fr;
  }

  .admin-side {
    position: static;
  }

  .topbar {
    align-items: flex-start;
    padding: 14px;
    flex-direction: column;
  }

  .primary-nav {
    padding-left: 0;
    border-left: 0;
  }

  .hero-insight,
  .hero-live-card {
    order: -1;
  }

  .hero-live-card {
    min-height: 0;
  }

  .admin-row-head {
    display: none;
  }

  .package-preview-grid,
  .billing-package-grid {
    grid-template-columns: 1fr;
  }

  .billing-package-card.premium {
    transform: none;
  }

  .billing-hero {
    align-items: stretch;
    flex-direction: column;
    padding: 22px;
  }

  .billing-packages {
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* 2026 mockup-inspired refresh */
:root {
  --ink: #070f3d;
  --soft-ink: #33436f;
  --muted: #6e7da8;
  --line: #e2e8f7;
  --paper: #f8fbff;
  --panel: #ffffff;
  --blue: #1765ff;
  --teal: #1765ff;
  --teal-deep: #0b1a57;
  --violet: #7a3cff;
  --violet-soft: #efe9ff;
  --green: #33bd73;
  --amber: #ff9f1c;
  --amber-soft: #fff2dc;
  --bad: #e34343;
  --good: #1aa967;
  --shadow: 0 20px 52px rgba(34, 68, 139, 0.11);
  --neo-shadow: 0 26px 70px rgba(34, 68, 139, 0.12);
  --neo-shadow-soft: 0 16px 42px rgba(34, 68, 139, 0.09);
  --neo-inset: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.96));
}

* {
  letter-spacing: 0 !important;
}

body {
  color: var(--ink);
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 42%, #f7fbff 100%),
    var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
  background:
    linear-gradient(90deg, rgba(23, 101, 255, 0.028) 1px, transparent 1px),
    linear-gradient(180deg, rgba(122, 60, 255, 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

body::after {
  display: none;
}

main {
  width: min(1210px, calc(100% - 32px));
  padding: 18px 0 52px;
}

.topbar {
  width: min(1210px, calc(100% - 32px));
  min-height: 72px;
  margin-top: 14px;
  /* Logo ve sağ menü kenara yapışmasın: hafif yatay iç boşluk. */
  padding: 0 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  border: 0;
  /* Üst köşeler düz, ALT köşeler yuvarlak (sticky başlık şeridi). */
  border-radius: 0 0 16px 16px;
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.nav-left {
  gap: 70px;
}

.brand {
  color: var(--ink);
  font-family: inherit;
  font-size: 28px;
  font-weight: 900;
  gap: 12px;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms ease;
}

.brand:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 14px 22px rgba(57, 103, 255, 0.14));
}

.brand-text {
  color: var(--ink);
}

.brand-text::after {
  content: "";
}

.brand .brand-text {
  background: linear-gradient(90deg, var(--ink) 0 50%, var(--blue) 50% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  transition: background-position 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brand:hover .brand-text {
  background-position: -100% 0;
}

.brand-mark {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 14px;
  background:
    radial-gradient(circle at 24% 74%, rgba(23, 101, 255, 0.16), transparent 34%),
    radial-gradient(circle at 76% 20%, rgba(255, 205, 104, 0.18), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.22), transparent 52%);
  filter: drop-shadow(0 12px 20px rgba(57, 103, 255, 0.16));
  animation: brand-mark-idle 5.8s ease-in-out infinite;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), filter 360ms ease;
}

.brand:hover .brand-mark {
  animation-play-state: paused;
  transform: rotate(-7deg) scale(1.08);
  filter: drop-shadow(0 18px 28px rgba(57, 103, 255, 0.24));
}

.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.brand-mark::before {
  inset: 4px;
  background: linear-gradient(145deg, #95c0ff 0%, #7d5eff 42%, #1765ff 100%);
  clip-path: polygon(50% 0, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0 50%, 40% 38%);
  box-shadow: 0 12px 24px rgba(35, 103, 255, 0.24);
}

.brand-mark::after {
  width: 11px;
  height: 11px;
  right: 2px;
  top: 4px;
  background: linear-gradient(145deg, #fff6bf, #ffffff);
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  box-shadow:
    -16px 15px 0 -5px rgba(255, 255, 255, 0.92),
    0 0 0 4px rgba(255, 255, 255, 0.14);
}

.primary-nav {
  padding-left: 0;
  border-left: 0;
  gap: 30px;
}

.primary-nav a,
.account-nav a:not(.button):not(.credit-pill),
.link-button {
  position: relative;
  color: var(--ink);
  padding: 10px 6px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 800;
  background: transparent;
  border-bottom: 0;
}

.primary-nav a::after,
.account-nav a:not(.button):not(.credit-pill)::after,
.link-button::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 5px;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--blue));
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.primary-nav a:hover,
.account-nav a:not(.button):not(.credit-pill):hover,
.link-button:hover {
  color: var(--blue);
  background: transparent;
}

.primary-nav a:hover::after,
.account-nav a:not(.button):not(.credit-pill):hover::after,
.link-button:hover::after {
  transform: scaleX(1);
}

.account-nav {
  gap: 14px;
}

.button,
button {
  min-height: 50px;
  padding: 14px 24px;
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--blue));
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  box-shadow: 0 16px 30px rgba(39, 102, 255, 0.22);
  font-weight: 900;
}

.button:hover,
button:hover {
  background: linear-gradient(135deg, #6530e9, #0758ef);
  transform: translateY(-2px);
  box-shadow: 0 22px 42px rgba(39, 102, 255, 0.28);
}

.button.ghost {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(34, 68, 139, 0.06);
}

.button.ghost:hover {
  color: var(--blue);
  background: #fff;
  border-color: #cfdbf4;
}

.button.accent,
button.accent {
  color: #fff;
  background: linear-gradient(135deg, #fb7f21, #ffd15c);
  border-color: rgba(255, 181, 68, 0.5);
}

.link-button {
  position: relative;
  min-height: 0;
  padding: 10px 6px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.link-button:hover {
  color: var(--blue);
  background: transparent;
  box-shadow: none;
  transform: none;
}

.button.small {
  min-height: 42px;
  padding: 10px 16px;
}

.credit-pill,
.cost-badge,
.site-mode,
.eyebrow {
  color: #5a34f2;
  background: linear-gradient(180deg, #f7f3ff, #f0ebff);
  border: 1px solid #e1d8ff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  text-transform: none;
}

.eyebrow {
  width: fit-content;
  margin: 0 0 18px;
  padding: 8px 14px;
}

.hero,
.dashboard-hero,
.billing-layout,
.auth-layout {
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.82fr);
  gap: 52px;
}

.hero {
  min-height: auto;
}

.pro-hero {
  position: relative;
  padding: 24px 0 28px;
}

.hero-copy {
  max-width: 700px;
}

.hero h1,
.dashboard-hero h1,
.billing-layout h1,
.auth-layout h1,
.billing-hero h1,
.auth-panel h1,
.article-detail h1 {
  color: var(--ink);
  font-family: inherit;
  font-size: 58px;
  line-height: 1.06;
  font-weight: 950;
}

.pro-hero h1 {
  max-width: 720px;
  font-size: 62px;
}

.hero h1::after,
.auth-panel h1::after {
  content: "";
  display: inline-block;
  width: 0;
}

.lead {
  color: var(--soft-ink);
  font-size: 18px;
  line-height: 1.72;
}

.actions {
  justify-content: flex-start;
  margin-top: 28px;
}

.hero-proof {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hero-proof span {
  padding: 14px 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--neo-shadow-soft);
}

.hero-product-card {
  position: relative;
  min-height: 455px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px;
  gap: 24px;
  align-items: center;
  padding: 30px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.94));
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 30px 90px rgba(76, 90, 181, 0.16);
}

.hero-storyboard {
  position: relative;
  width: 100%;
  min-height: 380px;
  display: grid;
  align-self: center;
  justify-self: center;
  place-items: center;
  --pointer-x: 0;
  --pointer-y: 0;
}

.storyboard-glow {
  position: absolute;
  inset: 8% 10%;
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 159, 28, 0.24), transparent 26%),
    radial-gradient(circle at 78% 78%, rgba(23, 101, 255, 0.24), transparent 30%),
    radial-gradient(circle at 48% 52%, rgba(51, 189, 115, 0.14), transparent 28%);
  filter: blur(12px);
}

.composer-card {
  position: relative;
  width: min(100%, 588px);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(188px, 0.8fr);
  gap: 20px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(223, 230, 246, 0.96);
  border-radius: 28px;
  box-shadow: 0 24px 64px rgba(34, 68, 139, 0.15);
  backdrop-filter: blur(22px);
  overflow: hidden;
  transform: perspective(1200px) rotateX(calc(var(--pointer-y) * -4deg)) rotateY(calc(var(--pointer-x) * 6deg)) translate3d(calc(var(--pointer-x) * 4px), calc(var(--pointer-y) * 4px), 0);
  transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
  animation: composer-idle 6.8s ease-in-out infinite;
}

.hero-storyboard:hover .composer-card {
  border-color: rgba(181, 199, 255, 0.98);
  box-shadow: 0 34px 86px rgba(34, 68, 139, 0.22);
}

.composer-form-preview,
.composer-score-preview {
  position: relative;
  z-index: 2;
}

.composer-form-preview {
  display: grid;
  gap: 13px;
}

.composer-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 1px;
  color: var(--ink);
  font-size: 20px;
}

.composer-spark {
  width: 28px;
  height: 28px;
  display: block;
  flex: 0 0 auto;
  background: linear-gradient(145deg, #8c5cff, #1765ff);
  border-radius: 10px;
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  box-shadow: 0 10px 20px rgba(65, 96, 255, 0.18);
  animation: composer-spark 3.8s ease-in-out infinite;
}

.composer-form-preview label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.composer-form-preview label span {
  min-height: 47px;
  display: flex;
  align-items: center;
  padding: 0 13px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(212, 222, 242, 0.98);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

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

.composer-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  justify-content: center;
  border-radius: 13px;
}

.composer-score-preview {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  min-width: 0;
  padding: 18px 15px;
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(214, 224, 244, 0.98);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 14px 30px rgba(34, 68, 139, 0.08);
  transition: --score-accent 220ms ease, --score-dot 220ms ease, --score-good 220ms ease, --score-warn 220ms ease;
}

.composer-score-preview > strong {
  color: var(--ink);
  font-size: 13px;
}

.composer-score-ring {
  position: relative;
  width: 118px;
  height: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: conic-gradient(from 210deg, var(--score-accent, #1765ff) 0 var(--home-score, 86%), rgba(223, 231, 246, 0.96) var(--home-score, 86%) 100%);
  box-shadow: 0 16px 28px rgba(53, 92, 194, 0.16);
  animation: composer-score-breathe 4.6s ease-in-out infinite;
  transition: --score-accent 220ms ease, background 220ms ease, box-shadow 280ms ease;
}

.composer-score-ring::after {
  content: "";
  position: absolute;
  inset: 13px;
  background: linear-gradient(180deg, #fff, #f5f8ff);
  border-radius: inherit;
}

.composer-score-ring span,
.composer-score-ring small {
  position: relative;
  z-index: 1;
}

.composer-score-ring span {
  color: var(--ink);
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
}

.composer-score-ring small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.composer-score-preview p {
  margin: 0;
  color: var(--score-text, #28a861);
  font-size: 13px;
  font-weight: 900;
  transition: color 420ms ease;
}

.composer-score-bar {
  width: 100%;
  height: 10px;
  overflow: hidden;
  background: #e8eef9;
  border: 1px solid rgba(212, 222, 242, 0.98);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(34, 68, 139, 0.08);
}

.composer-score-bar span {
  width: 0;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, var(--score-warn, #ff9f1c), var(--score-good, #33bd73), var(--score-accent, #1765ff));
  border-radius: inherit;
  transition: width 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.composer-score-preview ul {
  width: 100%;
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid rgba(218, 227, 246, 0.96);
  list-style: none;
  text-align: left;
}

.composer-score-preview li {
  position: relative;
  padding-left: 22px;
  color: var(--soft-ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.composer-score-preview li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  background: var(--score-dot, #3bc878);
  border-radius: 999px;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.7);
  transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.composer-score-preview[data-score-state="low"] {
  --score-accent: #ffb020;
  --score-dot: #ffca55;
  --score-good: #ffca55;
  --score-text: #b26a00;
  --score-warn: #ff8a1d;
}

.composer-score-preview[data-score-state="low"] li::before {
  transform: scale(0.94);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.68), 0 0 0 4px rgba(255, 202, 85, 0.16);
}

.composer-score-preview[data-score-state="mid"] {
  --score-accent: #ff9f1c;
  --score-dot: #ffb020;
  --score-good: #33bd73;
  --score-text: #b26a00;
  --score-warn: #ff8a1d;
}

.storyboard-window {
  position: relative;
  width: min(100%, 405px);
  padding: 16px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(223, 230, 246, 0.94);
  border-radius: 24px;
  box-shadow: 0 22px 54px rgba(34, 68, 139, 0.13);
  backdrop-filter: blur(22px);
  transform: perspective(1200px) rotateX(calc(var(--pointer-y) * -4deg)) rotateY(calc(var(--pointer-x) * 6deg)) translate3d(calc(var(--pointer-x) * 4px), calc(var(--pointer-y) * 4px), 0);
  transition: transform 320ms ease, box-shadow 320ms ease;
  overflow: hidden;
}

.hero-storyboard:hover .storyboard-window {
  box-shadow: 0 28px 68px rgba(34, 68, 139, 0.17);
}

.storyboard-stage {
  position: relative;
  min-height: 0;
  display: grid;
  gap: 10px;
  align-content: start;
  overflow: hidden;
  isolation: isolate;
  z-index: 1;
}

.storyboard-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.storyboard-header small,
.story-focus-row span,
.story-focus-row small,
.story-action small,
.story-mini-meter span {
  color: var(--muted);
}

.storyboard-header strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 20px;
}

.story-status {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--blue);
  background:
    radial-gradient(circle at center, #fff 58%, transparent 60%),
    conic-gradient(#1765ff 0 86%, rgba(223, 231, 246, 0.95) 86% 100%);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(53, 92, 194, 0.14);
}

.story-focus-row,
.story-action,
.story-mini-meter {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(220, 229, 245, 0.98);
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(34, 68, 139, 0.07);
}

.story-focus-row {
  padding: 13px 14px;
}

.story-focus-row strong {
  display: block;
  margin: 4px 0;
  color: var(--ink);
  font-size: 16px;
}

.story-focus-row small {
  font-size: 12px;
}

.story-action-list {
  display: grid;
  gap: 8px;
}

.story-action {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
}

.story-action > span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  margin-top: 2px;
}

.story-action.ready > span {
  background: #e7f8ee;
}

.story-action.warn > span {
  background: #fff5df;
}

.story-action > span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #39b56c;
}

.story-action.warn > span::before {
  background: #ff9f1c;
}

.story-action strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.story-action small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.38;
}

.story-mini-meter {
  padding: 11px 12px 12px;
}

.story-mini-meter span {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
}

.story-mini-meter div {
  height: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(228, 235, 250, 0.98), rgba(239, 243, 253, 0.96));
  border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(31, 60, 125, 0.08);
}

.story-mini-meter i {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #ffb347, #7d49ff 46%, #1765ff);
  border-radius: inherit;
}

.story-panel,
.story-pipeline,
.story-health-item {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(220, 229, 245, 0.98);
  border-radius: 22px;
  box-shadow: 0 16px 36px rgba(34, 68, 139, 0.08);
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.hero-storyboard:hover .story-panel-main {
  transform: translate3d(calc(var(--pointer-x) * 6px), calc(var(--pointer-y) * 3px - 2px), 0);
  box-shadow: 0 22px 48px rgba(34, 68, 139, 0.12);
}

.hero-storyboard:hover .story-panel-score {
  transform: translate3d(calc(var(--pointer-x) * -8px), calc(var(--pointer-y) * -7px - 2px), 0);
}

.hero-storyboard:hover .story-pipeline {
  transform: translate3d(calc(var(--pointer-x) * 3px), calc(var(--pointer-y) * -2px), 0);
}

.story-panel {
  padding: 16px;
}

.story-panel small,
.story-panel p,
.story-health-item small,
.story-step small {
  color: var(--muted);
}

.story-panel strong {
  display: block;
  margin: 8px 0 6px;
  color: var(--ink);
  font-size: 22px;
}

.story-panel-main {
  animation: story-float 6s ease-in-out infinite;
}

.story-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.story-badge {
  padding: 7px 10px;
  color: #5a34f2;
  background: linear-gradient(180deg, #f7f3ff, #f0ebff);
  border: 1px solid #e1d8ff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.story-panel-main p {
  max-width: 31ch;
  font-size: 14px;
  line-height: 1.55;
}

.story-cluster-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.story-cluster-list span {
  padding: 8px 11px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(246, 249, 255, 0.98), rgba(239, 244, 255, 0.92));
  border: 1px solid rgba(216, 225, 244, 0.98);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.story-panel-score {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 247, 255, 0.94));
  animation: story-rise 5.8s ease-in-out infinite;
}

.story-panel-score p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.story-score-orb {
  position: relative;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: conic-gradient(from 210deg, #ffb347 0 18%, #7d49ff 50%, #1765ff 86%, rgba(223, 231, 246, 0.9) 86% 100%);
  box-shadow: 0 18px 34px rgba(53, 92, 194, 0.18);
}

.story-score-orb::after {
  content: "";
  position: absolute;
  inset: 11px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 255, 0.96));
  border: 1px solid rgba(223, 231, 246, 0.94);
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.story-score-orb span,
.story-score-orb small {
  position: relative;
  z-index: 1;
}

.story-score-orb span {
  align-self: end;
  margin-top: 14px;
  color: var(--ink);
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}

.story-score-orb small {
  align-self: start;
  margin-top: -10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.story-pipeline {
  grid-column: 1 / -1;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.story-pipeline > i {
  flex: 0 0 18px;
  height: 2px;
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 179, 71, 0.84), rgba(23, 101, 255, 0.74));
}

.story-step {
  flex: 1;
  min-width: 0;
  padding: 10px 11px;
  background: rgba(247, 250, 255, 0.92);
  border: 1px solid rgba(217, 226, 245, 0.95);
  border-radius: 18px;
}

.story-step span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  color: var(--blue);
  background: rgba(235, 241, 255, 0.96);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.story-step strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.story-step small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.4;
}

.story-step.active {
  border-color: rgba(163, 188, 255, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 8px 18px rgba(53, 92, 194, 0.08);
}

.story-health {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.story-health-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.story-health-head span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.story-health-head strong {
  color: var(--blue);
  font-size: 14px;
  font-weight: 900;
}

.story-health-item {
  padding: 11px 12px 10px;
}

.story-meter {
  height: 8px;
  margin: 8px 0 6px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(228, 235, 250, 0.98), rgba(239, 243, 253, 0.96));
  border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(31, 60, 125, 0.08);
}

.story-meter i {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #ffb347, #7d49ff 46%, #1765ff);
  border-radius: inherit;
  box-shadow: 0 6px 16px rgba(61, 105, 255, 0.18);
}

.story-health-item small {
  display: block;
  font-size: 12px;
  line-height: 1.4;
}

.story-node {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff9f1c, #1765ff);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14), 0 6px 14px rgba(23, 101, 255, 0.06);
  opacity: 0;
  z-index: 0;
}

.story-node.a {
  left: 12%;
  bottom: 12px;
  animation: story-ball-glide 9.2s linear infinite;
}

.story-node.b {
  left: 62%;
  bottom: 6px;
  animation: story-ball-glide 10.8s linear infinite 1.8s;
}

.story-node.c {
  right: 12%;
  bottom: 30px;
  animation: story-ball-glide 12.2s linear infinite 3.1s;
}

.story-node.d {
  width: 13px;
  height: 13px;
  left: 38%;
  bottom: -8px;
  opacity: 0;
  background: linear-gradient(135deg, rgba(255, 182, 72, 0.3), rgba(23, 101, 255, 0.26));
  animation: story-ball-glide 13s linear infinite 0.8s;
}

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

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

@keyframes story-ball-glide {
  0% {
    transform: translate3d(0, 18px, 0) scale(0.78);
    opacity: 0;
  }
  14% {
    opacity: 0.45;
  }
  68% {
    opacity: 0.34;
  }
  100% {
    transform: translate3d(0, -220px, 0) scale(1.12);
    opacity: 0;
  }
}

@keyframes composer-idle {
  0%,
  100% {
    transform: perspective(1200px) rotateX(calc(var(--pointer-y) * -4deg)) rotateY(calc(var(--pointer-x) * 6deg)) translate3d(calc(var(--pointer-x) * 4px), calc(var(--pointer-y) * 4px), 0);
  }
  50% {
    transform: perspective(1200px) rotateX(calc(var(--pointer-y) * -4deg)) rotateY(calc(var(--pointer-x) * 6deg)) translate3d(calc(var(--pointer-x) * 4px), calc(var(--pointer-y) * 4px - 6px), 0);
  }
}

@keyframes composer-score-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

@keyframes brand-mark-idle {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-1px) rotate(2deg) scale(1.015);
  }
}

@keyframes composer-spark {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(8deg) scale(1.06);
  }
}

.hero-product-card::before,
.blog-hero::before,
.auth-panel::before,
.billing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(122, 60, 255, 0.08), transparent 38%),
    linear-gradient(300deg, rgba(23, 101, 255, 0.08), transparent 42%);
  border-radius: inherit;
}

.mock-form,
.score-preview,
.hero-product-card > * {
  position: relative;
}

.mock-form {
  display: grid;
  gap: 15px;
}

.mock-static {
  pointer-events: none;
}

.mock-form-head {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 23px;
}

.spark-icon {
  width: 34px;
  height: 34px;
  display: inline-block;
  background: linear-gradient(135deg, #a98aff, #1765ff);
  clip-path: polygon(50% 0, 61% 34%, 96% 50%, 61% 66%, 50% 100%, 39% 66%, 4% 50%, 39% 34%);
}

.mock-columns,
.columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mock-field {
  display: grid;
  gap: 7px;
  color: var(--soft-ink);
  font-size: 13px;
  font-weight: 800;
}

.mock-input,
.mock-button {
  min-height: 50px;
  display: flex;
  align-items: center;
  border-radius: 14px;
}

.mock-input {
  padding: 0 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #dce5f5;
  box-shadow: 0 10px 26px rgba(34, 68, 139, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.mock-button {
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--blue));
  box-shadow: 0 16px 30px rgba(39, 102, 255, 0.22);
  font-weight: 900;
}

label {
  color: var(--soft-ink);
  font-size: 13px;
}

input,
textarea,
select {
  min-height: 50px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #dce5f5;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(34, 68, 139, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

textarea {
  line-height: 1.55;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #7c67ff;
  box-shadow: 0 0 0 4px rgba(122, 60, 255, 0.12), 0 14px 34px rgba(34, 68, 139, 0.1);
}

.score-preview {
  min-height: 248px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(circle closest-side, #fff 65%, transparent 67%),
    conic-gradient(var(--violet) 0 76%, #dfe6f6 76% 100%);
}

.score-preview strong {
  font-size: 42px;
  line-height: 1;
}

.score-preview span,
.score-preview small {
  color: var(--muted);
  display: block;
}

.metric-ribbon {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 8px 0 30px;
}

.metric-ribbon article {
  padding: 22px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--neo-shadow-soft);
}

.metric-ribbon span,
.metric-ribbon small {
  display: block;
  color: var(--muted);
}

.metric-ribbon .rolling-number {
  color: var(--ink);
}

.feature-band,
.workflow-grid,
.article-grid,
.stats-grid {
  gap: 22px;
}

.feature-band > div,
.workflow-section,
.panel,
.stat-card,
.article-card,
.auth-panel,
.auth-card,
.dashboard-pro,
.billing-hero,
.billing-package-card,
.site-card,
.row,
.test-box,
.advanced-box {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--neo-shadow-soft);
}

.feature-band > div {
  min-height: 210px;
  padding: 26px;
}

.feature-band span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: #eef4ff;
  border-radius: 18px;
}

.feature-band strong {
  color: var(--ink);
  font-size: 21px;
}

.workflow-section {
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  margin-top: 30px;
  padding: 32px;
}

.workflow-section h2,
h2 {
  font-family: inherit;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.2;
}

.workflow-grid div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: none;
}

.dashboard-pro {
  position: relative;
  overflow: hidden;
  padding: 34px;
  margin-bottom: 24px;
  border-radius: 26px;
}

.dashboard-pro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(122, 60, 255, 0.08), transparent 34%), linear-gradient(300deg, rgba(23, 101, 255, 0.07), transparent 42%);
}

.dashboard-pro > * {
  position: relative;
}

.stat-card {
  padding: 24px;
  border-top: 0 !important;
}

.stat-card strong {
  color: var(--ink);
  font-family: inherit;
  font-size: 44px;
}

.workspace-grid {
  grid-template-columns: minmax(0, 0.98fr) minmax(390px, 1.02fr);
}

.pro-workspace.has-site,
.pro-workspace.needs-site {
  grid-template-columns: 1fr;
  gap: 10px;
}

.pro-workspace.has-site .generate-panel,
.pro-workspace.needs-site .generate-panel {
  position: static;
}

.pro-workspace.needs-site .connect-panel {
  order: -1;
}

.generate-panel {
  overflow: hidden;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.article-composer-head {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.article-composer-head h2 {
  margin: 0;
  font-size: 32px;
}

.composer-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #fbfaff, #eee8ff);
  border: 1px solid #ded6ff;
  border-radius: 13px;
  box-shadow: 0 14px 26px rgba(92, 74, 205, 0.10);
}

.composer-icon::before {
  content: "";
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #7d49ff, #1765ff);
  clip-path: polygon(15% 76%, 44% 18%, 77% 4%, 62% 38%, 89% 34%, 49% 84%, 17% 96%, 35% 69%);
}

.generate-panel form.stack {
  gap: 10px;
  margin-top: 0;
}

.generate-panel form.stack > .muted {
  margin: 0;
}

.composer-section {
  padding: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 14px 38px rgba(34, 68, 139, 0.06);
}

.composer-section label {
  gap: 6px;
}

.field-hint,
.composer-helper-row {
  color: #68779e;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.composer-helper-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
}

.section-label-row {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.panel {
  padding: 28px;
}

.panel-title h2,
.section-head h2 {
  font-size: 28px;
}

.package-preview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.package-chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: none;
}

.article-seo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: start;
}

.article-input-stack {
  display: grid;
  gap: 14px;
  align-content: start;
}

.article-side-stack {
  display: grid;
  gap: 18px;
  align-content: start;
}

.seo-power-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  min-height: 0;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 0%, rgba(125, 73, 255, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff, #fbfaff);
  border: 1px solid #ded8ff;
  border-radius: 22px;
  box-shadow: 0 22px 54px rgba(92, 74, 205, 0.12);
}

.article-seo-layout .article-side-stack {
  position: sticky;
  top: 116px;
}

.seo-power-head {
  display: grid;
  gap: 8px;
}

.seo-power-head .eyebrow {
  width: fit-content;
  margin: 0;
}

.seo-power-copy {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}

.seo-power-ring {
  align-self: center;
  justify-self: center;
}

.keyword-field {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
  background: #fff;
  border: 1px solid #dce5f5;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(34, 68, 139, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.keyword-chip-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  min-height: 10px;
}

.keyword-chip-list:empty {
  display: none;
}

.keyword-chip {
  min-height: 36px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  background: linear-gradient(180deg, #f8f4ff, #eef4ff);
  border: 1px solid #dcd2ff;
  border-radius: 999px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 800;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.keyword-chip:hover {
  color: #fff;
  background: linear-gradient(135deg, #7d49ff, #1765ff);
  border-color: rgba(23, 101, 255, 0.34);
  box-shadow: 0 12px 22px rgba(57, 103, 255, 0.20);
  transform: translateY(-1px);
}

.keyword-chip:hover strong,
.keyword-chip:hover span {
  color: #fff;
}

.keyword-chip strong {
  font-size: 18px;
  line-height: 1;
}

.keyword-composer {
  min-height: 46px;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.keyword-composer:focus {
  box-shadow: none;
  border: 0;
  transform: none;
}

.keyword-field.is-limit-reached {
  background: #f8fbff;
  border-color: #cfe0fb;
}

.keyword-field.is-limit-reached .keyword-composer {
  color: var(--muted);
  font-weight: 800;
}

.seo-power-ring {
  --ring-track: #dce5f8;
  width: 106px;
  height: 106px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 999px;
  background:
    radial-gradient(circle closest-side, #fff 66%, transparent 68%),
    conic-gradient(var(--score-accent, var(--violet)) 0 var(--score-percent), var(--ring-track) var(--score-percent) 100%);
  box-shadow: inset 0 0 0 1px #e5e9f7;
  transition: --score-accent 180ms ease, background 180ms ease, transform 260ms ease, box-shadow 260ms ease;
}

.seo-power-ring strong {
  color: var(--ink);
  font-size: 32px;
  line-height: 1;
}

.seo-power-ring.is-pulsing {
  transform: scale(1.04);
  box-shadow: inset 0 0 0 1px #e5e9f7, 0 18px 32px rgba(92, 74, 205, 0.18);
}

.seo-power-ring span {
  margin-top: -6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.seo-power-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
}

.seo-power-card .muted[data-seo-message] {
  min-height: 38px;
}

.seo-power-card .eyebrow {
  margin-bottom: 0;
}

.seo-power-bars {
  height: 10px;
  overflow: hidden;
  background: #e9eefb;
  border-radius: 999px;
}

.seo-power-bars span {
  width: 0;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, var(--score-bar-start, var(--violet)), var(--score-accent, var(--blue)), var(--score-bar-end, var(--green)));
  border-radius: inherit;
  transition: width 220ms ease, --score-accent 180ms ease, --score-bar-start 180ms ease, --score-bar-end 180ms ease;
}

.seo-power-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.seo-power-meta span {
  padding: 7px 10px;
  color: var(--soft-ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

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

.seo-checklist article {
  min-height: 66px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.seo-checklist article strong,
.seo-checklist article span {
  display: block;
}

.seo-checklist article strong {
  color: var(--ink);
  font-size: 13px;
}

.seo-checklist article span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.seo-checklist article[data-state="good"] {
  border-color: rgba(26, 169, 103, 0.25);
  background: linear-gradient(180deg, rgba(239, 255, 247, 0.9), rgba(255, 255, 255, 0.9));
}

.seo-checklist article[data-state="warn"] {
  border-color: rgba(255, 159, 28, 0.28);
  background: linear-gradient(180deg, rgba(255, 248, 239, 0.94), rgba(255, 255, 255, 0.9));
}

.seo-tip {
  min-height: 62px;
  margin: 0;
  padding: 12px 14px;
  color: var(--soft-ink);
  background: rgba(255, 255, 255, 0.78);
  border: 1px dashed #d8def1;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.55;
}

.keyword-suggestions {
  display: grid;
  gap: 8px;
  padding: 10px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px dashed #d8def1;
  border-radius: 0;
}

.keyword-suggestions[hidden] {
  display: none;
}

.keyword-suggestions strong,
.keyword-suggestions small {
  display: block;
}

.keyword-suggestions strong {
  color: var(--ink);
  font-size: 13px;
}

.keyword-suggestions small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.keyword-suggestions div {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

.keyword-suggestions button {
  min-height: 34px;
  padding: 7px 11px;
  color: var(--soft-ink);
  background: rgba(248, 244, 255, 0.58);
  border: 1px solid #dcd2ff;
  border-radius: 999px;
  box-shadow: none;
  font-size: 12px;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.keyword-suggestions button:hover {
  color: #fff;
  background: linear-gradient(135deg, #7d49ff, #1765ff);
  border-color: rgba(23, 101, 255, 0.34);
  box-shadow: 0 12px 22px rgba(57, 103, 255, 0.18);
  transform: translateY(-1px);
}

.credit-choice-grid,
.quality-choice-grid,
.composer-options-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.quality-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.composer-options-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.credit-choice-card,
.quality-choice-card {
  position: relative;
  min-height: 86px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: #fff;
  border: 1px solid #dde6f6;
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

.credit-choice-card:hover,
.quality-choice-card:hover {
  transform: translateY(-2px);
  border-color: #c8baff;
  box-shadow: 0 16px 32px rgba(92, 74, 205, 0.11);
}

.credit-choice-card input,
.quality-choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-dot {
  width: 17px;
  height: 17px;
  border: 2px solid #cdd8ee;
  border-radius: 999px;
  box-shadow: inset 0 0 0 4px #fff;
}

.credit-choice-card:has(input:checked),
.quality-choice-card:has(input:checked) {
  background: linear-gradient(180deg, #fff, #faf8ff);
  border-color: #8b63ff;
  box-shadow: 0 18px 34px rgba(92, 74, 205, 0.13), inset 0 0 0 1px rgba(125, 73, 255, 0.16);
}

.credit-choice-card:has(input:checked) .choice-dot,
.quality-choice-card:has(input:checked) .choice-dot {
  background: #7d49ff;
  border-color: #7d49ff;
}

.credit-choice-card strong,
.credit-choice-card small,
.credit-choice-card em,
.quality-choice-card strong,
.quality-choice-card small {
  display: block;
}

.credit-choice-card strong,
.quality-choice-card strong {
  color: var(--ink);
  font-size: 15px;
}

.credit-choice-card small {
  margin-top: 3px;
  color: #6547e8;
  font-size: 13px;
  font-weight: 900;
}

.quality-choice-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.credit-choice-card em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.composer-submit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.48fr);
  gap: 14px;
  align-items: center;
  margin: 0 0 2px;
}

.composer-submit-row .button {
  width: 100%;
}

.dashboard-compose-shell {
  display: grid;
  gap: 18px;
  margin-bottom: 26px;
}

.dashboard-compose-shell.needs-site .connect-panel {
  order: -1;
}

.dashboard-compose-panel {
  display: grid;
  gap: 18px;
}

.compose-page-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.compose-page-head h1 {
  margin: 0;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.1;
}

.compose-page-head h1 span {
  display: inline-flex;
  margin-left: 8px;
  padding: 7px 11px;
  color: #6547e8;
  background: #f2edff;
  border: 1px solid #ded4ff;
  border-radius: 999px;
  font-size: 13px;
  vertical-align: middle;
}

.compose-page-head p {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.credit-wallet {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(34, 68, 139, 0.08);
}

.compose-form {
  display: grid;
  gap: 16px;
}

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

.summary-card,
.compose-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(34, 68, 139, 0.07);
}

.summary-card {
  min-height: 76px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.summary-icon,
.compose-card-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #7d49ff;
  background: #f2edff;
  border-radius: 999px;
  font-weight: 900;
  /* Kalıtılan satır yüksekliği (☆, ▧, ϟ gibi) glifleri dairede aşağı
     kaydırıyordu; 1'e sabitleyince tam ortalanır. */
  line-height: 1;
}

.summary-copy small,
.summary-copy strong,
.summary-copy em {
  display: block;
}

.summary-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.summary-copy strong,
.summary-select-card select {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.summary-copy em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.summary-ok {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #159a55;
  border: 2px solid #6fd199;
  border-radius: 999px;
  font-size: 12px;
}

.summary-select-card select {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.summary-select-card select:focus {
  box-shadow: none;
  transform: none;
}

.compose-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 16px;
  align-items: start;
}

.compose-left-column,
.compose-right-column {
  display: grid;
  gap: 16px;
  align-content: start;
}

.compose-card {
  padding: 18px;
}

.compose-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}

.compose-card-head.compact {
  margin-bottom: 10px;
}

.compose-card-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
}

.compose-card-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.compose-card-head > span:last-child {
  color: #65739b;
  font-size: 12px;
  font-weight: 850;
}

.subject-card textarea {
  min-height: 112px;
}

.compose-helper-row {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid #e6edf8;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.topic-suggestions,
.keyword-suggestions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.topic-suggestions[hidden],
.keyword-suggestions[hidden] {
  display: none;
}

.topic-suggestions strong,
.keyword-suggestions strong {
  color: var(--ink);
  font-size: 12px;
}

.topic-suggestions div,
.keyword-suggestions div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topic-suggestions button,
.keyword-suggestions button {
  min-height: 30px;
  padding: 6px 12px;
  color: var(--soft-ink);
  background: rgba(248, 244, 255, 0.62);
  border: 1px solid #dcd2ff;
  border-radius: 999px;
  box-shadow: none;
  font-size: 12px;
}

.keyword-entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.keyword-entry-row .keyword-field {
  min-height: 54px;
}

.keyword-suggest-button {
  min-height: 54px;
  white-space: nowrap;
}

.keyword-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.keyword-mini-stats article {
  padding: 12px;
  background: #fff;
}

.keyword-mini-stats article + article {
  border-left: 1px solid var(--line);
}

.keyword-mini-stats strong,
.keyword-mini-stats span {
  display: block;
}

.keyword-mini-stats strong {
  color: var(--ink);
  font-size: 13px;
}

.keyword-mini-stats span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

/* .featured-image-card sabit min-height kullanmaz: Pexels modunda havuz
   kapanınca kart içeriğe göre daralır ("Görseli Şimdi Seç" altında boşluk
   kalmaz); açılıp kapanma havuz animasyonuyla birlikte yumuşak akar. */

/* Önizleme sağ üstündeki × : görsel görünürken pop animasyonuyla belirir,
   hem Pexels görselini hem manuel yüklenen kapak görselini kaldırır. */
.image-preview-frame .preview-remove-button {
  /* Global `button` kuralı (min-height: 50px, padding: 14px 24px) daireyi
     ovalleştiriyordu; küçük resim ×'leriyle aynı görünüm için sıfırlanır.
     × işareti font glifi yerine ::before/::after çubuklarıyla çizilir —
     böylece dairenin tam ortasında durur. */
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  min-height: 34px;
  min-width: 34px;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--bad);
  color: #fff;
  font-size: 0;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(180, 35, 24, 0.25);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  animation: preview-remove-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.image-preview-frame .preview-remove-button::before,
.image-preview-frame .preview-remove-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2.5px;
  border-radius: 3px;
  background: #fff;
}

.image-preview-frame .preview-remove-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.image-preview-frame .preview-remove-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.image-preview-frame .preview-remove-button:hover {
  background: #e11d48;
  transform: scale(1.1);
  box-shadow: 0 10px 22px rgba(225, 29, 72, 0.35);
}

.image-preview-frame .preview-remove-button:active {
  transform: scale(0.94);
}

/* Görsel yokken (placeholder görünürken) × gizlenir. */
.image-preview-frame:has(img[hidden]) .preview-remove-button {
  display: none;
}

@keyframes preview-remove-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Manuel yükleme modunda önizleme çerçevesi tıklanabilir yükleme alanıdır. */
.featured-image-frame.is-clickable .image-preview-frame {
  cursor: pointer;
}

.featured-image-frame.is-clickable .image-preview-frame:hover,
.featured-image-frame.is-dragover .image-preview-frame {
  border-color: #7d49ff;
  box-shadow: 0 18px 42px rgba(125, 73, 255, 0.15);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .image-preview-frame .preview-remove-button {
    animation: none;
  }
}

.image-dropzone {
  position: relative;
  display: grid;
  gap: 12px;
  cursor: pointer;
}

.image-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.image-preview-frame {
  position: relative;
  min-height: 220px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--soft-ink);
  background:
    radial-gradient(circle at 16% 18%, rgba(125, 73, 255, 0.14), transparent 28%),
    linear-gradient(135deg, rgba(246, 249, 255, 0.96), rgba(255, 255, 255, 0.72));
  border: 1px dashed #cfc5ff;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth), transform var(--transition-smooth);
}

.image-preview-frame::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 12px;
  pointer-events: none;
}

.image-preview-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview-placeholder {
  position: relative;
  z-index: 1;
  max-width: 260px;
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 18px;
  text-align: center;
}

.image-preview-placeholder[hidden] {
  display: none;
}

.image-preview-placeholder strong {
  color: var(--ink);
  font-size: 16px;
}

.image-preview-placeholder small,
.image-dropzone-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.image-dropzone-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: var(--ink);
  background: rgba(248, 244, 255, 0.68);
  border: 1px solid #ded4ff;
  border-radius: 14px;
  font-size: 13px;
}

.image-dropzone:hover .image-preview-frame,
.image-dropzone:focus-within .image-preview-frame {
  border-color: #7d49ff;
  box-shadow: 0 18px 42px rgba(125, 73, 255, 0.15);
  transform: translateY(-1px);
}

.compose-card.seo-power-card {
  display: grid;
  gap: 12px;
  min-height: 0;
  padding: 18px;
}

.seo-score-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.compose-card.seo-power-card .seo-power-ring {
  justify-self: center;
}

.compose-card.seo-power-card .muted[data-seo-message] {
  min-height: 0;
  margin: 0;
}

.compose-card.seo-power-card .seo-tip {
  min-height: 0;
}

.compose-card.seo-power-card .seo-power-bars,
.compose-card.seo-power-card .seo-power-meta {
  display: none;
}

.compose-right-column .credit-choice-grid,
.compose-right-column .quality-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.compose-right-column .quality-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compose-right-column .credit-choice-card,
.compose-right-column .quality-choice-card {
  min-height: 82px;
  padding: 11px;
  gap: 8px;
}

.compose-options-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.compose-submit-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(260px, 0.35fr);
  gap: 14px;
  align-items: center;
}

.compose-submit-bar > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.compose-submit-bar .button {
  width: 100%;
}

@media (max-width: 1100px) {
  .compose-summary-row,
  .compose-main-grid,
  .compose-options-row,
  .compose-submit-bar {
    grid-template-columns: 1fr;
  }

  .compose-right-column {
    grid-row: auto;
  }

  .compose-right-column .credit-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .compose-page-head {
    display: grid;
  }

  .credit-wallet {
    justify-self: start;
  }

  .keyword-entry-row,
  .keyword-mini-stats,
  .seo-score-row,
  .admin-image-grid,
  .compose-right-column .credit-choice-grid,
  .compose-right-column .quality-choice-grid {
    grid-template-columns: 1fr;
  }

  .keyword-mini-stats article + article {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .compose-card,
  .summary-card {
    padding: 14px;
  }
}

.billing-page {
  gap: 30px;
}

.billing-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 58px 42px;
  overflow: hidden;
}

.billing-hero h1 {
  font-size: 56px;
}

.billing-shell,
.billing-packages {
  padding: 0;
}

.billing-section-head {
  justify-content: center;
  text-align: center;
}

.billing-section-head .eyebrow {
  margin-left: auto;
  margin-right: auto;
}

.billing-package-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 20px;
  align-items: stretch;
}

.billing-package-card {
  min-height: 100%;
  height: 100%;
  padding: 34px 28px;
  border-radius: 24px;
  grid-template-rows: auto auto auto 1fr auto;
}

.billing-package-card.premium {
  border: 2px solid #6846ff;
  transform: none;
}

.billing-package-card::before,
.billing-package-card.featured::after {
  display: none;
}

.billing-package-card strong {
  font-size: 34px;
  font-family: inherit;
}

.billing-price-block,
.billing-package-meta {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: none;
}

.billing-package-card.premium .billing-price-block {
  background: linear-gradient(135deg, var(--violet), var(--blue));
}

.billing-package-card b {
  color: var(--ink);
  font-family: inherit;
}

.billing-badge,
.billing-bonus {
  background: #f2edff;
  color: #5a34f2;
  border-color: #ded4ff;
}

.auth-shell {
  grid-template-columns: minmax(0, 1fr) minmax(410px, 0.82fr);
  align-items: stretch;
  min-height: auto;
  padding: 50px 0 22px;
}

.auth-panel {
  position: relative;
  overflow: hidden;
  padding: 42px;
  justify-content: center;
}

.auth-panel h1 {
  font-size: 58px;
}

.auth-card {
  padding: 42px;
  border-radius: 28px;
}

.auth-points span {
  border-radius: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
}

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

.blog-hero {
  position: relative;
  min-height: 300px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: center;
  overflow: hidden;
}

.blog-hero::after {
  content: "SEO";
  position: relative;
  z-index: 1;
  width: 260px;
  height: 190px;
  display: grid;
  place-items: center;
  justify-self: center;
  color: #fff;
  background: linear-gradient(135deg, #a98aff, #1765ff);
  border-radius: 28px;
  box-shadow: 0 30px 70px rgba(87, 73, 222, 0.28);
  font-size: 56px;
  font-weight: 950;
}

.article-card {
  min-height: 410px;
  padding: 16px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
}

.article-card img,
.article-placeholder,
.article-cover {
  border-radius: 18px;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), filter 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.article-card:hover {
  transform: translateY(-8px) rotate(-0.35deg);
  box-shadow: 0 26px 58px rgba(34, 68, 139, 0.15);
}

.article-card:hover img,
.article-card:hover .article-placeholder {
  transform: scale(1.035);
  filter: saturate(1.04);
}

.article-placeholder {
  background:
    linear-gradient(135deg, rgba(122, 60, 255, 0.22), transparent 44%),
    linear-gradient(315deg, rgba(23, 101, 255, 0.18), transparent 44%),
    #f4f6ff;
}

.article-card span {
  width: fit-content;
  padding: 6px 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--blue));
  border-radius: 999px;
}

.article-card strong {
  color: var(--ink);
  font-size: 21px;
}

.article-card::after {
  content: "↗";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--blue));
  border-radius: 999px;
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}

.article-card:hover::after {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.article-detail {
  border-radius: 28px;
}

.article-detail h1 {
  font-size: 52px;
}

.article-body h2 {
  font-size: 28px;
}

.table,
.site-grid {
  gap: 14px;
}

.row {
  background: #fff;
}

.site-card {
  background: #fff;
}

.notice {
  border-radius: 16px;
  background: #fff;
}

.site-footer {
  width: min(1210px, calc(100% - 32px));
  margin: 0 auto 30px;
  padding: 34px 0 10px;
  display: grid;
  grid-template-columns: 1.35fr repeat(3, minmax(150px, 1fr));
  gap: 34px;
  border-top: 1px solid var(--line);
}

.site-footer .brand {
  font-size: 22px;
}

.site-footer .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.site-footer .brand-mark::before {
  inset: 2px;
}

.site-footer .brand-mark::after {
  width: 10px;
  height: 10px;
  top: 4px;
  right: 3px;
}

.site-footer p,
.site-footer a {
  color: var(--soft-ink);
}

.site-footer a {
  transition: color var(--transition-smooth), transform var(--transition-smooth);
}

.site-footer a:hover {
  color: var(--blue);
  transform: translateX(4px);
}

.site-footer > div {
  display: grid;
  align-content: start;
  gap: 10px;
}

.site-footer strong {
  color: var(--ink);
}

.social-dots {
  display: flex;
  gap: 10px;
}

.social-dots span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--soft-ink);
  background: #f0f4fb;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  transition: transform var(--transition-smooth), background var(--transition-smooth), color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.social-dots span:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--blue));
  box-shadow: 0 16px 28px rgba(39, 102, 255, 0.24);
  transform: translateY(-2px);
}

.footer-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 8px;
}

.footer-form button {
  min-height: 48px;
  padding: 0;
}

.admin-article-editor {
  padding: 0;
  overflow: hidden;
}

.admin-article-editor summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-article-editor summary span {
  display: block;
}

.admin-article-editor summary small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.admin-article-editor form.stack {
  margin: 0;
  padding: 0 18px 18px;
}

.admin-article-editor textarea[name="content_html"] {
  min-height: 420px;
  font-family: "Courier New", monospace;
  font-size: 14px;
}

.admin-page-settings-panel,
.admin-blog-panel {
  margin-top: 22px;
}

.admin-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 20px;
}

.admin-page-editor {
  padding: 0;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.admin-page-editor summary {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(110px, max-content) 32px;
  align-items: center;
  gap: 12px;
}

.admin-page-editor summary > .site-mode {
  justify-self: start;
}

.admin-page-editor summary::after {
  content: "+";
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: #eef4ff;
  border-radius: 999px;
  font-weight: 900;
  transition: transform var(--transition-smooth), background var(--transition-smooth), color var(--transition-smooth);
}

.admin-page-editor[open] summary::after {
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--blue));
  transform: rotate(45deg);
}

.admin-page-editor[open] {
  box-shadow: 0 28px 58px rgba(34, 68, 139, 0.12);
  transform: translateY(-2px);
}

.admin-page-editor summary span {
  display: block;
}

.admin-page-editor summary > span:first-child {
  min-height: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.admin-page-editor summary small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.admin-page-editor form.stack {
  margin: 0;
  padding: 0 16px 16px;
}

.admin-blog-create {
  margin-bottom: 26px;
}

.admin-image-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(248, 244, 255, 0.72), rgba(255, 255, 255, 0.96));
  border: 1px solid var(--line);
  border-radius: 16px;
}

.admin-image-card > div:first-child {
  display: grid;
  gap: 4px;
}

.admin-image-card strong {
  color: var(--ink);
}

.admin-image-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.admin-image-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
  gap: 12px;
  align-items: stretch;
}

.admin-image-dropzone .image-preview-frame {
  min-height: 138px;
}

.admin-image-dropzone .image-preview-placeholder {
  padding: 14px;
}

.article-pagination {
  display: grid;
  gap: 18px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.article-pagination.is-dual {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.article-pagination.is-single {
  grid-template-columns: 1fr;
  max-width: 520px;
}

.article-pagination-link {
  min-height: 120px;
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--neo-shadow-soft);
  transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.article-pagination-link:hover {
  transform: translateY(-2px);
  border-color: #cfd9f2;
  box-shadow: 0 22px 48px rgba(34, 68, 139, 0.1);
}

.article-pagination-link small {
  color: var(--muted);
}

.article-pagination-link strong {
  color: var(--ink);
  font-size: 18px;
}

.article-pagination-link.next {
  text-align: right;
}

.footer-copy {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 18px 0 0;
  font-size: 14px;
}

@media (max-width: 920px) {
  main,
  .topbar,
  .site-footer {
    width: min(100% - 24px, 1210px);
  }

  .topbar {
    min-height: 0;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    justify-items: stretch;
    gap: 12px;
    text-align: left;
  }

  .nav-left,
  .account-nav,
  .primary-nav {
    width: 100%;
    max-width: 100%;
    gap: 10px;
  }

  .nav-left {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .primary-nav,
  .account-nav {
    padding-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .primary-nav::-webkit-scrollbar,
  .account-nav::-webkit-scrollbar {
    display: none;
  }

  .account-nav .button.small,
  .account-nav .credit-pill {
    flex: 0 1 auto;
  }

  .brand {
    font-size: 24px;
    max-width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .hero,
  .dashboard-hero,
  .billing-layout,
  .auth-layout,
  .auth-shell,
  .workspace-grid,
  .workflow-section,
  .blog-hero,
  .billing-hero,
  .metric-ribbon,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .pro-hero {
    padding-top: 14px;
  }

  .hero h1,
  .dashboard-hero h1,
  .billing-layout h1,
  .auth-layout h1,
  .billing-hero h1,
  .auth-panel h1,
  .article-detail h1,
  .pro-hero h1 {
    font-size: 42px;
  }

  .lead {
    font-size: 16px;
  }

  .hero-product-card {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .hero-storyboard {
    min-height: 300px;
  }

  .score-preview {
    min-height: 170px;
  }

  .hero-proof,
  .package-preview-grid,
  .billing-package-grid,
  .article-grid,
  .feature-band,
  .stats-grid,
  .mock-columns,
  .columns,
  .admin-page-grid,
  .article-pagination {
    grid-template-columns: 1fr;
  }

  .hero-storyboard {
    min-height: 380px;
  }

  .composer-card {
    grid-template-columns: 1fr;
    width: min(100%, 460px);
  }

  .composer-row {
    grid-template-columns: 1fr;
  }

  .composer-score-preview {
    align-content: start;
  }

  .storyboard-stage,
  .story-health,
  .seo-checklist,
  .article-seo-layout,
  .credit-choice-grid,
  .quality-choice-grid,
  .composer-options-row,
  .composer-submit-row {
    grid-template-columns: 1fr;
  }

  .article-seo-layout {
    gap: 14px;
    grid-template-areas:
      "subject"
      "keyword"
      "side"
      "credit";
  }

  .article-input-stack {
    display: contents;
  }

  .subject-section {
    grid-area: subject;
  }

  .keyword-section {
    grid-area: keyword;
  }

  .article-side-stack {
    grid-area: side;
  }

  .credit-section {
    grid-area: credit;
  }

  .article-seo-layout .article-side-stack {
    position: static;
  }

  .seo-power-card {
    min-height: 0;
  }

  .story-pipeline {
    flex-direction: column;
    align-items: stretch;
  }

  .story-pipeline > i {
    width: 2px;
    height: 14px;
    margin: 0 auto;
  }

  .admin-side {
    grid-template-columns: 1fr;
  }

  .billing-package-card.premium {
    transform: none;
  }

  .auth-card,
  .auth-panel,
  .panel,
  .dashboard-pro,
  .billing-hero {
    padding: 24px;
  }

  .blog-hero::after {
    width: 100%;
  }

  .seo-power-card {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .article-composer-head {
    grid-template-columns: auto 1fr auto;
  }

  .article-composer-head .cost-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (min-width: 641px) and (max-width: 920px) {
  .topbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 18px 24px;
    padding: 12px 18px;
  }

  .nav-left {
    width: auto;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    gap: clamp(18px, 4vw, 38px);
  }

  .brand {
    flex: 0 0 auto;
  }

  .primary-nav {
    width: auto;
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: clamp(14px, 2.6vw, 26px);
  }

  .account-nav {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 12px;
  }
}

@media (max-width: 560px) {
  main,
  .topbar,
  .site-footer {
    width: min(100% - 18px, 1210px);
  }

  .topbar {
    margin-top: 9px;
    padding: 10px;
  }

  .brand {
    font-size: clamp(19px, 6vw, 22px);
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .primary-nav,
  .account-nav,
  .actions {
    justify-content: stretch;
  }

  .primary-nav,
  .account-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .primary-nav a,
  .account-nav a,
  .account-nav .button.small,
  .account-nav .credit-pill,
  .link-button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .primary-nav a,
  .account-nav a:not(.button):not(.credit-pill),
  .link-button {
    padding: 8px 5px;
    font-size: 13px;
  }

  .account-nav .button.small,
  .account-nav .credit-pill {
    min-height: 38px;
    padding: 8px 11px;
    font-size: 12px;
  }

  .hero-copy,
  .lead {
    max-width: 100%;
  }
}

.access-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 22px;
  padding: 22px;
  background: linear-gradient(135deg, #ffffff, #f4f9ff);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(31, 99, 214, 0.09);
}

.access-card.is-active {
  padding: 12px 18px;
  grid-template-columns: minmax(0, 1fr) auto;
  border-color: rgba(21, 115, 71, 0.24);
  background: linear-gradient(135deg, #ffffff, #f2fbf7);
  box-shadow: 0 12px 30px rgba(21, 115, 71, 0.08);
}

.access-card.is-active .access-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.access-card.is-active h2 {
  font-size: 18px;
}

.access-card.is-active p {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
}

.access-card.is-active .access-side {
  gap: 6px;
}

.access-card.is-active .access-side strong {
  font-size: 18px;
}

.access-card.is-active .access-side span {
  font-size: 12px;
}

.access-card.can-redeem {
  border-color: rgba(240, 138, 36, 0.28);
  background: linear-gradient(135deg, #ffffff, #fff8ef);
}

.access-main {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.access-icon {
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--amber));
  border-radius: 14px;
  font-weight: 900;
}

.access-card h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.access-card p {
  margin: 8px 0 0;
  color: var(--soft-ink);
  line-height: 1.55;
}

.access-side {
  display: grid;
  gap: 10px;
  justify-items: stretch;
}

.access-side strong {
  color: var(--teal-deep);
  font-size: 24px;
}

.access-side span {
  color: var(--muted);
  font-weight: 760;
}

.redeem-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.redeem-form label {
  margin: 0;
}

.credit-wallet {
  flex-wrap: wrap;
}

.credit-wallet small {
  width: 100%;
  color: var(--good);
  font-size: 11px;
  font-weight: 850;
}

.subscription-packages {
  padding-bottom: 8px;
}

.subscription-plan-card .billing-package-subtitle {
  color: var(--good);
}

.action-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  max-width: min(420px, calc(100vw - 32px));
  padding: 14px 16px;
  color: #0f5132;
  background: #ecfdf5;
  border: 1px solid rgba(21, 115, 71, 0.22);
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(31, 99, 214, 0.16);
  font-weight: 850;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.action-toast[data-type="bad"] {
  color: #842029;
  background: #fff2f2;
  border-color: rgba(180, 35, 24, 0.24);
}

.action-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 920px) {
  .access-card {
    grid-template-columns: 1fr;
  }

  .access-card.is-active {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .redeem-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .access-card {
    padding: 18px;
  }

  .access-card.is-active {
    grid-template-columns: 1fr;
    padding: 12px 14px;
  }

  .access-main {
    grid-template-columns: 1fr;
  }

  .access-card.is-active .access-main {
    grid-template-columns: 38px minmax(0, 1fr);
  }
}

.dashboard-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.copy-workspace-card,
.automation-day-grid,
.article-editor-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.copy-workspace-card {
  justify-content: space-between;
  padding: 14px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbff;
}

.copy-workspace-card span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}

.dashboard-ai-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.dashboard-ai-row small,
.ai-limit-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.ai-limit-note {
  display: block;
  margin-top: 8px;
}

.article-editor-layout,
.automation-layout {
  display: grid;
  gap: 22px;
}

.article-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--neo-shadow-soft);
}

.article-editor-head h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 54px);
  letter-spacing: 0;
}

.article-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
  min-width: 0;
}

.article-editor-layout {
  min-width: 0;
  overflow-x: visible;
}

.article-editor-main,
.article-editor-side {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.article-editor-main {
  position: relative;
}

.article-editor-side {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 112px);
  overflow: auto;
  align-self: start;
  padding-right: 2px;
}

.article-rich-editor {
  width: 100%;
  min-width: 0;
  min-height: 680px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  line-height: 1.72;
  outline: none;
  overflow-wrap: anywhere;
  word-break: break-word;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.article-rich-editor * {
  max-width: 100%;
}

.article-rich-editor.has-inline-action {
  padding-left: 24px;
}

.article-rich-editor table,
.article-rich-editor pre,
.article-rich-editor code {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.article-rich-editor:focus {
  border-color: rgba(31, 99, 214, 0.55);
  box-shadow: 0 0 0 4px rgba(31, 99, 214, 0.10);
}

.article-rich-editor .is-ai-edited-highlight {
  outline: 2px solid rgba(124, 58, 237, 0.72);
  outline-offset: 4px;
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.10);
}

.article-rich-editor h1,
.article-rich-editor h2,
.article-rich-editor h3 {
  letter-spacing: 0;
}

.article-rich-editor h1 {
  font-size: 34px;
}

.article-rich-editor h2 {
  font-size: 25px;
  margin-top: 30px;
}

.copy-html-box {
  min-height: 260px;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 13px;
}

.automation-builder {
  display: grid;
  gap: 16px;
}

.automation-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f8ff;
}

.automation-mode-switch label,
.automation-day-grid label {
  position: relative;
  cursor: pointer;
}

.automation-mode-switch input,
.automation-day-grid input {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  min-width: 0;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  border: 0;
  box-shadow: none;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  pointer-events: none;
}

.automation-mode-switch span {
  min-height: 46px;
  display: grid;
  place-items: center;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--soft-ink);
  font-weight: 850;
  text-align: center;
}

.automation-mode-switch input:checked + span {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--teal-deep));
  box-shadow: 0 10px 24px rgba(31, 99, 214, 0.20);
}

.automation-topic-count-label > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.automation-topic-count-label .form-note {
  margin: 0;
  white-space: nowrap;
}

.automation-topic-source[hidden] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

.automation-topic-stage {
  position: relative;
  min-width: 0;
  overflow: visible;
  will-change: height;
}

.automation-topic-stage.is-switching {
  overflow: hidden;
}

.automation-topic-stage.is-switching .automation-topic-source {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
}

.automation-topic-source {
  display: grid;
  gap: 12px;
  transform-origin: top;
  min-width: 0;
  will-change: opacity, transform, filter;
  transition:
    opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 460ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 360ms ease;
}

.automation-topic-source > * {
  transition:
    opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

.automation-topic-source.is-transitioning > * {
  opacity: 0;
  transform: translateY(10px);
}

.automation-topic-source.is-active > * {
  opacity: 1;
  transform: translateY(0);
}

.automation-topic-source.is-active > *:nth-child(2) {
  transition-delay: 36ms;
}

.automation-topic-source.is-active > *:nth-child(3) {
  transition-delay: 68ms;
}

.automation-topic-source.is-active > *:nth-child(4) {
  transition-delay: 96ms;
}

.automation-schedule-builder {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.schedule-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.schedule-toolbar strong,
.schedule-toolbar span {
  display: block;
}

.schedule-toolbar span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.schedule-presets {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.schedule-presets button {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft-ink);
  background: #fff;
  box-shadow: none;
  font-size: 13px;
}

button.has-empty-slots {
  border-color: rgba(230, 111, 0, 0.55) !important;
  color: #b45400 !important;
  background: rgba(255, 159, 28, 0.12) !important;
  font-weight: 800;
  animation: empty-slot-pulse 1.8s ease-in-out infinite;
}

@keyframes empty-slot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 111, 0, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(230, 111, 0, 0); }
}

.schedule-week-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 14px 0 10px;
  padding: 14px 18px;
  border: 2px solid rgba(31, 99, 214, 0.35);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(31, 99, 214, 0.08), rgba(255, 159, 28, 0.1));
  cursor: pointer;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.schedule-week-toggle:hover,
.schedule-week-toggle:active,
.schedule-week-toggle:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(31, 99, 214, 0.65);
  box-shadow: 0 14px 30px rgba(31, 99, 214, 0.18);
  background: linear-gradient(120deg, rgba(31, 99, 214, 0.14), rgba(255, 159, 28, 0.16));
  color: inherit;
}

.schedule-week-toggle:hover .week-toggle-text strong,
.schedule-week-toggle:active .week-toggle-text strong {
  color: #0d2f6b;
}

.schedule-week-toggle:hover .week-toggle-text small,
.schedule-week-toggle:active .week-toggle-text small {
  color: #33415e;
}

.schedule-week-toggle.is-active:hover,
.schedule-week-toggle.is-active:active {
  border-color: rgba(20, 148, 92, 0.7);
  background: linear-gradient(120deg, rgba(20, 148, 92, 0.16), rgba(31, 99, 214, 0.12));
}

.schedule-week-toggle.is-active:hover .week-toggle-text strong {
  color: #0a5636;
}

.schedule-week-toggle .week-toggle-icon {
  font-size: 26px;
  line-height: 1;
  animation: week-toggle-bounce 2.4s ease-in-out infinite;
}

@keyframes week-toggle-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.schedule-week-toggle .week-toggle-text {
  display: grid;
  gap: 2px;
  flex: 1;
}

.schedule-week-toggle .week-toggle-text strong {
  font-size: 15px;
  color: #123c86;
}

.schedule-week-toggle .week-toggle-text small {
  font-size: 12.5px;
  color: var(--soft-ink);
  line-height: 1.4;
}

.schedule-week-toggle .week-toggle-arrow {
  font-size: 20px;
  font-weight: 800;
  color: #1f63d6;
  transition: transform 0.18s ease;
}

.schedule-week-toggle:hover .week-toggle-arrow {
  transform: translateX(4px);
}

.schedule-week-toggle.is-active {
  border-color: rgba(20, 148, 92, 0.5);
  background: linear-gradient(120deg, rgba(20, 148, 92, 0.1), rgba(31, 99, 214, 0.08));
}

.schedule-week-toggle.is-active .week-toggle-text strong {
  color: #0d6b45;
}

.schedule-week-toggle.is-active .week-toggle-arrow {
  color: #0d6b45;
  transform: rotate(180deg);
}

.schedule-week-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 12px 0 6px;
  font-size: 13px;
  color: var(--soft-ink);
}

.schedule-week-label strong {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #123c86;
}

.schedule-week-label .week-range {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}

.automation-week-calendar.is-two-week .automation-day-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.automation-week-calendar.is-two-week .automation-day-grid label {
  min-width: 0;
  flex-direction: column;
  padding: 10px 6px;
  border-radius: 12px;
}

.automation-week-calendar.is-two-week .automation-day-grid label span {
  display: grid;
  gap: 3px;
  justify-items: center;
  text-align: center;
  width: 100%;
}

.automation-week-calendar .day-date {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}

.automation-week-calendar.is-two-week [data-week2-block] {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

@media (max-width: 640px) {
  .automation-week-calendar.is-two-week .automation-day-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.automation-day-grid {
  align-items: stretch;
}

/* Gün seçim çipleri: tüm görünüm stilleri dosya sonundaki
   "Yayın günü takvimi — cam (glassmorphism) tasarım" bölümünde. */
.automation-day-grid label {
  min-width: 82px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  font-weight: 800;
}

.automation-day-grid label span {
  display: grid;
  place-items: center;
  min-height: 42px;
  width: 100%;
}

.automation-hour-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

.automation-hour-grid button {
  min-height: 42px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft-ink);
  background: #fff;
  box-shadow: none;
  font-weight: 850;
  font-size: 13px;
}

.automation-hour-grid button.is-selected {
  color: #fff;
  border-color: rgba(240, 138, 36, 0.15);
  background: linear-gradient(135deg, var(--amber), #d36512);
}

.automation-plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.automation-plan-card {
  display: grid;
  gap: 14px;
}

.automation-topic-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-height: 220px;
  overflow: auto;
}

.automation-topic-list span {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--soft-ink);
  font-size: 13px;
}

.automation-topic-list span.used {
  color: var(--muted);
  text-decoration: line-through;
  background: #f2f5f9;
}

.automation-image-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 6px;
}

.automation-image-strip img {
  width: 76px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f2f5f9;
  flex: 0 0 auto;
}

.automation-mode-switch label:hover span {
  transform: translateY(-1px);
  border-color: rgba(31, 99, 214, 0.36);
  box-shadow: 0 10px 24px rgba(31, 99, 214, 0.14);
}

.multi-image-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 0;
}

/* Görsel yüklenmediyse önizleme alanı yer kaplamasın. */
.multi-image-preview:empty {
  display: none;
  padding: 0;
  margin: 0;
}

/* Otomasyon: kompakt, sola hizalı görsel yükleme satırı */
.automation-upload-title {
  color: var(--soft-ink);
  font-size: 13px;
  font-weight: 780;
}

.automation-upload-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px dashed #cfc5ff;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(246, 249, 255, 0.96), rgba(255, 255, 255, 0.72));
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.automation-upload-row:hover {
  border-color: #7c67ff;
  box-shadow: 0 10px 24px rgba(31, 99, 214, 0.1);
}

.automation-upload-row input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  opacity: 0;
  cursor: pointer;
}

.automation-upload-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(124, 103, 255, 0.12);
  color: #7c67ff;
  font-size: 20px;
}

.automation-upload-copy {
  flex: 1 1 auto;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.automation-upload-copy strong {
  color: var(--ink);
  font-size: 14px;
}

.automation-upload-copy small {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.automation-upload-cta {
  flex: 0 0 auto;
  pointer-events: none;
}

@media (max-width: 560px) {
  .automation-upload-cta {
    display: none;
  }
}

.multi-image-preview img {
  width: 112px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: var(--neo-shadow-soft);
}

.automation-image-item {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.automation-image-item > button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.automation-image-item img {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.automation-image-item > button:hover img {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 22px rgba(23, 34, 58, 0.18);
}

.image-delete-button {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: var(--bad);
  color: #fff;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(180, 35, 24, 0.22);
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(10, 18, 33, 0.72);
}

.image-lightbox img {
  max-width: min(960px, 92vw);
  max-height: 82vh;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.32);
}

.image-lightbox button {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 24px;
  cursor: pointer;
}

.job-subject-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.job-subject-cell img {
  width: 48px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #f2f5f9;
  flex: 0 0 auto;
}

@media (max-width: 1180px) {
  .article-editor-head,
  .copy-workspace-card {
    align-items: stretch;
    flex-direction: column;
  }

  .article-editor-grid {
    grid-template-columns: 1fr;
  }

  .article-editor-side {
    display: contents;
  }

  .article-editor-main,
  .article-editor-side {
    width: 100%;
  }

  .article-rich-editor {
    min-height: 460px;
    padding: 18px;
  }

  .mobile-edit-trigger {
    display: inline-flex !important;
  }

  .ai-edit-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 10020;
    width: auto;
    max-height: min(74vh, 640px);
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(22px);
    transition: opacity 180ms ease, visibility 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 28px 80px rgba(23, 34, 58, 0.24);
    border-radius: 18px 18px 12px 12px;
  }

  .ai-edit-panel h2 {
    padding-right: 34px;
    font-size: 23px;
  }

  .article-editor-side .danger-zone {
    display: grid;
  }

  .ai-edit-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .ai-edit-close,
  .ai-edit-close:hover,
  .ai-edit-close:focus-visible {
    display: grid;
    position: absolute;
    top: 12px;
    right: 12px !important;
    left: auto !important;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    place-items: center;
    color: var(--soft-ink);
    background: #f4f7fb;
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(23, 34, 58, 0.10);
    font-size: 0;
    transform: none !important;
  }

  .ai-edit-close::before,
  .ai-edit-close::after,
  .ai-edit-close:hover::before,
  .ai-edit-close:hover::after,
  .ai-edit-close:focus-visible::before,
  .ai-edit-close:focus-visible::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 13px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    transform-origin: center;
  }

  .ai-edit-close::before,
  .ai-edit-close:hover::before,
  .ai-edit-close:focus-visible::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  .ai-edit-close::after,
  .ai-edit-close:hover::after,
  .ai-edit-close:focus-visible::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }

  body.has-editor-modal::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 10010;
    background: rgba(10, 18, 33, 0.42);
  }

  body.has-editor-modal {
    position: fixed;
    top: var(--editor-scroll-y, 0);
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    touch-action: none;
  }

  body.has-editor-modal .danger-zone {
    display: none;
  }

  .automation-mode-switch {
    grid-template-columns: 1fr;
  }

  .automation-hour-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ban-screen {
  min-height: 66vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}

.ban-card {
  max-width: 680px;
  text-align: center;
}

.ban-card strong,
.ban-card small {
  display: block;
  margin-top: 10px;
}

.notice-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10, 18, 33, 0.52);
}

.notice-modal article {
  width: min(440px, 100%);
  padding: 22px;
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 28px 80px rgba(23, 34, 58, 0.24);
}

.notice-modal strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
}

.article-progress-foot {
  gap: 8px;
}

.article-progress-foot .button {
  padding: 8px 10px;
  min-height: 34px;
}

.workflow-section {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.workflow-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(31, 99, 214, 0.13);
  border-color: rgba(31, 99, 214, 0.18);
}

.workflow-grid > div {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.workflow-grid > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(23, 34, 58, 0.12);
  border-color: rgba(31, 99, 214, 0.18);
}

.admin-ban-form {
  flex-wrap: wrap;
}

.admin-ban-form input[name="ban_message"] {
  min-width: 180px;
}

.admin-automation-box {
  margin-top: 18px;
}

.admin-automation-list {
  margin-top: 16px;
}

.privacy-consent {
  align-items: flex-start;
  line-height: 1.45;
}

.privacy-page .article-body {
  overflow-wrap: anywhere;
}

.suggestion-chip,
.automation-topic-choice,
.upload-preview-item,
.job-image-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.suggestion-chip {
  gap: 4px;
}

.suggestion-chip > button:first-child {
  border-radius: 8px 4px 4px 8px;
}

.suggestion-remove {
  width: 26px;
  min-width: 26px;
  min-height: 34px;
  padding: 0;
  color: var(--bad);
  background: #fff2f2;
  border: 1px solid #ffd0cc;
  border-radius: 4px 8px 8px 4px;
  box-shadow: none;
  font-size: 15px;
}

.automation-topic-picker {
  margin-top: 10px;
}

.automation-topic-choice {
  width: 100%;
  gap: 10px;
  justify-content: space-between;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: grab;
}

.automation-topic-choice strong,
.automation-topic-choice input {
  flex: 1;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.automation-topic-choice input {
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 800;
}

.automation-topic-choice button {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--bad);
  background: #fff2f2;
  border: 1px solid #ffd0cc;
  border-radius: 999px;
  box-shadow: none;
  line-height: 1;
}

.automation-topic-picker .automation-topic-choice [data-choice-remove],
.automation-topic-picker .automation-topic-choice [data-choice-remove]:hover,
.automation-topic-picker .automation-topic-choice [data-choice-remove]:focus-visible {
  flex: 0 0 30px;
  width: 30px;
  max-width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--bad);
  background: #fff8ff;
  border: 1px solid #d8c9ff;
  border-radius: 999px;
  box-shadow: none;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  transform: none;
}

[data-automation-topic-list-existing] {
  display: grid;
  max-height: 360px;
  gap: 8px;
  overflow: auto;
  padding-right: 16px;
  scrollbar-gutter: stable;
}

.automation-topic-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 58px minmax(0, 1fr) 30px;
  gap: 9px;
  align-items: center;
  min-height: 58px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: grab;
  transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth), background var(--transition-smooth);
}

.automation-topic-row.is-dragging,
.automation-image-item.is-dragging,
.automation-topic-choice.is-dragging {
  opacity: 0.68;
}

.automation-topic-row.is-over {
  border-color: rgba(31, 99, 214, 0.55);
  background: #eef6ff;
}

.topic-drag-handle {
  color: var(--muted);
  font-weight: 900;
}

.topic-assigned-image {
  width: 52px;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--muted);
  background: #f2f5f9;
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-size: 10px;
  text-align: center;
}

.topic-assigned-image img,
.upload-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.automation-topic-row.used {
  opacity: 0.64;
}

.topic-delete-button {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.upload-preview-item {
  width: 112px;
  aspect-ratio: 16 / 10;
}

.upload-preview-item img {
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--neo-shadow-soft);
}

.image-delete-button {
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 13px;
  box-shadow: 0 6px 12px rgba(180, 35, 24, 0.20);
}

.image-preview-clear {
  z-index: 3;
}

.job-image-wrap {
  flex: 0 0 auto;
  width: 48px;
  aspect-ratio: 16 / 10;
}

.job-image-wrap img {
  width: 100%;
  height: 100%;
}

.schedule-presets button,
.automation-hour-grid button,
.automation-day-grid label,
.automation-mode-switch span {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth), background var(--transition-smooth), color var(--transition-smooth);
}

.schedule-presets button:hover,
.automation-hour-grid button:hover,
.automation-day-grid label:hover {
  transform: translateY(-2px);
  border-color: rgba(31, 99, 214, 0.34);
  box-shadow: 0 12px 24px rgba(31, 99, 214, 0.12);
}

.site-connect-form .connect-step {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(31, 99, 214, 0.03);
}

.connect-step-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  font-weight: 700;
  color: var(--ink, #10203f);
}

.connect-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f63d6, #123c86);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  flex: none;
}

/* Site bağlama: yöntem seçim kartları (toggle) */
.sites-connect-grid.single {
  grid-template-columns: 1fr;
}

.connect-choice-lead {
  margin: 0 0 12px;
}

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

@media (max-width: 900px) {
  .connect-choice-grid {
    grid-template-columns: 1fr;
  }
}

.connect-choice {
  display: grid;
  gap: 6px;
  justify-items: start;
  /* Global button kuralı inline-flex + içerik ortalama uygular; kartlarda
     tüm metinler soldan hizalanır. */
  justify-content: stretch;
  align-items: start;
  text-align: left;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel, #ffffff);
  /* Global button kuralı (beyaz metin) miras bırakmasın: kart metni her zaman koyu. */
  color: var(--ink, #17223a);
  font-weight: 500;
  box-shadow: none;
  min-height: 0;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.connect-choice:hover {
  /* Global button:hover mor degradeyi eziyor: kart hover'da açık kalır, metin okunur. */
  background: rgba(31, 99, 214, 0.06);
  color: var(--ink, #17223a);
  border-color: rgba(31, 99, 214, 0.4);
  box-shadow: 0 10px 24px rgba(31, 99, 214, 0.12);
  transform: translateY(-2px);
}

.connect-choice.is-active,
.connect-choice.is-active:hover {
  border-color: #1f63d6;
  background: rgba(31, 99, 214, 0.08);
  color: var(--ink, #17223a);
  box-shadow: 0 10px 24px rgba(31, 99, 214, 0.18);
}

.connect-choice-title {
  font-weight: 800;
  font-size: 15px;
  color: var(--ink, #17223a);
}

.connect-choice-desc {
  font-size: 13px;
  color: var(--soft-ink, #43536f);
  line-height: 1.45;
}

.connect-choice:hover .connect-choice-title,
.connect-choice.is-active .connect-choice-title {
  color: var(--teal, #1f63d6);
}

.connect-tab-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(46, 184, 114, 0.16);
  color: #1d9b62;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.connect-choice.is-active .connect-tab-badge {
  background: rgba(46, 184, 114, 0.24);
}

.connect-tab-panel[hidden],
.connect-step[hidden] {
  /* .connect-step display:grid tanımı hidden özniteliğini ezmesin. */
  display: none !important;
}

/* Yöntem seçilince panel yumuşak bir animasyonla açılır (drop-in: styles'ta tanımlı). */
.connect-tab-panel {
  animation: drop-in 0.32s ease;
}

/* Adım içindeki butonlar (Eklentiyi İndir, API sayfasını aç...) içerik kadar
   genişler ve metinleri her zaman ortalanır. */
.connect-tab-panel .connect-step .button {
  justify-self: start;
  width: auto;
  justify-content: center;
  text-align: center;
}

/* Adım açıklaması kendi satırında, giriş kutularıyla aynı hizada (sol kenardan) başlar. */
.connect-step-title small {
  flex-basis: 100%;
  min-width: 0;
  margin: 2px 0 0;
  padding-left: 0;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted, #75839a);
}

/* Diğer Platform / HTML paneli: kart dikey akar, proje ismi kutusu tam
   genişlikte ve büyük (sağa sıkışmaz). */
.connect-tab-panel .copy-workspace-card {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.connect-tab-panel .copy-workspace-card label {
  width: 100%;
  font-weight: 700;
}

.copy-workspace-card input[name="site_name"] {
  width: 100%;
  min-height: 56px;
  font-size: 17px;
  padding: 16px 18px;
  margin-top: 6px;
}

.connect-test-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.connect-test-row [data-test-result][data-state="good"] {
  color: #1d9b62;
  font-weight: 700;
}

.connect-test-row [data-test-result][data-state="bad"] {
  color: #c2402a;
  font-weight: 700;
}

.admin-tabs {
  position: sticky;
  top: 8px;
  z-index: 40;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0 22px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(15, 32, 68, 0.08);
}

.admin-tab-button {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--soft-ink);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.admin-tab-button:hover {
  background: rgba(31, 99, 214, 0.08);
  color: #1f63d6;
}

.admin-tab-button.is-active {
  background: linear-gradient(135deg, #1f63d6, #123c86);
  color: #fff;
  box-shadow: 0 10px 22px rgba(31, 99, 214, 0.28);
}

.admin-tab-panel[hidden] {
  display: none !important;
}

.admin-automation-panel .automation-form {
  margin-bottom: 26px;
}

.admin-hero {
  margin-bottom: 4px;
}

.admin-user-name {
  font-weight: 700;
  color: var(--ink, #10203f);
}

.admin-user-name.muted {
  font-weight: 500;
  color: var(--muted);
}

.admin-users-panel {
  overflow: visible;
}

.admin-table {
  overflow-x: auto;
}

.admin-row {
  grid-template-columns: minmax(190px, 1.15fr) minmax(145px, 0.74fr) minmax(135px, 0.7fr) minmax(260px, 1fr);
}

.admin-row > span,
.admin-actions-cell,
.admin-actions-cell form {
  min-width: 0;
}

.admin-actions-cell .site-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.admin-actions-cell .site-actions form,
.admin-ban-form {
  width: 100%;
}

.admin-actions-cell .inline-admin-form,
.admin-ban-form {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) minmax(72px, 0.7fr) auto;
}

.admin-ban-form input[name="ban_message"] {
  grid-column: 1 / -1;
  min-width: 0;
}

@media (max-width: 920px) {
  .topbar {
    width: min(100% - 20px, 1210px);
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
    padding: 12px;
  }

  .nav-left,
  .primary-nav,
  .account-nav {
    width: 100%;
    min-width: 0;
  }

  .nav-left {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .primary-nav,
  .account-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding-left: 0;
    border-left: 0;
    scrollbar-width: none;
  }

  .primary-nav::-webkit-scrollbar,
  .account-nav::-webkit-scrollbar {
    display: none;
  }

  .primary-nav a,
  .account-nav a,
  .account-nav .button.small,
  .account-nav .credit-pill,
  .link-button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .admin-row,
  .admin-actions-cell .inline-admin-form,
  .admin-ban-form {
    grid-template-columns: 1fr;
  }

  .automation-topic-row {
    grid-template-columns: auto 56px minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  main,
  .topbar,
  .site-footer {
    width: min(100% - 16px, 1210px);
  }

  .brand {
    font-size: clamp(19px, 6vw, 23px);
    min-width: 0;
  }

  .brand-text {
    overflow-wrap: anywhere;
  }

  .primary-nav,
  .account-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .primary-nav a,
  .account-nav a,
  .account-nav .button.small,
  .account-nav .credit-pill,
  .link-button {
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .automation-hour-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .automation-topic-row {
    grid-template-columns: 1fr;
    padding: 10px 34px 10px 10px;
    align-items: start;
  }

  .topic-assigned-image {
    width: 100%;
    max-width: 160px;
  }
}

.article-progress-foot .button {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.96);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), background var(--transition-smooth), color var(--transition-smooth);
}

.article-progress-foot .button[hidden] {
  display: none;
}

.article-progress-popover.is-ready .article-progress-foot .button {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  animation: progress-action-pop 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes progress-action-pop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

[data-automation-topic-list-existing] span {
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: inherit;
}

.automation-topic-row {
  grid-template-columns: auto 66px minmax(0, 1fr) auto;
  padding: 9px 34px 9px 10px;
}

.automation-topic-row.used {
  cursor: default;
  background: linear-gradient(180deg, #ffffff, #f6f9fd);
  border-style: dashed;
}

.automation-topic-row.used .topic-drag-handle {
  cursor: default;
}

.topic-image-cell {
  position: relative;
  width: 58px;
  display: grid;
  place-items: center;
}

.topic-image-cell .topic-assigned-image {
  width: 58px;
}

.topic-image-add-form,
.automation-image-add-form,
.automation-topic-edit {
  margin: 0;
}

.topic-image-add-form {
  position: absolute;
  right: -6px;
  bottom: -6px;
  z-index: 2;
}

.automation-add-image-button {
  width: 24px;
  height: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--blue);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(31, 99, 214, 0.24);
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.automation-add-image-button:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 14px 28px rgba(31, 99, 214, 0.28);
  filter: saturate(1.12);
}

.automation-add-image-button:active {
  transform: translateY(1px) scale(0.94);
  background: var(--blue);
}

.automation-image-add-form {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.automation-add-image-button.is-strip-add {
  width: 76px;
  height: 48px;
  border: 1px dashed rgba(31, 99, 214, 0.36);
  border-radius: 8px;
  color: var(--blue);
  background: #f7fbff;
  box-shadow: none;
}

.automation-topic-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.automation-topic-edit input {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid #d6e2f4;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-size: 13px;
  font-weight: 760;
}

.automation-topic-static {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.automation-topic-static strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
}

.automation-topic-static small {
  width: fit-content;
  padding: 4px 8px;
  color: var(--good);
  background: #ecfdf5;
  border: 1px solid rgba(21, 115, 71, 0.18);
  border-radius: 999px;
  font-weight: 900;
}

.automation-image-strip {
  align-items: center;
  min-height: 58px;
}

.automation-image-item {
  cursor: grab;
}

.automation-image-item:active {
  cursor: grabbing;
}

.topic-suggestions div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: stretch;
}

.suggestion-chip {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: stretch;
}

.suggestion-chip > button:first-child {
  width: 100%;
  min-height: 36px;
  justify-content: start;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  border-radius: 8px 0 0 8px;
}

.suggestion-remove {
  min-height: 36px;
  border-radius: 0 8px 8px 0;
}

[data-selected-text] {
  color: var(--ink);
  background: #f8fbff;
  border-style: dashed;
  resize: vertical;
}

.schedule-presets button:hover,
.automation-hour-grid button:hover,
.automation-day-grid label:hover,
.automation-mode-switch label:hover span {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(31, 99, 214, 0.42);
  box-shadow: 0 16px 34px rgba(31, 99, 214, 0.18);
}

.schedule-presets button:active,
.automation-hour-grid button:active,
.automation-day-grid label:active,
.automation-mode-switch label:active span {
  transform: translateY(1px) scale(0.97);
  color: #fff;
  background: linear-gradient(135deg, var(--teal-deep), var(--good));
}

.automation-hour-grid button.is-selected,
.automation-day-grid label:has(input:checked),
.automation-mode-switch label:has(input:checked) span {
  box-shadow: 0 14px 30px rgba(31, 99, 214, 0.2);
}

.check {
  position: relative;
  align-items: center;
}

.privacy-consent {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--blue);
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease;
}

.check input[type="checkbox"]:checked {
  transform: scale(1.08);
  filter: drop-shadow(0 5px 9px rgba(23, 101, 255, 0.22));
}

.privacy-consent span {
  min-width: 0;
  padding-top: 0;
}

.auth-card .privacy-consent {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  row-gap: 0;
  min-height: 28px;
  margin: 2px 0 0;
  color: var(--ink);
  line-height: 1.35;
}

.auth-card .privacy-consent input[type="checkbox"] {
  align-self: center;
  justify-self: start;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  box-shadow: none;
  transform-origin: center;
}

.auth-card .privacy-consent span {
  align-self: center;
  display: inline;
  min-width: 0;
  padding: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.auth-card .privacy-consent a {
  display: inline;
  vertical-align: baseline;
}

[data-register-submit] {
  opacity: 0.55;
  transform: translateY(0) scale(0.985);
}

[data-register-submit]:not(:disabled) {
  opacity: 1;
  animation: privacyButtonReady 420ms ease both;
}

@keyframes privacyButtonReady {
  0% {
    transform: translateY(3px) scale(0.98);
    box-shadow: 0 0 0 rgba(31, 99, 214, 0);
  }
  70% {
    transform: translateY(-2px) scale(1.015);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.automation-mode-switch input:checked + span,
.automation-day-grid label:has(input:checked) {
  background: var(--blue);
  animation: automationFadeIn 220ms ease both;
}

.automation-add-image-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: var(--blue);
  font-size: 18px;
}

.automation-add-image-button::before {
  content: none;
}

.automation-add-image-button input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.automation-add-image-button {
  font-size: 18px;
}

.automation-add-image-button:active {
  background: var(--blue);
}

.image-delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  text-align: center;
  font-family: Arial, "Segoe UI", sans-serif;
}

.automation-image-item .image-delete-button,
.upload-preview-item .image-delete-button,
.job-image-wrap .image-delete-button {
  position: absolute;
}

.automation-topic-row > form:not(.automation-topic-edit) {
  position: absolute;
  top: 50%;
  right: 8px;
  margin: 0;
  transform: translateY(-50%);
  z-index: 3;
}

.topic-delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  transform: none;
}

.topic-assigned-image {
  position: relative;
  isolation: isolate;
  color: var(--soft-ink);
  background:
    linear-gradient(135deg, rgba(122, 60, 255, 0.22), transparent 44%),
    linear-gradient(315deg, rgba(23, 101, 255, 0.18), transparent 44%),
    #f7fbff;
  border-style: solid;
  border-color: rgba(23, 101, 255, 0.16);
}

.topic-assigned-image small {
  padding: 3px 6px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.1;
  box-shadow: 0 6px 14px rgba(23, 34, 58, 0.08);
}

.topic-suggestions,
.keyword-suggestions {
  display: grid;
  gap: 8px;
  padding: 10px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px dashed #d8def1;
  border-radius: 0;
}

.topic-suggestions div,
.keyword-suggestions div {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

.topic-suggestions button,
.keyword-suggestions button,
.suggestion-chip > button:first-child {
  min-height: 34px;
  padding: 7px 11px;
  color: var(--soft-ink);
  background: rgba(248, 244, 255, 0.58);
  border: 1px solid #dcd2ff;
  border-radius: 999px;
  box-shadow: none;
  font-size: 12px;
}

.topic-suggestions button:hover,
.keyword-suggestions button:hover,
.suggestion-chip > button:first-child:hover {
  color: #fff;
  background: linear-gradient(135deg, #7d49ff, #1765ff);
  border-color: rgba(23, 101, 255, 0.34);
  box-shadow: 0 12px 22px rgba(57, 103, 255, 0.18);
  transform: translateY(-1px);
}

.suggestion-chip {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.suggestion-chip > button:first-child {
  width: auto;
  justify-content: center;
  text-align: center;
  border-radius: 999px;
}

.suggestion-remove {
  width: 26px;
  min-width: 26px;
  min-height: 34px;
  border-radius: 999px;
}

@keyframes automationFadeIn {
  from {
    opacity: 0.72;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 1180px) {
  .admin-row {
    grid-template-columns: minmax(170px, 1fr) minmax(130px, 0.72fr) minmax(120px, 0.62fr) minmax(220px, 1fr);
  }
}

@media (min-width: 641px) and (max-width: 920px) {
  .topbar {
    width: min(100% - 20px, 1210px);
    grid-template-columns: 1fr;
    padding: 12px 14px;
    gap: 10px;
  }

  .nav-left {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
  }

  .brand {
    font-size: clamp(22px, 3vw, 26px);
  }

  .primary-nav,
  .account-nav {
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .primary-nav {
    justify-content: flex-start;
  }

  .account-nav {
    justify-content: flex-end;
  }

  .admin-row,
  .admin-actions-cell .inline-admin-form,
  .admin-ban-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .seo-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seo-checklist article {
    min-height: 72px;
    padding: 10px;
  }

  .seo-checklist article strong {
    font-size: 12px;
  }

  .seo-checklist article span {
    font-size: 11px;
  }

  .admin-row,
  .admin-actions-cell .inline-admin-form,
  .admin-ban-form {
    grid-template-columns: 1fr;
  }

  .automation-topic-row,
  .automation-topic-row.used {
    grid-template-columns: auto minmax(58px, 72px) minmax(0, 1fr);
    padding: 10px;
  }

  .automation-topic-row > form:not(.automation-topic-edit) {
    position: static;
  }

  .automation-topic-row .topic-delete-button {
    top: 7px;
    right: 7px;
    transform: none;
  }

  .automation-topic-edit {
    grid-column: 1 / -1;
  }

  .automation-topic-static {
    align-self: center;
  }

  .topic-image-cell,
  .topic-image-cell .topic-assigned-image {
    width: 58px;
  }
}

@media (max-width: 560px) {
  .topbar {
    gap: 9px;
    padding: 10px;
  }

  .account-nav form,
  .primary-nav a,
  .account-nav a,
  .account-nav .button.small,
  .account-nav .credit-pill,
  .link-button {
    min-width: 0;
  }

  .topic-suggestions div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 10px 12px;
    overflow: hidden;
  }

  .nav-left {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
  }

  .brand {
    min-width: 0;
    white-space: nowrap;
  }

  .brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .primary-nav,
  .account-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .primary-nav::-webkit-scrollbar,
  .account-nav::-webkit-scrollbar {
    display: none;
  }

  .primary-nav a,
  .account-nav a,
  .account-nav .button.small,
  .account-nav .credit-pill,
  .link-button {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 38px;
    padding: 8px 10px;
  }
}

@media (max-width: 640px) {
  .topbar {
    gap: 8px;
    padding: 9px 10px;
  }

  .nav-left {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .brand {
    max-width: 100%;
    font-size: clamp(19px, 5vw, 23px);
  }

  .primary-nav,
  .account-nav {
    margin: 0 -2px;
    padding-bottom: 2px;
  }
}

[data-automation-topic-list-existing] {
  padding-right: 18px;
  scrollbar-gutter: stable;
}

.automation-add-image-button,
.automation-add-image-button:hover,
.automation-add-image-button:active,
.automation-add-image-button:focus-visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--blue);
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.automation-add-image-button.is-strip-add,
.automation-add-image-button.is-strip-add:hover,
.automation-add-image-button.is-strip-add:active,
.automation-add-image-button.is-strip-add:focus-visible {
  color: var(--blue);
  background: #f7fbff;
}

.automation-add-image-button::before {
  content: none;
}

.image-delete-button,
.topic-delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  text-align: center;
}

.automation-topic-row > form:not(.automation-topic-edit) {
  position: absolute;
  top: 50%;
  right: 8px;
  margin: 0;
  transform: translateY(-50%);
  z-index: 3;
}

.topic-delete-button {
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
}

.automation-add-image-button,
.automation-add-image-button:hover,
.automation-add-image-button:active,
.automation-add-image-button:focus-visible {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--blue);
  border-radius: 999px;
  font-family: Arial, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 24px;
  text-align: center;
  text-indent: 0;
  transform: none;
}

.automation-add-image-button.is-strip-add,
.automation-add-image-button.is-strip-add:hover,
.automation-add-image-button.is-strip-add:active,
.automation-add-image-button.is-strip-add:focus-visible {
  width: 76px;
  height: 48px;
  min-width: 76px;
  min-height: 48px;
  color: var(--blue);
  background: #f7fbff;
  border-radius: 8px;
  line-height: 48px;
}

.image-delete-button,
.image-delete-button:hover,
.image-delete-button:active,
.image-delete-button:focus-visible,
.topic-delete-button,
.topic-delete-button:hover,
.topic-delete-button:active,
.topic-delete-button:focus-visible {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--bad);
  border-radius: 999px;
  font-family: Arial, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 20px;
  text-align: center;
  text-indent: 0;
  transform: none;
}

.automation-topic-row .topic-delete-button {
  transform: none;
}

.schedule-presets button:active,
.automation-hour-grid button:active,
.automation-hour-grid button.is-selected:active,
.automation-day-grid label:active,
.automation-mode-switch label:active span {
  color: #fff;
  background: linear-gradient(135deg, #1765ff, #082f83);
  transform: translateY(0) scale(0.99);
}

.automation-hour-grid button.is-selected,
.automation-hour-grid button.is-selected:hover,
.automation-hour-grid button.is-selected:active {
  color: #fff;
  background: linear-gradient(135deg, #ff9f1c, #e66f00);
}

.automation-day-grid label:has(input:checked),
.automation-day-grid label:has(input:checked):hover,
.automation-day-grid label:has(input:checked):active,
.automation-mode-switch label:has(input:checked) span,
.automation-mode-switch label:has(input:checked):active span {
  color: #fff;
  background: linear-gradient(135deg, #1765ff, #082f83);
}

.automation-add-image-button,
.automation-add-image-button:hover,
.automation-add-image-button:active,
.automation-add-image-button:focus-visible {
  position: relative;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}

.automation-add-image-button::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: Arial, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  transform: translateY(-0.5px);
}

.automation-add-image-button::before,
.automation-add-image-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  background: currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.automation-add-image-button::before {
  width: 10px;
  height: 2px;
}

.automation-add-image-button::after {
  width: 2px;
  height: 10px;
}

.automation-add-image-button.is-strip-add::before {
  width: 11px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.automation-add-image-button.is-strip-add::after {
  width: 2px;
  height: 11px;
  transform: translate(-50%, -50%);
}

.image-delete-button::before,
.image-delete-button::after,
.topic-delete-button::before,
.topic-delete-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  inset: auto;
  width: 9px;
  height: 2px;
  display: block;
  background: currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.image-delete-button::after,
.topic-delete-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.automation-add-image-button.is-strip-add::after {
  font-size: 18px;
  transform: translateY(-0.5px);
}

.image-delete-button,
.image-delete-button:hover,
.image-delete-button:active,
.image-delete-button:focus-visible,
.topic-delete-button,
.topic-delete-button:hover,
.topic-delete-button:active,
.topic-delete-button:focus-visible {
  position: relative;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}

.image-delete-button::before,
.topic-delete-button::before {
  content: "×";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: Arial, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  transform: translateY(-0.5px);
}

/* Final automation icon and ajax-save overrides */
.automation-add-image-button::before,
.automation-add-image-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  background: currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.automation-add-image-button::before { width: 10px; height: 2px; }
.automation-add-image-button::after { width: 2px; height: 10px; }
.automation-add-image-button.is-strip-add::before { width: 11px; height: 2px; transform: translate(-50%, -50%); }
.automation-add-image-button.is-strip-add::after { width: 2px; height: 11px; transform: translate(-50%, -50%); }

.image-delete-button::before,
.image-delete-button::after,
.topic-delete-button::before,
.topic-delete-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  inset: auto;
  width: 9px;
  height: 2px;
  display: block;
  background: currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.image-delete-button::after,
.topic-delete-button::after { transform: translate(-50%, -50%) rotate(-45deg); }

.automation-save-bar {
  display: flex;
  justify-content: flex-end;
  padding: 10px 18px 2px 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.automation-save-bar[hidden] {
  display: none;
}

.automation-save-bar.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Final interaction polish for automation boards */
.automation-add-image-button,
.automation-add-image-button:hover,
.automation-add-image-button:active,
.automation-add-image-button:focus-visible {
  overflow: visible;
  box-shadow: 0 10px 22px rgba(31, 99, 214, 0.22);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.automation-add-image-button:hover,
.automation-add-image-button:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 14px 28px rgba(31, 99, 214, 0.28);
}

.automation-add-image-button:active {
  transform: scale(0.94);
  filter: saturate(1.08);
}

.automation-add-image-button::before,
.automation-add-image-button::after {
  transition: width 180ms ease, height 180ms ease, transform 180ms ease;
}

.automation-add-image-button:hover::before,
.automation-add-image-button:focus-visible::before {
  width: 12px;
}

.automation-add-image-button:hover::after,
.automation-add-image-button:focus-visible::after {
  height: 12px;
}

.image-delete-button,
.image-delete-button:hover,
.image-delete-button:active,
.image-delete-button:focus-visible,
.topic-delete-button,
.topic-delete-button:hover,
.topic-delete-button:active,
.topic-delete-button:focus-visible {
  color: #ef4444;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: none;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.image-delete-button:hover,
.image-delete-button:focus-visible,
.topic-delete-button:hover,
.topic-delete-button:focus-visible {
  color: #dc2626;
  background: #fff1f1;
  border-color: #ffd6d6;
  transform: scale(1.05);
}

.image-delete-button:active,
.topic-delete-button:active {
  transform: scale(0.94);
}

.automation-topic-row {
  cursor: grab;
  user-select: none;
}

.automation-topic-row input {
  user-select: text;
}

.automation-topic-row:not(.used):hover {
  border-color: rgba(31, 99, 214, 0.24);
  box-shadow: 0 12px 26px rgba(23, 34, 58, 0.08);
  transform: translateY(-1px);
}

.automation-topic-row.is-dragging {
  opacity: 0.88;
  background: #fff;
  border-color: rgba(31, 99, 214, 0.42);
  box-shadow: 0 18px 38px rgba(23, 34, 58, 0.18);
  transform: rotate(0.4deg) scale(1.01);
  cursor: grabbing;
}

.automation-topic-row.is-over {
  background: #f5f9ff;
  border-color: rgba(31, 99, 214, 0.48);
  box-shadow: inset 0 0 0 2px rgba(31, 99, 214, 0.08);
}

.topic-drag-handle {
  width: 18px;
  display: grid;
  place-items: center;
  color: #7a8aa8;
  cursor: grab;
  font-size: 16px;
  opacity: 0.8;
  transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.automation-topic-row:hover .topic-drag-handle {
  color: var(--blue);
  opacity: 1;
  transform: scale(1.08);
}

/* Final delete icon and drag polish */
.image-delete-button,
.image-delete-button:hover,
.image-delete-button:active,
.image-delete-button:focus-visible,
.topic-delete-button,
.topic-delete-button:hover,
.topic-delete-button:active,
.topic-delete-button:focus-visible {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  color: #ef4444;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.image-delete-button::before,
.image-delete-button::after,
.topic-delete-button::before,
.topic-delete-button::after {
  width: 10px;
  height: 2px;
  background: currentColor;
  transition: transform 150ms ease, width 150ms ease, background 150ms ease;
}

.image-delete-button:hover,
.image-delete-button:focus-visible,
.topic-delete-button:hover,
.topic-delete-button:focus-visible {
  color: #dc2626;
  background: transparent;
  border: 0;
  transform: scale(1.22);
}

.image-delete-button:hover::before,
.image-delete-button:focus-visible::before,
.topic-delete-button:hover::before,
.topic-delete-button:focus-visible::before {
  width: 12px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.image-delete-button:hover::after,
.image-delete-button:focus-visible::after,
.topic-delete-button:hover::after,
.topic-delete-button:focus-visible::after {
  width: 12px;
  transform: translate(-50%, -50%) rotate(-45deg);
}

[data-automation-topic-list-existing] {
  align-content: start;
}

.automation-topic-row {
  will-change: transform;
  transition:
    transform 170ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 170ms ease,
    border-color 170ms ease,
    background 170ms ease;
}

.automation-topic-row:not(.used):active {
  cursor: grabbing;
}

.automation-topic-row.is-dragging {
  z-index: 5;
  pointer-events: none;
}

/* Last-pass automation interaction rules */
.automation-add-image-button,
.automation-add-image-button:hover,
.automation-add-image-button:active,
.automation-add-image-button:focus-visible {
  transform-origin: 50% 50%;
}

.automation-add-image-button:hover,
.automation-add-image-button:focus-visible {
  transform: scale(1.08);
}

.automation-add-image-button:active {
  transform: scale(0.94);
}

.automation-add-image-button:hover::before,
.automation-add-image-button:focus-visible::before,
.automation-add-image-button:hover::after,
.automation-add-image-button:focus-visible::after {
  transform: translate(-50%, -50%);
}

.image-delete-button,
.image-delete-button:hover,
.image-delete-button:active,
.image-delete-button:focus-visible,
.topic-delete-button,
.topic-delete-button:hover,
.topic-delete-button:active,
.topic-delete-button:focus-visible {
  transform: none;
  transform-origin: 50% 50%;
}

.image-delete-button::before,
.image-delete-button::after,
.topic-delete-button::before,
.topic-delete-button::after {
  width: 10px;
  background: #ef4444;
  transform-origin: 50% 50%;
}

.image-delete-button:hover::before,
.image-delete-button:focus-visible::before,
.topic-delete-button:hover::before,
.topic-delete-button:focus-visible::before {
  width: 10px;
  transform: translate(-50%, -50%) rotate(45deg) scale(1.28);
}

.image-delete-button:hover::after,
.image-delete-button:focus-visible::after,
.topic-delete-button:hover::after,
.topic-delete-button:focus-visible::after {
  width: 10px;
  transform: translate(-50%, -50%) rotate(-45deg) scale(1.28);
}

.automation-save-bar {
  display: flex;
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: max-height 220ms ease, padding 220ms ease, opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.automation-save-bar.is-visible {
  max-height: 58px;
  padding-top: 10px;
  padding-bottom: 2px;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.automation-topic-row.is-dragging {
  opacity: 0.96;
  transform: scale(1.015);
}

.image-strip-delete-button,
.image-strip-delete-button:hover,
.image-strip-delete-button:active,
.image-strip-delete-button:focus-visible {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  top: -9px;
  right: -9px;
  color: #ef4444;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(180, 35, 24, 0.16);
}

.image-strip-delete-button::before,
.image-strip-delete-button::after {
  width: 12px;
  height: 2px;
}

.image-strip-delete-button:hover,
.image-strip-delete-button:focus-visible {
  color: #dc2626;
  background: #fff;
  transform: scale(1.08);
}

/* Stable delete hitboxes: the button stays fixed, only the icon breathes. */
.image-delete-button,
.topic-delete-button,
.image-delete-button:hover,
.topic-delete-button:hover,
.image-delete-button:active,
.topic-delete-button:active,
.image-delete-button:focus-visible,
.topic-delete-button:focus-visible {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  font-size: 0;
  transform: none !important;
  transform-origin: 50% 50%;
}

.image-delete-button::before,
.image-delete-button::after,
.topic-delete-button::before,
.topic-delete-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 2px;
  margin: 0;
  border-radius: 999px;
  background: currentColor;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: transform 150ms ease, background 150ms ease, opacity 150ms ease;
}

.image-delete-button::before,
.topic-delete-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.image-delete-button::after,
.topic-delete-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.image-delete-button:hover::before,
.image-delete-button:focus-visible::before,
.topic-delete-button:hover::before,
.topic-delete-button:focus-visible::before {
  transform: translate(-50%, -50%) rotate(45deg) scaleX(1.18);
}

.image-delete-button:hover::after,
.image-delete-button:focus-visible::after,
.topic-delete-button:hover::after,
.topic-delete-button:focus-visible::after {
  transform: translate(-50%, -50%) rotate(-45deg) scaleX(1.18);
}

.image-strip-delete-button,
.image-strip-delete-button:hover,
.image-strip-delete-button:active,
.image-strip-delete-button:focus-visible {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 4;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  color: #ef4444;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(180, 35, 24, 0.16);
  transform: none !important;
}

.image-strip-delete-button:hover,
.image-strip-delete-button:focus-visible {
  color: #dc2626;
  background: #fff;
  box-shadow: 0 10px 22px rgba(180, 35, 24, 0.2);
}

.image-strip-delete-button::before,
.image-strip-delete-button::after {
  width: 13px;
}

.edit-credit-status {
  display: block;
  margin-top: 8px;
  color: #475569;
  font-size: 0.88rem;
  line-height: 1.35;
}

.credit-pill,
.credit-wallet {
  gap: 4px;
  white-space: nowrap;
}

.credit-unit {
  margin-left: 4px;
}

.topbar {
  min-width: 0;
}

.brand,
.primary-nav a,
.account-nav a,
.link-button {
  white-space: nowrap;
}

.nav-left {
  min-width: 0;
  flex: 1 1 auto;
}

.primary-nav {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.account-nav {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.sites-page-shell,
.sites-connect-grid {
  display: grid;
  gap: 18px;
}

.sites-connect-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.68fr);
  align-items: start;
}

.history-collapsible {
  padding: 0;
}

.history-collapsible > summary,
.copy-html-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  padding: 16px 18px;
  list-style: none;
}

.history-collapsible > summary::-webkit-details-marker,
.copy-html-details > summary::-webkit-details-marker {
  display: none;
}

.history-collapsible > summary span,
.history-collapsible > summary strong,
.history-collapsible > summary small {
  display: block;
}

.history-collapsible > .table,
.history-collapsible > .automation-plan-grid {
  margin: 0;
  padding: 0 18px 18px;
}

.password-strength {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #f8fbff;
  max-height: 0;
  margin-top: -10px;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-10px) scale(0.98);
  transform-origin: top center;
  pointer-events: none;
  transition:
    max-height 420ms cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 420ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 260ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms ease;
}

.password-strength.is-visible {
  max-height: 132px;
  margin-top: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  border-color: var(--line);
  box-shadow: 0 16px 36px rgba(34, 68, 139, 0.10);
}

.password-strength span {
  height: 9px;
  overflow: hidden;
  background: #e3eaf5;
  border-radius: 999px;
}

.password-strength i {
  display: block;
  width: calc((var(--password-score, 1) / 4) * 100%);
  height: 100%;
  background: var(--password-color, #b42318);
  border-radius: inherit;
  transition: width 260ms ease, background 260ms ease;
}

.password-strength[data-score="0"] { --password-score: 1; --password-color: #b42318; }
.password-strength[data-score="1"] { --password-score: 1; --password-color: #b42318; }
.password-strength[data-score="2"] { --password-score: 2; --password-color: #f0b429; }
.password-strength[data-score="3"] { --password-score: 3; --password-color: #33a36f; }
.password-strength[data-score="4"] { --password-score: 4; --password-color: #1f63d6; }

.password-strength[data-score="2"] i,
.password-strength[data-score="3"] i,
.password-strength[data-score="4"] i {
  animation: password-bar-pulse 1.4s ease-in-out infinite;
}

@keyframes password-bar-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.14); }
}

.password-strength strong {
  color: var(--ink);
}

.password-strength small,
.password-match {
  color: var(--muted);
  font-weight: 750;
}

.password-match[data-state="good"] {
  color: var(--good);
}

.password-match[data-state="bad"] {
  color: var(--bad);
}

.field-counter {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.automation-brief-label {
  display: grid;
  gap: 8px;
}

.automation-brief-label > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.automation-context-switch {
  margin-top: 2px;
}

.automation-brief-label textarea {
  min-height: 104px;
  resize: vertical;
}

.automation-ai-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.automation-ai-row > .button {
  order: 1;
  flex: 0 0 auto;
}

.ai-topic-status {
  order: 2;
  flex: 0 1 auto;
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.4;
}

.ai-topic-status:empty {
  display: none;
}

.ai-topic-status[data-state="loading"] {
  color: var(--teal-deep);
}

.ai-topic-status[data-state="success"] {
  color: var(--good);
}

.ai-topic-status[data-state="warning"] {
  color: var(--amber);
}

.ai-topic-status[data-state="error"] {
  color: var(--bad);
}

.automation-ai-row .ai-limit-note {
  order: 3;
  margin: 0 0 0 auto;
  text-align: right;
}

.topic-token-field {
  grid-template-areas:
    "composer"
    "chips";
  margin-top: 8px;
}

.topic-token-field .keyword-composer {
  grid-area: composer;
}

.topic-token-field .keyword-chip-list {
  grid-area: chips;
  min-height: 36px;
}

.topic-token-field .keyword-chip-list:empty {
  display: flex;
}

[data-topic-source-panel="manual"] > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

[data-topic-source-panel="manual"] .field-counter {
  flex: 0 0 auto;
  white-space: nowrap;
}

.automation-topic-choice,
.automation-topic-row {
  cursor: default;
}

.topic-order-controls {
  display: inline-grid;
  grid-template-columns: 26px;
  gap: 3px;
}

.topic-order-controls button {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--teal-deep);
  background: #eef5ff;
  border: 1px solid #cfe0fb;
  border-radius: 999px;
  box-shadow: none;
  font-size: 11px;
  line-height: 1;
}

.automation-topic-picker .automation-topic-choice .topic-order-controls button {
  flex: 0 0 26px;
  font-size: 13px;
}

.topic-order-controls button:hover {
  transform: none;
  color: #fff;
  background: var(--blue);
}

.automation-credit-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 12px;
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 12px;
  line-height: 1.55;
}

.automation-credit-option span {
  display: block;
  min-width: 0;
  color: var(--soft-ink);
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.automation-credit-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  align-self: center;
  justify-self: start;
  position: relative;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin: 0;
  background: #fff;
  border: 1.5px solid rgba(71, 85, 105, 0.48);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.automation-credit-option input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(40deg) scale(0);
  transform-origin: center;
  transition: transform 160ms ease;
}

.automation-credit-option input[type="checkbox"]:checked {
  border-color: rgba(31, 99, 214, 0.88);
  background: linear-gradient(135deg, var(--blue), var(--teal-deep));
  box-shadow: 0 8px 18px rgba(31, 99, 214, 0.18);
}

.automation-credit-option input[type="checkbox"]:checked::after {
  transform: rotate(40deg) scale(1);
}

.automation-credit-option input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(31, 99, 214, 0.28);
  outline-offset: 2px;
}

.automation-card-option {
  width: 100%;
  min-width: 0;
}

.editor-media-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.editor-featured-current,
.editor-upload-tile,
.editor-image-size-control {
  display: grid;
  align-content: center;
  min-height: 86px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.editor-media-tools > .editor-upload-status {
  grid-column: 1 / -1;
}

.editor-image-size-control {
  grid-column: 1 / -1;
  gap: 8px;
}

.editor-image-size-control[hidden] {
  display: none;
}

.editor-image-size-control.is-visible {
  border-color: rgba(31, 99, 214, 0.32);
  background: linear-gradient(180deg, #fff, #f3f8ff);
  animation: image-size-panel-enter 180ms ease-out both;
}

@keyframes image-size-panel-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes editor-menu-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.editor-upload-preview {
  grid-column: 1 / -1;
}

.editor-upload-preview:empty {
  display: none;
}

.editor-image-size-control input {
  width: 100%;
}

.editor-image-size-control small {
  color: var(--muted);
  font-weight: 850;
}

.inline-image-tool input,
.editor-media-tools input {
  margin-top: 6px;
}

.editor-featured-current {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.editor-featured-current img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.article-rich-editor .is-editor-selected-block,
.is-editor-selected-block {
  outline: 2px solid rgba(31, 99, 214, 0.62);
  outline-offset: 4px;
  background: rgba(237, 244, 255, 0.74);
  border-radius: 8px;
}

.article-rich-editor.is-drag-over {
  border-color: rgba(31, 99, 214, 0.58);
  background: #f7fbff;
  box-shadow: inset 0 0 0 2px rgba(31, 99, 214, 0.08);
}

.article-rich-editor.is-resizing-image {
  user-select: none;
  cursor: nwse-resize;
}

.editor-image-rail {
  position: absolute;
  z-index: 22;
  width: 112px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #dce5f5;
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(23, 34, 58, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-10px) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
}

.editor-image-rail[hidden] {
  display: none;
}

.editor-image-rail.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.editor-image-rail .button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  background: #fff;
  border-color: #d9e5f7;
  box-shadow: 0 12px 28px rgba(23, 34, 58, 0.10);
  white-space: nowrap;
}

.editor-image-rail .button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(23, 34, 58, 0.14);
}

@media (max-width: 980px) {
  .editor-image-rail {
    display: none !important;
  }

  .image-resize-handle {
    display: none;
  }

  .article-rich-editor figure.article-inline-image,
  .article-rich-editor .article-inline-image {
    max-width: 100%;
  }

  .article-rich-editor figure.article-inline-image img,
  .article-rich-editor .article-inline-image img {
    max-height: 240px;
    object-fit: contain;
  }
}

.editor-inline-menu {
  position: absolute;
  z-index: 16;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #dce5f5;
  border-radius: 10px;
  box-shadow: 0 18px 38px rgba(23, 34, 58, 0.14);
  animation: image-size-panel-enter 160ms ease-out both;
  width: max-content;
  max-width: calc(100% - 16px);
}

.editor-inline-menu.is-side-panel {
  align-items: stretch;
  flex-direction: column;
  width: max-content;
  animation: editor-side-panel-enter 180ms ease-out both;
}

.editor-inline-menu.is-mobile-toolbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  top: auto;
  z-index: 2147483001;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: auto;
  max-width: none;
  padding: 12px;
  background: rgba(255, 255, 255, 0.99);
  border-radius: 18px 18px 12px 12px;
  box-shadow: 0 28px 78px rgba(15, 23, 42, 0.26);
}

.editor-inline-menu.is-mobile-toolbar > .button {
  width: 100%;
  justify-content: center;
}

.editor-inline-menu.is-mobile-toolbar .editor-resize-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.editor-inline-menu.is-mobile-toolbar .editor-resize-actions label {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  justify-items: stretch;
}

.editor-inline-menu.is-mobile-toolbar .editor-resize-actions input[type="range"] {
  width: 100%;
}

.editor-inline-menu.is-mobile-toolbar [data-image-delete] {
  grid-column: 1 / -1;
}

.editor-inline-menu.is-side-panel > .button {
  min-width: 0;
  width: 100%;
  padding-inline: 10px;
  white-space: nowrap;
}

.editor-inline-menu[hidden] {
  display: none;
}

.editor-inline-menu.is-fading-out {
  animation: editor-menu-out 240ms ease-in forwards;
}

.editor-resize-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.editor-resize-actions[hidden] {
  display: none;
}

.editor-resize-actions label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--soft-ink);
  font-size: 12px;
  font-weight: 850;
}

.editor-resize-actions input[type="range"] {
  width: 112px;
  min-height: 28px;
  padding: 0;
  box-shadow: none;
}

.editor-resize-actions .button {
  min-height: 32px;
  padding: 0 10px;
}

.article-inline-image {
  position: relative;
  display: block;
  margin: 22px 0;
  min-width: 120px;
}

.article-inline-image img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
}

.article-editor-actions {
  flex-wrap: wrap;
}

.article-inline-image.is-resizable-image {
  outline: 2px solid rgba(31, 99, 214, 0.55);
  outline-offset: 5px;
}

.image-resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  z-index: 30;
  cursor: nwse-resize;
  touch-action: none;
  background: #fff;
  border: 2px solid var(--blue);
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(31, 99, 214, 0.22);
}

.image-resize-handle::before {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
}

.copy-html-details {
  margin-top: 14px;
}

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

.danger-zone {
  display: grid;
  gap: 18px;
  border-color: rgba(180, 35, 24, 0.22);
}

.danger-zone form {
  margin-top: 10px;
}

.danger-zone form .button {
  width: 100%;
  justify-content: center;
}

.ai-edit-panel {
  position: relative;
}

.ai-edit-close,
.mobile-edit-trigger,
.mobile-image-trigger {
  display: none;
}

@media (max-width: 1180px) {
  .mobile-edit-trigger:not([hidden]),
  .mobile-image-trigger:not([hidden]) {
    display: inline-flex !important;
  }

  .ai-edit-panel:not(.is-open) {
    display: none;
  }

  .ai-edit-panel.is-open {
    display: grid;
  }
}

button.image-delete-button,
button.image-delete-button:hover,
button.image-delete-button:active,
button.image-delete-button:focus-visible,
button.topic-delete-button,
button.topic-delete-button:hover,
button.topic-delete-button:active,
button.topic-delete-button:focus-visible {
  transform: none !important;
}

button.image-delete-button:hover::before,
button.image-delete-button:focus-visible::before,
button.topic-delete-button:hover::before,
button.topic-delete-button:focus-visible::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

button.image-delete-button:hover::after,
button.image-delete-button:focus-visible::after,
button.topic-delete-button:hover::after,
button.topic-delete-button:focus-visible::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.automation-image-item .image-delete-button,
.upload-preview-item .image-delete-button,
.job-image-wrap .image-delete-button,
.automation-image-item .image-delete-button:hover,
.upload-preview-item .image-delete-button:hover,
.job-image-wrap .image-delete-button:hover,
.automation-image-item .image-delete-button:focus-visible,
.upload-preview-item .image-delete-button:focus-visible,
.job-image-wrap .image-delete-button:focus-visible {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 12;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  color: #dc2626;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(239, 68, 68, 0.22);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(180, 35, 24, 0.16);
  transform: none !important;
  pointer-events: auto;
}

.automation-image-item form[data-image-delete-form],
.upload-preview-item form {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 12;
  margin: 0;
}

@media (max-width: 980px) {
  .topbar {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 12px;
  }

  .nav-left,
  .account-nav {
    width: 100%;
  }

  .nav-left {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .primary-nav {
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding-left: 12px;
  }

  .account-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .sites-connect-grid,
  .editor-media-tools {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  main {
    width: min(100% - 18px, 1220px);
    padding-top: 18px;
  }

  .topbar {
    width: calc(100% - 16px);
    margin-top: 8px;
  }

  .brand {
    font-size: 21px;
  }

  .brand-mark {
    width: 30px;
    height: 30px;
  }

  .primary-nav a,
  .account-nav a:not(.button):not(.credit-pill),
  .link-button {
    padding: 8px;
    font-size: 13px;
  }

  .account-nav .button.small {
    min-height: 34px;
    padding: 8px 10px;
  }

  .article-editor-layout {
    gap: 14px;
  }

  .article-editor-head,
  .article-editor-main,
  .ai-edit-panel,
  .danger-zone {
    padding: 16px;
  }

  .article-editor-head h1 {
    font-size: 30px;
  }

  .article-editor-main .columns,
  .editor-media-tools,
  .copy-action-grid {
    grid-template-columns: 1fr;
  }

  .article-editor-main input,
  .article-editor-main textarea,
  .ai-edit-panel textarea {
    min-width: 0;
    width: 100%;
  }

  .article-rich-editor {
    min-height: 420px;
    padding: 14px;
    font-size: 15px;
    line-height: 1.62;
  }

  .article-body .keskin-map-wrap,
  .article-rich-editor .keskin-map-wrap {
    min-height: 340px;
  }

  .article-body .keskin-map-wrap iframe,
  .article-rich-editor .keskin-map-wrap iframe {
    height: 340px !important;
    min-height: 340px;
  }

  .article-rich-editor h1 {
    font-size: 26px;
  }

  .article-rich-editor h2 {
    font-size: 21px;
  }

  .editor-inline-menu {
    right: auto;
    width: fit-content;
    max-width: calc(100% - 16px);
    justify-content: center;
    padding: 5px;
    border-radius: 9px;
    box-shadow: 0 10px 22px rgba(23, 34, 58, 0.12);
  }

  .editor-inline-menu > .button {
    width: auto;
    min-width: 82px;
    min-height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
  }

  .editor-resize-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .editor-resize-actions label {
    flex: 1 1 160px;
    justify-content: center;
  }

  .editor-resize-actions input[type="range"] {
    width: min(190px, 48vw);
  }

  .article-editor-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .article-editor-actions .button,
  .article-editor-actions a.button {
    width: 100%;
    justify-content: center;
  }

  .article-inline-image {
    min-width: 96px;
  }
}

.guide-shell {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
}

.guide-backdrop,
.guide-spotlight,
.guide-popover {
  position: fixed;
}

.guide-backdrop {
  inset: 0;
  background: rgba(15, 23, 42, 0.46);
}

.guide-spotlight {
  z-index: 9999;
  border: 2px solid #f59e0b;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.42), 0 18px 42px rgba(15, 23, 42, 0.22);
  transition: width 180ms ease, height 180ms ease, left 180ms ease, top 180ms ease;
}

.guide-popover {
  z-index: 10000;
  width: min(360px, calc(100vw - 24px));
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 8px;
  color: #0f172a;
  background: #fff;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.24);
  pointer-events: auto;
}

.guide-popover small {
  display: block;
  margin-bottom: 6px;
  color: #64748b;
  font-weight: 700;
}

.guide-popover strong {
  display: block;
  margin-right: 30px;
  font-size: 1rem;
}

.guide-popover p {
  margin: 8px 0 14px;
  color: #334155;
  line-height: 1.5;
}

.guide-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  color: #475569;
  background: #f8fafc;
  cursor: pointer;
}

.guide-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.is-guide-target {
  position: relative;
  z-index: 9999;
}

@media (max-width: 640px) {
  .guide-popover {
    padding: 14px;
  }

  .guide-actions {
    justify-content: stretch;
  }

  .guide-actions .button {
    flex: 1;
  }
}

.guide-shell {
  z-index: 2147483000;
}

.guide-backdrop {
  z-index: 0;
  background: transparent;
  pointer-events: none;
}

.guide-shell.is-guide-intro .guide-backdrop {
  background: rgba(15, 23, 42, 0.46);
}

.guide-spotlight {
  z-index: 1;
  background: transparent;
  pointer-events: none;
}

.guide-spotlight[hidden] {
  display: none;
}

.guide-popover {
  z-index: 2;
}

.is-guide-target {
  z-index: auto;
  scroll-margin: 120px;
}

.admin-article-toolbar {
  margin: 0;
  padding: 0 18px 14px;
  justify-content: flex-end;
}

.admin-article-toolbar form {
  margin: 0;
}

.topic-suggestions {
  padding: 10px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px dashed #d8def1;
  border-radius: 0;
}

.topic-suggestions div {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

.topic-suggestions button {
  min-height: 34px;
  padding: 7px 11px;
  color: var(--soft-ink);
  background: rgba(248, 244, 255, 0.58);
  border: 1px solid #dcd2ff;
  border-radius: 999px;
  box-shadow: none;
  font-size: 12px;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.topic-suggestions button:hover {
  color: #fff;
  background: linear-gradient(135deg, #7d49ff, #1765ff);
  border-color: rgba(23, 101, 255, 0.34);
  box-shadow: 0 12px 22px rgba(57, 103, 255, 0.18);
  transform: translateY(-1px);
}

@media (max-width: 920px) {
  .topbar {
    width: min(100% - 18px, 1210px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
    overflow: visible;
  }

  .nav-left {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .brand {
    max-width: 100%;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .primary-nav,
  .account-nav {
    position: relative;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 38px 4px 0;
    border-left: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    background: linear-gradient(90deg, transparent calc(100% - 54px), rgba(255, 255, 255, 0.96) 100%);
  }

  .primary-nav::after,
  .account-nav::after {
    content: ">";
    position: sticky;
    right: 0;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    align-self: center;
    color: var(--blue);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #dce5f5;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(34, 68, 139, 0.12);
    pointer-events: none;
    animation: nav-scroll-nudge 1.65s ease-in-out infinite;
  }

  .primary-nav::-webkit-scrollbar,
  .account-nav::-webkit-scrollbar {
    display: none;
  }

  .account-nav form,
  .primary-nav a,
  .account-nav a,
  .account-nav .button.small,
  .account-nav .credit-pill,
  .link-button {
    width: auto;
    min-width: max-content;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .primary-nav a,
  .account-nav a:not(.button):not(.credit-pill),
  .link-button {
    padding: 8px 6px;
  }

  .account-nav .button.small,
  .account-nav .credit-pill {
    min-height: 38px;
    padding: 8px 12px;
  }
}

@keyframes nav-scroll-nudge {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.72;
  }
  50% {
    transform: translateX(5px);
    opacity: 1;
  }
}

@media (max-width: 1180px) {
  body.has-editor-modal::before {
    z-index: 2147483000 !important;
  }

  body.has-editor-modal .ai-edit-panel.is-open,
  .ai-edit-panel.is-open[data-ai-edit-panel] {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    top: auto !important;
    z-index: 2147483001 !important;
    width: auto !important;
    max-height: min(74vh, 640px) !important;
    overflow: auto !important;
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #dce5f5;
    border-radius: 18px 18px 12px 12px;
    box-shadow: 0 28px 78px rgba(15, 23, 42, 0.28);
  }

  .ai-edit-panel.is-open .ai-edit-close {
    display: grid !important;
  }

  body.has-editor-modal .danger-zone {
    display: none !important;
  }
}

@media (max-width: 620px) {
  .article-rich-editor.has-inline-action {
    padding-left: 14px;
  }

  .editor-inline-menu {
    gap: 6px;
    align-items: stretch;
    flex-direction: column;
  }

  .editor-inline-menu.is-mobile-toolbar {
    gap: 10px;
    align-items: stretch;
    flex-direction: unset;
  }

  .editor-inline-menu > .button {
    width: 100%;
    min-width: 88px;
  }

  .editor-resize-actions {
    gap: 6px;
  }

  .editor-resize-actions .button {
    flex: 1 1 86px;
    min-width: 0;
  }

  .editor-inline-menu.is-mobile-toolbar {
    left: 8px !important;
    right: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 14px 14px 10px 10px !important;
  }

  .editor-inline-menu.is-mobile-toolbar > .button {
    display: none !important;
  }

  .editor-inline-menu.is-mobile-toolbar .editor-resize-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .editor-inline-menu.is-mobile-toolbar .editor-resize-actions label {
    order: 1 !important;
    grid-column: 1 / -1 !important;
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
    font-size: 12px !important;
  }

  .editor-inline-menu.is-mobile-toolbar .editor-resize-actions input[type="range"] {
    width: 100% !important;
  }

  .editor-inline-menu.is-mobile-toolbar .editor-resize-actions .button {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .editor-inline-menu.is-mobile-toolbar [data-image-size-step="-10"] {
    order: 2 !important;
  }

  .editor-inline-menu.is-mobile-toolbar [data-image-size-step="10"] {
    order: 3 !important;
  }

  .editor-inline-menu.is-mobile-toolbar [data-image-move="up"] {
    order: 4 !important;
  }

  .editor-inline-menu.is-mobile-toolbar [data-image-move="down"] {
    order: 5 !important;
  }

  .editor-inline-menu.is-mobile-toolbar [data-image-delete] {
    order: 6 !important;
    grid-column: 1 / -1 !important;
  }
}

.field-warning {
  color: var(--bad);
  font-size: 12px;
  font-weight: 850;
}

input.is-invalid,
textarea.is-invalid,
select.is-invalid {
  border-color: var(--bad) !important;
  box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.10) !important;
}

.article-rich-editor.has-inline-action {
  padding-left: 24px;
}

@media (max-width: 760px) {
  .article-rich-editor.has-inline-action {
    padding-left: 14px;
  }
}

.footer-payment-band {
  width: min(100%, 310px);
  padding: 8px 10px;
  border: 1px solid #e2e8f4;
  border-radius: 8px;
  background: #fff;
}

.footer-payment-band img {
  display: block;
  width: 100%;
  height: auto;
}

.iyzico-checkout-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid #e2e8f4;
  border-radius: 8px;
  background: #fff;
}

.iyzico-checkout-logo img {
  display: block;
  width: min(210px, 48vw);
  height: auto;
}

.billing-terms-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 0 0;
  color: var(--soft-ink);
  font-size: 12px;
  line-height: 1.45;
}

.billing-terms-consent input {
  flex: 0 0 auto;
  margin-top: 2px;
}

.billing-terms-consent a {
  color: var(--teal-deep);
  font-weight: 850;
}

.billing-lock-card {
  display: grid;
  gap: 10px;
  padding: 22px;
  color: var(--soft-ink);
  background: linear-gradient(135deg, #ffffff, #f5f9ff);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--neo-shadow-soft);
}

.billing-lock-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
}

.billing-lock-card p {
  margin: 0;
  max-width: 720px;
  line-height: 1.55;
}

.billing-lock-card .button {
  justify-self: start;
  margin-top: 4px;
}

body.has-checkout-modal {
  overflow: hidden;
}

.checkout-modal[hidden] {
  display: none;
}

.checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 190ms ease;
}

.checkout-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.checkout-modal.is-closing {
  opacity: 0;
}

.checkout-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 33, 0.58);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 190ms ease;
}

.checkout-modal.is-open .checkout-modal-backdrop {
  opacity: 1;
}

.checkout-modal-card {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  display: grid;
  gap: 16px;
  padding: 24px;
  background: #fff;
  border: 1px solid rgba(213, 225, 244, 0.96);
  border-radius: 18px;
  box-shadow: 0 32px 96px rgba(16, 28, 52, 0.30);
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity 210ms ease, transform 210ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.checkout-modal.is-open .checkout-modal-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.checkout-modal.is-closing .checkout-modal-card {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}

.checkout-modal-card h2 {
  margin: -6px 0 0;
  color: var(--ink);
  font-size: 28px;
}

.checkout-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--soft-ink);
  background: #f4f7fb;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(23, 34, 58, 0.10);
  font-size: 0;
  line-height: 1;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.checkout-modal-close::before,
.checkout-modal-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transform-origin: center;
}

.checkout-modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.checkout-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.checkout-modal-close:hover {
  background: #eef4ff;
  border-color: #cbdaf1;
  transform: scale(1.04);
  box-shadow: 0 12px 26px rgba(23, 34, 58, 0.14);
}

.checkout-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 14px;
  align-items: end;
  padding: 14px;
  background: linear-gradient(180deg, #f8fbff, #eef5ff);
  border: 1px solid #d8e6fa;
  border-radius: 12px;
}

.checkout-summary span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.checkout-summary strong {
  min-width: 0;
  color: var(--ink);
  font-size: 20px;
  overflow-wrap: anywhere;
}

.checkout-summary b {
  color: var(--teal-deep);
  font-size: 24px;
}

.checkout-iyzico-box {
  display: grid;
  grid-template-columns: minmax(132px, 180px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.checkout-iyzico-box img {
  width: 100%;
  height: auto;
}

.checkout-iyzico-box span,
.checkout-consent-copy {
  color: var(--soft-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.checkout-consents {
  display: grid;
  gap: 0;
}

.checkout-consents label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 62px;
  padding: 14px;
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.checkout-consents input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.checkout-consent-mark {
  position: relative;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border: 2px solid #9eb0d2;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 0 rgba(102, 54, 255, 0);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.checkout-consent-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 8px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  opacity: 0;
  transform: translate(-50%, -58%) rotate(-45deg) scale(0.7);
  transform-origin: center;
  transition: opacity 160ms ease, transform 160ms ease;
}

.checkout-consents label:hover {
  background: #f3f8ff;
  border-color: #c7d8f1;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(23, 34, 58, 0.08);
}

.checkout-consents input:checked + .checkout-consent-mark {
  background: linear-gradient(135deg, #7047ff, #1f63d6);
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(102, 71, 255, 0.30), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  transform: scale(1.04);
}

.checkout-consents input:checked + .checkout-consent-mark::after {
  opacity: 1;
  transform: translate(-50%, -58%) rotate(-45deg) scale(1);
}

.checkout-consents a {
  color: var(--teal-deep);
  font-weight: 850;
  text-decoration: none;
}

.checkout-consent-copy strong {
  color: var(--ink);
  font-weight: 850;
}

.checkout-consents a:hover {
  text-decoration: underline;
}

.checkout-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.checkout-modal-actions .button {
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease, filter 160ms ease;
}

.checkout-modal-actions .button:not(:disabled):hover {
  transform: translateY(-2px);
}

.checkout-modal-actions .button:not(:disabled):active {
  transform: translateY(0) scale(0.98);
}

.checkout-modal-actions .button:disabled {
  opacity: 0.56;
  filter: saturate(0.75);
}

@keyframes editor-side-panel-enter {
  from {
    opacity: 0;
    transform: translateX(-8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@media (max-width: 560px) {
  .checkout-modal {
    padding: 12px;
  }

  .checkout-modal-card {
    padding: 20px;
    border-radius: 14px;
  }

  .checkout-summary {
    grid-template-columns: 1fr;
  }

  .checkout-iyzico-box {
    grid-template-columns: 1fr;
  }

  .checkout-iyzico-box img {
    max-width: 190px;
  }

  .checkout-modal-actions .button {
    flex: 1 1 160px;
  }
}

.check.is-disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.check.is-disabled input {
  cursor: not-allowed;
}

.article-rich-editor figure.article-inline-image,
.article-rich-editor .article-inline-image {
  clear: both;
  display: block;
  margin: 22px auto;
}

.article-rich-editor figure.article-inline-image + p,
.article-rich-editor .article-inline-image + p {
  margin-top: 16px;
}

.ai-edit-panel.is-open .ai-edit-close,
.ai-edit-panel.is-open .ai-edit-close:hover,
.ai-edit-panel.is-open .ai-edit-close:focus-visible {
  z-index: 3;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  color: #fff;
  background: var(--bad);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(180, 35, 24, 0.18);
}

@media (max-width: 1180px) {
  .ai-edit-panel.is-open .ai-edit-close,
  .ai-edit-panel.is-open .ai-edit-close:hover,
  .ai-edit-panel.is-open .ai-edit-close:focus-visible {
    right: 12px !important;
    left: auto !important;
    color: var(--soft-ink);
    background: #f4f7fb;
    border: 1px solid var(--line);
    box-shadow: 0 10px 22px rgba(23, 34, 58, 0.10);
  }
}

.topic-suggestions div {
  align-items: stretch;
}

.topic-suggestions button {
  flex: 1 1 220px;
  justify-content: flex-start;
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

@media (max-width: 560px) {
  .iyzico-checkout-logo,
  .footer-payment-band {
    width: 100%;
  }

  .topic-suggestions button {
    flex-basis: 100%;
  }
}

.multi-image-preview,
.automation-image-strip {
  padding: 12px 12px 6px;
  overflow: visible;
}

.automation-image-item,
.upload-preview-item,
.job-image-wrap {
  overflow: visible;
}

.automation-image-item .image-delete-button,
.upload-preview-item .image-delete-button,
.job-image-wrap .image-delete-button,
.automation-image-item form[data-image-delete-form],
.upload-preview-item form {
  top: -6px;
  right: -6px;
}

/* Automation row/control normalization */
[data-automation-topic-list-existing] {
  padding-right: 10px;
}

.automation-topic-row,
.automation-topic-row.used {
  display: grid;
  grid-template-columns: 32px 64px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 10px;
  height: 64px;
  min-height: 64px;
  padding: 0 10px;
}

.automation-topic-row > form:not(.automation-topic-edit) {
  grid-column: 4;
  justify-self: center;
  align-self: center;
  position: static !important;
  display: grid;
  place-items: center;
  margin: 0;
  transform: none !important;
  width: 32px;
  min-width: 32px;
  height: 64px;
}

.automation-topic-row > form[data-topic-delete-form] {
  position: absolute !important;
  top: 50%;
  right: 14px;
  width: 26px;
  height: 26px;
  min-width: 26px;
  transform: translateY(-50%) !important;
  display: grid;
  place-items: center;
}

.automation-topic-edit {
  grid-column: 3;
  align-self: center;
  min-width: 0;
  height: 64px;
  display: grid;
  place-items: center stretch;
  margin: 0;
}

.automation-topic-edit input {
  display: block;
  height: 36px;
  min-height: 36px;
  padding-block: 0;
  line-height: 36px;
  width: 100%;
}

.topic-order-controls {
  grid-column: 1;
  width: 32px;
  height: 64px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
}

.topic-order-controls button {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}

.topic-image-cell,
.topic-image-cell .topic-assigned-image,
.topic-assigned-image {
  width: 56px;
}

.topic-image-cell {
  grid-column: 2;
  justify-self: center;
  align-self: center;
}

.topic-assigned-image {
  min-height: 38px;
  font-size: 0;
}

.topic-assigned-image small {
  font-size: 10px;
}

.automation-topic-static {
  grid-column: 3 / 5;
}

.topic-delete-button,
.automation-topic-row .topic-delete-button,
button.topic-delete-button,
button.topic-delete-button:hover,
button.topic-delete-button:active,
button.topic-delete-button:focus-visible {
  position: relative !important;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  line-height: 26px;
  justify-self: center;
  align-self: center;
  font-size: 0;
  padding: 0;
  display: grid;
  place-items: center;
}

.topic-delete-button::before,
.topic-delete-button::after {
  left: 50%;
  top: 50%;
}

.image-delete-button,
.topic-delete-button {
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.image-delete-button::before,
.image-delete-button::after,
.topic-delete-button::before,
.topic-delete-button::after {
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), width 180ms ease, background 180ms ease;
}

.automation-image-item .image-delete-button,
.upload-preview-item .image-delete-button,
.job-image-wrap .image-delete-button,
.automation-image-item .image-delete-button:hover,
.upload-preview-item .image-delete-button:hover,
.job-image-wrap .image-delete-button:hover,
.automation-image-item .image-delete-button:focus-visible,
.upload-preview-item .image-delete-button:focus-visible,
.job-image-wrap .image-delete-button:focus-visible {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  color: #dc2626;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 999px;
  box-shadow: 0 10px 20px rgba(180, 35, 24, 0.18);
}

.automation-image-item .image-delete-button:hover,
.upload-preview-item .image-delete-button:hover,
.job-image-wrap .image-delete-button:hover,
.automation-image-item .image-delete-button:focus-visible,
.upload-preview-item .image-delete-button:focus-visible,
.job-image-wrap .image-delete-button:focus-visible {
  color: #fff;
  background: #ef4444;
  box-shadow: 0 14px 28px rgba(180, 35, 24, 0.24);
}

.automation-image-item .image-delete-button:hover::before,
.automation-image-item .image-delete-button:focus-visible::before,
.upload-preview-item .image-delete-button:hover::before,
.upload-preview-item .image-delete-button:focus-visible::before,
.job-image-wrap .image-delete-button:hover::before,
.job-image-wrap .image-delete-button:focus-visible::before {
  transform: translate(-50%, -50%) rotate(135deg) scale(1.18);
}

.automation-image-item .image-delete-button:hover::after,
.automation-image-item .image-delete-button:focus-visible::after,
.upload-preview-item .image-delete-button:hover::after,
.upload-preview-item .image-delete-button:focus-visible::after,
.job-image-wrap .image-delete-button:hover::after,
.job-image-wrap .image-delete-button:focus-visible::after {
  transform: translate(-50%, -50%) rotate(45deg) scale(1.18);
}

/* Keep delete buttons pinned; animate only the cross via transforms above. */

/* Final automation delete-control overrides */
.automation-topic-row > form[data-topic-delete-form] {
  position: absolute !important;
  top: 50% !important;
  right: 14px !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  transform: translateY(-50%) !important;
}

.automation-topic-row > form[data-topic-delete-form] > .topic-delete-button,
.automation-topic-row > form[data-topic-delete-form] > .topic-delete-button:hover,
.automation-topic-row > form[data-topic-delete-form] > .topic-delete-button:active,
.automation-topic-row > form[data-topic-delete-form] > .topic-delete-button:focus-visible {
  position: relative !important;
  inset: auto !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
  line-height: 1 !important;
  font-size: 0 !important;
}

.automation-topic-row > form[data-topic-delete-form] > .topic-delete-button::before,
.automation-topic-row > form[data-topic-delete-form] > .topic-delete-button::after {
  left: 50% !important;
  top: 50% !important;
}

.automation-image-item form[data-image-delete-form],
.upload-preview-item form {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  margin: 0 !important;
  z-index: 12 !important;
}

.automation-image-item .image-strip-delete-button,
.automation-image-item .image-strip-delete-button:hover,
.automation-image-item .image-strip-delete-button:active,
.automation-image-item .image-strip-delete-button:focus-visible {
  position: relative !important;
  top: 0 !important;
  right: 0 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
}

@media (max-width: 920px) {
  .primary-nav,
  .account-nav {
    padding-right: 10px;
    background: linear-gradient(90deg, transparent 0, transparent calc(100% - 30px), rgba(255, 255, 255, 0.96) 100%);
  }

  .primary-nav::after,
  .account-nav::after {
    content: "Kaydır";
    flex: 0 0 auto;
    width: auto;
    min-width: 58px;
    padding: 0 9px;
    font-size: 11px;
    font-weight: 850;
    animation: none;
  }
}

@media (max-width: 1180px) {
  button.ai-edit-close,
  button.ai-edit-close:hover,
  button.ai-edit-close:active,
  button.ai-edit-close:focus-visible,
  .ai-edit-panel.is-open button.ai-edit-close,
  .ai-edit-panel.is-open button.ai-edit-close:hover,
  .ai-edit-panel.is-open button.ai-edit-close:active,
  .ai-edit-panel.is-open button.ai-edit-close:focus-visible {
    position: absolute !important;
    inset: auto 12px auto auto !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 5 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: var(--soft-ink) !important;
    background: #f4f7fb !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 22px rgba(23, 34, 58, 0.10) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    transform: none !important;
  }

  button.ai-edit-close::before,
  button.ai-edit-close::after,
  button.ai-edit-close:hover::before,
  button.ai-edit-close:hover::after,
  button.ai-edit-close:active::before,
  button.ai-edit-close:active::after,
  button.ai-edit-close:focus-visible::before,
  button.ai-edit-close:focus-visible::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 13px !important;
    height: 2px !important;
    display: block !important;
    background: currentColor !important;
    border: 0 !important;
    border-radius: 999px !important;
    transform-origin: center !important;
  }

  button.ai-edit-close::before,
  button.ai-edit-close:hover::before,
  button.ai-edit-close:active::before,
  button.ai-edit-close:focus-visible::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  button.ai-edit-close::after,
  button.ai-edit-close:hover::after,
  button.ai-edit-close:active::after,
  button.ai-edit-close:focus-visible::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }
}

/* Canonical responsive header rules. Kept at the end to neutralize older nav overrides. */
.topbar {
  width: min(1220px, calc(100% - 24px)) !important;
  min-height: 74px !important;
  display: grid !important;
  grid-template-columns: auto minmax(260px, 1fr) auto !important;
  grid-template-areas: "brand primary account" !important;
  align-items: center !important;
  gap: 22px !important;
  overflow: visible !important;
}

.topbar-row,
.topbar-menu {
  display: contents !important;
}

.topbar .nav-left {
  grid-area: brand !important;
  width: auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.topbar .primary-nav {
  grid-area: primary !important;
  width: auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  overflow: visible !important;
  padding: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  scrollbar-width: auto !important;
}

.topbar .account-nav {
  grid-area: account !important;
  width: auto !important;
  min-width: max-content !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow: visible !important;
  background: transparent !important;
}

.topbar .primary-nav::after,
.topbar .account-nav::after {
  display: none !important;
  content: none !important;
}

.topbar .primary-nav a,
.topbar .account-nav a,
.topbar .account-nav form,
.topbar .account-nav .button.small,
.topbar .account-nav .credit-pill,
.topbar .link-button {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

.topbar .nav-toggle {
  display: none !important;
}

@media (max-width: 920px) {
  .topbar {
    width: min(100% - 18px, 1220px) !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "top"
      "menu" !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }

  .topbar-row {
    grid-area: top !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .topbar-menu {
    grid-area: menu !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .topbar-menu[hidden] {
    display: none !important;
  }

  .topbar .nav-left {
    grid-area: auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .topbar .nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
  }

  .topbar .primary-nav,
  .topbar .account-nav {
    grid-area: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .topbar .primary-nav a,
  .topbar .account-nav a,
  .topbar .account-nav form,
  .topbar .account-nav .button.small,
  .topbar .account-nav .credit-pill,
  .topbar .link-button {
    width: 100% !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 9px 10px !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .topbar .account-nav form {
    margin: 0 !important;
  }

  .topbar .account-nav form .link-button {
    height: 100% !important;
  }
}

/* Canonical automation overflow controls. */
.automation-plan-card,
.automation-topic-list,
[data-automation-topic-list-existing],
.automation-topic-row,
.automation-topic-edit,
.automation-topic-edit input,
.automation-image-strip {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.automation-plan-card {
  overflow: hidden !important;
}

.automation-topic-row,
.automation-topic-row.used {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 32px 64px minmax(0, 1fr) 32px !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 64px !important;
  height: auto !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
}

.automation-topic-row > form[data-topic-delete-form] {
  position: static !important;
  grid-column: 4 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.automation-topic-edit {
  grid-column: 3 !important;
  width: 100% !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
  margin: 0 !important;
}

.automation-topic-edit input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.automation-topic-static {
  grid-column: 3 / 5 !important;
  min-width: 0 !important;
}

.topic-order-controls {
  grid-column: 1 !important;
  width: 32px !important;
  min-width: 32px !important;
}

.topic-image-cell {
  grid-column: 2 !important;
  width: 64px !important;
  min-width: 0 !important;
  max-width: 64px !important;
}

.topic-image-cell .topic-assigned-image,
.topic-assigned-image {
  width: 56px !important;
  max-width: 56px !important;
}

.automation-image-strip {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 6px 2px 12px !important;
  overflow: visible !important;
}

.automation-image-item,
.automation-image-add-form {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 10 !important;
}

.automation-image-item > button,
.automation-add-image-button.is-strip-add {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.automation-image-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.automation-image-item form[data-image-delete-form] {
  top: 4px !important;
  right: 4px !important;
}

@media (max-width: 640px) {
  .automation-topic-row,
  .automation-topic-row.used {
    grid-template-columns: 28px 58px minmax(0, 1fr) 30px !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .topic-order-controls {
    width: 28px !important;
    min-width: 28px !important;
  }

  .topic-image-cell {
    width: 58px !important;
    max-width: 58px !important;
  }

  .topic-image-cell .topic-assigned-image,
  .topic-assigned-image {
    width: 52px !important;
    max-width: 52px !important;
  }

  .automation-image-strip {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .topbar {
    width: min(100% - 12px, 1220px) !important;
    padding: 9px 10px !important;
  }

  .topbar .brand {
    font-size: clamp(19px, 6vw, 22px) !important;
  }

  .topbar .brand-mark {
    width: 30px !important;
    height: 30px !important;
  }

  .topbar .primary-nav,
  .topbar .account-nav {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Final guide + automation stability overrides. */
.guide-page,
.guide-page *,
.automation-builder,
.automation-builder *,
.automation-plan-card,
.automation-plan-card * {
  box-sizing: border-box !important;
}

.guide-page {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 22px !important;
  overflow: hidden !important;
}

.guide-hero,
.guide-intro-rich,
.guide-quick-grid article,
.guide-accordion,
.guide-video-card {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

.guide-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 18px !important;
  padding: 28px !important;
}

.guide-hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-self: end !important;
  justify-content: flex-end !important;
}

.guide-quick-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 16px !important;
}

.guide-quick-grid article {
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
}

.guide-intro-rich {
  padding: 26px !important;
}

.guide-accordion-trigger {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 16px !important;
}

.guide-accordion-heading,
.guide-accordion-heading strong,
.guide-accordion-heading small,
.guide-video-copy,
.guide-video-copy strong,
.guide-video-copy span {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

.guide-accordion-heading strong {
  margin-bottom: 6px !important;
}

.guide-accordion-heading small,
.guide-accordion-count,
.guide-video-copy span {
  line-height: 1.55 !important;
}

.guide-accordion-meta {
  min-width: 0 !important;
  max-width: 100% !important;
  justify-items: end !important;
  align-content: start !important;
  gap: 12px !important;
}

.guide-video-card {
  align-items: start !important;
  grid-template-columns: minmax(200px, 320px) minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 16px !important;
}

.guide-video-copy {
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
}

.guide-shell .guide-backdrop,
.guide-backdrop {
  background: transparent !important;
}

.guide-shell.is-guide-intro .guide-backdrop {
  background: rgba(15, 23, 42, 0.58) !important;
}

.guide-shell .guide-spotlight,
.guide-spotlight {
  background: transparent !important;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.58), 0 18px 42px rgba(15, 23, 42, 0.22) !important;
}

.guide-shell .guide-popover,
.guide-popover {
  width: min(390px, calc(100vw - 22px)) !important;
  padding: 18px 18px 16px !important;
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(148, 163, 184, 0.34) !important;
  border-radius: 16px !important;
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.34) !important;
  backdrop-filter: blur(10px) !important;
}

.guide-popover strong {
  margin-right: 42px !important;
}

.guide-popover small,
.guide-popover strong,
.guide-popover p {
  color: #0f172a !important;
  text-shadow: none !important;
  overflow-wrap: anywhere !important;
}

.guide-popover p {
  color: #334155 !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
}

.automation-keyword-compose {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: stretch !important;
}

.automation-keyword-compose .keyword-field {
  min-width: 0 !important;
}

.automation-inline-ai-button {
  justify-self: start !important;
  margin-top: 2px !important;
}

.automation-keyword-suggestions {
  margin-top: 10px !important;
}

.automation-keyword-suggestions > div,
.automation-keyword-suggestions [data-automation-keyword-suggestion-list] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.automation-keyword-suggestions .suggestion-chip,
.automation-keyword-suggestions button.suggestion-chip {
  width: auto !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 1 auto !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  white-space: normal !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

.automation-topic-picker > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

.automation-topic-choice {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) 32px !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px !important;
}

.automation-topic-choice .topic-order-controls {
  width: 30px !important;
  min-width: 30px !important;
  height: auto !important;
  align-self: center !important;
}

.automation-topic-choice input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.automation-topic-choice [data-choice-remove],
.automation-topic-choice [data-choice-remove]:hover,
.automation-topic-choice [data-choice-remove]:focus-visible {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  border-radius: 999px !important;
  transform: none !important;
}

.automation-topic-list,
[data-automation-topic-list-existing] {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 10px !important;
}

.automation-topic-row,
.automation-topic-row.used {
  grid-template-columns: 32px 64px minmax(0, 1fr) 32px !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 66px !important;
  padding: 9px 10px !important;
  overflow: hidden !important;
}

.automation-topic-row .topic-order-controls {
  height: auto !important;
  min-height: 0 !important;
  align-content: center !important;
}

.automation-topic-edit {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
}

.automation-topic-edit input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.automation-topic-row > form[data-topic-delete-form] {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  align-self: center !important;
}

@media (max-width: 760px) {
  .guide-hero,
  .guide-accordion-trigger,
  .guide-video-card,
  .automation-keyword-compose {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .guide-hero-actions {
    justify-content: stretch !important;
  }

  .guide-hero-actions .button {
    width: 100% !important;
    justify-content: center !important;
  }

  .guide-accordion-meta {
    width: 100% !important;
    min-width: 0 !important;
    justify-items: stretch !important;
  }

  .guide-accordion-hint {
    justify-self: start !important;
  }

  .automation-topic-row,
  .automation-topic-row.used {
    grid-template-columns: 28px 54px minmax(0, 1fr) 30px !important;
    gap: 7px !important;
    padding: 8px !important;
  }
}

@media (max-width: 420px) {
  .automation-topic-row,
  .automation-topic-row.used {
    grid-template-columns: 26px 46px minmax(0, 1fr) 28px !important;
    gap: 6px !important;
  }

  .guide-intro-rich,
  .guide-hero,
  .guide-accordion,
  .guide-video-card {
    padding: 18px !important;
  }

  .topic-image-cell {
    width: 46px !important;
    max-width: 46px !important;
  }

  .topic-image-cell .topic-assigned-image,
  .topic-assigned-image {
    width: 42px !important;
    max-width: 42px !important;
  }

  .topic-order-controls button {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  .automation-topic-row > form[data-topic-delete-form],
  .automation-topic-row > form[data-topic-delete-form] > .topic-delete-button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }
}

/* Automation final alignment pass. */
[data-topic-source-panel="ai"] > [data-automation-ai-topics] {
  margin-top: 10px !important;
}

.automation-topic-row > form[data-topic-delete-form],
.automation-topic-row > form[data-topic-delete-form] > .topic-delete-button,
.automation-topic-choice [data-choice-remove],
.automation-image-item .image-delete-button,
.upload-preview-item .image-delete-button,
.job-image-wrap .image-delete-button,
.image-lightbox button {
  position: relative;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
  text-align: center !important;
}

.automation-topic-row > form[data-topic-delete-form] > .topic-delete-button::before,
.automation-topic-row > form[data-topic-delete-form] > .topic-delete-button::after,
.automation-topic-choice [data-choice-remove]::before,
.automation-topic-choice [data-choice-remove]::after,
.automation-image-item .image-delete-button::before,
.automation-image-item .image-delete-button::after,
.upload-preview-item .image-delete-button::before,
.upload-preview-item .image-delete-button::after,
.job-image-wrap .image-delete-button::before,
.job-image-wrap .image-delete-button::after,
.image-lightbox button::before,
.image-lightbox button::after,
.guide-close::before,
.guide-close::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 12px !important;
  height: 2px !important;
  margin: 0 !important;
  background: currentColor !important;
  border: 0 !important;
  border-radius: 999px !important;
  transform-origin: center !important;
}

.automation-topic-row > form[data-topic-delete-form] > .topic-delete-button::before,
.automation-topic-choice [data-choice-remove]::before,
.automation-image-item .image-delete-button::before,
.upload-preview-item .image-delete-button::before,
.job-image-wrap .image-delete-button::before,
.image-lightbox button::before,
.guide-close::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.automation-topic-row > form[data-topic-delete-form] > .topic-delete-button::after,
.automation-topic-choice [data-choice-remove]::after,
.automation-image-item .image-delete-button::after,
.upload-preview-item .image-delete-button::after,
.job-image-wrap .image-delete-button::after,
.image-lightbox button::after,
.guide-close::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.image-lightbox button {
  position: fixed !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
}

.guide-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  z-index: 2 !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
  text-align: center !important;
  color: #475569 !important;
  background: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10) !important;
}

.guide-close:hover,
.guide-close:focus-visible {
  color: #0f172a !important;
  background: #e8f0ff !important;
  border-color: rgba(96, 132, 255, 0.38) !important;
  box-shadow: 0 14px 28px rgba(57, 103, 255, 0.18) !important;
}

.job-actions {
  margin-top: 0 !important;
  align-items: center !important;
  gap: 8px !important;
}

.job-actions a,
.job-actions form {
  margin: 0 !important;
}

.job-actions a.button,
.job-actions .button {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.automation-credit-option input[type="checkbox"] {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
}

/* Pin image removal controls to thumbnails without affecting layout. */
.upload-preview-item {
  position: relative !important;
  overflow: visible !important;
}

.upload-preview-item > .image-delete-button,
.job-image-wrap > .image-delete-button {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  z-index: 20 !important;
  transform: none !important;
}

.automation-image-item form[data-image-delete-form],
.automation-image-item form[data-image-delete-form]:hover,
.automation-image-item form[data-image-delete-form]:focus-within {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 20 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Silme "×" butonu: thumbnail'in İÇİNDE sabit — hover'da yeri/boyutu
   DEĞİŞMEZ (önceki tasarımda hover'da köşeye kaçıp "yüzüyordu"). */
.automation-image-item form[data-image-delete-form] > .image-delete-button,
.automation-image-item form[data-image-delete-form] > .image-delete-button:hover,
.automation-image-item form[data-image-delete-form] > .image-delete-button:active,
.automation-image-item form[data-image-delete-form] > .image-delete-button:focus-visible {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  color: #dc2626 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(220, 38, 38, 0.28) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18) !important;
  transform: none !important;
}

.automation-image-item form[data-image-delete-form] > .image-delete-button:hover,
.automation-image-item form[data-image-delete-form] > .image-delete-button:focus-visible {
  color: #fff !important;
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* Keep automation thumbnails stable while allowing a contained hover zoom. */
.automation-image-strip {
  grid-template-columns: repeat(auto-fill, minmax(86px, 112px)) !important;
  justify-content: start !important;
  align-items: start !important;
}

.automation-image-item,
.automation-image-add-form {
  width: 112px !important;
  max-width: 112px !important;
  min-width: 86px !important;
  aspect-ratio: 16 / 10 !important;
}

.automation-image-item > button {
  display: block !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16 / 10 !important;
  border-radius: 8px !important;
}

.automation-image-item img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  transform: translateY(0) scale(1) !important;
}

.automation-image-item > button:hover img,
.automation-image-item > button:focus-visible img {
  transform: scale(1.025) !important;
}

.automation-image-item > button:not(:hover):not(:focus-visible) img {
  transform: translateY(0) scale(1) !important;
}

/* Guide page redesign */
.guide-page {
  gap: 28px !important;
}

.guide-banner,
.guide-start-panel,
.guide-support-panel,
.guide-library-intro,
.guide-track,
.guide-rich-content {
  position: relative;
  overflow: hidden;
}

.guide-banner {
  padding: 34px !important;
  background:
    radial-gradient(circle at top left, rgba(31, 99, 214, 0.16), transparent 34%),
    radial-gradient(circle at top right, rgba(240, 138, 36, 0.18), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.94)) !important;
  border: 1px solid rgba(203, 214, 230, 0.95) !important;
  box-shadow: 0 28px 56px rgba(15, 23, 42, 0.08) !important;
}

.guide-banner::before,
.guide-track::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 22px;
  pointer-events: none;
}

.guide-banner-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 24px;
  align-items: start;
}

.guide-banner-copy h1,
.guide-track-head h2,
.guide-section-head h2 {
  margin: 0;
  color: #10203a;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.guide-banner-copy h1 {
  max-width: 12ch;
  font-size: clamp(42px, 6vw, 74px);
}

.guide-banner-copy .lead,
.guide-section-head p,
.guide-track-head p,
.guide-video-copy p,
.guide-quick-nav p,
.guide-empty-state p {
  color: #46556f !important;
  line-height: 1.7 !important;
}

.guide-banner-copy .lead {
  max-width: 62ch;
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 18px;
}

.guide-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.guide-badge {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  color: #12345d;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(31, 99, 214, 0.16);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(31, 99, 214, 0.10);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.guide-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.guide-banner-side {
  display: grid;
  gap: 16px;
}

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

.guide-kpi-grid article,
.guide-quick-nav,
.guide-start-card,
.guide-support-list div,
.guide-video-card,
.guide-empty-state {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(203, 214, 230, 0.95);
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.06);
}

.guide-kpi-grid article {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: 20px;
}

.guide-kpi-grid strong {
  color: #10203a;
  font-size: 28px;
  line-height: 1;
}

.guide-kpi-grid span {
  color: #55647c;
  font-size: 13px;
  font-weight: 800;
}

.guide-quick-nav,
.guide-start-card,
.guide-support-list div,
.guide-video-card,
.guide-empty-state {
  border-radius: 22px;
}

.guide-quick-nav {
  padding: 22px;
}

.guide-section-kicker {
  margin: 0 0 10px;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.guide-anchor-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.guide-anchor-list a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 14px;
  color: #163255;
  background: linear-gradient(180deg, #ffffff, #edf4ff);
  border: 1px solid rgba(31, 99, 214, 0.14);
  border-radius: 999px;
  box-shadow: 0 10px 20px rgba(31, 99, 214, 0.08);
  font-weight: 850;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

.guide-anchor-list a:hover,
.guide-anchor-list a:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, #1f63d6, #1347b9);
  box-shadow: 0 18px 30px rgba(19, 71, 185, 0.24);
  transform: translateY(-1px);
}

.guide-rich-content {
  padding: 28px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.94)) !important;
}

.guide-rich-content > :first-child {
  margin-top: 0;
}

.guide-rich-content > :last-child {
  margin-bottom: 0;
}

.guide-rich-content iframe {
  width: 100%;
  max-width: 100%;
  min-height: 360px;
  border: 0;
  border-radius: 22px;
}

.guide-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 18px;
}

.guide-start-panel,
.guide-support-panel,
.guide-library-intro,
.guide-track {
  padding: 28px !important;
}

.guide-start-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.96)) !important;
}

.guide-support-panel {
  background: linear-gradient(180deg, rgba(255, 249, 241, 0.98), rgba(255, 255, 255, 0.96)) !important;
}

.guide-section-head {
  position: relative;
  z-index: 1;
}

.guide-section-head h2,
.guide-track-head h2 {
  font-size: clamp(28px, 3.8vw, 42px);
  margin-bottom: 10px;
}

.guide-start-grid,
.guide-support-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.guide-start-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guide-start-card {
  display: grid;
  gap: 10px;
  padding: 20px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.guide-start-card:hover,
.guide-start-card:focus-within {
  transform: translateY(-2px);
  border-color: rgba(31, 99, 214, 0.24);
  box-shadow: 0 24px 34px rgba(31, 99, 214, 0.10);
}

.guide-start-card span {
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.guide-start-card strong,
.guide-video-meta strong,
.guide-empty-state strong {
  color: #10203a;
  font-size: 19px;
  line-height: 1.28;
}

.guide-start-card p {
  margin: 0;
  color: #51627a;
  line-height: 1.65;
}

.guide-support-list div {
  padding: 18px;
  color: #3f4f68;
  font-weight: 700;
  line-height: 1.65;
}

.guide-library-intro {
  background:
    radial-gradient(circle at right top, rgba(31, 99, 214, 0.10), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96)) !important;
}

.guide-track-stack {
  display: grid;
  gap: 18px;
}

.guide-track {
  scroll-margin-top: 120px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 255, 0.97)) !important;
}

.guide-track-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.guide-track-count {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 14px;
  color: #12345d;
  background: linear-gradient(180deg, #ffffff, #eef4ff);
  border: 1px solid rgba(31, 99, 214, 0.14);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.guide-track-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.guide-video-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 14px !important;
  padding: 14px !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.guide-video-card:hover {
  transform: translateY(-2px);
  border-color: rgba(31, 99, 214, 0.24);
  box-shadow: 0 24px 34px rgba(31, 99, 214, 0.10);
}

.guide-video-frame {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: linear-gradient(135deg, #e9f2ff, #fff3e6);
}

.guide-video-frame iframe,
.guide-video-placeholder {
  width: 100%;
  height: 100%;
  border: 0;
}

.guide-video-placeholder {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
}

.guide-video-placeholder strong,
.guide-video-meta span {
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide-video-placeholder span {
  color: #536379;
  line-height: 1.6;
}

.guide-video-copy {
  display: grid;
  gap: 10px;
  padding: 4px 4px 8px;
}

.guide-video-meta {
  display: grid;
  gap: 6px;
}

.guide-video-copy p,
.guide-empty-state p {
  margin: 0;
}

.guide-empty-state {
  padding: 22px;
}

@media (max-width: 980px) {
  .guide-banner-grid,
  .guide-overview-grid,
  .guide-start-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .guide-banner,
  .guide-start-panel,
  .guide-support-panel,
  .guide-library-intro,
  .guide-track,
  .guide-rich-content {
    padding: 20px !important;
  }

  .guide-banner-copy h1 {
    max-width: none;
    font-size: clamp(34px, 11vw, 54px);
  }

  .guide-banner-actions .button {
    width: 100%;
    justify-content: center;
  }

  .guide-kpi-grid,
  .guide-track-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-track-head {
    display: grid;
  }

  .guide-track-count {
    justify-self: start;
  }

  .guide-rich-content iframe {
    min-height: 220px;
  }
}

@media (max-width: 520px) {
  .guide-kpi-grid,
  .guide-track-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.automation-card-option,
.automation-credit-option {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.automation-card-option {
  overflow: hidden !important;
}

.automation-credit-option {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  overflow: hidden !important;
}

.automation-credit-option input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  align-self: center !important;
  justify-self: start !important;
  position: relative !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1.5px solid rgba(71, 85, 105, 0.48) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  cursor: pointer !important;
}

.automation-credit-option input[type="checkbox"]::after {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  top: 3px !important;
  width: 6px !important;
  height: 12px !important;
  border-right: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  transform: rotate(40deg) scale(0) !important;
  transform-origin: center !important;
  transition: transform 160ms ease !important;
}

.automation-credit-option input[type="checkbox"]:checked {
  border-color: rgba(31, 99, 214, 0.88) !important;
  background: linear-gradient(135deg, var(--blue), var(--teal-deep)) !important;
  box-shadow: 0 8px 18px rgba(31, 99, 214, 0.18) !important;
}

.automation-credit-option input[type="checkbox"]:checked::after {
  transform: rotate(40deg) scale(1) !important;
}

.automation-credit-option input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(31, 99, 214, 0.28) !important;
  outline-offset: 2px !important;
}

.automation-credit-option span {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.automation-ai-row .ai-limit-note {
  margin-left: auto !important;
  margin-top: 0 !important;
  text-align: right !important;
}

.topic-order-controls button {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.topic-order-controls button::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 7px !important;
  height: 7px !important;
  border: solid currentColor !important;
  border-width: 0 2px 2px 0 !important;
  transform-origin: center !important;
}

.topic-order-controls [data-topic-move="up"]::before,
.topic-order-controls [data-choice-move="up"]::before {
  transform: translate(-50%, -42%) rotate(-135deg) !important;
}

.topic-order-controls [data-topic-move="down"]::before,
.topic-order-controls [data-choice-move="down"]::before {
  transform: translate(-50%, -58%) rotate(45deg) !important;
}

@media (max-width: 720px) {
  .automation-ai-row .ai-limit-note {
    width: 100% !important;
    margin-left: 0 !important;
    text-align: left !important;
  }
}

/* --- Seçili/basılı gün butonlarında okunabilirlik düzeltmesi (2 haftalık takvim dahil) --- */
.automation-day-grid label:active,
.automation-day-grid label:active span,
.automation-day-grid label:has(input:checked),
.automation-day-grid label:has(input:checked) span {
  color: #fff;
}

.automation-day-grid label:active .day-date,
.automation-day-grid label:has(input:checked) .day-date {
  color: rgba(255, 255, 255, 0.92);
}

.schedule-week-toggle:active .week-toggle-text strong,
.schedule-week-toggle:focus-visible .week-toggle-text strong,
.schedule-week-toggle.is-active:active .week-toggle-text strong {
  color: #0d2f6b;
}

.schedule-week-toggle:active .week-toggle-text small,
.schedule-week-toggle:focus-visible .week-toggle-text small,
.schedule-week-toggle.is-active:active .week-toggle-text small {
  color: #33415e;
}

/* --- Kapak görselini anında üretme (panel + otomasyon) --- */
.auto-image-generate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  /* hidden kalkınca yumuşak giriş: havuz kapanma animasyonuyla uyumlu akar. */
  animation: auto-image-row-in 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes auto-image-row-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auto-image-generate-row {
    animation: none;
  }
}

.auto-image-generate-row small {
  color: var(--muted);
  font-size: 12.5px;
}

.auto-image-generate-row[hidden],
.generated-image-note[hidden] {
  display: none;
}

.generated-image-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(20, 148, 92, 0.1);
  color: #0a5636;
  font-size: 12.5px;
  font-weight: 700;
}

.automation-ai-image-button {
  font-size: 13px;
  line-height: 1;
}

/* --- Anahtar kelime önerilerinde "tümünü ekle" --- */
.keyword-suggestions [data-add-all-suggestions] {
  border-style: dashed;
  font-weight: 850;
}

/* ============================================================
   Yayın günü takvimi — cam (glassmorphism) tasarım
   "Hangi günlerde yayınlansın?" bölümünün tamamı: aurora zemin,
   buzlu cam gün çipleri, akıcı seçim animasyonları.
   ============================================================ */

.automation-week-calendar {
  position: relative;
  isolation: isolate;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.55), rgba(244, 247, 255, 0.35));
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    0 18px 44px rgba(56, 66, 133, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  overflow: hidden;
}

/* Aurora: camın arkasında süzülen renk bulutları */
.automation-week-calendar::before,
.automation-week-calendar::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(58px);
  opacity: 0.5;
  pointer-events: none;
}

.automation-week-calendar::before {
  top: -160px;
  left: -80px;
  background: radial-gradient(circle at 40% 40%, #7c5cff 0%, #4f7cff 45%, transparent 72%);
  animation: aurora-drift-a 16s ease-in-out infinite alternate;
}

.automation-week-calendar::after {
  bottom: -180px;
  right: -100px;
  background: radial-gradient(circle at 55% 55%, #ff8fc0 0%, #ffb765 50%, transparent 74%);
  animation: aurora-drift-b 19s ease-in-out infinite alternate;
}

@keyframes aurora-drift-a {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(70px, 40px) scale(1.15); }
}

@keyframes aurora-drift-b {
  0% { transform: translate(0, 0) scale(1.1); }
  100% { transform: translate(-80px, -30px) scale(0.95); }
}

/* --- Gün çipleri: buzlu cam --- */
.automation-day-grid label {
  position: relative;
  min-width: 92px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow:
    0 6px 18px rgba(56, 66, 133, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--soft-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
  /* Seçim rengi: hafta içi mor-mavi cam */
  --chip-grad: linear-gradient(135deg, #4f7cff 0%, #6d5cff 55%, #8d6bff 100%);
  --chip-glow: rgba(101, 92, 255, 0.38);
  --chip-check: #6d5cff;
}

/* Seçim dolgusu ayrı bir cam katmanda erir — basılı tutarken
   mavi yanıp sonra renk değiştirme sorunu tamamen kalkar. */
.automation-day-grid label::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--chip-grad);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

/* Onay rozeti */
.automation-day-grid label::after {
  content: "✓";
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--chip-check);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(56, 66, 133, 0.28);
  opacity: 0;
  transform: scale(0) rotate(-90deg);
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.automation-day-grid label span {
  position: relative;
  z-index: 1;
  transition: color 0.22s ease;
}

.automation-day-grid label:hover {
  transform: translateY(-3px);
  border-color: rgba(141, 107, 255, 0.55);
  box-shadow:
    0 14px 30px rgba(101, 92, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.automation-day-grid label:active {
  transform: translateY(0) scale(0.95);
  box-shadow: 0 4px 12px rgba(56, 66, 133, 0.14);
}

.automation-day-grid label:has(input:focus-visible) {
  outline: 3px solid rgba(109, 92, 255, 0.45);
  outline-offset: 2px;
}

.automation-day-grid label:has(input:checked) {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    0 12px 30px var(--chip-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: day-chip-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.automation-day-grid label:has(input:checked)::before {
  opacity: 1;
  transform: scale(1);
}

.automation-day-grid label:has(input:checked)::after {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.automation-day-grid label:has(input:checked) span,
.automation-day-grid label:has(input:checked) .day-date {
  color: #fff;
}

.automation-day-grid label:has(input:checked) .day-date {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
}

@keyframes day-chip-pop {
  0% { transform: scale(0.92); }
  55% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Tarih etiketi: küçük cam hap */
.automation-week-calendar .day-date {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(120, 130, 190, 0.22);
  background: rgba(255, 255, 255, 0.55);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

/* --- Hafta sonu (Cmt/Paz): gül-menekşe cam tonu --- */
.automation-day-grid label:has(input[value="5"]),
.automation-day-grid label:has(input[value="6"]),
.automation-day-grid label:has(input[value="12"]),
.automation-day-grid label:has(input[value="13"]) {
  background: linear-gradient(160deg, rgba(255, 240, 250, 0.72), rgba(255, 231, 244, 0.5));
  border-color: rgba(255, 175, 215, 0.65);
  color: #a1447f;
  --chip-grad: linear-gradient(135deg, #8d5cff 0%, #c44fd6 55%, #f4679f 100%);
  --chip-glow: rgba(196, 79, 214, 0.38);
  --chip-check: #c44fd6;
}

.automation-day-grid label:has(input[value="5"]):hover,
.automation-day-grid label:has(input[value="6"]):hover,
.automation-day-grid label:has(input[value="12"]):hover,
.automation-day-grid label:has(input[value="13"]):hover {
  border-color: rgba(244, 103, 159, 0.6);
  box-shadow:
    0 14px 30px rgba(196, 79, 214, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* --- Hafta başlıkları: cam rozetler --- */
.schedule-week-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px rgba(56, 66, 133, 0.1);
}

.schedule-week-label::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f7cff, #8d6bff);
  box-shadow: 0 0 8px rgba(109, 92, 255, 0.6);
}

[data-week2-block] .schedule-week-label::before {
  background: linear-gradient(135deg, #c44fd6, #f4679f);
  box-shadow: 0 0 8px rgba(196, 79, 214, 0.6);
}

/* 2. hafta bloğu yumuşak bir süzülmeyle açılır */
.automation-week-calendar.is-two-week [data-week2-block]:not([hidden]) {
  animation: week-block-reveal 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes week-block-reveal {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* --- 2 haftalık takvim geçiş kartı: cam yüzey --- */
.schedule-week-toggle {
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(79, 124, 255, 0.14), rgba(255, 255, 255, 0.5) 45%, rgba(244, 103, 159, 0.14));
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    0 10px 26px rgba(56, 66, 133, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  -webkit-tap-highlight-color: transparent;
}

.schedule-week-toggle:hover {
  transform: translateY(-2px);
  border-color: rgba(141, 107, 255, 0.5);
  box-shadow:
    0 16px 36px rgba(101, 92, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.schedule-week-toggle:active {
  transform: translateY(0) scale(0.99);
}

.schedule-week-toggle.is-active {
  border-color: rgba(141, 107, 255, 0.55);
  background: linear-gradient(120deg, rgba(109, 92, 255, 0.2), rgba(255, 255, 255, 0.45) 48%, rgba(196, 79, 214, 0.18));
}

.schedule-week-toggle .week-toggle-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 14px rgba(56, 66, 133, 0.12);
}

/* --- Gün ön ayar butonları (Hafta İçi / Her Gün / Temizle): cam haplar --- */
.schedule-presets button {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 5px 14px rgba(56, 66, 133, 0.1);
  font-weight: 800;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.schedule-presets button:hover {
  transform: translateY(-2px);
  color: var(--soft-ink);
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(141, 107, 255, 0.5);
  box-shadow: 0 10px 22px rgba(101, 92, 255, 0.18);
}

.schedule-presets button:active {
  transform: translateY(0) scale(0.96);
  color: var(--soft-ink);
  background: rgba(255, 255, 255, 0.72);
}

/* --- Duyarlılık: tablet ve telefon --- */
.automation-day-grid label {
  flex: 1 1 calc(14.28% - 12px);
}

.automation-week-calendar.is-two-week .automation-day-grid label {
  border-radius: 16px;
}

@media (max-width: 900px) {
  .automation-week-calendar.is-two-week .automation-day-grid {
    gap: 6px;
  }

  .automation-week-calendar.is-two-week .automation-day-grid label {
    padding: 8px 4px;
    min-width: 0;
  }

  .automation-week-calendar .day-date {
    font-size: 10.5px;
    padding: 2px 6px;
  }
}

@media (max-width: 640px) {
  .automation-week-calendar {
    padding: 12px;
    border-radius: 18px;
  }

  .automation-day-grid label {
    flex: 1 1 calc(25% - 10px);
    min-width: 76px;
    min-height: 54px;
  }

  .automation-week-calendar.is-two-week .automation-day-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .automation-day-grid label::after {
    top: -5px;
    right: -5px;
    width: 19px;
    height: 19px;
    font-size: 10.5px;
  }
}

@media (max-width: 400px) {
  .automation-week-calendar.is-two-week .automation-day-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Dokunmatik cihazlarda hover kaymalarını kapat */
@media (hover: none) {
  .automation-day-grid label:hover,
  .schedule-week-toggle:hover,
  .schedule-presets button:hover {
    transform: none;
  }
}

/* Hareket azaltma tercihi olan kullanıcılar için animasyonlar kapanır */
@media (prefers-reduced-motion: reduce) {
  .automation-week-calendar::before,
  .automation-week-calendar::after {
    animation: none;
  }

  .automation-day-grid label,
  .automation-day-grid label::before,
  .automation-day-grid label::after,
  .schedule-week-toggle,
  .schedule-presets button {
    transition: none;
    animation: none;
  }

  .automation-week-calendar.is-two-week [data-week2-block]:not([hidden]) {
    animation: none;
  }

  .automation-day-grid label:has(input:checked) {
    animation: none;
  }
}

/* Eski geçiş kartı hover/aktif degradelerini cam görünümle hizala */
.schedule-week-toggle:hover,
.schedule-week-toggle:active,
.schedule-week-toggle:focus-visible {
  background: linear-gradient(120deg, rgba(79, 124, 255, 0.18), rgba(255, 255, 255, 0.55) 45%, rgba(244, 103, 159, 0.18));
  border-color: rgba(141, 107, 255, 0.55);
  box-shadow:
    0 16px 36px rgba(101, 92, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.schedule-week-toggle.is-active:hover,
.schedule-week-toggle.is-active:active {
  background: linear-gradient(120deg, rgba(109, 92, 255, 0.24), rgba(255, 255, 255, 0.5) 48%, rgba(196, 79, 214, 0.22));
  border-color: rgba(141, 107, 255, 0.6);
}

.schedule-week-toggle:hover .week-toggle-text strong,
.schedule-week-toggle:active .week-toggle-text strong,
.schedule-week-toggle.is-active:hover .week-toggle-text strong {
  color: #4633a8;
}

.schedule-week-toggle:hover .week-toggle-text small,
.schedule-week-toggle:active .week-toggle-text small,
.schedule-week-toggle.is-active:active .week-toggle-text small {
  color: #5a5f7d;
}

/* =====================================================================
   Yayın saati seçimi — gün seçimiyle aynı cam (glassmorphism) tasarım.
   Saat butonları artık gün çipleriyle bire bir aynı görünür: aynı cam
   dolgu, aynı seçim degradesi, aynı ✓ rozeti ve pop animasyonu.
   ===================================================================== */
.automation-hour-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  padding: 4px;
}

.automation-hour-grid button {
  position: relative;
  min-height: 52px;
  padding: 10px 8px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow:
    0 6px 18px rgba(56, 66, 133, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--soft-ink);
  font-weight: 850;
  font-size: 13px;
  cursor: pointer;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
  /* Seçim rengi: gün çipleriyle aynı mor-mavi cam */
  --chip-grad: linear-gradient(135deg, #4f7cff 0%, #6d5cff 55%, #8d6bff 100%);
  --chip-glow: rgba(101, 92, 255, 0.38);
  --chip-check: #6d5cff;
}

/* Onay rozeti */
.automation-hour-grid button::after {
  content: "✓";
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--chip-check);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(56, 66, 133, 0.28);
  opacity: 0;
  transform: scale(0) rotate(-90deg);
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.automation-hour-grid button > * {
  position: relative;
  z-index: 1;
}

/* Not: global `button:hover` tüm butonlara koyu degrade uygular; saat butonları
   <button> olduğu için etkilenir (gün çipleri <label> olduğu için etkilenmez).
   Bu yüzden hover/active/selected durumlarında arka planı açıkça belirtiyoruz —
   aksi halde koyu zemin + koyu yazı = okunmaz metin oluşur. */
.automation-hour-grid button:hover {
  transform: translateY(-3px);
  color: var(--soft-ink);
  border-color: rgba(141, 107, 255, 0.55);
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 14px 30px rgba(101, 92, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.automation-hour-grid button:active {
  transform: translateY(0) scale(0.95);
  color: var(--soft-ink);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 4px 12px rgba(56, 66, 133, 0.14);
}

.automation-hour-grid button:focus-visible {
  outline: 3px solid rgba(109, 92, 255, 0.45);
  outline-offset: 2px;
}

.automation-hour-grid button.is-selected,
.automation-hour-grid button.is-selected:hover,
.automation-hour-grid button.is-selected:active {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  background: var(--chip-grad);
  box-shadow:
    0 12px 30px var(--chip-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.automation-hour-grid button.is-selected {
  animation: day-chip-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.automation-hour-grid button.is-selected:hover {
  transform: translateY(-3px);
  box-shadow:
    0 16px 34px var(--chip-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.automation-hour-grid button.is-selected::after {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

@media (max-width: 640px) {
  .automation-hour-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }
  .automation-hour-grid button {
    min-height: 46px;
    border-radius: 14px;
    font-size: 12px;
  }
}

@media (max-width: 400px) {
  .automation-hour-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (hover: none) {
  .automation-hour-grid button:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .automation-hour-grid button,
  .automation-hour-grid button::before,
  .automation-hour-grid button::after {
    transition: none;
    animation: none;
  }
}

/* =====================================================================
   Görsel kaynağı seçici — açılır menü yerine cam butonlar.
   Kullanıcı "kendi görselini yükle" veya "Pexels'ten otomatik seç"
   seçeneklerini tek dokunuşla belirler.
   ===================================================================== */
.image-source-field {
  display: block;
  margin: 6px 0 4px;
}

.image-source-label {
  display: block;
  margin-bottom: 10px;
  font-weight: 800;
  color: var(--soft-ink);
}

.image-source-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.image-source-option {
  position: relative;
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow:
    0 6px 18px rgba(56, 66, 133, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--soft-ink);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease;
  --chip-grad: linear-gradient(135deg, #4f7cff 0%, #6d5cff 55%, #8d6bff 100%);
  --chip-glow: rgba(101, 92, 255, 0.38);
  --chip-check: #6d5cff;
}

.image-source-option::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--chip-grad);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.image-source-option::after {
  content: "✓";
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--chip-check);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(56, 66, 133, 0.28);
  opacity: 0;
  transform: scale(0) rotate(-90deg);
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.image-source-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 14px rgba(56, 66, 133, 0.12);
  font-size: 20px;
}

.image-source-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.image-source-text strong {
  font-weight: 850;
  transition: color 0.22s ease;
}

.image-source-text small {
  font-size: 12px;
  color: var(--muted);
  transition: color 0.22s ease;
}

/* Global `button:hover` koyu degradeyi ezip cam zemini ve okunur metni koru. */
.image-source-option:hover {
  transform: translateY(-3px);
  color: var(--soft-ink);
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(141, 107, 255, 0.55);
  box-shadow:
    0 14px 30px rgba(101, 92, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.image-source-option:hover .image-source-text strong {
  color: var(--soft-ink);
}

.image-source-option:active {
  transform: translateY(0) scale(0.98);
  background: rgba(255, 255, 255, 0.72);
}

/* Seçili buton hover/active: mor-mavi cam degrade + beyaz metin korunur. */
.image-source-option.is-selected:hover,
.image-source-option.is-selected:active {
  color: #fff;
  background: var(--chip-grad);
}

.image-source-option.is-selected:hover {
  transform: translateY(-3px);
  box-shadow:
    0 16px 34px var(--chip-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.image-source-option.is-selected:hover .image-source-text strong {
  color: #fff;
}

.image-source-option:focus-visible {
  outline: 3px solid rgba(109, 92, 255, 0.45);
  outline-offset: 2px;
}

.image-source-option.is-selected {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    0 12px 30px var(--chip-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: day-chip-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.image-source-option.is-selected::before {
  opacity: 1;
  transform: scale(1);
}

.image-source-option.is-selected::after {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.image-source-option.is-selected .image-source-text strong {
  color: #fff;
}

.image-source-option.is-selected .image-source-text small {
  color: rgba(255, 255, 255, 0.85);
}

.image-source-option.is-selected .image-source-icon {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
}

/* Konu satırındaki Pexels görsel seçme butonu (✦ AI yerine) */
.automation-pexels-image-button {
  font-size: 15px;
  line-height: 1;
}

@media (hover: none) {
  .image-source-option:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-source-option,
  .image-source-option::before,
  .image-source-option::after {
    transition: none;
    animation: none;
  }
}

/* =====================================================================
   Görsel havuzu: yalnızca "kendi görselimi yüklerim" seçiliyken açılır.
   Seçim değişince yumuşak açılıp kapanır (automation + dashboard aynı).
   ===================================================================== */
.automation-upload-pool,
.dashboard-upload-pool {
  /* max-height yerine grid-template-rows animasyonu: yükseklik gerçek içerik
     boyutuna göre animasyonlanır; ölü bekleme/ani sıçrama olmaz. */
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 4px;
  transform: translateY(0);
  visibility: visible;
  transition:
    grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.28s ease,
    margin 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.4s;
}

.upload-pool-inner {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.automation-upload-pool.is-collapsed,
.dashboard-upload-pool.is-collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transform: translateY(-8px);
  visibility: hidden;
  pointer-events: none;
}

/* Sayfa açılışında kayıtlı tercih uygulanırken animasyon oynatılmaz. */
.automation-upload-pool.no-anim,
.dashboard-upload-pool.no-anim {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .automation-upload-pool,
  .dashboard-upload-pool {
    transition: opacity 0.2s ease, visibility 0.2s;
  }
}

/* Dashboard: kapak önizleme çerçevesi artık her zaman görünür (yükleme
   havuzundan bağımsız) — Pexels ile seçilen görsel de burada gösterilir. */
.featured-image-frame {
  display: block;
  margin: 4px 0 2px;
  /* Pexels görseli seçilip çerçeve görününce yumuşak giriş. */
  animation: auto-image-row-in 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.featured-image-frame[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .featured-image-frame {
    animation: none;
  }
}

.image-dropzone.is-compact {
  min-height: auto;
}

/* =====================================================================
   Birden fazla otomasyon planı: yan yana (yatay) değil, ALT ALTA (dikey)
   sıralanır. Yeni kurulan planlar mevcut planların altına eklenir ve her
   kart tam genişlikte kalır; sayfa tasarımı bozulmaz.
   ===================================================================== */
.automation-plan-grid,
.automation-plan-grid:has(.automation-plan-card:nth-child(2)) {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.automation-plan-grid:has(.automation-plan-card:nth-child(2)) .automation-plan-card {
  width: 100%;
}

/* Kart başlığı çok satırda tam okunur kalsın (kırpma yok). */
.automation-plan-card .section-head.compact h2 {
  overflow-wrap: anywhere;
}

/* =====================================================================
   SON GEÇERLİ OVERRIDE'LAR (automation + admin ortak)
   ===================================================================== */

/* --- Pexels ile görsel seçme butonu (🖼️) ---------------------------------
   Bu buton `.automation-add-image-button` sınıfını da taşıdığı için daha önce
   yanlışlıkla "+" yükleme butonu gibi çiziliyor (emoji gizleniyor, üstüne artı
   işareti biniyordu). Burada onu görsel olarak ayrıştırıyoruz: emoji görünür,
   "+" çizimi kapalı, farklı (yeşil) renk. */
.automation-pexels-image-button,
.automation-pexels-image-button:hover,
.automation-pexels-image-button:active,
.automation-pexels-image-button:focus-visible {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #12b981, #0e9f6e);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(16, 159, 110, 0.26);
  font-size: 14px;
  line-height: 1;
  text-align: center;
}

/* Emoji glyph'ini daireye tam ortala (emojiler kendi içinde hafif kayık durur). */
.automation-pexels-image-button {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  text-indent: 0;
}

/* Miras alınan "+" çizen sözde-elemanları yalnızca bu butonda kapat. */
.automation-pexels-image-button::before,
.automation-pexels-image-button::after {
  content: none !important;
  display: none !important;
}

.automation-pexels-image-button:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 14px 28px rgba(16, 159, 110, 0.34);
  filter: saturate(1.1);
}

.automation-pexels-image-button:active {
  transform: translateY(1px) scale(0.94);
}

/* --- Görsel havuzu şeridindeki küçük thumbnail silme "×" butonu -----------
   Şerit yatay kaydırma için overflow'u kırptığından, dışarı (negatif) konumlanan
   büyük silme butonu görünmüyordu. Butonu küçültüp thumbnail'in İÇİNE (sağ üst)
   alarak her zaman görünür ve tıklanabilir yapıyoruz. Kullanıcı böylece
   istediği görseli küçük "×" ile havuzdan silebilir. */
.automation-image-item form[data-image-delete-form] {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  z-index: 20 !important;
}

/* Büyük butona uygun "×" çizgi boyutu (hem strip hem havuz butonu). */
.automation-image-item .image-strip-delete-button::before,
.automation-image-item .image-strip-delete-button::after,
.automation-image-item form[data-image-delete-form] > .image-delete-button::before,
.automation-image-item form[data-image-delete-form] > .image-delete-button::after {
  width: 12px !important;
  height: 2.5px !important;
}

/* =====================================================================
   KONU SATIRI DÜZENİ — temiz ızgara (çakışma giderme)
   Sorunlar: 1) "+" ve 🖼️ butonları görselin üstüne biniyor ve eşit değildi.
             2) ↑/↓ sıra butonları satır kenarına/borderına değiyordu.
   Çözüm: görsel hücresini yeniden düzenle (görsel üstte, iki EŞİT buton altta
   yan yana), sıra butonlarını dikey ortalanmış sıkı bir çift yap.
   ===================================================================== */
.automation-topic-row,
.automation-topic-row.used {
  grid-template-columns: 40px 96px minmax(0, 1fr) 42px !important;
  gap: 12px !important;
  align-items: center !important;
  height: auto !important;
  min-height: 84px !important;
  padding: 12px !important;
  overflow: visible !important;
}

/* --- Sıra (yukarı/aşağı) butonları: dikey ortalanmış sıkı çift, BÜYÜK --- */
.automation-topic-row .topic-order-controls {
  grid-column: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 40px !important;
  min-width: 40px !important;
  height: auto !important;
  max-height: 100% !important;
  min-height: 0 !important;
  align-self: center !important;
  padding: 0 !important;
}

.automation-topic-row .topic-order-controls button {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  flex: 0 0 30px !important;
}

/* --- Görsel hücresi: DENGELİ birim — görsel solda, +/🖼️ butonları sağda
   dikey istiflenmiş. Böylece görsel, butonlar ve başlık aynı hizada ortalanır. */
.automation-topic-row .topic-image-cell {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-template-rows: 1fr 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  justify-content: start !important;
  gap: 5px !important;
  width: 96px !important;
  max-width: 96px !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Görsel: solda, iki satırı da kaplar; tıklanınca büyür (zoom imleci). */
.automation-topic-row .topic-image-cell .topic-assigned-image {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  justify-self: center !important;
  align-self: center !important;
  position: relative !important;
  width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  margin: 0 !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  background: #eef2f8 !important;
  cursor: zoom-in !important;
  transition: transform 160ms ease, box-shadow 160ms ease !important;
}

.automation-topic-row .topic-image-cell .topic-assigned-image:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 10px 20px rgba(23, 34, 58, 0.18) !important;
}

.automation-topic-row .topic-image-cell .topic-assigned-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  cursor: zoom-in !important;
}

.automation-topic-row .topic-image-cell .topic-assigned-image small {
  font-size: 9px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  color: var(--muted) !important;
  cursor: default !important;
}

/* "+" yükleme formu: sağ üstte (grid'de 2. sütun 1. satır). */
.automation-topic-row .topic-image-cell .topic-image-add-form {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  display: inline-flex !important;
  z-index: auto !important;
}

/* 🖼️ Pexels butonu: sağ altta (grid'de 2. sütun 2. satır). */
.automation-topic-row .topic-image-cell .automation-pexels-image-button {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

/* İki aksiyon butonu EŞİT boyutta. */
.automation-topic-row .topic-image-cell .automation-add-image-button,
.automation-topic-row .topic-image-cell .automation-pexels-image-button {
  position: relative !important;
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  min-height: 27px !important;
}

/* Hover'da nazik büyüme — iki küçük buton BİRBİRİNE GİRMESİN (translateY yok). */
.automation-topic-row .topic-image-cell .automation-add-image-button:hover,
.automation-topic-row .topic-image-cell .automation-pexels-image-button:hover {
  transform: scale(1.06) !important;
}

.automation-topic-row .topic-image-cell .automation-add-image-button:active,
.automation-topic-row .topic-image-cell .automation-pexels-image-button:active {
  transform: scale(0.94) !important;
}

/* =====================================================================
   SÜRÜKLE-BIRAK ANIMASYONU (görsel havuzu thumbnail'leri)
   Önceden sadece opacity 0.68 vardı; hareket/geçiş yoktu. Şimdi sürüklenen
   thumbnail hafifçe kalkıp eğiliyor, bırakılınca yumuşak bir "yerine oturma"
   animasyonu oynuyor, hedef şerit belirginleşiyor.
   ===================================================================== */
.automation-image-item {
  transition: transform 170ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 170ms ease, box-shadow 170ms ease !important;
}

.automation-image-item.is-dragging {
  opacity: 0.9 !important;
  transform: scale(0.94) rotate(-2deg) !important;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.3) !important;
  cursor: grabbing !important;
  z-index: 30 !important;
}

/* Sürükleme sırasında hedef şerit vurgulansın. */
.automation-image-strip.is-drop-target {
  outline: 2px dashed rgba(16, 159, 110, 0.55);
  outline-offset: 4px;
  border-radius: 10px;
  background: rgba(16, 159, 110, 0.05);
}

/* Bırakıldığında yerine otururken kısa vurgu. */
@keyframes automation-image-settle {
  0%   { transform: scale(0.86); box-shadow: 0 0 0 3px rgba(16, 159, 110, 0.5); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16); }
}

.automation-image-item.just-dropped {
  animation: automation-image-settle 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .automation-image-item,
  .automation-image-item.is-dragging,
  .automation-image-item.just-dropped {
    transition: opacity 120ms ease !important;
    animation: none !important;
    transform: none !important;
  }
}

/* =====================================================================
   KONU SATIRINDAKI KÜÇÜK GÖRSEL "×" (görseli konudan kaldır)
   Görsel varken görselin sol-üst köşesinde küçük kırmızı "×" belirir.
   ===================================================================== */
.automation-topic-row .topic-image-cell .topic-thumb-delete {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: end !important;   /* görselin SAĞ üst köşesi */
  align-self: start !important;
  position: relative !important;
  display: none;
  place-items: center !important;
  z-index: 4 !important;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  min-height: 19px !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: translate(-2px, 2px) !important;
  color: #fff !important;
  background: rgba(220, 38, 38, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(180, 35, 24, 0.32) !important;
  font-size: 0 !important;   /* metin "×" gizlenir, aşağıda çizgiyle çizilir */
  line-height: 0 !important;
  cursor: pointer !important;
  transition: background 140ms ease, transform 140ms ease !important;
}

/* "×" işaretini iki çizgiyle daire İÇİNE tam ortalanmış çiz. */
.automation-topic-row .topic-image-cell .topic-thumb-delete::before,
.automation-topic-row .topic-image-cell .topic-thumb-delete::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 9px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 999px !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.automation-topic-row .topic-image-cell .topic-thumb-delete::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* Yalnızca satırın üzerine GELİNCE (hover) ve görsel varsa görünür. */
.automation-topic-row:hover .topic-image-cell:has([data-topic-image-slot] img) .topic-thumb-delete,
.automation-topic-row .topic-image-cell:has([data-topic-image-slot] img) .topic-thumb-delete:focus-visible {
  display: inline-grid !important;
}

.automation-topic-row .topic-image-cell .topic-thumb-delete:hover {
  background: #dc2626 !important;
  transform: translate(-2px, 2px) scale(1.12) !important;
}

/* =====================================================================
   "YAYINA ALINDI" (used) SATIRI: başlık, düzenlenebilir satırlarla EŞİT
   görünsün — aynı kutu, aynı hizada; rozet kutunun içinde sağda.
   ===================================================================== */
.automation-topic-row.used .automation-topic-static {
  grid-column: 3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid #d6e2f4 !important;
  border-radius: 8px !important;
  background: #f6f9fd !important;
}

.automation-topic-row.used .automation-topic-static strong {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  color: var(--ink) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.automation-topic-row.used .automation-topic-static .topic-used-badge {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 3px 9px !important;
  color: var(--good) !important;
  background: #ecfdf5 !important;
  border: 1px solid rgba(21, 115, 71, 0.2) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

/* =====================================================================
   PLAN KARTI = AÇILIR/KAPANIR AKORDİYON
   Özet (summary): tarih + başlık + anahtar kelimeler + durum + chevron.
   Kapatınca sadece bu özet görünür; kullanıcı içeriği gizleyebilir.
   ===================================================================== */
details.automation-plan-card {
  overflow: hidden !important;
  border-radius: 22px !important;
}

details.automation-plan-card > summary.automation-plan-summary {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  cursor: pointer !important;
  list-style: none !important;
  padding: 4px 4px 16px !important;
  margin-bottom: 6px !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 12px !important;
  transition: background 160ms ease !important;
}

details.automation-plan-card > summary.automation-plan-summary::-webkit-details-marker {
  display: none !important;
}

details.automation-plan-card > summary.automation-plan-summary:hover {
  background: rgba(31, 99, 214, 0.04) !important;
}

/* Kapalıyken alt çizgi/boşluk olmasın; kart kompakt bir başlık şeridine dönüşsün. */
details.automation-plan-card:not([open]) > summary.automation-plan-summary {
  border-bottom-color: transparent !important;
  padding-bottom: 4px !important;
  margin-bottom: 0 !important;
}

.plan-summary-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
}

.plan-summary-main h2 {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

.plan-summary-keywords {
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  overflow-wrap: anywhere !important;
}

/* Açık/kapalı olduğunu gösteren chevron (aşağı ok). */
.accordion-chevron {
  flex: 0 0 auto !important;
  width: 12px !important;
  height: 12px !important;
  border-right: 2.5px solid var(--muted) !important;
  border-bottom: 2.5px solid var(--muted) !important;
  border-radius: 2px !important;
  transform: rotate(45deg) !important;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

details.automation-plan-card[open] > summary.automation-plan-summary .accordion-chevron {
  transform: rotate(-135deg) !important;
}

.automation-plan-body {
  display: grid !important;
  gap: 14px !important;
  animation: plan-body-in 260ms ease !important;
}

@keyframes plan-body-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .accordion-chevron,
  .automation-plan-body {
    transition: none !important;
    animation: none !important;
  }
}

/* Sıra (↑/↓) butonları: büyütülen 30px butona uygun, net chevron ve renk. */
.automation-topic-row .topic-order-controls button {
  color: var(--blue) !important;
  background: #eef4ff !important;
  border: 1px solid rgba(31, 99, 214, 0.18) !important;
  border-radius: 999px !important;
}

.automation-topic-row .topic-order-controls button:hover {
  color: #fff !important;
  background: var(--blue) !important;
}

.automation-topic-row .topic-order-controls button::before {
  width: 10px !important;
  height: 10px !important;
  border-width: 0 2.5px 2.5px 0 !important;
}

/* Admin: konu satırındaki sürükleme tutamacı (⋮⋮) 1. sütunda ortalanır. */
.automation-topic-row .topic-drag-handle {
  grid-column: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  font-size: 18px !important;
}