@charset "UTF-8";
/* ==========================================================================
   Ai Tool Factory — Refinement layer
   Loads last. Restyles only: type scale, spacing, borders, radii, shadows.
   Touches no markup, no classes that carry behaviour, no colours outside the
   existing gold / deep-green palette. Nothing here can change what a control
   does — only how it reads.
   ========================================================================== */

/* ---------- 1. Typographic rhythm ---------- */

.mpt-wrap {
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-hair: 1px solid var(--mpt-border);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.mpt-wrap h1,
.mpt-wrap h2,
.mpt-wrap h3,
.mpt-wrap h4 {
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.mpt-wrap p { text-wrap: pretty; }

/* A quieter headline weight reads as considered rather than shouty. */
.mpt-landing .lp-hero-copy h1 { font-weight: 750; letter-spacing: -0.038em; }
.mpt-landing .lp-head h2 { font-weight: 700; }
.mpt-landing .lp-hero-lead,
.mpt-landing .lp-head p { color: var(--mpt-muted); }

/* ---------- 2. Calmer surfaces ---------- */

/* The page had several competing glows; one soft wash reads cleaner. */
.mpt-landing::before { opacity: .62; }

.mpt-landing .lp-tile,
.mpt-landing .lp-demo-card,
.mpt-landing .lp-line-card,
.mpt-landing .lp-plan,
.mpt-landing .lp-faq-item,
.mpt-landing .lp-tool-card,
.mpt-app-wrap .mpt-panel-card,
.mpt-app-wrap .mpt-kpi-card {
  border-radius: var(--r-lg);
  border: var(--r-hair);
  box-shadow: none;
  background: var(--mpt-card);
  transition: border-color .22s ease, transform .22s ease, background .22s ease;
}

.mpt-landing .lp-tile:hover,
.mpt-landing .lp-demo-card:hover,
.mpt-landing .lp-tool-card:hover,
.mpt-app-wrap .mpt-kpi-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--mpt-gold) 42%, transparent);
}

/* Gradient-filled panels flattened to a single surface + hairline. */
.mpt-landing .lp-split,
.mpt-landing .lp-cta {
  background: var(--mpt-card);
  border: var(--r-hair);
  border-radius: var(--r-xl);
}
.mpt-landing .lp-cta::before { opacity: .18; }
.mpt-landing .lp-machine {
  border-radius: var(--r-xl);
  border: var(--r-hair);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.mpt-landing .lp-machine::after { opacity: .14; }
.mpt-landing .lp-gear { opacity: .5; }

/* ---------- 3. Controls ---------- */

.mpt-wrap .mpt-btn,
.mpt-wrap .aptf-btn {
  border-radius: 10px;
  font-weight: 650;
  letter-spacing: -0.005em;
  transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
}
.mpt-wrap .mpt-btn:active,
.mpt-wrap .aptf-btn:active { transform: translateY(1px); }

.mpt-wrap .mpt-btn-gold,
.mpt-wrap .aptf-btn-primary {
  background: var(--mpt-gold) !important;
  color: var(--mpt-on-gold) !important;
  border: 1px solid transparent !important;
  box-shadow: none;
}
.mpt-wrap .mpt-btn-gold:hover,
.mpt-wrap .aptf-btn-primary:hover { filter: brightness(1.06); }

.mpt-wrap .mpt-btn-ghost {
  background: transparent;
  border: 1px solid var(--mpt-border);
  color: var(--mpt-text);
}
.mpt-wrap .mpt-btn-ghost:hover {
  background: transparent;
  border-color: color-mix(in srgb, var(--mpt-gold) 50%, transparent);
  color: var(--mpt-gold);
}

.mpt-wrap input[type="text"],
.mpt-wrap input[type="email"],
.mpt-wrap input[type="search"],
.mpt-wrap input[type="url"],
.mpt-wrap input[type="password"],
.mpt-wrap select,
.mpt-wrap textarea {
  border-radius: var(--r-sm);
  border: var(--r-hair);
  background: var(--mpt-canvas);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.mpt-wrap input:focus,
.mpt-wrap select:focus,
.mpt-wrap textarea:focus {
  outline: none;
  border-color: var(--mpt-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mpt-gold) 16%, transparent);
}

/* ---------- 4. Badges, chips, pills ---------- */

.mpt-landing .lp-stamp,
.mpt-wrap .aptf-badge,
.mpt-wrap .mpt-uniform-tag,
.mpt-landing .lp-foot-badge {
  border-radius: 999px;
  font-weight: 650;
  letter-spacing: .02em;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--mpt-gold) 34%, transparent);
  color: var(--mpt-gold);
}
.mpt-landing .lp-tile-tag { background: transparent; }

/* Icon tiles: flat, hairline, no drop shadow. */
.mpt-landing .lp-tile-ico,
.mpt-landing .lp-machine-ico,
.mpt-landing .lp-vault-ico,
.mpt-app-wrap .mpt-kpi-icon {
  border-radius: 11px;
  box-shadow: none;
}

/* ---------- 5. Pricing ---------- */

.mpt-landing .lp-plan { padding: 30px 26px; }
.mpt-landing .lp-plan--popular {
  background: var(--mpt-card);
  border-color: color-mix(in srgb, var(--mpt-gold) 62%, transparent);
  box-shadow: none;
}
.mpt-landing .lp-plan-price { font-weight: 700; letter-spacing: -0.045em; }
.mpt-landing .lp-plan-badge {
  background: var(--mpt-gold);
  color: var(--mpt-on-gold);
  font-weight: 700;
}

/* ---------- 6. FAQ ---------- */

.mpt-landing .lp-faq-item { border-radius: var(--r-md); }
.mpt-landing .lp-faq-item summary { padding: 17px 20px; font-weight: 600; }
.mpt-landing .lp-faq-item[open] { background: var(--mpt-card); }
.mpt-landing .lp-faq-sign {
  border-radius: 7px;
  border-color: var(--mpt-border);
  color: var(--mpt-muted);
}
.mpt-landing .lp-faq-item[open] .lp-faq-sign {
  background: transparent;
  border-color: color-mix(in srgb, var(--mpt-gold) 45%, transparent);
  color: var(--mpt-gold);
}

/* ---------- 7. Footer ---------- */

.mpt-landing .mpt-site-footer { border-top: var(--r-hair); }
.mpt-landing .mpt-footer-title {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mpt-muted);
}
.mpt-landing .mpt-social-icon { border-radius: 9px; }

/* ---------- 8. App shell ---------- */

.mpt-app-wrap .mpt-app-sidebar {
  background: var(--mpt-canvas);
  border-right: var(--r-hair);
}
.mpt-app-wrap .mpt-app-nav a {
  border-radius: 10px;
  font-weight: 600;
  transition: background .18s ease, color .18s ease;
}
.mpt-app-wrap .mpt-app-nav a.mpt-nav-active {
  background: color-mix(in srgb, var(--mpt-gold) 12%, transparent);
  color: var(--mpt-gold);
  box-shadow: none;
}
.mpt-app-wrap .mpt-nav-label {
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mpt-muted);
}
.mpt-app-wrap .mpt-dash-header {
  border-bottom: var(--r-hair);
  padding-bottom: 20px;
}
.mpt-app-wrap .mpt-dash-greeting { font-weight: 700; letter-spacing: -0.028em; }
.mpt-app-wrap .mpt-dash-sub { color: var(--mpt-muted); }
.mpt-app-wrap .mpt-kpi-card { background: var(--mpt-card); }
.mpt-app-wrap .mpt-kpi-value { font-weight: 750; letter-spacing: -0.04em; }
.mpt-app-wrap .mpt-avatar-chip,
.mpt-app-wrap .mpt-user-avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Tool cards in the library */
.mpt-wrap .mpt-uniform-card {
  border-radius: var(--r-lg);
  border: var(--r-hair);
  background: var(--mpt-card);
  box-shadow: none;
}
.mpt-wrap .mpt-uniform-card:hover {
  border-color: color-mix(in srgb, var(--mpt-gold) 42%, transparent);
  transform: translateY(-2px);
}
.mpt-wrap .mpt-uniform-num {
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--mpt-muted);
}

/* ---------- 9. Creation Lab ---------- */

.lab-bar {
  background: var(--mpt-card);
  border-radius: var(--r-lg);
  border: var(--r-hair);
}
.mpt-ai-subnav,
.mpt-ai-panels {
  border-radius: var(--r-lg);
  border: var(--r-hair);
  background: var(--mpt-card);
}
.mpt-ai-subnav-item.aptf-ai-tab-active {
  background: color-mix(in srgb, var(--mpt-gold) 10%, transparent);
  border-color: color-mix(in srgb, var(--mpt-gold) 38%, transparent);
}
.mpt-ai-subnav-item.aptf-ai-tab-active .lab-step {
  background: var(--mpt-gold);
  color: var(--mpt-on-gold);
}
.aptf-ai-panel > h2::before { width: 28px; height: 2px; background: var(--mpt-gold); }

/* ---------- 10. Light theme parity ---------- */

.mpt-theme-light .lp-machine,
.mpt-theme-light .mpt-uniform-card,
.mpt-theme-light .lp-tile,
.mpt-theme-light .lp-plan,
.mpt-theme-light .mpt-kpi-card,
.mpt-theme-light .mpt-panel-card {
  box-shadow: 0 1px 2px rgba(7, 26, 27, .04);
}
.mpt-theme-light .mpt-app-sidebar { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .mpt-wrap * { transition: none !important; }
}

/* ---------- 11. Dashboard header: keep the controls in the top corner ----------
   .mpt-dash-header is flex-wrap:wrap, so on any view whose subtitle is long
   (My Creations is the worst offender) the search + theme + site + avatar group
   dropped onto a second row. Letting the left column shrink keeps that group
   pinned top-right on every view, exactly as it sits in Creation Lab. */

@media (min-width: 901px) {
  .mpt-app-wrap .mpt-dash-header { flex-wrap: nowrap !important; }
  .mpt-app-wrap .mpt-dash-header-left { flex: 1 1 auto; min-width: 0; }
  .mpt-app-wrap .mpt-dash-header-right {
    flex: 0 0 auto;
    margin-left: auto;
    align-items: center;
  }
  .mpt-app-wrap .mpt-dash-sub {
    display: block;
    max-width: 68ch;
    margin-bottom: 0;
  }
  .mpt-app-wrap .mpt-search-wrap { flex: 0 1 300px; min-width: 190px; }
}

.mpt-app-wrap .mpt-dash-header-right { gap: 10px; }
.mpt-app-wrap .mpt-search-chip--input { border-radius: 999px; padding: 8px 15px; }

/* ---------- 12. My Creations toolbar ---------- */

.mpt-apps-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.mpt-apps-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 320px;
  min-width: 0;
  max-width: 460px;
  padding: 0 16px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--mpt-border);
  background: var(--mpt-canvas);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.mpt-apps-search:focus-within {
  border-color: var(--mpt-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mpt-gold) 16%, transparent);
}
.mpt-apps-search svg {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--mpt-muted);
}
.mpt-apps-search input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--mpt-text);
  font-size: .9rem;
  line-height: 1;
  box-shadow: none;
}
.mpt-apps-search input[type="search"]:focus {
  border: 0;
  box-shadow: none;
}
.mpt-apps-search input::placeholder { color: var(--mpt-muted); opacity: 1; }
.mpt-apps-search input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1); opacity: .6; }

.mpt-apps-toolbar-actions { display: flex; gap: 10px; margin-left: auto; flex: none; }
.mpt-apps-toolbar-actions .mpt-btn { height: 44px; display: inline-flex; align-items: center; }

.mpt-apps-count {
  margin: 0 0 16px;
  font-size: .82rem;
  color: var(--mpt-muted);
}

@media (max-width: 620px) {
  .mpt-apps-search { flex-basis: 100%; max-width: none; }
  .mpt-apps-toolbar-actions { margin-left: 0; width: 100%; }
  .mpt-apps-toolbar-actions .mpt-btn { flex: 1; justify-content: center; }
}