/* Consolidated experience layer: former UI parity rounds 20, 21, 22, 23, 25 and 26. */

/* ---- Experience layer 20 ---- */
/* Round 20: richer desktop navigation, accessible tooltips, unified mobile drawers,
   marketing motion polish, and Stripe admin shortcuts. */

/* Desktop mega menus */
.nav-dropdown.mega-menu {
  width: min(780px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
}
.mega-menu-layout {
  display: grid;
  grid-template-columns: minmax(230px, .78fr) minmax(0, 1.6fr);
  gap: 0;
}
.mega-menu-feature {
  position: relative;
  display: grid !important;
  min-height: 100% !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-content: start;
  align-items: start !important;
  gap: 14px !important;
  padding: 24px !important;
  border: 0 !important;
  border-right: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 88% 8%, rgb(204 120 92 / .18), transparent 38%),
    linear-gradient(145deg, rgb(204 120 92 / .08), rgb(47 133 90 / .05));
}
.mega-menu-feature:hover,
.mega-menu-feature:focus-visible { background-color: rgb(204 120 92 / .04) !important; }
.mega-menu-feature-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgb(204 120 92 / .2);
  border-radius: 13px;
  background: var(--background);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.mega-menu-feature-icon .ui-icon { width: 20px; height: 20px; }
.mega-menu-feature-copy { display: grid; min-width: 0; gap: 6px; }
.mega-menu-feature-copy small {
  margin: 0 !important;
  color: var(--primary) !important;
  font-size: .66rem !important;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.mega-menu-feature-copy strong { font-family: var(--font-serif); font-size: 1.55rem; line-height: 1.05; }
.mega-menu-feature-copy > span { color: var(--muted-foreground); font-size: .78rem; line-height: 1.55; }
.mega-menu-feature-arrow {
  width: 17px;
  height: 17px;
  margin-top: 4px;
  color: var(--primary);
  transition: transform .18s ease;
}
.mega-menu-feature:hover .mega-menu-feature-arrow,
.mega-menu-feature:focus-visible .mega-menu-feature-arrow { transform: translateX(4px); }
.mega-menu-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 12px; }
.mega-menu-group { min-width: 0; }
.mega-menu-group h3 {
  margin: 0;
  padding: 8px 12px 4px;
  color: var(--muted-foreground);
  font-family: var(--font-sans);
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.mega-menu-group > a { min-height: 68px; padding: 10px 11px; }
.mega-menu-group > a .nav-icon { width: 32px; height: 32px; }
.mega-menu-group > a .nav-icon .ui-icon { width: 16px; height: 16px; }
.mega-menu-footer {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: rgb(245 240 232 / .42);
  color: var(--muted-foreground);
  font-size: .72rem;
}
.mega-menu-footer a {
  display: inline-flex !important;
  min-height: 0 !important;
  align-items: center;
  gap: 6px !important;
  padding: 5px 7px !important;
  border: 0 !important;
  color: var(--primary);
  font-weight: 700;
  white-space: nowrap;
}
.mega-menu-footer a .ui-icon { width: 14px; height: 14px; transition: transform .18s ease; }
.mega-menu-footer a:hover .ui-icon { transform: translateX(3px); }

/* Tooltip portal: works for server-rendered and asynchronously replaced controls. */
.ui-tooltip-portal {
  position: fixed;
  z-index: 400;
  width: max-content;
  max-width: min(260px, calc(100vw - 24px));
  padding: 7px 10px;
  border-radius: 8px;
  background: #242220;
  color: #fff;
  box-shadow: 0 8px 24px rgb(18 18 17 / .2);
  font-size: .7rem;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(3px) scale(.98);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.ui-tooltip-portal.visible { opacity: 1; visibility: visible; transform: none; }
.ui-tooltip-portal::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.ui-tooltip-portal[data-side="top"]::after { bottom: -4px; }
.ui-tooltip-portal[data-side="bottom"]::after { top: -4px; }

/* Stripe dashboard shortcuts */
.stripe-dashboard-link {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-weight: 650;
}
.stripe-dashboard-link .ui-icon { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .16s ease; }
.stripe-dashboard-link:hover .ui-icon { transform: translate(2px, -2px); }

/* Marketing motion and interaction polish */
.reveal {
  transition-delay: var(--reveal-delay, 0ms) !important;
  will-change: transform, opacity;
}
.reveal[data-reveal-direction="left"] { transform: translate3d(-16px, 20px, 0); }
.reveal[data-reveal-direction="right"] { transform: translate3d(16px, 20px, 0); }
.reveal.visible { transform: none; }
.original-feature,
.original-product-card,
.product-list-card,
.price-card,
.post-card,
.cta-panel {
  transition: transform .24s cubic-bezier(.2, .8, .2, 1), box-shadow .24s ease, border-color .24s ease, background-color .24s ease;
}
a.original-feature:hover,
a.product-list-card:hover,
.original-product-card:hover,
.price-card:hover,
.post-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  box-shadow: 0 18px 44px rgb(28 26 23 / .09);
}
.text-link .ui-icon,
.original-feature .text-link .ui-icon,
.product-list-card .ui-icon,
.post-card .ui-icon { transition: transform .18s ease; }
a.original-feature:hover .text-link .ui-icon,
a.product-list-card:hover .ui-icon,
.post-card:hover .ui-icon { transform: translateX(4px); }
.button .ui-icon { transition: transform .18s ease; }
.button:hover > .ui-icon:last-child { transform: translateX(2px); }

/* Shared mobile drawer language */
.mobile-drawer-backdrop { display: none; }
.mobile-drawer-handle { display: none; }
.mobile-drawer-titlebar { display: none; }

@media (max-width: 768px) {
  body.mobile-account-drawer-open,
  body.filter-drawer-open,
  body.drawer-open,
  body.dialog-open { overflow: hidden; overscroll-behavior: contain; }

  .mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 148;
    display: block;
    border: 0;
    background: rgb(18 18 17 / .34);
    backdrop-filter: blur(2px);
    animation: ui-drawer-fade .18s ease-out both;
  }
  .workspace-mobile-account-panel,
  .admin-filter-bar[data-filter-drawer],
  .history-drawer,
  dialog.admin-detail-dialog[open] {
    position: fixed !important;
    inset: auto 0 0 !important;
    z-index: 150 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: min(88svh, 780px) !important;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid var(--border) !important;
    border-bottom: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    background: var(--background) !important;
    box-shadow: 0 -24px 70px rgb(24 23 21 / .2) !important;
    animation: ui-drawer-up .24s cubic-bezier(.2, .8, .2, 1) both !important;
  }
  .workspace-mobile-account-panel { bottom: 0 !important; left: 0 !important; right: 0 !important; overflow-y: auto; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .workspace-mobile-account-panel .account-menu-panel { width: 100%; max-height: calc(88svh - 76px); overflow-y: auto; border: 0; border-radius: 0; box-shadow: none; }
  .mobile-drawer-handle,
  .admin-filter-bar[data-filter-drawer]::before,
  dialog.admin-detail-dialog[open]::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    flex: 0 0 auto;
    margin: 9px auto 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted-foreground) 30%, transparent);
  }
  .mobile-drawer-titlebar,
  .history-drawer > header,
  .admin-filter-drawer-head,
  dialog.admin-detail-dialog[open] > header {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 18px 14px !important;
    border-bottom: 1px solid var(--border);
    background: var(--background);
  }
  .mobile-drawer-titlebar > div,
  .history-drawer > header > div,
  .admin-filter-drawer-head > div { display: grid; min-width: 0; gap: 2px; }
  .mobile-drawer-titlebar strong,
  .history-drawer > header h2,
  .admin-filter-drawer-head strong,
  dialog.admin-detail-dialog[open] > header h2 { margin: 0; font-size: 1rem; line-height: 1.25; }
  .mobile-drawer-titlebar small,
  .history-drawer > header p { margin: 0; color: var(--muted-foreground); font-size: .7rem; }
  .mobile-drawer-titlebar > button,
  .history-drawer > header > button,
  .admin-filter-close,
  dialog.admin-detail-dialog[open] .dialog-close-row button {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--muted);
    color: var(--muted-foreground);
    cursor: pointer;
  }
  .workspace-mobile-account-panel > .mobile-drawer-handle { margin-bottom: 3px; }
  .admin-filter-bar[data-filter-drawer] { overflow-y: auto; padding-top: 0 !important; }
  .admin-filter-bar[data-filter-drawer]::before { position: sticky; top: 0; z-index: 2; }
  .admin-filter-drawer-head { position: sticky; top: 0; z-index: 1; }
  .history-drawer,
  dialog.admin-detail-dialog[open] { height: min(88svh, 780px) !important; }
  .history-drawer { display: flex; flex-direction: column; }
  .history-drawer > .mobile-drawer-handle { flex: 0 0 auto; }
  .history-list { min-height: 0; overscroll-behavior: contain; }
  dialog.admin-detail-dialog[open] { display: flex; flex-direction: column; }
  dialog.admin-detail-dialog[open]::before { flex: 0 0 auto; }
  dialog.admin-detail-dialog[open] .dialog-close-row {
    position: absolute;
    z-index: 3;
    top: 12px;
    right: 14px;
    padding: 0;
  }
  dialog.admin-detail-dialog[open] > header { padding-right: 66px !important; }
  dialog.admin-detail-dialog[open] > dl { min-height: 0; max-height: none !important; flex: 1 1 auto; overscroll-behavior: contain; }
  dialog.admin-detail-dialog[open] > .admin-user-actions { flex: 0 0 auto; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

@media (max-width: 1024px) {
  .ui-tooltip-portal { display: none; }
}

@keyframes ui-drawer-up {
  from { transform: translateY(34px); opacity: .72; }
  to { transform: none; opacity: 1; }
}
@keyframes ui-drawer-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .original-feature,
  .original-product-card,
  .product-list-card,
  .price-card,
  .post-card,
  .cta-panel,
  .mega-menu-feature-arrow,
  .nav-item-arrow,
  .ui-tooltip-portal { transition: none !important; }
  .workspace-mobile-account-panel,
  .admin-filter-bar[data-filter-drawer],
  .history-drawer,
  dialog.admin-detail-dialog[open],
  .mobile-drawer-backdrop { animation: none !important; }
}

/* ---- Experience layer 21 ---- */
/* Round 21: administrator command palette, exact ban expiry, richer record details,
   mobile blog categories, and a single confirmation language for destructive actions. */

/* Administrator command entry points */
.account-menu-command { display:flex; align-items:center; gap:10px; width:100%; padding:8px 9px; border:0; border-radius:9px; background:transparent; color:var(--muted-foreground); font:inherit; font-size:.75rem; font-weight:600; text-align:left; cursor:pointer; }
.account-menu-command:hover { background:var(--muted); color:var(--foreground); }
.account-menu-command>span { display:grid; width:18px; place-items:center; color:var(--primary); }
.account-menu-command kbd { margin-left:auto; padding:2px 5px; border:1px solid var(--border); border-radius:5px; background:var(--background); color:var(--muted-foreground); font:600 .58rem/1.2 var(--font-mono); }

.admin-section-nav { display: flex; align-items: stretch; gap: 5px; }
.admin-section-nav-scroll { flex: 1 1 auto; }
.admin-command-trigger,
.dashboard-command-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 1px 3px rgb(24 23 21/.06);
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .16s;
}
.admin-command-trigger { flex: 0 0 auto; padding: 8px 11px; }
.dashboard-command-button { height: 36px; padding: 0 10px; }
.admin-command-trigger:hover,
.dashboard-command-button:hover { border-color: color-mix(in srgb, var(--primary) 42%, var(--border)); background: color-mix(in srgb, var(--primary) 5%, var(--background)); }
.admin-command-trigger:active,
.dashboard-command-button:active { transform: translateY(1px); }
.admin-command-trigger .ui-icon,
.dashboard-command-button .ui-icon { width: 14px; height: 14px; color: var(--primary); }
.admin-command-trigger kbd,
.dashboard-command-button kbd { padding: 2px 5px; border: 1px solid var(--border); border-radius: 5px; background: var(--muted); color: var(--muted-foreground); font: 600 .59rem/1.2 var(--font-mono); }

.admin-command-dialog,
.confirm-dialog {
  width: min(620px, calc(100% - 28px));
  max-width: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 30px 90px rgb(20 19 17/.24);
}
.admin-command-dialog::backdrop,
.confirm-dialog::backdrop { background: rgb(20 19 17/.48); backdrop-filter: blur(5px); }
.admin-command-dialog[open],
.confirm-dialog[open] { animation: round21-dialog-in .18s cubic-bezier(.2,.8,.2,1) both; }
.admin-command-shell { overflow: hidden; border-radius: inherit; }
.admin-command-searchbar { display: grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding: 14px 16px; border-bottom:1px solid var(--border); }
.admin-command-searchbar>.ui-icon { width:18px; height:18px; color:var(--muted-foreground); }
.admin-command-searchbar input { min-width:0; padding:0; border:0; outline:0; background:transparent; color:var(--foreground); font-size:.94rem; }
.admin-command-searchbar kbd,
.admin-command-shell footer kbd { padding:3px 6px; border:1px solid var(--border); border-bottom-width:2px; border-radius:6px; background:var(--muted); color:var(--muted-foreground); font:600 .62rem/1 var(--font-mono); }
.admin-command-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px 9px; }
.admin-command-heading h2 { margin:3px 0 0; font-family:var(--font-sans); font-size:1rem; }
.admin-command-heading>button { display:grid; width:34px; height:34px; place-items:center; border:0; border-radius:9px; background:transparent; color:var(--muted-foreground); cursor:pointer; }
.admin-command-heading>button:hover { background:var(--muted); color:var(--foreground); }
.admin-command-list { display:grid; gap:4px; max-height:min(430px,55svh); overflow:auto; padding:6px 10px 12px; }
.admin-command-list a[hidden] { display:none!important; }
.admin-command-list a { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px; border:1px solid transparent; border-radius:12px; color:var(--foreground); }
.admin-command-list a:hover,
.admin-command-list a.keyboard-active { border-color:var(--border); background:var(--muted); }
.admin-command-icon { display:grid; width:40px; height:40px; place-items:center; border-radius:11px; background:color-mix(in srgb,var(--primary) 10%,var(--background)); color:var(--primary); }
.admin-command-icon .ui-icon { width:18px; height:18px; }
.admin-command-list a>span:nth-child(2) { min-width:0; }
.admin-command-list strong,
.admin-command-list small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-command-list strong { font-size:.8rem; }
.admin-command-list small { margin-top:3px; color:var(--muted-foreground); font-size:.68rem; }
.admin-command-arrow { width:15px; height:15px; color:var(--muted-foreground); opacity:.55; transition:transform .16s,opacity .16s; }
.admin-command-list a:hover .admin-command-arrow,
.admin-command-list a.keyboard-active .admin-command-arrow { opacity:1; transform:translateX(2px); color:var(--primary); }
.admin-command-empty { display:grid; justify-items:center; gap:7px; padding:42px 20px; color:var(--muted-foreground); text-align:center; }
.admin-command-empty[hidden] { display:none!important; }
.admin-command-empty .ui-icon { width:26px; height:26px; }
.admin-command-empty strong { color:var(--foreground); font-size:.86rem; }
.admin-command-empty span { font-size:.72rem; }
.admin-command-shell footer { display:flex; flex-wrap:wrap; gap:14px; padding:10px 16px; border-top:1px solid var(--border); background:color-mix(in srgb,var(--muted) 55%,var(--background)); color:var(--muted-foreground); font-size:.63rem; }
.admin-command-shell footer span { display:flex; align-items:center; gap:5px; }

/* Shared destructive confirmation */
.confirm-dialog { width:min(470px,calc(100% - 28px)); }
.confirm-dialog-card { display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; padding:22px; }
.confirm-dialog-icon { display:grid; width:44px; height:44px; place-items:center; border-radius:13px; background:color-mix(in srgb,var(--danger) 11%,var(--background)); color:var(--danger); }
.confirm-dialog-icon .ui-icon { width:21px; height:21px; }
.confirm-dialog-copy { min-width:0; }
.confirm-dialog-copy h2 { margin:4px 0 8px; font-family:var(--font-sans); font-size:1.08rem; }
.confirm-dialog-copy p { margin:0; color:var(--muted-foreground); font-size:.77rem; line-height:1.65; }
.confirm-dialog-detail { margin-top:12px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--muted); color:var(--foreground); font-size:.7rem; line-height:1.5; overflow-wrap:anywhere; }
.confirm-dialog-detail[hidden] { display:none!important; }
.confirm-dialog-require { display:grid; gap:7px; margin-top:14px; }
.confirm-dialog-require[hidden] { display:none!important; }
.confirm-dialog-require span { color:var(--foreground); font-size:.7rem; font-weight:700; }
.confirm-dialog-require input { width:100%; min-height:42px; font-family:var(--font-mono); letter-spacing:.08em; }
.confirm-dialog-card>footer { grid-column:1/-1; display:flex; justify-content:flex-end; gap:9px; padding-top:5px; }
.confirm-dialog-card>footer .button { min-width:96px; }

/* Exact ban expiry */
.admin-ban-expiration-grid { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:end; gap:9px; }
.admin-ban-or { align-self:center; padding-top:20px; color:var(--muted-foreground); font-size:.66rem; font-weight:700; text-transform:uppercase; }
.admin-user-actions form:has(.admin-ban-expiration-grid) { grid-template-columns:1fr; }
.admin-user-actions form:has(.admin-ban-expiration-grid)>.button { justify-self:end; }
.admin-user-actions label.disabled { opacity:.48; }
.admin-form-help { display:block; color:var(--muted-foreground); font-size:.66rem; line-height:1.5; }

/* Rich detail summaries and related records */
.admin-detail-type-icon { display:grid; width:48px; height:48px; flex:0 0 48px; place-items:center; border-radius:14px; }
.admin-detail-type-icon .ui-icon { width:21px; height:21px; }
.admin-detail-type-icon.payment { background:color-mix(in srgb,#4f7fd9 12%,var(--background)); color:#3868bf; }
.admin-detail-type-icon.credit { background:color-mix(in srgb,var(--primary) 13%,var(--background)); color:var(--primary); }
.admin-detail-type-icon.image { background:color-mix(in srgb,#8b66c7 12%,var(--background)); color:#7651b7; }
.admin-detail-overview { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px; margin:18px 24px 0; padding:16px; border:1px solid var(--border); border-radius:14px; background:linear-gradient(145deg,var(--background),color-mix(in srgb,var(--primary) 4%,var(--muted))); }
.admin-detail-overview-main { min-width:0; }
.admin-detail-overview-main>strong,
.admin-detail-overview-main>small { display:block; overflow-wrap:anywhere; }
.admin-detail-overview-main>strong { margin-top:9px; font-size:1rem; }
.admin-detail-overview-main>small { margin-top:4px; color:var(--muted-foreground); font-size:.7rem; }
.admin-detail-metrics { display:grid; grid-template-columns:repeat(2,minmax(88px,1fr)); gap:8px; }
.admin-detail-metrics>span { padding:10px; border:1px solid color-mix(in srgb,var(--border) 72%,transparent); border-radius:10px; background:color-mix(in srgb,var(--background) 76%,transparent); }
.admin-detail-metrics small,
.admin-detail-metrics strong { display:block; }
.admin-detail-metrics small { color:var(--muted-foreground); font-size:.59rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.admin-detail-metrics strong { margin-top:5px; font-size:.69rem; overflow-wrap:anywhere; }
.admin-job-progress-large { display:grid; grid-template-columns:110px auto; align-items:center; gap:7px 10px; }
.admin-job-progress-large>div { overflow:hidden; height:8px; border-radius:999px; background:var(--muted); }
.admin-job-progress-large>div>span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 66%,#fff)); }
.admin-job-progress-large>strong { font-size:.8rem; }
.admin-job-progress-large>small { grid-column:1/-1; color:var(--muted-foreground); font-size:.62rem; text-align:right; }
.admin-status-timeline { display:grid; gap:0; margin:17px 24px 0; padding:0; list-style:none; }
.admin-status-timeline li { position:relative; display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; min-height:49px; }
.admin-status-timeline li:not(:last-child)::after { position:absolute; top:28px; bottom:0; left:14px; width:1px; background:var(--border); content:""; }
.admin-status-timeline li>span { z-index:1; display:grid; width:29px; height:29px; place-items:center; border:1px solid var(--border); border-radius:50%; background:var(--background); color:var(--muted-foreground); }
.admin-status-timeline li>span .ui-icon { width:14px; height:14px; }
.admin-status-timeline li.complete>span,
.admin-status-timeline li.succeeded>span { border-color:color-mix(in srgb,#2f9461 36%,var(--border)); background:color-mix(in srgb,#2f9461 10%,var(--background)); color:#277c52; }
.admin-status-timeline li.failed>span,
.admin-status-timeline li.past-due>span { border-color:color-mix(in srgb,var(--danger) 40%,var(--border)); background:color-mix(in srgb,var(--danger) 9%,var(--background)); color:var(--danger); }
.admin-status-timeline li.processing>span,
.admin-status-timeline li.queued>span,
.admin-status-timeline li.active>span { border-color:color-mix(in srgb,var(--primary) 40%,var(--border)); background:color-mix(in srgb,var(--primary) 9%,var(--background)); color:var(--primary); }
.admin-status-timeline li>div { min-width:0; padding:3px 0 13px; }
.admin-status-timeline strong,
.admin-status-timeline small { display:block; overflow-wrap:anywhere; }
.admin-status-timeline strong { font-size:.73rem; }
.admin-status-timeline small { margin-top:4px; color:var(--muted-foreground); font-size:.66rem; line-height:1.45; }
.admin-related-links { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:8px 24px 0; }
.admin-related-links>span { margin-right:3px; color:var(--muted-foreground); font-size:.63rem; font-weight:750; text-transform:uppercase; letter-spacing:.05em; }
.admin-related-links a { display:inline-flex; align-items:center; gap:6px; padding:7px 9px; border:1px solid var(--border); border-radius:8px; color:var(--foreground); font-size:.67rem; font-weight:650; }
.admin-related-links a:hover { border-color:color-mix(in srgb,var(--primary) 38%,var(--border)); color:var(--primary); background:color-mix(in srgb,var(--primary) 4%,var(--background)); }
.admin-related-links .ui-icon { width:13px; height:13px; }
.admin-detail-fields { margin-top:16px; border-top:1px solid var(--border); }
.admin-detail-fields>summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 24px; color:var(--muted-foreground); font-size:.68rem; font-weight:750; cursor:pointer; list-style:none; }
.admin-detail-fields>summary::-webkit-details-marker { display:none; }
.admin-detail-fields>summary .ui-icon { width:14px; height:14px; transition:transform .16s; }
.admin-detail-fields:not([open])>summary .ui-icon { transform:rotate(-90deg); }
dialog.admin-detail-dialog[open]>.admin-detail-fields { min-height:0; overflow:auto; flex:1 1 auto; overscroll-behavior:contain; }
.admin-detail-field-list { max-height:none!important; margin:0!important; padding:0 24px 18px!important; overflow:visible!important; }

/* Blog category segmentation: desktop remains a segmented control; mobile becomes a bottom drawer. */
.blog-category-nav { box-shadow:0 1px 3px rgb(24 23 21/.035); }
.blog-category-nav a { position:relative; }
.blog-category-nav a.active::after { position:absolute; right:16px; bottom:3px; left:16px; height:2px; border-radius:999px; background:rgb(255 255 255/.72); content:""; }
.blog-category-trigger[hidden] { display:none!important; }
.blog-category-trigger { display:flex; width:100%; align-items:center; justify-content:space-between; gap:14px; padding:11px 13px; border:1px solid var(--border); border-radius:12px; background:var(--background); color:var(--foreground); box-shadow:0 1px 3px rgb(24 23 21/.05); font:inherit; text-align:left; cursor:pointer; }
.blog-category-trigger span { min-width:0; }
.blog-category-trigger small,
.blog-category-trigger strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.blog-category-trigger small { color:var(--muted-foreground); font-size:.62rem; }
.blog-category-trigger strong { margin-top:2px; font-size:.77rem; }
.blog-category-trigger>.ui-icon { width:16px; height:16px; color:var(--muted-foreground); }
.blog-category-drawer { display:none; }
.blog-category-noscript { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.blog-category-noscript a { padding:8px 10px; border:1px solid var(--border); border-radius:9px; color:var(--foreground); font-size:.7rem; font-weight:650; }
.blog-category-noscript a.active { border-color:color-mix(in srgb,var(--primary) 34%,var(--border)); background:color-mix(in srgb,var(--primary) 7%,var(--background)); color:var(--primary); }

.settings-inline-action { display:block!important; }
.settings-inline-action .button { width:auto; }

@media(max-width:900px) {
  .dashboard-command-button span { display:none; }
  .dashboard-command-button { width:36px; padding:0; }
  .dashboard-command-button kbd { display:none; }
}

@media(max-width:768px) {
  .admin-section-nav { align-items:center; }
  .admin-command-trigger { width:44px; min-width:44px; height:44px; padding:0; }
  .admin-command-trigger span,
  .admin-command-trigger kbd { display:none; }
  .admin-command-trigger .ui-icon { width:16px; height:16px; }

  .admin-command-dialog,
  .confirm-dialog { top:auto; bottom:0; width:100%; max-width:none; margin:auto 0 0; border-width:1px 0 0; border-radius:19px 19px 0 0; }
  .admin-command-dialog[open],
  .confirm-dialog[open] { animation:round21-drawer-up .22s cubic-bezier(.2,.8,.2,1) both; }
  .admin-command-list { max-height:52svh; }
  .admin-command-shell footer { padding-bottom:calc(11px + env(safe-area-inset-bottom)); }
  .confirm-dialog-card { padding-bottom:calc(22px + env(safe-area-inset-bottom)); }

  .admin-detail-overview { grid-template-columns:1fr; margin-inline:18px; }
  .admin-detail-metrics { grid-template-columns:1fr 1fr; }
  .admin-status-timeline,
  .admin-related-links { margin-inline:18px; }
  .admin-detail-fields>summary { padding-inline:18px; }
  .admin-detail-field-list { padding-inline:18px!important; }
  dialog.admin-detail-dialog[open]>.admin-detail-fields { flex:1 1 auto; overflow:auto; }
  dialog.admin-detail-dialog[open]>.admin-user-actions { flex:0 0 auto; }
  .admin-ban-expiration-grid { grid-template-columns:1fr; }
  .admin-ban-or { display:none; }

  body.blog-category-drawer-open { overflow:hidden; overscroll-behavior:contain; }
  .blog-category-mobile.is-enhanced .blog-category-native { display:none; }
  .blog-category-mobile.is-enhanced .blog-category-trigger[hidden] { display:none!important; }
.blog-category-trigger { display:flex; }
  .blog-category-backdrop { display:block!important; }
  .blog-category-backdrop[hidden] { display:none!important; }
  .blog-category-drawer:not([hidden]) {
    position:fixed;
    z-index:150;
    right:0;
    bottom:0;
    left:0;
    display:flex;
    max-height:min(78svh,620px);
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--border);
    border-width:1px 0 0;
    border-radius:19px 19px 0 0;
    background:var(--background);
    box-shadow:0 -20px 60px rgb(20 19 17/.18);
    animation:round21-drawer-up .22s cubic-bezier(.2,.8,.2,1) both;
  }
  .blog-category-drawer>.mobile-drawer-handle { display:block; flex:0 0 auto; }
  .blog-category-drawer>.mobile-drawer-titlebar { display:flex; flex:0 0 auto; }
  .blog-category-drawer-list { display:grid; gap:4px; overflow:auto; padding:8px 12px calc(14px + env(safe-area-inset-bottom)); }
  .blog-category-drawer-list a { display:flex; min-height:48px; align-items:center; justify-content:space-between; gap:12px; padding:9px 11px; border:1px solid transparent; border-radius:11px; color:var(--foreground); }
  .blog-category-drawer-list a:hover { background:var(--muted); }
  .blog-category-drawer-list a.active { border-color:color-mix(in srgb,var(--primary) 34%,var(--border)); background:color-mix(in srgb,var(--primary) 7%,var(--background)); color:var(--primary); }
  .blog-category-drawer-list a>span { display:flex; min-width:0; align-items:center; gap:10px; }
  .blog-category-drawer-list a>span>.ui-icon { width:17px; height:17px; }
  .blog-category-drawer-list strong { font-size:.77rem; }
  .blog-category-drawer-list .check { width:16px; height:16px; }
}

@media(max-width:480px) {
  .admin-command-searchbar { padding-inline:13px; }
  .admin-command-heading { padding-inline:14px; }
  .admin-command-list { padding-inline:7px; }
  .admin-command-list a { grid-template-columns:36px minmax(0,1fr) auto; gap:9px; padding:9px; }
  .admin-command-icon { width:36px; height:36px; }
  .confirm-dialog-card { grid-template-columns:38px minmax(0,1fr); gap:11px; padding-inline:16px; }
  .confirm-dialog-icon { width:38px; height:38px; border-radius:11px; }
  .confirm-dialog-card>footer { display:grid; grid-template-columns:1fr 1fr; }
  .confirm-dialog-card>footer .button { min-width:0; }
  .admin-detail-metrics { grid-template-columns:1fr; }
  .admin-job-progress-large { grid-template-columns:minmax(0,1fr) auto; }
  .admin-related-links>span { width:100%; }
}

@keyframes round21-dialog-in { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes round21-drawer-up { from { opacity:.75; transform:translateY(28px); } to { opacity:1; transform:none; } }

@media(prefers-reduced-motion:reduce) {
  .admin-command-dialog[open],
  .confirm-dialog[open],
  .blog-category-drawer:not([hidden]) { animation:none!important; }
  .admin-command-trigger,
  .dashboard-command-button,
  .admin-command-arrow,
  .admin-detail-fields>summary .ui-icon { transition:none!important; }
}

/* ---- Experience layer 22 ---- */
/* Round 22: administrator overview, consolidated account entry, and comprehensive user profile. */
.account-menu-links .account-menu-admin-entry {
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto 16px;
  align-items:center;
  gap:10px;
  min-height:62px;
  padding:9px 10px;
  border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));
  border-radius:13px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 7%,var(--background)),var(--background));
}
.account-menu-links .account-menu-admin-entry>span:first-child { width:34px; height:34px; }
.account-menu-admin-copy { display:grid!important; width:auto!important; height:auto!important; min-width:0; place-items:initial!important; gap:2px; background:none!important; }
.account-menu-admin-copy strong { color:var(--foreground); font-size:.78rem; line-height:1.2; }
.account-menu-admin-copy small { overflow:hidden; color:var(--muted-foreground); font-size:.62rem; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.account-menu-admin-arrow { width:15px; height:15px; color:var(--muted-foreground); }
.account-menu-admin-entry:hover .account-menu-admin-arrow { transform:translateX(2px); color:var(--primary); }

.admin-overview-page,.admin-user-detail-page { padding-bottom:72px; }
.admin-overview-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:30px 0 22px; }
.admin-overview-hero h1 { margin:5px 0 8px; font-size:clamp(2rem,4vw,3.35rem); letter-spacing:-.055em; }
.admin-overview-hero p { max-width:690px; margin:0; color:var(--muted-foreground); font-size:.92rem; line-height:1.65; }
.admin-overview-command { flex:0 0 auto; }
.admin-overview-command kbd { margin-left:4px; padding:2px 6px; border:1px solid var(--border); border-radius:6px; background:var(--muted); color:var(--muted-foreground); font-size:.62rem; }

.admin-overview-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:18px 0 30px; }
.admin-overview-stats article { display:flex; min-width:0; align-items:center; gap:13px; padding:17px; border:1px solid var(--border); border-radius:16px; background:var(--card); box-shadow:0 8px 26px rgb(24 23 21/.035); }
.admin-stat-icon { display:grid; width:42px; height:42px; flex:0 0 auto; place-items:center; border-radius:13px; background:color-mix(in srgb,var(--primary) 9%,var(--background)); color:var(--primary); }
.admin-stat-icon.success { background:color-mix(in srgb,#1f8f63 10%,var(--background)); color:#16704d; }
.admin-stat-icon.warning { background:color-mix(in srgb,#c18124 11%,var(--background)); color:#936018; }
.admin-stat-icon.danger { background:color-mix(in srgb,#be4b49 10%,var(--background)); color:#a33c3b; }
.admin-overview-stats article>div { display:grid; min-width:0; gap:1px; }
.admin-overview-stats small { color:var(--muted-foreground); font-size:.64rem; font-weight:650; text-transform:uppercase; letter-spacing:.08em; }
.admin-overview-stats strong { font-size:1.55rem; line-height:1.1; letter-spacing:-.04em; }
.admin-overview-stats article div>span { color:var(--muted-foreground); font-size:.65rem; }
.text-danger,.admin-overview-stats .text-danger { color:#a33c3b!important; }

.admin-section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:13px; }
.admin-section-heading h2,.admin-panel-heading h2 { margin:3px 0 0; font-size:1.12rem; letter-spacing:-.025em; }
.admin-section-heading p { max-width:540px; margin:0; color:var(--muted-foreground); font-size:.72rem; line-height:1.5; text-align:right; }
.admin-module-grid { margin-bottom:30px; }
.admin-module-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.admin-module-card { position:relative; display:grid; grid-template-columns:42px minmax(0,1fr) auto 18px; align-items:center; gap:12px; min-height:112px; padding:16px; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--card); color:var(--foreground); box-shadow:0 8px 26px rgb(24 23 21/.03); transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.admin-module-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--primary) 28%,var(--border)); box-shadow:0 15px 34px rgb(24 23 21/.075); }
.admin-module-icon { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; background:var(--muted); color:var(--primary); }
.admin-module-copy { display:grid; min-width:0; gap:5px; }
.admin-module-copy strong { font-size:.86rem; }
.admin-module-copy small { color:var(--muted-foreground); font-size:.66rem; line-height:1.45; }
.admin-module-metric { display:grid; min-width:65px; gap:2px; text-align:right; }
.admin-module-metric b { font-size:1.18rem; letter-spacing:-.035em; }
.admin-module-metric small { color:var(--muted-foreground); font-size:.58rem; line-height:1.3; }
.admin-module-arrow { color:var(--muted-foreground); transition:transform .18s ease,color .18s ease; }
.admin-module-card:hover .admin-module-arrow { transform:translateX(3px); color:var(--primary); }

.admin-overview-lower-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr); gap:14px; align-items:start; }
.admin-activity-panel,.admin-attention-panel,.admin-user-section { overflow:hidden; border-radius:17px; }
.admin-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 18px 14px; border-bottom:1px solid var(--border); }
.admin-panel-heading>.ui-icon { width:18px; height:18px; color:var(--muted-foreground); }
.admin-activity-list { margin:0; padding:4px 10px 10px; list-style:none; }
.admin-activity-list li+li { border-top:1px solid color-mix(in srgb,var(--border) 75%,transparent); }
.admin-activity-list a { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:11px; padding:11px 8px; color:var(--foreground); border-radius:10px; }
.admin-activity-list a:hover { background:var(--muted); }
.admin-activity-icon { display:grid; width:36px; height:36px; place-items:center; border-radius:11px; background:var(--muted); color:var(--muted-foreground); }
.admin-activity-icon.failed { background:color-mix(in srgb,#be4b49 10%,var(--background)); color:#a33c3b; }
.admin-activity-icon.active,.admin-activity-icon.succeeded { background:color-mix(in srgb,#1f8f63 10%,var(--background)); color:#16704d; }
.admin-activity-list a>span:nth-child(2) { display:grid; min-width:0; gap:3px; }
.admin-activity-list strong { font-size:.75rem; }
.admin-activity-list small { overflow:hidden; color:var(--muted-foreground); font-size:.64rem; text-overflow:ellipsis; white-space:nowrap; }
.admin-activity-meta { display:grid; justify-items:end; gap:4px; }
.admin-activity-meta time { color:var(--muted-foreground); font-size:.58rem; }
.admin-attention-list { display:grid; gap:8px; padding:12px; }
.admin-attention-list a { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px; border:1px solid var(--border); border-radius:12px; color:var(--foreground); background:var(--background); }
.admin-attention-list a:hover { border-color:color-mix(in srgb,var(--primary) 25%,var(--border)); background:var(--muted); }
.admin-attention-list a>span { display:grid; width:36px; height:36px; place-items:center; border-radius:10px; background:var(--muted); color:var(--primary); }
.admin-attention-list a>div { display:grid; gap:2px; }
.admin-attention-list strong { font-size:.72rem; }
.admin-attention-list small { color:var(--muted-foreground); font-size:.59rem; line-height:1.4; }
.admin-attention-list a>b { min-width:28px; padding:5px 7px; border-radius:999px; background:var(--muted); text-align:center; font-size:.7rem; }
.admin-attention-list a>b.danger { background:color-mix(in srgb,#be4b49 10%,var(--background)); color:#a33c3b; }

.admin-user-breadcrumb { display:flex; align-items:center; gap:6px; padding:20px 0 6px; color:var(--muted-foreground); font-size:.67rem; }
.admin-user-breadcrumb a { color:var(--muted-foreground); }
.admin-user-breadcrumb a:hover { color:var(--primary); }
.admin-user-breadcrumb .ui-icon { width:12px; height:12px; }
.admin-user-profile-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:18px 0 14px; padding:22px; border:1px solid var(--border); border-radius:19px; background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 5%,var(--card)),var(--card) 58%); box-shadow:0 12px 34px rgb(24 23 21/.045); }
.admin-user-profile-identity { display:flex; min-width:0; align-items:center; gap:17px; }
.admin-user-profile-avatar { display:grid; width:74px; height:74px; flex:0 0 auto; place-items:center; overflow:hidden; border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border)); border-radius:22px; background:var(--muted); color:var(--primary); font-family:"Cormorant Garamond",serif; font-size:2rem; font-weight:600; }
.admin-user-profile-avatar img { width:100%; height:100%; object-fit:cover; }
.admin-user-profile-identity h1 { margin:3px 0 4px; font-size:clamp(1.55rem,3vw,2.35rem); letter-spacing:-.05em; }
.admin-user-profile-identity p { display:flex; align-items:center; gap:5px; margin:0; color:var(--muted-foreground); font-size:.74rem; }
.admin-user-profile-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.admin-user-profile-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.admin-user-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin-bottom:14px; }
.admin-user-stat-grid article { display:flex; align-items:center; gap:11px; padding:15px; border:1px solid var(--border); border-radius:15px; background:var(--card); }
.admin-user-stat-grid article>span { display:grid; width:38px; height:38px; flex:0 0 auto; place-items:center; border-radius:11px; background:var(--muted); color:var(--primary); }
.admin-user-stat-grid article>div { display:grid; min-width:0; gap:1px; }
.admin-user-stat-grid small { color:var(--muted-foreground); font-size:.6rem; text-transform:uppercase; letter-spacing:.07em; }
.admin-user-stat-grid strong { font-size:1.22rem; letter-spacing:-.035em; }
.admin-user-stat-grid em { color:var(--muted-foreground); font-size:.59rem; font-style:normal; }
.admin-user-stat-grid em.danger { color:#a33c3b; }
.admin-user-detail-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.72fr); gap:14px; align-items:start; }
.admin-user-main-column,.admin-user-side-column { display:grid; gap:14px; min-width:0; }
.admin-user-side-column { position:sticky; top:86px; }
.admin-user-section-heading { display:flex; min-height:68px; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border-bottom:1px solid var(--border); }
.admin-user-section-heading>div { display:flex; min-width:0; align-items:center; gap:10px; }
.admin-section-icon { display:grid; width:36px; height:36px; flex:0 0 auto; place-items:center; border-radius:10px; background:var(--muted); color:var(--primary); }
.admin-user-section-heading h2 { margin:2px 0 0; font-size:.94rem; letter-spacing:-.02em; }
.admin-user-section-heading>a { display:flex; align-items:center; gap:3px; color:var(--primary); font-size:.65rem; font-weight:650; }
.admin-user-section-heading>a .ui-icon { width:13px; height:13px; }
.admin-user-section-heading>small { color:var(--muted-foreground); font-size:.61rem; }
.admin-user-section-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
.admin-user-section-actions>a { display:flex; align-items:center; gap:3px; color:var(--primary); font-size:.65rem; font-weight:650; }
.admin-user-section-actions>a .ui-icon { width:13px; height:13px; }
.admin-user-section-actions .button.small { min-height:32px; padding:0 10px; font-size:.66rem; }
.admin-user-credit-inline { display:grid; grid-template-columns:minmax(120px,.55fr) minmax(0,1.4fr) auto; align-items:end; gap:10px; margin:14px 16px 6px; padding:13px; border:1px solid color-mix(in srgb,var(--primary) 16%,var(--border)); border-radius:13px; background:color-mix(in srgb,var(--primary) 4%,var(--background)); }
.admin-user-credit-inline label { display:grid; gap:5px; min-width:0; }
.admin-user-credit-inline label>span { color:var(--muted-foreground); font-size:.59rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.admin-user-credit-inline input { width:100%; min-height:40px; border-radius:9px; background:var(--background); }
.admin-user-credit-inline .button { min-height:40px; white-space:nowrap; }
.admin-user-credit-inline>p { grid-column:1/-1; min-height:16px; margin:0; color:var(--muted-foreground); font-size:.68rem; }
.admin-user-credit-composer { margin:18px 24px 24px; }
.admin-user-credit-composer>p { min-height:16px; margin:0; color:var(--danger, #b42318); font-size:.68rem; }
.admin-user-definition-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; padding:5px 16px 16px; }
.admin-user-definition-grid>div { min-width:0; padding:12px 0; border-bottom:1px solid color-mix(in srgb,var(--border) 78%,transparent); }
.admin-user-definition-grid>div:nth-child(odd) { padding-right:18px; }
.admin-user-definition-grid dt { margin-bottom:5px; color:var(--muted-foreground); font-size:.59rem; text-transform:uppercase; letter-spacing:.07em; }
.admin-user-definition-grid dd { display:flex; min-width:0; align-items:center; gap:5px; margin:0; overflow-wrap:anywhere; font-size:.72rem; font-weight:600; }
.admin-user-definition-grid code { padding:3px 6px; border-radius:6px; background:var(--muted); font-size:.62rem; }
.admin-current-plan { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:11px; margin:14px 16px 6px; padding:13px; border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border)); border-radius:13px; background:color-mix(in srgb,var(--primary) 5%,var(--background)); }
.admin-current-plan-icon { display:grid; width:42px; height:42px; place-items:center; border-radius:12px; background:var(--primary); color:var(--primary-foreground); }
.admin-current-plan>div { display:grid; gap:2px; }
.admin-current-plan small,.admin-current-plan span { color:var(--muted-foreground); font-size:.6rem; }
.admin-current-plan strong { font-size:.78rem; }
.admin-user-record-list { display:grid; padding:8px 12px 13px; }
.admin-user-record-list>a { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 6px; color:var(--foreground); border-radius:10px; }
.admin-user-record-list>a+a { border-top:1px solid color-mix(in srgb,var(--border) 76%,transparent); }
.admin-user-record-list>a:hover { background:var(--muted); }
.admin-record-icon { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:var(--muted); color:var(--primary); }
.admin-user-record-list>a>span:nth-child(2) { display:grid; min-width:0; gap:3px; }
.admin-user-record-list strong { font-size:.72rem; }
.admin-user-record-list small { overflow:hidden; color:var(--muted-foreground); font-size:.61rem; text-overflow:ellipsis; white-space:nowrap; }
.admin-user-job-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px; }
.admin-user-job-grid>a { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:9px; padding:11px; border:1px solid var(--border); border-radius:12px; color:var(--foreground); }
.admin-user-job-grid>a:hover { border-color:color-mix(in srgb,var(--primary) 25%,var(--border)); background:var(--muted); }
.admin-user-job-grid>a>div { display:grid; min-width:0; gap:4px; }
.admin-user-job-grid>a>div>span { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:6px; }
.admin-user-job-grid strong { overflow:hidden; font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.admin-user-job-grid small { overflow:hidden; color:var(--muted-foreground); font-size:.56rem; text-overflow:ellipsis; white-space:nowrap; }
.admin-user-job-grid em { color:var(--muted-foreground); font-size:.55rem; font-style:normal; white-space:nowrap; }
.admin-job-mini-progress { height:4px; overflow:hidden; border-radius:999px; background:var(--muted); }
.admin-job-mini-progress i { display:block; height:100%; border-radius:inherit; background:var(--primary); }
.admin-security-list { margin:0; padding:5px 14px 10px; list-style:none; }
.admin-security-list li { display:flex; min-height:43px; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent); }
.admin-security-list li>span { display:flex; align-items:center; gap:8px; color:var(--muted-foreground); font-size:.65rem; }
.admin-security-list li>span .ui-icon { width:14px; height:14px; }
.admin-security-list li>b { font-size:.65rem; }
.admin-login-providers { padding:10px 14px 15px; }
.admin-login-providers>small { display:block; margin-bottom:7px; color:var(--muted-foreground); font-size:.59rem; text-transform:uppercase; letter-spacing:.07em; }
.admin-login-providers>div { display:flex; flex-wrap:wrap; gap:6px; }
.admin-login-providers>div>span { display:flex; align-items:center; gap:5px; padding:6px 8px; border:1px solid var(--border); border-radius:8px; font-size:.62rem; font-weight:650; }
.admin-login-providers .ui-icon { width:13px; height:13px; }
.admin-user-timeline { margin:0; padding:13px 14px 17px; list-style:none; }
.admin-user-timeline li { position:relative; display:grid; grid-template-columns:32px minmax(0,1fr); gap:9px; padding-bottom:14px; }
.admin-user-timeline li:not(:last-child)::after { content:""; position:absolute; top:31px; bottom:0; left:15px; width:1px; background:var(--border); }
.admin-user-timeline li>span { z-index:1; display:grid; width:31px; height:31px; place-items:center; border:1px solid var(--border); border-radius:10px; background:var(--background); color:var(--muted-foreground); }
.admin-user-timeline li>span.failed { border-color:color-mix(in srgb,#be4b49 25%,var(--border)); color:#a33c3b; }
.admin-user-timeline li>span.succeeded,.admin-user-timeline li>span.active,.admin-user-timeline li>span.complete { border-color:color-mix(in srgb,#1f8f63 25%,var(--border)); color:#16704d; }
.admin-user-timeline li>div { display:grid; min-width:0; gap:2px; padding-top:1px; }
.admin-user-timeline strong { font-size:.68rem; }
.admin-user-timeline small { overflow-wrap:anywhere; color:var(--muted-foreground); font-size:.59rem; line-height:1.4; }
.admin-user-timeline time { color:var(--muted-foreground); font-size:.54rem; }
.admin-user-danger-zone { border-color:color-mix(in srgb,#be4b49 30%,var(--border)); }
.admin-user-danger-zone>header { display:flex; gap:10px; padding:15px; border-bottom:1px solid color-mix(in srgb,#be4b49 22%,var(--border)); background:color-mix(in srgb,#be4b49 5%,var(--background)); }
.admin-user-danger-zone>header>span { display:grid; width:35px; height:35px; flex:0 0 auto; place-items:center; border-radius:10px; background:color-mix(in srgb,#be4b49 12%,var(--background)); color:#a33c3b; }
.admin-user-danger-zone h2 { margin:0 0 4px; font-size:.86rem; }
.admin-user-danger-zone p { margin:0; color:var(--muted-foreground); font-size:.6rem; line-height:1.45; }
.admin-user-danger-zone>form { display:grid; gap:11px; padding:14px; }
.admin-user-danger-zone textarea { min-height:78px; resize:vertical; }
.admin-ban-current { margin:14px; padding:12px; border:1px solid color-mix(in srgb,#be4b49 24%,var(--border)); border-radius:11px; background:color-mix(in srgb,#be4b49 5%,var(--background)); }
.admin-ban-current b { color:#a33c3b; font-size:.72rem; }
.admin-ban-current p { margin:5px 0; font-size:.65rem; line-height:1.5; }
.admin-ban-current small { color:var(--muted-foreground); font-size:.58rem; }

.admin-detail-type-icon.lead { background:color-mix(in srgb,#3b82f6 10%,var(--background)); color:#2868b2; }
.admin-detail-type-icon.contact { background:color-mix(in srgb,#8b5cf6 10%,var(--background)); color:#6d44bd; }
.lead-overview { background:linear-gradient(135deg,color-mix(in srgb,#3b82f6 6%,var(--background)),var(--background)); }
.admin-contact-detail-card { margin:0 20px 14px; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--background); }
.admin-contact-detail-card>header { display:flex!important; min-height:auto!important; align-items:flex-start!important; justify-content:space-between!important; gap:12px!important; padding:14px!important; border-bottom:1px solid var(--border); }
.admin-contact-detail-card>header>div { display:grid; gap:7px; }
.admin-contact-detail-card>header strong { font-size:.84rem; }
.admin-contact-detail-card>header time { color:var(--muted-foreground); font-size:.58rem; white-space:nowrap; }
.admin-contact-detail-card blockquote { margin:0; padding:17px; color:var(--foreground); font-size:.72rem; line-height:1.7; white-space:pre-wrap; }
.admin-contact-detail-card>footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-top:1px solid var(--border); background:var(--muted); }
.admin-contact-detail-card>footer>span { display:grid; grid-template-columns:20px minmax(0,1fr); column-gap:7px; align-items:center; }
.admin-contact-detail-card>footer>span .ui-icon { grid-row:1/3; color:var(--muted-foreground); }
.admin-contact-detail-card>footer b { font-size:.67rem; }
.admin-contact-detail-card>footer small { color:var(--muted-foreground); font-size:.58rem; }

@media(max-width:1080px) {
  .admin-overview-stats,.admin-user-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-module-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-user-detail-layout { grid-template-columns:minmax(0,1fr) 310px; }
  .admin-user-job-grid { grid-template-columns:1fr; }
}
@media(max-width:860px) {
  .admin-overview-hero,.admin-user-profile-hero { align-items:flex-start; flex-direction:column; }
  .admin-overview-command,.admin-user-profile-actions { width:100%; }
  .admin-overview-command { justify-content:center; }
  .admin-user-profile-actions { justify-content:flex-start; }
  .admin-overview-lower-grid,.admin-user-detail-layout { grid-template-columns:1fr; }
  .admin-user-side-column { position:static; }
  .admin-section-heading { align-items:flex-start; flex-direction:column; gap:5px; }
  .admin-section-heading p { text-align:left; }
}
@media(max-width:640px) {
  .admin-overview-page,.admin-user-detail-page { padding-bottom:96px; }
  .admin-overview-hero { padding-top:20px; }
  .admin-overview-stats,.admin-user-stat-grid,.admin-module-cards { grid-template-columns:1fr; }
  .admin-overview-stats { gap:8px; margin:13px 0 24px; }
  .admin-overview-stats article { padding:13px; }
  .admin-module-card { grid-template-columns:38px minmax(0,1fr) auto 16px; min-height:96px; padding:13px; }
  .admin-module-icon { width:38px; height:38px; }
  .admin-module-metric { min-width:54px; }
  .admin-activity-list a { grid-template-columns:34px minmax(0,1fr); }
  .admin-activity-meta { grid-column:2; justify-items:start; grid-auto-flow:column; align-items:center; justify-content:start; }
  .admin-user-breadcrumb { overflow:auto; white-space:nowrap; }
  .admin-user-profile-hero { margin-top:12px; padding:16px; }
  .admin-user-profile-identity { align-items:flex-start; }
  .admin-user-profile-avatar { width:58px; height:58px; border-radius:17px; font-size:1.55rem; }
  .admin-user-profile-actions { display:grid; grid-template-columns:1fr 1fr; }
  .admin-user-profile-actions .button:last-child:nth-child(odd) { grid-column:1/-1; }
  .admin-user-definition-grid { grid-template-columns:1fr; }
  .admin-user-definition-grid>div:nth-child(odd) { padding-right:0; }
  .admin-user-section-heading { align-items:flex-start; }
  .admin-user-section-actions { width:100%; justify-content:flex-start; }
  .admin-user-credit-inline { grid-template-columns:1fr; margin-inline:12px; }
  .admin-user-credit-inline .button { width:100%; }
  .admin-current-plan { grid-template-columns:38px minmax(0,1fr); }
  .admin-current-plan>b { grid-column:2; justify-self:start; }
  .admin-contact-detail-card { margin-inline:14px; }
  .admin-contact-detail-card>footer { align-items:stretch; flex-direction:column; }
  .admin-contact-detail-card>footer .button { width:100%; }
}
@media(max-width:420px) {
  .admin-user-profile-identity { flex-direction:column; }
  .admin-user-profile-actions { grid-template-columns:1fr; }
  .admin-user-profile-actions .button { grid-column:auto!important; width:100%; }
  .admin-module-card { grid-template-columns:38px minmax(0,1fr) 16px; }
  .admin-module-metric { grid-column:2; grid-row:2; text-align:left; }
  .admin-module-arrow { grid-column:3; grid-row:1/3; }
  .admin-attention-list a { grid-template-columns:34px minmax(0,1fr) auto; }
}
@media(prefers-reduced-motion:reduce) {
  .admin-module-card,.admin-module-arrow,.account-menu-admin-arrow { transition:none!important; }
}

/* ---- Experience layer 23 ---- */
/* Round 23: quality tooling, preview surfaces, and profile reliability polish. */
.email-preview-tabs { display:flex; gap:8px; margin:22px 0 14px; overflow-x:auto; scrollbar-width:none; }
.email-preview-tabs button { display:inline-flex; min-height:42px; padding:9px 14px; align-items:center; gap:8px; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--muted-foreground); white-space:nowrap; cursor:pointer; }
.email-preview-tabs button.active { border-color:color-mix(in srgb,var(--primary) 40%,var(--border)); background:color-mix(in srgb,var(--primary) 8%,var(--card)); color:var(--primary); }
.email-preview-panel { overflow:hidden; }
.email-preview-meta { display:flex; padding:16px 18px; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid var(--border); }
.email-preview-meta > div:first-child { display:grid; gap:3px; }
.email-preview-meta small { color:var(--muted-foreground); }
.email-preview-size-switch { display:inline-flex; padding:3px; border:1px solid var(--border); border-radius:10px; background:var(--muted); }
.email-preview-size-switch button { padding:6px 10px; border:0; border-radius:7px; background:transparent; color:var(--muted-foreground); cursor:pointer; }
.email-preview-size-switch button.active { background:var(--card); color:var(--foreground); box-shadow:var(--shadow-sm); }
.email-preview-frame-wrap { width:100%; padding:24px; background:#e9e6e0; transition:max-width .25s ease; }
.email-preview-frame-wrap.mobile { max-width:430px; margin-inline:auto; }
.email-preview-frame-wrap iframe { display:block; width:100%; min-height:720px; border:1px solid #d6d0c7; border-radius:12px; background:#fff; }
.avatar-upload-state { min-height:1.4em; color:var(--muted-foreground); font-size:.85rem; }
.avatar-upload-state.error { color:var(--destructive,#b42318); }
@media (max-width:600px) { .email-preview-meta { align-items:flex-start; flex-direction:column; } .email-preview-frame-wrap { padding:10px; } .email-preview-frame-wrap iframe { min-height:650px; } }

/* ---- Experience layer 25 ---- */
.admin-mail-page{padding-bottom:72px}.admin-mail-heading{align-items:flex-end}.admin-mail-timezone{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);font-size:13px;color:var(--muted-foreground)}.admin-mail-timezone strong{color:var(--text)}.admin-mail-provider-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0 30px}.admin-mail-provider-card{position:relative;padding:20px;border:1px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}.admin-mail-provider-card:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--border)}.admin-mail-provider-card.healthy:before{background:#16a36a}.admin-mail-provider-card.circuit:before{background:#d94b4b}.admin-mail-provider-card.quota:before{background:#d28a16}.admin-mail-provider-card>header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:20px}.admin-mail-provider-identity{display:flex;align-items:center;gap:12px;min-width:0}.admin-mail-provider-logo{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--accent-2);color:var(--accent);font-weight:800;font-size:18px}.admin-mail-provider-identity h2{font-size:17px;margin:0}.admin-mail-provider-identity p{margin:3px 0 0;color:var(--muted-foreground);font-size:12px}.admin-mail-provider-state{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:var(--surface-2);font-size:11px;font-weight:700;white-space:nowrap}.admin-mail-provider-state i{width:7px;height:7px;border-radius:50%;background:currentColor}.admin-mail-provider-state.healthy{color:#087a4b;background:#e8f7f0}.admin-mail-provider-state.circuit{color:#b52f37;background:#fdecee}.admin-mail-provider-state.quota{color:#9a6100;background:#fff4d8}.admin-mail-provider-state.inactive{color:var(--muted-foreground)}.admin-mail-quota-block+ .admin-mail-quota-block{margin-top:14px}.admin-mail-quota-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;font-size:12px;color:var(--muted-foreground)}.admin-mail-quota-label strong{color:var(--text)}.admin-mail-progress{height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden}.admin-mail-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent));transition:width .25s ease}.admin-mail-provider-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0;padding:14px;border-radius:16px;background:var(--surface-2)}.admin-mail-provider-facts div{display:flex;justify-content:space-between;gap:8px}.admin-mail-provider-facts dt{font-size:11px;color:var(--muted-foreground)}.admin-mail-provider-facts dd{margin:0;font-size:12px;font-weight:800}.admin-mail-provider-facts dd.danger{color:var(--danger)}.admin-mail-provider-meta{display:grid;gap:9px}.admin-mail-provider-meta p{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;margin:0;font-size:12px}.admin-mail-provider-meta span{color:var(--muted-foreground)}.admin-mail-provider-meta code,.admin-mail-provider-meta time,.admin-mail-provider-meta small{min-width:0;overflow-wrap:anywhere}.admin-mail-last-error small{color:var(--danger);line-height:1.45}.admin-mail-reset-form{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}.admin-mail-history{padding:0;overflow:hidden}.admin-mail-history>.admin-panel-heading{padding:20px 22px;border-bottom:1px solid var(--border)}.admin-mail-history>.admin-panel-heading>span{max-width:420px;text-align:right;color:var(--muted-foreground);font-size:12px}.admin-mail-table-wrap{overflow-x:auto}.admin-mail-table{width:100%;border-collapse:collapse;min-width:920px}.admin-mail-table th,.admin-mail-table td{padding:14px 16px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}.admin-mail-table th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-foreground);background:var(--surface-2)}.admin-mail-table td{font-size:13px}.admin-mail-table td strong,.admin-mail-table td small{display:block}.admin-mail-table td small{margin-top:4px;color:var(--muted-foreground)}.admin-mail-table code{font-size:11px;overflow-wrap:anywhere}.admin-mail-recipient{overflow-wrap:anywhere}.admin-mail-error-result{display:block;max-width:320px}.admin-mail-error-result strong{color:var(--danger)}.admin-mail-error-result small{line-height:1.4}.status.sending{background:#edf4ff;color:#245d9b}.status.sent{background:#e8f7f0;color:#087a4b}
@media(max-width:1050px){.admin-mail-provider-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.admin-mail-page{padding-bottom:96px}.admin-mail-heading{align-items:stretch}.admin-mail-timezone{align-self:flex-start}.admin-mail-provider-grid{grid-template-columns:1fr;gap:14px}.admin-mail-provider-card{padding:17px;border-radius:19px}.admin-mail-history>.admin-panel-heading{align-items:flex-start}.admin-mail-history>.admin-panel-heading>span{text-align:left}.admin-mail-table{min-width:0}.admin-mail-table thead{display:none}.admin-mail-table,.admin-mail-table tbody,.admin-mail-table tr,.admin-mail-table td{display:block;width:100%}.admin-mail-table tr{padding:14px 16px;border-bottom:1px solid var(--border)}.admin-mail-table td{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:5px 0;border:0}.admin-mail-table td:before{content:attr(data-label);font-size:11px;color:var(--muted-foreground);font-weight:700}.admin-mail-provider-meta p{grid-template-columns:78px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.admin-mail-progress span{transition:none}}

/* ---- Experience layer 26 ---- */
/* Round 26: mail configuration clarity, quota provenance, and tokenized contrast. */
.admin-mail-page{color:var(--color-text)}
.admin-mail-timezone,.admin-mail-provider-card,.admin-mail-history{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text)}
.admin-mail-timezone span,.admin-mail-provider-identity p,.admin-mail-quota-label,.admin-mail-provider-facts dt,.admin-mail-provider-meta span,.admin-mail-provider-meta small,.admin-mail-history>.admin-panel-heading>span,.admin-mail-table th,.admin-mail-table td small,.admin-mail-table td:before{color:var(--color-text-subtle)}
.admin-mail-timezone strong,.admin-mail-provider-identity h2,.admin-mail-quota-label strong,.admin-mail-provider-facts dd,.admin-mail-provider-meta code,.admin-mail-provider-meta time,.admin-mail-table td,.admin-mail-table td strong{color:var(--color-text)}
.admin-mail-provider-facts,.admin-mail-table th,.admin-mail-progress{background:var(--color-surface-muted)}
.admin-mail-provider-state.healthy{color:var(--color-success);background:var(--color-success-soft)}
.admin-mail-provider-state.circuit{color:var(--color-danger);background:var(--color-danger-soft)}
.admin-mail-provider-state.quota{color:var(--color-warning);background:var(--color-warning-soft)}
.admin-mail-provider-state.inactive{color:var(--color-text-subtle);background:var(--color-surface-muted)}
.admin-mail-provider-card.healthy:before{background:var(--color-success)}
.admin-mail-provider-card.circuit:before{background:var(--color-danger)}
.admin-mail-provider-card.quota:before{background:var(--color-warning)}
.admin-mail-provider-logo{background:var(--color-action-soft);color:var(--color-action)}
.admin-mail-progress span{background:var(--color-action)}
.admin-mail-provider-facts dd.danger,.admin-mail-last-error small,.admin-mail-error-result strong{color:var(--color-danger)}
.status.sending{background:var(--color-info-soft);color:var(--color-info)}
.status.sent{background:var(--color-success-soft);color:var(--color-success)}

.admin-mail-quota-note{display:flex;align-items:flex-start;gap:12px;margin:20px 0 4px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--color-info) 22%,var(--color-border));border-radius:var(--radius-md);background:var(--color-info-soft);color:var(--color-text)}
.admin-mail-quota-note>.ui-icon{flex:0 0 auto;margin-top:2px;color:var(--color-info)}
.admin-mail-quota-note strong{display:block;margin-bottom:4px;color:var(--color-info)}
.admin-mail-quota-note p{margin:0;color:var(--color-text);font-size:13px;line-height:1.55}

.admin-mail-provider-reported{display:grid;gap:4px;margin:16px 0;padding:14px 15px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-muted);color:var(--color-text)}
.admin-mail-provider-reported>span{font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.055em;color:var(--color-text-subtle)}
.admin-mail-provider-reported>strong{font-size:19px;line-height:1.2;color:var(--color-text)}
.admin-mail-provider-reported>small,.admin-mail-provider-reported>time{color:var(--color-text-subtle);font-size:11px;line-height:1.45}
.admin-mail-provider-reported.live{border-color:color-mix(in srgb,var(--color-success) 30%,var(--color-border));background:var(--color-success-soft)}
.admin-mail-provider-reported.live>strong{color:var(--color-success)}
.admin-mail-provider-reported.error{border-color:color-mix(in srgb,var(--color-danger) 28%,var(--color-border));background:var(--color-danger-soft)}
.admin-mail-provider-reported.error>strong,.admin-mail-provider-reported.error>small{color:var(--color-danger)}
.admin-mail-provider-reported.local-only>strong{font-size:14px;color:var(--color-text)}

@media(max-width:720px){
  .admin-mail-quota-note{padding:14px}
  .admin-mail-provider-facts dd{color:var(--color-text)}
}

/* ---- Experience system additions (round 27) ---- */
:root {
  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 18px;
  --ui-shadow-popover: 0 18px 48px rgb(15 23 42 / 14%);
  --ui-control-height: 42px;
}
.button, button, input, select, textarea, .panel, dialog { transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease, opacity .16s ease, transform .16s ease; }
.button[aria-busy="true"], button[aria-busy="true"] { cursor: progress; position: relative; }
.button[aria-busy="true"]::after, button[aria-busy="true"]::after { content:""; inline-size:14px; block-size:14px; border:2px solid currentColor; border-inline-end-color:transparent; border-radius:50%; animation:ui-spin .7s linear infinite; }
@keyframes ui-spin { to { transform:rotate(360deg); } }

.admin-facet-native { position:absolute!important; inline-size:1px!important; block-size:1px!important; opacity:0!important; pointer-events:none!important; }
.admin-facet-filter { position:relative; min-inline-size:190px; }
.admin-facet-trigger { inline-size:100%; min-block-size:var(--ui-control-height); display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:7px; padding:7px 11px; text-align:start; border:1px solid var(--border); border-radius:var(--ui-radius-md); background:var(--surface); color:var(--foreground); }
.admin-facet-trigger span { display:block; font-size:.72rem; color:var(--muted-foreground); }
.admin-facet-trigger strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.88rem; }
.admin-facet-trigger em { min-inline-size:22px; padding:2px 6px; border-radius:999px; background:var(--primary); color:var(--primary-foreground); font-style:normal; font-size:.72rem; text-align:center; }
.admin-facet-trigger.has-value { border-color:color-mix(in srgb,var(--primary) 48%,var(--border)); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent); }
.admin-facet-panel { position:absolute; z-index:80; inset-block-start:calc(100% + 7px); inset-inline-start:0; inline-size:min(340px,calc(100vw - 32px)); padding:10px; border:1px solid var(--border); border-radius:var(--ui-radius-lg); background:var(--surface); box-shadow:var(--ui-shadow-popover); }
.admin-facet-search { display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid var(--border); border-radius:10px; }
.admin-facet-search input { border:0!important; box-shadow:none!important; min-block-size:38px; padding-inline:0; }
.admin-facet-options { display:grid; gap:3px; max-block-size:260px; overflow:auto; padding:8px 0; }
.admin-facet-option { display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:8px; inline-size:100%; padding:8px; border:0; border-radius:9px; background:transparent; color:inherit; text-align:start; }
.admin-facet-option:hover, .admin-facet-option[aria-selected="true"] { background:var(--accent); }
.admin-facet-check { display:grid; place-items:center; inline-size:18px; block-size:18px; border:1px solid var(--border); border-radius:5px; }
.admin-facet-option[aria-selected="true"] .admin-facet-check { border-color:var(--primary); background:var(--primary); color:var(--primary-foreground); }
.admin-facet-option small { color:var(--muted-foreground); font-variant-numeric:tabular-nums; }
.admin-facet-footer { display:flex; justify-content:flex-end; gap:7px; padding-block-start:9px; border-block-start:1px solid var(--border); }

.admin-view-picker { position:relative; }
.admin-view-picker > summary, .admin-column-picker-trigger { display:flex; align-items:center; gap:7px; min-block-size:38px; padding:8px 11px; border:1px solid var(--border); border-radius:10px; cursor:pointer; list-style:none; }
.admin-view-picker > div { position:absolute; z-index:70; inset-block-start:calc(100% + 7px); inset-inline-end:0; inline-size:min(340px,calc(100vw - 32px)); display:grid; gap:10px; padding:14px; border:1px solid var(--border); border-radius:var(--ui-radius-lg); background:var(--surface); box-shadow:var(--ui-shadow-popover); }
.admin-view-picker label { display:grid; gap:5px; }
.admin-view-picker label span { font-size:.78rem; color:var(--muted-foreground); }
.admin-view-actions { display:flex; gap:7px; }
.admin-view-picker p { min-block-size:18px; margin:0; color:var(--muted-foreground); font-size:.78rem; }

.admin-table-panel.is-refreshing .table-wrap { opacity:.72; }
.admin-table-panel.is-refreshing::after { content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:3px; background:linear-gradient(90deg,transparent,var(--primary),transparent); animation:admin-refresh 1.1s linear infinite; }
@keyframes admin-refresh { from { transform:translateX(-60%); } to { transform:translateX(60%); } }
.admin-user-actions.is-mutating { opacity:.72; pointer-events:none; }

/* Viewport-capped compare stage: large images must not grow the page. */
.image-compare-slider {
  --compare-position:50%;
  --compare-stage-height:min(56vh,520px);
  position:relative;
  overflow:hidden;
  inline-size:100%;
  block-size:var(--compare-stage-height);
  min-block-size:280px;
  max-block-size:var(--compare-stage-height);
  border:1px solid var(--border);
  border-radius:var(--ui-radius-lg);
  background:var(--muted);
}
.image-compare-slider > img,
.image-compare-after img {
  position:absolute;
  inset:0;
  display:block;
  inline-size:100%;
  block-size:100%;
  max-inline-size:none;
  min-block-size:0;
  object-fit:contain;
  object-position:center;
}
.image-compare-after {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  overflow: hidden;
  clip-path: inset(0 calc(100% - var(--compare-position)) 0 0);
  background: inherit;
}
.image-compare-after::after { content:""; position:absolute; inset-block:0; inset-inline-start:var(--compare-position); inline-size:2px; background:white; transform:translateX(-1px); box-shadow:0 0 0 1px rgb(15 23 42 / 18%); }
.image-compare-slider input[type="range"] { position:absolute; inset:0; z-index:2; inline-size:100%; block-size:100%; opacity:0; cursor:ew-resize; }
.image-compare-handle { position:absolute; z-index:1; inset-block:50%; inset-inline-start:var(--compare-position); transform:translate(-50%,-50%); display:grid; place-items:center; inline-size:44px; block-size:44px; border:2px solid white; border-radius:50%; background:rgb(15 23 42 / 72%); color:white; pointer-events:none; box-shadow:0 8px 25px rgb(0 0 0 / 25%); }
.imageai-surface .preview-canvas {
  --preview-stage-height:min(56vh,520px);
  position:relative;
  overflow:hidden;
  block-size:var(--preview-stage-height);
  min-block-size:240px;
  max-block-size:var(--preview-stage-height);
  background:var(--muted);
}
.imageai-surface .preview-canvas img {
  position:absolute;
  inset:0;
  inline-size:100%;
  block-size:100%;
  object-fit:contain;
  object-position:center;
}
.image-file-summary { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.image-file-summary strong, .image-file-summary small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.image-file-summary small { color:var(--muted-foreground); }
.history-card-actions { flex-wrap:wrap; }
.history-status-toolbar { border-block-start:0; padding-block-start:0; }
.history-status-toolbar .history-filters { flex-wrap:wrap; }
.history-card.is-restorable { cursor:pointer; }
.history-card.is-restorable:hover { border-color:var(--primary, #0f766e); box-shadow:0 0 0 1px color-mix(in oklab, var(--primary, #0f766e) 35%, transparent); }
.history-card.is-expiring .history-expiry { color:var(--warning, #b45309); font-weight:650; }
.history-card.is-expired { opacity:.72; }
.history-card.is-expired .history-expiry { color:var(--destructive, #b42318); font-weight:650; }
.history-expiry,
.history-open-hint { display:block; margin-block-start:4px; color:var(--muted-foreground); font-size:.72rem; line-height:1.35; }
.history-credit-meta { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.history-credit-cost.is-refunded { text-decoration:line-through; opacity:.55; }
.history-refund-badge {
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 8px;
  border-radius:999px;
  background:color-mix(in srgb, var(--success, #15803d) 16%, transparent);
  color:var(--success, #15803d);
  font-size:.68rem;
  font-weight:750;
  letter-spacing:.02em;
  white-space:nowrap;
}
.history-refund-note {
  margin:6px 0 0;
  padding:7px 9px;
  border-radius:8px;
  background:color-mix(in srgb, var(--success, #15803d) 10%, transparent);
  color:var(--success, #15803d);
  font-size:.74rem;
  font-weight:650;
  line-height:1.4;
}
.history-card.is-refunded { border-color:color-mix(in srgb, var(--success, #15803d) 28%, var(--border)); }
.history-status.succeeded { color:var(--success, #15803d); }
.history-status.failed,
.history-status.expired,
.history-status.canceled { color:var(--destructive, #b42318); }
.history-status.queued,
.history-status.processing,
.history-status.uploading { color:var(--primary, #0f766e); }


.route-skeleton-admin, .route-skeleton-settings, .route-skeleton-imageai { animation:route-skeleton-in .18s ease-out both; }
@keyframes route-skeleton-in { from { opacity:0; transform:translateY(3px); } }

@media (max-width:768px) {
  .admin-facet-filter { min-inline-size:0; }
  .admin-facet-panel, .admin-view-picker > div { position:fixed; inset-inline:12px; inset-block:auto 12px; inline-size:auto; max-block-size:72vh; overflow:auto; }
  .admin-table-tools { align-items:stretch; }
  .admin-view-picker, .admin-column-picker { flex:1; }
  .image-compare-slider {
    --compare-stage-height:min(42vh,360px);
    min-block-size:220px;
  }
  .imageai-surface .preview-canvas {
    --preview-stage-height:min(42vh,360px);
    min-block-size:200px;
  }
}


.article-breadcrumbs { display:flex; align-items:center; gap:7px; margin-block:18px 4px; color:var(--muted-foreground); font-size:.84rem; min-inline-size:0; }
.article-breadcrumbs a { color:inherit; text-decoration:none; white-space:nowrap; }
.article-breadcrumbs a:hover { color:var(--foreground); }
.article-breadcrumbs span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.article-breadcrumbs .ui-icon { inline-size:14px; block-size:14px; flex:none; opacity:.6; }

/* Round 28: targeted experience infrastructure */
.credit-quick-menu { position:relative; }
.credit-quick-menu > summary { list-style:none; cursor:pointer; }
.credit-quick-menu > summary::-webkit-details-marker { display:none; }
.credit-quick-menu.compact .dashboard-credit-button { min-inline-size:auto; padding-inline:10px; }
.credit-menu-chevron { inline-size:14px; block-size:14px; transition:transform .18s ease; }
.credit-quick-menu[open] .credit-menu-chevron { transform:rotate(180deg); }
.credit-quick-panel { position:absolute; z-index:95; inset-block-start:calc(100% + 9px); inset-inline-end:0; inline-size:min(360px,calc(100vw - 24px)); padding:16px; border:1px solid var(--border); border-radius:var(--ui-radius-lg); background:var(--surface); box-shadow:var(--ui-shadow-popover); transform-origin:top right; }
.credit-quick-panel header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block-end:12px; border-block-end:1px solid var(--border); }
.credit-quick-panel header small,.credit-quick-panel header strong { display:block; }
.credit-quick-panel header strong { margin-block-start:2px; font-size:1.6rem; }
.credit-expiry-note { display:flex; gap:7px; align-items:center; margin:12px 0 0; padding:9px 10px; border-radius:10px; background:var(--muted); color:var(--muted-foreground); font-size:.8rem; }
.credit-quick-transactions h3 { margin:14px 0 8px; font-size:.78rem; color:var(--muted-foreground); text-transform:uppercase; letter-spacing:.06em; }
.credit-quick-transactions > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-block-end:1px solid color-mix(in srgb,var(--border) 65%,transparent); }
.credit-quick-transactions span b,.credit-quick-transactions span small { display:block; }
.credit-quick-transactions span b { max-inline-size:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.84rem; }
.credit-quick-transactions span small,.credit-empty { color:var(--muted-foreground); font-size:.75rem; }
.credit-quick-transactions strong.positive { color:var(--success,#15803d); }
.credit-quick-transactions strong.negative { color:var(--destructive,#b42318); }
.credit-history-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-block-start:14px;
  min-height:44px;
  font-size:.88rem;
  font-weight:700;
}
.credit-history-link .ui-icon { width:16px; height:16px; }
.workspace-view-all {
  display:flex;
  justify-content:center;
  margin-block-start:16px;
}
.workspace-view-all .button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  min-inline-size:min(100%, 280px);
  font-weight:700;
}

.feature-flag-list { display:grid; gap:12px; }
.feature-flag-card { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--border); border-radius:var(--ui-radius-lg); background:var(--surface); }
.feature-flag-card > form:first-child { display:flex; align-items:center; justify-content:space-between; gap:16px; flex:1; }
.feature-flag-card-main { display:flex; align-items:flex-start; gap:12px; min-inline-size:0; }
.feature-flag-icon { display:grid; place-items:center; flex:none; inline-size:38px; block-size:38px; border-radius:11px; background:var(--muted); }
.feature-flag-title { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.feature-flag-card p { margin:5px 0; color:var(--muted-foreground); }
.feature-switch { position:relative; flex:none; }
.feature-switch input { position:absolute; opacity:0; }
.feature-switch span { display:block; inline-size:44px; block-size:24px; border-radius:999px; background:var(--muted-foreground); transition:background .18s ease; }
.feature-switch span::after { content:""; position:absolute; inset-block-start:3px; inset-inline-start:3px; inline-size:18px; block-size:18px; border-radius:50%; background:white; box-shadow:0 1px 4px rgb(0 0 0 / 22%); transition:transform .18s ease; }
.feature-switch input:checked + span { background:var(--primary); }
.feature-switch input:checked + span::after { transform:translateX(20px); }
.feature-switch input:focus-visible + span { outline:3px solid color-mix(in srgb,var(--primary) 30%,transparent); outline-offset:2px; }
.growth-stat-grid { margin-block:18px; }
.growth-dashboard-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:16px; }
.growth-range-form { display:flex; align-items:center; gap:8px; }
.growth-event-list > div { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-block-end:1px solid var(--border); }

[data-microinteractions="true"] .button,[data-microinteractions="true"] button,[data-microinteractions="true"] summary,[data-microinteractions="true"] .product-list-card,[data-microinteractions="true"] .original-feature { transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background-color .16s ease; }
[data-microinteractions="true"] .button:hover,[data-microinteractions="true"] button:hover { transform:translateY(-1px); }
[data-microinteractions="true"] .is-pressed { transform:translateY(1px) scale(.985) !important; }
[data-microinteractions="true"] .product-list-card:hover,[data-microinteractions="true"] .original-feature:hover { transform:translateY(-2px); box-shadow:var(--ui-shadow-card); }
[data-microinteractions="true"] details[open] > .credit-quick-panel,[data-microinteractions="true"] details[open] > .locale-menu-panel,[data-microinteractions="true"] details[open] > .account-menu-panel { animation:experience-pop .16s ease-out both; }
@keyframes experience-pop { from { opacity:0; transform:translateY(-4px) scale(.985); } }
@view-transition { navigation:auto; }
main > section,.admin-panel,.product-list-card { content-visibility:auto; contain-intrinsic-size:auto 480px; }

@media (max-width:760px) {
  .credit-quick-menu.compact { display:none; }
  .credit-quick-panel { position:fixed; inset-inline:12px; inset-block:auto 12px; inline-size:auto; }
  .feature-flag-card,.feature-flag-card > form:first-child { align-items:stretch; }
  .feature-flag-card { flex-direction:column; }
  .growth-dashboard-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-microinteractions="true"] .button:hover,[data-microinteractions="true"] button:hover,[data-microinteractions="true"] .product-list-card:hover,[data-microinteractions="true"] .original-feature:hover { transform:none; }
}

/* Round 28: consent-aware first-party attribution */
.analytics-consent{position:fixed;z-index:1200;right:20px;bottom:20px;display:flex;width:min(720px,calc(100vw - 40px));gap:22px;align-items:center;justify-content:space-between;padding:18px;border:1px solid var(--border);border-radius:18px;background:color-mix(in srgb,var(--background) 94%,transparent);box-shadow:0 18px 55px rgb(20 20 19/.16);backdrop-filter:blur(18px)}
.analytics-consent>div:first-child{display:flex;min-width:0;gap:13px;align-items:flex-start}.analytics-consent-icon{display:grid;width:38px;height:38px;flex:0 0 auto;place-items:center;border-radius:12px;background:var(--muted);color:var(--primary)}.analytics-consent h2{margin:0 0 4px;font-size:.96rem}.analytics-consent p{margin:0;color:var(--muted-foreground);font-size:.78rem;line-height:1.55}.analytics-consent p a{color:inherit;text-decoration:underline;text-underline-offset:3px}.analytics-consent-actions{display:flex;flex:0 0 auto;gap:8px}
@media(max-width:700px){.analytics-consent{right:12px;bottom:calc(74px + env(safe-area-inset-bottom));left:12px;width:auto;align-items:stretch;flex-direction:column;gap:14px}.analytics-consent-actions{display:grid;grid-template-columns:1fr 1fr}.analytics-consent-actions .button{width:100%}}

/* Round 30: complete cookie preference center. */
.cookie-consent-banner{position:fixed;z-index:1250;right:22px;bottom:22px;display:grid;width:min(760px,calc(100vw - 44px));gap:17px;padding:20px;border:1px solid var(--border);border-radius:20px;background:color-mix(in srgb,var(--background) 96%,transparent);box-shadow:0 24px 70px rgb(20 20 19/.2);backdrop-filter:blur(22px)}
.cookie-consent-copy{display:flex;min-width:0;align-items:flex-start;gap:14px}.cookie-consent-icon{display:grid;width:44px;height:44px;flex:0 0 auto;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--primary) 10%,var(--muted));color:var(--primary)}.cookie-consent-copy>div{min-width:0}.cookie-consent-copy .eyebrow{font-size:.54rem}.cookie-consent-copy h2{margin:3px 0 6px;font-size:1.04rem}.cookie-consent-copy p{margin:0;color:var(--muted-foreground);font-size:.75rem;line-height:1.62}.cookie-consent-copy a{display:inline-block;margin-top:7px;color:var(--foreground);font-size:.64rem;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cookie-consent-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.cookie-consent-actions .button{min-height:39px}
.cookie-settings-dialog{width:min(720px,calc(100vw - 36px));max-width:720px;max-height:min(760px,calc(100vh - 36px));padding:0;overflow:auto;border:1px solid var(--border);border-radius:22px;background:var(--background);box-shadow:0 30px 90px rgb(20 20 19/.28)}.cookie-settings-dialog::backdrop{background:rgb(20 20 19/.48);backdrop-filter:blur(4px)}.cookie-settings-dialog>.dialog-close-row{position:absolute;z-index:2;top:13px;right:13px}.cookie-settings-dialog>.dialog-close-row button{display:grid;width:36px;height:36px;place-items:center;border:1px solid var(--border);border-radius:11px;background:var(--surface)}
.cookie-settings-dialog>header{display:flex;align-items:flex-start;gap:13px;padding:22px 58px 19px 22px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--muted) 34%,transparent)}.cookie-settings-heading-icon{display:grid;width:44px;height:44px;flex:0 0 auto;place-items:center;border-radius:14px;background:var(--surface);color:var(--primary);box-shadow:var(--shadow-sm)}.cookie-settings-dialog>header>div{display:grid;gap:3px}.cookie-settings-dialog h2{margin:0;font-size:1.15rem}.cookie-settings-dialog>header p{margin:0;color:var(--muted-foreground);font-size:.68rem}
.cookie-category-list{display:grid;gap:12px;padding:18px 22px}.cookie-category-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:13px;padding:15px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}.cookie-category-card.essential{background:color-mix(in srgb,var(--muted) 34%,var(--surface))}.cookie-category-icon{display:grid;width:38px;height:38px;place-items:center;border-radius:12px;background:var(--muted);color:var(--primary)}.cookie-category-card>div:nth-child(2){min-width:0}.cookie-category-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.cookie-category-title h3{margin:0;font-size:.8rem}.cookie-category-title span{padding:3px 7px;border-radius:999px;background:var(--muted);color:var(--muted-foreground);font-size:.52rem;font-weight:700}.cookie-category-card p{margin:6px 0 0;color:var(--muted-foreground);font-size:.66rem;line-height:1.55}.cookie-category-card .feature-switch{margin-top:5px}
.cookie-settings-dialog>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;border-top:1px solid var(--border);background:color-mix(in srgb,var(--muted) 28%,transparent)}.cookie-settings-dialog>footer>div{display:flex;align-items:center;gap:8px}
.footer-cookie-settings{display:inline-flex!important;align-items:center;gap:6px;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.footer-cookie-settings .ui-icon{width:14px;height:14px}
@media(max-width:700px){.cookie-consent-banner{right:12px;bottom:calc(76px + env(safe-area-inset-bottom));left:12px;width:auto;padding:17px}.cookie-consent-actions{display:grid;grid-template-columns:1fr 1fr}.cookie-consent-actions .button{width:100%}.cookie-consent-actions .button:last-child{grid-column:1/-1}.cookie-settings-dialog{width:calc(100vw - 20px);max-height:calc(100vh - 20px)}.cookie-category-card{grid-template-columns:auto minmax(0,1fr)}.cookie-category-card>.feature-switch{grid-column:2;justify-self:start}.cookie-settings-dialog>footer{align-items:stretch;flex-direction:column}.cookie-settings-dialog>footer>div{display:grid;grid-template-columns:1fr 1fr}.cookie-settings-dialog>footer .button{width:100%}}
@media(max-width:460px){.cookie-consent-copy{gap:10px}.cookie-consent-icon{width:38px;height:38px}.cookie-consent-actions{grid-template-columns:1fr}.cookie-consent-actions .button:last-child{grid-column:auto}.cookie-category-list{padding:14px}.cookie-settings-dialog>header{padding-left:16px}.cookie-settings-dialog>footer{padding:14px}.cookie-settings-dialog>footer>div{grid-template-columns:1fr}}

/* Round 32: compact unavailable-credit state and stable inline contact validation. */
.credit-purchase-unavailable{width:min(100%,820px);margin:20px auto 0}
.credit-purchase-unavailable>article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:15px 17px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 5%,var(--background)),var(--background));box-shadow:var(--shadow-sm)}
.credit-purchase-unavailable-icon{display:grid;width:40px;height:40px;place-items:center;border-radius:12px;background:var(--background);color:var(--primary);box-shadow:0 1px 2px rgb(24 23 21/.05)}
.credit-purchase-unavailable-icon .ui-icon{width:18px;height:18px}
.credit-purchase-unavailable strong{display:block;font-size:.78rem;line-height:1.35}
.credit-purchase-unavailable p{margin:3px 0 0;color:var(--muted-foreground);font-size:.66rem;line-height:1.5}
.credit-purchase-unavailable .button{white-space:nowrap}

.contact-form-panel{align-self:start}
.contact-form-panel .form-grid{align-items:start}
.contact-form-panel .contact-field{position:relative;min-width:0;gap:7px;margin-bottom:14px}
.contact-field-label-row{display:flex;min-height:22px;align-items:center;justify-content:space-between;gap:12px}
.contact-field-label-row label{margin:0}
.contact-character-count{flex:0 0 auto;color:var(--muted-foreground);font-size:.76rem;font-variant-numeric:tabular-nums;transition:color .15s ease}
.contact-character-count.near-limit{color:#9a5c10;font-weight:700}
.contact-form-panel .contact-field input,.contact-form-panel .contact-field textarea{margin:0;border-width:1px;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
.contact-form-panel .contact-field textarea{min-height:190px;resize:vertical}
.contact-field-help{min-height:19px;color:var(--muted-foreground);font-size:.76rem;line-height:1.4}
.contact-field-error{display:flex;min-height:20px;align-items:flex-start;gap:5px;color:var(--danger,#b42318);font-size:.76rem;font-weight:650;line-height:1.4;opacity:0;visibility:hidden}
.contact-field-error:not(:empty){opacity:1;visibility:visible}
.contact-field.has-error input,.contact-field.has-error textarea{border-color:color-mix(in srgb,var(--danger,#b42318) 72%,var(--border));background:color-mix(in srgb,var(--danger,#b42318) 3%,var(--background));box-shadow:0 0 0 3px color-mix(in srgb,var(--danger,#b42318) 10%,transparent)}
.contact-field.has-error .contact-field-help{color:color-mix(in srgb,var(--danger,#b42318) 75%,var(--muted-foreground))}
.contact-field.is-valid input,.contact-field.is-valid textarea{border-color:color-mix(in srgb,var(--accent) 42%,var(--border))}
.contact-form-summary.validation-summary-valid,.contact-form-summary:empty{display:none}
.contact-form-summary.validation-summary-errors{margin:0 0 16px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--danger,#b42318) 24%,var(--border));border-radius:10px;background:color-mix(in srgb,var(--danger,#b42318) 6%,var(--background));font-size:.8rem}
.contact-form-summary ul{margin:0;padding-left:18px}
.contact-form-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:2px;padding-top:15px;border-top:1px solid var(--border)}
.contact-form-actions p{display:flex;align-items:center;gap:7px;margin:0;color:var(--muted-foreground);font-size:.76rem;line-height:1.45}
.contact-form-actions p .ui-icon{width:15px;height:15px;flex:0 0 auto;color:var(--accent)}
.contact-form-actions .button{flex:0 0 auto;min-width:132px}
.contact-form-actions .button:disabled{cursor:not-allowed;opacity:.48;transform:none;box-shadow:none}

@media(max-width:760px){
  .credit-purchase-unavailable>article{grid-template-columns:auto minmax(0,1fr)}
  .credit-purchase-unavailable .button{grid-column:1/-1;width:100%}
  .contact-form-actions{align-items:stretch;flex-direction:column}
  .contact-form-actions .button{width:100%}
}
@media(max-width:560px){
  .contact-form-panel{padding:22px 18px}
  .contact-form-panel .form-grid{grid-template-columns:1fr}
}
.contact-field-error:not(:empty)::before{content:"!";display:grid;width:16px;height:16px;flex:0 0 auto;margin-top:1px;place-items:center;border-radius:999px;background:color-mix(in srgb,var(--danger,#b42318) 12%,transparent);font-size:.65rem;font-weight:900}

/* Round 34 — public trust, FAQ and privacy request pages */
.public-info-page{padding:clamp(4rem,8vw,7rem) 0;background:linear-gradient(180deg,var(--surface,#fff) 0%,var(--surface-subtle,#f7f7f5) 100%)}
.public-info-shell{display:grid;gap:2rem}.public-info-shell.narrow{max-width:820px}
.public-info-hero{max-width:820px}.public-info-hero h1{margin:.55rem 0 .85rem;font-size:clamp(2.3rem,5vw,4.6rem);line-height:1.02;letter-spacing:-.045em}.public-info-hero p{max-width:720px;margin:0;font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.75;color:var(--text-muted,#667085)}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.faq-card{border:1px solid var(--border,#e5e7eb);border-radius:20px;background:var(--surface,#fff);box-shadow:0 12px 32px rgba(15,23,42,.05);overflow:hidden}.faq-card summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 1.25rem;cursor:pointer;font-weight:750;list-style:none}.faq-card summary::-webkit-details-marker{display:none}.faq-card summary .ui-icon{width:18px;height:18px;transition:transform .2s ease}.faq-card[open] summary .ui-icon{transform:rotate(180deg)}.faq-card p{margin:0;padding:0 1.25rem 1.25rem;color:var(--text-muted,#667085);line-height:1.7}
.public-info-cta{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.5rem 1.75rem;border:1px solid var(--border,#e5e7eb);border-radius:22px;background:var(--surface,#fff)}.public-info-cta strong{display:block;font-size:1.1rem}.public-info-cta p{margin:.35rem 0 0;color:var(--text-muted,#667085)}
.trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.trust-grid article{padding:1.4rem;border:1px solid var(--border,#e5e7eb);border-radius:22px;background:var(--surface,#fff);box-shadow:0 12px 32px rgba(15,23,42,.045)}.trust-grid article>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--surface-accent,#f1f5f9)}.trust-grid h2{margin:1rem 0 .55rem;font-size:1.05rem}.trust-grid p{margin:0;color:var(--text-muted,#667085);line-height:1.65}.policy-link-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}.policy-link-grid a{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.1rem;border:1px solid var(--border,#e5e7eb);border-radius:16px;background:var(--surface,#fff);text-decoration:none;color:inherit}.policy-link-grid a:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(15,23,42,.07)}.policy-link-grid span{color:var(--text-muted,#667085);font-size:.9rem}
.public-form-card{display:grid;gap:1.1rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--border,#e5e7eb);border-radius:24px;background:var(--surface,#fff);box-shadow:0 18px 48px rgba(15,23,42,.06)}.public-form-card label{display:grid;gap:.45rem}.public-form-card label>span:first-child{font-weight:700}.public-form-card input,.public-form-card select,.public-form-card textarea{width:100%;min-height:46px;padding:.8rem .9rem;border:1px solid var(--border-strong,#d0d5dd);border-radius:12px;background:var(--surface,#fff);color:inherit}.public-form-card textarea{min-height:150px;resize:vertical}.public-form-card small{color:var(--text-muted,#667085);line-height:1.5}.public-form-card [data-valmsg-for]:not(:empty),.public-form-card .field-validation-error{color:var(--danger,#b42318);font-size:.88rem;font-weight:650}.public-form-actions{display:flex;flex-wrap:wrap;gap:.75rem;padding-top:.25rem}
@media(max-width:900px){.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.policy-link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.faq-grid,.trust-grid,.policy-link-grid{grid-template-columns:1fr}.public-info-cta{align-items:flex-start;flex-direction:column}.public-info-cta .button{width:100%}}

/* Round 34 release-readiness public disclosures */
.company-address-note{margin:1rem 0 0;padding-top:1rem;border-top:1px solid var(--border);color:var(--muted-foreground);font-size:.83rem;line-height:1.55}.contact-item small{display:block;margin-top:.35rem;color:var(--muted-foreground);line-height:1.45}.checkout-unavailable-note{display:block;margin-top:.6rem;color:var(--muted-foreground);font-size:.78rem;line-height:1.45}.public-form-card textarea{resize:vertical;min-height:150px}

/* Round 34: public-form abuse protection and upload responsibility notice */
.public-captcha-row{min-height:0;margin:4px 0 2px}.public-captcha-row:empty{display:none}.public-captcha-row .cf-turnstile{min-height:65px}.imageai-policy-note{margin:10px 0 0;color:var(--muted-foreground);font-size:.68rem;line-height:1.55}.imageai-policy-note a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Round 36: global UI detail pass — responsive, stateful and touch-safe. */
html,body{overflow-x:clip}
html{scroll-padding-top:calc(5rem + env(safe-area-inset-top));text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--color-ink);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:color-mix(in oklch,var(--color-feature) 24%,var(--color-paper));color:var(--color-ink)}
:where(main,section,article,aside,header,footer,nav,form,fieldset,table,.shell)>*{min-width:0}
:where(h1,h2,h3,.hero-title,.public-info-hero h1,.auth-card h1,.workspace-dashboard>h1,.admin-overview-hero h1){min-width:0;overflow-wrap:anywhere;text-wrap:balance;font-style:normal}
:where(p,li,dd,td,th,.help,.hint,.muted,.validation-summary-errors){overflow-wrap:anywhere}
:where(.legal-content,.article-body,.prose,.public-info-shell.narrow){max-width:65ch}
:where(.price,.number,.amount,.count,.metric,.stat,.workspace-stat>strong,.admin-stat strong,table,time,code,kbd){font-variant-numeric:tabular-nums}
:where(img,video,canvas,svg){max-width:100%}
:where(.button):not(.small){min-block-size:44px}
:where(.button,.nav-menu-trigger,.mobile-main-link,.footer-cookie-settings,.ui-segmented>button,.ui-segmented>a,.workspace-mobile-nav a,.workspace-mobile-nav button){max-width:100%;white-space:nowrap}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;box-shadow:none}
:where(a,button,input,select,textarea,summary,[tabindex]):is(:disabled,[aria-disabled="true"]){cursor:not-allowed;opacity:.48}
.button{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-accent-ink);box-shadow:none}
.button.outline,.button.ghost{border-color:var(--color-rule-2);background:var(--color-paper);color:var(--color-ink);box-shadow:none}
.button.secondary{border-color:var(--color-ink);background:var(--color-ink);color:var(--color-paper);box-shadow:none}
.button.danger{border-color:var(--color-danger);background:var(--color-danger);color:var(--color-paper);box-shadow:none}
.button.danger.outline{background:var(--color-paper);color:var(--color-danger)}
.button:is(:disabled,[aria-disabled="true"]){cursor:not-allowed;opacity:.55;transform:none;box-shadow:none}
[aria-busy="true"]{cursor:progress}
:where(button,.button,[role="button"])[aria-busy="true"]{position:relative;pointer-events:none}
[aria-invalid="true"]{border-color:var(--color-danger)!important;background-color:color-mix(in oklch,var(--color-danger-soft) 58%,var(--color-paper))!important;outline-color:color-mix(in oklch,var(--color-danger) 58%,transparent)!important}
:where([data-state="success"],.is-success){border-color:color-mix(in oklch,var(--color-success) 42%,var(--color-rule));background-color:var(--color-success-soft)}
:where(.ui-card,.form-card,.auth-card,.settings-card,.price-card,.product-list-card,.workspace-stat,.workspace-table-card,.recent-job-card,.admin-data-card,.public-form-card,.faq-card,.trust-grid article){border-color:var(--color-rule);box-shadow:var(--shadow-sm)}
:where(.ui-card,.form-card,.auth-card,.settings-card,.price-card,.product-list-card,.workspace-stat,.recent-job-card,.admin-data-card,.public-form-card,.faq-card,.trust-grid article)>:first-child{margin-block-start:0}
:where(.ui-card,.form-card,.auth-card,.settings-card,.price-card,.product-list-card,.workspace-stat,.recent-job-card,.admin-data-card,.public-form-card,.faq-card,.trust-grid article)>:last-child{margin-block-end:0}
.auth-form .field input{min-height:44px;padding-block:9px}
.auth-back-link,.auth-logo{display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.password-toggle{min-width:44px}
.field input,.field select,.field textarea,.auth-form .field input,.public-form-card input,.public-form-card select,.public-form-card textarea{border-width:1px;outline:2px solid transparent;outline-offset:1px;box-shadow:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.auth-form .field input:focus-visible,.public-form-card input:focus-visible,.public-form-card select:focus-visible,.public-form-card textarea:focus-visible{border-color:var(--color-accent);outline-color:var(--color-focus);box-shadow:none}
.field :is(input,select,textarea):disabled,.public-form-card :is(input,select,textarea):disabled{cursor:not-allowed;opacity:.55;background:var(--color-paper-3)}
:where(.field-validation,.field-help,.field-error,[data-valmsg-for]){min-height:1lh}

/* Marketing home: centered brand hero, then Split Diptych product card + staggered capabilities. */
.shell{margin-inline:auto}
.original-hero{padding:var(--space-3xl) 0 calc(var(--space-3xl) + var(--space-lg));text-align:center;background:var(--color-paper-2)}
.original-hero-inner{display:grid;justify-items:center;width:min(1024px,100%);max-width:1024px;margin-inline:auto;column-gap:0}
.original-hero .hero-pill{justify-self:center;border-color:color-mix(in oklch,var(--color-feature) 24%,var(--color-rule));background:var(--color-paper);color:var(--color-accent)}
.original-hero h1{max-width:18ch;margin:var(--space-xl) auto 0;text-wrap:balance}
.original-hero .accent-rule{width:6rem;margin:var(--space-lg) auto 0;background:var(--color-feature)}
.original-hero p{max-width:42rem;margin:var(--space-lg) auto 0;text-wrap:pretty}
.original-hero .center-actions{justify-content:center;flex-wrap:wrap;margin-top:var(--space-xl)}
.original-product-card{width:100%;max-width:none;margin:0}
.original-product-grid,.preview-grid:not([hidden]),.comparison{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.original-product-visual{background:var(--color-ink);color:var(--color-paper)}
.original-product-visual::before{background:radial-gradient(circle at 30% 40%,color-mix(in oklch,var(--color-paper) 10%,transparent),transparent 60%)}
.visual-icon{border-color:color-mix(in oklch,var(--color-paper) 20%,transparent);background:color-mix(in oklch,var(--color-paper) 10%,transparent);box-shadow:var(--shadow-lg)}
.feature-four{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-md)}
.feature-four .original-feature{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon title" "icon copy";column-gap:var(--space-md);align-items:start;padding:var(--space-lg);border-color:var(--color-rule);box-shadow:var(--shadow-sm);transition:border-color var(--dur-micro) var(--ease-out)}
.feature-four .original-feature:nth-child(1),.feature-four .original-feature:nth-child(4){grid-column:span 7}
.feature-four .original-feature:nth-child(2),.feature-four .original-feature:nth-child(3){grid-column:span 5}
.feature-four .feature-icon{grid-area:icon}.feature-four .original-feature h3{grid-area:title;margin:0 0 var(--space-2xs)}.feature-four .original-feature p{grid-area:copy}
.original-feature:hover,.original-product-card:hover{border-color:var(--color-rule);box-shadow:var(--shadow-sm);transform:none}
.reveal.visible,.reveal.visible[data-reveal-direction="left"],.reveal.visible[data-reveal-direction="right"]{transform:none}
.cta-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--space-xl);max-width:100%;padding:var(--space-xl);border:1px solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper);color:var(--color-ink);text-align:left;box-shadow:var(--shadow-sm)}
.cta-panel h2,html[data-skin="claude"] .cta-panel h2{grid-column:1;color:var(--color-ink);font-size:clamp(var(--text-xl),4vw,var(--text-2xl))}.cta-panel p{grid-column:1;max-width:60ch;margin:var(--space-xs) 0 0;color:var(--color-muted)}
.cta-panel .button{grid-column:2;grid-row:1/span 2;align-self:center;margin:0;border-color:var(--color-accent);background:var(--color-accent);color:var(--color-accent-ink);box-shadow:none}
.site-footer{background:var(--color-ink);color:var(--color-paper)}
.site-footer :where(p,a,small,.footer-bottom){color:var(--color-on-dark-muted)}
.site-footer :where(h2,h3,h4,.brand){color:var(--color-paper)}
.site-footer .footer-bottom{border-color:color-mix(in oklch,var(--color-paper) 14%,transparent)}

/* The preference prompt stays readable without obscuring the whole first viewport. */
.cookie-consent-banner{width:min(680px,calc(100vw - var(--space-8)));max-height:calc(100dvh - var(--space-8) - env(safe-area-inset-bottom));gap:var(--space-sm);padding:var(--space-md);border-color:var(--color-rule);border-radius:var(--radius-card);box-shadow:var(--shadow-lg)}
.cookie-consent-copy{gap:var(--space-sm)}.cookie-consent-copy p{font-size:.76rem;line-height:1.55}.cookie-consent-actions .button{min-height:44px}
.cookie-settings-dialog{max-height:min(760px,calc(100dvh - var(--space-lg)));border-color:var(--color-rule)}
.cookie-settings-dialog>.dialog-close-row button{width:44px;height:44px}

@media(hover:hover) and (pointer:fine){
  .button:not(:disabled,[aria-disabled="true"]):hover{border-color:var(--color-accent-hover);background:var(--color-accent-hover);color:var(--color-accent-ink);box-shadow:none;transform:none}
  .button:is(.outline,.ghost):not(:disabled,[aria-disabled="true"]):hover{border-color:var(--color-rule-2);background:var(--color-paper-3);color:var(--color-ink)}
  .button.danger:not(:disabled,[aria-disabled="true"]):hover{border-color:var(--color-danger);background:var(--color-danger);color:var(--color-paper)}
  .button.danger.outline:not(:disabled,[aria-disabled="true"]):hover{background:var(--color-danger-soft);color:var(--color-danger)}
  .cta-panel .button:not(:disabled,[aria-disabled="true"]):hover{border-color:var(--color-accent-hover);background:var(--color-accent-hover);color:var(--color-accent-ink)}
  :where(.icon-button,.nav-menu-trigger,.footer-cookie-settings):not(:disabled,[aria-disabled="true"]):hover{color:var(--color-accent)}
  :where(.policy-link-grid a,.recent-job-card>a,.quick-action-grid a):hover{border-color:var(--color-rule-2);box-shadow:var(--shadow-md);transform:translateY(-1px)}
  :where(tbody tr):hover{background:color-mix(in oklch,var(--color-accent) 3.5%,transparent)}
}

@media(max-width:64rem){
  .feature-four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-four .original-feature:nth-child(n){grid-column:auto}
}

@media(pointer:coarse){
  :where(.button,.icon-button,.nav-toggle,.nav-menu-trigger,.locale-pill,.footer-cookie-settings,summary,[role="button"]){min-block-size:44px}
  :where(.brand,.workspace-brand,.mobile-main-link,.mobile-submenu a,.site-footer a){min-block-size:44px;align-items:center}
  :where(.site-footer a,.footer-cookie-settings){display:inline-flex;padding-block:10px}
  :where(input[type="checkbox"],input[type="radio"]){min-width:22px;min-height:22px}
}

@media(max-width:40rem){
  html{scroll-padding-top:4.5rem}
  :where(button,.button,.icon-button,.nav-toggle,.nav-menu-trigger,.locale-pill,summary,[role="button"]){min-block-size:44px}
  .button.small,.nav-actions .button.small,.ui-segmented>button,.ui-segmented>a{min-height:44px}
  .icon-button,.nav-toggle,.brand{min-width:44px}
  :where(.brand,.workspace-brand,.mobile-main-link,.mobile-submenu a,.site-footer a,.auth-label-row a,.auth-card-footer a){min-block-size:44px;align-items:center}
  :where(.brand,.workspace-brand,.auth-card-footer a,.site-footer a){display:flex}
  :where(.site-footer a,.footer-cookie-settings){padding-block:10px}
  :where(input[type="checkbox"],input[type="radio"]){min-width:22px;min-height:22px}
  .imageai-policy-note a{display:inline-flex;min-height:44px;align-items:center}
  :where(.shell,.workspace-dashboard,.admin-shell,.public-info-shell){min-width:0}
  :where(.marketing-section,.public-info-page){padding-block:clamp(3rem,12vw,4.5rem)}
  :where(.section-heading,.workspace-section-heading,.admin-overview-hero,.public-info-cta){align-items:flex-start;flex-direction:column}
  :where(.section-heading,.workspace-section-heading,.admin-overview-hero,.public-info-cta)>.button{width:100%}
  :where(.faq-grid,.trust-grid,.policy-link-grid,.recent-job-grid,.workspace-stat-grid){grid-template-columns:minmax(0,1fr)}
  .original-hero{padding:var(--space-2xl) 0 calc(var(--space-2xl) + var(--space-lg))}
  .original-hero-inner{width:100%;max-width:none}
  .original-hero h1{max-width:none;margin-top:var(--space-lg)}
  .original-hero .center-actions{justify-content:center;margin-top:var(--space-lg)}
  .original-hero .center-actions .button{width:100%}
  .feature-four{grid-template-columns:minmax(0,1fr)}
  .feature-four .original-feature:nth-child(n){grid-column:auto}
  .cta-panel{grid-template-columns:minmax(0,1fr);padding:var(--space-lg)}
  .cta-panel .button{grid-column:1;grid-row:auto;width:100%;margin-top:var(--space-lg)}
  :where(table){max-width:100%}
  .cookie-consent-banner{right:var(--space-sm);bottom:max(var(--space-sm),env(safe-area-inset-bottom));left:var(--space-sm);width:auto;max-height:calc(100dvh - var(--space-lg) - env(safe-area-inset-bottom));padding:var(--space-sm);overflow:auto;overscroll-behavior:contain}
  .workspace-page-body .cookie-consent-banner{bottom:calc(76px + env(safe-area-inset-bottom));max-height:calc(100dvh - 100px - env(safe-area-inset-bottom))}
  .cookie-consent-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cookie-consent-actions .button{width:100%;min-width:0;padding-inline:10px}
  .cookie-consent-actions .button:last-child{grid-column:1/-1}
  .cookie-settings-dialog{width:calc(100vw - var(--space-5));max-height:calc(100dvh - var(--space-5))}
  .cookie-settings-dialog>header{padding:var(--space-md) 3.5rem var(--space-md) var(--space-md)}
  .cookie-category-list{padding:var(--space-sm)}
  .cookie-settings-dialog>footer{padding:var(--space-sm)}
}

@media(max-width:22rem){
  .cookie-consent-copy{gap:var(--space-xs)}.cookie-consent-icon{width:36px;height:36px;border-radius:var(--radius-sm)}
  .cookie-consent-actions{grid-template-columns:minmax(0,1fr)}
  .cookie-consent-actions .button:last-child{grid-column:auto}
}

/* Shared workspace top bar: page-specific actions (e.g. ImageAI history). */
.dashboard-page-actions{display:flex;align-items:center;gap:8px}
.dashboard-page-actions .button.small{min-height:36px}
.workspace-mode .imageai-tabs{position:sticky;top:64px;z-index:19}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:100ms!important}
  :where(.button,.icon-button,.policy-link-grid a,.recent-job-card>a,.quick-action-grid a):is(:hover,:active){transform:none!important}
}

/* ImageAI tool-state clarity and generative-enhancement disclosure. */
.imageai-surface .result-placeholder {
  position: absolute;
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  padding: 24px;
  background: color-mix(in srgb, var(--background) 92%, transparent);
  color: var(--muted-foreground);
  text-align: center;
  border-radius: inherit;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
}
.imageai-surface .result-placeholder[hidden] { display: none; }
.imageai-surface .result-placeholder .ui-icon { width: 30px; height: 30px; color: var(--primary); }
.imageai-surface .result-placeholder strong { color: var(--foreground); font-size: .82rem; }
.imageai-surface .result-placeholder small { max-width: 250px; font-size: .7rem; line-height: 1.5; }
.imageai-surface .tool-setting-note {
  display: grid;
  gap: 4px;
  margin: 9px 0 0;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius: 11px;
  background: color-mix(in srgb, var(--primary) 6%, var(--background));
  color: var(--muted-foreground);
  font-size: .68rem;
  line-height: 1.5;
}
.imageai-surface .tool-setting-note strong { color: var(--foreground); font-size: .72rem; }
.imageai-surface .preview-mode-switch button:disabled { cursor: not-allowed; opacity: .45; }

/* ImageAI minimal settings */
.imageai-surface .automatic-setting-summary{display:flex;align-items:flex-start;gap:11px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--muted)}
.imageai-surface .automatic-setting-summary>.ui-icon{flex:0 0 auto;width:20px;height:20px;margin-top:1px;color:var(--primary)}
.imageai-surface .automatic-setting-summary span{display:grid;gap:4px}
.imageai-surface .automatic-setting-summary strong{font-size:.78rem}
.imageai-surface .automatic-setting-summary small{color:var(--muted-foreground);font-size:.68rem;line-height:1.5}
.imageai-surface .advanced-setting-disclosure{margin-top:3px;border-top:1px solid var(--border);padding-top:10px}
.imageai-surface .advanced-setting-disclosure summary{cursor:pointer;color:var(--primary);font-size:.72rem;font-weight:650;list-style-position:inside}
.imageai-surface .advanced-setting-options{display:grid;gap:7px;margin-top:9px}


/* ImageAI small-screen polish: keep four preview modes balanced and stack previews on phones. */
@media(max-width:720px){
  .imageai-surface .preview-mode-switch{grid-template-columns:repeat(2,minmax(0,1fr))}
  .imageai-surface .workbench-preview-grid:not([hidden]){grid-template-columns:minmax(0,1fr)}
  .imageai-surface .preview-panel{width:100%}
}


/* SEO-focused use-case pages and verifiable showcase evidence */
.showcase-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; margin-top:1rem; }
.showcase-metrics div { padding:.8rem .9rem; border:1px solid var(--border-subtle,#ddd7cc); border-radius:14px; background:var(--surface-raised,#fff); }
.showcase-metrics dt { color:var(--text-muted,#68645d); font-size:.76rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.showcase-metrics dd { margin:.3rem 0 0; color:var(--text-strong,#1f1d19); font-weight:700; }
.solution-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.solution-card { display:flex; flex-direction:column; min-height:100%; overflow:hidden; border:1px solid var(--border-subtle,#ddd7cc); border-radius:22px; background:var(--surface-raised,#fff); box-shadow:var(--shadow-soft,0 10px 28px rgba(33,28,20,.06)); }
.solution-card-media { display:grid; width:100%; height:clamp(176px,18vw,220px); flex:0 0 auto; overflow:hidden; place-items:center; border-bottom:1px solid var(--border-subtle,#ddd7cc); background:var(--surface-muted,#f4f1ea); }
.solution-card-media img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
.solution-card-copy { display:flex; flex:1; flex-direction:column; gap:.7rem; padding:1.15rem; }
.solution-card-copy h2,.solution-card-copy h3 { margin:0; }
.solution-card-copy p { margin:0; color:var(--text-muted,#68645d); }
.solution-card-copy .text-link { margin-top:auto; }
.solution-card-meta { display:flex; flex-wrap:wrap; gap:.45rem; color:var(--text-muted,#68645d); font-size:.82rem; }
.solution-card-meta span { padding:.25rem .55rem; border-radius:999px; background:var(--surface-muted,#f4f1ea); }
.solution-hero-grid,.solution-detail-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); align-items:center; gap:clamp(1.5rem,4vw,4rem); }
.solution-hero-visual { overflow:hidden; border:1px solid var(--border-subtle,#ddd7cc); border-radius:24px; background:var(--surface-raised,#fff); box-shadow:var(--shadow-soft,0 16px 42px rgba(33,28,20,.08)); }
.solution-hero-visual img { width:100%; aspect-ratio:8/5; object-fit:cover; }
.solution-facts-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.solution-facts-grid article { padding:1.1rem; border:1px solid var(--border-subtle,#ddd7cc); border-radius:18px; background:var(--surface-raised,#fff); }
.solution-facts-grid strong { display:block; margin:.35rem 0; font-size:1.15rem; }
.solution-facts-grid p { margin:0; color:var(--text-muted,#68645d); }
.solution-check-list { display:grid; gap:.8rem; padding:0; list-style:none; }
.solution-check-list li { display:flex; align-items:flex-start; gap:.65rem; }
.solution-check-list .ui-icon { flex:0 0 auto; margin-top:.15rem; }
.solution-step-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; padding:0; list-style:none; }
.solution-step-grid li { padding:1.1rem; border:1px solid var(--border-subtle,#ddd7cc); border-radius:18px; background:var(--surface-raised,#fff); }
.solution-step-grid strong { display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:var(--text-strong,#1f1d19); color:#fff; }
.solution-step-grid p { margin:.75rem 0 0; }
.article-primary-cta { margin:2rem 0; padding:1rem 1.1rem; border:1px solid var(--border-subtle,#ddd7cc); border-radius:18px; background:var(--surface-muted,#f4f1ea); }
.article-primary-cta p { margin:.25rem 0 .75rem; }
.solution-final-cta > .shell { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:clamp(1.4rem,4vw,2.4rem); border-radius:24px; background:var(--text-strong,#1f1d19); color:#fff; }
.solution-final-cta h2,.solution-final-cta p { color:inherit; }
@media (max-width: 900px) {
  .showcase-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .solution-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .solution-hero-grid,.solution-detail-grid { grid-template-columns:1fr; }
  .solution-step-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .showcase-metrics,.solution-card-grid,.solution-facts-grid,.solution-step-grid { grid-template-columns:1fr; }
  .solution-final-cta > .shell { align-items:flex-start; flex-direction:column; }
}