:root {
  --purple: #b56de8;
  --orange: #f49a45;
  --aqua: #63ced7;
  --coral: #ff6666;
  --blue: #4f67e8;
  --yellow: #f2d65c;
  --red: #f83b46;
  --sage: #717a67;
  --cream: #f7efe6;
  --beige: #efdccb;
  --white: #fffdf8;
  --ink: #2f2f2f;
  --line: rgba(107, 82, 56, .15);
  --shadow: 0 18px 55px rgba(118, 84, 45, .10);
  --soft: 0 8px 22px rgba(118, 84, 45, .08);
  --radius: 24px;
}

.tracking-page {
  color: #172033;
}

.tracking-breadcrumb {
  color: #64748b;
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 8px;
  margin: 0 0 14px;
}

.tracking-breadcrumb span:not(:last-child)::after {
  color: #a78bfa;
  content: ">";
  margin-left: 8px;
}

.tracking-title {
  margin-bottom: 18px;
}

.tracking-title h1 {
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: 0;
  margin-bottom: 6px;
}

.tracking-title p {
  color: #64748b;
  max-width: 900px;
}

.tracking-tabs {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
  padding: 6px;
}

.tracking-tabs a {
  border-radius: 12px;
  color: #475569;
  font-size: 14px;
  font-weight: 800;
  padding: 9px 18px;
  text-decoration: none;
}

.tracking-tabs a.active {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  box-shadow: 0 10px 22px rgba(124, 58, 237, .18);
  color: #fff;
}

.tracking-panel {
  display: none;
}

.tracking-panel.active {
  display: block;
}

.tracking-card {
  background: rgba(255, 255, 255, .96);
  border: 1px solid #f0e3d8;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(67, 56, 202, .07);
}

.tracking-hero-card,
.tracking-feature-banner {
  align-items: center;
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
  overflow: hidden;
  padding: 24px;
  position: relative;
}

.tracking-hero-card::after,
.tracking-feature-banner::after {
  background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(251, 146, 60, .12));
  border-radius: 999px;
  content: "";
  height: 160px;
  position: absolute;
  right: -45px;
  top: -55px;
  width: 160px;
}

.tracking-hero-icon,
.tracking-platform-icon {
  align-items: center;
  background: #f5f3ff;
  border-radius: 18px;
  color: #7c3aed;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 900;
  height: 72px;
  justify-content: center;
  width: 72px;
}

.tracking-platform-icon.google {
  background: #fff7ed;
  color: #f97316;
}

.tracking-platform-icon.analytics {
  background: #ecfeff;
  color: #0f766e;
}

.tracking-platform-icon.tiktok {
  background: #fff1f2;
  color: #e11d48;
}

.tracking-platform-icon.compact {
  border-radius: 12px;
  font-size: 16px;
  height: 40px;
  width: 40px;
}

.tracking-overview-grid,
.tracking-form-layout {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) 340px;
}

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

.tracking-platform-card {
  display: grid;
  gap: 14px;
  min-height: 230px;
  padding: 24px;
}

.tracking-platform-card h3,
.tracking-card h2,
.tracking-card h3 {
  letter-spacing: 0;
  margin-top: 0;
}

.tracking-platform-card p,
.tracking-card p,
.tracking-card small {
  color: #64748b;
}

.tracking-platform-actions,
.tracking-form-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-top: auto;
}

.tracking-status {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  padding: 7px 12px;
}

.tracking-status-success {
  background: #dcfce7;
  color: #15803d;
}

.tracking-status-warning {
  background: #ffedd5;
  color: #c2410c;
}

.tracking-status-muted {
  background: #f3f4f6;
  color: #475569;
}

.tracking-status-summary,
.tracking-guide-card,
.tracking-form-card {
  padding: 22px;
}

.tracking-card-head {
  margin-bottom: 16px;
}

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

.tracking-summary-item {
  align-items: center;
  border: 1px solid #f1f5f9;
  border-radius: 14px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr auto;
  padding: 12px;
}

.tracking-summary-item small {
  display: block;
  margin-top: 2px;
}

.tracking-dot {
  border-radius: 999px;
  height: 10px;
  width: 10px;
}

.tracking-dot-success {
  background: #22c55e;
}

.tracking-dot-warning {
  background: #f97316;
}

.tracking-dot-muted {
  background: #cbd5e1;
}

.tracking-side-stack {
  display: grid;
  gap: 14px;
}

.tracking-step {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: 30px 1fr;
  margin-top: 14px;
}

.tracking-step span {
  align-items: center;
  background: #7c3aed;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 900;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.tracking-step p {
  margin: 3px 0 0;
}

.tracking-tip-card {
  background: linear-gradient(135deg, #fff, #fff7ed);
}

.tracking-form-card h3 + .tracking-form-rows,
.tracking-form-card h3 + .tracking-event-grid {
  margin-top: 12px;
}

.tracking-form-rows {
  display: grid;
  gap: 12px;
}

.tracking-form-rows label,
.tracking-form-card label {
  color: #253047;
  font-weight: 800;
}

.tracking-form-rows label small {
  display: block;
  font-weight: 600;
  margin: 3px 0 8px;
}

.tracking-form-rows input:not([type="checkbox"]),
.tracking-form-rows select {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-top: 8px;
  padding: 12px 14px;
  width: 100%;
}

.tracking-toggle-row {
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 12px 0;
}

.tracking-toggle-row input[type="checkbox"] {
  accent-color: #7c3aed;
  height: 22px;
  width: 22px;
}

.tracking-inline-options {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tracking-event-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 20px;
}

.tracking-event-grid label {
  align-items: center;
  background: #faf5ff;
  border: 1px solid #ddd6fe;
  border-radius: 12px;
  color: #6d28d9;
  display: inline-flex;
  gap: 8px;
  margin: 0;
  padding: 10px 13px;
}

.tracking-event-grid input {
  accent-color: #7c3aed;
}

.tracking-guide-card code {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  color: #1f2937;
  display: block;
  font-weight: 900;
  margin: 8px 0;
  padding: 12px;
}

.tracking-form-actions .pill[disabled] {
  cursor: not-allowed;
  opacity: .62;
}

@media (max-width: 1180px) {
  .tracking-overview-grid,
  .tracking-form-layout {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 760px) {
  .tracking-tabs {
    display: flex;
    width: 100%;
  }

  .tracking-tabs a {
    flex: 1 1 150px;
    text-align: center;
  }

  .tracking-platform-grid,
  .tracking-summary-grid,
  .tracking-inline-options {
    grid-template-columns: 1fr;
  }

  .tracking-hero-card,
  .tracking-feature-banner {
    align-items: flex-start;
    flex-direction: column;
  }
}

.tracking-settings-title {
  margin-bottom: 16px;
}

.tracking-settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.tracking-settings-tabs a {
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  color: #374151;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  text-decoration: none;
}

.tracking-settings-tabs a.active {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

.tracking-settings-panel {
  display: none;
}

.tracking-settings-panel.active {
  display: block;
}

.tracking-overview-hero,
.tracking-settings-card,
.tracking-settings-note {
  background: #fff;
  border: 1px solid #f1e4d9;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.06);
}

.tracking-overview-hero {
  margin-bottom: 18px;
  padding: 24px;
}

.tracking-overview-hero h2,
.tracking-settings-card h2 {
  margin-top: 0;
}

.tracking-overview-hero p,
.tracking-platform-card p,
.tracking-settings-card p {
  color: #64748b;
}

.tracking-platform-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.tracking-platform-card {
  align-items: flex-start;
  background: #fff;
  border: 1px solid #ede9fe;
  border-radius: 16px;
  display: grid;
  gap: 12px;
  min-height: 220px;
  padding: 22px;
}

.tracking-platform-number {
  align-items: center;
  background: #f5f3ff;
  border-radius: 14px;
  color: #7c3aed;
  display: inline-flex;
  font-weight: 800;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.tracking-status {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-self: flex-start;
  padding: 6px 12px;
}

.tracking-status-success {
  background: #dcfce7;
  color: #15803d;
}

.tracking-status-warning {
  background: #ffedd5;
  color: #c2410c;
}

.tracking-status-muted {
  background: #f3f4f6;
  color: #4b5563;
}

.tracking-settings-note {
  color: #92400e;
  margin-top: 18px;
  padding: 16px 18px;
}

.tracking-settings-card {
  padding: 22px;
}

.tracking-settings-form {
  margin: 0;
}

.tracking-event-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.tracking-event-grid .checkline {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 12px;
  margin: 0;
  padding: 10px 12px;
}

/* Homepage final scoped overrides: keep later legacy responsive rules from shrinking the new mockup layout. */
.page-shell.fk-home-polished > .fk-home-hero,
.page-shell.fk-home-polished > .fk-home-po-grid,
.page-shell.fk-home-polished > .fk-home-group-cta,
.page-shell.fk-home-polished > .fk-home-series-grid,
.page-shell.fk-home-polished > .fk-section-head,
.page-shell.fk-home-polished > .fk-product-grid,
.page-shell.fk-home-polished > .fk-home-reason-grid,
.page-shell.fk-home-polished > .fk-home-production,
.page-shell.fk-home-polished > .fk-home-instagram {
  max-width: var(--home-max);
}

.fk-home-polished .product-card,
.fk-home-polished .product-card a,
.fk-home-polished .product-card small,
.fk-home-polished .product-card h3,
.fk-home-polished .product-card p,
.fk-home-polished .product-card .outline-btn {
  display: revert;
}

.fk-home-polished .product-card a {
  display: block;
}

.fk-home-polished .product-card .outline-btn {
  display: inline-flex;
}

@media (max-width: 820px) {
  .fk-home-polished .product-card {
    border: 1px solid var(--home-line);
    background: #fffdf9;
    box-shadow: 0 12px 28px rgba(114,82,50,.08);
  }
  .fk-home-polished .product-card a {
    padding: 12px;
  }
  .fk-home-polished .product-card small {
    display: inline-flex;
  }
  .fk-home-polished .product-card p {
    display: block;
  }
}

/* Frontend 2026 redesign pages */
.page-shell.fk-page{width:100%;margin:0;border:0;border-radius:0;box-shadow:none;background:radial-gradient(circle at 4% 12%,rgba(255,197,64,.18),transparent 18%),radial-gradient(circle at 96% 18%,rgba(99,206,215,.16),transparent 22%),linear-gradient(180deg,#fffaf3 0%,#f8efe4 100%);overflow:hidden}
.fk-page .site-header{padding-left:max(24px,calc((100% - 1240px)/2));padding-right:max(24px,calc((100% - 1240px)/2));border-bottom:1px solid rgba(107,82,56,.12);background:rgba(255,253,248,.95)}
.fk-page .brand img{width:168px}.fk-page .desktop-nav{gap:34px}.fk-page .footer{margin-top:56px;padding-left:max(24px,calc((100% - 1240px)/2));padding-right:max(24px,calc((100% - 1240px)/2));border-top:1px solid rgba(107,82,56,.12);background:rgba(255,250,243,.92)}
.fk-hero,.fk-po-grid,.fk-wide-cta,.fk-series-favorites,.fk-section-head,.fk-product-grid,.fk-reason-grid,.fk-production,.fk-instagram,.fk-series-showcase,.fk-stat-row,.fk-testimonial-grid,.fk-featured-testimonial,.fk-value-grid,.fk-story-card,.fk-contact-grid,.fk-fast-contact,.fk-faq{width:min(1240px,calc(100% - 48px));margin-left:auto;margin-right:auto}
.fk-hero{position:relative;min-height:410px;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:36px;padding:56px 64px;margin-top:24px;border:1px solid rgba(239,220,203,.85);border-radius:28px;background:linear-gradient(110deg,#fffdf8 0%,#fff4e7 50%,#fff0d6 100%);box-shadow:0 20px 65px rgba(118,84,45,.08)}
.fk-hero h1{max-width:560px;margin:18px 0 14px;font-size:clamp(42px,5vw,66px);line-height:1.06;font-weight:950;letter-spacing:0}.fk-hero h1 span{color:#ff5b17}.fk-hero p{max-width:520px;color:#3f3a36;font-weight:800}
.fk-badge,.fk-breadcrumb{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:9px 16px;border-radius:999px;color:#ff5b17;background:#fff;border:1px solid rgba(244,154,69,.28);font-weight:950;box-shadow:0 8px 18px rgba(118,84,45,.05)}
.fk-badge::before,.fk-badge::after{content:"\2764";color:#ff6666;font-size:13px}.fk-hero-image{width:100%;max-height:330px;object-fit:contain;filter:drop-shadow(0 24px 22px rgba(118,84,45,.15))}
.fk-slider-arrow{position:absolute;left:24px;top:50%;width:42px;height:42px;min-height:42px;padding:0;border-radius:50%;background:#fff;color:#333;border:1px solid var(--line);box-shadow:var(--soft)}.fk-slider-arrow.right{left:auto;right:24px}
.fk-feature-row{display:flex;flex-wrap:wrap;gap:24px;margin-top:22px;font-size:13px;font-weight:950}.fk-feature-row span::before{content:"\2726 ";color:#111}
.fk-po-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:46px}.fk-po-card{min-height:220px;display:grid;grid-template-columns:1fr 190px;align-items:center;gap:20px;padding:28px;border-radius:22px;border:1px solid rgba(239,220,203,.9);background:#fffdf8;box-shadow:var(--soft);overflow:hidden}.fk-po-card.purple{background:linear-gradient(135deg,#fff,#f2e9ff)}.fk-po-card.orange{background:linear-gradient(135deg,#fff,#fff0df)}.fk-po-card span{color:#7d43df;font-size:22px;font-weight:950}.fk-po-card.orange span{color:#ff5b17}.fk-po-card small{display:inline-flex;margin-left:10px;padding:4px 10px;border-radius:999px;background:#f3edff;color:#7d43df;font-weight:900}.fk-po-card h2{margin:10px 0;font-size:25px}.fk-po-card img{max-height:170px;object-fit:contain;justify-self:end}
.fk-wide-cta{margin-top:22px;padding:22px 34px;min-height:132px;display:grid;grid-template-columns:160px 1fr auto;gap:24px;align-items:center;border:1px solid rgba(239,220,203,.9);border-radius:22px;background:linear-gradient(110deg,#fff7eb,#fffdf8);box-shadow:var(--soft)}.fk-wide-cta img{max-height:120px;object-fit:contain}.fk-wide-cta h2{margin:0 0 6px}.fk-wide-cta p{margin:0;color:#564a42;font-weight:800}
.fk-section-title{text-align:center;margin-top:34px;margin-bottom:16px}.fk-section-title h2,.fk-production h2,.fk-instagram h2,.fk-fast-contact h2,.fk-faq h2{margin:0;font-size:30px;font-weight:950}
.fk-series-favorites{display:grid;grid-template-columns:1fr 1fr;gap:22px}.fk-series-mini{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:18px;padding:24px;border-radius:22px;border:1px solid rgba(239,220,203,.9);background:#fffdf8;box-shadow:var(--soft)}.fk-series-mini h3{margin:0;font-size:26px}.fk-series-mini.purple h3{color:#7d43df}.fk-series-mini.coral h3{color:#ff536e}.fk-series-mini p{color:#564a42;font-weight:800}.fk-series-mini img{max-height:180px;object-fit:contain;justify-self:end}
.fk-section-head{padding:34px 0 14px}.fk-product-grid.product-grid{grid-template-columns:repeat(6,minmax(0,1fr));padding:0;gap:18px}.fk-page .product-card{border-radius:18px;background:#fffdf8}.fk-page .product-card h3{font-size:16px}.fk-page .product-card p{font-size:12px}.fk-page .price{color:#ff5b17;font-size:16px}
.fk-reason-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}.fk-reason-grid.four{grid-template-columns:repeat(4,1fr)}.fk-reason-grid article{min-height:150px;padding:22px 16px;text-align:center;border-radius:22px;background:#fffdf8;border:1px solid rgba(239,220,203,.9);box-shadow:var(--soft)}.fk-reason-grid span{width:54px;height:54px;margin:0 auto 12px;display:grid;place-items:center;border-radius:50%;color:#7d43df;background:#f3edff;font-weight:950}.fk-reason-grid b{display:block;margin-bottom:6px}.fk-reason-grid p{margin:0;color:#5d5149;font-size:13px;font-weight:800}
.fk-production{margin-top:42px;text-align:center}.fk-production-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:18px}.fk-production figure,.fk-testimonial-preview{margin:0;padding:12px;border-radius:18px;background:#fffdf8;border:1px solid rgba(239,220,203,.9);box-shadow:var(--soft)}.fk-production figure img{width:100%;aspect-ratio:1.25;object-fit:cover;border-radius:13px}.fk-production figcaption{margin-top:8px;font-size:12px;font-weight:850}.fk-testimonial-preview{text-align:left}
.fk-instagram{margin-top:44px;padding:34px;text-align:center;border-radius:28px;background:linear-gradient(110deg,#fbecff,#fff7ef);border:1px solid rgba(239,220,203,.9)}.fk-instagram-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin:22px 0}.fk-instagram-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;background:#fff}
.fk-sub-hero,.fk-contact-hero{min-height:360px;margin-top:0;border-radius:0;border-left:0;border-right:0;width:100%;padding-left:max(48px,calc((100% - 1240px)/2));padding-right:max(48px,calc((100% - 1240px)/2))}
.fk-series-showcase{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:-24px;position:relative;z-index:2}.fk-series-feature{padding:22px;border-radius:24px;border:1px solid rgba(239,220,203,.9);box-shadow:var(--soft);background:linear-gradient(150deg,#fffdf8,#f6edff)}.fk-series-feature.coral{background:linear-gradient(150deg,#fffdf8,#fff0f3)}.fk-series-feature>img{width:100%;height:230px;object-fit:contain;border-radius:18px;background:#fff6ef}.fk-series-feature h2{font-size:32px;margin:12px 0 8px}.fk-series-feature.purple h2{color:#7d43df}.fk-series-feature.coral h2{color:#ff536e}.fk-round-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#f3edff;color:#7d43df;font-weight:950}
.fk-filter-tabs{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:0 auto 22px}.fk-filter-tabs a{padding:11px 20px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:950}.fk-filter-tabs a.active{background:linear-gradient(180deg,#b56de8,#7d43df);color:#fff}
.fk-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:30px}.fk-stat-row article{padding:26px;border-radius:22px;background:#fffdf8;border:1px solid rgba(239,220,203,.9);box-shadow:var(--soft)}.fk-stat-row span{color:#ff8a00;font-size:28px;font-weight:950}.fk-stat-row b{display:block;margin:6px 0;font-size:26px}.fk-testimonial-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.fk-section-head.compact{padding:36px 0 16px}.fk-testimonial-card{padding:26px;min-height:240px;border-radius:22px;border:1px solid rgba(239,220,203,.9);background:linear-gradient(145deg,#fffdf8,#fff4e8);box-shadow:var(--soft)}.fk-testimonial-card:nth-child(2n){background:linear-gradient(145deg,#fffdf8,#f4efff)}.stars{color:#ff9f1c;letter-spacing:2px}.fk-testimonial-card div{display:grid;grid-template-columns:48px 1fr;column-gap:12px;align-items:center;margin-top:18px}.fk-testimonial-card img{width:48px;height:48px;object-fit:cover;border-radius:50%;grid-row:span 2}
.fk-featured-testimonial{display:grid;grid-template-columns:350px 1fr;gap:34px;align-items:center;margin-top:42px;padding:34px;border-radius:24px;background:#fff7ef;border:1px solid rgba(239,220,203,.9);box-shadow:var(--soft)}.fk-featured-testimonial img{width:100%;aspect-ratio:1.2;object-fit:contain;border-radius:18px;background:#fff}.fk-featured-testimonial p{font-size:22px;line-height:1.65;font-weight:850}
.fk-story-card{margin-top:28px;padding:44px 70px;text-align:center;border-radius:28px;background:rgba(255,253,248,.92);border:1px solid rgba(239,220,203,.9);box-shadow:var(--soft)}.fk-story-card p{max-width:860px;margin-left:auto;margin-right:auto;font-weight:800;color:#4b423c}.fk-value-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}.fk-value-grid article{display:grid;grid-template-columns:130px 1fr;gap:22px;align-items:center;padding:28px;border-radius:24px;border:1px solid rgba(239,220,203,.9);background:#fffdf8;box-shadow:var(--soft)}.fk-value-grid article>span{width:104px;height:104px;border-radius:50%;background:#f3edff}.fk-value-grid article.coral>span{background:#ffe6ea}
.fk-contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;margin-top:-48px;position:relative;z-index:2}.fk-help-card,.fk-contact-form,.fk-fast-contact,.fk-faq{padding:30px;border-radius:24px;border:1px solid rgba(239,220,203,.9);background:rgba(255,253,248,.96);box-shadow:var(--soft)}.fk-whatsapp-big{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-radius:18px;color:#fff;background:linear-gradient(90deg,#10b95a,#0ed09a);font-weight:950}.fk-whatsapp-big b{font-size:25px}.fk-contact-list{display:grid;gap:10px;margin:16px 0 22px}.fk-contact-list a,.fk-contact-list p{display:flex;justify-content:space-between;gap:14px;margin:0;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:#fff}.fk-topic-row{display:flex;gap:10px;flex-wrap:wrap}.fk-topic-row span{padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:#fff;font-weight:900}.fk-contact-form h2,.fk-help-card h2{margin:0 0 4px;color:#3d1d6b}.fk-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.fk-contact-form label{display:grid;gap:7px;font-weight:900;margin-bottom:14px}.fk-contact-form input,.fk-contact-form select,.fk-contact-form textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:#fff}.fk-contact-form textarea{min-height:122px;resize:vertical}.fk-fast-contact{margin-top:24px;text-align:center}.fk-fast-contact>div{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}.fk-fast-contact article{padding:20px;border-radius:18px;background:linear-gradient(135deg,#eafaf2,#fff);text-align:left}.fk-faq{margin-top:24px}.fk-faq>div{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}.fk-faq details{border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:#fff}.fk-faq summary{cursor:pointer;font-weight:950}
@media(max-width:1100px){.fk-product-grid.product-grid{grid-template-columns:repeat(3,1fr)}.fk-reason-grid{grid-template-columns:repeat(3,1fr)}.fk-production-grid{grid-template-columns:repeat(2,1fr)}.fk-testimonial-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.fk-page .site-header{padding-left:18px;padding-right:18px}.fk-hero,.fk-sub-hero,.fk-contact-hero{grid-template-columns:1fr;padding:34px 24px;width:min(100% - 24px,1240px);border-radius:24px}.fk-hero h1{font-size:38px}.fk-slider-arrow{display:none}.fk-po-grid,.fk-series-favorites,.fk-series-showcase,.fk-stat-row,.fk-value-grid,.fk-contact-grid,.fk-featured-testimonial{grid-template-columns:1fr;width:calc(100% - 24px)}.fk-wide-cta{grid-template-columns:1fr;text-align:center;width:calc(100% - 24px)}.fk-wide-cta img{margin:0 auto}.fk-product-grid.product-grid,.fk-testimonial-grid,.fk-reason-grid,.fk-reason-grid.four,.fk-fast-contact>div,.fk-faq>div{grid-template-columns:1fr}.fk-series-mini,.fk-po-card,.fk-value-grid article{grid-template-columns:1fr}.fk-form-grid{grid-template-columns:1fr}.fk-instagram-grid{grid-template-columns:repeat(2,1fr)}.fk-story-card{width:calc(100% - 24px);padding:30px 22px}}

/* Homepage polished pass */
.fk-home-polished{--home-max:1280px;--home-line:rgba(226,205,184,.82);--home-shadow:0 20px 54px rgba(114,82,50,.1)}
.fk-home-polished .site-header{min-height:86px}
.fk-home-hero,.fk-home-po-grid,.fk-home-group-cta,.fk-home-series-grid,.fk-home-polished .fk-section-head,.fk-home-polished .fk-product-grid,.fk-home-reason-grid,.fk-home-production,.fk-home-instagram{width:min(var(--home-max),calc(100% - 72px));margin-left:auto;margin-right:auto}
.fk-home-hero{position:relative;min-height:440px;margin-top:26px;padding:58px 74px;display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:34px;border:1px solid var(--home-line);border-radius:34px;background:radial-gradient(circle at 78% 86%,rgba(52,203,202,.22),transparent 13%),radial-gradient(circle at 95% 12%,rgba(255,188,44,.36),transparent 12%),linear-gradient(112deg,#fffdf9 0%,#fff4e7 58%,#fff9ef 100%);box-shadow:var(--home-shadow);overflow:hidden}
.fk-home-hero.content-right .fk-home-hero-copy{order:2}.fk-home-hero.content-right .fk-home-hero-media{order:1}
.fk-home-hero:before,.fk-home-hero:after{content:"";position:absolute;border-radius:45% 55% 52% 48%;pointer-events:none}.fk-home-hero:before{width:70px;height:60px;right:58px;top:38px;background:#ffc43d}.fk-home-hero:after{width:68px;height:52px;right:170px;bottom:46px;background:#28c5c7;box-shadow:-420px -140px 0 -24px #8d55e8,-320px -36px 0 -42px #ff596c}
.fk-home-hero-copy{position:relative;z-index:2}.fk-home-hero-copy h1{max-width:520px;margin:16px 0 14px;color:#262323;font-size:clamp(42px,4.2vw,64px);line-height:1.06;font-weight:950;letter-spacing:0}.fk-home-hero-copy h1 span{display:inline;color:#ff5b17}.fk-home-hero-copy p{max-width:500px;margin:0;color:#4d453f;font-size:16px;line-height:1.75;font-weight:850}
.fk-home-hero .button-row{margin-top:24px}.fk-home-hero .pill{min-height:46px;padding:13px 22px}.fk-home-hero-media{position:relative;z-index:1;display:grid;place-items:center}.fk-home-hero-media img{width:min(100%,610px);max-height:360px;object-fit:contain;filter:drop-shadow(0 26px 24px rgba(116,78,42,.18))}
.fk-home-polished .fk-slider-arrow{left:22px;z-index:3;width:42px;height:42px;background:#fff}.fk-home-polished .fk-slider-arrow.right{right:22px;left:auto}.fk-slider-arrow.ghost{display:grid;place-items:center;opacity:.9}
.fk-hero-dots{position:absolute;left:50%;bottom:28px;display:flex;gap:8px;transform:translateX(-50%)}.fk-hero-dots span{width:8px;height:8px;border-radius:50%;background:#e5d9cd}.fk-hero-dots span.active{background:#ff6a1a}
.fk-home-po-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}.fk-home-po-card{position:relative;min-height:226px;padding:30px;display:grid;grid-template-columns:1fr 210px;gap:22px;align-items:center;overflow:hidden;border:1px solid var(--home-line);border-radius:26px;background:#fff;box-shadow:var(--home-shadow)}.fk-home-po-card.purple{background:radial-gradient(circle at 84% 65%,rgba(137,92,232,.14),transparent 26%),linear-gradient(135deg,#fff,#f5edff)}.fk-home-po-card.orange{background:radial-gradient(circle at 84% 82%,rgba(255,192,45,.22),transparent 24%),linear-gradient(135deg,#fff,#fff2e4)}.fk-po-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.fk-po-title-row span{font-size:22px;font-weight:950;color:#7d43df}.fk-home-po-card.orange .fk-po-title-row span{color:#ff5b17}.fk-po-title-row small{padding:5px 11px;border-radius:999px;background:#efe6ff;color:#7d43df;font-size:12px;font-weight:950}.fk-home-po-card.orange small{background:#ffe7d9;color:#ff5b17}.fk-home-po-card h2{margin:12px 0 14px;font-size:24px;line-height:1.25}.fk-home-po-card p{margin:0 0 10px;color:#4f443c;font-weight:800}.fk-home-po-card .fk-po-note{font-size:13px}.fk-home-po-card img{position:relative;z-index:1;width:100%;max-height:180px;object-fit:contain;justify-self:end}
.fk-home-group-cta{margin-top:24px;min-height:140px;padding:18px 36px;display:grid;grid-template-columns:190px 1fr auto;align-items:center;gap:30px;border:1px solid var(--home-line);border-radius:26px;background:linear-gradient(108deg,#fff8ec,#fffdf8);box-shadow:var(--home-shadow)}.fk-group-visual{position:relative;width:190px}.fk-group-illustration{height:132px;width:180px;object-fit:contain}.fk-group-wa-icon{position:absolute;right:2px;top:12px;width:52px;height:52px;border-radius:50%;object-fit:contain;background:#fff;box-shadow:0 10px 24px rgba(42,112,52,.18)}.fk-home-group-cta h2{margin:0 0 8px;font-size:24px}.fk-home-group-cta p{max-width:620px;margin:0;color:#4f453e;font-weight:800;line-height:1.55}.fk-group-action{display:grid;gap:10px;justify-items:end}.fk-group-action small{color:#6c5c50;font-weight:800}.fk-group-members{display:flex;align-items:center;gap:8px;justify-content:flex-end}.fk-group-members img{width:26px;height:26px;margin-left:-8px;border:2px solid #fff;border-radius:50%;object-fit:cover}.fk-group-members b{color:#1f1a28;font-size:13px}
.fk-home-polished .fk-section-title{margin-top:40px;margin-bottom:18px}.fk-home-polished .fk-section-title h2{font-size:28px}.fk-home-polished .fk-section-title span,.fk-home-polished .fk-section-head span,.fk-home-production h2 span{color:#ff465f}
.fk-home-series-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.fk-home-series-card{min-height:230px;padding:30px;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:18px;border:1px solid var(--home-line);border-radius:26px;box-shadow:var(--home-shadow);overflow:hidden}.fk-home-series-card.purple{background:linear-gradient(135deg,#fff9f1,#f2e8ff)}.fk-home-series-card.coral{background:linear-gradient(135deg,#fff9f1,#fff0f2)}.fk-home-series-card h3{margin:0 0 10px;font-size:28px}.fk-home-series-card.purple h3{color:#7d43df}.fk-home-series-card.coral h3{color:#ff4f6c}.fk-home-series-card p{margin:0 0 18px;color:#4f453e;font-weight:800;line-height:1.58}.fk-home-series-card img{width:100%;height:185px;object-fit:contain;justify-self:end}
.fk-home-polished .fk-section-head{padding:42px 0 18px}.fk-home-polished .fk-section-head h2{font-size:28px}.fk-home-polished .fk-section-head a{color:#7d43df;font-weight:950}
.fk-home-product-grid.product-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}.fk-home-polished .product-card{min-height:318px;border:1px solid var(--home-line);border-radius:20px;background:#fffdf9;box-shadow:0 14px 34px rgba(114,82,50,.08);overflow:hidden}.fk-home-polished .product-card a{padding:14px}.fk-home-polished .product-card img{height:148px;border-radius:15px;background:#fff4e8;object-fit:contain}.fk-home-polished .product-card small{margin-top:10px;color:#895ce8;font-size:11px;font-weight:950}.fk-home-polished .product-card h3{min-height:36px;margin:4px 0;font-size:15px;line-height:1.25}.fk-home-polished .product-card p{min-height:42px;font-size:12px;line-height:1.38}.fk-home-polished .outline-btn{min-height:34px;margin-top:10px;border-color:#9d65ee;color:#7d43df;background:#fff}
.fk-home-reason-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}.fk-home-reason-grid article{min-height:154px;padding:22px 14px;text-align:center;border:1px solid var(--home-line);border-radius:24px;background:#fffdf9;box-shadow:0 14px 34px rgba(114,82,50,.08)}.fk-home-reason-grid span{width:62px;height:62px;margin:0 auto 12px;display:grid;place-items:center;border-radius:50%;background:var(--icon-bg,#7d43df);color:#fff;font-size:26px;font-weight:950;box-shadow:0 10px 22px color-mix(in srgb,var(--icon-bg,#7d43df) 35%,transparent)}.fk-home-reason-grid span img{width:36px;height:36px;object-fit:contain}.fk-home-reason-grid b{display:block;margin-bottom:7px;font-size:14px}.fk-home-reason-grid p{margin:0;color:#574d45;font-size:12px;font-weight:800;line-height:1.35}
.fk-home-production{margin-top:48px;text-align:center}.fk-home-production h2{margin:0;font-size:28px}.fk-home-production>p{max-width:660px;margin:10px auto 20px;color:#584c44;font-weight:800}.fk-home-production-grid{display:grid;grid-template-columns:repeat(4,1fr) 1.16fr;gap:18px;align-items:stretch}.fk-home-production figure,.fk-home-production .fk-testimonial-preview{margin:0;padding:12px;border:1px solid var(--home-line);border-radius:20px;background:#fffdf9;box-shadow:0 14px 34px rgba(114,82,50,.08)}.fk-home-production figure img{width:100%;height:142px;object-fit:cover;border-radius:15px}.fk-home-production figcaption{margin-top:9px;font-size:12px;font-weight:900}.fk-home-production .fk-testimonial-preview{display:flex;flex-direction:column;justify-content:center;text-align:left;background:linear-gradient(135deg,#fff7fc,#f2e8ff)}.fk-home-production .fk-testimonial-preview b{font-size:16px}.fk-home-production .fk-testimonial-preview p{font-weight:850;line-height:1.55}
.fk-home-instagram{position:relative;margin-top:46px;padding:42px 44px;text-align:center;border:1px solid #ead7f4;border-radius:30px;background:linear-gradient(135deg,#f9ebff,#fff5ee);overflow:hidden}.fk-home-instagram:before,.fk-home-instagram:after{content:"";position:absolute;border-radius:45% 55%;background:#8d55e8;opacity:.88}.fk-home-instagram:before{width:58px;height:50px;left:24px;top:28px}.fk-home-instagram:after{width:46px;height:42px;right:22px;bottom:18px;background:#ffc43d}.fk-home-instagram h2{position:relative;margin:0;font-size:30px}.fk-home-instagram p{position:relative;margin:8px 0 24px;color:#554a42;font-weight:800}.fk-instagram-grid{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-bottom:24px}.fk-ig-tile{display:block}.fk-ig-tile img{width:100%;height:170px;object-fit:cover;border-radius:18px;background:#fff;box-shadow:0 10px 24px rgba(114,82,50,.08)}
.fk-home-bestseller-scroll{width:min(var(--home-max),calc(100% - 72px));margin:0 auto 10px;display:flex;gap:18px;overflow-x:auto;padding:2px 2px 14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.fk-home-bestseller-scroll::-webkit-scrollbar{height:6px}.fk-home-bestseller-card{flex:0 0 196px;scroll-snap-align:start}.fk-home-bestseller-card a{display:block;height:100%;padding:12px;border:1px solid var(--home-line);border-radius:22px;background:#fffdf9;box-shadow:0 14px 34px rgba(114,82,50,.08);color:#2d211a}.fk-home-bestseller-card img{width:100%;height:172px;object-fit:cover;border-radius:17px;background:#fff3e8}.fk-home-bestseller-card small{display:block;margin-top:10px;color:#7d43df;font-size:12px;font-weight:950}.fk-home-bestseller-card b{display:block;margin-top:3px;font-size:16px;line-height:1.25}.fk-home-bestseller-card strong{display:block;margin:8px 0;color:#ff4f6c;font-size:15px}.fk-home-bestseller-card span{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 12px;border-radius:999px;background:#7d43df;color:#fff;font-size:12px;font-weight:950}.homepage-cms-editor .cms-repeat-card{margin:16px 0;padding:18px;border:1px solid var(--line);border-radius:16px;background:#fffdf8}.homepage-cms-editor details{margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff}.homepage-cms-editor summary{cursor:pointer}.cms-thumb{display:block;width:160px;height:90px;object-fit:contain;margin:8px 0;border:1px dashed var(--line);border-radius:12px;background:#fff}.switch-line{display:flex!important;align-items:center;gap:8px}.cms-product-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.cms-product-picker label{display:flex!important;gap:8px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff}.cms-product-picker small{display:block;color:#7a6b61}.fk-section-kicker{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;padding:7px 12px;border-radius:999px;background:#fff0f7;color:#7d43df;font-size:12px;font-weight:950}.fk-home-series-title p{max-width:620px;margin:8px auto 0;color:#68584f;font-weight:800;line-height:1.55}.fk-series-card-icon{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:4px;border-radius:10px;background:#fff;color:#7d43df}
.fk-home-testimonials{width:min(var(--home-max),calc(100% - 72px));margin:48px auto 0;padding:36px;text-align:center;border:1px solid var(--home-line);border-radius:30px;background:linear-gradient(135deg,#fff7fc,#f4ecff);box-shadow:0 14px 34px rgba(114,82,50,.08)}.fk-home-testimonials h2{margin:0;font-size:30px}.fk-home-testimonials>p{max-width:660px;margin:8px auto 20px;color:#584c44;font-weight:800}.fk-home-testimonial-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px;text-align:left}.fk-home-testimonial-row article{padding:14px;border:1px solid var(--home-line);border-radius:20px;background:#fffdf9}.fk-home-testimonial-row img{width:100%;height:128px;object-fit:cover;border-radius:15px;background:#fff3e8}.fk-home-testimonial-row strong{display:block;margin-top:10px;color:#ffb51f}.fk-home-testimonial-row p{font-weight:850;line-height:1.45}.fk-home-testimonial-row b{display:block}.fk-home-instagram .fk-section-kicker{position:relative}.fk-home-instagram .fk-ig-tile small{display:block}

/* Admin Homepage CMS redesign */
.cms-admin-page{--cms-purple:#7c3aed;--cms-soft:#f2e9ff;--cms-line:rgba(106,82,64,.14);--cms-ink:#171526;--cms-muted:#746b7d}
.cms-page-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0 18px}
.cms-page-tabs a{min-height:40px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid var(--cms-line);border-radius:999px;background:#fff;color:#302a3b;font-weight:900}
.cms-page-tabs a.active{color:#fff;background:linear-gradient(135deg,#8b5cf6,#6d28d9);box-shadow:0 10px 22px rgba(124,58,237,.2)}
.cms-homepage-workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start}
.cms-homepage-sidebar{position:sticky;top:22px;display:grid;gap:14px;padding:22px;border:1px solid var(--cms-line);border-radius:24px;background:rgba(255,253,248,.96);box-shadow:0 16px 44px rgba(105,75,45,.08)}
.cms-sidebar-brand{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--cms-line)}
.cms-sidebar-brand img{width:128px}.cms-sidebar-brand b{color:var(--cms-purple)}
.cms-homepage-sidebar p{margin:14px 0 2px;color:#82798b;font-size:12px;font-weight:950;letter-spacing:.04em}
.cms-homepage-sidebar nav{display:grid;gap:7px}
.cms-homepage-sidebar a{display:flex;align-items:center;gap:11px;min-height:44px;padding:0 12px;border-radius:14px;color:#2d2739;font-weight:850;line-height:1.22;overflow:hidden}
.cms-homepage-sidebar a span{width:24px;height:24px;display:grid;place-items:center;color:#6e657a;flex:0 0 24px;border-radius:8px;background:#fff;font-size:10px;font-weight:950}
.cms-homepage-sidebar a.active{color:#6d28d9;background:#f1e7ff}
.cms-homepage-sidebar a.active span{color:#6d28d9}
.homepage-section-editor{align-items:start}.homepage-section-form{display:grid;gap:18px}.homepage-editor-section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:8px}.homepage-editor-section-head h2{margin:0}.homepage-editor-section-head p{margin:4px 0 0;color:#746a81;font-size:13px;font-weight:750}.homepage-dynamic-list{display:grid;gap:18px}.homepage-section-card{padding:18px;border:1px solid var(--cms-line);border-radius:18px;background:#fffdf8}.homepage-section-card.is-empty{border-style:dashed;background:#fff}.homepage-item-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.homepage-item-head b{margin-right:auto}.homepage-item-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.homepage-item-actions .pill.mini{min-height:30px;padding:0 10px;font-size:11px}.homepage-item-actions .pill.danger{border-color:#fecaca;background:#fff1f2;color:#b91c1c}.homepage-drag-handle{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#f1e7ff;color:#6d28d9;font-weight:950}.homepage-item-grid{display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px}.homepage-image-preview{height:124px;display:grid;place-items:center;margin-bottom:12px;border:1px dashed var(--cms-line);border-radius:16px;background:#fff;overflow:hidden;color:#82798b;font-weight:850}.homepage-image-preview.square{height:180px}.homepage-image-preview img{width:100%;height:100%;object-fit:cover}.homepage-delete-check{align-self:end;margin-bottom:10px;color:#b91c1c}.homepage-series-preview,.homepage-bestseller-preview{padding:18px;border-radius:22px;background:#fff8ef}.homepage-preview-kicker{display:inline-flex;gap:6px;margin-bottom:8px;padding:7px 10px;border-radius:999px;background:#fff;color:#6d28d9;font-size:12px;font-weight:950}.homepage-series-preview h3,.homepage-bestseller-preview h3{margin:0;font-size:24px}.homepage-series-preview>p{margin:8px 0 16px;color:#6a5d53;font-weight:800}.homepage-series-preview-grid{display:grid;gap:12px}.homepage-series-preview-grid article{display:grid;grid-template-columns:1fr 1.1fr;gap:12px;padding:12px;border-radius:18px;background:#fff;border:1px solid var(--cms-line);box-shadow:0 10px 24px rgba(105,75,45,.08)}.homepage-series-preview-grid article.coral{background:#fff3f0}.homepage-series-preview-grid img{width:100%;height:118px;object-fit:cover;border-radius:14px}.homepage-series-preview-grid b{display:block;font-size:16px}.homepage-series-preview-grid p{margin:5px 0 8px;font-size:12px;color:#665b54;font-weight:750;line-height:1.45}.homepage-series-preview-grid em{display:inline-flex;padding:6px 9px;border-radius:999px;background:#7d43df;color:#fff;font-size:11px;font-style:normal;font-weight:900}.homepage-series-preview-grid .coral em{background:#ff6b60}.homepage-preview-row-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.homepage-preview-row-head em{padding-top:20px;color:#6d28d9;font-size:12px;font-style:normal;font-weight:950}.homepage-bestseller-preview-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}.homepage-bestseller-preview-row article{flex:0 0 148px;padding:10px;border:1px solid var(--cms-line);border-radius:18px;background:#fff;box-shadow:0 10px 24px rgba(105,75,45,.08)}.homepage-bestseller-preview-row img{width:100%;height:120px;object-fit:cover;border-radius:14px}.homepage-bestseller-preview-row small{display:block;margin-top:8px;color:#8b5cf6;font-size:11px;font-weight:950}.homepage-bestseller-preview-row b{display:block;margin-top:3px;font-size:14px;line-height:1.25}.homepage-bestseller-preview-row strong{display:block;margin:6px 0;color:#ff4f6c}.homepage-bestseller-preview-row span{display:inline-flex;padding:5px 8px;border-radius:999px;background:#7d43df;color:#fff;font-size:10px;font-weight:950}
.homepage-why-preview,.homepage-production-preview{padding:18px;border-radius:22px;background:#fff8ef}.homepage-why-preview h3,.homepage-production-preview h3{margin:0;font-size:24px}.homepage-why-preview>p,.homepage-production-preview>p{margin:8px 0 16px;color:#6a5d53;font-weight:800}.homepage-why-preview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.homepage-why-preview-grid article{padding:14px;text-align:center;border:1px solid var(--cms-line);border-radius:18px;background:#fff;box-shadow:0 10px 24px rgba(105,75,45,.08)}.homepage-why-preview-grid span{width:48px;height:48px;margin:0 auto 8px;display:grid;place-items:center;border-radius:50%;background:var(--icon-bg,#7d43df);color:#fff;font-size:22px;font-weight:950}.homepage-why-preview-grid b{display:block;font-size:13px}.homepage-why-preview-grid p{margin:5px 0 0;color:#665b54;font-size:11px;font-weight:750;line-height:1.35}.homepage-production-preview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.homepage-production-preview-grid figure{margin:0;padding:10px;border:1px solid var(--cms-line);border-radius:18px;background:#fff}.homepage-production-preview-grid img{width:100%;height:104px;object-fit:cover;border-radius:14px}.homepage-production-preview-grid figcaption{margin-top:7px;font-size:12px;font-weight:900}
.homepage-product-picker{display:grid;gap:10px;margin:0 0 14px;padding:12px;border:1px solid #eadff7;border-radius:16px;background:#fbf7ff}.homepage-product-results{display:grid;gap:7px;max-height:220px;overflow:auto}.homepage-product-results p{margin:0;color:#7c708c;font-size:12px;font-weight:850}.homepage-product-result{display:grid;gap:3px;width:100%;padding:10px 12px;text-align:left;border:1px solid var(--cms-line);border-radius:12px;background:#fff;color:#201a2b;cursor:pointer}.homepage-product-result:hover{border-color:#b794f4;background:#f7f0ff}.homepage-product-result b{font-size:13px}.homepage-product-result small{color:#796f86;font-weight:800}.homepage-media-upload{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:8px 0 12px}.homepage-media-upload [data-homepage-media-status]{color:#7c708c;font-size:12px;font-weight:850}.homepage-media-upload [data-homepage-media-status][data-state=loading]{color:#7d43df}.homepage-media-upload [data-homepage-media-status][data-state=success]{color:#16803a}.homepage-media-upload [data-homepage-media-status][data-state=error]{color:#b91c1c}.homepage-live-hidden{margin:0;padding:16px;border:1px dashed var(--cms-line);border-radius:16px;background:#fff;color:#7c708c;font-weight:900;text-align:center}.homepage-live-placeholder{display:grid;place-items:center;min-height:90px;border-radius:14px;background:#f7f2ff;color:#7c708c;font-size:12px;font-weight:900}.homepage-why-preview-grid span img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.homepage-section-order-list{display:grid;gap:14px}.homepage-section-order-item small{display:block;margin-top:3px;color:#81758f;font-weight:800}.homepage-section-order-preview{display:grid;gap:10px}.homepage-section-order-preview span{display:flex;align-items:center;min-height:38px;padding:9px 12px;border:1px solid var(--cms-line);border-radius:12px;background:#fff;font-weight:900}.homepage-section-order-preview span.is-disabled{opacity:.55;text-decoration:line-through;background:#f8f6fb}
.homepage-testimonial-preview,.homepage-instagram-preview{padding:18px;border-radius:22px;background:#fff8ef}.homepage-testimonial-preview h3,.homepage-instagram-preview h3{margin:0;font-size:24px}.homepage-testimonial-preview article{display:grid;grid-template-columns:96px 1fr;gap:14px;margin-top:14px;padding:14px;border:1px solid var(--cms-line);border-radius:18px;background:#fff}.homepage-testimonial-preview img{width:96px;height:96px;object-fit:cover;border-radius:16px}.homepage-testimonial-preview p{margin:0 0 8px;color:#5f5149;font-weight:800;line-height:1.45}.homepage-testimonial-preview strong{display:block;color:#ffb51f}.homepage-testimonial-preview b{display:block;margin-top:4px}.homepage-preview-dots{display:flex;justify-content:center;gap:7px;margin-top:12px}.homepage-preview-dots span{width:8px;height:8px;border-radius:999px;background:#d7c6ec}.homepage-preview-dots span.active{width:20px;background:#7d43df}.homepage-instagram-preview>p{margin:8px 0 16px;color:#6a5d53;font-weight:800}.homepage-instagram-preview-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}.homepage-instagram-preview-row article{flex:0 0 120px;padding:8px;border:1px solid var(--cms-line);border-radius:16px;background:#fff}.homepage-instagram-preview-row img{width:100%;height:104px;object-fit:cover;border-radius:12px}.homepage-instagram-preview-row small{display:block;margin-top:6px;color:#665b54;font-size:11px;font-weight:800;line-height:1.3}.homepage-instagram-preview em{display:inline-flex;margin-top:12px;padding:8px 12px;border-radius:999px;background:#7d43df;color:#fff;font-style:normal;font-size:12px;font-weight:950}
.fk-home-why-title p{max-width:620px;margin:8px auto 0;color:#68584f;font-weight:800;line-height:1.55}
.cms-view-site{margin-top:18px;border:1px solid var(--cms-line);background:#fff}
.cms-editor-main{min-width:0}
.cms-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}
.cms-breadcrumb{margin-bottom:16px;color:#82798b;font-size:14px;font-weight:850}
.cms-editor-head h1{margin:0 0 7px;color:var(--cms-ink);font-size:32px;line-height:1.12}
.cms-editor-head p{margin:0;color:var(--cms-muted);font-weight:800}
.cms-head-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.cms-editor-grid{display:grid;grid-template-columns:minmax(360px,.92fr) minmax(420px,1.25fr);gap:28px;align-items:start}
.cms-editor-grid.single{grid-template-columns:1fr}
.cms-form-card,.cms-preview-card,.cms-info-card,.cms-placeholder-page{padding:24px;border:1px solid var(--cms-line);border-radius:24px;background:#fffdf9;box-shadow:0 18px 48px rgba(105,75,45,.08)}
.cms-form-card{display:grid;gap:18px}
.cms-form-card h2,.cms-preview-card h2{margin:0;color:#201a2b;font-size:19px}
.cms-form-card h3{margin:2px 0 -6px;padding-top:6px;border-top:1px solid var(--cms-line);font-size:16px}
.cms-form-card label{font-size:14px;color:#211a2d}
.cms-form-card input,.cms-form-card textarea,.cms-form-card select{border-color:#ded7e4;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.cms-form-card small{color:#8a8195;font-size:12px;font-weight:800}
.cms-form-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.cms-form-2.compact{grid-template-columns:1fr 120px}
.cms-toggle-row{display:flex!important;align-items:center;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--cms-line)}
.cms-toggle-row span{display:grid;gap:3px}.cms-toggle-row input[type=checkbox]{width:50px;height:28px;min-height:28px;accent-color:var(--cms-purple)}
.cms-upload-preview{min-height:170px;display:grid;place-items:center;margin-top:8px;border:1px dashed #cdbdec;border-radius:16px;background:linear-gradient(135deg,#fff8ee,#f5edff);overflow:hidden}
.cms-upload-preview.small{width:150px;min-height:150px}
.cms-upload-preview img{width:100%;height:100%;max-height:230px;object-fit:contain}
.cms-upload-preview span{color:#81768f;font-weight:900}
.cms-radio-set{display:flex;gap:24px;padding:0;border:0}.cms-radio-set legend{width:100%;margin-bottom:8px;font-weight:900}.cms-radio-set label{display:flex;align-items:center;gap:8px}.cms-radio-set input{width:auto;min-height:auto;accent-color:var(--cms-purple)}
.cms-inline-check{display:flex!important;align-items:center;gap:9px}.cms-inline-check input{width:auto;min-height:auto}
.cms-preview-column{display:grid;gap:22px}.cms-preview-card{padding:28px}
.cms-hero-preview{min-height:330px;display:grid;grid-template-columns:1fr 1.05fr;gap:28px;align-items:center;padding:42px;border-radius:18px;background:radial-gradient(circle at 10% 8%,#d7c5ff 0 44px,transparent 45px),radial-gradient(circle at 88% 35%,#eadcff 0 120px,transparent 121px),linear-gradient(110deg,#fff7ea,#fffdf9)}
.cms-hero-preview.reverse{direction:rtl}.cms-hero-preview.reverse>*{direction:ltr}
.cms-hero-preview h3{margin:0 0 16px;color:#7c3aed;font-size:36px;line-height:1.08}.cms-hero-preview p{max-width:330px;color:#51465f;font-weight:850}.cms-hero-preview a,.cms-po-preview a{display:inline-flex;margin-top:14px;padding:13px 22px;border-radius:10px;color:#fff;background:linear-gradient(135deg,#8b5cf6,#6d28d9);font-weight:950}.cms-hero-preview img{width:100%;max-height:290px;object-fit:contain}
.cms-preview-dots{display:flex;justify-content:center;gap:10px;margin-top:18px}.cms-preview-dots span,.cms-preview-dots i{width:8px;height:8px;border-radius:50%;background:#d7d2dc}.cms-preview-dots span{background:#8b5cf6}
.cms-info-card{background:linear-gradient(135deg,#fbf3ff,#f2e9ff);border-color:#ddccff}.cms-info-card b{display:block;margin-bottom:10px;font-size:18px}.cms-info-card li{margin:8px 0;color:#4d4559;font-weight:800}
.cms-warning{margin-bottom:16px;padding:14px 16px;border:1px solid #ffd199;border-radius:16px;background:#fff7e9;color:#8b4c00;font-weight:900}
.cms-batch-sync-form{margin:-4px 0 18px}
.cms-po-preview{min-height:275px;display:grid;grid-template-columns:1fr 260px;gap:24px;align-items:center;padding:36px;border-radius:18px;background:radial-gradient(circle at 82% 62%,rgba(139,92,246,.14),transparent 29%),linear-gradient(135deg,#fff,#f5edff);overflow:hidden}
.cms-po-preview.next{background:radial-gradient(circle at 83% 83%,rgba(255,190,38,.3),transparent 24%),linear-gradient(135deg,#fffdf9,#fff0e4)}
.cms-po-label{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.cms-po-label span{color:#7c3aed;font-size:24px;font-weight:950}.cms-po-label small{padding:6px 13px;border-radius:999px;background:#efe8ff;color:#7c3aed;font-weight:950}
.cms-po-preview.next .cms-po-label span{color:#ff5717}.cms-po-preview.next .cms-po-label small{background:#ffe8dc;color:#ff5717}.cms-po-preview.next a{background:linear-gradient(135deg,#ff7a2d,#ff4d13)}
.cms-po-preview h3{margin:18px 0 18px;font-size:28px}.cms-po-preview p{margin:0 0 10px;color:#50465a;font-weight:850}.cms-po-preview .date-line{color:#201a2d}.cms-po-preview img{width:100%;max-height:220px;object-fit:contain}
.cms-upload-row{display:flex;align-items:center;gap:18px;margin-top:8px}.cms-upload-preview.icon{width:58px;height:58px;border-radius:50%;font-weight:950;color:#25d366;background:#ecfff4}.cms-avatar-row{display:flex;align-items:center;gap:0;margin:10px 0}.cms-avatar-row img{width:34px;height:34px;margin-left:-8px;border:2px solid #fff;border-radius:50%;object-fit:cover}.cms-avatar-row img:first-child{margin-left:0}.cms-avatar-row span{width:36px;height:36px;margin-left:6px;display:grid;place-items:center;border:1px dashed #c9b4ef;border-radius:50%;color:#7c3aed;background:#fff;font-weight:950}
.cms-join-preview{min-height:230px;display:grid;grid-template-columns:180px 1fr auto;gap:26px;align-items:center;padding:32px;border-radius:18px;background:radial-gradient(circle at 11% 18%,rgba(255,188,35,.16),transparent 18%),linear-gradient(115deg,#fff7e9,#fffaf2);box-shadow:0 14px 36px rgba(112,76,43,.08)}
.cms-join-visual{position:relative}.cms-join-visual>img:first-child{width:170px;height:150px;object-fit:contain}.cms-wa-icon{position:absolute;right:8px;top:28px;width:50px;height:50px;display:grid;place-items:center;border:5px solid #fff;border-radius:50%;color:#fff;background:#20c95a;font-size:13px;font-weight:950;box-shadow:0 10px 22px rgba(31,150,77,.18);object-fit:contain}.cms-join-preview h3{margin:0 0 10px;font-size:22px;line-height:1.22}.cms-join-preview p{max-width:430px;margin:0;color:#4c423b;font-weight:800;line-height:1.5}.cms-join-action{display:grid;gap:10px;justify-items:start}.cms-join-action a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 20px;border-radius:8px;background:#16c75c;color:#fff;font-weight:950}.cms-join-action small{color:#6c625a;font-weight:800}.cms-member-row{display:flex;align-items:center;gap:10px}.cms-member-avatars{display:flex}.cms-member-avatars img{width:28px;height:28px;margin-left:-8px;border:2px solid #fff;border-radius:50%;object-fit:cover}.cms-member-avatars img:first-child{margin-left:0}.cms-member-row b{font-size:13px}
.cms-placeholder-page{display:grid;place-items:start;gap:8px;min-height:260px}.cms-placeholder-page.inside{place-items:center;text-align:center}.cms-placeholder-page span{padding:7px 12px;border-radius:999px;color:#7c3aed;background:#f1e7ff;font-weight:950}.cms-placeholder-page h1,.cms-placeholder-page h2{margin:0}.cms-placeholder-page p{max-width:560px;margin:0;color:#71677c;font-weight:800}
.cms-media-grid.media-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.landing-media-editor{margin-top:22px}
.landing-media-section{display:grid;gap:14px;padding-top:8px;border-top:1px solid var(--cms-line)}
.landing-media-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.landing-media-section-head h3{margin:0;border:0;padding:0}
.landing-media-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.landing-media-admin-card{display:grid;gap:12px;padding:14px;border:1px solid #eee5d8;border-radius:18px;background:#fff}
.landing-media-admin-card>img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:#fff4e6}
.landing-media-admin-card form{display:grid;gap:10px}
.landing-media-admin-card .danger{border:1px solid #fecaca;background:#fff1f2;color:#b91c1c}
.landing-media-default-note{display:inline-flex;width:max-content;padding:5px 9px;border-radius:999px;background:#f4f0ff;color:#6f44c7}
.cms-landing-editor{gap:14px}
.cms-landing-panel{padding:16px;border:1px solid #eee5d8;border-radius:18px;background:#fff}
.cms-landing-panel[open]{background:#fffdf9}
.cms-landing-panel summary{cursor:pointer;color:#201a2b;font-size:17px;font-weight:900;list-style:none}
.cms-landing-panel summary::-webkit-details-marker{display:none}
.cms-landing-panel summary::after{content:"+";float:right;color:var(--cms-purple);font-weight:900}
.cms-landing-panel[open] summary::after{content:"-"}
.cms-landing-panel > *:not(summary){margin-top:14px}
.cms-landing-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cms-landing-status-grid div{display:grid;gap:4px;padding:12px;border:1px solid #eee5d8;border-radius:14px;background:#fff8ef}
.cms-landing-status-grid b{color:#201a2b;font-size:12px}
.cms-landing-status-grid span{color:#716678;font-size:12px;font-weight:800}
.cms-landing-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cms-landing-mini-card{display:grid;gap:12px;padding:14px;border:1px solid #eee5d8;border-radius:16px;background:#fff}
.cms-landing-mini-card h3{margin:0!important;padding:0!important;border:0!important;color:#201a2b;font-size:14px}
@media(max-width:1200px){.cms-homepage-workspace,.cms-editor-grid{grid-template-columns:1fr}.cms-homepage-sidebar{position:static}.cms-homepage-sidebar nav{grid-template-columns:repeat(2,minmax(0,1fr))}.cms-head-actions{justify-content:flex-start}}
@media(max-width:760px){.cms-editor-head{display:grid}.cms-form-2,.cms-form-2.compact,.cms-hero-preview,.cms-po-preview,.cms-join-preview,.cms-landing-status-grid,.cms-landing-card-grid,.homepage-item-grid,.homepage-series-preview-grid article{grid-template-columns:1fr}.cms-homepage-sidebar nav{grid-template-columns:1fr}.cms-hero-preview{padding:24px}.cms-po-preview,.cms-join-preview{padding:24px}.cms-upload-row{align-items:flex-start;flex-direction:column}.cms-media-grid.media-grid{grid-template-columns:1fr}.cms-head-actions .pill{width:100%}.homepage-editor-section-head{align-items:flex-start;flex-direction:column}}
.cms-head-actions form{display:inline-flex;margin:0}.pill.danger.outline{border:1.5px solid #fecaca;background:#fff1f2;color:#b91c1c;box-shadow:none}.pill.danger.outline:hover{background:#ffe4e6;color:#991b1b}
.homepage-section-card[draggable=true] .homepage-drag-handle{cursor:grab;user-select:none}.homepage-section-card[draggable=true] .homepage-drag-handle:active{cursor:grabbing}.homepage-section-card.is-dragging{opacity:.58;box-shadow:0 18px 34px rgba(70,45,95,.18)}.homepage-section-card.is-drag-over{outline:2px dashed #a855f7;outline-offset:3px;background:#fff7ed}
@media(max-width:760px){.landing-media-section-head{display:grid}.landing-media-admin-grid{grid-template-columns:1fr}}
@media(max-width:1180px){.fk-home-product-grid.product-grid{grid-template-columns:repeat(3,1fr)}.fk-home-reason-grid{grid-template-columns:repeat(3,1fr)}.fk-home-production-grid{grid-template-columns:repeat(2,1fr)}.fk-home-production .fk-testimonial-preview{grid-column:span 2}.cms-product-picker{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.fk-home-hero,.fk-home-po-grid,.fk-home-group-cta,.fk-home-series-grid,.fk-home-polished .fk-section-head,.fk-home-polished .fk-product-grid,.fk-home-bestseller-scroll,.fk-home-reason-grid,.fk-home-production,.fk-home-testimonials,.fk-home-instagram{width:calc(100% - 24px)}.fk-home-hero{grid-template-columns:1fr;min-height:auto;padding:34px 24px;text-align:left}.fk-home-hero-copy h1{font-size:38px}.fk-home-hero-media img{max-height:260px}.fk-home-po-grid,.fk-home-series-grid{grid-template-columns:1fr}.fk-home-po-card,.fk-home-series-card,.fk-home-group-cta{grid-template-columns:1fr}.fk-home-po-card img,.fk-home-series-card img{justify-self:center}.fk-home-group-cta{text-align:center}.fk-group-action{justify-items:center}.fk-home-product-grid.product-grid{grid-template-columns:repeat(2,1fr);gap:14px}.fk-home-polished .product-card img{height:136px}.fk-home-reason-grid,.fk-home-testimonial-row{grid-template-columns:repeat(2,1fr)}.fk-instagram-grid{grid-template-columns:repeat(2,1fr)}.fk-ig-tile img{height:150px}.cms-product-picker{grid-template-columns:1fr}}
@media(max-width:520px){.fk-home-product-grid.product-grid,.fk-home-reason-grid,.fk-home-production-grid,.fk-home-testimonial-row{grid-template-columns:1fr}.fk-home-production .fk-testimonial-preview{grid-column:auto}.fk-home-hero-copy h1{font-size:33px}.fk-home-hero,.fk-home-po-card,.fk-home-group-cta,.fk-home-series-card,.fk-home-testimonials,.fk-home-instagram{border-radius:22px}.fk-feature-row{gap:10px}.fk-home-hero .button-row{display:grid}.fk-home-hero .pill{justify-content:center}}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 10% 4%, rgba(242, 214, 92, .18), transparent 22%), linear-gradient(180deg, #fff8ef, var(--cream));
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }

.page-shell {
  width: min(1320px, calc(100% - 48px));
  margin: 26px auto;
  background: rgba(255, 253, 248, .82);
  border: 1px solid rgba(239, 220, 203, .75);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
}

.site-header {
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 32px;
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 253, 248, .92);
  backdrop-filter: blur(16px);
}
.brand img { width: 180px; }
.desktop-nav { display: flex; align-items: center; gap: 28px; flex: 1; justify-content: center; font-size: 14px; font-weight: 800; }
.desktop-nav a { padding: 9px 0; border-bottom: 3px solid transparent; }
.desktop-nav a.active { color: var(--orange); border-color: var(--orange); }
.header-actions { display: flex; gap: 12px; align-items: center; }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; font-weight: 900; background: white;
}
.pill, button {
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 11px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.pill:hover, button:hover { transform: translateY(-1px); }
.primary {
  color: white;
  background: linear-gradient(180deg, #ff7a2f, #ff4f10);
  box-shadow: 0 8px 18px rgba(244, 106, 35, .24);
}
.secondary { color: #7d43df; border: 2px solid #b993f1; background: white; }
.purple { color: white; background: linear-gradient(180deg, #b56de8, #7b45df); }
.pink { color: white; background: linear-gradient(180deg, #ff7f9c, #ff536e); }
.whatsapp { color: #0b9d42; background: white; border: 2px solid #22c55e; }
.full { width: 100%; }
.mobile-menu, .mobile-drawer { display: none; }

.flash {
  width: min(640px, calc(100% - 40px));
  margin: 0 auto 14px;
  padding: 14px 18px;
  border-radius: 16px;
  font-weight: 800;
  box-shadow: var(--soft);
}
.flash.success { background: #edfff5; color: #087f3d; border: 1px solid #b8f0cc; }
.flash.error { background: #fff0f2; color: #c41d2b; border: 1px solid #ffd0d8; }
.flash.info { background: #f3edff; color: #6d35c4; border: 1px solid #dcc8ff; }

.hero, .subhero {
  position: relative;
  min-height: 470px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 34px;
  align-items: center;
  padding: 36px 64px 44px;
}
.subhero { min-height: 330px; }
.hero h1, .subhero h1 {
  margin: 18px 0 14px;
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1.06;
  font-weight: 950;
  max-width: 570px;
}
.subhero h1 { font-size: clamp(40px, 4vw, 56px); }
.hero h1 span, .subhero h1 span, .auth-page h1 span { color: #ff6a24; }
.hero p, .subhero p { max-width: 470px; color: #4a4a4a; font-weight: 700; }
.badge {
  display: inline-flex;
  color: #ff6a24;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(244, 154, 69, .28);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 900;
}
.hero-product { width: 100%; filter: drop-shadow(0 25px 25px rgba(118, 84, 45, .16)); }
.subhero img { max-height: 260px; object-fit: contain; justify-self: end; filter: drop-shadow(0 20px 20px rgba(118, 84, 45, .12)); }
.button-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 24px 0; }
.feature-strip { display: flex; gap: 28px; flex-wrap: wrap; font-size: 14px; font-weight: 900; color: #333; }
.blob { position: absolute; width: 90px; height: 70px; border-radius: 48% 52% 40% 60%; opacity: .95; }
.blob.yellow { background: var(--yellow); right: -34px; top: 130px; }
.blob.aqua { background: var(--aqua); right: 70px; bottom: 52px; }
.blob.purple { background: var(--purple); left: 560px; bottom: 80px; }

.series-grid, .product-grid, .why-grid, .testimonial-grid, .info-grid, .steps, .contact-grid, .stat-grid, .quick-grid, .admin-stats {
  display: grid;
  gap: 20px;
  padding: 0 64px;
}
.series-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.series-grid.compact { margin-top: -10px; }
.series-card, .content-card, .form-card, .result-card, .testimonial, .why article, .info-grid article, .steps article, .product-card, .table-card, .welcome-card, .quick-grid a, .stat-grid article, .panel {
  background: linear-gradient(145deg, rgba(255, 253, 248, .96), rgba(255, 244, 229, .78));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--soft);
}
.series-card {
  min-height: 210px;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  align-items: center;
  overflow: hidden;
  padding: 26px;
}
.series-card.tall { grid-template-columns: 1fr; }
.series-card h2, .section-head h2, .why h2, .faq h2 { margin: 0 0 10px; font-size: 28px; }
.series-card p { font-weight: 700; color: #555; }
.series-card img { width: 100%; object-fit: contain; }
.mini-icon { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; color: white; font-weight: 900; }
.purple-bg { background: var(--purple); }
.pink-bg { background: #ff6b8a; }
.mini-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mini-list a { border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; background: white; font-weight: 800; }

.section-head { padding: 30px 64px 14px; text-align: center; }
.section-head.inline { display: flex; justify-content: space-between; align-items: center; text-align: left; }
.section-head a { color: #7d43df; font-weight: 900; }
.product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-grid.related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-card { position: relative; overflow: hidden; }
.product-card a { display: block; padding: 14px; }
.product-card img {
  width: 100%;
  aspect-ratio: 1 / 1.08;
  object-fit: contain;
  background: #fff1df;
  border-radius: 18px;
}
.product-card small { display: inline-flex; margin-top: 10px; color: var(--purple); font-weight: 900; }
.product-card h3 { margin: 2px 0 4px; font-size: 19px; }
.product-card p { min-height: 42px; margin: 0 0 8px; font-size: 13px; color: #5b514b; font-weight: 700; }
.heart { position: absolute; top: 20px; right: 20px; color: var(--coral); font-size: 22px; font-weight: 900; }
.outline-btn { display: inline-flex; justify-content: center; width: 100%; min-height: 34px; align-items: center; border: 2px solid #b993f1; color: #7d43df; border-radius: 9px; font-weight: 900; font-size: 13px; background: white; }
.price, .product-price { display: block; color: #ff5b17; font-size: 22px; margin-bottom: 10px; }

.why { padding-top: 26px; text-align: center; }
.why-grid { grid-template-columns: repeat(4, 1fr); text-align: left; }
.why article, .testimonial, .info-grid article, .steps article { padding: 28px; }
.wide-cta {
  margin: 34px 64px 10px;
  border-radius: 26px;
  background: linear-gradient(110deg, #fff2df, #fff9f0);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 230px 1fr;
  align-items: center;
  gap: 22px;
  padding: 22px 42px;
}
.wide-cta img { max-height: 150px; object-fit: contain; }
.testimonial-grid { grid-template-columns: repeat(4, 1fr); }
.testimonial-grid.large { grid-template-columns: repeat(3, 1fr); padding-top: 24px; }
.testimonial span { color: #f3a51e; }
.instagram-section {
  margin: 26px 64px;
  padding: 28px;
  border-radius: 28px;
  background: linear-gradient(105deg, #fff1f4, #fff8ef 48%, #f7edff);
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 26px;
  align-items: center;
  border: 1px solid var(--line);
  box-shadow: var(--soft);
}
.instagram-copy h2 {
  font-size: 34px;
  line-height: 1.12;
  margin: 14px 0 10px;
}
.instagram-copy p {
  max-width: 440px;
  color: #5b514b;
  font-weight: 750;
}
.instagram-embed {
  border: 1px solid rgba(47, 47, 47, .10);
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 253, 248, .92);
  box-shadow: 0 16px 34px rgba(118, 84, 45, .10);
}
.instagram-embed header,
.instagram-embed footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: white;
}
.instagram-embed header img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.instagram-embed header div {
  display: grid;
  flex: 1;
  line-height: 1.2;
}
.instagram-embed header span,
.instagram-embed footer {
  color: #6b625b;
  font-size: 13px;
  font-weight: 800;
}
.instagram-embed header a {
  color: white;
  background: var(--purple);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 900;
}
.instagram-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: #fff2df;
}
.instagram-post-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #fff1df;
}
.instagram-embed footer {
  justify-content: space-between;
}

.footer {
  display: grid;
  grid-template-columns: minmax(240px, 1.35fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px;
  padding: 42px 64px 72px;
  border-top: 1px solid var(--line);
  background: rgba(255, 253, 248, .72);
  position: relative;
}
.footer-brand { display: grid; align-content: start; gap: 14px; }
.footer-logo { width: min(170px, 100%); max-height: 88px; object-fit: contain; object-position: left center; }
.footer-description { max-width: 300px; margin: 0; color: #6f6258; font-weight: 700; line-height: 1.65; }
.footer h3 { margin: 0 0 12px; font-size: 16px; color: #2f2723; }
.footer a { display: block; margin: 7px 0; color: #4f4640; font-weight: 700; text-decoration: none; transition: color .2s, transform .2s; }
.footer a:hover, .footer a:focus-visible { color: #ef7d38; transform: translateX(2px); outline: none; }
.footer-muted { margin: 0; color: #8a7a70; font-weight: 700; line-height: 1.55; }
.social-row { display: flex; flex-wrap: wrap; gap: 10px; }
.social-row a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--orange); text-decoration: none; transition: transform .2s, box-shadow .2s; font-size: 11px; font-weight: 950; letter-spacing: 0; }
.social-row a:hover, .social-row a:focus-visible { transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 18px rgba(239, 125, 56, .22); color: white; }
.footer-social-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important; }
.footer-social-whatsapp { background: #25d366 !important; }
.footer-social-tiktok { background: #111827 !important; }
.footer-social-marketplace { background: #ee4d2d !important; }
.footer-social-email { background: #7d43df !important; }
.footer-contact { min-width: 180px; }
.footer-contact-link { display: grid !important; gap: 2px; padding: 8px 0; }
.footer-contact-link span { color: #8a7a70; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0; }
.footer-contact-link b { color: inherit; font-size: 14px; overflow-wrap: anywhere; }
.whatsapp-float {
  position: fixed; z-index: 50; right: 26px; bottom: 30px; width: 64px; height: 64px; display: grid; place-items: center;
  border-radius: 50%; color: white; background: #25d366; text-decoration: none;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .4); transition: transform .2s, box-shadow .2s;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 10px 30px rgba(37, 211, 102, .5); }
.whatsapp-float svg { width: 34px; height: 34px; }
.bottom-nav { display: none; }

.product-detail { display: grid; grid-template-columns: 1.12fr .88fr; gap: 50px; padding: 48px 64px 26px; align-items: start; }
.gallery { display: grid; grid-template-columns: 92px 1fr; gap: 20px; }
.thumbs { display: grid; gap: 16px; }
.thumbs img { border-radius: 14px; border: 2px solid #ffd0b5; aspect-ratio: 1; object-fit: cover; background: #fff1df; }
.main-product { width: 100%; aspect-ratio: .93; object-fit: contain; border-radius: 24px; background: #fff1df; box-shadow: var(--soft); }
.product-copy h1 { font-size: 52px; line-height: 1.05; margin: 18px 0 10px; }
.purple-badge { color: #7d43df; }
.size-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 10px 0 22px; }
.size-row span { border: 1px solid var(--line); border-radius: 10px; text-align: center; padding: 10px 4px; background: white; font-weight: 800; }
.stacked { flex-direction: column; align-items: stretch; }
.info-grid { grid-template-columns: repeat(3, 1fr); padding-top: 10px; }
.content-block, .faq, .content-card.rich-text {
  margin: 32px 64px;
  padding: 32px;
  background: rgba(255, 253, 248, .55);
}
.content-block li { margin: 10px 0; font-weight: 700; }
.faq details { border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin: 10px 0; background: rgba(255,255,255,.65); }
.faq summary { cursor: pointer; font-weight: 900; }

.form-card, .result-card { margin: 26px 64px; padding: 28px; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
label { display: grid; gap: 7px; font-weight: 900; }
input, textarea, select {
  width: 100%;
  border: 1px solid rgba(47, 47, 47, .18);
  border-radius: 12px;
  min-height: 48px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .84);
  color: var(--ink);
}
textarea { min-height: 110px; resize: vertical; }
.result-card { display: grid; grid-template-columns: 240px 1fr; gap: 26px; background: linear-gradient(120deg, #f3fbff, #fffdf8); border-color: #beeaff; }
.result-card h2 { grid-column: 1 / -1; margin: 0; }
.result-card img { border-radius: 18px; background: white; }
dl { display: grid; grid-template-columns: 180px 1fr; gap: 10px; margin: 0; }
dt { font-weight: 900; }
dd { margin: 0; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.78); }
.status { display: inline-flex; padding: 5px 10px; border-radius: 999px; background: #e9f8ff; color: #2377c7; font-weight: 900; }
.pink-status { color: #e64c70; background: #fff0f4; }
.steps { grid-template-columns: repeat(3, 1fr); margin: 26px 0; }
.steps b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: white; background: var(--purple); }
.contact-grid { grid-template-columns: .85fr 1.15fr; }

.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  padding: 70px min(7vw, 120px);
  align-items: center;
  background: radial-gradient(circle at 96% 0, rgba(242,214,92,.45), transparent 18%), linear-gradient(180deg, #fff8ef, var(--cream));
}
.auth-logo { width: 330px; margin-bottom: 58px; }
.auth-page h1 { font-size: clamp(50px, 5vw, 78px); line-height: 1.08; margin: 0 0 24px; font-weight: 950; }
.auth-visual p { max-width: 560px; font-size: 22px; font-weight: 800; }
.auth-product { width: min(720px, 100%); margin-top: 34px; filter: drop-shadow(0 18px 20px rgba(118,84,45,.15)); }
.auth-card { padding: 54px; border-radius: 40px; background: rgba(255,253,248,.86); box-shadow: var(--shadow); border: 1px solid var(--line); }
.auth-card h2 { font-size: 50px; margin: 0 0 12px; text-align: center; }
.auth-card > p { text-align: center; font-size: 20px; font-weight: 700; }
.auth-card form { display: grid; gap: 16px; margin-top: 24px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.segmented label { border: 2px solid var(--line); border-radius: 12px; padding: 14px; display: flex; justify-content: center; }
.checkline { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.checkline input { width: 22px; min-height: 22px; }
.auth-row { display: flex; justify-content: space-between; align-items: center; }
.center { text-align: center; }
.auth-card a { color: #7d43df; font-weight: 900; }
.pw-field { display: flex; flex-direction: column; }
.pw-field .pw-input-wrap { position: relative; }
.pw-field .pw-input-wrap input[type="password"],
.pw-field .pw-input-wrap input[type="text"] { padding-right: 48px; width: 100%; }
.pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; color: #aaa; padding: 4px; display: grid; place-items: center; }
.pw-toggle:hover { color: #7b45df; }

.dashboard-layout { display: grid; grid-template-columns: 340px 1fr; gap: 36px; padding: 44px 54px; }
.account-shell { width: min(1520px, calc(100% - 36px)); }
.account-dashboard { padding: 34px 44px 46px; display: grid; gap: 26px; }
.dashboard-main { min-width: 0; width: 100%; }
.welcome-card { display: flex; justify-content: space-between; align-items: center; padding: 28px 38px; }
.welcome-card h1 { font-size: 42px; margin: 0; }
.welcome-card span { font-size: 76px; }
.stat-grid { grid-template-columns: repeat(4, 1fr); padding: 24px 0; }
.stat-grid article { padding: 24px; }
.stat-grid b { font-size: 36px; display: block; }
.quick-grid { grid-template-columns: repeat(4, 1fr); padding: 0; }
.quick-grid a { min-height: 190px; padding: 26px; display: grid; align-content: start; color: #6c38d6; }
.quick-grid b { font-size: 23px; color: var(--ink); }
.table-card { margin-top: 30px; padding: 10px 24px 24px; }
.responsive-table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { text-align: left; padding: 16px; border-bottom: 1px solid var(--line); font-weight: 750; }
th { color: #211f1f; background: rgba(255, 244, 229, .65); }
.dashboard-form { margin: 0; }
.po-order-form { width: 100%; padding: 24px; }
.po-table-wrap { width: 100%; max-width: 100%; border: 1px solid var(--line); border-radius: 16px; background: white; }
.po-table-wrap table { margin: 0; }
.po-table-wrap thead th { position: sticky; top: 0; z-index: 2; }

.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 300px 1fr; background: #fffaf3; transition: grid-template-columns .24s ease; }
.admin-shell.admin-collapsed { grid-template-columns: 92px 1fr; }
.admin-sidebar { padding: 42px 24px; background: rgba(255,253,248,.9); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 36px; overflow:hidden; transition: padding .24s ease; }
.admin-sidebar img { width: 220px; transition: width .24s ease; }
.admin-shell.admin-collapsed .admin-sidebar { padding: 34px 14px; align-items:center; }
.admin-shell.admin-collapsed .admin-sidebar img { width: 58px; }
.admin-shell.admin-collapsed .admin-sidebar nav { width:100%; }
.admin-shell.admin-collapsed .admin-sidebar a,.admin-shell.admin-collapsed .admin-sidebar button { width:54px; padding:0; justify-content:center; font-size:0; overflow:hidden; }
.admin-shell.admin-collapsed .admin-sidebar form { width:54px; }
.admin-sidebar nav { display: grid; gap: 10px; }
.admin-sidebar a, .admin-sidebar button { justify-content: flex-start; color: var(--ink); background: transparent; min-height: 54px; border-radius: 14px; }
.admin-sidebar a.active { color: #5d28d3; background: #f0e4ff; }
.admin-sidebar form { margin-top: auto; }
.admin-sidebar button { width: 100%; color: #e23a45; }
.admin-main { padding: 34px 42px 80px; min-width: 0; }
.admin-top { display: grid; grid-template-columns: auto 1fr minmax(300px, 520px) auto; gap: 24px; align-items: center; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.admin-collapse-toggle{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:14px;background:#fff;color:#6d28d9;font-size:20px;font-weight:950;box-shadow:0 8px 20px rgba(82,54,30,.07)}
.admin-top form input { min-height: 58px; border-radius: 18px; }
.admin-top div:last-child { display: grid; }
.admin-title { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 38px 0 24px; }
.admin-title-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.admin-title h1, .admin-main > h1 { font-size: 42px; margin: 0 0 8px; }
.admin-stats { grid-template-columns: repeat(4, 1fr); padding: 0; }
.admin-stats article { padding: 24px; }
.admin-stats b { font-size: 36px; display: block; }
.admin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 24px; }
.panel { padding: 24px; overflow: hidden; }
.panel details { border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin: 10px 0; background: white; }
.admin-form { display: grid; gap: 12px; margin-top: 14px; }
.line-form { grid-template-columns: repeat(2, 1fr); }
.line-form textarea, .line-form button, .line-form .checkline, .line-form .homepage-setting { grid-column: 1 / -1; }
.homepage-setting small { color: #6b625b; font-weight: 800; }
.user-row { grid-template-columns: repeat(7, minmax(120px, 1fr)); align-items: end; padding: 12px 0; border-bottom: 1px solid var(--line); }
.settings-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.settings-form button { grid-column: 1 / -1; }
.filter-bar { display: flex; gap: 12px; margin: 20px 0; }
.mini-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mini-row form, .proofs form { display: inline-flex; gap: 8px; }
.danger { background: #fff0f2; color: #c41d2b; }

.admin-dashboard-v2 { display: grid; gap: 22px; }
.dashboard-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin: 28px 0 0; }
.dashboard-head h1 { margin: 0 0 6px; font-size: clamp(30px, 3vw, 44px); letter-spacing: 0; }
.dashboard-head p { margin: 0; color: #6d625c; font-weight: 750; }
.dashboard-head-actions { display: flex; align-items: center; gap: 12px; }
.dashboard-date, .dashboard-notification { border: 1px solid rgba(239, 137, 67, .28); background: rgba(255,255,255,.75); border-radius: 14px; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; font-weight: 900; box-shadow: 0 10px 24px rgba(94,58,28,.06); }
.dashboard-notification { width: 48px; justify-content: center; padding: 0; position: relative; }
.dashboard-notification::before { content: "N"; color: #6d28d9; }
.dashboard-notification span { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; border-radius: 99px; background: #ff4f68; color: white; display: grid; place-items: center; font-size: 11px; }
.dashboard-summary-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.dashboard-summary-card { min-height: 150px; padding: 18px; border: 1px solid rgba(237, 198, 165, .75); border-radius: 22px; background: rgba(255,255,255,.76); color: var(--ink); box-shadow: 0 12px 28px rgba(102,70,40,.07); display: grid; grid-template-rows: auto 1fr auto auto; gap: 8px; }
.dashboard-summary-card:hover { transform: translateY(-2px); }
.summary-icon { width: 52px; height: 52px; border-radius: 18px; color: white; display: grid; place-items: center; font-size: 15px; font-weight: 950; }
.summary-copy { font-size: 13px; line-height: 1.35; font-weight: 900; color: #4a4039; }
.dashboard-summary-card b { font-size: 33px; line-height: 1; }
.dashboard-summary-card small { color: #6d625c; font-weight: 800; }
.tone-purple .summary-icon, .check-card.tone-purple::before { background: linear-gradient(135deg,#b56de8,#7c3aed); }
.tone-orange .summary-icon, .check-card.tone-orange::before { background: linear-gradient(135deg,#ffb047,#ff5a1f); }
.tone-teal .summary-icon, .check-card.tone-teal::before { background: linear-gradient(135deg,#52d6cc,#16a5a8); }
.tone-pink .summary-icon, .check-card.tone-pink::before { background: linear-gradient(135deg,#ff8092,#ff4f68); }
.tone-yellow .summary-icon, .check-card.tone-yellow::before { background: linear-gradient(135deg,#ffd45a,#ffad0f); }
.tone-blue .summary-icon, .check-card.tone-blue::before { background: linear-gradient(135deg,#6897ff,#3d5afe); }
.tone-red .summary-icon, .check-card.tone-red::before { background: linear-gradient(135deg,#ff758f,#ef3e57); }
.dashboard-main-grid, .dashboard-content-grid, .dashboard-bottom-grid { display: grid; gap: 18px; }
.dashboard-main-grid { grid-template-columns: minmax(420px, .92fr) minmax(520px, 1.08fr); }
.dashboard-content-grid { grid-template-columns: minmax(440px, .88fr) minmax(620px, 1.12fr); }
.dashboard-bottom-grid { grid-template-columns: minmax(420px, .95fr) minmax(220px, .5fr) minmax(520px, 1.15fr); }
.dashboard-panel { border: 1px solid rgba(237, 198, 165, .72); border-radius: 22px; background: rgba(255,255,255,.78); box-shadow: 0 14px 34px rgba(102,70,40,.07); padding: 18px; min-width: 0; }
.dashboard-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.dashboard-panel-head h2 { margin: 0; font-size: 22px; }
.dashboard-panel-head a { color: #7c3aed; border: 1px solid rgba(124,58,237,.32); border-radius: 10px; padding: 7px 12px; font-weight: 900; background: white; }
.check-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.check-card { border: 1px solid rgba(181,109,232,.2); border-radius: 18px; padding: 18px; background: rgba(255,255,255,.78); display: grid; gap: 6px; position: relative; overflow: hidden; min-height: 132px; }
.check-card::before { content: ""; width: 38px; height: 38px; border-radius: 14px; display: block; }
.check-card b { font-size: 30px; }
.check-card p { margin: 0; min-height: 38px; color: #524942; font-weight: 850; line-height: 1.3; }
.check-card a { justify-self: start; padding: 7px 20px; border-radius: 10px; border: 1px solid rgba(124,58,237,.38); color: #7c3aed; font-weight: 950; background: white; }
.active-batch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.active-batch-card { border: 1px solid rgba(237, 198, 165, .9); border-radius: 18px; padding: 18px; background: linear-gradient(140deg, rgba(255,255,255,.96), rgba(255,247,236,.92)); color: var(--ink); display: grid; gap: 14px; position: relative; }
.batch-card-top, .batch-meta { display: flex; justify-content: space-between; gap: 12px; }
.batch-card-top b { font-size: 16px; }
.batch-card-top span { color: #0d8f54; background: #dcfce7; border: 1px solid #91e2b0; border-radius: 99px; padding: 5px 12px; font-size: 12px; font-weight: 950; }
.batch-meta small { color: #7a6b62; font-weight: 800; }
.batch-meta strong { color: var(--ink); font-size: 14px; }
.batch-progress { height: 12px; background: #f3e9df; border-radius: 99px; overflow: hidden; }
.batch-progress span { display: block; height: 100%; background: linear-gradient(90deg,#8b5cf6,#ff7a1a); border-radius: inherit; }
.active-batch-card em { position: absolute; right: 18px; bottom: 12px; font-style: normal; font-weight: 950; color: #3b342f; }
.recap-layout { display: grid; grid-template-columns: 1fr 1fr .9fr; gap: 12px; }
.recap-box { border: 1px solid rgba(237,198,165,.7); border-radius: 16px; padding: 14px; background: rgba(255,253,248,.72); min-width: 0; }
.recap-box h3 { margin: 0 0 12px; font-size: 15px; }
.motif-row, .type-row, .size-row { display: grid; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px dashed rgba(124,58,237,.15); }
.motif-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
.motif-row img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: #fff1df; }
.motif-row span, .type-row span, .size-row span { font-weight: 900; min-width: 0; }
.motif-row b, .type-row b, .size-row b { font-size: 13px; white-space: nowrap; }
.size-row { grid-template-columns: minmax(0, 1fr) auto; }
.size-row em { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: #f1e6df; overflow: hidden; }
.size-row em span { display: block; height: 100%; border-radius: inherit; background: #8b5cf6; }
.size-dot { width: 10px; height: 10px; border-radius: 99px; display: inline-block; margin-right: 7px; background: #8b5cf6; }
.dot-1 { background: #27c7c4; }
.dot-2 { background: #ff7a1a; }
.dot-3 { background: #c7c7c7; }
.type-row { grid-template-columns: 1fr auto; border: 0; border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; background: #f3e8ff; }
.type-1 { background: #e4fbf7; }
.type-2 { background: #fff3d6; }
.type-3 { background: #ffe5ed; }
.dashboard-table-wrap { width: 100%; overflow-x: auto; }
.dashboard-table { width: 100%; min-width: 760px; border-collapse: collapse; margin: 0; font-size: 13px; }
.dashboard-table th, .dashboard-table td { padding: 12px 10px; border: 1px solid rgba(237,198,165,.65); text-align: left; vertical-align: middle; }
.dashboard-table th { background: #fff8ed; color: #4a4039; font-size: 12px; }
.status-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border-radius: 99px; color: #b45309; background: #ffedd5; font-size: 12px; font-weight: 950; white-space: nowrap; }
.status-pill.soft { color: #4f46e5; background: #eef2ff; }
.table-icon-link, .reminder-btn { display: inline-flex; min-height: 30px; align-items: center; justify-content: center; border-radius: 9px; padding: 5px 10px; font-weight: 950; }
.table-icon-link { color: #7c3aed; border: 1px solid rgba(124,58,237,.3); background: white; }
.reminder-btn { color: white; background: #ff4f68; }
.insight-panel ul { margin: 0; padding-left: 20px; display: grid; gap: 14px; color: #4b4039; font-weight: 850; }
.legend { display: flex; align-items: center; gap: 8px; color: #6d625c; font-weight: 850; font-size: 12px; }
.legend i { width: 16px; height: 10px; border-radius: 4px; background: #8b5cf6; }
.legend i:last-child { background: #27c7c4; }
.trend-chart { height: 210px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; align-items: end; padding: 16px 10px 4px; border: 1px solid rgba(237,198,165,.65); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,250,244,.9)); }
.trend-day { height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 8px; text-align: center; color: #6d625c; font-weight: 850; }
.trend-bars { height: 100%; display: flex; justify-content: center; align-items: end; gap: 7px; }
.trend-bars span { width: 22px; min-height: 4px; border-radius: 8px 8px 2px 2px; }
.order-bar { background: linear-gradient(180deg,#a855f7,#7c3aed); }
.dp-bar { background: linear-gradient(180deg,#52d6cc,#17a2a4); }
.empty-state { color: #7a6b62; font-weight: 850; margin: 8px 0; }
.muted { color: #8b7b71; }
.message { padding: 18px 0; border-bottom: 1px solid var(--line); }

.po-sales-report { gap: 22px; max-width: 100%; overflow-x: clip; }
.po-sales-report > * { min-width: 0; }
.report-head { align-items: flex-start; min-width: 0; }
.po-sales-report .report-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 440px); }
.report-head > div:first-child { min-width: 0; }
.report-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; max-width: 100%; min-width: 0; }
.report-actions .pill, .report-actions .outline-chip { min-width: 0; max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
.report-meta-line { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 8px; color: #7a6b62; font-size: 13px; font-weight: 850; }
.report-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px; border: 1px solid rgba(237,198,165,.65); border-radius: 16px; background: rgba(255,255,255,.72); color: #6b625b; font-weight: 850; }
.report-filter-chips span { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 10px; border-radius: 999px; background: #fff7ed; border: 1px solid rgba(251,146,60,.22); }
.report-filter-chips a { color: #7c3aed; font-weight: 950; }
.report-filter-bar { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: end; }
.report-filter-bar label, .report-filter-bar select, .report-filter-bar input { min-width: 0; }
.report-filter-bar .pill, .report-filter-bar .outline-chip { min-width: 0; justify-content: center; white-space: normal; }
.report-insight-grid, .report-action-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.report-insight-grid article, .report-action-grid a { min-height: 118px; padding: 16px; border: 1px solid rgba(237,198,165,.72); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,247,238,.86)); box-shadow: 0 10px 24px rgba(63,43,26,.05); }
.report-insight-grid span, .report-action-grid small { display: block; color: #76685f; font-weight: 900; font-size: 12px; line-height: 1.35; }
.report-insight-grid b, .report-action-grid b { display: block; margin: 7px 0 4px; color: #24201d; font-size: 22px; line-height: 1.15; }
.report-insight-grid small { color: #7a6c62; font-weight: 800; line-height: 1.35; }
.report-action-grid a { color: inherit; text-decoration: none; }
.report-action-grid a span { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 14px; color: #7c3aed; background: #f3e8ff; font-size: 12px; font-weight: 950; }
.report-analytics-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .95fr) minmax(280px, .95fr); gap: 14px; }
.report-analytics-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.report-trend-chart { height: 245px; display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 12px; align-items: end; padding: 14px 8px 4px; border: 1px solid rgba(237,198,165,.62); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,244,.92)); }
.report-trend-day { height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 8px; text-align: center; color: #73675f; font-weight: 850; }
.report-trend-bars { height: 100%; display: flex; justify-content: center; align-items: end; gap: 6px; }
.report-trend-bars span { width: 18px; min-height: 0; border-radius: 9px 9px 3px 3px; }
.report-trend-day small { font-size: 11px; line-height: 1.25; }
.report-stack-bar { display: flex; height: 22px; overflow: hidden; border-radius: 999px; background: #f3f4f6; border: 1px solid rgba(237,198,165,.55); }
.report-stack-bar span { min-width: 0; }
.stage-waiting_dp { background: #fb923c; }
.stage-dp_pending_verification { background: #a78bfa; }
.stage-dp_verified { background: #2dd4bf; }
.stage-waiting_final_payment { background: #facc15; }
.stage-final_payment_pending_verification { background: #fb7185; }
.stage-final_payment_verified, .stage-paid { background: #22c55e; }
.stage-overdue { background: #f43f5e; }
.report-mini-list { display: grid; gap: 10px; margin-top: 14px; }
.report-mini-list div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #fff8ed; border: 1px solid rgba(237,198,165,.55); }
.report-mini-list span { color: #5d534c; font-weight: 850; }
.report-mini-list b { color: #24201d; font-weight: 950; }
.report-horizontal-bars { display: grid; gap: 12px; }
.report-horizontal-bars div { display: grid; gap: 7px; }
.report-horizontal-bars label { display: flex; justify-content: space-between; gap: 12px; color: #554b43; font-weight: 900; }
.report-horizontal-bars label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-horizontal-bars label b { white-space: nowrap; }
.report-horizontal-bars i { display: block; height: 11px; overflow: hidden; border-radius: 999px; background: #f1e7dc; }
.report-horizontal-bars em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b5cf6, #22d3ee); }
.po-report-summary.dashboard-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.po-report-summary .dashboard-summary-card { min-height: 132px; }
.po-report-summary .dashboard-summary-card b { font-size: 24px; word-break: break-word; }
.payment-report-panel .dashboard-panel-head small { color: #756b63; font-weight: 800; }
.payment-report-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.payment-report-grid article { padding: 18px; border: 1px solid rgba(237,198,165,.72); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,247,238,.82)); }
.payment-report-grid b { display: block; margin-bottom: 6px; font-size: 30px; line-height: 1; }
.payment-report-grid span { color: #554b43; font-weight: 900; line-height: 1.3; }
.report-table-card { padding: 18px; overflow: hidden; max-width: 100%; }
.report-table-card .report-table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.report-table table { min-width: 1500px; }
.compact-report-table table { min-width: 980px; }
.report-table th { white-space: nowrap; }
.report-table td { vertical-align: top; }
.report-table td small { display: block; margin-top: 3px; color: #7c7168; font-weight: 800; }
.report-table a { color: #6d28d9; font-weight: 950; }
.report-row-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 172px; }
.report-row-actions a { display: inline-flex; min-height: 28px; align-items: center; justify-content: center; padding: 5px 9px; border: 1px solid rgba(124,58,237,.28); border-radius: 9px; color: #6d28d9; background: #fff; font-size: 12px; font-weight: 950; }
.report-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; padding-top: 16px; color: #6f6259; font-weight: 900; }
.report-profile-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.report-profile-card h2 { margin: 0 0 8px; font-size: 24px; }
.report-profile-card p { margin: 5px 0; color: #5c524a; font-weight: 850; }
.report-profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: min(520px, 100%); }
.report-profile-stats article { padding: 12px; border: 1px solid rgba(237,198,165,.65); border-radius: 14px; background: #fff8ed; }
.report-profile-stats span { display: block; color: #776a60; font-size: 12px; font-weight: 900; }
.report-profile-stats b { display: block; margin-top: 4px; color: #24201d; font-size: 18px; }
.report-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 950; white-space: nowrap; }
.report-badge-waiting { color: #b45309; background: #ffedd5; }
.report-badge-review { color: #6d28d9; background: #f3e8ff; }
.report-badge-success { color: #0f766e; background: #ccfbf1; }
.report-badge-paid { color: #15803d; background: #dcfce7; }
.report-badge-production { color: #1d4ed8; background: #dbeafe; }
.report-badge-shipping { color: #2563eb; background: #e0f2fe; }
.report-badge-overdue, .report-badge-cancelled { color: #be123c; background: #ffe4e6; }
.report-badge-neutral { color: #6b7280; background: #f3f4f6; }
.empty-state.compact { padding: 12px; border-radius: 14px; background: #fff8ed; }

@media (max-width: 1500px) {
  .dashboard-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dashboard-main-grid, .dashboard-content-grid, .dashboard-bottom-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
  .dashboard-summary-grid, .check-grid, .active-batch-grid, .recap-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-bottom-grid { grid-template-columns: 1fr; }
  .report-filter-bar { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .po-sales-report .report-head { grid-template-columns: 1fr; }
  .po-sales-report .report-head .report-actions { justify-content: flex-start; }
  .po-report-summary.dashboard-summary-grid, .payment-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-insight-grid, .report-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-analytics-grid, .report-analytics-grid.two-col { grid-template-columns: 1fr; }
  .report-profile-card { flex-direction: column; }
}

@media (max-width: 640px) {
  .dashboard-summary-grid, .check-grid, .active-batch-grid, .recap-layout { grid-template-columns: 1fr; }
  .dashboard-panel, .dashboard-summary-card { border-radius: 18px; }
  .trend-chart { gap: 8px; padding-inline: 4px; }
  .trend-bars span { width: 14px; }
  .report-actions, .report-actions .pill, .report-actions .outline-chip { width: 100%; }
  .report-filter-bar { grid-template-columns: 1fr; }
  .po-report-summary.dashboard-summary-grid, .payment-report-grid { grid-template-columns: 1fr; }
  .report-insight-grid, .report-action-grid, .report-profile-stats { grid-template-columns: 1fr; }
  .report-trend-chart { overflow-x: auto; }
}
.filter-panel, .bulk-actions, .form-grid-2, .form-grid-3 { display: grid; gap: 16px; }
.filter-panel { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; margin-bottom: 18px; }
.bulk-panel { margin-bottom: 22px; }
.bulk-actions { grid-template-columns: 1fr 1fr auto; align-items: end; margin-bottom: 18px; }
.product-cell { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.product-cell img { width: 68px; height: 78px; border-radius: 12px; object-fit: cover; background: #fff1df; }
.product-cell div { display: grid; }
.product-cell small, label small, .helper-text { color: #6b625b; font-weight: 750; }
.product-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
}
.product-per-page label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6b625b;
  font-weight: 900;
}
.product-per-page select {
  min-width: 82px;
}
.product-pagination-info {
  color: #6b625b;
  font-weight: 900;
}
.product-page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.product-page-nav .outline-chip {
  min-width: 38px;
  justify-content: center;
  text-align: center;
}
.outline-chip.active-page {
  color: white;
  border-color: transparent;
  background: var(--purple);
}
.outline-chip.disabled {
  opacity: .45;
  pointer-events: none;
}
.product-page-ellipsis {
  color: #8d8179;
  font-weight: 1000;
  padding: 0 2px;
}
.table-actions, .form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.outline-chip {
  min-height: 34px;
  border: 1px solid var(--line);
  background: white;
  color: #6d35c4;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 13px;
  font-weight: 900;
}
.product-editor { margin-top: 20px; }
.product-modal-card {
  width: min(860px, 100%);
  padding: 28px 28px 22px;
  text-align: left;
}
.product-modal-head {
  display: grid;
  gap: 4px;
  margin: 0 48px 14px 0;
}
.product-modal-head span {
  color: var(--purple);
  font-weight: 1000;
}
.product-modal-head h2 {
  margin: 0;
  font-size: 26px;
}
.product-modal-head p {
  margin: 0;
  color: #6b625b;
}
.product-modal .tabbed-form {
  display: grid;
  gap: 14px;
}
.product-modal .tab-buttons {
  margin: 4px 0;
}
.product-modal .tab-panel {
  max-height: none;
}
.product-modal .form-actions {
  position: sticky;
  bottom: -22px;
  justify-content: flex-end;
  padding: 14px 0 0;
  background: linear-gradient(180deg, rgba(255,253,248,0), #fffdf8 28%);
}
.product-duplicate-feedback {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  color: #0d8f54;
  background: #ecfff5;
  border: 1px solid rgba(20, 184, 116, .28);
  font-weight: 900;
}
.product-variant-hidden {
  display: none !important;
}
.tab-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.tab-buttons button { min-height: 38px; border-radius: 999px; background: white; color: #6d35c4; border: 1px solid var(--line); }
.tab-buttons button.active { color: white; background: var(--purple); }
.tab-panel { display: none; border: 1px solid var(--line); border-radius: 18px; padding: 20px; background: rgba(255,253,248,.72); }
.tab-panel.active { display: grid; gap: 16px; }
.form-grid-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }
.series-field { min-width: 0; }
.series-select-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.series-select-row select { min-width: 0; }
.series-quick-add { white-space: nowrap; min-height: 44px; }
.admin-series-modal .series-modal-card { max-width: 540px; text-align: left; }
.series-modal-card h2 { margin-top: 0; }
.series-modal-card p { margin-bottom: 12px; }
.series-modal-feedback { min-height: 20px; font-weight: 850; color: #6b625b; }
.series-modal-feedback.success { color: #0d8f54; }
.series-modal-feedback.error { color: #c41d2b; }
.upload-guide {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff5e8;
  border: 1px dashed rgba(244, 154, 69, .45);
  font-weight: 800;
}
.dropzone {
  padding: 22px;
  border: 2px dashed rgba(181, 109, 232, .45);
  border-radius: 18px;
  background: rgba(247, 237, 255, .5);
}
.upload-preview, .image-preview-line { display: flex; flex-wrap: wrap; gap: 12px; }
.preview-item, .image-preview-line > div {
  width: 150px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: white;
  display: grid;
  gap: 6px;
}
.preview-item img, .image-preview-line img { width: 100px; height: 100px; object-fit: cover; border-radius: 12px; background: #fff1df; }
.image-admin-grid, .media-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.image-admin-grid article, .media-grid article {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
}
.image-admin-grid img, .media-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: #fff1df; }
.variant-row, .size-row-admin {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  margin-bottom: 10px;
}
.variant-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.size-admin-list { display: grid; gap: 10px; }
.size-row-admin {
  grid-template-columns: minmax(110px, 1.1fr) minmax(120px, 1fr) minmax(96px, .8fr) minmax(86px, .7fr) minmax(96px, .8fr) minmax(100px, .8fr) 42px;
  align-items: end;
  margin-bottom: 0;
}
.size-remove-btn {
  width: 42px;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255, 77, 77, .26);
  background: #fff1f1;
  color: #f04444;
  font-size: 20px;
  font-weight: 1000;
}
.size-remove-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
@media (max-width: 900px) {
  .size-row-admin {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .size-remove-btn {
    width: 100%;
  }
}
.small-action { width: max-content; }
.empty-state {
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  min-height: 120px;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.65);
}
.big-empty { min-height: 260px; }
.big-empty > span { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; background: #f0e4ff; color: #6d35c4; font-weight: 900; }
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 18px 0; }
.timeline span, .public-preview {
  padding: 16px;
  border-radius: 16px;
  background: white;
  border: 1px solid var(--line);
  font-weight: 900;
}
.message-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: white;
  margin-bottom: 12px;
}
.message-card.active { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(181,109,232,.12); }
.message-card > div:first-child { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.proof-review-list article {
  display: grid;
  gap: 10px;
  padding: 16px;
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fffdf8;
}
.notification-test-panel form { display: flex; gap: 10px; flex-wrap: wrap; }
.settings-form h2 { grid-column: 1 / -1; }
.settings-form label, .settings-form .checkline { grid-column: 1 / -1; }
.settings-tabs { display: grid; gap: 18px; }
.settings-tab-buttons {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,253,248,.84);
  box-shadow: var(--soft);
}
.settings-tab-buttons button {
  color: #725e54;
  background: white;
  border: 1px solid var(--line);
  min-height: 44px;
}
.settings-tab-buttons button.active {
  color: white;
  background: linear-gradient(180deg, #ff8b4a, #ff5b17);
  border-color: transparent;
}
.settings-panel {
  padding: 0;
  border: 0;
  background: transparent;
}
.settings-panel.active { display: block; }
.settings-section-form {
  padding: 24px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255,253,248,.9);
  box-shadow: var(--soft);
}
.settings-panel-head { grid-column: 1 / -1; }
.settings-panel-head h2 { margin: 0 0 6px; }
.settings-panel-head p { margin: 0 0 12px; color: #7a6b61; font-weight: 800; }
.settings-section-form h3 { grid-column: 1 / -1; margin: 18px 0 0; }
.settings-help-text { grid-column: 1 / -1; margin: -4px 0 2px; color: #7a6b61; font-weight: 800; }
.number-suffix-field { display: flex; align-items: center; gap: 10px; }
.number-suffix-field input { flex: 1; }
.number-suffix-field span { min-width: 46px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff7ee; color: #5f5148; font-weight: 950; text-align: center; }
.settings-section-form .form-grid-2 label,
.settings-section-form .form-grid-3 label,
.settings-section-form .form-grid-2 .checkline,
.settings-section-form .form-grid-3 .checkline { grid-column: auto; }
.footer-cms-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; margin-bottom: 18px; }
.footer-cms-card { display: grid; gap: 16px; }
.footer-logo-preview { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: #fff9f1; }
.footer-logo-preview img { width: min(220px, 100%); max-height: 110px; object-fit: contain; object-position: left center; }
.footer-logo-preview span { color: #7a6b61; font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
.compact-form { grid-template-columns: 1fr; }
.footer-preview-mini { display: grid; gap: 12px; padding: 18px; border-radius: 20px; background: linear-gradient(140deg, #fff9f1, #fffdf8); border: 1px solid rgba(237,198,165,.78); }
.footer-preview-mini img { width: 180px; max-height: 90px; object-fit: contain; object-position: left center; }
.footer-preview-mini p { margin: 0; color: #6d625c; font-weight: 800; }
.footer-admin-social-row a { color: white; }
.code-textarea { min-height: 260px; font-family: Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.45; }
.footer-json-example { grid-column: 1 / -1; }
.footer-json-example pre { max-height: 260px; overflow: auto; padding: 14px; border-radius: 14px; background: #241b19; color: #fff7ed; font-size: 12px; }
.footer-menu-preview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.footer-menu-preview-grid > div { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,253,248,.86); }
.footer-menu-preview-grid h3 { margin: 0 0 10px; font-size: 16px; }
.footer-menu-preview-grid a { display: block; margin: 6px 0; color: #5a4a42; font-weight: 850; overflow-wrap: anywhere; }
.secret-input, .copy-field { display: flex; gap: 10px; align-items: center; }
.secret-input input, .copy-field input { flex: 1; }
.secret-state { display: inline-flex; margin-top: 6px; color: #8b6c5c; font-weight: 800; }
.notification-trigger-grid, .api-status-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  grid-column: 1 / -1;
}
.notification-trigger-grid .checkline {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
}
.api-status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.api-status-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.api-status-grid article {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff6ed;
}
.api-status-grid span { display: block; color: #7a6b61; font-weight: 800; }
.api-status-grid b { display: block; font-size: 24px; }
.settings-test-grid { margin: 0 0 18px; }
.mini-test-form { display: grid; gap: 12px; margin: 0; }
.test-button-row { display: flex; gap: 10px; flex-wrap: wrap; }
.payment-settings-page {
  --ps-line: rgba(35, 44, 64, .11);
  --ps-ink: #202434;
  --ps-muted: #687083;
  --ps-pink: #f04d79;
  --ps-blue: #1f8ecb;
  display: grid;
  gap: 18px;
  color: var(--ps-ink);
}
.payment-settings-title { margin-top: 34px; }
.payment-settings-title > div { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; align-items: center; }
.payment-settings-title h1 { margin: 0; }
.payment-settings-title p { grid-column: 2; margin: -8px 0 0; color: var(--ps-muted); font-weight: 800; }
.payment-settings-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  color: white;
  background: linear-gradient(135deg, #f04d79, #ff7b57);
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 14px 30px rgba(240, 77, 121, .22);
}
.payment-settings-form { display: grid; gap: 18px; }
.ps-card,
.ps-safety-box {
  padding: 22px;
  border: 1px solid var(--ps-line);
  border-radius: 8px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 42px rgba(42, 35, 55, .07);
}
.ps-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.ps-card-head h2 { margin: 0 0 5px; font-size: 22px; }
.ps-card-head p { margin: 0; color: var(--ps-muted); font-weight: 800; line-height: 1.45; }
.ps-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}
.ps-status.ready { color: #087f3d; background: #e8fbef; }
.ps-status.warning { color: #9a5b00; background: #fff4d7; }
.ps-status.muted { color: #5f6877; background: #eef2f7; }
.ps-method-list { display: grid; gap: 12px; }
.ps-method-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--ps-line);
  border-radius: 8px;
  background: #fff;
}
.ps-method-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  color: white;
  font-size: 12px;
  font-weight: 950;
}
.ps-method-icon.manual { background: linear-gradient(135deg, #ee4b77, #ff815f); }
.ps-method-icon.midtrans { background: linear-gradient(135deg, #2aa7df, #8b5cf6); }
.ps-method-row h3 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 5px; font-size: 17px; }
.ps-method-row h3 span {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  color: #a15d00;
  background: #fff1c2;
  font-size: 11px;
}
.ps-method-row p { margin: 0; color: var(--ps-muted); font-weight: 800; line-height: 1.4; }
.ps-toggle {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 72px;
  min-height: 48px;
  cursor: pointer;
}
.ps-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ps-toggle-ui {
  position: relative;
  width: 56px;
  height: 32px;
  border-radius: 999px;
  background: #d9dee8;
  transition: background .18s ease;
}
.ps-toggle-ui::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 10px rgba(28, 28, 38, .18);
  transition: transform .18s ease;
}
.ps-toggle input:checked + .ps-toggle-ui { background: var(--ps-pink); }
.ps-toggle input:checked + .ps-toggle-ui::after { transform: translateX(24px); }
.ps-toggle small { color: var(--ps-muted); font-size: 11px; font-weight: 950; }
.ps-toggle.locked { cursor: default; }
.ps-inline-note {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #f5d596;
  border-radius: 8px;
  background: #fff8e8;
  color: #714a00;
  font-weight: 850;
}
.ps-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ps-locked-rule,
.ps-switch-row,
.ps-info-grid article,
.ps-status-stack article {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--ps-line);
  border-radius: 8px;
  background: #fff;
}
.ps-locked-rule span,
.ps-locked-rule small,
.ps-switch-row small,
.ps-info-grid span,
.ps-status-stack span {
  display: block;
  color: var(--ps-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}
.ps-locked-rule b { display: block; margin: 6px 0; font-size: 18px; }
.ps-switch-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 56px;
  cursor: pointer;
}
.ps-switch-row input[type="checkbox"] { width: 22px; min-height: 22px; accent-color: var(--ps-pink); }
.ps-switch-row.is-disabled { opacity: .58; background: #f8fafc; }
.ps-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ps-info-grid b { display: block; margin-bottom: 5px; }
.ps-credential-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr);
  gap: 22px;
  align-items: start;
}
.ps-field-stack { display: grid; gap: 13px; }
.ps-field-stack label,
.ps-endpoint-list label {
  display: grid;
  gap: 7px;
  color: #2b3140;
  font-weight: 950;
}
.ps-field-stack input,
.ps-field-stack select,
.ps-endpoint-list input {
  min-width: 0;
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--ps-line);
  border-radius: 8px;
  background: #fff;
}
.ps-field-stack small { color: var(--ps-muted); font-weight: 800; }
.ps-status-stack { display: grid; gap: 10px; }
.ps-status-stack article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ps-status-stack article.ok { background: #f0fbf3; border-color: #ccefd7; }
.ps-status-stack article.warn { background: #fff8eb; border-color: #f3ddb5; }
.ps-status-stack article.info { background: #eef8ff; border-color: #cce7f8; }
.ps-purple-note {
  padding: 14px;
  border: 1px solid #dbc8ff;
  border-radius: 8px;
  background: #f4efff;
  color: #4e3095;
  font-weight: 850;
  line-height: 1.45;
}
.ps-endpoint-list { display: grid; gap: 13px; }
.ps-endpoint-list label {
  grid-template-columns: minmax(220px, .45fr) minmax(0, 1fr);
  align-items: center;
}
.ps-endpoint-list .outline-chip,
.ps-field-stack .outline-chip {
  min-height: 44px;
  white-space: nowrap;
}
.ps-safety-box {
  display: flex;
  align-items: center;
  min-height: 74px;
  border-color: #b8d9f7;
  background: linear-gradient(135deg, #eff8ff, #fff);
}
.ps-safety-box b { display: block; margin-bottom: 4px; color: #1f5f97; }
.ps-safety-box p { margin: 0; color: #315a7d; font-weight: 850; line-height: 1.5; }
.ps-action-bar {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-bottom: 20px;
}
.ps-action-bar .pill { min-height: 48px; }
@media (max-width: 980px) {
  .payment-settings-title > div,
  .ps-method-row,
  .ps-rule-grid,
  .ps-info-grid,
  .ps-credential-grid,
  .ps-endpoint-list label { grid-template-columns: 1fr; }
  .payment-settings-title p { grid-column: auto; margin-top: 0; }
  .ps-card-head,
  .ps-action-bar { align-items: flex-start; flex-direction: column; }
  .ps-action-bar,
  .ps-action-bar .pill { width: 100%; }
  .ps-toggle { justify-items: start; }
}
@media (max-width: 560px) {
  .ps-card,
  .ps-safety-box { padding: 16px; }
  .ps-method-row { gap: 10px; }
  .ps-card-head h2 { font-size: 19px; }
  .ps-switch-row { grid-template-columns: 24px minmax(0, 1fr); }
  .copy-field { align-items: stretch; flex-direction: column; }
  .copy-field .outline-chip { width: 100%; }
}
.po-steps { display: grid; gap: 18px; }
.po-step { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,253,248,.78); }
.po-step > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: #ffe8f0; color: #e64c70; font-weight: 900; }
.segmented { display: flex; gap: 10px; flex-wrap: wrap; }
.segmented label, .batch-choice { border: 1px solid var(--line); border-radius: 16px; background: white; padding: 12px 14px; cursor: pointer; }
.batch-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.batch-choice { display: grid; gap: 6px; }
.batch-choice.disabled { opacity: .62; cursor: not-allowed; }
.batch-choice em { font-size: 12px; color: #8a7468; font-style: normal; }
.po-table th, .po-table td { min-width: 130px; }
.po-table input, .po-table select { min-width: 130px; }
.po-thumb-cell { min-width: 72px; }
.po-thumb-cell img { width: 54px; height: 64px; border-radius: 12px; object-fit: cover; background: #fff1df; }
.po-min-order-info { padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.po-min-order-info.min-warn { background: #fff3f0; border: 1px solid #ffc9b8; color: #d63031; }
.po-min-order-info.min-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; }
.po-summary-line { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.po-summary-line span, .po-summary-line b { display: inline-flex; gap: 6px; align-items: center; padding: 9px 12px; border-radius: 999px; background: #fff6ed; color: var(--ink); }
.shipping-result, .small-alert { margin-top: 12px; }
.shipping-loading { display: grid; gap: 8px; justify-items: start; }
.shipping-loading-text { font-size: 14px; font-weight: 850; color: #5f5268; }
.shipping-loading-bar { width: min(100%, 320px); height: 6px; border-radius: 999px; background: rgba(124, 58, 237, .14); overflow: hidden; }
.shipping-loading-bar span { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b5cf6, #fb923c); animation: shippingLoadingMove 1s ease-in-out infinite; }
@keyframes shippingLoadingMove {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(260%); }
}
.saved-address-card, .weight-summary, .shipping-options { grid-column: 1 / -1; }
.saved-address-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
}
.saved-address-card b, .saved-address-card small { display: block; }
.saved-address-card em { display: block; color: #e23a45; font-style: normal; font-weight: 800; }
.weight-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.weight-summary span { padding: 9px 12px; border-radius: 999px; background: #eefbfc; color: #247981; font-weight: 900; }
.provider-badge { display: inline-flex; gap: 6px; align-items: center; margin: 0 0 12px; padding: 9px 13px; border-radius: 999px; background: #fff3e7; color: #7a4a28; font-weight: 900; }
.shipping-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.shipping-option-card { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: white; cursor: pointer; }
.shipping-option-card:has(input:checked) { border-color: #ff7a2f; background: #fff3e7; box-shadow: 0 8px 18px rgba(244, 106, 35, .12); }
.po-total-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.po-total-card p { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: white; display: flex; justify-content: space-between; gap: 10px; }
.po-total-card.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0; }
.order-card-list { display: grid; gap: 16px; margin-top: 16px; }
.order-detail-card { padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: #fffdf8; box-shadow: 0 10px 28px rgba(118,84,45,.06); }
.order-detail-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.order-detail-head > div { display: grid; gap: 6px; }
.inline-details { margin-top: 12px; }
.detail-list { margin-top: 12px; }
.po-timeline { grid-template-columns: repeat(7, minmax(110px, 1fr)); overflow-x: auto; }
.compact-order-card { display: grid; gap: 14px; }
.status-pair { display: flex !important; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
.clean-summary { margin-top: 0; }
.order-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pill.disabled {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  opacity: .72;
  cursor: not-allowed;
  background: #fff1df;
  color: #7a6b61;
}
.order-accordion { width: 100%; }
.order-accordion summary { width: max-content; cursor: pointer; }
.simple-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.simple-timeline span {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff6ed;
  font-weight: 900;
  color: #725e54;
}
.status-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 6px;
}
.status-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: #725e54;
  font-weight: 900;
}
.status-tabs a.active {
  color: white;
  background: linear-gradient(180deg, #ff8b4a, #ff5b17);
  border-color: transparent;
}
.admin-order-table td { vertical-align: middle; }
.muted-line {
  display: block;
  margin-top: 5px;
  color: #8a7468;
  font-size: 12px;
  font-weight: 800;
}
.payment-drawer { display: inline-block; }
.payment-drawer summary { list-style: none; cursor: pointer; }
.payment-drawer summary::-webkit-details-marker { display: none; }
.drawer-panel {
  position: fixed;
  z-index: 90;
  top: 18px;
  right: 18px;
  bottom: 18px;
  width: min(560px, calc(100vw - 36px));
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fffdf8;
  box-shadow: 0 24px 70px rgba(72, 48, 25, .22);
}
.drawer-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}
.drawer-head h2 { margin: 0; }
.drawer-head p { margin: 4px 0 0; color: #7a6b61; font-weight: 800; }
.quick-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.quick-meta-grid p {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  color: #7a6b61;
  font-weight: 800;
}
.quick-meta-grid b { color: var(--ink); }
.proof-preview-box {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff6ed;
  margin-bottom: 14px;
}
.proof-preview-box h3 { margin: 0; }
.admin-proof-thumb {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 14px;
  background: white;
  border: 1px solid var(--line);
}
.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.seller-page { display: grid; gap: 18px; }
.seller-breadcrumb {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #7a7284;
  font-size: 14px;
  font-weight: 900;
}
.seller-breadcrumb span { color: #b9adca; }
.seller-title { margin: 8px 0 4px; }
.seller-title h1 { font-size: 34px; }
.seller-filter-bar {
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) minmax(180px, .8fr) minmax(160px, .7fr) minmax(160px, .7fr) auto auto;
  gap: 14px;
  align-items: end;
}
.seller-filter-bar label { display: grid; gap: 6px; font-size: 12px; color: #7a7284; font-weight: 900; }
.seller-filter-bar input, .seller-filter-bar select {
  min-height: 48px;
  border: 1px solid #e8e1ef;
  border-radius: 12px;
  background: white;
  padding: 0 14px;
}
.seller-reset { min-height: 46px; align-items: center; }
.seller-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.seller-summary-grid article, .seller-table-card, .seller-quick-view, .seller-detail-card, .workflow-header-card, .workflow-stepper, .workflow-main-card, .workflow-side-stack article {
  border: 1px solid #e9e2ef;
  border-radius: 18px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 10px 26px rgba(46, 35, 65, .06);
}
.seller-summary-grid article { padding: 18px; display: grid; gap: 6px; }
.seller-summary-grid p { margin: 0; color: #6c6476; font-weight: 900; }
.seller-summary-grid b { font-size: 24px; color: #231c33; }
.seller-summary-grid small { color: #8a8195; font-weight: 800; }
.summary-icon { width: 42px; height: 42px; border-radius: 15px; display: grid; place-items: center; font-weight: 950; }
.purple-soft { background: #f1e7ff; color: #7b45df; }
.orange-soft { background: #fff0df; color: #f18424; }
.blue-soft { background: #eaf5ff; color: #2377c7; }
.green-soft { background: #e9fbf0; color: #0b9d42; }
.pink-soft { background: #ffe7ef; color: #e64c70; }
.seller-order-layout { display: grid; gap: 18px; align-items: start; }
.seller-order-layout.has-quick-view { grid-template-columns: minmax(0, 1fr) 360px; }
.seller-table-card { overflow: hidden; }
.seller-table table, .seller-items-table table { width: 100%; border-collapse: collapse; }
.seller-table th, .seller-table td, .seller-items-table th, .seller-items-table td {
  padding: 16px 18px;
  border-bottom: 1px solid #eee7f1;
  text-align: left;
  vertical-align: middle;
}
.seller-table th, .seller-items-table th { color: #4b405d; background: #fbf8ff; font-size: 13px; font-weight: 950; }
.seller-table td small, .seller-items-table td small { display: block; color: #8b8298; font-weight: 800; margin-top: 4px; }
.seller-table tr.selected-row { background: #fbf7ff; }
.seller-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}
.seller-status-menunggu { background: #fff3e7; color: #f07118; }
.seller-status-menunggu-pembayaran { background: #fff3e7; color: #f07118; }
.seller-status-menunggu-verifikasi, .seller-status-verifikasi-pelunasan { background: #eaf4ff; color: #1377d4; }
.seller-status-terverifikasi { background: #eaf4ff; color: #1377d4; }
.seller-status-diproses, .seller-status-proses-produksi, .seller-status-pengiriman { background: #efe7ff; color: #6f3ade; }
.seller-status-menunggu-pelunasan { background: #fff3e7; color: #f07118; }
.seller-status-selesai { background: #e9fbf0; color: #0b9d42; }
.seller-status-ditolak, .seller-status-dibatalkan { background: #fff0f2; color: #c41d2b; }
.admin-payment-compact {
  min-width: 178px;
  display: grid;
  gap: 5px;
}
.admin-payment-compact b {
  color: #211a31;
  font-size: 13px;
  line-height: 1.25;
}
.admin-payment-compact small {
  margin: 0;
  color: #81758d;
  font-size: 12px;
  line-height: 1.3;
}
.payment-status-pill {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.2;
  white-space: normal;
}
.payment-tone-success { background: #e9fbf0; color: #0b9d42; }
.payment-tone-warning { background: #fff3e7; color: #f07118; }
.payment-tone-danger { background: #fff0f2; color: #c41d2b; }
.payment-tone-info { background: #eaf4ff; color: #1377d4; }
.payment-tone-neutral { background: #f2edf7; color: #675a75; }
.admin-payment-breakdown {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid #e9e2ef;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 26px rgba(46, 35, 65, .06);
}
.admin-payment-breakdown-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.admin-payment-breakdown h3, .admin-payment-breakdown h4 { margin: 0; color: #211a31; }
.admin-payment-breakdown-head p, .admin-payment-empty-log {
  margin: 5px 0 0;
  color: #7d738a;
  font-weight: 800;
}
.admin-payment-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.admin-payment-totals p {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #efe8f4;
  border-radius: 14px;
  background: #fffafc;
  color: #746b7e;
  font-weight: 900;
}
.admin-payment-totals b {
  display: block;
  margin-top: 4px;
  color: #211a31;
  font-size: 16px;
}
.admin-payment-stage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.admin-payment-stage-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid #efe8f4;
  border-radius: 14px;
  background: #fffdf8;
}
.payment-stage-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.payment-stage-title b { color: #211a31; font-size: 15px; }
.admin-payment-stage-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}
.admin-payment-stage-card dl div {
  display: grid;
  grid-template-columns: minmax(90px, .7fr) minmax(0, 1fr);
  gap: 10px;
}
.admin-payment-stage-card dt {
  color: #7d738a;
  font-size: 12px;
  font-weight: 900;
}
.admin-payment-stage-card dd {
  min-width: 0;
  margin: 0;
  color: #211a31;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.admin-payment-ledger {
  display: grid;
  gap: 10px;
}
.payment-ledger-table table { width: 100%; border-collapse: collapse; }
.payment-ledger-table th, .payment-ledger-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #efe8f4;
  text-align: left;
  vertical-align: top;
}
.payment-ledger-table th {
  color: #5f526e;
  background: #fbf8ff;
  font-size: 12px;
  font-weight: 950;
}
.payment-ledger-table td {
  color: #2a2237;
  font-weight: 850;
}
.payment-ledger-table small {
  display: block;
  margin-top: 4px;
  color: #81758d;
  font-weight: 800;
}
.seller-detail-grid .seller-detail-payment-card {
  grid-column: 1 / -1;
  padding-right: 0;
  border-right: 0;
}
.seller-detail-payment-card .admin-payment-breakdown {
  box-shadow: none;
}
.seller-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.seller-actions.split { justify-content: space-between; margin-top: 18px; }
.wa-dot { color: #22c55e; }
.seller-table-footer { padding: 14px 18px; color: #81758d; font-weight: 800; }
.seller-quick-view {
  position: sticky;
  top: 22px;
  padding: 20px;
  display: grid;
  gap: 12px;
}
.quick-close { position: absolute; top: 14px; right: 16px; font-size: 22px; color: #665674; }
.seller-quick-view h2, .seller-quick-view h3 { margin: 0; }
.seller-quick-view dl, .seller-detail-grid article p, .workflow-side-stack article p, .workflow-info-grid p, .quick-meta-grid p {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 10px;
  align-items: start;
}
.seller-quick-view dt, .seller-detail-grid p, .workflow-side-stack p, .workflow-info-grid p { color: #746b7e; font-weight: 900; }
.seller-quick-view dd, .seller-detail-grid b, .workflow-side-stack b, .workflow-info-grid b { color: #1f1b2d; font-weight: 950; }
.seller-detail-card { padding: 20px; border-top: 3px solid #8a55ef; }
.seller-detail-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 14px; }
.seller-detail-head h2 { margin: 0; font-size: 18px; }
.seller-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 16px; }
.seller-detail-grid article { border-right: 1px solid #eee7f1; padding-right: 16px; }
.seller-detail-grid article:last-child { border-right: 0; }
.seller-detail-grid h3 { margin: 0 0 10px; }
.seller-detail-grid p { margin: 8px 0; }
.detail-proof-thumb { width: 72px; height: 88px; object-fit: cover; border-radius: 10px; background: #fff1df; margin-bottom: 10px; }
.seller-total-line { display: flex; justify-content: flex-end; gap: 24px; padding: 16px 18px; font-weight: 950; }
.seller-total-line b { color: #7b45df; font-size: 18px; }
.order-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(31, 27, 45, .34);
  backdrop-filter: blur(6px);
}
.order-detail-modal {
  width: min(1120px, 100%);
  max-height: min(88vh, 920px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid #e9e2ef;
  border-radius: 22px;
  background: #fffdf8;
  box-shadow: 0 28px 90px rgba(31, 27, 45, .22);
}
.order-detail-modal .seller-detail-head {
  margin: 0;
  padding: 20px 24px;
  border-bottom: 1px solid #eee7f1;
}
.modal-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #e9e2ef;
  border-radius: 50%;
  color: #6d35c4;
  background: white;
  font-size: 24px;
  font-weight: 950;
}
.order-detail-modal-body {
  min-height: 0;
  overflow-y: auto;
  padding: 22px 24px 24px;
  display: grid;
  gap: 16px;
}
.seller-detail-grid.modal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.proof-row {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.modal-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr);
  gap: 16px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
}
.workflow-page { gap: 20px; }
.workflow-back { width: max-content; }
.workflow-header-card {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 24px 28px;
}
.workflow-header-card h1 { margin: 0 0 8px; font-size: 28px; }
.workflow-header-card p { margin: 0 0 16px; font-weight: 900; color: #4f465e; }
.workflow-meta { display: flex; gap: 34px; flex-wrap: wrap; color: #4f465e; font-weight: 900; }
.workflow-total { text-align: right; display: grid; gap: 4px; }
.workflow-total small { color: #746b7e; font-weight: 900; }
.workflow-total b { color: #7b45df; font-size: 26px; }
.workflow-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 24px;
}
.workflow-stepper article, .workflow-stepper a { display: flex; gap: 14px; align-items: center; position: relative; }
.workflow-stepper article span, .workflow-stepper a span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #8d94a2;
  color: white;
  font-weight: 950;
  flex: 0 0 auto;
}
.workflow-stepper article.active span, .workflow-stepper article.done span, .workflow-stepper a.active span, .workflow-stepper a.done span { background: linear-gradient(180deg, #8a55ef, #6630d4); }
.workflow-stepper a.locked span { background: #22c55e; }
.workflow-stepper article b, .workflow-stepper a b { display: block; color: #251f32; }
.workflow-stepper article small, .workflow-stepper a small { display: block; color: #7e738a; font-weight: 800; }
.workflow-stepper-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.workflow-two-col, .workflow-payment-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 22px; align-items: start; }
.workflow-payment-grid { grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); }
.workflow-main-card, .workflow-side-stack article { padding: 22px; }
.workflow-main-card h2, .workflow-side-stack h2 { margin: 0 0 18px; font-size: 18px; }
.workflow-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin-bottom: 22px; }
.workflow-info-grid.single { grid-template-columns: 1fr; }
.workflow-info-grid p, .workflow-side-stack p { margin: 0; padding: 9px 0; }
.workflow-side-stack { display: grid; gap: 18px; }
.workflow-side-stack textarea, .verification-form textarea { min-height: 96px; }
.workflow-action-bar {
  position: sticky;
  bottom: 18px;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border: 1px solid #e9e2ef;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 48px rgba(46, 35, 65, .12);
}
.workflow-action-bar div { display: grid; gap: 3px; }
.workflow-action-bar small { color: #7e738a; font-weight: 800; }
.workflow-proof-card { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; }
.workflow-proof-card.large {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: min(260px, 100%);
}
.proof-image-frame {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}
.workflow-proof-card img, .proof-file-placeholder {
  width: 100%;
  aspect-ratio: .78;
  object-fit: cover;
  border: 1px solid #eee7f1;
  border-radius: 14px;
  background: white;
}
.proof-image-frame .seller-status {
  position: absolute;
  top: 12px;
  right: 12px;
  box-shadow: 0 8px 18px rgba(46, 35, 65, .08);
}
.proof-file-placeholder { display: grid; place-items: center; font-weight: 950; color: #7b45df; }
.workflow-proof-card p { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0; color: #746b7e; font-weight: 900; }
.proof-meta-list { display: grid; gap: 4px; }
.proof-large-action { display: grid; }
.workflow-proof-card b { color: #1f1b2d; }
.payment-proof-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; }
.payment-proof-layout .workflow-info-grid.single {
  max-width: 520px;
  gap: 10px;
}
.payment-proof-layout .workflow-info-grid.single p {
  grid-template-columns: minmax(150px, .7fr) minmax(180px, 1fr);
  padding: 7px 0;
}
.payment-stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.payment-stat-row p {
  margin: 0;
  padding: 16px;
  border: 1px solid #eee7f1;
  border-radius: 14px;
  background: #fffdf8;
  color: #746b7e;
  font-weight: 900;
}
.payment-stat-row b { display: block; color: #7b45df; font-size: 18px; }
.workflow-info-box, .success-note {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px dashed #b993f1;
  border-radius: 14px;
  background: #f7edff;
  color: #6d35c4;
  font-weight: 900;
}
.verification-form { display: grid; gap: 16px; }
.field-label { font-weight: 950; color: #4f465e; }
.verification-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.verification-options label {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid #e9e2ef;
  border-radius: 14px;
  background: white;
  cursor: pointer;
}
.verification-options label:has(input:checked) { border-color: #8a55ef; background: #fbf7ff; box-shadow: 0 0 0 3px rgba(138,85,239,.08); }
.verification-options input { width: 18px; height: 18px; }
.verification-options small { color: #7e738a; font-weight: 800; }
.workflow-bottom-links { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-top: 20px; }
.vertical-timeline { display: grid; gap: 14px; }
.vertical-timeline span { position: relative; padding-left: 28px; color: #7e738a; font-weight: 900; }
.vertical-timeline span::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #aeb4c0; background: white; }
.vertical-timeline span.done::before, .vertical-timeline span.active::before { background: #7b45df; border-color: #7b45df; }
.vertical-timeline span.active { color: #7b45df; }
.po-hero {
  position: relative;
  min-height: 300px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
  gap: 30px;
  align-items: center;
  padding: 32px 64px 12px;
  overflow: hidden;
}
.po-hero h1 { margin: 14px 0 10px; font-size: clamp(42px, 5vw, 68px); line-height: 1.04; }
.po-hero h1 span { color: #ff4f10; }
.po-hero p { max-width: 620px; color: #4b4b4b; font-weight: 800; }
.po-hero img { max-height: 240px; object-fit: contain; justify-self: end; filter: drop-shadow(0 18px 18px rgba(118,84,45,.12)); }
.po-breadcrumb { display: inline-flex; padding: 8px 18px; border: 1px solid #ffd9c9; border-radius: 999px; color: #ff4f10; background: white; font-weight: 950; }
.po-status-shell {
  width: calc(100% - 48px);
  max-width: 1400px;
  margin: 0 auto 28px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--soft);
}
.po-status-head { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; margin-bottom: 12px; }
.po-status-head h2 { margin: 0; font-size: 28px; }
.po-mini-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: 12px;
}
.po-mini-summary article {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 16px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fffdf8;
  text-align: center;
}
.po-mini-summary small { color: #7a6b61; font-style: normal; font-weight: 800; font-size: 13px; }
.po-mini-summary b { font-size: 28px; font-weight: 1000; }
.po-mini-summary .stat-total b { color: #7b45df; }
.po-mini-summary .stat-bayar { border-color: #ffd9c9; background: #fff7f3; }
.po-mini-summary .stat-bayar b { color: #ff4f10; }
.po-mini-summary .stat-proses { border-color: #c9e8ff; background: #f3f9ff; }
.po-mini-summary .stat-proses b { color: #0984e3; }
.po-mini-summary .stat-lunas { border-color: #ffd9a8; background: #fff9f0; }
.po-mini-summary .stat-lunas b { color: #e67e22; }
.po-status-tabs { display: flex; flex-wrap: wrap; gap: 0; margin: 16px 0 20px; }
.po-status-tabs a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
  border: 1px solid #e8d9cc;
  background: white;
  color: #2f2f2f;
  font-weight: 950;
}
.po-status-tabs a:first-child { border-radius: 999px 0 0 999px; }
.po-status-tabs a:last-child { border-radius: 0 999px 999px 0; }
.po-status-tabs a.active { color: white; background: linear-gradient(180deg, #ff7a2f, #ff4f10); border-color: #ff5b17; }
.po-stage-list { display: grid; gap: 16px; }
.po-list-card, .po-payment-page-card, .po-process-card, .po-final-card, .po-complete-card {
  border: 1px solid #eedfd2;
  border-radius: 18px;
  background: rgba(255,253,248,.9);
  box-shadow: 0 8px 22px rgba(118,84,45,.06);
}
.po-list-card {
  display: grid;
  grid-template-columns: 260px 190px 1fr 140px 180px;
  gap: 16px;
  align-items: center;
  padding: 18px;
}
.po-order-id, .po-product-mini { display: flex; gap: 14px; align-items: center; }
.po-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 14px; background: #fff0f2; color: #e64c70; font-weight: 950; font-size: 24px; }
.po-icon.diproses { background: #fff3e7; color: #ff5b17; }
.po-icon.selesai { background: #e9fbf0; color: #0b9d42; }
.po-order-id b, .po-product-mini b { display: block; font-size: 18px; }
.po-order-id small, .po-product-mini small { display: block; color: #7a6b61; font-weight: 800; margin-top: 5px; }
.po-product-mini img { width: 64px; height: 72px; border-radius: 12px; object-fit: cover; background: #fff1df; }
.po-badge { display: inline-flex; width: max-content; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 950; }
.po-badge.menunggu-pembayaran { background: #fff3e7; color: #ff4f10; }
.po-badge.diproses, .po-badge.menunggu-pelunasan { background: #efe7ff; color: #7b45df; }
.po-badge.selesai { background: #e9fbf0; color: #0b9d42; }
.po-list-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.po-list-metrics p, .po-list-status { margin: 0; padding-left: 14px; border-left: 1px solid #eadccf; color: #7a6b61; font-weight: 800; }
.po-list-metrics b, .po-list-status b { display: block; color: var(--ink); font-size: 16px; }
.po-list-actions { display: grid; gap: 10px; }
.outline-chip.track { border-color: #22c55e; color: #0b9d42; }
.po-detail-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #f0e6dc;
  color: #7b45df;
  font-weight: 950;
  text-decoration: none;
}
.po-detail-link span { font-size: 20px; }
.tagihan-highlight { color: #ff4f10 !important; }
.po-payment-page-card, .po-process-card, .po-final-card, .po-complete-card { padding: 18px; }
.po-payment-header {
  display: flex;
  gap: 24px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid #eadccf;
}
.po-payment-header > div { flex: 1; display: flex; gap: 12px; align-items: center; }
.po-payment-header b { font-size: 24px; }
.po-payment-header p { margin: 0; color: #7a6b61; font-weight: 800; }
.po-payment-header p b { display: block; color: var(--ink); font-size: 15px; }
.po-payment-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr .9fr .9fr;
  gap: 16px;
  margin-top: 16px;
}
.po-payment-body {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(190px, .85fr) minmax(190px, .85fr) minmax(220px, .9fr);
  grid-template-areas:
    "products dp later bank"
    "upload upload timeline timeline";
  gap: 16px;
  margin-top: 16px;
}
.po-payment-body .po-product-table table { min-width: auto; width: 100%; font-size: 12px; }
.po-payment-body .po-product-table { overflow-x: visible; }
.po-toggle-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #e8d9cc;
  border-radius: 50%;
  background: white;
  font-size: 18px;
  cursor: pointer;
  transition: transform .2s;
  flex-shrink: 0;
}
.po-payment-page-card.collapsed .po-payment-body {
  display: none;
}
.po-payment-page-card.collapsed .po-toggle-btn {
  transform: rotate(-90deg);
}
.po-products-box, .po-stage-pay-card, .po-bank-card, .po-upload-card, .po-side-timeline, .po-process-grid section, .po-final-grid section, .po-complete-grid section, .po-testimonial-cta {
  padding: 16px;
  border: 1px solid #eadccf;
  border-radius: 16px;
  background: white;
}
.po-stage-pay-card h3, .po-bank-card h3, .po-upload-card h3, .po-side-timeline h3, .po-process-grid h3, .po-final-grid h3, .po-complete-card h3 { margin: 0 0 12px; }
.po-stage-pay-card h3 small { float: right; color: #ff4f10; font-size: 11px; }
.po-stage-pay-card p, .po-bank-card p, .po-process-grid p, .po-final-grid p, .po-complete-grid p { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0; color: #6f6259; font-weight: 800; }
.po-stage-pay-card div, .po-bank-card div { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; margin-top: 12px; border-top: 1px dashed #eadccf; font-weight: 950; }
.po-stage-pay-card div b, .po-bank-card div b, .po-final-summary div b { color: #ff4f10; font-size: 26px; }
.po-stage-pay-card small, .po-bank-card small { display: block; margin-top: 12px; color: #7a6b61; font-weight: 800; }
.po-stage-pay-card.later { border-color: #dcc8ff; background: #fbf7ff; }
.po-stage-pay-card.later div b { color: #7b45df; }
.po-upload-card { display: grid; gap: 12px; }
.po-upload-drop {
  min-height: 150px;
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  border: 2px dashed #b993f1;
  border-radius: 16px;
  background: #fbf7ff;
  color: #7b45df;
  cursor: pointer;
}
.po-upload-drop input { max-width: 260px; }
.po-info-box, .po-notification-box, .po-reassurance {
  padding: 13px 16px;
  border: 1px dashed #b993f1;
  border-radius: 14px;
  background: #f7edff;
  color: #6d35c4;
  font-weight: 900;
}
.po-side-timeline { display: grid; gap: 16px; }
.po-side-timeline span, .po-vertical-steps span { position: relative; padding-left: 32px; color: #7a6b61; font-weight: 900; }
.po-side-timeline span::before, .po-vertical-steps span::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #e5e2dc; display: grid; place-items: center; }
.po-side-timeline span.done::before, .po-side-timeline span.active::before, .po-vertical-steps span.done::before, .po-vertical-steps span.active::before { background: #22c55e; }
.po-side-timeline span.active { color: #ff4f10; }
.po-product-table table { width: 100%; border-collapse: collapse; }
.po-product-table th, .po-product-table td { padding: 9px 8px; border-bottom: 1px solid #f0e6dc; text-align: left; font-size: 13px; }
.po-product-table th { color: #594e47; font-weight: 950; }
.po-product-total, .po-total-row { display: flex; justify-content: space-between; gap: 16px; padding-top: 12px; margin-top: 8px; font-weight: 950; }
.po-product-total strong, .po-total-row b { color: #ff4f10; }
.po-process-top, .po-final-summary {
  display: grid;
  grid-template-columns: 90px minmax(190px, 1fr) repeat(7, minmax(95px, auto));
  gap: 14px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #eadccf;
}
.po-process-top img, .po-final-summary img { width: 78px; height: 86px; object-fit: cover; border-radius: 12px; background: #fff1df; }
.po-process-top h3, .po-final-summary h3 { margin: 0; }
.po-process-top p, .po-final-summary p { margin: 0; color: #7a6b61; font-weight: 800; }
.po-process-top p b, .po-final-summary p b { display: block; color: var(--ink); }
.po-progress-line {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 0;
}
.po-progress-line span { position: relative; text-align: center; color: #8a7c72; font-weight: 900; }
.po-progress-line span::before { content: ""; display: block; width: 28px; height: 28px; border-radius: 50%; margin: 0 auto 6px; background: #d9d9d9; }
.po-progress-line span.done::before { background: #22c55e; }
.po-progress-line span.active::before { background: #ff5b17; }
.po-process-grid { display: grid; grid-template-columns: .8fr 1.2fr 1fr 1fr; gap: 14px; }
.po-reassurance { margin-top: 14px; border-color: #ffd79e; background: #fff8e8; color: #7a4a28; }
.po-ready-banner, .po-success-banner {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  margin-bottom: 14px;
  border: 1px solid #ffc168;
  border-radius: 14px;
  background: #fff8e8;
  color: #ff4f10;
  font-weight: 900;
}
.po-ready-banner span, .po-success-banner span { display: block; color: #5b514b; }
.po-final-summary { grid-template-columns: 90px minmax(190px, 1fr) repeat(6, minmax(120px, auto)); }
.po-final-summary > div:last-child {
  padding: 14px;
  border: 1px solid #ffd9c9;
  border-radius: 14px;
  background: #fff3e7;
  text-align: center;
}
.po-final-summary > div:last-child small { display: block; color: #7a6b61; font-weight: 800; }
.po-final-grid { display: grid; grid-template-columns: 1.1fr .9fr .9fr; gap: 14px; margin-top: 14px; }
.po-vertical-steps { display: grid; gap: 14px; margin-bottom: 16px; }
.po-complete-grid { display: grid; grid-template-columns: 1fr 360px; gap: 16px; }
.po-complete-main { display: grid; gap: 12px; }
.po-shipping-done { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 12px; align-items: center; }
.po-shipping-done h3, .po-shipping-done .po-info-box { grid-column: 1 / -1; }
.po-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.po-proof-grid a { display: grid; gap: 4px; place-items: center; padding: 12px; border: 1px solid #e8d9cc; border-radius: 14px; background: #fffdf8; color: #0b9d42; font-weight: 900; text-decoration: none; text-align: center; }
.po-proof-grid a b { color: var(--ink); font-size: 13px; }
.po-proof-grid a em { font-style: normal; font-size: 12px; }
.po-testimonial-cta { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-top: 14px; border-color: #ffd79e; background: #fff8e8; }
.po-testimonial-cta h3, .po-testimonial-cta p { margin: 0; }
.po-login-card { margin: 0 64px 24px; }
/* Cek Status PO Reseller layout repair: keep wide PO grids bounded inside cards. */
.po-status-shell, .po-status-shell * { min-width: 0; }
.po-status-shell { overflow: hidden; }
.po-status-tabs { gap: 10px; align-items: center; }
.po-status-tabs a,
.po-status-tabs a:first-child,
.po-status-tabs a:last-child { border-radius: 999px; white-space: nowrap; }
.po-list-card {
  grid-template-columns: minmax(200px, 1.1fr) minmax(160px, .8fr) minmax(0, 1.6fr) minmax(130px, .7fr) minmax(140px, auto);
}
.po-list-metrics b, .po-list-status b {
  word-break: break-word;
  overflow-wrap: break-word;
}
.po-list-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.po-list-actions .pill, .po-list-actions .outline-chip { width: 100%; }
.po-payment-grid {
  grid-template-columns: minmax(260px, 1fr) minmax(230px, .85fr) minmax(230px, .85fr) minmax(230px, .9fr);
  grid-template-areas:
    "products dp later bank"
    "upload upload upload timeline";
}
.po-products-box { grid-area: products; }
.po-stage-pay-card.now { grid-area: dp; }
.po-stage-pay-card.later { grid-area: later; }
.po-bank-card { grid-area: bank; }
.po-upload-card { grid-area: upload; }
.po-side-timeline { grid-area: timeline; }
.po-product-table table { min-width: auto; width: 100%; }
.po-stage-pay-card div b, .po-bank-card div b, .po-final-summary div b {
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.1;
}
.po-upload-drop { width: 100%; min-height: 132px; padding: 18px; }
.po-upload-drop input { width: min(100%, 280px); }
.po-product-table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.po-product-table table { min-width: 0; width: 100%; }
.po-process-top, .po-final-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}
.po-process-top img, .po-final-summary img { flex: 0 0 78px; }
.po-process-top > div:first-of-type, .po-final-summary > div:first-of-type { flex: 1 1 200px; min-width: 0; }
.po-process-top p, .po-final-summary p, .po-process-top > .po-badge, .po-final-summary > .po-badge {
  flex: 1 1 100px;
  min-width: 0;
  padding: 10px 12px;
  border-left: 1px solid #eadccf;
  background: rgba(255,255,255,.64);
  border-radius: 12px;
  font-size: 13px;
  word-break: break-word;
}
.po-process-top p b, .po-final-summary p b {
  font-size: 14px;
  word-break: break-word;
}
.po-final-summary > div:last-child { flex: 1 1 260px; min-width: min(100%, 260px); }
.po-process-grid { grid-template-columns: minmax(220px, .8fr) minmax(360px, 1.2fr); }
.po-final-grid { grid-template-columns: minmax(320px, 1.1fr) minmax(280px, .9fr) minmax(280px, .9fr); }
.po-complete-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
.po-shipping-done { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.po-shipping-done .outline-chip { width: max-content; }
.po-proof-grid { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }

@media (max-width: 1180px) {
  .po-status-head,
  .po-list-card,
  .po-payment-grid,
  .po-process-grid,
  .po-final-grid,
  .po-complete-grid { grid-template-columns: 1fr; }
  .po-payment-grid {
    grid-template-areas:
      "products"
      "dp"
      "later"
      "bank"
      "upload"
      "timeline";
  }
  .po-payment-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "products"
      "dp"
      "later"
      "bank"
      "upload"
      "timeline";
  }
  .po-mini-summary { grid-template-columns: repeat(2, 1fr); }
  .po-list-metrics, .po-shipping-done { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .po-status-shell { width: calc(100% - 28px); padding: 16px; border-radius: 22px; }
  .po-status-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .po-status-tabs::-webkit-scrollbar { display: none; }
  .po-mini-summary { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .po-mini-summary article { padding: 12px 8px; border-radius: 14px; }
  .po-mini-summary b { font-size: 24px; }
  .po-mini-summary small { font-size: 11px; }
  .po-list-metrics, .po-shipping-done, .po-progress-line { grid-template-columns: 1fr; }
  .po-payment-header, .po-ready-banner, .po-success-banner, .po-testimonial-cta { display: grid; }
  .po-process-top p,
  .po-final-summary p,
  .po-process-top > .po-badge,
  .po-final-summary > .po-badge,
  .po-final-summary > div:last-child { flex-basis: 100%; }
  .po-testimonial-cta .pill,
  .po-testimonial-cta .outline-chip,
  .po-shipping-done .outline-chip { width: 100%; }

  /* ── Mobile: Tab Semua - Clean order card ── */
  .po-list-card {
    grid-template-columns: 1fr !important;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }
  .po-list-card .po-order-id { display: none; }
  .po-list-card .po-product-mini {
    display: grid;
    grid-template-columns: 68px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 16px;
  }
  .po-list-card .po-product-mini img {
    width: 68px;
    height: 68px;
    border-radius: 14px;
  }
  .po-list-card .po-product-mini b { font-size: 16px; line-height: 1.2; }
  .po-list-card .po-product-mini small { font-size: 12px; }
  .po-list-card .po-badge {
    position: absolute;
    right: 16px;
    top: 16px;
  }
  .po-list-card .po-product-mini { position: relative; }
  .po-list-card .po-list-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0 16px 12px;
    border-top: 1px solid #f5ede5;
  }
  .po-list-card .po-list-metrics p {
    padding: 10px 0;
    border-left: 0;
    font-size: 12px;
  }
  .po-list-card .po-list-metrics p:nth-child(odd) { padding-right: 8px; }
  .po-list-card .po-list-metrics p:nth-child(even) { padding-left: 8px; border-left: 1px solid #f0e6dc; }
  .po-list-card .po-list-metrics b { font-size: 14px; }
  .po-list-card .po-list-status { display: none; }
  .po-list-card .po-list-actions {
    padding: 0 16px 16px;
    gap: 8px;
  }
  .po-list-card .po-list-actions .pill,
  .po-list-card .po-list-actions .outline-chip { font-size: 13px; min-height: 36px; }
  .po-list-card .po-detail-link {
    margin: 0 16px;
    padding: 14px 0;
    border-top: 1px solid #f0e6dc;
  }

  /* ── Mobile: Tab Menunggu Pembayaran ── */
  .po-payment-page-card { padding: 0 !important; overflow: hidden; }
  .po-payment-header {
    padding: 16px !important;
    border-bottom: 1px solid #f0e6dc;
    gap: 10px;
  }
  .po-payment-header b { font-size: 18px !important; }
  .po-payment-body {
    padding: 16px;
    gap: 14px;
  }
  .po-products-box,
  .po-stage-pay-card,
  .po-bank-card,
  .po-upload-card,
  .po-side-timeline {
    padding: 14px;
    border-radius: 14px;
  }
  .po-stage-pay-card p,
  .po-bank-card p {
    font-size: 13px;
  }
  .po-stage-pay-card div b,
  .po-bank-card div b {
    font-size: 20px !important;
  }
  .po-upload-drop { min-height: 110px; padding: 14px; }

  /* ── Mobile: Tab Diproses ── */
  .po-process-card { padding: 0 !important; overflow: hidden; }
  .po-process-top {
    padding: 16px !important;
    gap: 10px;
    border-bottom: 1px solid #f0e6dc;
  }
  .po-process-top img { flex: 0 0 60px; width: 60px; height: 66px; }
  .po-process-top p {
    flex-basis: calc(50% - 8px) !important;
    padding: 8px 10px;
    font-size: 12px;
  }
  .po-process-top p b { font-size: 13px; }
  .po-progress-line {
    padding: 14px 16px !important;
    gap: 6px;
  }
  .po-progress-line span { font-size: 12px; padding-left: 30px; text-align: left; }
  .po-progress-line span::before { width: 22px; height: 22px; margin: 0; position: absolute; left: 0; }
  .po-progress-line span { position: relative; }
  .po-process-grid {
    padding: 0 16px 16px;
    gap: 14px;
  }
  .po-process-grid section { padding: 14px; border-radius: 14px; }
  .po-process-grid p { font-size: 13px; }
  .po-reassurance { margin: 0 16px 16px; font-size: 13px; }

  /* ── Mobile: Tab Menunggu Pelunasan ── */
  .po-final-card { padding: 0 !important; overflow: hidden; }
  .po-ready-banner {
    margin: 0 !important;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #ffc168;
    padding: 14px 16px;
    font-size: 14px;
  }
  .po-final-summary {
    padding: 16px !important;
    gap: 10px;
    border-bottom: 1px solid #f0e6dc;
  }
  .po-final-summary img { flex: 0 0 60px; width: 60px; height: 66px; }
  .po-final-summary p {
    flex-basis: calc(50% - 8px) !important;
    padding: 8px 10px;
    font-size: 12px;
  }
  .po-final-summary p b { font-size: 13px; }
  .po-final-summary > div:last-child {
    padding: 12px;
    border-radius: 12px;
  }
  .po-final-summary > div:last-child b { font-size: 22px !important; }
  .po-final-grid {
    padding: 0 16px 16px;
    gap: 14px;
  }
  .po-final-grid section { padding: 14px; border-radius: 14px; }
  .po-final-grid p { font-size: 13px; }

  /* ── Mobile: Tab Selesai ── */
  .po-complete-card { padding: 0 !important; overflow: hidden; }
  .po-success-banner {
    margin: 0 !important;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #a8e6cf;
    padding: 14px 16px;
    font-size: 14px;
    background: #e9fbf0;
    color: #0b9d42;
  }
  .po-success-banner span { color: #5b514b; }
  .po-complete-grid { padding: 16px; gap: 14px; }
  .po-complete-main { gap: 12px; }
  .po-complete-main .po-process-top { padding: 0 !important; border-bottom: 0; }
  .po-shipping-done {
    padding: 14px;
    border-radius: 14px;
    gap: 8px;
  }
  .po-shipping-done p { font-size: 13px; }
  .po-proof-grid { grid-template-columns: repeat(2, 1fr); }
  .po-testimonial-cta {
    margin: 0 16px 16px !important;
    padding: 14px;
    border-radius: 14px;
    gap: 10px;
  }
  .po-testimonial-cta h3 { font-size: 16px; }
  .po-testimonial-cta p { font-size: 13px; }
}
.compact-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0; }
.mini-status-list { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.alert-panel textarea, textarea[readonly] { min-height: 170px; }
.empty-state.compact { padding: 18px; min-height: auto; }

@media (max-width: 980px) {
  body { background: linear-gradient(180deg, #fff8ef, var(--cream)); }
  .page-shell { width: min(430px, 100%); margin: 0 auto; min-height: 100vh; border-radius: 0; border: 0; }
  .site-header { min-height: 94px; padding: 18px 22px; justify-content: space-between; }
  .brand img { width: 174px; }
  .desktop-nav, .header-actions { display: none; }
  .mobile-menu { display: grid; width: 46px; height: 46px; background: transparent; color: var(--ink); font-size: 28px; padding: 0; }
  .mobile-drawer {
    display: none; position: absolute; top: 82px; left: 18px; right: 18px; padding: 16px; border-radius: 20px; background: white; box-shadow: var(--shadow); border: 1px solid var(--line);
  }
  .mobile-drawer.open { display: grid; gap: 12px; }
  .hero, .subhero { grid-template-columns: 1fr; gap: 18px; padding: 26px 28px 34px; min-height: auto; overflow: hidden; }
  .hero h1, .subhero h1 { font-size: 44px; }
  .hero-product { order: 2; transform: scale(1.1); transform-origin: center; }
  .subhero img { justify-self: center; max-height: 190px; }
  .feature-strip { gap: 14px; }
  .series-grid, .product-grid, .why-grid, .testimonial-grid, .info-grid, .steps, .contact-grid { grid-template-columns: 1fr; padding: 0 28px; }
  .series-card { grid-template-columns: 1fr; min-height: auto; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .product-card { box-shadow: none; border: 0; background: transparent; }
  .product-card a { padding: 0; }
  .product-card img { border-radius: 18px; }
  .product-card h3 { font-size: 20px; }
  .product-card p, .product-card small, .outline-btn { display: none; }
  .section-head { padding: 34px 28px 14px; }
  .section-head h2 { font-size: 30px; text-align: left; }
  .why-grid, .testimonial-grid, .info-grid, .steps { padding: 0 28px; }
  .why-grid { grid-template-columns: 1fr; }
  .wide-cta, .instagram-section, .content-block, .faq, .content-card.rich-text, .form-card, .result-card { margin: 28px; }
  .wide-cta, .result-card { grid-template-columns: 1fr; padding: 24px; }
  .instagram-section { grid-template-columns: 1fr; padding: 22px; }
  .instagram-copy h2 { font-size: 28px; }
  .footer { grid-template-columns: 1fr 1fr; padding: 36px 28px 112px; }
  .footer > div:first-child { grid-column: 1 / -1; }
  .bottom-nav {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 45;
    width: min(430px, 100%); min-height: 84px; background: rgba(255, 253, 248, .96); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(118,84,45,.09);
  }
  .bottom-nav a { display: grid; place-items: center; gap: 3px; font-size: 11px; font-weight: 800; color: #68605a; padding: 12px 0 10px; text-decoration: none; }
  .bottom-nav .nav-icon { display: flex; align-items: center; justify-content: center; }
  .bottom-nav .nav-icon svg { width: 22px; height: 22px; }
  .bottom-nav a.active { color: #ff5b17; }
  .bottom-nav a.active .nav-icon svg { stroke-width: 2.5; }
  .whatsapp-float { width: 56px; height: 56px; right: 16px; bottom: 100px; }
  .whatsapp-float svg { width: 28px; height: 28px; }
  .product-detail { grid-template-columns: 1fr; padding: 24px 28px; gap: 24px; }
  .gallery { grid-template-columns: 1fr; }
  .thumbs { grid-template-columns: repeat(4, 1fr); order: 2; }
  .product-copy h1 { font-size: 44px; }
  .size-row { grid-template-columns: repeat(3, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  dl { grid-template-columns: 1fr; }
  .auth-page { grid-template-columns: 1fr; padding: 26px; }
  .auth-visual { text-align: center; }
  .auth-logo { width: 220px; margin: 0 auto 26px; }
  .auth-page h1 { font-size: 44px; }
  .auth-product { margin: 18px auto; }
  .auth-card { padding: 28px; border-radius: 28px; }
  .auth-card h2 { font-size: 34px; }
  .dashboard-layout { grid-template-columns: 1fr; padding: 26px 24px; }
  .account-shell { width: min(430px, 100%); }
  .account-dashboard { padding: 22px; gap: 18px; }
  .stat-grid, .quick-grid { grid-template-columns: repeat(2, 1fr); padding: 20px 0; }
  .quick-grid a { min-height: 150px; }
  .welcome-card { padding: 24px; }
  .welcome-card h1 { font-size: 34px; }
  .admin-shell, .admin-shell.admin-collapsed { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; padding: 24px; }
  .admin-sidebar nav { grid-template-columns: repeat(2, 1fr); }
  .admin-main { padding: 24px; }
  .admin-top, .admin-grid-2, .admin-stats, .line-form, .user-row, .settings-form, .filter-panel, .bulk-actions, .form-grid-2, .form-grid-3, .series-select-row, .variant-row, .size-row-admin, .timeline, .po-step, .batch-choice-grid, .po-total-card, .po-total-card.compact, .compact-stats, .notification-trigger-grid, .api-status-grid, .shipping-options, .simple-timeline, .quick-meta-grid, .quick-action-grid, .seller-filter-bar, .seller-summary-grid, .seller-order-layout.has-quick-view, .seller-detail-grid, .workflow-stepper, .workflow-two-col, .workflow-payment-grid, .workflow-info-grid, .payment-proof-layout, .payment-stat-row, .verification-options, .workflow-action-bar, .po-hero, .po-status-head, .po-payment-grid, .po-list-card, .po-list-metrics, .po-process-top, .po-final-summary, .po-progress-line, .po-process-grid, .po-final-grid, .po-complete-grid, .po-shipping-done, .dashboard-main-grid, .dashboard-content-grid, .dashboard-bottom-grid, .active-batch-grid, .recap-layout, .footer-cms-grid, .footer-menu-preview-grid { grid-template-columns: 1fr; }
  .dashboard-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-head { align-items: flex-start; flex-direction: column; }
  .dashboard-head-actions { flex-wrap: wrap; }
  .admin-title { align-items: flex-start; flex-direction: column; }
  .admin-title-actions { justify-content: flex-start; }
  .settings-tab-buttons { flex-wrap: nowrap; overflow-x: auto; }
  .settings-tab-buttons button { white-space: nowrap; }
  .settings-section-form { padding: 18px; }
  .order-detail-head { display: grid; }
  .status-pair { justify-content: flex-start; }
  .status-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .status-tabs a { white-space: nowrap; }
  .drawer-panel { inset: 10px; width: auto; padding: 18px; border-radius: 20px; }
  .seller-quick-view { position: static; }
  .workflow-header-card, .workflow-meta, .workflow-bottom-links { display: grid; text-align: left; }
  .workflow-total { text-align: left; }
  .admin-payment-breakdown-head { display: grid; }
  .admin-payment-totals, .admin-payment-stage-grid { grid-template-columns: 1fr; }
  .admin-payment-stage-card dl div { grid-template-columns: 1fr; }
  .admin-payment-compact { min-width: 150px; }
  .workflow-action-bar { position: static; }
  .workflow-proof-card, .workflow-proof-card.large { grid-template-columns: 1fr; }
  .order-modal-backdrop { padding: 0; place-items: stretch; }
  .order-detail-modal { width: 100%; max-height: 100vh; border-radius: 0; }
  .seller-detail-grid.modal-grid, .modal-form-grid { grid-template-columns: 1fr; }
  .modal-actions { display: grid; }
  .po-hero { padding: 26px 28px 12px; }
  .po-hero img { justify-self: center; max-height: 180px; }
  .po-status-shell { width: calc(100% - 32px); padding: 18px; }
  .po-mini-summary { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .po-mini-summary article { border-radius: 14px; }
  .po-status-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .po-status-tabs::-webkit-scrollbar { display: none; }
  .po-status-tabs a,
  .po-status-tabs a:first-child,
  .po-status-tabs a:last-child {
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 999px;
    padding: 0 18px;
    min-height: 36px;
    font-size: 13px;
    border-color: #e0d5ca;
  }
  .po-status-tabs a.active {
    background: linear-gradient(180deg, #9b59b6, #7b45df);
    border-color: #7b45df;
  }
  .po-payment-header, .po-ready-banner, .po-success-banner, .po-testimonial-cta { display: grid; }
  .po-upload-card { grid-column: auto; }
  .po-list-actions, .po-testimonial-cta .pill, .po-testimonial-cta .outline-chip { width: 100%; }
  .image-admin-grid, .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Public frontend full-width layout.
   The previous .page-shell styled the whole public site as one large card.
   Keep cards rounded, but let header, hero, content bands, and footer span the viewport. */
:root {
  --frontend-max: 1320px;
  --frontend-wide-max: 1520px;
  --frontend-gutter: clamp(24px, 4vw, 64px);
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.page-shell {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.page-shell.account-shell {
  width: 100%;
  max-width: none;
}

.site-header {
  width: 100%;
  padding-left: max(var(--frontend-gutter), calc((100% - var(--frontend-max)) / 2));
  padding-right: max(var(--frontend-gutter), calc((100% - var(--frontend-max)) / 2));
  border-bottom: 1px solid rgba(107, 82, 56, .10);
}

.hero,
.subhero,
.po-hero {
  width: 100%;
  padding-left: max(var(--frontend-gutter), calc((100% - var(--frontend-max)) / 2));
  padding-right: max(var(--frontend-gutter), calc((100% - var(--frontend-max)) / 2));
  background:
    radial-gradient(circle at 88% 16%, rgba(242, 214, 92, .18), transparent 22%),
    linear-gradient(110deg, rgba(255, 248, 239, .88), rgba(255, 253, 248, .58));
  overflow: visible;
}

.hero {
  min-height: 520px;
}

.subhero,
.po-hero {
  border-bottom: 1px solid rgba(239, 220, 203, .52);
}

.hero-copy,
.subhero > div,
.po-hero > div {
  position: relative;
  z-index: 1;
}

.hero .blob.yellow {
  right: max(24px, calc((100% - var(--frontend-max)) / 2));
}

.hero .blob.aqua {
  right: max(96px, calc((100% - var(--frontend-max)) / 2 + 96px));
}

.page-shell > .series-grid,
.page-shell > .product-grid,
.page-shell > .testimonial-grid,
.page-shell > .info-grid,
.page-shell > .steps,
.page-shell > .contact-grid {
  margin-left: max(var(--frontend-gutter), calc((100% - var(--frontend-max)) / 2));
  margin-right: max(var(--frontend-gutter), calc((100% - var(--frontend-max)) / 2));
  padding-left: 0;
  padding-right: 0;
}

.page-shell > .section-head {
  margin-left: max(var(--frontend-gutter), calc((100% - var(--frontend-max)) / 2));
  margin-right: max(var(--frontend-gutter), calc((100% - var(--frontend-max)) / 2));
  padding-left: 0;
  padding-right: 0;
}

.page-shell > .why {
  margin-left: max(var(--frontend-gutter), calc((100% - var(--frontend-max)) / 2));
  margin-right: max(var(--frontend-gutter), calc((100% - var(--frontend-max)) / 2));
}

.page-shell > .why .why-grid {
  padding-left: 0;
  padding-right: 0;
}

.page-shell > .wide-cta,
.page-shell > .instagram-section,
.page-shell > .content-block,
.page-shell > .faq,
.page-shell > .content-card.rich-text,
.page-shell > .form-card,
.page-shell > .result-card {
  margin-left: max(var(--frontend-gutter), calc((100% - var(--frontend-max)) / 2));
  margin-right: max(var(--frontend-gutter), calc((100% - var(--frontend-max)) / 2));
}

.page-shell > .product-detail {
  margin-left: max(var(--frontend-gutter), calc((100% - var(--frontend-max)) / 2));
  margin-right: max(var(--frontend-gutter), calc((100% - var(--frontend-max)) / 2));
  padding-left: 0;
  padding-right: 0;
}

.page-shell > .po-status-shell {
  width: auto;
  max-width: var(--frontend-max);
  margin-left: max(var(--frontend-gutter), calc((100% - var(--frontend-max)) / 2));
  margin-right: max(var(--frontend-gutter), calc((100% - var(--frontend-max)) / 2));
}

.page-shell > .account-dashboard {
  width: auto;
  max-width: var(--frontend-wide-max);
  margin-left: max(var(--frontend-gutter), calc((100% - var(--frontend-wide-max)) / 2));
  margin-right: max(var(--frontend-gutter), calc((100% - var(--frontend-wide-max)) / 2));
  padding-left: 0;
  padding-right: 0;
}

.footer {
  width: 100%;
  padding-left: max(var(--frontend-gutter), calc((100% - var(--frontend-max)) / 2));
  padding-right: max(var(--frontend-gutter), calc((100% - var(--frontend-max)) / 2));
  background:
    radial-gradient(circle at 94% 30%, rgba(255, 102, 102, .08), transparent 20%),
    linear-gradient(180deg, rgba(255, 253, 248, .82), rgba(255, 248, 239, .95));
}

.bottom-nav {
  width: 100%;
  max-width: none;
}

.auth-page {
  width: 100%;
  padding-left: max(var(--frontend-gutter), calc((100% - var(--frontend-wide-max)) / 2));
  padding-right: max(var(--frontend-gutter), calc((100% - var(--frontend-wide-max)) / 2));
}

@media (max-width: 980px) {
  :root { --frontend-gutter: 24px; }
  .page-shell,
  .page-shell.account-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
  }
  .site-header {
    padding-left: var(--frontend-gutter);
    padding-right: var(--frontend-gutter);
  }
  .hero,
  .subhero,
  .po-hero {
    padding-left: var(--frontend-gutter);
    padding-right: var(--frontend-gutter);
  }
  .hero .blob.yellow {
    right: 18px;
  }
  .hero .blob.aqua {
    right: 72px;
  }
  .hero .blob.purple {
    left: auto;
    right: 28px;
    bottom: 162px;
    width: 62px;
    height: 50px;
  }
  .page-shell > .series-grid,
  .page-shell > .product-grid,
  .page-shell > .testimonial-grid,
  .page-shell > .info-grid,
  .page-shell > .steps,
  .page-shell > .contact-grid,
  .page-shell > .section-head,
  .page-shell > .why,
  .page-shell > .wide-cta,
  .page-shell > .instagram-section,
  .page-shell > .content-block,
  .page-shell > .faq,
  .page-shell > .content-card.rich-text,
  .page-shell > .form-card,
  .page-shell > .result-card,
  .page-shell > .product-detail,
  .page-shell > .po-status-shell,
  .page-shell > .account-dashboard {
    margin-left: var(--frontend-gutter);
    margin-right: var(--frontend-gutter);
  }
  .page-shell > .account-dashboard {
    padding-left: 0;
    padding-right: 0;
  }
  .footer {
    padding-left: var(--frontend-gutter);
    padding-right: var(--frontend-gutter);
  }
  .whatsapp-float {
    right: 20px;
  }
}

@media (max-width: 640px) {
  :root { --frontend-gutter: 18px; }
  .hero h1,
  .subhero h1,
  .po-hero h1 {
    font-size: clamp(38px, 12vw, 44px);
  }
  .footer {
    grid-template-columns: 1fr;
  }
  .footer > div:first-child {
    grid-column: auto;
  }
  .auth-page {
    padding-left: var(--frontend-gutter);
    padding-right: var(--frontend-gutter);
  }
}

/* Public account revamp */
.user-menu {
  position: relative;
  z-index: 30;
}
.user-menu-button {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 10px;
  border: 1px solid rgba(244, 106, 35, .42);
  border-radius: 18px;
  background: rgba(255, 253, 248, .92);
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(118, 84, 45, .08);
}
.user-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(145deg, #ffe5d6, #dff7f8);
  color: #7c3aed;
  font-weight: 1000;
  overflow: hidden;
}
.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-menu-label {
  font-weight: 900;
  white-space: nowrap;
}
.user-menu-chevron {
  color: #7a6b61;
  font-size: 12px;
  font-weight: 1000;
}
.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, calc(100vw - 36px));
  display: none;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 253, 248, .98);
  box-shadow: 0 26px 70px rgba(68, 48, 30, .16);
}
.user-menu.open .user-dropdown { display: grid; gap: 8px; }
.user-dropdown-feature,
.user-dropdown-item,
.user-dropdown-logout button {
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  transition: background .18s ease, transform .18s ease;
}
.user-dropdown-feature:hover,
.user-dropdown-item:hover,
.user-dropdown-logout button:hover,
.user-dropdown-item.active {
  background: #fff4e9;
  transform: translateY(-1px);
}
.user-dropdown-feature small,
.user-dropdown-item small {
  display: block;
  grid-column: 2 / -1;
  margin-top: -6px;
  color: #7a6b61;
  font-weight: 800;
}
.dropdown-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 1000;
}
.dropdown-icon.orange { background: #ffe7d8; color: #f05a1a; }
.dropdown-icon.purple { background: #efe0ff; color: #7c3aed; }
.dropdown-icon.aqua { background: #ddf8f8; color: #009ca3; }
.dropdown-icon.yellow { background: #fff2c5; color: #c99000; }
.dropdown-icon.red { background: #ffe1e4; color: #e23a45; }
.dropdown-section-title {
  margin: 14px 8px 4px;
  color: #7a6b61;
  font-size: 14px;
  font-weight: 1000;
}
.user-dropdown-logout {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.user-dropdown-logout button {
  color: #e23a45;
  cursor: pointer;
}
.mobile-drawer hr {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
}
.mobile-drawer form button {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: #fff0f1;
  color: #d83a45;
  font-weight: 1000;
}

.account-dashboard .dashboard-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  min-width: 0;
}
.account-dashboard {
  overflow-x: clip;
}
.account-dashboard .dashboard-main > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.account-dashboard .pill,
.account-dashboard button {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
}
.account-hero-panel,
.account-welcome-card,
.account-stat-grid article,
.account-action-grid a,
.account-profile-card,
.account-address-card,
.profile-photo-card,
.address-list-card,
.address-form-card {
  border: 1px solid rgba(107, 82, 56, .13);
  box-shadow: 0 18px 48px rgba(118, 84, 45, .08);
}
.account-hero-panel {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  padding: clamp(32px, 5vw, 60px);
  border-radius: 34px;
  background:
    radial-gradient(circle at 8% 0%, rgba(242, 214, 92, .62), transparent 17%),
    radial-gradient(circle at 95% 94%, rgba(99, 206, 215, .25), transparent 18%),
    linear-gradient(135deg, rgba(255,253,248,.96), rgba(255,244,229,.76));
}
.account-hero-panel.compact { min-height: 145px; }
.account-hero-panel h1 {
  margin: 10px 0 8px;
  font-size: clamp(42px, 6vw, 72px);
  line-height: .98;
}
.account-hero-panel p {
  max-width: 640px;
  margin: 0;
  color: #71665c;
  font-weight: 850;
}
.breadcrumb-pill {
  width: fit-content;
  padding: 8px 16px;
  border: 1px solid rgba(244, 106, 35, .24);
  border-radius: 999px;
  background: rgba(255, 253, 248, .84);
  color: #f05a1a !important;
  font-size: 14px;
  font-weight: 1000 !important;
}
.account-doodle {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 35% 65% 50% 50%;
  opacity: .6;
}
.account-doodle.top-left { left: -35px; top: -35px; background: var(--yellow); }
.account-doodle.bottom-right { right: -32px; bottom: -40px; background: var(--coral); }
.account-welcome-card {
  display: grid;
  grid-template-columns: minmax(220px, 34%) 1fr;
  align-items: center;
  gap: 30px;
  padding: 28px;
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(255,253,248,.98), rgba(255,239,222,.78));
}
.welcome-illustration {
  min-height: 220px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 60%, rgba(181, 109, 232, .18), transparent 55%);
}
.welcome-illustration img {
  width: min(280px, 90%);
  filter: drop-shadow(0 22px 28px rgba(118, 84, 45, .14));
}
.account-welcome-card h2 {
  margin: 12px 0 10px;
  font-size: clamp(34px, 4vw, 52px);
}
.account-welcome-card p {
  margin: 4px 0;
  color: #685d55;
  font-weight: 850;
}
.role-badge,
.address-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #efe0ff;
  color: #7c3aed;
  font-size: 13px;
  font-weight: 1000;
}
.account-stat-grid,
.account-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.account-stat-grid article,
.account-action-grid a {
  min-height: 190px;
  padding: 24px;
  border-radius: 28px;
  background: rgba(255, 253, 248, .92);
}
.stat-icon,
.action-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  margin-bottom: 14px;
  font-weight: 1000;
}
.stat-icon.purple,
.action-icon.purple { background: #efe0ff; color: #7c3aed; }
.stat-icon.orange { background: #ffe6d8; color: #f05a1a; }
.stat-icon.aqua,
.action-icon.aqua { background: #ddf8f8; color: #009ca3; }
.stat-icon.yellow,
.action-icon.yellow { background: #fff2c5; color: #c99000; }
.action-icon.red { background: #fee2e2; color: #dc2626; }
.action-icon.coral { background: #ffe3e3; color: #e84b55; }
.account-stat-grid b {
  display: block;
  font-size: 38px;
  line-height: 1;
  color: #f05a1a;
}
.account-stat-grid p,
.account-action-grid b {
  display: block;
  margin: 6px 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 1000;
}
.account-stat-grid small,
.account-action-grid small {
  color: #7a6b61;
  font-weight: 800;
}
.account-action-grid a {
  position: relative;
  min-height: 180px;
  display: grid;
  align-content: start;
  transition: transform .18s ease, box-shadow .18s ease;
}
.account-action-grid a:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 56px rgba(118, 84, 45, .12);
}
.account-action-grid em {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8b4a, #ff5b17);
  color: white;
  font-style: normal;
  font-size: 24px;
  font-weight: 1000;
}
.account-draft-card {
  border-color: rgba(124, 58, 237, .24) !important;
}
.account-draft-card.has-draft {
  background: linear-gradient(135deg, rgba(255,253,248,.98), rgba(245,239,255,.88));
}
.account-draft-card-meta {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  color: #6d625c;
  font-size: 13px;
  font-weight: 850;
}
.account-draft-card-meta strong {
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fee2e2;
  color: #dc2626;
  font-size: 12px;
}
.account-lower-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
}
.account-profile-card,
.account-address-card,
.profile-photo-card {
  padding: 28px;
  border-radius: 32px;
  background: rgba(255, 253, 248, .94);
}
.account-profile-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: 12px;
}
.account-profile-card > *,
.account-profile-card p > * {
  min-width: 0;
  max-width: 100%;
}
.account-profile-card h3,
.account-profile-card p b {
  overflow-wrap: anywhere;
}
.account-profile-card h2,
.account-address-card h2,
.profile-photo-card h2,
.profile-form-card h2,
.address-form-card h2 {
  margin: 0;
}
.profile-avatar-large {
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px dashed rgba(244, 154, 69, .35);
  border-radius: 999px;
  background: linear-gradient(145deg, #fff4e8, #edfafa);
}
.profile-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-avatar-large span {
  color: #7c3aed;
  font-size: 42px;
  font-weight: 1000;
}
.account-profile-card h3 {
  margin: 4px 0 0;
  font-size: 28px;
}
.account-profile-card p {
  width: 100%;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  margin: 4px 0;
  text-align: left;
}
.account-profile-card p span {
  color: #7a6b61;
  font-weight: 850;
}
.section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
.section-title-row p {
  margin: 8px 0 0;
  color: #71665c;
  font-weight: 800;
}
.address-preview-list {
  display: grid;
  gap: 16px;
}
.address-preview {
  display: grid;
  grid-template-columns: 50px 1fr auto auto;
  align-items: start;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(244, 154, 69, .28);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,253,248,.96), rgba(255,246,235,.78));
}
.address-preview.default {
  border-color: rgba(34, 197, 94, .42);
  background: linear-gradient(135deg, rgba(255,253,248,.96), rgba(236,253,245,.82));
}
.address-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #ddf8f8;
  color: #009ca3;
  font-weight: 1000;
}
.address-preview b,
.address-preview small,
.address-preview p {
  display: block;
}
.address-preview p {
  margin: 6px 0 0;
  color: #403832;
  font-weight: 800;
}
.mini-btn {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: #7c3aed;
  font-size: 13px;
  font-weight: 1000;
}
.mini-btn.danger { color: #d83a45; }
.mini-btn:disabled { opacity: .5; cursor: not-allowed; }
.account-thanks {
  margin: 14px auto 0;
  color: #71665c;
  font-weight: 900;
  text-align: center;
}
.profile-edit-grid,
.address-manager-grid,
.address-manager-stack {
  display: grid;
  gap: 24px;
}
.profile-edit-grid { grid-template-columns: 360px 1fr; }
.profile-photo-card {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
.upload-inline {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  min-height: 46px;
  border: 1px dashed rgba(124, 58, 237, .38);
  border-radius: 16px;
  color: #7c3aed;
  font-weight: 1000;
  cursor: pointer;
}
.upload-inline input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.profile-form-card,
.address-form-card {
  padding: 28px;
  border-radius: 30px;
}
.password-note {
  display: grid;
  gap: 6px;
  margin: 16px 0;
  padding: 16px;
  border-radius: 18px;
  background: #fff4e9;
  color: #6b5a4f;
}
.address-manager-grid,
.address-manager-stack {
  grid-template-columns: 1fr;
  align-items: start;
}
.address-manager-stack .address-form-card {
  width: 100%;
}
.address-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-photo-card p {
  width: 100%;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  margin: 0;
  text-align: left;
}
.profile-photo-card p b {
  color: #7a6b61;
}
.secret-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border: 1px solid rgba(107,82,56,.22);
  border-radius: 14px;
  background: white;
  overflow: hidden;
}
.secret-field input {
  border: 0;
  background: transparent;
}
.secret-field button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-left: 1px solid var(--line);
  background: #fff4e9;
  color: #7c3aed;
  font-weight: 1000;
}
.security-card {
  padding: 28px;
  border-radius: 30px;
}

/* New PO order page */
.account-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #7a6b61;
  font-weight: 900;
}
.account-breadcrumb a {
  color: #6f5f55;
}
.account-breadcrumb b {
  color: #7c3aed;
}
.po-order-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 46%);
  align-items: center;
  gap: 28px;
  min-height: 230px;
  padding: clamp(26px, 4vw, 46px);
  border: 1px solid rgba(107, 82, 56, .14);
  border-radius: 30px;
  background:
    radial-gradient(circle at 95% 4%, rgba(242, 214, 92, .75), transparent 13%),
    radial-gradient(circle at 62% 74%, rgba(181, 109, 232, .10), transparent 24%),
    linear-gradient(135deg, rgba(255,253,248,.98), rgba(255,242,226,.76));
  box-shadow: 0 18px 48px rgba(118,84,45,.08);
}
.po-order-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.08;
}
.po-order-hero p {
  max-width: 560px;
  margin: 0 0 18px;
  color: #625850;
  font-weight: 850;
}
.po-order-hero img {
  width: 100%;
  max-height: 210px;
  object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(118,84,45,.13));
}
.po-open-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #dff8ef;
  color: #11805a;
  font-weight: 1000;
}
.po-open-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #10b981;
}
.po-draft-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 22px;
  border: 1px solid rgba(124, 58, 237, .22);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,253,248,.98), rgba(245,239,255,.92));
  box-shadow: 0 14px 36px rgba(118,84,45,.07);
}
.po-draft-banner[hidden] {
  display: none;
}
.po-draft-banner h2 {
  margin: 6px 0 6px;
  font-size: clamp(20px, 2.2vw, 28px);
}
.po-draft-banner p,
.po-draft-banner small {
  margin: 0;
  color: #6f635b;
  font-weight: 850;
}
.po-draft-kicker {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: #efe0ff;
  color: #7c3aed;
  font-size: 12px;
  font-weight: 1000;
}
.po-draft-banner-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}
.po-draft-banner-actions .pill,
.po-draft-banner-actions button,
.po-draft-banner-actions a,
.po-draft-action-row .pill,
.po-draft-save-btn,
.po-submit-btn {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
}
.po-draft-status-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(16, 185, 129, .18);
  border-radius: 18px;
  background: #ecfdf5;
}
.po-draft-status-panel[hidden] {
  display: none;
}
.po-draft-status-panel div {
  display: grid;
  gap: 3px;
}
.po-draft-status-panel b {
  color: #065f46;
  font-size: 13px;
}
.po-draft-status-panel span {
  color: #047857;
  font-weight: 900;
}
.po-draft-status-panel .is-expired {
  color: #dc2626;
}
.new-po-order-form {
  display: grid;
  gap: 18px;
  min-width: 0;
  box-sizing: border-box;
}
.dashboard-main > .account-breadcrumb,
.dashboard-main > .po-order-hero,
.dashboard-main > .new-po-order-form,
.new-po-order-form .po-step,
.new-po-order-form .po-step > div,
.new-po-order-form .po-table-wrap,
.new-po-order-form .po-address-grid,
.new-po-order-form .po-shipping-bar {
  min-width: 0;
  max-width: 100%;
}
.new-po-order-form .po-step {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  border-radius: 26px;
  background: rgba(255,253,248,.96);
  box-shadow: 0 14px 38px rgba(118,84,45,.07);
}
.new-po-order-form .po-step > span {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(180deg, #b56de8, #7c3aed);
  color: white;
}
.new-po-order-form .po-step h2 {
  margin: 0 0 16px;
  font-size: 24px;
}
.new-po-order-form .batch-choice-grid {
  grid-template-columns: minmax(260px, 430px);
}
.new-po-order-form .batch-choice {
  position: relative;
  padding: 22px 22px 22px 58px;
  border-color: rgba(124,58,237,.50);
  cursor: pointer;
}
.new-po-order-form .batch-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.batch-check {
  position: absolute;
  left: 22px;
  top: 24px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f1e6ff;
  color: transparent;
  font-size: 13px;
  font-weight: 1000;
}
.new-po-order-form .batch-choice:has(input:checked) {
  border-color: #9b5cff;
  background: linear-gradient(135deg, #fffdf8, #fbf7ff);
  box-shadow: 0 16px 38px rgba(124,58,237,.12);
}
.new-po-order-form .batch-choice:has(input:checked) .batch-check {
  background: #7c3aed;
  color: white;
}
.new-po-order-form .batch-choice .status {
  width: fit-content;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e6f4ff;
  color: #2379ca;
  font-weight: 1000;
  font-size: 12px;
}
.new-po-order-form .po-table-wrap {
  overflow: hidden;
  border-radius: 18px;
}
.new-po-order-form .po-table-wrap table {
  min-width: 980px;
}
.new-po-order-form .po-table th {
  background: #fff7eb;
  color: #514942;
}
.new-po-order-form .po-table td {
  background: white;
}
.add-product-btn {
  width: fit-content;
  margin-top: 14px;
}
.qty-control {
  display: inline-grid;
  grid-template-columns: 34px 54px 34px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: white;
}
.qty-control button {
  min-height: 36px;
  border: 0;
  background: #fffdf8;
  color: #7c3aed;
  font-weight: 1000;
}
.qty-control input {
  min-width: 0 !important;
  width: 54px;
  border: 0;
  text-align: center;
}
.row-actions {
  display: inline-flex;
  gap: 8px;
}
.row-actions button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(124,58,237,.30);
  border-radius: 10px;
  background: white;
  color: #7c3aed;
}
.row-actions button:last-child {
  border-color: rgba(248,59,70,.35);
  color: #f83b46;
}
.new-po-order-form .po-summary-line b {
  background: #fff5ea;
  border: 1px solid rgba(244,154,69,.16);
}
.po-address-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 26px;
  align-items: start;
}
.address-mode-dropdown {
  max-width: 360px;
  margin-bottom: 16px;
}
.po-address-side,
.po-address-form {
  min-width: 0;
}
.po-address-form[hidden],
[data-saved-address][hidden] {
  display: none;
}
.address-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 14px;
}
.address-mode-tabs label {
  justify-content: center;
  min-height: 52px;
}
.new-po-order-form .saved-address-card {
  min-height: 190px;
  border-color: rgba(16,185,129,.30);
  background: linear-gradient(135deg, #fffdf8, #eefbf5);
}
.new-po-order-form .saved-address-card .outline-chip,
.new-po-order-form .saved-address-card a {
  width: fit-content;
  display: inline-flex;
  margin-top: 10px;
  color: #7c3aed;
  font-weight: 1000;
}
.has-error input,
.has-error select,
.has-error textarea {
  border-color: #fb7185 !important;
  box-shadow: 0 0 0 4px rgba(251,113,133,.12);
}
.field-error-text {
  color: #e11d48 !important;
  font-weight: 900;
}
/* Delivery mode selector */
.po-delivery-mode { margin-top: 18px; }
.po-delivery-mode h3 { font-size: 15px; margin-bottom: 10px; color: #333; }
.delivery-mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.delivery-mode-option { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 2px solid #e5e7eb; border-radius: 14px; cursor: pointer; transition: all 0.2s; background: #fff; }
.delivery-mode-option:hover { border-color: #93c5fd; }
.delivery-mode-option.selected { border-color: #2563eb; background: #eff6ff; }
.delivery-mode-option input[type="radio"] { display: none; }
.delivery-mode-option .dm-icon { font-size: 24px; flex-shrink: 0; }
.delivery-mode-option .dm-label { font-weight: 700; font-size: 14px; display: block; }
.delivery-mode-option small { color: #6b7280; font-size: 12px; display: block; margin-top: 2px; }
.po-pickup-info { margin-top: 16px; }
.pickup-notice { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: #f0fdf4; border: 1px solid #bbf7d0; }
.pickup-notice .dm-icon { font-size: 28px; flex-shrink: 0; }
.pickup-notice b { font-size: 15px; color: #16a34a; display: block; margin-bottom: 4px; }
.pickup-notice p { margin: 0; font-size: 13px; color: #4b5563; line-height: 1.5; }

.po-shipping-bar {
  display: grid;
  grid-template-columns: 1fr 170px 260px;
  gap: 14px;
  align-items: end;
  margin-top: 18px;
  padding: 16px;
  border-radius: 20px;
  background: #f3f8ff;
}
.po-shipping-bar .weight-summary {
  margin: 0;
}
.calc-shipping-wrap {
  display: grid;
  gap: 6px;
  text-align: center;
}
.calc-shipping-wrap button {
  min-height: 52px;
  background: linear-gradient(180deg, #9b5cff, #6f38d6);
  color: white;
}
.calc-shipping-wrap button:disabled {
  opacity: .56;
  cursor: not-allowed;
  box-shadow: none;
}
.calc-shipping-wrap small {
  color: #7a6b61;
  font-weight: 850;
}
.new-po-order-form .po-total-card p:nth-child(6) {
  border-color: rgba(181,109,232,.22);
  background: linear-gradient(90deg, rgba(181,109,232,.16), rgba(181,109,232,.06));
  color: #6f38d6;
  font-weight: 1000;
}
.link-button {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7c3aed;
  font-weight: 1000;
  cursor: pointer;
}
.po-submit-btn {
  min-height: 54px;
  background: linear-gradient(180deg, #ff7a2f, #ff4f10);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.po-modal[hidden] {
  display: none;
}
.po-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(31, 28, 25, .56);
  backdrop-filter: blur(3px);
}
.po-modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 34px;
  border: 1px solid rgba(107,82,56,.16);
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 8%, rgba(242,214,92,.18), transparent 18%),
    linear-gradient(145deg, #fffdf8, #fff7ee);
  box-shadow: 0 28px 90px rgba(27,21,17,.24);
  text-align: center;
}
.po-modal-close {
  position: absolute;
  right: 22px;
  top: 22px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,253,248,.9);
  color: #334155;
  font-size: 24px;
}
.po-modal-card h2 {
  margin: 16px 0 8px;
  font-size: 30px;
}
.po-modal-card p {
  color: #6a5d55;
  font-weight: 850;
}
.tnc-list,
.confirm-checklist {
  display: grid;
  gap: 14px;
  margin: 22px 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
  text-align: left;
}
.tnc-list {
  counter-reset: tnc;
  list-style: none;
}
.tnc-list li {
  counter-increment: tnc;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  font-weight: 850;
}
.tnc-list li::before {
  content: counter(tnc);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #9b5cff;
  color: white;
  font-weight: 1000;
}
.confirm-checklist {
  list-style: none;
}
.confirm-checklist li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: center;
  font-weight: 900;
}
.confirm-checklist li::before {
  content: "\2713";
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 2px solid #10b981;
  border-radius: 999px;
  color: #10b981;
  font-size: 13px;
}
.modal-help {
  padding: 16px;
  border: 1px solid rgba(244,154,69,.28);
  border-radius: 16px;
  background: #fff4e4;
  color: #6b4b2a;
  font-weight: 900;
}
.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 22px;
}
.modal-illustration {
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border-radius: 30px;
  background: #fff1df;
  color: #10b981;
  font-size: 50px;
  font-weight: 1000;
}
.po-modal-card.review { max-width: 520px; }
.po-modal-card.review h2 { font-size: 22px; }
.review-section { margin: 14px 0; padding: 14px; border-radius: 14px; background: #faf6f1; border: 1px solid var(--line); }
.review-product-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; font-weight: 700; }
.review-product-row + .review-product-row { border-top: 1px solid #ede4da; }
.review-product-row b { color: var(--purple); white-space: nowrap; margin-left: 12px; }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.review-item { padding: 10px 14px; border-radius: 12px; background: #faf6f1; border: 1px solid var(--line); }
.review-item small { display: block; font-size: 11px; color: #8a7468; font-weight: 700; margin-bottom: 2px; }
.review-item b { font-size: 14px; display: block; word-break: break-word; }
.review-item.highlight { background: #f0fdf4; border-color: #bbf7d0; grid-column: 1 / -1; }
.review-item.highlight b { color: #16a34a; font-size: 18px; }
.payment-success-hero {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) minmax(260px, 430px);
  gap: 26px;
  align-items: center;
  padding: 28px 34px;
  border: 1px solid rgba(239,220,203,.9);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 18%, rgba(255,193,37,.38), transparent 18%),
    linear-gradient(135deg, #fffdf8, #fff7ef 58%, #fff2e3);
  box-shadow: var(--soft);
}
.payment-success-hero .success-mark {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #20c779;
  color: white;
  font-size: 52px;
  box-shadow: inset 0 -8px 0 rgba(0,0,0,.08), 0 18px 40px rgba(32,199,121,.24);
}
.payment-success-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 3.2vw, 44px);
}
.payment-success-hero p {
  max-width: 620px;
  margin: 0;
  color: #4f5b6b;
  font-weight: 850;
  line-height: 1.65;
}
.payment-success-hero img {
  width: 100%;
  max-height: 190px;
  object-fit: contain;
}
.payment-scheme-card {
  padding: 22px;
  border: 1px solid rgba(239,220,203,.88);
  border-radius: 24px;
  background: rgba(255,253,248,.96);
  box-shadow: 0 14px 38px rgba(118,84,45,.07);
}
.payment-scheme-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.payment-scheme-head h2 {
  margin: 2px 0 0;
  font-size: 22px;
}
.payment-scheme-lock,
.payment-scheme-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff2df;
  color: #b45309;
  font-size: 12px;
  font-weight: 950;
}
.payment-scheme-badge.alt {
  background: #eef2ff;
  color: #4338ca;
}
.payment-scheme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.payment-flow-shell {
  display: grid;
  gap: 18px;
}
.payment-state-panel {
  display: grid;
  gap: 18px;
}
.payment-state-panel[hidden],
.payment-method-panel[hidden],
.payment-info-list[hidden] {
  display: none !important;
}
.payment-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.payment-choice-card {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 170px;
  padding: 22px 58px 22px 18px;
  border: 1px solid rgba(220,205,192,.95);
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(118,84,45,.04);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.payment-choice-card:hover,
.payment-choice-card:focus-visible {
  border-color: rgba(255,91,23,.75);
  box-shadow: 0 16px 34px rgba(255,91,23,.11);
  outline: none;
}
.payment-choice-card.is-active,
.payment-choice-card[aria-pressed="true"] {
  border-color: #ff5b17;
  box-shadow: 0 18px 38px rgba(255,91,23,.13);
}
.payment-choice-card strong {
  font-size: 20px;
  line-height: 1.3;
}
.payment-choice-card em {
  color: #526071;
  font-style: normal;
  font-weight: 800;
  line-height: 1.55;
}
.payment-choice-card b {
  color: #ff4f10;
  font-size: 22px;
}
.payment-choice-check {
  position: absolute;
  top: 22px;
  right: 20px;
  width: 28px;
  height: 28px;
  border: 2px solid #e4d8cc;
  border-radius: 50%;
  background: #fff;
}
.payment-choice-card.is-active .payment-choice-check,
.payment-choice-card[aria-pressed="true"] .payment-choice-check {
  border-color: #ff5b17;
  background: #ff5b17;
}
.payment-choice-card.is-active .payment-choice-check::after,
.payment-choice-card[aria-pressed="true"] .payment-choice-check::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg) translate(-1px, -2px);
}
.payment-scheme-option {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
}
.payment-scheme-option.active {
  border-color: rgba(244,63,94,.55);
  box-shadow: 0 12px 34px rgba(244,63,94,.12);
}
.payment-scheme-option h3 {
  margin: 8px 0 6px;
  font-size: 20px;
}
.payment-scheme-option p {
  margin: 0;
  color: #536172;
  font-weight: 800;
  line-height: 1.55;
}
.payment-scheme-amount {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  background: #fff8e8;
}
.payment-scheme-amount small {
  color: #7a6b5d;
  font-weight: 850;
}
.payment-scheme-amount b {
  color: #ff4f10;
  font-size: 24px;
}
.payment-scheme-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.payment-scheme-actions form {
  flex: 1 1 190px;
  min-width: 0;
}
.payment-scheme-actions .pill,
.payment-scheme-actions button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  white-space: normal;
  text-align: center;
}
.payment-scheme-actions.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.payment-scheme-helper {
  font-size: 13px;
}
.payment-scheme-actions [data-midtrans-payment-message] {
  display: block;
  margin-top: 8px;
  min-height: 17px;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.35;
}
.payment-scheme-actions [data-midtrans-payment-message][data-tone="error"] {
  color: #b91c1c;
}
.payment-scheme-actions [data-midtrans-payment-message][data-tone="warning"] {
  color: #b45309;
}
.payment-section-heading {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}
.payment-section-heading h2 {
  margin: 0;
  font-size: 22px;
}
.payment-section-heading span {
  color: #6b625a;
  font-weight: 800;
}
.payment-method-section {
  padding: 22px;
  border: 1px solid rgba(239,220,203,.88);
  border-radius: 24px;
  background: rgba(255,253,248,.96);
  box-shadow: 0 14px 38px rgba(118,84,45,.07);
}
.payment-method-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.payment-method-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  min-height: 142px;
  padding: 18px 12px;
  border: 1px solid rgba(239,220,203,.95);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.payment-method-card:hover,
.payment-method-card:focus-visible {
  border-color: rgba(155,92,255,.75);
  box-shadow: 0 14px 30px rgba(155,92,255,.10);
  outline: none;
}
.payment-method-card.is-active,
.payment-method-card[aria-pressed="true"] {
  border-color: #9b5cff;
  background: linear-gradient(180deg, #fff, #fbf8ff);
  box-shadow: 0 16px 34px rgba(155,92,255,.14);
}
.payment-method-card small {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-50%);
  padding: 4px 8px;
  border-radius: 999px;
  background: #9b5cff;
  color: #fff;
  font-size: 10px;
  font-weight: 950;
}
.payment-method-card span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: #fff6ea;
  color: #a36a2c;
  font-size: 12px;
  font-weight: 1000;
}
.payment-method-card b {
  font-size: 14px;
  line-height: 1.35;
}
.payment-method-card em {
  color: #70645b;
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.35;
}
.payment-manual-layout,
.payment-online-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr) minmax(300px, .9fr);
  gap: 18px;
}
.payment-online-layout {
  grid-template-columns: minmax(270px, .75fr) minmax(0, 1.25fr);
}
.payment-upload-setup {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px dashed rgba(155,92,255,.45);
  border-radius: 18px;
  background: #fbf8ff;
}
.payment-upload-setup b {
  color: var(--ink);
}
.payment-upload-setup span,
.payment-upload-setup small {
  color: #645b71;
  font-weight: 800;
  line-height: 1.5;
}
.payment-midtrans-preview {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(239,220,203,.88);
  border-radius: 24px;
  background: linear-gradient(135deg, #fff7ed, #fffdf8 54%, #fbf8ff);
  box-shadow: 0 14px 38px rgba(118,84,45,.07);
}
.midtrans-preview-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
}
.midtrans-preview-top img {
  width: 86px;
  max-height: 42px;
  object-fit: contain;
}
.midtrans-preview-top div {
  display: grid;
  gap: 2px;
  margin-left: auto;
  text-align: right;
}
.midtrans-preview-top strong {
  color: var(--ink);
  font-size: 20px;
}
.midtrans-preview-top span,
.payment-midtrans-preview p,
.payment-midtrans-preview small {
  color: #5f6171;
  font-weight: 800;
  line-height: 1.5;
}
.midtrans-method-preview {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.midtrans-method-preview span {
  display: grid;
  place-items: center;
  min-height: 62px;
  padding: 8px;
  border: 1px solid rgba(239,220,203,.95);
  border-radius: 14px;
  background: #fff;
  color: #5d5060;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
.payment-product-summary {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.payment-product-summary h3 {
  margin: 0;
  font-size: 17px;
}
.payment-product-summary table {
  min-width: 760px;
}
.payment-action-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(239,220,203,.88);
  border-radius: 20px;
  background: rgba(255,253,248,.96);
  box-shadow: 0 14px 38px rgba(118,84,45,.07);
}
.payment-action-bar .pill {
  min-height: 52px;
  justify-content: center;
}

.final-midtrans-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin: 16px 0;
  padding: 18px;
  border: 1px solid rgba(42, 167, 223, 0.24);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(245, 243, 255, 0.92));
}

.final-midtrans-card h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: #111827;
}

.final-midtrans-card p {
  margin: 0 0 8px;
  color: #4b5563;
  line-height: 1.5;
}

.final-midtrans-card span {
  display: block;
  color: #1f2937;
  font-weight: 600;
}

.final-midtrans-card form {
  display: grid;
  gap: 8px;
  justify-items: end;
  min-width: 240px;
}

.final-midtrans-card .pill {
  min-height: 48px;
  white-space: normal;
}

.final-midtrans-card small {
  max-width: 260px;
  color: #92400e;
  line-height: 1.4;
  text-align: right;
}

.payment-confirm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
}
.payment-main-card,
.payment-info-card,
.payment-bank-card,
.payment-steps-card,
.payment-upload-card,
.payment-items-card,
.payment-cta-row {
  padding: 22px;
  border: 1px solid rgba(239,220,203,.88);
  border-radius: 24px;
  background: rgba(255,253,248,.96);
  box-shadow: 0 14px 38px rgba(118,84,45,.07);
}
.payment-main-card h2,
.payment-info-card h2,
.payment-bank-card h2,
.payment-steps-card h2,
.payment-upload-card h2,
.payment-items-card h2 {
  margin: 0 0 16px;
  font-size: 22px;
}
.payment-order-meta {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.payment-order-meta p {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 14px;
  border-right: 1px solid var(--line);
  color: #6f6259;
  font-weight: 850;
}
.payment-order-meta p:last-child {
  border-right: 0;
}
.payment-order-meta b {
  color: var(--ink);
}
.payment-status-pill {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff3d2;
  color: #e07800 !important;
}
.deadline-text {
  color: #f43f5e !important;
}
.payment-total-layout {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.payment-total-highlight {
  display: grid;
  align-content: center;
  min-height: 190px;
  padding: 24px;
  border: 1px solid #ffba5f;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff8e8, #fffdf8);
}
.payment-total-highlight span,
.payment-total-highlight small {
  color: #5f6171;
  font-weight: 850;
}
.payment-total-highlight strong {
  color: #ff4f10;
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.05;
  margin: 8px 0 12px;
}
.payment-breakdown {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.payment-breakdown p {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 850;
}
.payment-breakdown p:last-child {
  border-bottom: 0;
}
.payment-breakdown .strong {
  background: linear-gradient(90deg, rgba(181,109,232,.16), rgba(181,109,232,.06));
  color: #7c3aed;
  font-weight: 1000;
}
.payment-info-card {
  display: grid;
  align-content: start;
  gap: 14px;
}
.payment-info-card p {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: center;
  margin: 0;
  color: #4d5969;
  font-weight: 850;
}
.payment-info-card p span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff2df;
}
.payment-info-list {
  display: grid;
  gap: 14px;
}
.payment-info-card > div:not(.payment-info-list) {
  padding: 14px;
  border: 1px solid #ffd6a5;
  border-radius: 18px;
  background: #fff7e8;
  font-weight: 900;
}
.payment-next-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr 1fr;
  gap: 18px;
}
.bank-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 850;
}
.bank-row:last-of-type {
  border-bottom: 0;
}
.payment-bank-card small {
  display: block;
  min-height: 18px;
  color: #16a34a;
  font-weight: 900;
}
.highlight-bank {
  border: 2px solid #ff5b17;
  background: linear-gradient(135deg, #fff8f3, #fff1e6) !important;
  position: relative;
}
.bank-card-badge {
  position: absolute;
  top: -12px;
  left: 18px;
  padding: 4px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff7a2f, #ff4f10);
  color: white;
  font-size: 12px;
  font-weight: 950;
}
.bank-row.accent b {
  color: #ff4f10;
  font-size: 20px;
  letter-spacing: 1px;
}
.payment-bank-card [data-copy-bank] {
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 16px;
  line-height: 1.2;
}
.bank-transfer-amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  margin-top: 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff5b17, #ff7a2f);
  color: white;
  font-weight: 900;
}
.bank-transfer-amount strong {
  font-size: 24px;
}
.bank-warning {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff3d2;
  color: #b45309;
  font-size: 13px;
  font-weight: 800;
}
.payment-steps-card ol {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paystep;
}
.payment-steps-card li {
  counter-increment: paystep;
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto;
  gap: 4px 12px;
  align-items: start;
}
.payment-steps-card li::before {
  content: counter(paystep);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #9b5cff;
  color: white;
  font-weight: 1000;
  grid-row: 1 / -1;
}
.payment-steps-card li b {
  grid-column: 2;
  color: var(--ink);
  font-weight: 900;
  line-height: 1.4;
  padding-top: 4px;
}
.payment-steps-card li span {
  grid-column: 2;
  display: block;
  color: #74685f;
  font-weight: 700;
  font-size: 0.92em;
  line-height: 1.5;
}
.payment-upload-card {
  display: grid;
  gap: 14px;
}
.payment-upload-drop {
  min-height: 156px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 22px;
  border: 2px dashed #c69cff;
  border-radius: 22px;
  background: linear-gradient(135deg, #fffdf8, #fbf7ff);
  text-align: center;
  color: #7c3aed;
}
.payment-upload-drop input {
  display: none;
}
.payment-upload-drop span {
  font-size: 42px;
}
.payment-upload-drop em {
  color: #4d5969;
  font-style: normal;
  font-weight: 850;
}
.payment-upload-card textarea {
  min-height: 82px;
}
.payment-upload-note {
  margin: 0;
  padding: 12px;
  border-radius: 16px;
  background: #fff3d2;
  color: #6b4b2a;
  font-weight: 850;
}
.payment-upload-done {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  background: #ecfdf5;
  color: #047857;
  font-weight: 900;
}
.payment-items-card table {
  min-width: 760px;
}
.payment-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 1120px) {
  .account-stat-grid,
  .account-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .account-lower-grid,
  .profile-edit-grid,
  .address-manager-grid,
  .address-manager-stack {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .user-menu { display: none; }
  .account-welcome-card {
    grid-template-columns: 1fr;
  }
  .welcome-illustration {
    min-height: 180px;
  }
  .po-order-hero {
    grid-template-columns: 1fr;
    padding: 28px;
  }
  .po-order-hero img {
    justify-self: center;
    max-height: 190px;
  }
  .po-address-grid,
  .po-shipping-bar {
    grid-template-columns: 1fr;
  }
  .delivery-mode-options { grid-template-columns: 1fr; }
  .address-mode-dropdown {
    max-width: none;
  }
  .po-shipping-bar {
    align-items: stretch;
  }
  .address-mode-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .payment-success-hero,
  .payment-confirm-grid,
  .payment-next-grid,
  .payment-manual-layout,
  .payment-online-layout,
  .payment-total-layout {
    grid-template-columns: 1fr;
    min-width: 0;
  }
  .payment-confirm-grid > *,
  .payment-next-grid > *,
  .payment-manual-layout > *,
  .payment-online-layout > *,
  .payment-total-layout > * {
    min-width: 0;
    max-width: 100%;
  }
  .payment-method-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .midtrans-method-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .payment-success-hero img {
    justify-self: center;
  }
  .payment-order-meta {
    grid-template-columns: 1fr 1fr;
  }
  .payment-order-meta p {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 640px) {
  .account-hero-panel,
  .account-welcome-card,
  .account-profile-card,
  .account-address-card,
  .profile-photo-card,
  .profile-form-card,
  .address-form-card {
    border-radius: 24px;
    padding: 22px;
  }
  .account-welcome-card,
  .dashboard-content-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .account-welcome-card > *,
  .dashboard-content-grid > *,
  .account-profile-card,
  .account-address-card {
    min-width: 0;
    max-width: 100%;
  }
  .account-stat-grid,
  .account-action-grid {
    grid-template-columns: 1fr;
  }
  .account-stat-grid article,
  .account-action-grid a {
    min-height: auto;
  }
  .section-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .section-title-row .pill {
    width: 100%;
  }
  .address-preview {
    grid-template-columns: 44px 1fr;
  }
  .address-badge,
  .address-actions,
  .address-preview .mini-btn {
    grid-column: 2;
  }
  .account-profile-card p {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .account-breadcrumb {
    flex-wrap: wrap;
  }
  .po-order-hero {
    border-radius: 24px;
    padding: 22px;
  }
  .po-order-hero h1 {
    font-size: clamp(28px, 9vw, 40px);
  }
  .new-po-order-form.po-order-form {
    padding-left: 14px;
    padding-right: 14px;
  }
  .new-po-order-form .wizard-next-btn,
  .new-po-order-form .wizard-nav-row .pill {
    width: 100%;
    max-width: calc(100vw - 72px);
  }
  .new-po-order-form .po-step {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .new-po-order-form .po-step > span {
    width: 34px;
    height: 34px;
  }
  .address-mode-tabs {
    grid-template-columns: 1fr;
  }
  .po-shipping-bar {
    padding: 14px;
  }
  .calc-shipping-wrap button,
  .po-submit-btn {
    width: 100%;
  }
  .po-modal {
    padding: 14px;
  }
  .po-modal-card {
    max-height: calc(100vh - 28px);
    padding: 26px 18px 18px;
    border-radius: 24px;
  }
  .po-modal-card h2 {
    font-size: 24px;
  }
  .po-modal-close {
    right: 14px;
    top: 14px;
  }
  .tnc-list,
  .confirm-checklist {
    padding: 16px;
  }
  .modal-actions {
    grid-template-columns: 1fr;
  }
  .payment-success-hero,
  .payment-scheme-card,
  .final-midtrans-card,
  .payment-method-section,
  .payment-main-card,
  .payment-info-card,
  .payment-bank-card,
  .payment-steps-card,
  .payment-upload-card,
  .payment-midtrans-preview,
  .payment-items-card,
  .payment-cta-row {
    border-radius: 18px;
    padding: 14px;
    overflow: hidden;
    min-width: 0;
  }
  .payment-success-hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 16px;
    padding: 22px 14px;
  }
  .payment-success-hero .success-mark {
    width: 64px;
    height: 64px;
    font-size: 34px;
    margin: 0 auto;
  }
  .payment-success-hero h1 {
    font-size: 20px;
  }
  .payment-success-hero p {
    font-size: 13px;
  }
  .payment-success-hero img {
    display: none;
  }
  .payment-scheme-head {
    display: grid;
  }
  .payment-scheme-head h2 {
    font-size: 18px;
  }
  .payment-scheme-grid,
  .payment-choice-grid,
  .payment-method-grid,
  .midtrans-method-preview,
  .payment-action-bar,
  .payment-scheme-actions.split {
    grid-template-columns: 1fr;
  }
  .payment-method-section {
    border-radius: 18px;
    padding: 14px;
  }
  .payment-choice-card {
    min-height: auto;
    padding: 16px 52px 16px 14px;
  }
  .payment-choice-card strong {
    font-size: 17px;
  }
  .payment-choice-card b {
    font-size: 19px;
  }
  .payment-method-card {
    min-height: 118px;
  }
  .payment-action-bar {
    padding: 14px;
  }
  .midtrans-preview-top {
    display: grid;
    justify-items: start;
  }
  .midtrans-preview-top div {
    margin-left: 0;
    text-align: left;
  }
  .payment-scheme-option {
    padding: 14px;
  }
  .payment-scheme-option h3 {
    font-size: 17px;
  }
  .final-midtrans-card {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
  }
  .final-midtrans-card form {
    justify-items: stretch;
    min-width: 0;
  }
  .final-midtrans-card .pill {
    width: 100%;
  }
  .final-midtrans-card small {
    max-width: none;
    text-align: left;
  }
  .payment-scheme-amount b {
    font-size: 20px;
    overflow-wrap: anywhere;
  }
  .payment-order-meta {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .payment-order-meta p {
    padding: 10px 12px;
    font-size: 12px;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .payment-total-highlight strong {
    font-size: clamp(24px, 8vw, 34px);
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .payment-total-highlight {
    padding: 16px 12px;
    min-height: auto;
  }
  .payment-total-highlight span,
  .payment-total-highlight small {
    font-size: 13px;
  }
  .payment-breakdown p {
    font-size: 12px;
    padding: 10px 12px;
    overflow-wrap: anywhere;
  }
  .payment-steps-card h2,
  .payment-bank-card h2,
  .payment-upload-card h2,
  .payment-main-card h2,
  .payment-info-card h2 {
    font-size: 17px;
  }
  .payment-steps-card ol {
    gap: 12px;
  }
  .payment-steps-card li {
    grid-template-columns: 28px 1fr;
    gap: 3px 8px;
  }
  .payment-steps-card li::before {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }
  .payment-steps-card li b {
    font-size: 13px;
    padding-top: 2px;
  }
  .payment-steps-card li span {
    font-size: 12px;
  }
  .payment-cta-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .payment-cta-row .pill {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .payment-items-card .responsive-table {
    overflow-x: auto;
    margin: 0 -14px;
    padding: 0 14px;
  }
  .payment-items-card table {
    font-size: 12px;
    min-width: 560px;
  }
  /* Bank card mobile fixes */
  .bank-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 0;
  }
  .bank-row span {
    font-size: 12px;
    color: #6f6259;
  }
  .bank-row b {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .bank-row.accent b {
    font-size: 16px;
    letter-spacing: 0.5px;
  }
  .bank-row .mini-btn {
    justify-self: stretch;
    width: 100%;
    min-height: 48px;
    margin-top: 4px;
  }
  .bank-transfer-amount {
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px;
    border-radius: 12px;
  }
  .bank-transfer-amount span {
    font-size: 13px;
  }
  .bank-transfer-amount strong {
    font-size: 18px;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .bank-warning {
    font-size: 12px;
    padding: 8px 12px;
  }
  .bank-card-badge {
    font-size: 11px;
    padding: 3px 10px;
    top: -10px;
    left: 12px;
  }
  .highlight-bank {
    padding-top: 20px !important;
  }
  /* Info card mobile */
  .payment-info-card p {
    font-size: 13px;
    gap: 8px;
  }
  .payment-info-card p span {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 16px;
  }
  .payment-info-card div {
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 14px;
  }
  /* Upload card mobile */
  .payment-upload-drop {
    min-height: 120px;
    padding: 16px;
    border-radius: 16px;
  }
  .payment-upload-card textarea {
    font-size: 13px;
  }
}

/* Batch PO Series & Hero Sections */
.batch-series-section, .batch-hero-section {
  border: 1px solid #e8e0f0;
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0;
  background: #faf8fd;
}
.batch-series-section legend, .batch-hero-section legend {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0 8px;
  color: var(--purple);
}
.batch-series-section .badge-count {
  background: var(--purple);
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
}
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.checkbox-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #e0d8ea;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.checkbox-card:hover { border-color: var(--purple); background: #f3efff; }
.checkbox-card input[type="checkbox"] { accent-color: var(--purple); }
.hero-preview { max-width: 320px; border-radius: 12px; margin: 10px 0; }

/* ─── Login Activity ─── */
.login-activity-list { display: flex; flex-direction: column; gap: 8px; }
.login-log-card { display: flex; align-items: flex-start; gap: 14px; background: #fff; border-radius: 12px; padding: 16px 18px; border-left: 4px solid #ccc; }
.login-log-card.success { border-left-color: #22c55e; }
.login-log-card.failed { border-left-color: #ef4444; }
.log-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.login-log-card.success .log-icon { background: #dcfce7; color: #16a34a; }
.login-log-card.failed .log-icon { background: #fee2e2; color: #dc2626; }
.log-details { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.log-details strong { font-size: 14px; color: #1a1a2e; }
.log-device { font-size: 13px; color: #555; }
.log-meta { font-size: 12px; color: #888; }
.log-ip { font-family: monospace; font-size: 11px; }
@media (max-width: 600px) { .login-log-card { padding: 12px 14px; } .log-details strong { font-size: 13px; } }

/* ===== PO Wizard Bar & Panels ===== */
.po-wizard-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 18px 24px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,253,248,.96);
  box-shadow: 0 4px 14px rgba(118,84,45,.05);
}
.po-wiz-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.po-wiz-step span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 2px solid #ddd;
  background: #f5f5f5;
  color: #aaa;
  font-weight: 900;
  font-size: 15px;
  transition: all .25s;
}
.po-wiz-step small {
  font-size: 12px;
  font-weight: 700;
  color: #aaa;
  white-space: nowrap;
  transition: color .25s;
}
.po-wiz-step.active span {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}
.po-wiz-step.active small {
  color: var(--purple);
  font-weight: 900;
}
.po-wiz-step.done span {
  border-color: #22c55e;
  background: #22c55e;
  color: #fff;
}
.po-wiz-step.done small {
  color: #16a34a;
}
.po-wiz-line {
  flex: 1;
  height: 3px;
  background: #e5e5e5;
  border-radius: 2px;
  margin: 0 6px;
  margin-bottom: 20px;
  transition: background .25s;
}
.po-wiz-step.done + .po-wiz-line {
  background: #22c55e;
}
.po-wiz-step.active + .po-wiz-line {
  background: linear-gradient(90deg, var(--purple) 50%, #e5e5e5 50%);
}
.po-wizard-panels {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.wizard-panel {
  display: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.wizard-panel.active {
  display: block;
}
.wizard-panel h2 {
  font-size: 24px;
  margin: 0 0 18px;
  color: var(--ink);
}
.wizard-nav-row {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  min-width: 0;
  max-width: 100%;
}
.wizard-nav-row .pill {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  justify-content: center;
  text-align: center;
}
.wizard-next-btn {
  margin-top: 18px;
  min-width: 0;
  max-width: 100%;
}

/* ===== PO Product Card ===== */
.po-product-list {
  display: grid;
  gap: 16px;
}
.po-product-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,253,248,.96);
  box-shadow: 0 6px 18px rgba(118,84,45,.05);
  overflow: hidden;
}
.po-card-top {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  padding: 16px 16px 12px;
  align-items: start;
}
.po-card-thumb {
  width: 80px;
  height: 80px;
  border-radius: 14px;
  overflow: hidden;
  background: #faf5f0;
  border: 1px solid var(--line);
}
.po-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.po-card-info {
  display: grid;
  gap: 8px;
}
.po-card-info label {
  display: grid;
  gap: 3px;
  font-size: 12px;
  font-weight: 800;
  color: #8a7e74;
}
.po-card-info select,
.po-card-options select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  background: #fff;
  color: var(--ink);
}
.po-card-remove {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fff5f5;
  color: #ef4444;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}
.po-card-remove:hover {
  background: #fee2e2;
}
.po-card-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px 12px;
}
.po-card-options label {
  display: grid;
  gap: 3px;
  font-size: 12px;
  font-weight: 800;
  color: #8a7e74;
}
.po-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: rgba(250,245,240,.6);
}
.po-card-footer .qty-control {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.po-card-footer .qty-control button {
  width: 42px;
  height: 42px;
  border: 0;
  background: #f5f0ea;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  color: var(--ink);
}
.po-card-footer .qty-control button:hover {
  background: #ece4da;
}
.po-card-footer .qty-control input {
  width: 100px;
  height: 42px;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  font-weight: 900;
  font-size: 16px;
  background: #fff;
  color: var(--ink);
}
.po-card-prices {
  display: grid;
  text-align: right;
  gap: 2px;
}
.po-card-prices span {
  font-size: 12px;
  color: #8a7e74;
  font-weight: 700;
}
.po-card-prices b {
  font-size: 18px;
  color: var(--purple);
  font-weight: 900;
}
.po-card-action-row {
  padding: 0 16px 14px;
  display: flex;
  gap: 8px;
}
.po-card-action-row .pill.mini {
  font-size: 12px;
  padding: 6px 14px;
  min-height: auto;
}

/* ===== Mobile Responsive for Wizard & Cards ===== */
@media (max-width: 640px) {
  .po-wizard-bar {
    padding: 12px 10px;
    border-radius: 16px;
    gap: 0;
  }
  .po-wiz-step span {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
  .po-wiz-step small {
    font-size: 10px;
  }
  .po-wiz-line {
    margin: 0 3px;
    margin-bottom: 18px;
  }
  .wizard-panel h2 {
    font-size: 20px;
  }
  .po-card-top {
    grid-template-columns: 64px 1fr auto;
    gap: 10px;
    padding: 12px 12px 10px;
  }
  .po-card-thumb {
    width: 64px;
    height: 64px;
    border-radius: 12px;
  }
  .po-card-info select,
  .po-card-options select {
    font-size: 13px;
    padding: 7px 10px;
  }
  .po-card-options {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 12px 10px;
  }
  .po-card-footer {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
  }
  .po-card-footer .qty-control button {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
  .po-card-footer .qty-control input {
    width: 54px;
    height: 38px;
    font-size: 15px;
    font-weight: 700;
  }
  .po-card-prices b {
    font-size: 16px;
  }
  .po-card-action-row {
    padding: 0 12px 12px;
  }
  .po-draft-banner,
  .po-draft-status-panel {
    grid-template-columns: 1fr;
  }
  .po-draft-banner {
    min-width: 0;
  }
  .po-draft-banner-actions {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 10px;
  }
  .po-draft-banner-actions .pill,
  .po-draft-banner-actions button,
  .po-draft-banner-actions a {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    white-space: normal;
    text-align: center;
  }
  .po-draft-action-row {
    display: grid;
    grid-template-columns: 1fr;
  }
  .wizard-nav-row {
    flex-direction: column;
    gap: 10px;
  }
  .batch-choice-grid {
    grid-template-columns: 1fr;
  }
  .po-summary-line {
    flex-wrap: wrap;
    gap: 8px;
  }
  .po-summary-line b {
    font-size: 13px;
  }
  .po-total-card {
    padding: 14px;
  }
  .po-total-card p {
    font-size: 13px;
  }
}

/* Tracking Settings polished UI overrides. Scoped to avoid changing other admin pages. */
.tracking-page .tracking-platform-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tracking-page .tracking-platform-card {
  display: grid;
  gap: 14px;
  min-height: 230px;
  padding: 24px;
}

.tracking-page .tracking-status {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  padding: 7px 12px;
}

.tracking-page .tracking-event-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 20px;
}

.tracking-page .tracking-event-grid label {
  align-items: center;
  background: #faf5ff;
  border: 1px solid #ddd6fe;
  border-radius: 12px;
  color: #6d28d9;
  display: inline-flex;
  gap: 8px;
  margin: 0;
  padding: 10px 13px;
}

@media (max-width: 760px) {
  .tracking-page .tracking-platform-grid {
    grid-template-columns: 1fr;
  }
}

.tracking-page .tracking-status-danger {
  background: #fee2e2;
  color: #b91c1c;
}

.tracking-page .tracking-test-hint {
  color: #8a94a6;
  font-size: 12px;
}

.tracking-page .tracking-log-card {
  margin-top: 22px;
  padding: 22px;
}

.tracking-page .tracking-log-head {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.tracking-page .tracking-log-empty {
  border: 1px dashed #ddd6fe;
  border-radius: 14px;
  color: #7c3aed;
  font-weight: 800;
  padding: 18px;
  text-align: center;
}

.tracking-page .tracking-log-table-wrap {
  overflow-x: auto;
}

.tracking-page .tracking-log-table {
  border-collapse: collapse;
  min-width: 900px;
  width: 100%;
}

.tracking-page .tracking-log-table th,
.tracking-page .tracking-log-table td {
  border-bottom: 1px solid #f1edf8;
  color: #344054;
  font-size: 13px;
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
}

.tracking-page .tracking-log-table th {
  color: #667085;
  font-size: 12px;
  text-transform: uppercase;
}

.tracking-page .tracking-log-table pre {
  background: #f8fafc;
  border-radius: 10px;
  color: #475467;
  margin: 8px 0 0;
  max-width: 360px;
  overflow-x: auto;
  padding: 10px;
  white-space: pre-wrap;
}

}

/* === Landing Reseller INA === */
.landing-reseller-ina *{margin:0;padding:0;box-sizing:border-box;}
.landing-reseller-ina{
  --cream:#FFFDF5;
  --orange:#F49A45;
  --orange-light:#FFEEDD;
  --purple:#B56DE8;
  --teal:#63CFD7;
  --coral:#FF6666;
  --yellow:#F2D65C;
  --green:#2D9E6B;
  --dark:#2C2C2A;
  --gray:#717A67;
  --wa:#25D366;
}
.landing-reseller-ina{background:var(--cream);font-family:'Nunito',sans-serif;color:var(--dark);overflow-x:hidden;}
.landing-reseller-ina h1, .landing-reseller-ina h2, .landing-reseller-ina h3{font-family:'Nunito',sans-serif;}
.landing-reseller-ina nav{background:white;padding:12px 20px;display:flex;align-items:center;justify-content:center;border-bottom:2px solid var(--orange-light);position:sticky;top:0;z-index:100;}
.landing-reseller-ina .logo-text{font-family:'Nunito',sans-serif;font-size:22px;font-weight:700;letter-spacing:1px;}
.landing-reseller-ina .logo-text span:nth-child(1){color:#B56DE8;}
.landing-reseller-ina .logo-text span:nth-child(2){color:#F49A45;}
.landing-reseller-ina .logo-text span:nth-child(3){color:#63CFD7;}
.landing-reseller-ina .logo-text span:nth-child(4){color:#FF6666;}
.landing-reseller-ina .logo-text span:nth-child(5){color:#4F67E8;}
.landing-reseller-ina .logo-text span:nth-child(6){color:var(--yellow);}
.landing-reseller-ina .logo-text span:nth-child(7){color:#FF6666;}
.landing-reseller-ina .logo-text span:nth-child(8){color:#4F67E8;}
.landing-reseller-ina .logo-text span:nth-child(9){color:#F49A45;}
.landing-reseller-ina .logo-text span:nth-child(10){color:var(--yellow);}
.landing-reseller-ina .hero{background:linear-gradient(160deg,#FFF5EC 0%,#FFF0F8 50%,#F0FAFF 100%);padding:40px 20px 32px;text-align:center;position:relative;overflow:hidden;}
.landing-reseller-ina .hero::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:#F49A4520;border-radius:50%;}
.landing-reseller-ina .hero::after{content:'';position:absolute;bottom:-30px;left:-30px;width:120px;height:120px;background:#63CFD720;border-radius:50%;}
.landing-reseller-ina .hero-badge{display:inline-block;background:var(--coral);color:white;font-size:12px;font-weight:700;padding:5px 14px;border-radius:20px;margin-bottom:14px;font-family:'Nunito',sans-serif;letter-spacing:0.5px;}
.landing-reseller-ina .hero h1{font-size:26px;font-weight:700;line-height:1.3;color:var(--dark);margin-bottom:10px;}
.landing-reseller-ina .hero h1 em{font-style:normal;color:var(--orange);}
.landing-reseller-ina .hero-sub{font-size:14px;color:var(--gray);line-height:1.6;margin-bottom:20px;padding:0 8px;}
.landing-reseller-ina .hero-pills{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:22px;}
.landing-reseller-ina .pill{background:white;border:1.5px solid;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;font-family:'Nunito',sans-serif;}
.landing-reseller-ina .pill-o{border-color:var(--orange);color:var(--orange);}
.landing-reseller-ina .pill-p{border-color:var(--purple);color:var(--purple);}
.landing-reseller-ina .pill-t{border-color:var(--teal);color:var(--teal);}
.landing-reseller-ina .pill-g{border-color:var(--green);color:var(--green);}
.landing-reseller-ina .cta-wa{display:block;background:var(--wa);color:white;font-family:'Nunito',sans-serif;font-size:17px;font-weight:600;text-align:center;padding:14px 20px;border-radius:30px;text-decoration:none;margin:0 auto;max-width:320px;letter-spacing:0.3px;}
.landing-reseller-ina .cta-wa span{font-size:13px;display:block;font-family:'Nunito',sans-serif;font-weight:400;opacity:0.9;margin-top:2px;}
.landing-reseller-ina .products{padding:32px 0 24px;}
.landing-reseller-ina .products-head{text-align:center;padding:0 20px;margin-bottom:20px;}
.landing-reseller-ina .products-head h2{font-size:22px;color:var(--dark);margin-bottom:6px;}
.landing-reseller-ina .products-head p{font-size:13px;color:var(--gray);}
.landing-reseller-ina .scroll-row{display:flex;gap:12px;overflow-x:auto;padding:0 20px 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.landing-reseller-ina .scroll-row::-webkit-scrollbar{display:none;}
.landing-reseller-ina .prod-card{flex:0 0 155px;scroll-snap-align:start;background:white;border-radius:16px;overflow:hidden;border:1.5px solid #F0EBE0;}
.landing-reseller-ina .prod-card img{width:100%;height:155px;object-fit:cover;display:block;}
.landing-reseller-ina .prod-info{padding:8px 10px 10px;}
.landing-reseller-ina .prod-series{font-size:10px;color:var(--gray);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}
.landing-reseller-ina .prod-name{font-family:'Nunito',sans-serif;font-size:14px;font-weight:600;color:var(--dark);line-height:1.2;margin:2px 0 4px;}
.landing-reseller-ina .prod-price{font-size:12px;color:var(--orange);font-weight:700;}
.landing-reseller-ina .problem{background:white;padding:32px 20px;}
.landing-reseller-ina .section-label{display:inline-block;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.5px;font-family:'Nunito',sans-serif;}
.landing-reseller-ina .label-coral{background:#FEE8E8;color:#C0392B;}
.landing-reseller-ina .label-teal{background:#E0F7F4;color:#0E766B;}
.landing-reseller-ina .label-purple{background:#F0E8FE;color:#7B3FC9;}
.landing-reseller-ina .label-orange{background:#FEF0E0;color:#C8650A;}
.landing-reseller-ina .label-yellow{background:#FEF9E0;color:#9A7B00;}
.landing-reseller-ina .label-green{background:#E3F7EC;color:#1A7A4A;}
.landing-reseller-ina .problem h2{font-size:20px;margin-bottom:16px;line-height:1.35;}
.landing-reseller-ina .prob-list{list-style:none;}
.landing-reseller-ina .prob-list li{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px dashed #F0EBE0;font-size:14px;line-height:1.5;}
.landing-reseller-ina .prob-list li:last-child{border-bottom:none;}
.landing-reseller-ina .prob-icon{width:26px;height:26px;border-radius:50%;background:#FEEAEA;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;margin-top:1px;}
.landing-reseller-ina .agitation{background:linear-gradient(135deg,#F8EFFF,#FFF0F0);padding:28px 20px;text-align:center;}
.landing-reseller-ina .agitation h2{font-size:19px;margin-bottom:10px;}
.landing-reseller-ina .agitation p{font-size:13px;color:var(--gray);line-height:1.6;}
.landing-reseller-ina .stat-row{display:flex;gap:10px;margin:20px 0;justify-content:center;}
.landing-reseller-ina .stat-box{background:white;border-radius:14px;padding:12px 16px;text-align:center;flex:1;max-width:130px;border:1.5px solid #EDE0FA;}
.landing-reseller-ina .stat-num{font-family:'Nunito',sans-serif;font-size:24px;font-weight:700;color:var(--purple);line-height:1;}
.landing-reseller-ina .stat-label{font-size:11px;color:var(--gray);margin-top:4px;line-height:1.3;}
.landing-reseller-ina .solution{padding:32px 20px;background:white;}
.landing-reseller-ina .solution h2{font-size:21px;margin-bottom:6px;}
.landing-reseller-ina .solution > p{font-size:13px;color:var(--gray);margin-bottom:20px;line-height:1.6;}
.landing-reseller-ina .benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.landing-reseller-ina .ben-card{border-radius:14px;padding:14px 12px;}
.landing-reseller-ina .ben-card-o{background:#FFF5EB;border:1.5px solid #FDDCB5;}
.landing-reseller-ina .ben-card-t{background:#E8FBF8;border:1.5px solid #B0EDE3;}
.landing-reseller-ina .ben-card-p{background:#F4EEFE;border:1.5px solid #D5B8F5;}
.landing-reseller-ina .ben-card-g{background:#E8F8EE;border:1.5px solid #A8E0C0;}
.landing-reseller-ina .ben-emoji{font-size:22px;margin-bottom:6px;}
.landing-reseller-ina .ben-title{font-family:'Nunito',sans-serif;font-size:14px;font-weight:600;color:var(--dark);margin-bottom:3px;}
.landing-reseller-ina .ben-sub{font-size:11px;color:var(--gray);line-height:1.4;}
.landing-reseller-ina .realphotos{padding:32px 20px;background:var(--orange-light);}
.landing-reseller-ina .realphotos h2{font-size:21px;text-align:center;margin-bottom:6px;}
.landing-reseller-ina .realphotos > p{font-size:13px;color:var(--gray);text-align:center;margin-bottom:18px;}
.landing-reseller-ina .photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.landing-reseller-ina .photo-grid img{width:100%;border-radius:14px;object-fit:cover;height:180px;display:block;}
.landing-reseller-ina .photo-grid img:first-child{grid-column:1/-1;height:220px;}
.landing-reseller-ina .realphoto-item{margin:0;}
.landing-reseller-ina .realphoto-item:first-child{grid-column:1/-1;}
.landing-reseller-ina .realphoto-item img{height:180px;}
.landing-reseller-ina .realphoto-item:first-child img{height:220px;}
.landing-reseller-ina .realphoto-item figcaption{margin-top:7px;color:var(--gray);font-size:11px;font-weight:800;text-align:center;}
.landing-reseller-ina .how{padding:32px 20px;background:white;}
.landing-reseller-ina .how h2{font-size:21px;text-align:center;margin-bottom:20px;}
.landing-reseller-ina .step-list{display:flex;flex-direction:column;gap:12px;}
.landing-reseller-ina .step{display:flex;align-items:flex-start;gap:12px;}
.landing-reseller-ina .step-num{width:32px;height:32px;border-radius:50%;font-family:'Nunito',sans-serif;font-size:16px;font-weight:700;color:white;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.landing-reseller-ina .step-body{padding-top:4px;}
.landing-reseller-ina .step-title{font-family:'Nunito',sans-serif;font-size:15px;font-weight:600;color:var(--dark);margin-bottom:2px;}
.landing-reseller-ina .step-desc{font-size:13px;color:var(--gray);line-height:1.5;}
.landing-reseller-ina .step-line{width:2px;height:16px;background:#F0EBE0;margin:4px 0 0 15px;}
.landing-reseller-ina .testi{padding:32px 20px;background:linear-gradient(160deg,#FFFDF5,#FFF5EC);}
.landing-reseller-ina .testi h2{font-size:21px;text-align:center;margin-bottom:16px;}
.landing-reseller-ina .testi-grid{display:flex;flex-direction:column;gap:12px;}
.landing-reseller-ina .tcard{background:white;border-radius:16px;padding:14px 16px;border:1.5px solid #F0EBE0;}
.landing-reseller-ina .tcard-stars{color:var(--yellow);font-size:14px;margin-bottom:6px;}
.landing-reseller-ina .tcard-text{font-size:13px;color:var(--dark);line-height:1.6;font-style:italic;}
.landing-reseller-ina .tcard-name{font-size:11px;color:var(--gray);margin-top:8px;font-weight:600;}
.landing-reseller-ina .tcard-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;background:#E8F8EE;color:var(--green);margin-left:4px;}
.landing-reseller-ina .testi-img-scroll{display:flex;gap:12px;overflow-x:auto;padding:0 0 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.landing-reseller-ina .testi-img-scroll::-webkit-scrollbar{display:none;}
.landing-reseller-ina .testi-img-wrap{flex:0 0 220px;scroll-snap-align:start;border-radius:16px;overflow:hidden;border:2px solid #F0EBE0;box-shadow:0 4px 16px rgba(0,0,0,0.08);}
.landing-reseller-ina .testi-img-wrap img{width:100%;display:block;object-fit:cover;}
.landing-reseller-ina .testi-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0;}
.landing-reseller-ina .testi-text-card{padding:14px;border:1px solid #FFE3ED;border-radius:16px;background:#fff;box-shadow:0 6px 16px #00000008;}
.landing-reseller-ina .testi-text-card p{margin-bottom:10px;color:var(--dark);font-size:13px;line-height:1.5;}
.landing-reseller-ina .testi-text-card b{display:block;font-size:13px;}
.landing-reseller-ina .testi-text-card span{display:inline-block;margin-top:7px;padding:4px 8px;border-radius:999px;background:#FFF2BF;color:#8a6b00;font-size:10px;font-weight:800;}
.landing-reseller-ina .testi-counter{text-align:center;font-size:12px;color:var(--gray);margin-top:10px;}
.landing-reseller-ina .momkids{padding:32px 20px;background:linear-gradient(160deg,#FFF0F8,#FFF5EB);}
.landing-reseller-ina .momkids-head{text-align:center;margin-bottom:20px;}
.landing-reseller-ina .momkids-head h2{font-size:21px;color:var(--dark);margin-bottom:6px;}
.landing-reseller-ina .momkids-head p{font-size:13px;color:var(--gray);line-height:1.6;}
.landing-reseller-ina .momkids-badge{display:inline-block;background:#FBEAF0;color:#993556;font-size:11px;font-weight:700;padding:4px 14px;border-radius:20px;margin-bottom:12px;font-family:'Nunito',sans-serif;letter-spacing:0.4px;}
.landing-reseller-ina .mk-scroll{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px;}
.landing-reseller-ina .mk-scroll::-webkit-scrollbar{display:none;}
.landing-reseller-ina .mk-card{flex:0 0 240px;scroll-snap-align:start;background:white;border-radius:18px;overflow:hidden;border:1.5px solid #F5D0E8;}
.landing-reseller-ina .mk-card img{width:100%;height:240px;object-fit:cover;display:block;}
.landing-reseller-ina .mk-card-info{padding:10px 12px 14px;}
.landing-reseller-ina .mk-series-label{font-size:10px;font-weight:700;color:#993556;text-transform:uppercase;letter-spacing:0.5px;}
.landing-reseller-ina .mk-name{font-family:'Nunito',sans-serif;font-size:16px;font-weight:600;color:var(--dark);margin:3px 0 4px;}
.landing-reseller-ina .mk-tag{display:inline-block;background:#FBEAF0;color:#72243E;font-size:10px;font-weight:700;padding:3px 10px;border-radius:12px;}
.landing-reseller-ina .mk-hint{text-align:center;font-size:12px;color:var(--gray);margin-top:10px;}
.landing-reseller-ina .mk-price-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:4px 0 6px;}
.landing-reseller-ina .mk-price-ori{text-decoration:line-through;color:#B4B2A9;font-size:11px;font-weight:600;}
.landing-reseller-ina .mk-price-special{font-family:'Nunito',sans-serif;font-size:16px;font-weight:700;color:var(--coral);}
.landing-reseller-ina .mk-price-badge{background:var(--coral);color:white;font-size:9px;font-weight:700;padding:2px 6px;border-radius:8px;}
.landing-reseller-ina .jualan{padding:36px 20px;background:linear-gradient(160deg,#FFF5EB,#FFF0F8);}
.landing-reseller-ina .jualan-head{text-align:center;margin-bottom:28px;}
.landing-reseller-ina .jualan-head h2{font-size:24px;color:var(--dark);line-height:1.3;margin-bottom:8px;}
.landing-reseller-ina .jualan-head p{font-size:14px;color:var(--gray);line-height:1.6;}
.landing-reseller-ina .jualan-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;}
.landing-reseller-ina .jualan-item{background:white;border-radius:16px;padding:16px 12px;text-align:center;border:2px solid transparent;transition:border 0.2s;}
.landing-reseller-ina .jualan-item.j-orange{border-color:#FDDCB5;background:#FFF8F0;}
.landing-reseller-ina .jualan-item.j-pink{border-color:#F5C0D0;background:#FFF0F5;}
.landing-reseller-ina .jualan-item.j-purple{border-color:#D5B8F5;background:#F8F0FF;}
.landing-reseller-ina .jualan-item.j-teal{border-color:#A8E0D0;background:#F0FEFA;}
.landing-reseller-ina .jualan-item.j-blue{border-color:#B5D4F4;background:#F0F8FF;}
.landing-reseller-ina .jualan-item.j-green{border-color:#A8E0C0;background:#F0FFF5;}
.landing-reseller-ina .jualan-item.j-yellow{border-color:#FAE08A;background:#FFFBF0;}
.landing-reseller-ina .jualan-emoji{font-size:32px;display:block;margin-bottom:8px;line-height:1;}
.landing-reseller-ina .jualan-name{font-family:'Nunito',sans-serif;font-size:17px;font-weight:700;color:var(--dark);margin-bottom:5px;}
.landing-reseller-ina .jualan-desc{font-size:13px;color:#444441;line-height:1.5;font-weight:600;}
.landing-reseller-ina .jualan-cta-wrap{background:var(--dark);border-radius:18px;padding:20px 16px;text-align:center;}
.landing-reseller-ina .jualan-cta-title{font-family:'Nunito',sans-serif;font-size:18px;color:white;margin-bottom:6px;}
.landing-reseller-ina .jualan-cta-sub{font-size:13px;color:#B4B2A9;margin-bottom:16px;line-height:1.5;}
.landing-reseller-ina .price-ori{text-decoration:line-through;color:#B4B2A9;font-size:11px;font-weight:600;}
.landing-reseller-ina .price-special{color:var(--coral);font-size:13px;font-weight:800;font-family:'Nunito',sans-serif;}
.landing-reseller-ina .price-badge{display:inline-block;background:var(--coral);color:white;font-size:9px;font-weight:700;padding:2px 6px;border-radius:8px;margin-left:4px;vertical-align:middle;}
.landing-reseller-ina .kalkulator{padding:32px 20px;background:var(--dark);}
.landing-reseller-ina .kalkulator h2{font-size:21px;color:white;text-align:center;margin-bottom:6px;}
.landing-reseller-ina .kalkulator > p{font-size:13px;color:#B4B2A9;text-align:center;margin-bottom:24px;line-height:1.6;}
.landing-reseller-ina .kalc-card{background:#1E1E1C;border-radius:18px;padding:20px 16px;margin-bottom:16px;border:1px solid #3A3A38;}
.landing-reseller-ina .kalc-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.landing-reseller-ina .kalc-label{font-size:13px;color:#B4B2A9;}
.landing-reseller-ina .kalc-val{font-family:'Nunito',sans-serif;font-size:15px;font-weight:600;color:white;}
.landing-reseller-ina .kalc-divider{border:none;border-top:1px dashed #3A3A38;margin:12px 0;}
.landing-reseller-ina .kalc-result{background:linear-gradient(135deg,#F49A45,#F2D65C);border-radius:14px;padding:16px;text-align:center;margin-bottom:16px;}
.landing-reseller-ina .kalc-result-label{font-size:12px;color:#633806;font-weight:600;margin-bottom:4px;}
.landing-reseller-ina .kalc-result-num{font-family:'Nunito',sans-serif;font-size:32px;font-weight:700;color:#2C2C2A;line-height:1;}
.landing-reseller-ina .kalc-result-sub{font-size:11px;color:#854F0B;margin-top:4px;}
.landing-reseller-ina .slider-wrap{margin-bottom:20px;}
.landing-reseller-ina .slider-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.landing-reseller-ina .slider-label span{font-size:12px;color:#B4B2A9;}
.landing-reseller-ina .slider-label strong{font-family:'Nunito',sans-serif;font-size:18px;color:white;}
.landing-reseller-ina input[type=range].kalc-slider{width:100%;-webkit-appearance:none;height:6px;border-radius:3px;background:#3A3A38;outline:none;}
.landing-reseller-ina input[type=range].kalc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--orange);cursor:pointer;}
.landing-reseller-ina .cara-jualan{background:#252523;border-radius:14px;padding:14px 16px;}
.landing-reseller-ina .cara-jualan p{font-size:12px;color:#B4B2A9;margin-bottom:10px;line-height:1.5;}
.landing-reseller-ina .cara-list{display:flex;flex-wrap:wrap;gap:6px;}
.landing-reseller-ina .cara-item{background:#1E1E1C;border:1px solid #3A3A38;border-radius:20px;padding:5px 12px;font-size:11px;color:#D3D1C7;font-weight:600;}
.landing-reseller-ina .trust{background:var(--dark);padding:24px 20px;}
.landing-reseller-ina .trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.landing-reseller-ina .trust-item{display:flex;align-items:center;gap:8px;}
.landing-reseller-ina .trust-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.landing-reseller-ina .trust-text{font-size:12px;color:#D3D1C7;line-height:1.4;}
.landing-reseller-ina .trust-text strong{color:white;font-family:'Nunito',sans-serif;font-size:13px;display:block;}
.landing-reseller-ina .cta-final{background:linear-gradient(160deg,#FFF5EC,#FFEEF8);padding:40px 20px;text-align:center;}
.landing-reseller-ina .cta-final h2{font-size:23px;margin-bottom:10px;line-height:1.35;}
.landing-reseller-ina .cta-final p{font-size:13px;color:var(--gray);margin-bottom:24px;line-height:1.6;}
.landing-reseller-ina .cta-final .cta-wa{font-size:18px;padding:16px 24px;}
.landing-reseller-ina footer{background:var(--dark);padding:16px 20px;text-align:center;}
.landing-reseller-ina footer p{font-size:11px;color:#888;}
.landing-reseller-ina .landing-footer-note{background:var(--dark);padding:16px 20px;text-align:center;font-size:11px;color:#888;}

/* Urgent layout guard: keep the reseller landing as the original mobile-first layout even on desktop. */
.landing-reseller-ina{
  width:min(100%,430px);
  max-width:430px;
  margin:0 auto;
  background:var(--cream);
  overflow-x:hidden;
}
.landing-reseller-ina section,
.landing-reseller-ina nav,
.landing-reseller-ina .landing-footer-note{
  width:100%;
}
.landing-reseller-ina img{
  max-width:100%;
}
.landing-reseller-ina .scroll-row{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 20px 8px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.landing-reseller-ina .scroll-row::-webkit-scrollbar,
.landing-reseller-ina .mk-scroll::-webkit-scrollbar,
.landing-reseller-ina .testi-img-scroll::-webkit-scrollbar{
  display:none;
}
.landing-reseller-ina .prod-card{
  flex:0 0 155px;
  width:155px;
  max-width:155px;
  scroll-snap-align:start;
}
.landing-reseller-ina .prod-card img{
  width:100%;
  height:155px;
  object-fit:cover;
  display:block;
}
.landing-reseller-ina .mk-scroll,
.landing-reseller-ina .testi-img-scroll{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.landing-reseller-ina .mk-card{
  flex:0 0 240px;
  width:240px;
  max-width:240px;
  scroll-snap-align:start;
}
.landing-reseller-ina .mk-card img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}
.landing-reseller-ina .testi-img-wrap{
  flex:0 0 220px;
  width:220px;
  max-width:220px;
  scroll-snap-align:start;
}
.landing-reseller-ina .testi-img-wrap img{
  width:100%;
  display:block;
  object-fit:cover;
}
.landing-reseller-ina .photo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.landing-reseller-ina .photo-grid img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}
.landing-reseller-ina .photo-grid .realphoto-item:first-child{
  grid-column:1/-1;
}
.landing-reseller-ina .photo-grid .realphoto-item:first-child img{
  height:220px;
}

/* === End Landing Reseller INA === */

/* Landing Reseller INA rebuild: scoped mobile-first layout */
.landing-reseller-ina {
  --lr-cream: #fffdf5;
  --lr-cream-2: #fff5eb;
  --lr-dark: #2c2c2a;
  --lr-muted: #756f6b;
  --lr-orange: #f49a45;
  --lr-coral: #ff6666;
  --lr-purple: #8a58e8;
  --lr-teal: #42c6c8;
  --lr-green: #2fb86d;
  --lr-yellow: #ffd65a;
  --lr-line: #f0ebe0;
  width: 100% !important;
  max-width: 430px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  background: var(--lr-cream);
  color: var(--lr-dark);
  min-height: 100svh;
  overflow-x: hidden;
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
}

.landing-reseller-ina,
.landing-reseller-ina * {
  box-sizing: border-box;
}

.landing-reseller-ina * {
  letter-spacing: 0;
}

.landing-reseller-ina img {
  max-width: 100%;
  height: auto;
}

.landing-reseller-ina .lr-page-shell {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  background: var(--lr-cream);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(240, 235, 224, 0.72);
}

.landing-reseller-ina h1,
.landing-reseller-ina h2,
.landing-reseller-ina h3,
.landing-reseller-ina .lr-logo,
.landing-reseller-ina .lr-wa {
  font-family: "Fredoka", "Nunito", system-ui, sans-serif;
}

.landing-reseller-ina h1,
.landing-reseller-ina h2,
.landing-reseller-ina h3,
.landing-reseller-ina p {
  margin: 0;
}

.landing-reseller-ina .lr-nav {
  min-height: 48px;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
  position: relative;
  top: auto;
  z-index: auto;
  background: #fff;
  border-bottom: 2px solid #ffe4cf;
}

.landing-reseller-ina .lr-nav-sticky {
  position: sticky;
  top: 0;
  z-index: 40;
}

.landing-reseller-ina .lr-logo {
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.4px;
}

.landing-reseller-ina .lr-logo-custom span {
  color: var(--lr-orange) !important;
}

.landing-reseller-ina .lr-nav-tagline {
  color: var(--lr-muted);
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.landing-reseller-ina .lr-logo span:nth-child(1) { color: #9a67e8; }
.landing-reseller-ina .lr-logo span:nth-child(2) { color: #f49a45; }
.landing-reseller-ina .lr-logo span:nth-child(3) { color: #42c6c8; }
.landing-reseller-ina .lr-logo span:nth-child(4) { color: #ff6666; }
.landing-reseller-ina .lr-logo span:nth-child(5) { color: #4f67e8; }
.landing-reseller-ina .lr-logo span:nth-child(6) { color: #ffd65a; }
.landing-reseller-ina .lr-logo span:nth-child(7) { color: #ff6666; }
.landing-reseller-ina .lr-logo span:nth-child(8) { color: #4f67e8; }
.landing-reseller-ina .lr-logo span:nth-child(9) { color: #f49a45; }
.landing-reseller-ina .lr-logo span:nth-child(10) { color: #ffd65a; }

.landing-reseller-ina .lr-hero {
  position: relative;
  overflow: hidden;
  padding: 34px 20px 30px;
  text-align: center;
  background: linear-gradient(160deg, #fff4e8 0%, #fff0f7 54%, #eefcff 100%);
}

.landing-reseller-ina .lr-hero > *:not(.lr-hero-bg) {
  position: relative;
  z-index: 1;
}

.landing-reseller-ina .lr-hero-bg {
  position: absolute;
  border-radius: 999px;
  opacity: 0.62;
  pointer-events: none;
}

.landing-reseller-ina .lr-hero-bg-one {
  width: 150px;
  height: 150px;
  right: -54px;
  top: -46px;
  background: rgba(244, 154, 69, 0.18);
}

.landing-reseller-ina .lr-hero-bg-two {
  width: 122px;
  height: 122px;
  left: -46px;
  bottom: -38px;
  background: rgba(66, 198, 200, 0.18);
}

.landing-reseller-ina .lr-badge,
.landing-reseller-ina .lr-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.2;
}

.landing-reseller-ina .lr-badge {
  margin: 0 auto 12px;
  padding: 6px 13px;
  color: #fff;
  background: var(--lr-coral);
}

.landing-reseller-ina .lr-title {
  max-width: 350px;
  margin: 0 auto;
  color: var(--lr-dark);
  font-size: clamp(24px, 6.5vw, 28px);
  font-weight: 700;
  line-height: 1.22;
}

.landing-reseller-ina .lr-title span {
  display: block;
  margin-top: 2px;
  color: var(--lr-orange);
}

.landing-reseller-ina .lr-subtitle {
  max-width: 350px;
  margin: 11px auto 19px;
  color: var(--lr-muted);
  font-size: clamp(13px, 3.8vw, 14px);
  font-weight: 700;
  line-height: 1.58;
}

.landing-reseller-ina .lr-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  max-width: 340px;
  margin: 0 auto 21px;
}

.landing-reseller-ina .lr-pill {
  padding: 5px 10px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  background: #fff;
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
}

.landing-reseller-ina .lr-pill-1 { color: var(--lr-orange); }
.landing-reseller-ina .lr-pill-2 { color: var(--lr-purple); }
.landing-reseller-ina .lr-pill-3 { color: var(--lr-teal); }
.landing-reseller-ina .lr-pill-4 { color: var(--lr-green); }

.landing-reseller-ina .lr-wa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: min(100%, 320px);
  min-height: 58px;
  margin: 0 auto;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: #1fb55a;
  color: #fff;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(31, 181, 90, 0.18);
}

.landing-reseller-ina .lr-wa strong {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
}

.landing-reseller-ina .lr-wa span {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  opacity: 0.94;
}

.landing-reseller-ina .lr-section {
  padding: 31px 20px;
}

.landing-reseller-ina .lr-section-head {
  padding: 0 4px;
  margin-bottom: 17px;
  text-align: center;
}

.landing-reseller-ina .lr-section h2,
.landing-reseller-ina .lr-section-head h2 {
  color: var(--lr-dark);
  font-size: clamp(20px, 5.5vw, 24px);
  font-weight: 700;
  line-height: 1.22;
}

.landing-reseller-ina .lr-section > p,
.landing-reseller-ina .lr-section-head p {
  margin-top: 6px;
  color: var(--lr-muted);
  font-size: clamp(13px, 3.8vw, 14px);
  font-weight: 700;
  line-height: 1.55;
}

.landing-reseller-ina .lr-products {
  padding-left: 0;
  padding-right: 0;
  background: var(--lr-cream);
}

.landing-reseller-ina .lr-scroll,
.landing-reseller-ina .lr-mk-scroll,
.landing-reseller-ina .lr-shot-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.landing-reseller-ina .lr-scroll::-webkit-scrollbar,
.landing-reseller-ina .lr-mk-scroll::-webkit-scrollbar,
.landing-reseller-ina .lr-shot-scroll::-webkit-scrollbar {
  display: none;
}

.landing-reseller-ina .lr-product-scroll {
  padding: 0 20px 8px;
}

.landing-reseller-ina .lr-product-card {
  flex: 0 0 155px;
  width: 155px;
  scroll-snap-align: start;
  overflow: hidden;
  border: 1.5px solid var(--lr-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(54, 43, 35, 0.06);
}

.landing-reseller-ina .lr-product-img {
  display: block;
  width: 100%;
  height: 155px;
  object-fit: cover;
}

.landing-reseller-ina .lr-product-body,
.landing-reseller-ina .lr-mk-body {
  padding: 9px 10px 11px;
}

.landing-reseller-ina .lr-eyebrow {
  color: #8a8178;
  font-size: 9.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.landing-reseller-ina .lr-product-card h3,
.landing-reseller-ina .lr-mk-card h3 {
  margin-top: 2px;
  color: var(--lr-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.18;
}

.landing-reseller-ina .lr-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.landing-reseller-ina .lr-price-row span {
  color: #b0a79f;
  font-size: 10.5px;
  font-weight: 900;
  text-decoration: line-through;
}

.landing-reseller-ina .lr-price-row strong {
  color: #ff6478;
  font-size: 12px;
  font-weight: 900;
}

.landing-reseller-ina .lr-problem,
.landing-reseller-ina .lr-solution,
.landing-reseller-ina .lr-how {
  background: #fff;
}

.landing-reseller-ina .lr-label {
  margin-bottom: 12px;
  padding: 5px 12px;
}

.landing-reseller-ina .lr-label-coral { color: #c0392b; background: #fee8e8; }
.landing-reseller-ina .lr-label-purple { color: #7040bf; background: #f0e8fe; }
.landing-reseller-ina .lr-label-teal { color: #087a73; background: #e0f7f4; }
.landing-reseller-ina .lr-label-orange { color: #c8650a; background: #fef0e0; }
.landing-reseller-ina .lr-label-dark { color: #f7be4b; background: rgba(247, 190, 75, 0.12); }
.landing-reseller-ina .lr-label-pink { color: #993556; background: #fbeaf0; }
.landing-reseller-ina .lr-label-yellow { color: #85680b; background: #fef6c9; }
.landing-reseller-ina .lr-label-green { color: #146c3c; background: #e3f7ec; }

.landing-reseller-ina .lr-problem-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px 0 0;
  margin: 0;
  list-style: none;
}

.landing-reseller-ina .lr-problem-list li {
  display: flex;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--lr-line);
}

.landing-reseller-ina .lr-problem-list li:last-child {
  border-bottom: 0;
}

.landing-reseller-ina .lr-problem-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  border-radius: 999px;
  background: #fee8e8;
  color: var(--lr-coral);
  font-size: 14px;
  font-weight: 900;
}

.landing-reseller-ina .lr-problem-list p {
  color: var(--lr-muted);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.5;
}

.landing-reseller-ina .lr-agitation {
  background: linear-gradient(145deg, #f8eeff 0%, #fff0f4 100%);
  text-align: center;
}

.landing-reseller-ina .lr-agitation .lr-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0 12px;
}

.landing-reseller-ina .lr-stat {
  min-height: 84px;
  padding: 13px 10px;
  border: 1.5px solid #eadcfb;
  border-radius: 16px;
  background: #fff;
}

.landing-reseller-ina .lr-stat strong {
  display: block;
  color: var(--lr-purple);
  font-family: "Fredoka", sans-serif;
  font-size: 26px;
  line-height: 1;
}

.landing-reseller-ina .lr-stat span,
.landing-reseller-ina .lr-note {
  color: var(--lr-muted);
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1.35;
}

.landing-reseller-ina .lr-note {
  color: #7040bf;
}

.landing-reseller-ina .lr-benefits,
.landing-reseller-ina .lr-selling-grid,
.landing-reseller-ina .lr-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.landing-reseller-ina .lr-benefit {
  min-height: 120px;
  padding: 14px 12px;
  border-radius: 16px;
  border: 1.5px solid var(--lr-line);
}

.landing-reseller-ina .lr-benefit-1 { background: #fff5eb; border-color: #fddcb5; }
.landing-reseller-ina .lr-benefit-2 { background: #e8fbf8; border-color: #b0ede3; }
.landing-reseller-ina .lr-benefit-3 { background: #f4eefe; border-color: #d5b8f5; }
.landing-reseller-ina .lr-benefit-4 { background: #e8f8ee; border-color: #a8e0c0; }

.landing-reseller-ina .lr-benefit div,
.landing-reseller-ina .lr-selling-card div {
  margin-bottom: 7px;
  font-size: 23px;
  line-height: 1;
}

.landing-reseller-ina .lr-benefit h3,
.landing-reseller-ina .lr-selling-card h3 {
  color: var(--lr-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.landing-reseller-ina .lr-benefit p,
.landing-reseller-ina .lr-selling-card p {
  margin-top: 4px;
  color: var(--lr-muted);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.42;
}

.landing-reseller-ina .lr-calc {
  background: #242824;
  color: #fff;
  text-align: center;
}

.landing-reseller-ina .lr-calc h2 {
  color: #fff;
}

.landing-reseller-ina .lr-calc > p {
  color: #d8d8d1;
}

.landing-reseller-ina .lr-slider-card,
.landing-reseller-ina .lr-calc-card {
  margin-top: 18px;
  padding: 15px;
  border-radius: 18px;
  background: #fff;
  color: var(--lr-dark);
  text-align: left;
}

.landing-reseller-ina .lr-slider-head,
.landing-reseller-ina .lr-slider-minmax,
.landing-reseller-ina .lr-calc-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.landing-reseller-ina .lr-slider-head span,
.landing-reseller-ina .lr-calc-card span {
  color: var(--lr-muted);
  font-size: 12px;
  font-weight: 900;
}

.landing-reseller-ina .lr-slider-head strong,
.landing-reseller-ina .lr-calc-card strong {
  color: var(--lr-dark);
  font-size: 12.5px;
  font-weight: 900;
  overflow-wrap: anywhere;
  text-align: right;
}

.landing-reseller-ina .lr-range {
  width: 100%;
  height: 7px;
  margin: 14px 0 8px;
  border-radius: 999px;
  accent-color: var(--lr-orange);
}

.landing-reseller-ina .lr-range::-webkit-slider-thumb {
  min-width: 22px;
  min-height: 22px;
}

.landing-reseller-ina .lr-range::-moz-range-thumb {
  min-width: 22px;
  min-height: 22px;
}

.landing-reseller-ina .lr-slider-minmax span {
  color: #9b958e;
  font-size: 10px;
  font-weight: 900;
}

.landing-reseller-ina .lr-calc-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #303530;
  color: #fff;
}

.landing-reseller-ina .lr-calc-card span {
  color: #d8d8d1;
}

.landing-reseller-ina .lr-calc-card strong {
  color: #fff;
}

.landing-reseller-ina .lr-calc-card div:nth-child(3) strong {
  color: var(--lr-yellow);
}

.landing-reseller-ina .lr-calc-card hr {
  width: 100%;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.landing-reseller-ina .lr-result {
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(140deg, #ffb84d, #ffd65a);
  color: #3b2b0b;
  text-align: center;
}

.landing-reseller-ina .lr-result p {
  font-size: 11px;
  font-weight: 900;
}

.landing-reseller-ina .lr-result strong {
  display: block;
  margin-top: 3px;
  font-family: "Fredoka", sans-serif;
  font-size: clamp(24px, 7vw, 28px);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.landing-reseller-ina .lr-result span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 900;
}

.landing-reseller-ina .lr-selling {
  background: linear-gradient(180deg, #fff4ee, #fff8ed);
  text-align: center;
}

.landing-reseller-ina .lr-selling-grid {
  margin-top: 17px;
}

.landing-reseller-ina .lr-selling-card {
  min-height: 120px;
  padding: 14px 10px;
  border: 1.5px solid #f6d9b8;
  border-radius: 16px;
  background: #fff;
}

.landing-reseller-ina .lr-selling-card-1,
.landing-reseller-ina .lr-selling-card-4 { background: #f8f0ff; border-color: #e2cdfb; }
.landing-reseller-ina .lr-selling-card-2,
.landing-reseller-ina .lr-selling-card-6 { background: #fff5e7; border-color: #f6d9b8; }
.landing-reseller-ina .lr-selling-card-3 { background: #f5eeff; border-color: #e1d0fa; }
.landing-reseller-ina .lr-selling-card-5 { background: #e9fbf7; border-color: #b8ebe2; }

.landing-reseller-ina .lr-selling-wide {
  margin-top: 10px;
  background: #f0fff5;
  border-color: #a8e0c0;
}

.landing-reseller-ina .lr-selling-cta {
  margin-top: 18px;
  padding: 18px 16px;
  border-radius: 20px;
  background: #242824;
  color: #fff;
}

.landing-reseller-ina .lr-selling-cta h3 {
  color: #fff;
  font-size: 18px;
}

.landing-reseller-ina .lr-selling-cta p {
  margin: 6px 0 14px;
  color: #d8d8d1;
  font-size: 12px;
  font-weight: 800;
}

.landing-reseller-ina .lr-realphotos {
  background: #fff2de;
  text-align: center;
}

.landing-reseller-ina .lr-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}

.landing-reseller-ina .lr-photo-card {
  min-width: 0;
  margin: 0;
}

.landing-reseller-ina .lr-photo-card:first-child {
  grid-column: 1 / -1;
}

.landing-reseller-ina .lr-photo-card img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: 0 8px 18px rgba(54, 43, 35, 0.08);
}

.landing-reseller-ina .lr-photo-card:first-child img {
  height: 220px;
}

.landing-reseller-ina .lr-photo-card figcaption {
  margin-top: 6px;
  color: #756f6b;
  font-size: 10.5px;
  font-weight: 900;
}

.landing-reseller-ina .lr-momkids {
  padding-left: 20px;
  padding-right: 0;
  background: linear-gradient(160deg, #fff0f8, #fff6ee);
  text-align: center;
}

.landing-reseller-ina .lr-momkids > h2,
.landing-reseller-ina .lr-momkids > p,
.landing-reseller-ina .lr-momkids > .lr-label {
  margin-right: 20px;
}

.landing-reseller-ina .lr-mk-scroll {
  margin-top: 18px;
  padding: 0 20px 8px 0;
}

.landing-reseller-ina .lr-mk-card {
  flex: 0 0 240px;
  width: 240px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1.5px solid #f5d0e8;
  border-radius: 18px;
  background: #fff;
  text-align: left;
  box-shadow: 0 10px 20px rgba(104, 52, 87, 0.08);
}

.landing-reseller-ina .lr-mk-card img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.landing-reseller-ina .lr-mk-body small {
  display: inline-flex;
  margin-top: 7px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff0f6;
  color: #b43e65;
  font-size: 10px;
  font-weight: 900;
}

.landing-reseller-ina .lr-scroll-hint {
  margin: 8px 20px 0 0;
  color: var(--lr-muted);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.landing-reseller-ina .lr-step-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.landing-reseller-ina .lr-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
}

.landing-reseller-ina .lr-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--lr-orange);
  color: #fff;
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.landing-reseller-ina .lr-step:nth-child(2) .lr-step-num { background: var(--lr-purple); }
.landing-reseller-ina .lr-step:nth-child(3) .lr-step-num { background: var(--lr-teal); }
.landing-reseller-ina .lr-step:nth-child(4) .lr-step-num { background: var(--lr-coral); }

.landing-reseller-ina .lr-step h3 {
  color: var(--lr-dark);
  font-size: 15px;
  line-height: 1.2;
}

.landing-reseller-ina .lr-step p {
  margin-top: 3px;
  color: var(--lr-muted);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.48;
}

.landing-reseller-ina .lr-testimonials {
  background: linear-gradient(180deg, #fffdf5, #fff5eb);
  text-align: center;
}

.landing-reseller-ina .lr-testimonial-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 17px;
  text-align: left;
}

.landing-reseller-ina .lr-testimonial-card {
  padding: 14px;
  border: 1.5px solid #ffe2ec;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(54, 43, 35, 0.05);
}

.landing-reseller-ina .lr-testimonial-card p {
  color: var(--lr-dark);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.landing-reseller-ina .lr-testimonial-card strong {
  display: block;
  margin-top: 8px;
  font-size: 12px;
}

.landing-reseller-ina .lr-testimonial-card span {
  display: inline-flex;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff4c5;
  color: #85680b;
  font-size: 10px;
  font-weight: 900;
}

.landing-reseller-ina .lr-shot-scroll {
  margin-top: 17px;
  padding-bottom: 8px;
}

.landing-reseller-ina .lr-shot-card {
  flex: 0 0 220px;
  width: 220px;
  margin: 0;
  overflow: hidden;
  scroll-snap-align: start;
  border: 2px solid var(--lr-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(54, 43, 35, 0.08);
}

.landing-reseller-ina .lr-shot-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.landing-reseller-ina .lr-trust {
  background: #222823;
  color: #fff;
}

.landing-reseller-ina .lr-trust-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 9px;
  align-items: center;
}

.landing-reseller-ina .lr-trust-item > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 16px;
}

.landing-reseller-ina .lr-trust-item strong,
.landing-reseller-ina .lr-trust-item span {
  display: block;
}

.landing-reseller-ina .lr-trust-item strong {
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.landing-reseller-ina .lr-trust-item span {
  margin-top: 2px;
  color: #d8d8d1;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.25;
}

.landing-reseller-ina .lr-final {
  background: linear-gradient(160deg, #e8fbf8, #fffdf5);
  text-align: center;
}

.landing-reseller-ina .lr-final .lr-wa {
  margin-top: 18px;
}

.landing-reseller-ina .lr-footer-note {
  padding: 18px 20px 24px;
  background: #fff;
  color: var(--lr-muted);
  font-size: 11.5px;
  font-weight: 900;
  text-align: center;
}

.landing-reseller-ina .lr-footer-logo {
  margin-bottom: 6px;
  color: var(--lr-orange);
  font-family: "Fredoka", "Nunito", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.landing-reseller-ina .lr-footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.landing-reseller-ina .lr-footer-social a {
  color: var(--lr-dark);
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

@media (min-width: 431px) {
  body:has(.landing-reseller-ina) {
    background: #f7eddf;
  }

  .landing-reseller-ina {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 390px) {
  .landing-reseller-ina .lr-title {
    font-size: 25px;
  }

  .landing-reseller-ina .lr-section {
    padding-left: 18px;
    padding-right: 18px;
  }

  .landing-reseller-ina .lr-product-scroll {
    padding-left: 18px;
    padding-right: 18px;
  }
}

html:has(.landing-reseller-ina),
body:has(.landing-reseller-ina) {
  width: 100%;
  min-height: 100svh;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
  background: #f7eddf;
}

body:has(.landing-reseller-ina) > .footer,
body:has(.landing-reseller-ina) > .bottom-nav,
body:has(.landing-reseller-ina) > .whatsapp-float {
  display: none !important;
}

body:has(.landing-reseller-ina) .landing-reseller-ina {
  width: 100% !important;
  max-width: 430px !important;
}

body:has(.landing-reseller-ina) .landing-reseller-ina .lr-page-shell {
  max-width: 430px !important;
}

.landing-reseller-ina .lr-title {
  max-width: 330px;
  overflow-wrap: normal;
  text-wrap: balance;
}

@media (max-width: 430px) {
  .landing-reseller-ina .lr-page-shell {
    box-shadow: none;
  }

  .landing-reseller-ina .lr-title {
    font-size: clamp(24px, 6.5vw, 28px);
  }
}

@media (max-width: 360px) {
  .landing-reseller-ina .lr-hero {
    padding: 30px 16px 28px;
  }

  .landing-reseller-ina .lr-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .landing-reseller-ina .lr-product-scroll {
    padding-left: 16px;
    padding-right: 16px;
  }

  .landing-reseller-ina .lr-momkids {
    padding-left: 16px;
  }

  .landing-reseller-ina .lr-momkids > h2,
  .landing-reseller-ina .lr-momkids > p,
  .landing-reseller-ina .lr-momkids > .lr-label {
    margin-right: 16px;
  }

  .landing-reseller-ina .lr-title {
    max-width: 310px;
    font-size: 24px;
  }

  .landing-reseller-ina .lr-wa {
    min-height: 52px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (min-width: 768px) {
  .landing-reseller-ina {
    max-width: 430px !important;
  }
}

@media (max-width: 600px) {
  body:has(.landing-reseller-ina) .landing-reseller-ina {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Admin User Management */
.admin-user-management {
  --aum-purple: #7452de;
  --aum-orange: #ff9f43;
  --aum-pink: #ff5c8a;
  --aum-green: #10b981;
  --aum-yellow: #f5a900;
  --aum-ink: #141827;
  --aum-muted: #6b7280;
  --aum-line: rgba(20, 24, 39, .10);
  display: grid;
  gap: 22px;
  color: var(--aum-ink);
}
.aum-page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.aum-title-block{display:flex;align-items:center;gap:16px;min-width:0}
.aum-page-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:18px;color:var(--aum-purple);background:#f1edff;font-weight:950}
.aum-title-block h1{margin:0 0 5px;font-size:clamp(30px,3vw,42px);line-height:1.05}
.aum-title-block p{margin:0;color:var(--aum-muted);font-weight:800}
.aum-head-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;max-width:100%}
.aum-btn,.aum-row-actions a,.aum-row-actions button,.aum-pagination a,.aum-reset{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 14px;border:1px solid rgba(116,82,222,.28);border-radius:12px;color:var(--aum-purple);background:#fff;font-weight:950;font-size:13px;text-decoration:none;cursor:pointer}
.aum-btn-primary{border-color:transparent;color:#fff;background:linear-gradient(135deg,#8b5cf6,#6546d8);box-shadow:0 12px 24px rgba(116,82,222,.22)}
.aum-btn:disabled,.aum-row-actions button:disabled{cursor:not-allowed;opacity:.55}
.aum-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.aum-summary-card{min-height:138px;padding:20px;border:1px solid var(--aum-line);border-radius:22px;background:#fff;box-shadow:0 16px 34px rgba(15,23,42,.07);position:relative;overflow:hidden}
.aum-summary-card::after{content:"";position:absolute;right:18px;top:24px;width:54px;height:54px;border-radius:18px;background:currentColor;opacity:.13}
.aum-summary-card span,.aum-widget h2{color:#263044;font-size:14px;font-weight:950}
.aum-summary-card b{display:block;margin:12px 0 7px;font-size:32px;line-height:1}
.aum-summary-card small{color:var(--aum-muted);font-weight:800}
.aum-summary-card.tone-purple{color:var(--aum-purple)}
.aum-summary-card.tone-orange{color:var(--aum-orange)}
.aum-summary-card.tone-pink{color:var(--aum-pink)}
.aum-summary-card.tone-yellow{color:var(--aum-yellow)}
.aum-summary-card.tone-green{color:var(--aum-green)}
.aum-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.aum-main-panel{display:grid;gap:16px;min-width:0}
.aum-filter-card,.aum-table-card,.aum-widget{border:1px solid var(--aum-line);border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 14px 34px rgba(15,23,42,.06)}
.aum-filter-card{display:grid;grid-template-columns:minmax(240px,1.55fr) repeat(5,minmax(135px,1fr));gap:14px;padding:18px;align-items:end}
.aum-filter-card label{gap:8px;min-width:0}
.aum-filter-card label span{color:#30384a;font-size:12px;font-weight:950}
.aum-filter-card input,.aum-filter-card select,.aum-per-page select{min-height:46px;border-radius:12px;background:#fff}
.aum-filter-actions{grid-column:1 / -1;display:flex;justify-content:flex-end;align-items:center;gap:10px;padding-top:6px}
.aum-filter-actions small{margin-right:auto;color:var(--aum-muted);font-weight:800}
.aum-table-card{overflow:hidden}
.aum-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.aum-table{width:100%;min-width:1260px;border-collapse:collapse}
.aum-table th,.aum-table td{padding:15px 16px;border-bottom:1px solid rgba(20,24,39,.08);vertical-align:middle;text-align:left}
.aum-table th{color:#30384a;background:#fbfbfe;font-size:12px;font-weight:950;white-space:nowrap}
.aum-table td{color:#222938;font-size:13px;font-weight:800}
.aum-table td small{display:block;margin-top:3px;color:#687386;font-size:12px;font-weight:800}
.aum-user-cell{display:flex;align-items:center;gap:11px;min-width:230px}
.aum-user-cell img,.aum-avatar{width:42px;height:42px;border-radius:50%;flex:0 0 auto}
.aum-user-cell img{object-fit:cover;border:1px solid rgba(116,82,222,.18)}
.aum-avatar{display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#8b5cf6,#f97316);font-size:13px;font-weight:950}
.aum-badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:950;white-space:nowrap}
.aum-badge.role{color:#6d28d9;background:#f1edff}
.aum-badge.active{color:#047857;background:#d1fae5}
.aum-badge.pending{color:#be123c;background:#ffe4e6}
.aum-money-purple{color:#6d28d9}
.aum-money-green{color:#059669}
.aum-row-actions{display:flex;gap:6px;white-space:nowrap}
.aum-row-actions a,.aum-row-actions button{min-height:34px;padding:6px 9px;border-radius:10px;font-size:12px}
.aum-empty{padding:34px;color:var(--aum-muted);text-align:center;font-weight:900}
.aum-table-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px}
.aum-per-page,.aum-pagination{display:flex;align-items:center;gap:8px}
.aum-per-page{color:var(--aum-muted);font-size:13px;font-weight:850}
.aum-per-page select{width:auto;min-width:74px}
.aum-pagination a{min-width:38px;min-height:36px;padding:7px 10px}
.aum-pagination a.active{color:#fff;background:var(--aum-purple);border-color:var(--aum-purple)}
.aum-pagination a.disabled{pointer-events:none;opacity:.45}
.aum-sidebar{display:grid;gap:16px}
.aum-widget{padding:18px}
.aum-widget h2{margin:0 0 14px}
.aum-rank-row{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid rgba(20,24,39,.07)}
.aum-rank-row span{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;color:var(--aum-purple);background:#f1edff;font-size:12px;font-weight:950}
.aum-rank-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.aum-rank-row strong{font-size:12px;white-space:nowrap}
.aum-widget-number{display:block;margin:6px 0 8px;font-size:38px;line-height:1}
.aum-widget p,.aum-muted{margin:0;color:var(--aum-muted);font-weight:800;line-height:1.55}
.aum-widget.tone-orange .aum-rank-row span{color:#c05621;background:#fff0db}
.aum-widget.tone-pink{border-color:rgba(255,92,138,.22)}
.aum-widget.tone-green{border-color:rgba(16,185,129,.22)}
.admin-user-management-modal[hidden]{display:none}
.admin-user-management-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px}
.aum-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.48);backdrop-filter:blur(5px)}
.aum-modal-card{position:relative;width:min(920px,100%);max-height:min(88vh,860px);display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.55);border-radius:26px;background:#fff;box-shadow:0 30px 80px rgba(15,23,42,.28)}
.aum-create-card{width:min(760px,100%)}
.aum-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 24px;border-bottom:1px solid var(--aum-line);background:linear-gradient(135deg,#fff,#f7f3ff)}
.aum-modal-kicker{display:block;margin-bottom:5px;color:var(--aum-purple);font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.04em}
.aum-modal-head h2{margin:0 0 4px;font-size:28px;line-height:1.1}
.aum-modal-head p{margin:0;color:var(--aum-muted);font-weight:800}
.aum-modal-close{width:40px;height:40px;border:1px solid rgba(20,24,39,.12);border-radius:14px;background:#fff;color:#30384a;font-size:24px;font-weight:900;cursor:pointer}
.aum-modal-alert{margin:14px 24px 0;padding:12px 14px;border-radius:14px;color:#334155;background:#eff6ff;border:1px solid #bfdbfe;font-weight:850}
.aum-modal-alert[data-type="error"]{color:#9f1239;background:#fff1f2;border-color:#fecdd3}
.aum-modal-alert[data-type="success"]{color:#047857;background:#ecfdf5;border-color:#a7f3d0}
.aum-modal-tabs{display:flex;gap:8px;padding:16px 24px 0;overflow-x:auto}
.aum-modal-tabs button{min-height:40px;padding:8px 13px;border:1px solid rgba(116,82,222,.22);border-radius:12px;background:#fff;color:#5b6475;font-weight:950;white-space:nowrap;cursor:pointer}
.aum-modal-tabs button.active{color:#fff;background:var(--aum-purple);border-color:var(--aum-purple)}
.aum-modal-body{display:flex;flex-direction:column;min-height:0;overflow:auto;padding:18px 24px 0}
.aum-modal-panel{display:none}
.aum-modal-panel.active{display:block}
.aum-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.aum-form-grid label,.aum-whatsapp-box label{gap:8px;color:#30384a;font-size:13px;font-weight:950}
.aum-form-grid input,.aum-form-grid select,.aum-whatsapp-box input,.aum-whatsapp-box textarea{border-radius:13px;background:#fff}
.aum-checkline{display:flex!important;align-items:center;gap:10px;min-height:48px;padding:0 12px;border:1px solid rgba(47,47,47,.18);border-radius:13px;background:#fff}
.aum-checkline input{width:20px;min-height:20px}
.aum-helper{margin:14px 0 0;color:var(--aum-muted);font-size:13px;font-weight:800;line-height:1.5}
.aum-modal-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.aum-modal-stats article,.aum-order-row,.aum-address-row{padding:14px;border:1px solid var(--aum-line);border-radius:16px;background:#fbfbfe}
.aum-modal-stats span{display:block;color:var(--aum-muted);font-size:12px;font-weight:900}
.aum-modal-stats b{display:block;margin-top:6px;font-size:20px;line-height:1.15}
.aum-address-list{display:grid;gap:10px;margin-top:16px}
.aum-address-list h3{margin:0;font-size:18px}
.aum-address-row b,.aum-order-row b{display:block;margin-bottom:4px}
.aum-address-row small,.aum-order-row small{display:block;color:var(--aum-muted);font-weight:800}
.aum-address-row p{margin:8px 0 0;color:#3f4858;font-weight:800;line-height:1.45}
.aum-recent-orders{display:grid;gap:10px}
.aum-order-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.aum-order-meta{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.aum-order-meta span{display:inline-flex;padding:5px 9px;border-radius:999px;background:#f1edff;color:#6d28d9;font-size:12px;font-weight:950}
.aum-whatsapp-box{display:grid;gap:14px}
.aum-whatsapp-box textarea{min-height:170px}
.aum-notes-box,.aum-notes-list,.aum-note-form,.aum-quick-note-form,.aum-quick-note-list{display:grid;gap:12px}
.aum-note-form textarea,.aum-quick-note-form textarea{min-height:96px;border-radius:13px;background:#fff}
.aum-note-card{display:grid;gap:9px;padding:13px;border:1px solid var(--aum-line);border-radius:15px;background:#fbfbfe}
.aum-note-card p{margin:0;color:#30384a;font-weight:850;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.aum-note-card small{color:var(--aum-muted);font-size:12px;font-weight:850}
.aum-note-card textarea{min-height:92px;border-radius:12px;background:#fff}
.aum-note-actions{display:flex;flex-wrap:wrap;gap:8px}
.aum-note-card button{justify-self:start;min-height:32px;padding:6px 10px;border:1px solid rgba(116,82,222,.22);border-radius:10px;background:#fff;color:var(--aum-purple);font-size:12px;font-weight:950;cursor:pointer}
.aum-modal-actions{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:10px;margin:18px -24px 0;padding:16px 24px;border-top:1px solid var(--aum-line);background:rgba(255,255,255,.96);backdrop-filter:blur(8px)}
body.modal-open{overflow:hidden}

@media (max-width: 1480px) {
  .aum-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .aum-layout{grid-template-columns:minmax(0,1fr)}
  .aum-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aum-filter-card{grid-template-columns:repeat(3,minmax(0,1fr))}
  .aum-filter-search{grid-column:span 2}
}

@media (max-width: 1100px) {
  .aum-page-head,.aum-table-footer{align-items:stretch;flex-direction:column}
  .aum-head-actions{justify-content:flex-start}
  .aum-filter-card{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 720px) {
  .aum-title-block{align-items:flex-start}
  .aum-summary-grid,.aum-filter-card,.aum-sidebar{grid-template-columns:1fr}
  .aum-head-actions,.aum-filter-actions,.aum-per-page,.aum-pagination{flex-wrap:wrap}
  .aum-filter-actions small{width:100%}
  .admin-user-management-modal{padding:10px}
  .aum-modal-card{max-height:94vh;border-radius:20px}
  .aum-modal-head{padding:18px}
  .aum-modal-body{padding:14px 18px 0}
  .aum-form-grid,.aum-modal-stats{grid-template-columns:1fr}
  .aum-order-row{grid-template-columns:1fr}
  .aum-order-meta{justify-content:flex-start}
  .aum-modal-actions{margin-left:-18px;margin-right:-18px;padding:14px 18px;flex-wrap:wrap}
}

/* Admin Reseller Sales */
.admin-reseller-sales {
  --ars-purple:#7452de;
  --ars-orange:#ff9f43;
  --ars-pink:#ff5c8a;
  --ars-green:#10b981;
  --ars-yellow:#f5a900;
  --ars-ink:#141827;
  --ars-muted:#6b7280;
  --ars-line:rgba(20,24,39,.10);
  display:grid;
  gap:22px;
  color:var(--ars-ink);
}
.ars-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.ars-title{display:flex;align-items:center;gap:16px;min-width:0}
.ars-page-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:18px;color:var(--ars-purple);background:#f1edff;font-weight:950}
.ars-title h1{margin:0 0 5px;font-size:clamp(30px,3vw,42px);line-height:1.05}
.ars-title p{margin:0;color:var(--ars-muted);font-weight:800}
.ars-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;max-width:100%}
.ars-btn,.ars-row-actions a,.ars-row-actions button,.ars-pagination a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 14px;border:1px solid rgba(116,82,222,.28);border-radius:12px;color:var(--ars-purple);background:#fff;font-weight:950;font-size:13px;text-decoration:none;cursor:pointer}
.ars-btn-primary{border-color:transparent;color:#fff;background:linear-gradient(135deg,#8b5cf6,#6546d8);box-shadow:0 12px 24px rgba(116,82,222,.22)}
.ars-btn:disabled,.ars-row-actions button:disabled{cursor:not-allowed;opacity:.55}
.ars-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.ars-summary-card{min-height:138px;padding:20px;border:1px solid var(--ars-line);border-radius:22px;background:#fff;box-shadow:0 16px 34px rgba(15,23,42,.07);position:relative;overflow:hidden}
.ars-summary-card::after{content:"";position:absolute;right:18px;top:24px;width:54px;height:54px;border-radius:18px;background:currentColor;opacity:.13}
.ars-summary-card span,.ars-widget h2{color:#263044;font-size:14px;font-weight:950}
.ars-summary-card b{display:block;margin:12px 0 7px;font-size:30px;line-height:1.05;word-break:break-word}
.ars-summary-card small{color:var(--ars-muted);font-weight:800}
.ars-summary-card.tone-purple{color:var(--ars-purple)}
.ars-summary-card.tone-orange{color:var(--ars-orange)}
.ars-summary-card.tone-pink{color:var(--ars-pink)}
.ars-summary-card.tone-yellow{color:var(--ars-yellow)}
.ars-summary-card.tone-green{color:var(--ars-green)}
.ars-context-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border:1px solid rgba(116,82,222,.18);border-radius:20px;background:linear-gradient(135deg,#f7f3ff,#fff);box-shadow:0 12px 28px rgba(116,82,222,.08)}
.ars-context-banner b{display:block;margin-bottom:3px;font-size:15px}
.ars-context-banner small{display:block;color:var(--ars-muted);font-weight:850}
.ars-filter,.ars-panel,.ars-table-card,.ars-widget{border:1px solid var(--ars-line);border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 14px 34px rgba(15,23,42,.06)}
.ars-filter{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr)) minmax(240px,1.5fr);gap:14px;padding:18px;align-items:end}
.ars-filter label{gap:8px;min-width:0}
.ars-filter label span{color:#30384a;font-size:12px;font-weight:950}
.ars-filter input,.ars-filter select,.ars-per-page select{min-height:46px;border-radius:12px;background:#fff}
.ars-filter-actions{grid-column:1 / -1;display:flex;justify-content:flex-end;gap:10px}
.ars-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.ars-main{display:grid;gap:16px;min-width:0}
.ars-analytics-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.9fr) minmax(280px,.9fr);gap:16px}
.ars-panel{padding:18px;min-width:0}
.ars-panel-head,.ars-table-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.ars-panel-head h2,.ars-table-head h2{margin:0;font-size:20px}
.ars-panel-head small,.ars-table-head small{color:var(--ars-muted);font-weight:850}
.ars-trend-chart{height:250px;display:flex;gap:12px;align-items:stretch;overflow-x:auto;padding:8px 4px 2px}
.ars-trend-item{min-width:92px;display:grid;grid-template-rows:1fr auto auto;gap:8px;text-align:center}
.ars-trend-bar{display:flex;align-items:end;justify-content:center;border-radius:16px;background:linear-gradient(180deg,#fff,#f7f3ff);border:1px solid rgba(116,82,222,.13);overflow:hidden}
.ars-trend-bar span{display:block;width:34px;min-height:8px;border-radius:14px 14px 4px 4px;background:linear-gradient(180deg,#8b5cf6,#a78bfa)}
.ars-trend-item b{font-size:12px;line-height:1.25}
.ars-trend-item small{color:var(--ars-muted);font-size:11px;font-weight:850}
.ars-composition-list,.ars-top-bars{display:grid;gap:13px}
.ars-composition-list label,.ars-top-bars label{display:flex;justify-content:space-between;gap:12px;color:#30384a;font-weight:950;font-size:13px}
.ars-composition-list label span,.ars-top-bars label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ars-composition-list i,.ars-top-bars i{display:block;height:11px;border-radius:999px;background:#f1e7dc;overflow:hidden}
.ars-composition-list em,.ars-top-bars em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8b5cf6,#22d3ee)}
.ars-composition-list small{display:block;margin-top:4px;color:var(--ars-muted);font-size:12px;font-weight:850}
.ars-table-card{overflow:hidden}
.ars-table-head{padding:18px 18px 0}
.ars-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ars-table{width:100%;min-width:1260px;border-collapse:collapse}
.ars-table th,.ars-table td{padding:15px 16px;border-bottom:1px solid rgba(20,24,39,.08);vertical-align:middle;text-align:left}
.ars-table th{color:#30384a;background:#fbfbfe;font-size:12px;font-weight:950;white-space:nowrap}
.ars-table td{color:#222938;font-size:13px;font-weight:800}
.ars-table td small{display:block;margin-top:3px;color:#687386;font-size:12px;font-weight:800}
.ars-money-purple{color:#6d28d9}
.ars-money-green{color:#059669}
.ars-badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:950;white-space:nowrap}
.ars-badge.active{color:#047857;background:#d1fae5}
.ars-badge.pending{color:#be123c;background:#ffe4e6}
.ars-row-actions{display:flex;gap:6px;white-space:nowrap}
.ars-row-actions a,.ars-row-actions button{min-height:34px;padding:6px 9px;border-radius:10px;font-size:12px}
.ars-table-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px}
.ars-per-page,.ars-pagination{display:flex;align-items:center;gap:8px}
.ars-per-page{color:var(--ars-muted);font-size:13px;font-weight:850}
.ars-per-page select{width:auto;min-width:74px}
.ars-pagination a{min-width:38px;min-height:36px;padding:7px 10px}
.ars-pagination a.active{color:#fff;background:var(--ars-purple);border-color:var(--ars-purple)}
.ars-pagination a.disabled{pointer-events:none;opacity:.45}
.ars-sidebar{display:grid;gap:16px}
.ars-widget{padding:18px}
.ars-widget h2{margin:0 0 14px}
.ars-rank-row{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid rgba(20,24,39,.07)}
.ars-rank-row span{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;color:var(--ars-purple);background:#f1edff;font-size:12px;font-weight:950}
.ars-rank-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.ars-rank-row strong{font-size:12px;white-space:nowrap}
.ars-widget-number{display:block;margin:6px 0 8px;font-size:20px;line-height:1.2}
.ars-widget p,.ars-empty{margin:0;color:var(--ars-muted);font-weight:800;line-height:1.55}
.ars-empty{padding:18px;text-align:center}
.ars-widget.tone-pink{border-color:rgba(255,92,138,.22)}
.ars-widget.tone-orange .ars-rank-row span{color:#c05621;background:#fff0db}
.ars-widget.tone-purple{border-color:rgba(116,82,222,.22)}
.ars-widget.tone-green{border-color:rgba(16,185,129,.22)}
.ars-detail-modal[hidden]{display:none}
.ars-detail-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px}
.ars-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.48);backdrop-filter:blur(5px)}
.ars-modal-card{position:relative;width:min(980px,100%);max-height:min(88vh,880px);display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.55);border-radius:26px;background:#fff;box-shadow:0 30px 80px rgba(15,23,42,.28)}
.ars-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 24px;border-bottom:1px solid var(--ars-line);background:linear-gradient(135deg,#fff,#f7f3ff)}
.ars-modal-kicker{display:block;margin-bottom:5px;color:var(--ars-purple);font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.04em}
.ars-modal-head h2{margin:0 0 4px;font-size:28px;line-height:1.1}
.ars-modal-head p{margin:0;color:var(--ars-muted);font-weight:800}
.ars-modal-close{width:40px;height:40px;border:1px solid rgba(20,24,39,.12);border-radius:14px;background:#fff;color:#30384a;font-size:24px;font-weight:900;cursor:pointer}
.ars-modal-alert{margin:14px 24px 0;padding:12px 14px;border-radius:14px;color:#334155;background:#eff6ff;border:1px solid #bfdbfe;font-weight:850}
.ars-modal-alert[data-type="error"]{color:#9f1239;background:#fff1f2;border-color:#fecdd3}
.ars-modal-body{display:grid;gap:16px;min-height:0;overflow:auto;padding:18px 24px 24px}
.ars-detail-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.ars-detail-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ars-detail-stats article,.ars-detail-row{padding:14px;border:1px solid var(--ars-line);border-radius:16px;background:#fbfbfe}
.ars-detail-stats span{display:block;color:var(--ars-muted);font-size:12px;font-weight:900}
.ars-detail-stats b{display:block;margin-top:6px;font-size:20px;line-height:1.15;overflow-wrap:anywhere}
.ars-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ars-detail-grid h3,.ars-modal-body h3{margin:0 0 10px;font-size:18px}
.ars-detail-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin-bottom:10px}
.ars-detail-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ars-detail-row small{grid-column:1 / -1;color:var(--ars-muted);font-weight:800}
.ars-detail-row strong{color:var(--ars-purple);white-space:nowrap}

@media (max-width:1480px){
  .ars-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ars-layout{grid-template-columns:minmax(0,1fr)}
  .ars-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ars-filter{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ars-filter-search{grid-column:span 2}
}
@media (max-width:1180px){
  .ars-head,.ars-table-footer{align-items:stretch;flex-direction:column}
  .ars-actions{justify-content:flex-start}
  .ars-context-banner{align-items:flex-start;flex-direction:column}
  .ars-filter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ars-analytics-grid{grid-template-columns:1fr}
  .ars-detail-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ars-detail-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .ars-title{align-items:flex-start}
  .ars-summary-grid,.ars-filter,.ars-sidebar{grid-template-columns:1fr}
  .ars-actions,.ars-filter-actions,.ars-per-page,.ars-pagination{flex-wrap:wrap}
  .ars-detail-modal{padding:10px}
  .ars-modal-card{max-height:94vh;border-radius:20px}
  .ars-modal-head{padding:18px}
  .ars-modal-body{padding:14px 18px 18px}
  .ars-detail-stats{grid-template-columns:1fr}
  .ars-detail-row{grid-template-columns:1fr}
}

/* Admin PO Drafts */
.admin-po-drafts {
  --apd-purple:#7452de;
  --apd-orange:#f59e0b;
  --apd-pink:#ff5c8a;
  --apd-green:#10b981;
  --apd-blue:#2563eb;
  --apd-ink:#141827;
  --apd-muted:#6b7280;
  --apd-line:rgba(20,24,39,.10);
  display:grid;
  gap:22px;
  color:var(--apd-ink);
}
.apd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.apd-title{display:flex;align-items:center;gap:16px;min-width:0}
.apd-page-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:18px;color:var(--apd-purple);background:#f1edff;font-weight:950}
.apd-title h1{margin:0 0 5px;font-size:clamp(30px,3vw,42px);line-height:1.05}
.apd-title p{margin:0;color:var(--apd-muted);font-weight:800}
.apd-actions,.apd-filter-actions,.apd-row-actions,.apd-detail-actions,.apd-pagination{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.apd-actions{justify-content:flex-end}
.apd-btn,.apd-row-actions a,.apd-row-actions button,.apd-pagination a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 14px;border:1px solid rgba(116,82,222,.28);border-radius:12px;color:var(--apd-purple);background:#fff;font-weight:950;font-size:13px;text-decoration:none;cursor:pointer}
.apd-btn-primary{border-color:transparent;color:#fff;background:linear-gradient(135deg,#8b5cf6,#6546d8);box-shadow:0 12px 24px rgba(116,82,222,.20)}
.apd-btn:disabled,.apd-row-actions button:disabled{cursor:not-allowed;opacity:.55}
.apd-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.apd-summary-card{min-height:132px;padding:20px;border:1px solid var(--apd-line);border-radius:22px;background:#fff;box-shadow:0 16px 34px rgba(15,23,42,.07);position:relative;overflow:hidden}
.apd-summary-card::after{content:"";position:absolute;right:18px;top:24px;width:54px;height:54px;border-radius:18px;background:currentColor;opacity:.13}
.apd-summary-card span{color:#263044;font-size:14px;font-weight:950}
.apd-summary-card b{display:block;margin:12px 0 7px;font-size:30px;line-height:1.05;word-break:break-word}
.apd-summary-card small{color:var(--apd-muted);font-weight:800}
.apd-summary-card.tone-purple{color:var(--apd-purple)}
.apd-summary-card.tone-orange{color:var(--apd-orange)}
.apd-summary-card.tone-pink{color:var(--apd-pink)}
.apd-summary-card.tone-green{color:var(--apd-green)}
.apd-summary-card.tone-blue{color:var(--apd-blue)}
.apd-filter,.apd-table-card,.apd-panel{border:1px solid var(--apd-line);border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 14px 34px rgba(15,23,42,.06)}
.apd-filter{display:grid;grid-template-columns:minmax(240px,1.6fr) repeat(5,minmax(140px,1fr));gap:14px;padding:18px;align-items:end}
.apd-filter label{gap:8px;min-width:0}
.apd-filter label span{color:#30384a;font-size:12px;font-weight:950}
.apd-filter input,.apd-filter select{min-height:46px;border-radius:12px;background:#fff}
.apd-filter-actions{grid-column:1 / -1;justify-content:flex-end}
.apd-table-card{overflow:hidden}
.apd-table-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 18px 0;margin-bottom:14px}
.apd-table-head h2{margin:0;font-size:20px}
.apd-table-head small{color:var(--apd-muted);font-weight:850}
.apd-table-scroll,.apd-detail-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.apd-table{width:100%;min-width:1120px;border-collapse:collapse}
.apd-table th,.apd-table td,.apd-detail-table th,.apd-detail-table td{padding:15px 16px;border-bottom:1px solid rgba(20,24,39,.08);vertical-align:middle;text-align:left}
.apd-table th,.apd-detail-table th{color:#30384a;background:#fbfbfe;font-size:12px;font-weight:950;white-space:nowrap}
.apd-table td,.apd-detail-table td{color:#222938;font-size:13px;font-weight:800}
.apd-table td small{display:block;margin-top:4px;color:#687386;font-size:12px;font-weight:800;line-height:1.45}
.apd-money-purple{color:#6d28d9;font-weight:950}
.apd-badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:950;white-space:nowrap}
.apd-badge.draft{color:#6d28d9;background:#f1edff}
.apd-badge.submitted{color:#047857;background:#d1fae5}
.apd-badge.expired{color:#be123c;background:#ffe4e6}
.apd-badge.cancelled{color:#64748b;background:#f1f5f9}
.apd-row-actions{gap:6px;white-space:nowrap}
.apd-row-actions a,.apd-row-actions button{min-height:34px;padding:6px 9px;border-radius:10px;font-size:12px}
.apd-empty{padding:24px;color:var(--apd-muted);text-align:center;font-weight:900;line-height:1.55}
.apd-table-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px}
.apd-table-footer small{color:var(--apd-muted);font-weight:850}
.apd-pagination a{min-width:38px;min-height:36px;padding:7px 10px}
.apd-pagination a.active{color:#fff;background:var(--apd-purple);border-color:var(--apd-purple)}
.apd-pagination a.disabled{pointer-events:none;opacity:.45}
.apd-detail-modal[hidden]{display:none}
.apd-detail-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px}
.apd-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.48);backdrop-filter:blur(5px)}
.apd-modal-card{position:relative;width:min(1060px,100%);max-height:min(90dvh,900px);display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.55);border-radius:26px;background:#fff;box-shadow:0 30px 80px rgba(15,23,42,.28)}
.apd-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 24px;border-bottom:1px solid var(--apd-line);background:linear-gradient(135deg,#fff,#f7f3ff)}
.apd-modal-kicker{display:block;margin-bottom:5px;color:var(--apd-purple);font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.04em}
.apd-modal-head h2{margin:0 0 4px;font-size:28px;line-height:1.1}
.apd-modal-head p{margin:0;color:var(--apd-muted);font-weight:800}
.apd-modal-close{width:40px;height:40px;border:1px solid rgba(20,24,39,.12);border-radius:14px;background:#fff;color:#30384a;font-size:24px;font-weight:900;cursor:pointer}
.apd-modal-alert{margin:14px 24px 0;padding:12px 14px;border-radius:14px;color:#334155;background:#eff6ff;border:1px solid #bfdbfe;font-weight:850}
.apd-modal-alert[data-type="error"]{color:#9f1239;background:#fff1f2;border-color:#fecdd3}
.apd-modal-alert[data-type="success"]{color:#047857;background:#ecfdf5;border-color:#a7f3d0}
.apd-modal-body{display:grid;gap:16px;min-height:0;overflow:auto;padding:18px 24px 24px}
.apd-detail-actions{justify-content:flex-end}
.apd-detail-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.apd-detail-stats article,.apd-detail-row,.apd-timeline-row{padding:14px;border:1px solid var(--apd-line);border-radius:16px;background:#fbfbfe}
.apd-detail-stats span,.apd-detail-row span{display:block;color:var(--apd-muted);font-size:12px;font-weight:900}
.apd-detail-stats b,.apd-detail-row b{display:block;margin-top:6px;font-size:20px;line-height:1.15;overflow-wrap:anywhere}
.apd-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.apd-panel{padding:18px;min-width:0}
.apd-panel h3{margin:0 0 12px;font-size:18px}
.apd-detail-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px;align-items:start;margin-bottom:10px}
.apd-detail-row b{margin:0;font-size:14px;white-space:pre-wrap}
.apd-detail-table{width:100%;min-width:780px;border-collapse:collapse}
.apd-timeline-row{display:grid;gap:6px;margin-bottom:10px}
.apd-timeline-row b{font-size:14px}
.apd-timeline-row small{color:var(--apd-muted);font-weight:850}
.apd-timeline-row p{margin:0;color:#30384a;font-weight:850;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}

@media (max-width:1480px){
  .apd-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .apd-filter{grid-template-columns:repeat(3,minmax(0,1fr))}
  .apd-filter-search{grid-column:span 2}
}
@media (max-width:1180px){
  .apd-head,.apd-table-footer{align-items:stretch;flex-direction:column}
  .apd-actions,.apd-filter-actions{justify-content:flex-start}
  .apd-filter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apd-detail-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apd-detail-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .apd-title{align-items:flex-start}
  .apd-summary-grid,.apd-filter{grid-template-columns:1fr}
  .apd-filter-search{grid-column:auto}
  .apd-detail-modal{padding:10px}
  .apd-modal-card{max-height:94dvh;border-radius:20px}
  .apd-modal-head{padding:18px}
  .apd-modal-body{padding:14px 18px 18px}
  .apd-detail-stats{grid-template-columns:1fr}
  .apd-detail-row{grid-template-columns:1fr}
}

.midtrans-status-page{min-height:100dvh}
.midtrans-status-card{width:min(980px,calc(100% - 32px));margin:42px auto 64px;padding:34px;border:1px solid rgba(255,112,43,.16);border-radius:28px;background:rgba(255,255,255,.9);box-shadow:0 24px 70px rgba(84,54,30,.08);text-align:center}
.midtrans-status-card.success{border-color:#bdeecb;background:linear-gradient(180deg,#fff,#f4fff7)}
.midtrans-status-card.processing{border-color:#fed7aa;background:linear-gradient(180deg,#fff,#fff8ed)}
.midtrans-status-card.danger{border-color:#fecdd3;background:linear-gradient(180deg,#fff,#fff5f6)}
.midtrans-status-hero{display:grid;justify-items:center;gap:8px;max-width:720px;margin:0 auto 22px}
.midtrans-status-icon{display:grid;place-items:center;width:68px;height:68px;border-radius:22px;color:#fff;background:#f59e0b;font-size:34px;font-weight:950;box-shadow:0 16px 34px rgba(245,158,11,.24)}
.midtrans-status-card.success .midtrans-status-icon{background:#22c55e;box-shadow:0 16px 34px rgba(34,197,94,.22)}
.midtrans-status-card.danger .midtrans-status-icon{background:#e11d48;box-shadow:0 16px 34px rgba(225,29,72,.2)}
.midtrans-status-card h1{margin:0;color:#1f2937;font-size:clamp(30px,5vw,46px);line-height:1.08}
.midtrans-status-card p{max-width:720px;margin:0 auto;color:#4b5563;font-size:16px;font-weight:850;line-height:1.65}
.midtrans-status-meta{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:24px 0 18px;padding:20px;border:1px solid rgba(255,112,43,.16);border-radius:24px;background:rgba(255,253,248,.82);text-align:center}
.midtrans-status-meta div{display:grid;gap:8px;padding:10px 14px;border-right:1px solid rgba(20,24,39,.08)}
.midtrans-status-meta div:last-child{border-right:0}
.midtrans-status-meta dt{color:#64748b;font-size:12px;font-weight:950}
.midtrans-status-meta dd{margin:0;color:#1f2937;font-size:14px;font-weight:950;overflow-wrap:anywhere}
.midtrans-result-pill{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:950}
.midtrans-result-pill.pending,.midtrans-result-pill.processing{color:#b45309;background:#fff1d6}
.midtrans-result-pill.success{color:#087f3d;background:#e5f9ec}
.midtrans-result-pill.failed{color:#be123c;background:#ffe5ea}
.midtrans-status-note{display:grid;gap:4px;margin:0 0 18px;padding:14px 16px;border:1px solid rgba(37,99,235,.16);border-radius:18px;color:#1e3a8a;background:#eff6ff;text-align:left}
.midtrans-status-note strong{font-size:14px;font-weight:950}
.midtrans-status-note span{font-size:13px;font-weight:800;line-height:1.45}
.midtrans-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left}
.midtrans-result-panel,.midtrans-next-steps{padding:20px;border:1px solid rgba(255,112,43,.14);border-radius:22px;background:#fff}
.midtrans-result-panel h2,.midtrans-next-steps h2{margin:0 0 12px;color:var(--ink);font-size:18px}
.midtrans-result-panel ul,.midtrans-next-steps ol{display:grid;gap:10px;margin:0;padding-left:20px;color:#4b5563;font-weight:800;line-height:1.5}
.midtrans-summary-list{display:grid;gap:12px;margin:0}
.midtrans-summary-list div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(20,24,39,.08)}
.midtrans-summary-list div:last-child{padding-bottom:0;border-bottom:0}
.midtrans-summary-list dt{color:#64748b;font-size:13px;font-weight:950}
.midtrans-summary-list dd{margin:0;color:#1f2937;font-weight:950;text-align:right;overflow-wrap:anywhere}
.midtrans-next-steps{margin-top:16px;text-align:left;background:#f3f8ff;border-color:#cfe3ff}
.midtrans-status-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
.midtrans-status-actions .pill{min-height:50px;min-width:190px}

@media (max-width:640px){
  .midtrans-status-card{width:calc(100% - 24px);margin:28px auto 48px;padding:24px 18px;border-radius:20px}
  .midtrans-status-card h1{font-size:30px}
  .midtrans-status-card p{font-size:15px}
  .midtrans-status-meta{grid-template-columns:1fr;padding:12px}
  .midtrans-status-meta div{border-right:0;border-bottom:1px solid rgba(20,24,39,.08)}
  .midtrans-status-meta div:last-child{border-bottom:0}
  .midtrans-result-grid{grid-template-columns:1fr}
  .midtrans-summary-list div{grid-template-columns:1fr}
  .midtrans-summary-list dd{text-align:left}
  .midtrans-status-actions{align-items:stretch;flex-direction:column}
  .midtrans-status-actions .pill{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
}

/* Phase 14E-E: failed payment/result UX mockup alignment */
.midtrans-status-page{background:radial-gradient(circle at 10% 45%,rgba(255,242,222,.76),transparent 34%),linear-gradient(180deg,#fffaf2 0%,#fff7ec 100%)}
.midtrans-status-card{width:min(1060px,calc(100% - 32px));margin:34px auto 70px;padding:42px 42px 34px;border-radius:26px;background:rgba(255,255,255,.94);box-shadow:0 24px 72px rgba(105,65,28,.1);border:1px solid #f3dfd2}
.midtrans-status-card.danger{width:min(880px,calc(100% - 32px));border-color:#ffd7dc;background:rgba(255,255,255,.96)}
.midtrans-status-hero{gap:10px;margin-bottom:28px}
.midtrans-status-icon{width:64px;height:64px;border-radius:20px;background:linear-gradient(180deg,#36c66f,#16a34a);font-size:36px;box-shadow:0 18px 32px rgba(21,128,61,.2)}
.midtrans-status-card.danger .midtrans-status-icon{width:74px;height:74px;border-radius:50%;background:linear-gradient(180deg,#fb7185,#e11d48);box-shadow:0 0 0 14px rgba(244,63,94,.12),0 18px 34px rgba(225,29,72,.18)}
.midtrans-status-card h1{font-size:clamp(34px,4vw,46px);letter-spacing:0}
.midtrans-status-meta{grid-template-columns:repeat(5,minmax(0,1fr));padding:22px 14px;margin:26px 0 18px;border-radius:22px;background:#fffdfb}
.midtrans-status-meta div{position:relative;gap:9px;padding:8px 16px}
.meta-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 4px;border-radius:50%;font-size:13px;font-weight:950}
.meta-icon.orange{color:#fb6a2a;background:#fff1e7}.meta-icon.purple{color:#8b5cf6;background:#f3eaff}.meta-icon.green{color:#159447;background:#e8fbef}.meta-icon.amber{color:#d97706;background:#fff4d8}.meta-icon.blue{color:#2684d9;background:#eaf5ff}
.midtrans-status-note{grid-template-columns:auto 1fr;align-items:center;margin:0 0 18px;border-color:#b9d4ff;background:#f0f7ff;color:#1d4ed8}
.note-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid #93c5fd;font-weight:950}
.midtrans-result-grid{gap:18px;margin-top:18px}
.midtrans-result-panel{border-color:#f1ddd0;border-radius:18px;box-shadow:0 10px 22px rgba(105,65,28,.04)}
.midtrans-result-panel ul{list-style:none;padding-left:0}
.midtrans-result-panel li{position:relative;padding-left:25px}
.midtrans-result-panel li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:50%;background:#22c55e}
.midtrans-thank-strip{display:flex;align-items:center;gap:12px;margin-top:22px;padding:17px 20px;border-radius:16px;border:1px solid #f8d9b9;background:#fff8e8;color:#be4b17;text-align:left}
.midtrans-thank-strip span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff1df;color:#ff5b17;font-size:12px;font-weight:950}
.midtrans-failed-summary{display:grid;gap:0;width:min(680px,100%);margin:20px auto 16px;padding:18px 24px;border:1px solid #ffd7dc;border-radius:18px;background:rgba(255,255,255,.88);text-align:left}
.midtrans-failed-summary div{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:center;padding:13px 0;border-bottom:1px solid #f0e2e2}
.midtrans-failed-summary div:last-child{border-bottom:0}
.midtrans-failed-summary dt{font-weight:950;color:#374151}.midtrans-failed-summary dd{margin:0;font-weight:950;color:#111827}
.midtrans-reassurance-strip{display:flex;gap:16px;align-items:center;width:min(680px,100%);margin:0 auto 16px;padding:15px 18px;border-radius:16px;border:1px solid #f7dfad;background:#fff7d6;text-align:left}
.strip-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff1bf;color:#f59e0b;font-weight:950}
.midtrans-reassurance-strip b{display:block;color:#1f2937}.midtrans-reassurance-strip small{display:block;margin-top:4px;color:#5b514b;font-weight:800}
.midtrans-failed-panel{display:grid;grid-template-columns:70px 1fr;gap:18px;width:min(680px,100%);margin:14px auto 0;padding:20px 22px;border-radius:18px;text-align:left}
.midtrans-failed-panel h2{margin:0 0 8px;font-size:20px}.midtrans-failed-panel ul,.midtrans-failed-panel ol{margin:0;padding-left:18px;font-weight:850;line-height:1.6;color:#273142}
.midtrans-failed-panel.warning{border:1px solid #ffcbd2;background:#fff1f3}.midtrans-failed-panel.next{border:1px solid #c9defe;background:#f0f7ff}
.panel-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:#fff;color:#e11d48;font-size:22px;font-weight:950;box-shadow:0 8px 18px rgba(225,29,72,.08)}
.midtrans-failed-panel.next .panel-icon{color:#2563eb}
.midtrans-support-text{width:min(680px,100%);margin:26px auto 0;padding-top:18px;border-top:1px dashed #ffd4b8;color:#9a4a22;font-weight:900}
.midtrans-status-actions form{margin:0}.midtrans-status-actions button.pill{border:0;cursor:pointer}

.po-hero-failed-icon{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#ffe5e8;color:#ff4f10;font-style:normal;font-size:34px;vertical-align:middle}
.po-hero-warning{display:inline-flex;max-width:620px;margin-top:10px;padding:12px 16px;border:1px solid #ffbcc7;border-radius:14px;background:#fff1f3;color:#b91c1c;font-weight:950}
.po-mini-summary{grid-template-columns:repeat(5,minmax(100px,1fr))}
.po-mini-summary .stat-gagal{border-color:#ffcbd2;background:#fff1f3}.po-mini-summary .stat-gagal b{color:#e11d48}
.po-mini-summary .stat-selesai{border-color:#bfe9cf;background:#effcf4}.po-mini-summary .stat-selesai b{color:#0b9d42}
.po-badge.gagal{background:#ffe5ea;color:#e11d48}.po-list-status .danger{color:#e11d48}
.po-failed-list-card{border:1px solid #ffbfc7;border-radius:20px;background:linear-gradient(180deg,#fffafa,#fff4f5);box-shadow:0 14px 32px rgba(225,29,72,.08);padding:16px}
.po-failed-main{display:grid;grid-template-columns:minmax(210px,.9fr) minmax(170px,.7fr) minmax(0,1.3fr) minmax(140px,.55fr) minmax(140px,.55fr);gap:16px;align-items:center}
.po-failed-id{display:grid;gap:7px}.po-failed-id b{font-size:20px}.po-failed-id small{color:#7a6b61;font-weight:850}
.po-locked-pay{display:grid;gap:8px;text-align:center}.po-locked-pay small{color:#7a6b61;font-weight:850}
.po-failed-notice{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:14px;align-items:center;margin-top:14px;padding:14px 16px;border:1px solid #ffccd4;border-radius:16px;background:#fff1f3}
.po-failed-notice b{display:block;color:#7f1d1d}.po-failed-notice span{display:block;margin-top:3px;color:#6b4c4c;font-weight:800}.po-failed-notice form{margin:0}
.outline-chip.purple{border-color:#b993f1;color:#7b45df;background:#fff}
.po-failed-info-section{margin-top:18px;padding:18px 22px;border:1px solid #f2d6b6;border-radius:18px;background:#fffaf0}
.po-failed-info-section h3{margin:0 0 12px;color:#1f2937}.po-failed-info-section div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}.po-failed-info-section p{margin:0;color:#5b514b;font-weight:850}

.failed-order-page{background:linear-gradient(180deg,#fffaf2 0%,#fff7ec 100%)}
.failed-detail-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);gap:30px;align-items:center;width:min(1180px,calc(100% - 32px));margin:28px auto 18px}
.failed-detail-hero img{max-height:220px;justify-self:end;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(105,65,28,.12))}
.failed-breadcrumb{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:24px;color:#5b514b;font-weight:900}.failed-breadcrumb a{color:#2f2f2f;text-decoration:none}.failed-breadcrumb b{color:#ff4f10}
.failed-title-row{display:flex;gap:18px;align-items:center}.failed-title-icon{display:grid;place-items:center;width:58px;height:58px;border:3px solid #ff4f10;border-radius:50%;color:#ff4f10;font-size:40px;line-height:1}.failed-title-row h1{margin:0;font-size:clamp(34px,4vw,48px)}
.failed-red-badge{display:inline-flex;margin-top:8px;padding:8px 18px;border-radius:999px;background:#ff4f10;color:#fff;font-weight:950}.failed-detail-hero p{max-width:680px;color:#3f3a36;font-weight:850;line-height:1.55}
.failed-detail-summary-card,.failed-detail-card,.failed-action-bar{width:min(1180px,calc(100% - 32px));margin:0 auto 16px;padding:18px;border:1px solid #eadccf;border-radius:18px;background:rgba(255,255,255,.92);box-shadow:0 12px 32px rgba(105,65,28,.06)}
.failed-detail-summary-card h2,.failed-detail-card h2,.failed-action-bar h2{margin:0 0 14px;font-size:20px}.failed-summary-strip{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:0}
.failed-summary-strip article{padding:10px 14px;border-left:1px solid #eadccf}.failed-summary-strip article:first-child{border-left:0}.failed-summary-strip small{display:block;color:#7a6b61;font-weight:850}.failed-summary-strip b{display:block;margin-top:8px;color:#1f2937;font-size:14px}.failed-summary-strip .danger{color:#ff4f10}
.pill-mini{display:inline-flex;width:max-content;padding:6px 12px;border-radius:999px}.pill-mini.danger{background:#ffe5ea;color:#e11d48}.pill-mini.neutral{background:#f1f2f4;color:#555}
.failed-detail-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:16px;width:min(1180px,calc(100% - 32px));margin:0 auto}.failed-detail-grid .failed-detail-card{width:auto;margin:0}
.failed-detail-side{display:grid;gap:16px}.failed-timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start;padding:22px 10px}
.failed-timeline div{position:relative;text-align:center;color:#5b514b;font-weight:850}.failed-timeline span{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 12px;border-radius:50%;background:#d9d9d9}.failed-timeline .done span{background:#22c55e}.failed-timeline .waiting span{background:#f59e0b}.failed-timeline .failed span{background:#ff4f10}.failed-timeline .locked span{background:#cfcfcf}.failed-timeline b{display:block}.failed-timeline small{display:block;margin-top:6px;color:#7a6b61}
.failed-alert-box{padding:16px;border:1px solid #ffcbd2;border-radius:14px;background:#fff1f3;color:#381b1f}.failed-alert-box b{color:#e11d48}.failed-alert-box p{margin:6px 0 10px;font-weight:850}.failed-alert-box ul{margin:0;padding-left:18px;font-weight:800}
.failed-blue-note{margin-top:10px;padding:12px 14px;border:1px solid #bfdbfe;border-radius:12px;background:#eff6ff;color:#1d4ed8;font-weight:850}
.payment-locked>div{display:grid;place-items:center;gap:8px;min-height:160px;text-align:center;border:1px dashed #dadde5;border-radius:14px;background:#fafafa;color:#6b7280}.lock-icon{font-size:12px;font-weight:950;color:#9ca3af}
.failed-detail-products{margin-top:16px}.failed-action-bar{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:12px;align-items:center}.failed-action-bar p{margin:0;color:#5b514b;font-weight:800}.failed-action-bar form{margin:0}
@media(max-width:1180px){.po-mini-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.po-failed-main,.po-failed-notice,.failed-detail-hero,.failed-detail-grid,.failed-action-bar{grid-template-columns:1fr}.failed-detail-hero img{justify-self:center}.failed-summary-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.midtrans-status-card,.midtrans-status-card.danger{width:calc(100% - 24px);padding:24px 18px}.midtrans-status-meta,.midtrans-failed-summary div,.midtrans-failed-panel,.midtrans-status-note{grid-template-columns:1fr}.midtrans-failed-summary div{gap:6px}.midtrans-result-grid{grid-template-columns:1fr}.midtrans-status-actions{display:grid}.midtrans-status-actions form,.midtrans-status-actions .pill{width:100%}.po-failed-notice{grid-template-columns:1fr}.po-failed-notice .pill,.po-failed-notice .outline-chip{width:100%}.po-failed-info-section div,.failed-summary-strip,.failed-timeline{grid-template-columns:1fr}.failed-summary-strip article{border-left:0;border-top:1px solid #eadccf}.failed-summary-strip article:first-child{border-top:0}}