/*
 * PotanSaitao Platform v3.1.0
 * Professional storefront + SaaS control center
 */
:root {
  --potan-primary: #16c784;
  --potan-secondary: #22b8f0;
  --potan-accent: #7dd3fc;
  --potan-success: #10b981;
  --potan-warning: #f59e0b;
  --potan-danger: #ef4444;
  --potan-info: #3b82f6;
  --potan-ink: #0b1220;
  --potan-ink-soft: #111c31;
  --potan-navy: #07111f;
  --potan-surface: #ffffff;
  --potan-surface-soft: #f6f8fc;
  --potan-surface-blue: #eef5ff;
  --potan-border: #dde5f0;
  --potan-text: #142033;
  --potan-muted: #68758a;
  --potan-white: #ffffff;
  --potan-shadow-sm: 0 8px 24px rgba(15, 35, 67, .08);
  --potan-shadow: 0 18px 55px rgba(15, 35, 67, .13);
  --potan-shadow-lg: 0 35px 90px rgba(2, 12, 32, .25);
  --potan-radius-sm: 10px;
  --potan-radius: 18px;
  --potan-radius-lg: 28px;
  --potan-container: 1180px;
  --potan-header: 78px;
  --potan-transition: .22s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--potan-text);
  background: var(--potan-surface-soft);
  font-family: "Kanit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.PotanPublicBody { overflow-x: hidden; }
body.PotanAdminBody { background: #edf2f9; overflow-x: hidden; }
body.PotanNoScroll { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--potan-border); margin: 28px 0; }
::selection { background: color-mix(in srgb, var(--potan-primary) 24%, transparent); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--potan-secondary) 45%, transparent); outline-offset: 3px; }

.PotanContainer { width: min(calc(100% - 36px), var(--potan-container)); margin-inline: auto; }
.PotanVisuallyHidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.PotanSkipLink { position: fixed; z-index: 9999; left: 16px; top: -80px; padding: 10px 16px; color: #fff; background: var(--potan-ink); border-radius: 10px; transition: top var(--potan-transition); }
.PotanSkipLink:focus { top: 16px; }
.PotanMuted { color: var(--potan-muted) !important; }
.PotanTextSuccess { color: var(--potan-success) !important; }
.PotanTextDanger { color: var(--potan-danger) !important; }
.PotanTextLink { color: var(--potan-primary); font-weight: 600; }
.PotanTextLink:hover { text-decoration: underline; }
.PotanIcon { width: 21px; height: 21px; flex: 0 0 auto; }

/* Header */
.PotanHeader {
  position: sticky;
  z-index: 100;
  top: 0;
  height: var(--potan-header);
  color: #fff;
  background: rgba(7, 17, 31, .91);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}
.PotanHeaderInner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.PotanBrand, .PotanSidebarBrand, .PotanAuthLogo { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.PotanBrand > span:last-child, .PotanSidebarBrand > span:last-child, .PotanAuthLogo > span:last-child { display: grid; line-height: 1.15; }
.PotanBrand strong, .PotanSidebarBrand strong, .PotanAuthLogo strong { letter-spacing: .01em; font-size: 18px; font-weight: 700; }
.PotanBrand small, .PotanSidebarBrand small, .PotanAuthLogo small { margin-top: 4px; font-size: 11px; font-weight: 400; color: rgba(255,255,255,.58); letter-spacing: .06em; text-transform: uppercase; }
.PotanLogoMark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--potan-primary), var(--potan-secondary));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--potan-primary) 34%, transparent);
}
.PotanNav { display: flex; align-items: center; gap: 4px; }
.PotanNav > a:not(.PotanButton) { padding: 10px 13px; color: rgba(255,255,255,.74); font-size: 14px; font-weight: 500; border-radius: 10px; transition: var(--potan-transition); }
.PotanNav > a:not(.PotanButton):hover, .PotanNav > a.active { color: #fff; background: rgba(255,255,255,.08); }
.PotanNav .PotanButton { margin-left: 6px; }
.PotanNavToggle { display: none; color: #fff; background: rgba(255,255,255,.08); }
.PotanInlineForm { display: inline-flex; margin: 0; }

/* Buttons */
.PotanButton, button.PotanButton, a.PotanButton {
  --button-bg: linear-gradient(135deg, var(--potan-primary), color-mix(in srgb, var(--potan-primary) 72%, var(--potan-secondary)));
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 20px;
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--button-bg);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--potan-primary) 23%, transparent);
  transition: transform var(--potan-transition), box-shadow var(--potan-transition), opacity var(--potan-transition), background var(--potan-transition);
}
.PotanButton:hover { transform: translateY(-2px); box-shadow: 0 17px 38px color-mix(in srgb, var(--potan-primary) 32%, transparent); }
.PotanButton:active { transform: translateY(0); }
.PotanButton[disabled], .PotanButton.is-disabled { opacity: .52; cursor: not-allowed; transform: none; }
.PotanButtonSmall { min-height: 38px; padding: 8px 14px; border-radius: 10px; font-size: 14px; }
.PotanButtonLarge { min-height: 54px; padding: 15px 25px; border-radius: 14px; font-size: 17px; }
.PotanButtonFull { width: 100%; }
.PotanButtonGhost { --button-bg: transparent; color: var(--potan-primary); border-color: color-mix(in srgb, var(--potan-primary) 26%, var(--potan-border)); box-shadow: none; }
.PotanHeader .PotanButtonGhost { color: #fff; border-color: rgba(255,255,255,.18); }
.PotanButtonGhost:hover { background: color-mix(in srgb, var(--potan-primary) 8%, transparent); box-shadow: none; }
.PotanButtonLight { --button-bg: #fff; color: var(--potan-ink); box-shadow: 0 14px 35px rgba(0,0,0,.16); }
.PotanButtonOutlineLight { --button-bg: transparent; color: #fff; border-color: rgba(255,255,255,.28); box-shadow: none; }
.PotanButtonOutlineLight:hover { background: rgba(255,255,255,.1); }
.PotanButtonSuccess { --button-bg: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 12px 28px rgba(16,185,129,.22); }
.PotanButtonDanger { --button-bg: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 12px 28px rgba(239,68,68,.2); }
.PotanIconButton, .PotanRoundButton {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--potan-text);
  box-shadow: var(--potan-shadow-sm);
  transition: var(--potan-transition);
}
.PotanIconButton:hover, .PotanRoundButton:hover { color: #fff; background: var(--potan-primary); transform: translateY(-2px); }
.PotanRoundButton { border-radius: 50%; }
.PotanLinkButton { padding: 0; color: inherit; border: 0; background: transparent; }
.PotanCopyButton { white-space: nowrap; }

/* Hero */
.PotanHero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 680px;
  color: #fff;
  background:
    radial-gradient(circle at 14% 18%, rgba(37,99,235,.32), transparent 35%),
    radial-gradient(circle at 88% 32%, rgba(6,182,212,.22), transparent 30%),
    linear-gradient(145deg, #07101e 0%, #0b1930 54%, #0a1526 100%);
}
.PotanHero::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom, #000, transparent 82%); }
.PotanHeroGrid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); align-items: center; gap: 70px; min-height: 680px; padding-block: 88px; }
.PotanHeroContent { max-width: 670px; }
.PotanEyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--potan-primary); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.PotanHero .PotanEyebrow { color: #79e6fa; }
.PotanEyebrow::before { content: ""; width: 30px; height: 2px; border-radius: 2px; background: currentColor; }
.PotanHero h1 { margin: 18px 0 20px; max-width: 760px; font-size: clamp(44px, 6vw, 76px); line-height: 1.04; letter-spacing: -.035em; }
.PotanHero h1 span { color: transparent; background: linear-gradient(90deg, #7dd3fc, #67e8f9, #c4b5fd); background-clip: text; -webkit-background-clip: text; }
.PotanLead { margin: 0; max-width: 640px; color: rgba(255,255,255,.72); font-size: clamp(17px, 2vw, 20px); line-height: 1.8; }
.PotanHeroActions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }
.PotanTrustRow { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 32px; color: rgba(255,255,255,.68); font-size: 14px; }
.PotanTrustRow span { display: inline-flex; align-items: center; gap: 8px; }
.PotanTrustRow svg { color: #67e8f9; }
.PotanHeroPanel {
  position: relative;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.045));
  box-shadow: 0 34px 90px rgba(0,0,0,.34);
  backdrop-filter: blur(24px);
}
.PotanHeroPanel::before { content: ""; position: absolute; inset: 14px; z-index: -1; border-radius: 22px; background: rgba(7,17,31,.68); }
.PotanHeroPanelTop { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.PotanOnlinePill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; color: #a7f3d0; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.24); border-radius: 999px; font-size: 12px; font-weight: 600; }
.PotanLiveDot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 6px rgba(52,211,153,.12); animation: PotanPulse 1.7s infinite; }
@keyframes PotanPulse { 50% { box-shadow: 0 0 0 10px rgba(52,211,153,0); } }
.PotanVersionBadge { padding: 6px 10px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; font-size: 11px; }
.PotanHeroStats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.PotanHeroStats > div { padding: 20px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: rgba(255,255,255,.055); }
.PotanHeroStats strong { display: block; margin-bottom: 4px; font-size: 25px; }
.PotanHeroStats span { color: rgba(255,255,255,.55); font-size: 12px; }
.PotanFlowList { display: grid; gap: 12px; margin-top: 18px; }
.PotanFlowList > div { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.04); }
.PotanFlowList b { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; background: linear-gradient(135deg, var(--potan-primary), var(--potan-secondary)); border-radius: 10px; }
.PotanFlowList span { color: rgba(255,255,255,.74); font-size: 13px; }
.PotanHeroGlow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(10px); pointer-events: none; }
.PotanHeroGlowOne { width: 330px; height: 330px; right: -100px; top: 110px; background: rgba(37,99,235,.19); }
.PotanHeroGlowTwo { width: 250px; height: 250px; left: 38%; bottom: -130px; background: rgba(6,182,212,.15); }

/* Sections */
.PotanSection { padding: 90px 0; background: #fff; }
.PotanSectionAlt { background: var(--potan-surface-soft); }
.PotanSectionTight { padding: 56px 0; }
.PotanSectionHeading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 32px; }
.PotanSectionHeadingCenter { display: block; max-width: 760px; margin-inline: auto; text-align: center; }
.PotanSectionHeading h1, .PotanSectionHeading h2 { margin: 8px 0 0; color: var(--potan-ink); font-size: clamp(30px, 4vw, 46px); line-height: 1.18; letter-spacing: -.025em; }
.PotanSectionHeading p { max-width: 690px; margin: 10px 0 0; color: var(--potan-muted); }
.PotanPageHero { padding: 76px 0; color: #fff; background: linear-gradient(140deg, #07111f 0%, #10233f 72%, #0d2542 100%); }
.PotanPageHeroSmall { padding: 48px 0; }
.PotanPageHero h1 { margin: 8px 0 10px; font-size: clamp(36px, 5vw, 56px); line-height: 1.13; }
.PotanPageHero p { max-width: 760px; margin: 0; color: rgba(255,255,255,.67); font-size: 17px; }
.PotanBreadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 16px; color: rgba(255,255,255,.62); font-size: 13px; }
.PotanBreadcrumb a:hover { color: #fff; }
.PotanBreadcrumb > * + *::before { content: "/"; margin-right: 7px; color: rgba(255,255,255,.3); }

/* Feature / content cards */
.PotanFeatureGrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.PotanFeatureGrid > article, .PotanContactCard, .PotanCustomerCard, .PotanSwitchCard, .PotanPanel, .PotanBuyBox, .PotanOrderSummary, .PotanPaymentReview, .PotanDeliveryPanel, .PotanTelegramCard {
  border: 1px solid var(--potan-border);
  border-radius: var(--potan-radius);
  background: #fff;
  box-shadow: var(--potan-shadow-sm);
}
.PotanFeatureGrid > article { position: relative; overflow: hidden; padding: 28px; transition: var(--potan-transition); }
.PotanFeatureGrid > article::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; opacity: 0; background: linear-gradient(90deg, var(--potan-primary), var(--potan-secondary)); transition: var(--potan-transition); }
.PotanFeatureGrid > article:hover { transform: translateY(-6px); box-shadow: var(--potan-shadow); }
.PotanFeatureGrid > article:hover::before { opacity: 1; }
.PotanTaskIcon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; color: var(--potan-primary); background: var(--potan-surface-blue); border-radius: 15px; }
.PotanFeatureGrid h3 { margin: 0 0 10px; color: var(--potan-ink); font-size: 19px; }
.PotanFeatureGrid p { margin: 0; color: var(--potan-muted); font-size: 14px; }
.PotanTaskWarning .PotanTaskIcon { color: var(--potan-warning); background: #fff7e6; }
.PotanTaskDanger .PotanTaskIcon { color: var(--potan-danger); background: #fff0f0; }
.PotanBannerStrip { padding: 12px 18px; color: #fff; background: linear-gradient(90deg, var(--potan-primary), var(--potan-secondary)); text-align: center; font-size: 14px; }
.PotanBannerStrip a { text-decoration: underline; font-weight: 600; }
.PotanCta { position: relative; overflow: hidden; padding: 48px; color: #fff; border-radius: 28px; background: linear-gradient(135deg, #0b1e38 0%, #173e72 65%, color-mix(in srgb, var(--potan-primary) 65%, #12233d)); box-shadow: var(--potan-shadow-lg); }
.PotanCta::after { content: ""; position: absolute; width: 330px; height: 330px; right: -100px; top: -150px; border-radius: 50%; background: rgba(6,182,212,.18); }
.PotanCta > * { position: relative; z-index: 2; }
.PotanCta h2 { margin: 0 0 10px; font-size: clamp(30px, 4vw, 44px); }
.PotanCta p { max-width: 700px; color: rgba(255,255,255,.7); }

/* Products */
.PotanProductGrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.PotanProductCard { overflow: hidden; border: 1px solid var(--potan-border); border-radius: 20px; background: #fff; box-shadow: var(--potan-shadow-sm); transition: var(--potan-transition); }
.PotanProductCard:hover { transform: translateY(-7px); border-color: color-mix(in srgb, var(--potan-primary) 28%, var(--potan-border)); box-shadow: var(--potan-shadow); }
.PotanProductImage { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: linear-gradient(145deg, #eaf2ff, #f3f9ff); }
.PotanProductImage img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.PotanProductCard:hover .PotanProductImage img { transform: scale(1.045); }
.PotanFloatingBadge { position: absolute; left: 14px; top: 14px; padding: 6px 10px; color: #fff; background: linear-gradient(135deg, var(--potan-accent), var(--potan-primary)); border-radius: 999px; font-size: 11px; font-weight: 600; box-shadow: 0 8px 20px rgba(0,0,0,.16); }
.PotanProductBody { padding: 22px; }
.PotanProductMeta { display: flex; justify-content: space-between; gap: 12px; color: var(--potan-muted); font-size: 12px; }
.PotanStockIn { color: var(--potan-success); font-weight: 600; }
.PotanStockOut { color: var(--potan-danger); font-weight: 600; }
.PotanProductBody h2 { margin: 11px 0 8px; color: var(--potan-ink); font-size: 20px; line-height: 1.35; }
.PotanProductBody h2 a:hover { color: var(--potan-primary); }
.PotanProductBody p { min-height: 48px; margin: 0; color: var(--potan-muted); font-size: 13px; line-height: 1.75; }
.PotanProductBottom { display: flex; align-items: end; justify-content: space-between; gap: 15px; padding-top: 20px; }
.PotanPriceGroup { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }
.PotanPriceGroup strong, .PotanDetailPrice { color: var(--potan-primary); font-size: 25px; line-height: 1; }
.PotanPriceGroup del { color: #9aa5b5; font-size: 13px; }
.PotanCatalogToolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 25px; }
.PotanSearchField { position: relative; flex: 1; max-width: 540px; }
.PotanSearchField svg { position: absolute; left: 15px; top: 50%; width: 19px; color: var(--potan-muted); transform: translateY(-50%); }
.PotanSearchField .PotanInput { padding-left: 46px; }
.PotanCatalogResult { color: var(--potan-muted); white-space: nowrap; }
.PotanPagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 38px; }
.PotanPagination a { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; color: var(--potan-muted); border: 1px solid var(--potan-border); border-radius: 10px; background: #fff; }
.PotanPagination a:hover, .PotanPagination a.active { color: #fff; border-color: var(--potan-primary); background: var(--potan-primary); }

/* Product detail */
.PotanProductDetail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); gap: 55px; align-items: start; }
.PotanProductDetailImage { overflow: hidden; border: 1px solid var(--potan-border); border-radius: 24px; background: #eef4ff; box-shadow: var(--potan-shadow); }
.PotanProductDetailImage img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.PotanProductDetailInfo h1 { margin: 12px 0 16px; color: #ffffff; font-size: clamp(34px, 4vw, 52px); line-height: 1.18; }
.PotanProductDescription { color: var(--potan-muted); font-size: 17px; line-height: 1.85; }
.PotanDetailFacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0; }
.PotanDetailFacts > div { padding: 15px; border: 1px solid var(--potan-border); border-radius: 14px; background: var(--potan-surface-soft); }
.PotanDetailFacts small { display: block; color: var(--potan-muted); font-size: 11px; }
.PotanDetailFacts strong { display: block; margin-top: 3px; color: var(--potan-ink); }
.PotanBuyBox { padding: 24px; }
.PotanBuyBox .PotanDetailPrice { display: block; margin-bottom: 18px; font-size: 34px; }
.PotanProductDetailSection { padding-top: 45px; }
.PotanRichText { color: var(--potan-text); line-height: 1.9; overflow-wrap: anywhere; }
.PotanRichText h2, .PotanRichText h3 { color: var(--potan-ink); line-height: 1.35; }
.PotanRichText img { height: auto; border-radius: 16px; }
.PotanDetailList { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.PotanDetailList li { display: flex; gap: 10px; color: var(--potan-muted); }
.PotanDetailList li::before { content: "✓"; color: var(--potan-success); font-weight: 700; }

/* Forms */
.PotanForm { display: grid; gap: 18px; }
.PotanFormGrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.PotanFieldFull { grid-column: 1 / -1; }
.PotanForm label, .PotanSettingsForm label { display: grid; gap: 8px; color: var(--potan-text); font-size: 13px; font-weight: 600; }
.PotanInput, .PotanSelect, .PotanTextarea, .PotanCodeTextarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  color: var(--potan-text);
  border: 1px solid #d6deea;
  border-radius: 11px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(15,35,67,.03);
  outline: 0;
  transition: border-color var(--potan-transition), box-shadow var(--potan-transition), background var(--potan-transition);
}
.PotanInput:hover, .PotanSelect:hover, .PotanTextarea:hover, .PotanCodeTextarea:hover { border-color: #bdc8d9; }
.PotanInput:focus, .PotanSelect:focus, .PotanTextarea:focus, .PotanCodeTextarea:focus { border-color: var(--potan-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--potan-primary) 11%, transparent); }
.PotanTextarea { min-height: 130px; resize: vertical; }
.PotanCodeTextarea { min-height: 240px; color: #d9e8ff; background: #0b1424; border-color: #1e304b; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.65; }
.PotanFormHint { color: var(--potan-muted); font-size: 12px; font-weight: 400; }
.PotanFormActions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 4px; }
.PotanFormDivider { display: flex; align-items: center; gap: 12px; color: var(--potan-muted); font-size: 12px; }
.PotanFormDivider::before, .PotanFormDivider::after { content: ""; flex: 1; height: 1px; background: var(--potan-border); }
.PotanCheckboxField { display: flex !important; grid-template-columns: auto 1fr; align-items: start; gap: 10px !important; font-weight: 400 !important; }
.PotanCheckboxField input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--potan-primary); }
.PotanFileInput { padding: 18px; border: 1px dashed #b9c6d8; border-radius: 13px; background: var(--potan-surface-soft); }
.PotanSettingsForm { display: grid; gap: 18px; }
.PotanColorGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.PotanInlineForm { align-items: center; gap: 8px; }
.PotanRejectForm { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }

/* Auth */
.PotanAuthSection { min-height: calc(100vh - var(--potan-header)); display: grid; place-items: center; padding: 55px 0; background: radial-gradient(circle at 10% 15%, rgba(37,99,235,.13), transparent 31%), radial-gradient(circle at 90% 70%, rgba(6,182,212,.12), transparent 29%), #f3f7fc; }
.PotanAuthGrid { display: grid; grid-template-columns: minmax(0,.92fr) minmax(420px,.75fr); gap: 70px; align-items: center; }
.PotanAuthIntro { position: relative; }
.PotanAuthIntro h1 { max-width: 650px; margin: 18px 0; color: var(--potan-ink); font-size: clamp(38px,5vw,62px); line-height: 1.08; letter-spacing: -.035em; }
.PotanAuthIntro > p { max-width: 600px; color: var(--potan-muted); font-size: 17px; }
.PotanAuthBenefits { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }
.PotanAuthBenefits > span { display: inline-flex; align-items: center; gap: 12px; color: #000; }
.PotanAuthBenefits svg { color: var(--potan-success); }
.PotanAuthDecor { position: absolute; right: 4%; top: -40px; width: 190px; height: 190px; z-index: -1; border-radius: 50%; background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(6,182,212,.12)); filter: blur(4px); }
.PotanAuthCard { padding: 34px; border: 1px solid rgba(212,222,235,.9); border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: var(--potan-shadow); backdrop-filter: blur(16px); }
.PotanAuthCard h2 { margin: 0 0 4px; color: var(--potan-ink); font-size: 28px; }
.PotanAuthCard > p { margin: 0 0 24px; color: var(--potan-muted); }
.PotanAuthSwitch { margin: 20px 0 0; color: var(--potan-muted); text-align: center; font-size: 13px; }
.PotanAuthSwitch a { color: var(--potan-primary); font-weight: 600; }
.PotanAuthLegal { margin-top: 18px; color: var(--potan-muted); font-size: 11px; text-align: center; }
.PotanAuthLogo { color: var(--potan-ink); margin-bottom: 26px; }
.PotanAuthLogo small { color: var(--potan-muted); }

/* Account */
.PotanAccountLayout { display: grid; grid-template-columns: 255px minmax(0,1fr); gap: 30px; align-items: start; }
.PotanAccountNav { position: sticky; top: calc(var(--potan-header) + 20px); display: grid; gap: 6px; padding: 18px; border: 1px solid var(--potan-border); border-radius: var(--potan-radius); background: #fff; box-shadow: var(--potan-shadow-sm); }
.PotanAccountHeader { display: flex; align-items: center; gap: 13px; padding: 10px 7px 17px; margin-bottom: 8px; border-bottom: 1px solid var(--potan-border); }
.PotanAccountNav > a { padding: 10px 12px; color: var(--potan-muted); border-radius: 10px; font-size: 14px; }
.PotanAccountNav > a:hover, .PotanAccountNav > a.active { color: var(--potan-primary); background: var(--potan-surface-blue); }
.PotanAccountContent { min-width: 0; }
.PotanAvatar, .PotanAvatarLarge { display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: linear-gradient(135deg, var(--potan-primary), var(--potan-secondary)); border-radius: 50%; font-weight: 700; }
.PotanAvatar { width: 38px; height: 38px; }
.PotanAvatarLarge { width: 54px; height: 54px; font-size: 21px; }

/* Status / notices */
.PotanStatus { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 9px; border: 1px solid #d6dfe9; border-radius: 999px; color: #64748b; background: #f8fafc; font-size: 11px; font-weight: 600; white-space: nowrap; }
.PotanStatus-success, .PotanStatus-paid, .PotanStatus-delivered, .PotanStatus-active, .PotanStatus-done, .PotanStatus-ok { color: #047857; border-color: #a7f3d0; background: #ecfdf5; }
.PotanStatus-warning, .PotanStatus-waiting, .PotanStatus-pending, .PotanStatus-reserved { color: #a16207; border-color: #fde68a; background: #fffbeb; }
.PotanStatus-danger, .PotanStatus-rejected, .PotanStatus-cancelled, .PotanStatus-expired, .PotanStatus-blocked, .PotanStatus-fail { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.PotanNotice { display: flex; align-items: start; gap: 11px; padding: 14px 16px; color: #1d4ed8; border: 1px solid #bfdbfe; border-radius: 13px; background: #eff6ff; }
.PotanNoticeWarning { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.PotanNoticeDanger { color: #991b1b; border-color: #fecaca; background: #fef2f2; }
.PotanNoticeInfo { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
.PotanNotice p { margin: 0; }
.PotanBadgeAlert { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; color: #fff; background: var(--potan-danger); border-radius: 999px; font-size: 10px; }
.PotanComplianceNote { padding: 18px 20px; border-left: 4px solid var(--potan-warning); border-radius: 0 13px 13px 0; color: #704810; background: #fff9e9; }
.PotanDangerPanel { padding: 22px; color: #7f1d1d; border: 1px solid #fecaca; border-radius: 16px; background: #fff5f5; }
.PotanDangerPanel h3 { margin-top: 0; }

/* Toast */
.PotanToast { position: fixed; z-index: 1100; right: 20px; top: 96px; display: grid; grid-template-columns: auto minmax(180px,1fr) auto; align-items: center; gap: 11px; width: min(420px, calc(100% - 40px)); padding: 14px 15px; border: 1px solid var(--potan-border); border-radius: 15px; background: #fff; box-shadow: var(--potan-shadow); animation: PotanToastIn .35s ease both; }
.PotanToast p { margin: 0; }
.PotanToast > button { width: 30px; height: 30px; padding: 0; color: var(--potan-muted); border: 0; border-radius: 8px; background: transparent; font-size: 21px; }
.PotanToast-success > span { color: var(--potan-success); }
.PotanToast-danger > span { color: var(--potan-danger); }
.PotanToast-info > span { color: var(--potan-info); }
.PotanToast.is-hiding { opacity: 0; transform: translateY(-10px); transition: .25s ease; }
@keyframes PotanToastIn { from { opacity: 0; transform: translateY(-14px); } }

/* Panels, metrics, tables */
.PotanPanel { min-width: 0; padding: 23px; }
.PotanPanelHeader { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; }
.PotanPanelHeader h2, .PotanPanelHeader h3 { margin: 0; color: var(--potan-ink); font-size: 19px; }
.PotanMetricGrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.PotanMetricGridFour { grid-template-columns: repeat(4, minmax(0,1fr)); }
.PotanMetricGrid > article { padding: 22px; border: 1px solid var(--potan-border); border-radius: 17px; background: #fff; box-shadow: var(--potan-shadow-sm); }
.PotanMetricGrid article small { display: block; color: var(--potan-muted); font-size: 12px; }
.PotanMetricGrid article strong { display: block; margin-top: 7px; color: var(--potan-ink); font-size: clamp(25px,3vw,35px); line-height: 1.1; }
.PotanMetricGrid article p { margin: 8px 0 0; color: var(--potan-muted); font-size: 12px; }
.PotanMetricAlert { border-color: #fed7aa !important; background: #fffaf2 !important; }
.PotanTableWrap { width: 100%; overflow-x: auto; border: 1px solid var(--potan-border); border-radius: 15px; background: #fff; }
.PotanTable { width: 100%; border-collapse: collapse; min-width: 760px; }
.PotanTable th { padding: 12px 15px; color: #66758c; background: #f5f8fc; border-bottom: 1px solid var(--potan-border); font-size: 11px; font-weight: 700; text-align: left; letter-spacing: .025em; text-transform: uppercase; white-space: nowrap; }
.PotanTable td { padding: 14px 15px; border-bottom: 1px solid #edf1f6; vertical-align: middle; font-size: 13px; }
.PotanTable tbody tr:last-child td { border-bottom: 0; }
.PotanTable tbody tr:hover td { background: #fbfdff; }
.PotanRowHighlight td { background: #fffaf0 !important; }
.PotanTableAction { display: flex; flex-wrap: wrap; gap: 7px; }
.PotanProductCell, .PotanUserCell { display: flex; align-items: center; gap: 11px; min-width: 200px; }
.PotanProductCell img { width: 50px; height: 38px; object-fit: cover; border-radius: 8px; background: #eef3fb; }
.PotanProductCell span, .PotanUserCell span { display: grid; }
.PotanProductCell small, .PotanUserCell small { color: var(--potan-muted); }
.PotanSimpleChart { display: flex; align-items: end; gap: 10px; min-height: 230px; padding-top: 24px; }
.PotanChartBars { display: flex; flex: 1; align-items: end; justify-content: center; gap: 6px; height: 190px; }
.PotanChartBars span { width: min(28px,100%); min-height: 4px; border-radius: 7px 7px 2px 2px; background: linear-gradient(to top, var(--potan-primary), var(--potan-secondary)); }
.PotanChartBars small { writing-mode: vertical-rl; color: var(--potan-muted); font-size: 9px; }
.PotanAdminGrid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(320px,.72fr); gap: 20px; }
.PotanAdminGridTwo { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.PotanAdminGridForm { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(320px,.75fr); gap: 20px; align-items: start; }
.PotanAdminGridOrder { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(330px,.7fr); gap: 20px; align-items: start; }
.PotanAdminPageHeader { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.PotanAdminPageHeader h1 { margin: 0; color: var(--potan-ink); font-size: 27px; }
.PotanAdminPageHeader p { margin: 5px 0 0; color: var(--potan-muted); }
.PotanSettingsBar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border: 1px solid var(--potan-border); border-radius: 13px; background: #fff; }
.PotanStickyPanel { position: sticky; top: 92px; }

/* Admin shell */
.PotanAdminShell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0,1fr); }
.PotanSidebar { position: sticky; z-index: 210; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 24px 17px; color: #fff; background: linear-gradient(180deg, #081321, #0a1729 55%, #07111f); border-right: 1px solid rgba(255,255,255,.06); overflow-y: auto; }
.PotanSidebarBrand { padding: 0 7px 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.PotanSidebarNav { display: grid; gap: 5px; padding-top: 22px; }
.PotanSidebarNav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; color: rgba(255,255,255,.63); border-radius: 11px; font-size: 13px; font-weight: 500; transition: var(--potan-transition); }
.PotanSidebarNav a:hover, .PotanSidebarNav a.active { color: #fff; background: linear-gradient(90deg, rgba(37,99,235,.28), rgba(6,182,212,.08)); }
.PotanSidebarNav a.active { box-shadow: inset 3px 0 0 var(--potan-secondary); }
.PotanSidebarBottom { display: grid; gap: 9px; margin-top: auto; padding: 20px 10px 0; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.62); font-size: 12px; }
.PotanSidebarBottom a:hover, .PotanSidebarBottom button:hover { color: #fff; }
.PotanAdminWorkspace { min-width: 0; }
.PotanAdminTopbar { position: sticky; z-index: 190; top: 0; height: 72px; display: flex; align-items: center; gap: 16px; padding: 0 26px; border-bottom: 1px solid #dce4ee; background: rgba(255,255,255,.9); backdrop-filter: blur(18px); }
.PotanSidebarToggle { display: none; box-shadow: none; border: 1px solid var(--potan-border); }
.PotanAdminTopbarTitle { display: grid; line-height: 1.2; }
.PotanAdminTopbarTitle strong { color: var(--potan-ink); }
.PotanAdminTopbarTitle small { margin-top: 4px; color: var(--potan-muted); font-size: 10px; }
.PotanAdminUser { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.PotanAdminUser > span:last-child { display: grid; line-height: 1.2; }
.PotanAdminUser strong { font-size: 13px; }
.PotanAdminUser small { color: var(--potan-muted); font-size: 10px; }
.PotanAdminMain { padding: 26px; }

/* Orders / payments */
.PotanOrderLayout, .PotanPaymentLayout, .PotanTwoColumn, .PotanSupportColumns { display: grid; grid-template-columns: minmax(0,1fr) minmax(330px,.55fr); gap: 28px; align-items: start; }
.PotanOrderSummary, .PotanPaymentReview, .PotanDeliveryPanel { padding: 24px; }
.PotanOrderSummary h2, .PotanPaymentReview h2, .PotanDeliveryPanel h2 { margin-top: 0; color: var(--potan-ink); }
.PotanTimeline { display: grid; gap: 0; margin: 20px 0; }
.PotanTimeline > div { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 13px; min-height: 58px; }
.PotanTimeline > div::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--potan-border); }
.PotanTimeline > div:last-child::before { display: none; }
.PotanTimeline i { position: relative; z-index: 1; width: 21px; height: 21px; border: 4px solid #dbe4ef; border-radius: 50%; background: #fff; }
.PotanTimeline .done i { border-color: var(--potan-success); background: var(--potan-success); }
.PotanTimeline .active i { border-color: var(--potan-primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--potan-primary) 12%, transparent); }
.PotanPaymentMethods { display: grid; gap: 13px; }
.PotanPaymentMethod { position: relative; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--potan-border); border-radius: 15px; background: #fff; cursor: pointer; transition: var(--potan-transition); }
.PotanPaymentMethod:hover, .PotanPaymentMethod:has(input:checked) { border-color: var(--potan-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--potan-primary) 8%, transparent); }
.PotanPaymentMethod input { width: 19px; height: 19px; accent-color: var(--potan-primary); }
.PotanPaymentIcon { display: grid; place-items: center; width: 52px; height: 52px; color: #fff; border-radius: 16px; font-weight: 800; }
.PotanPaymentIconK { background: linear-gradient(135deg, #13a34a, #047c3b); }
.PotanPaymentIconT { background: linear-gradient(135deg, #f59e0b, #f97316); }
.PotanProofNote { padding: 15px; color: #7c4c00; border: 1px solid #fbd38d; border-radius: 13px; background: #fffbeb; }
.PotanProofPreview { overflow: hidden; border: 1px solid var(--potan-border); border-radius: 14px; background: #f1f5f9; }
.PotanProofPreview img { width: 100%; max-height: 500px; object-fit: contain; }
.PotanProofList, .PotanAdminProofs { display: grid; gap: 14px; }
.PotanAdminProof { padding: 17px; border: 1px solid var(--potan-border); border-radius: 15px; background: #fff; }
.PotanDeliveryItem { position: relative; padding: 18px; color: #dceafe; border: 1px solid #243a59; border-radius: 15px; background: #0b1728; }
.PotanDeliveryItem pre { max-height: 330px; margin: 12px 0 0; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.PotanSecretReveal { display: grid; gap: 10px; }
.PotanCountdown { font-variant-numeric: tabular-nums; color: var(--potan-danger); font-weight: 700; }

/* Support and content */
.PotanTicketList, .PotanMessages, .PotanInventoryList, .PotanCouponList, .PotanContentItems, .PotanHealthList, .PotanAttemptList, .PotanCleanupReport { display: grid; gap: 10px; }
.PotanTicketList > a, .PotanInventoryList > div, .PotanCouponList > div, .PotanContentItems > div, .PotanHealthList > div, .PotanAttemptList > div, .PotanCleanupReport > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 15px; border: 1px solid var(--potan-border); border-radius: 12px; background: #fff; }
.PotanTicketList > a:hover { border-color: var(--potan-primary); background: #f8fbff; }
.PotanTicketThread { display: grid; gap: 14px; }
.PotanMessages > article { max-width: 82%; padding: 15px 17px; border: 1px solid var(--potan-border); border-radius: 15px 15px 15px 4px; background: #fff; }
.PotanMessages > article.customer { justify-self: end; color: #fff; border-color: var(--potan-primary); border-radius: 15px 15px 4px 15px; background: linear-gradient(135deg, var(--potan-primary), color-mix(in srgb, var(--potan-primary) 78%, var(--potan-secondary))); }
.PotanMessages p { margin: 0; }
.PotanMessages small { display: block; margin-top: 7px; opacity: .65; }
.PotanReplyForm { margin-top: 18px; }
.PotanTicketAdminActions { display: flex; flex-wrap: wrap; gap: 8px; }
.PotanAccordion { display: grid; gap: 11px; }
.PotanAccordion details { border: 1px solid var(--potan-border); border-radius: 14px; background: #fff; box-shadow: var(--potan-shadow-sm); }
.PotanAccordion summary { padding: 17px 20px; color: var(--potan-ink); font-weight: 600; cursor: pointer; }
.PotanAccordion details > div { padding: 0 20px 19px; color: var(--potan-muted); }
.PotanFaqLayout { display: grid; grid-template-columns: minmax(0,.45fr) minmax(0,1fr); gap: 45px; align-items: start; }
.PotanFaqPage { position: sticky; top: calc(var(--potan-header) + 25px); }
.PotanContactGrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.PotanContactCard { padding: 25px; }
.PotanContactPrimary { color: #fff; border-color: transparent; background: linear-gradient(145deg, #0a1a2f, #123564); }
.PotanContactCard h2 { margin-top: 0; }
.PotanTelegramCard { display: flex; align-items: center; gap: 17px; padding: 22px; }
.PotanLegalDocument { max-width: 860px; margin-inline: auto; padding: 40px; border: 1px solid var(--potan-border); border-radius: 22px; background: #fff; box-shadow: var(--potan-shadow-sm); }
.PotanLegalDocument h1 { color: var(--potan-ink); font-size: 38px; }
.PotanLegalDocument h2 { margin-top: 35px; color: var(--potan-ink); }

/* SEO */
.PotanSeoTools { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.72fr); gap: 20px; }
.PotanSeoPreview { overflow: hidden; padding: 22px; border: 1px solid var(--potan-border); border-radius: 16px; background: #fff; }
.PotanSeoPreview small { color: #188038; }
.PotanSeoPreview h3 { margin: 7px 0 4px; color: #1a0dab; font-size: 19px; font-weight: 500; }
.PotanSeoPreview p { margin: 0; color: #4d5156; font-family: Arial, sans-serif; font-size: 13px; line-height: 1.55; }
.PotanSeoChecklist { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.PotanSeoChecklist li { display: flex; align-items: center; gap: 9px; color: var(--potan-muted); }
.PotanSeoChecklist li::before { content: "✓"; display: grid; place-items: center; width: 21px; height: 21px; color: #047857; background: #d1fae5; border-radius: 50%; font-size: 11px; font-weight: 700; }

/* Security */
.PotanSecurityAction { padding: 20px; border: 1px solid var(--potan-border); border-radius: 15px; background: #fff; }
.PotanSecurityAction h3 { margin: 0 0 8px; }
.PotanSwitchGrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.PotanSwitchCard { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; }
.PotanSwitchCard > span { display: grid; }
.PotanSwitchCard small { color: var(--potan-muted); }
.PotanSwitchCard input { width: 44px; height: 23px; accent-color: var(--potan-primary); }
.PotanHealthList > div.pass { border-color: #a7f3d0; background: #f0fdf4; }
.PotanHealthList > div.fail { border-color: #fecaca; background: #fef2f2; }
.PotanCleanupReport > div.ok { color: #047857; }
.PotanCleanupReport > div.bad { color: #b91c1c; }

/* Modal */
.PotanModal { position: fixed; z-index: 1500; inset: 0; display: grid; place-items: center; padding: 20px; }
.PotanModal[hidden] { display: none !important; }
.PotanModalBackdrop { position: absolute; inset: 0; background: rgba(3,10,22,.72); backdrop-filter: blur(7px); }
.PotanModalCard { position: relative; z-index: 1; width: min(520px,100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 34px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: #fff; box-shadow: var(--potan-shadow-lg); animation: PotanModalIn .3s ease both; }
.PotanModalCard h2 { margin: 10px 0 12px; color: var(--potan-ink); font-size: 28px; }
.PotanModalClose { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: var(--potan-muted); border: 0; border-radius: 10px; background: #f1f5f9; font-size: 23px; }
@keyframes PotanModalIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }

/* Footer */
.PotanFooter { color: rgba(255,255,255,.65); background: #07111f; }
.PotanFooterGrid { display: grid; grid-template-columns: 1.55fr repeat(3,1fr); gap: 45px; padding-block: 62px 45px; }
.PotanBrandFooter { color: #fff; margin-bottom: 17px; }
.PotanFooterGrid > div > p { max-width: 400px; font-size: 13px; }
.PotanFooter h2 { margin: 0 0 15px; color: #fff; font-size: 14px; }
.PotanFooterGrid > div:not(:first-child) { display: grid; align-content: start; gap: 9px; }
.PotanFooterGrid a:not(.PotanBrand) { font-size: 13px; }
.PotanFooterGrid a:not(.PotanBrand):hover { color: #fff; }
.PotanTelegramLink { display: inline-flex; align-items: center; gap: 8px; color: #75e4f5 !important; font-weight: 600; }
.PotanFooterNote { color: rgba(255,255,255,.42); }
.PotanFooterBottom { display: flex; justify-content: space-between; gap: 20px; padding-block: 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; }

/* Empty, misc */
.PotanEmptyState, .PotanNotFound, .PotanMaintenance { display: grid; place-items: center; min-height: 360px; padding: 42px; text-align: center; border: 1px dashed #c5cfdd; border-radius: 20px; background: #fff; }
.PotanEmptyStateSmall { min-height: 180px; padding: 25px; }
.PotanEmptyState h2, .PotanNotFound h1, .PotanMaintenance h1 { margin: 0 0 10px; color: var(--potan-ink); }
.PotanEmptyState p, .PotanNotFound p, .PotanMaintenance p { max-width: 570px; margin: 0 0 20px; color: var(--potan-muted); }
.PotanImageTrust { display: flex; align-items: center; gap: 12px; color: var(--potan-muted); font-size: 12px; }
.PotanImageTrust img { width: 46px; height: 46px; object-fit: cover; border-radius: 12px; }

/* Installer & recovery standalone compatibility */
.PotanInstallerBody, .PotanRecoveryBody { min-height: 100vh; padding: 42px 18px; color: var(--potan-text); background: radial-gradient(circle at 12% 12%, rgba(37,99,235,.17), transparent 28%), radial-gradient(circle at 88% 82%, rgba(6,182,212,.13), transparent 26%), #edf3fa; }
.PotanInstallerShell, .PotanRecoveryShell { width: min(980px,100%); margin-inline: auto; }
.PotanInstallerHeader, .PotanRecoveryHeader { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.PotanInstallerHeader h1, .PotanRecoveryHeader h1 { margin: 0; color: var(--potan-ink); font-size: clamp(29px,5vw,46px); }
.PotanInstallerCard, .PotanRecoveryCard { padding: 28px; border: 1px solid var(--potan-border); border-radius: 23px; background: rgba(255,255,255,.96); box-shadow: var(--potan-shadow); }
.PotanInstallerSteps { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 22px; }
.PotanInstallerSteps span { padding: 10px 12px; color: var(--potan-muted); border: 1px solid var(--potan-border); border-radius: 11px; background: #fff; text-align: center; font-size: 12px; }
.PotanInstallerSteps span.active { color: #fff; border-color: var(--potan-primary); background: var(--potan-primary); }
.PotanInstallerCheck { display: grid; grid-template-columns: 1fr auto; gap: 15px; padding: 12px 14px; border-bottom: 1px solid #edf1f5; }
.PotanInstallerCheck:last-child { border-bottom: 0; }
.PotanInstallerCheck.pass b { color: var(--potan-success); }
.PotanInstallerCheck.fail b { color: var(--potan-danger); }
.PotanEmergencyCode { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px; color: #dbeafe; border: 1px solid #294466; border-radius: 14px; background: #081528; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }

/* Responsive */
@media (max-width: 1120px) {
  .PotanFeatureGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .PotanProductGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .PotanHeroGrid { gap: 36px; }
  .PotanAdminShell { grid-template-columns: 230px minmax(0,1fr); }
  .PotanMetricGridFour { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .PotanFooterGrid { grid-template-columns: 1.4fr repeat(2,1fr); }
  .PotanFooterGrid > div:last-child { grid-column: 2 / -1; }
}

@media (max-width: 900px) {
  :root { --potan-header: 68px; }
  .PotanNavToggle { display: inline-grid; }
  .PotanNav { position: fixed; z-index: 300; left: 18px; right: 18px; top: 76px; display: none; max-height: calc(100vh - 95px); overflow-y: auto; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: #0a1729; box-shadow: 0 28px 70px rgba(0,0,0,.4); }
  .PotanNav.is-open { display: grid; }
  .PotanNav > a:not(.PotanButton), .PotanNav .PotanButton, .PotanNav .PotanInlineForm, .PotanNav .PotanInlineForm .PotanButton { width: 100%; margin: 0; }
  .PotanHeroGrid, .PotanProductDetail, .PotanAuthGrid, .PotanFaqLayout, .PotanSeoTools { grid-template-columns: 1fr; }
  .PotanHeroGrid { padding-block: 68px; }
  .PotanHeroPanel { max-width: 620px; width: 100%; }
  .PotanAuthIntro { text-align: center; }
  .PotanAuthBenefits { max-width: 440px; margin-inline: auto; text-align: left; }
  .PotanAuthCard { max-width: 620px; width: 100%; margin-inline: auto; }
  .PotanFaqPage { position: static; }
  .PotanAccountLayout { grid-template-columns: 1fr; }
  .PotanAccountNav { position: static; grid-template-columns: repeat(3,1fr); }
  .PotanAccountHeader { grid-column: 1 / -1; }
  .PotanAdminShell { display: block; }
  .PotanSidebar { position: fixed; left: 0; top: 0; width: 270px; transform: translateX(-102%); box-shadow: 30px 0 70px rgba(0,0,0,.35); transition: transform .28s ease; }
  .PotanSidebar.is-open { transform: translateX(0); }
  .PotanSidebarToggle { display: inline-grid; }
  .PotanAdminGrid, .PotanAdminGridTwo, .PotanAdminGridForm, .PotanAdminGridOrder, .PotanOrderLayout, .PotanPaymentLayout, .PotanTwoColumn, .PotanSupportColumns { grid-template-columns: 1fr; }
  .PotanStickyPanel { position: static; }
  .PotanFooterGrid { grid-template-columns: repeat(2,1fr); }
  .PotanFooterGrid > div:first-child { grid-column: 1 / -1; }
  .PotanFooterGrid > div:last-child { grid-column: auto; }
}

@media (max-width: 640px) {
  .PotanContainer { width: min(calc(100% - 28px), var(--potan-container)); }
  .PotanHeader .PotanBrand small { display: none; }
  .PotanLogoMark { width: 38px; height: 38px; border-radius: 12px; }
  .PotanHero { min-height: auto; }
  .PotanHeroGrid { min-height: auto; padding-block: 55px; }
  .PotanHero h1 { font-size: 42px; }
  .PotanHeroActions { display: grid; }
  .PotanHeroActions .PotanButton { width: 100%; }
  .PotanHeroStats { grid-template-columns: 1fr; }
  .PotanSection { padding: 65px 0; }
  .PotanSectionTight { padding: 42px 0; }
  .PotanSectionHeading { display: block; }
  .PotanSectionHeading .PotanButton { margin-top: 17px; }
  .PotanFeatureGrid, .PotanProductGrid, .PotanContactGrid, .PotanMetricGrid, .PotanMetricGridFour, .PotanSwitchGrid, .PotanColorGrid, .PotanFormGrid { grid-template-columns: 1fr; }
  .PotanDetailFacts { grid-template-columns: 1fr; }
  .PotanCatalogToolbar, .PotanAdminPageHeader, .PotanSettingsBar, .PotanPanelHeader { align-items: stretch; flex-direction: column; }
  .PotanSearchField { max-width: none; }
  .PotanCatalogResult { white-space: normal; }
  .PotanAccountNav { grid-template-columns: 1fr 1fr; }
  .PotanAdminTopbar { padding-inline: 14px; }
  .PotanAdminUser > span:last-child { display: none; }
  .PotanAdminMain { padding: 18px 14px; }
  .PotanPanel { padding: 18px; }
  .PotanCta { padding: 30px 24px; }
  .PotanLegalDocument { padding: 25px 20px; }
  .PotanFooterGrid { grid-template-columns: 1fr; gap: 28px; }
  .PotanFooterGrid > div:first-child, .PotanFooterGrid > div:last-child { grid-column: auto; }
  .PotanFooterBottom { flex-direction: column; }
  .PotanMessages > article { max-width: 94%; }
  .PotanPaymentMethod { grid-template-columns: 48px 1fr auto; padding: 13px; }
  .PotanAuthCard { padding: 25px 20px; }
  .PotanModalCard { padding: 28px 22px; }
  .PotanToast { right: 14px; top: 80px; width: calc(100% - 28px); }
  .PotanInstallerBody, .PotanRecoveryBody { padding: 24px 12px; }
  .PotanInstallerCard, .PotanRecoveryCard { padding: 20px; }
  .PotanInstallerSteps { grid-template-columns: repeat(2,1fr); }
  .PotanEmergencyCode { align-items: stretch; flex-direction: column; }
}

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

@media print {
  .PotanHeader, .PotanFooter, .PotanSidebar, .PotanAdminTopbar, .PotanButton, .PotanToast { display: none !important; }
  body, .PotanPublicBody, .PotanAdminBody { background: #fff !important; color: #000 !important; }
  .PotanAdminMain { padding: 0; }
  .PotanPanel, .PotanOrderSummary, .PotanDeliveryPanel { box-shadow: none; border-color: #bbb; }
}

/* Supplemental layout utilities */
.PotanHeaderActions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.PotanBannerGrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
.PotanTaskList { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.PotanTaskList li { display: flex; align-items: start; gap: 11px; padding: 12px 14px; border: 1px solid var(--potan-border); border-radius: 12px; background: #fff; }
@media (max-width: 640px) { .PotanBannerGrid { grid-template-columns: 1fr; } .PotanHeaderActions { justify-content: stretch; } .PotanHeaderActions .PotanButton { width: 100%; } }


/* legacy compatibility rules retained for earlier v2.x */
.PotanStockUnlockPanel { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr); align-items:center; gap:28px; border-color:color-mix(in srgb,var(--potan-primary) 28%,var(--potan-border)); background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--potan-primary) 5%,#fff)); }
.PotanStockUnlockPanel > div { display:flex; align-items:flex-start; gap:18px; }
.PotanStockUnlockPanel .PotanLogoMark { width:54px; height:54px; }
.PotanStockUnlockPanel h2 { margin:7px 0 6px; }
.PotanStockUnlockPanel p { margin:0; color:var(--potan-muted); }
.PotanUnlockForm { grid-template-columns:1fr auto; align-items:end; }
.PotanUnlockTimer { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:9px 14px; color:#065f46; background:#ecfdf5; border:1px solid #a7f3d0; border-radius:12px; font-size:14px; }
.PotanUnlockTimer .PotanIcon { width:18px; height:18px; }
.PotanStockPayload { display:grid; grid-template-columns:minmax(240px,1fr) 40px; align-items:start; gap:8px; min-width:360px; }
.PotanStockPayload pre { margin:0; max-width:660px; padding:12px 14px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; color:#e6f4ff; background:#071322; border:1px solid #203552; border-radius:10px; font:500 13px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; user-select:text; }
.PotanStockPayload .PotanIconButton { width:38px; height:38px; box-shadow:none; border:1px solid var(--potan-border); }
.PotanMaskedStock { display:inline-block; min-width:180px; padding:9px 12px; color:#8291a5; letter-spacing:.18em; background:#f1f5f9; border-radius:9px; }
.PotanStockTable td { vertical-align:top; }
@media (max-width: 900px) { .PotanStockUnlockPanel { grid-template-columns:1fr; } .PotanUnlockForm { grid-template-columns:1fr; } .PotanStockPayload { min-width:300px; } }

/* =========================================================
   PotanSaitao v2.x — Manual Fulfillment compatibility
   ========================================================= */
body.PotanPublicBody {
  color: #f6f3f1;
  background: #09090b;
}
.PotanPublicBody .PotanHeader {
  background: rgba(8, 8, 10, .94);
  border-bottom: 1px solid rgba(239, 48, 68, .3);
  box-shadow: 0 10px 40px rgba(0,0,0,.42);
}
.PotanPublicBody .PotanLogoMark {
  color: #fff;
  background: linear-gradient(135deg, #8f0f1d, var(--potan-primary) 58%, #ff5364);
  box-shadow: 0 12px 36px color-mix(in srgb, var(--potan-primary) 34%, transparent);
}
.PotanPublicBody .PotanButton {
  --button-bg: linear-gradient(135deg, #9f1020, var(--potan-primary) 58%, #ff4054);
  box-shadow: 0 14px 34px rgba(214, 25, 48, .24);
}
.PotanPublicBody .PotanButtonGhost { color: #fff; border-color: rgba(255,255,255,.16); }
.PotanPublicBody .PotanButtonGhost:hover { background: rgba(255,255,255,.07); }
.PotanPublicBody .PotanSection { color: #f4f1ef; background: #0b0b0e; }
.PotanPublicBody .PotanSectionAlt { background: #111114; }
.PotanPublicBody .PotanSectionHeading h1,
.PotanPublicBody .PotanSectionHeading h2,
.PotanPublicBody .PotanPanel h1,
.PotanPublicBody .PotanPanel h2,
.PotanPublicBody .PotanPanel h3 { color: #fff; }
.PotanPublicBody .PotanPanel,
.PotanPublicBody .PotanLegalDocument,
.PotanPublicBody .PotanAuthCard,
.PotanPublicBody .PotanContactCard {
  color: #f5f2f0;
  background: linear-gradient(145deg, #18181c, #111114);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 22px 70px rgba(0,0,0,.28);
}
.PotanPublicBody .PotanInput,
.PotanPublicBody .PotanTextarea,
.PotanPublicBody .PotanSelect,
.PotanPublicBody .PotanFileInput {
  color: #fff;
  background: #0b0b0e;
  border-color: rgba(255,255,255,.13);
}
.PotanPublicBody .PotanInput::placeholder,
.PotanPublicBody .PotanTextarea::placeholder { color: rgba(255,255,255,.38); }
.PotanPublicBody .PotanTable { color: #eeeae7; }
.PotanPublicBody .PotanTable th { color: #bfb8b4; background: #121215; border-color: rgba(255,255,255,.08); }
.PotanPublicBody .PotanTable td { border-color: rgba(255,255,255,.075); }
.PotanPublicBody .PotanTable tr:hover td { background: rgba(225,29,46,.055); }
.PotanPublicBody .PotanPageHero,
.PotanMemberOrdersHero {
  color: #fff;
  background:
    radial-gradient(circle at 15% 0%, rgba(225,29,46,.2), transparent 34%),
    radial-gradient(circle at 88% 30%, rgba(245,185,66,.08), transparent 28%),
    linear-gradient(145deg, #08080a, #121216 58%, #08080a);
  border-bottom: 1px solid rgba(225,29,46,.18);
}
.PotanMemberOrdersHero { padding: 52px 0; }
.PotanMemberOrdersHero h1 { margin: 8px 0 8px; font-size: clamp(34px,5vw,54px); }
.PotanMemberOrdersHero p { margin: 0; color: rgba(255,255,255,.62); }

.PotanCatalogHero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 500px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(4,4,6,.96), rgba(12,12,15,.76)),
    radial-gradient(circle at 72% 34%, rgba(225,29,46,.3), transparent 35%),
    #08080a;
  border-bottom: 1px solid rgba(225,29,46,.2);
}
.PotanCatalogHero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .28;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom,#000,transparent 90%);
}
.PotanCatalogHeroInner {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(330px,.75fr);
  align-items: center;
  gap: 72px;
  min-height: 500px;
  padding-block: 76px;
}
.PotanCatalogHero h1 { max-width: 850px; margin: 16px 0 18px; font-size: clamp(42px,6vw,72px); line-height: 1.04; letter-spacing: -.035em; }
.PotanCatalogHero p { max-width: 760px; margin: 0; color: rgba(255,255,255,.67); font-size: 18px; }
.PotanCatalogHero .PotanEyebrow { color: #f6c75b; }
.PotanCatalogHeroCard {
  display: grid;
  gap: 12px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  background: linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  box-shadow: 0 32px 90px rgba(0,0,0,.5);
  backdrop-filter: blur(18px);
}
.PotanCatalogHeroCard > span { color: #f6c75b; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.PotanCatalogHeroCard > div { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(0,0,0,.22); }
.PotanCatalogHeroCard strong { font-size: 28px; }
.PotanCatalogHeroCard small { color: rgba(255,255,255,.52); }
.PotanCatalogHeroCard p { display: flex; align-items: center; gap: 9px; margin: 4px 0 0; color: rgba(255,255,255,.6); font-size: 13px; }
.PotanCatalogHeroCard svg { color: #f6c75b; }

.PotanLuxuryNotices { padding: 20px 0; background: #0b0b0e; }
.PotanLuxuryNotices .PotanContainer { display: grid; gap: 10px; }
.PotanLuxuryNotices article { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 14px 18px; border: 1px solid rgba(225,29,46,.24); border-radius: 15px; background: linear-gradient(90deg,rgba(225,29,46,.12),rgba(255,255,255,.025)); }
.PotanLuxuryNotices article > span { padding: 5px 9px; color: #fff; background: var(--potan-primary); border-radius: 999px; font-size: 11px; font-weight: 700; }
.PotanLuxuryNotices strong { color: #fff; }
.PotanLuxuryNotices p { margin: 2px 0 0; color: rgba(255,255,255,.56); font-size: 13px; }
.PotanLuxuryNotices a { display: inline-flex; align-items: center; gap: 7px; color: #f6c75b; font-weight: 600; }

.PotanCatalogSection { padding: 68px 0 94px; color: #fff; background: #09090b; }
.PotanCatalogHeading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.PotanCatalogHeading h2 { margin: 7px 0 4px; font-size: clamp(30px,4vw,48px); }
.PotanCatalogHeading p { margin: 0; color: rgba(255,255,255,.52); }
.PotanCatalogHeading > a { display: inline-flex; align-items: center; gap: 8px; color: #f6c75b; }
.PotanCategoryTabs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; padding: 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: #111114; }
.PotanCategoryTabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px; color: rgba(255,255,255,.62); border: 1px solid transparent; border-radius: 12px; font-weight: 500; transition: var(--potan-transition); }
.PotanCategoryTabs a span { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; color: rgba(255,255,255,.7); background: rgba(255,255,255,.07); border-radius: 999px; font-size: 11px; }
.PotanCategoryTabs a:hover,.PotanCategoryTabs a.active { color: #fff; border-color: rgba(225,29,46,.45); background: linear-gradient(135deg,rgba(225,29,46,.2),rgba(225,29,46,.08)); }
.PotanLuxuryProductGrid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.PotanCatalogCard { overflow: hidden; border: 1px solid rgba(255,255,255,.085); border-radius: 20px; background: linear-gradient(150deg,#19191d,#111114 76%); box-shadow: 0 24px 70px rgba(0,0,0,.27); transition: transform .24s ease,border-color .24s ease,box-shadow .24s ease; }
.PotanCatalogCard:hover { transform: translateY(-6px); border-color: rgba(225,29,46,.42); box-shadow: 0 30px 85px rgba(0,0,0,.42),0 0 0 1px rgba(225,29,46,.08); }
.PotanCatalogCard .PotanProductImage { aspect-ratio: 16/10; background: #0b0b0d; }
.PotanCatalogCard .PotanProductImage::after { content: ""; position: absolute; inset: auto 0 0; height: 38%; background: linear-gradient(transparent,rgba(0,0,0,.72)); pointer-events: none; }
.PotanCatalogCard .PotanProductBody { display: flex; flex-direction: column; min-height: 390px; padding: 18px; }
.PotanCatalogCard .PotanProductMeta { margin-bottom: 10px; }
.PotanCatalogCard .PotanProductMeta > span:first-child { color: #f6c75b; }
.PotanCatalogCard h2 { min-height: 54px; margin: 0 0 8px; color: #fff; font-size: 17px; line-height: 1.45; }
.PotanCatalogCard p { min-height: 68px; margin: 0 0 14px; color: rgba(255,255,255,.52); font-size: 13px; line-height: 1.65; }
.PotanCatalogPrice { display: flex; align-items: baseline; gap: 9px; margin-top: auto; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.07); }
.PotanCatalogPrice span { color: rgba(255,255,255,.42); font-size: 11px; }
.PotanCatalogPrice strong { margin-left: auto; color: #fff; font-size: 23px; }
.PotanCatalogPrice del { color: rgba(255,255,255,.32); font-size: 12px; }
.PotanQuickBuy { display: grid; grid-template-columns: 78px 1fr; gap: 10px; }
.PotanQuickBuy label { display: grid; gap: 3px; }
.PotanQuickBuy label span { color: rgba(255,255,255,.45); font-size: 10px; }
.PotanQuickBuy .PotanInput { min-height: 44px; padding: 8px 10px; text-align: center; }
.PotanQuickBuy .PotanButton { min-height: 44px; }
.PotanCatalogDetailLink { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; color: rgba(255,255,255,.46); font-size: 12px; }
.PotanCatalogDetailLink:hover { color: #f6c75b; }
.PotanFloatingBadge { color: #fff; background: #ff0000;};
.PotanStockIn { color: #50d890 !important; }
.PotanStockOut { color: #ff6878 !important; }
.PotanLuxuryFlow { padding: 34px 0; background: linear-gradient(90deg,#750d18,#b41324 48%,#750d18); border-block: 1px solid rgba(255,255,255,.13); }
.PotanLuxuryFlow .PotanContainer { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: rgba(255,255,255,.12); }
.PotanLuxuryFlow article { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 21px; background: rgba(75,4,12,.65); }
.PotanLuxuryFlow article > span { display: grid; place-items: center; width: 42px; height: 42px; color: #521016; background: #f6c75b; border-radius: 14px; font-weight: 800; }
.PotanLuxuryFlow h3 { margin: 0 0 4px; color: #fff; }
.PotanLuxuryFlow p { margin: 0; color: rgba(255,255,255,.58); font-size: 12px; }
.PotanLuxuryEmpty { border-color: rgba(255,255,255,.08); background: #111114; }

.PotanOrderSearch { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 16px 0; padding: 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: #141418; }
.PotanAdminOrderSearch { background: #fff; border-color: var(--potan-border); }
.PotanCustomerOrderTable code { color: #f6c75b; }
.PotanViewOrderButton { display: inline-grid; place-items: center; gap: 2px; width: 42px; min-height: 46px; color: #fff; background: linear-gradient(135deg,#14b86e,#0ba45e); border-radius: 12px; }
.PotanViewOrderButton svg { width: 19px; height: 19px; }
.PotanViewOrderButton span { font-size: 10px; }
.PotanDeliveryPanel { border-color: rgba(245,185,66,.18) !important; }
.PotanDeliveryList { display: grid; gap: 15px; }
.PotanDeliveryList article { overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: #0b0b0e; }
.PotanAdminDeliveryList article { border-color: var(--potan-border); background: #f8fafc; }
.PotanDeliveryList header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 15px; border-bottom: 1px solid rgba(255,255,255,.08); }
.PotanAdminDeliveryList header { border-color: var(--potan-border); }
.PotanDeliveryList header small { display: block; color: rgba(255,255,255,.42); }
.PotanAdminDeliveryList header small { color: var(--potan-muted); }
.PotanDeliveryList pre { max-height: 520px; overflow: auto; margin: 0; padding: 17px; color: #d9fbe6; background: #060708; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 13px; line-height: 1.65; }
.PotanDeliveryNote { margin: 0; padding: 13px 15px; color: rgba(255,255,255,.7); background: rgba(245,185,66,.07); }
.PotanManualDeliveryEditor { border: 1px solid rgba(16,185,129,.24) !important; }
.PotanManualDeliveryEditor .PotanCodeTextarea { min-height: 330px; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 13px; line-height: 1.55; }

.PotanInventoryCounterGrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.PotanInventoryCounterCard { display: grid; gap: 18px; padding: 20px; border: 1px solid var(--potan-border); border-radius: 20px; background: #fff; box-shadow: var(--potan-shadow-sm); }
.PotanInventoryCounterHead { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; }
.PotanInventoryCounterHead img { width: 84px; height: 64px; object-fit: cover; border-radius: 13px; background: #eef2f7; }
.PotanInventoryCounterHead span { color: var(--potan-primary); font-size: 11px; font-weight: 700; }
.PotanInventoryCounterHead h2 { margin: 2px 0; font-size: 17px; line-height: 1.35; }
.PotanInventoryCounterHead small { color: var(--potan-muted); }
.PotanInventoryNumber { display: flex; align-items: baseline; gap: 9px; padding: 17px; border-radius: 16px; background: #f6f8fc; }
.PotanInventoryNumber strong { margin-left: auto; font-size: 34px; }
.PotanInventoryNumber small { color: var(--potan-muted); }
.PotanInventoryQuickForm { display: grid; grid-template-columns: 1fr 100px auto; gap: 8px; }
.PotanInventoryCounterCard > a { display: inline-flex; align-items: center; gap: 7px; color: var(--potan-primary); font-weight: 600; }

@media (max-width: 1100px) {
  .PotanLuxuryProductGrid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .PotanCatalogHeroInner { grid-template-columns: 1fr minmax(290px,.65fr); gap: 38px; }
  .PotanInventoryCounterGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .PotanCatalogHeroInner { grid-template-columns: 1fr; min-height: auto; padding-block: 58px; }
  .PotanCatalogHeroCard { max-width: 620px; }
  .PotanLuxuryProductGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .PotanLuxuryFlow .PotanContainer { grid-template-columns: repeat(2,1fr); }
  .PotanCatalogHeading { align-items: start; flex-direction: column; }
  .PotanLuxuryNotices article { grid-template-columns: auto 1fr; }
  .PotanLuxuryNotices article > a { grid-column: 2; }
  .PotanInventoryCounterGrid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .PotanCatalogHero h1 { font-size: 39px; }
  .PotanCatalogHero p { font-size: 16px; }
  .PotanLuxuryProductGrid { grid-template-columns: 1fr; }
  .PotanCatalogCard .PotanProductBody { min-height: 350px; }
  .PotanLuxuryFlow .PotanContainer { grid-template-columns: 1fr; }
  .PotanCategoryTabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .PotanCategoryTabs a { flex: 0 0 auto; }
  .PotanOrderSearch { grid-template-columns: 1fr; }
  .PotanInventoryQuickForm { grid-template-columns: 1fr; }
  .PotanCustomerOrderTable { min-width: 1050px; }
  .PotanLuxuryNotices article { grid-template-columns: 1fr; }
  .PotanLuxuryNotices article > a { grid-column: auto; }
}


/* PotanSaitao v2.x — internal live order monitor */
.PotanSidebarNav a{position:relative}
.PotanNavBadge{margin-left:auto;min-width:24px;height:24px;padding:0 7px;display:inline-grid;place-items:center;border-radius:999px;background:linear-gradient(135deg,var(--potan-primary),var(--potan-secondary));color:#fff;font-size:11px;font-weight:700;box-shadow:0 8px 20px rgba(225,29,46,.28)}
.PotanNavBadge[hidden]{display:none}
.PotanOrderLiveStatus{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid rgba(148,163,184,.16);border-radius:12px;background:rgba(255,255,255,.03);color:inherit;text-decoration:none;white-space:nowrap}
.PotanOrderLiveStatus>span{display:inline-flex;align-items:center;gap:5px;color:var(--potan-muted)}
.PotanOrderLiveStatus b{color:var(--potan-text);font-size:13px}
.PotanLiveOrderNotice{position:fixed;z-index:9999;right:22px;bottom:22px;width:min(390px,calc(100vw - 30px));display:grid;gap:4px;padding:17px 18px;border:1px solid rgba(255,255,255,.13);border-radius:17px;background:linear-gradient(145deg,#141016,#2a1118);color:#fff;text-decoration:none;box-shadow:0 26px 70px rgba(0,0,0,.45),0 0 0 1px rgba(225,29,46,.12) inset;transform:translateY(26px);opacity:0;transition:.26s ease}
.PotanLiveOrderNotice.is-visible{transform:translateY(0);opacity:1}
.PotanLiveOrderNotice strong{font-size:16px;color:#fff}
.PotanLiveOrderNotice span{color:#fecdd3}
.PotanLiveOrderNotice small{color:#aeb7c4}
@media(max-width:900px){.PotanOrderLiveStatus{display:none}}

/* PotanSaitao Platform v2.x — category storefront and customer account */
.PotanCatalogGroups{display:grid;gap:40px}
.PotanCategorySection{scroll-margin-top:110px}
.PotanCategoryHeader{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;padding:14px 17px;border:1px solid rgba(225,29,46,.32);border-radius:18px;background:linear-gradient(90deg,rgba(225,29,46,.2),rgba(245,185,66,.055),rgba(255,255,255,.02));box-shadow:0 18px 46px rgba(0,0,0,.18)}
.PotanCategoryHeader>div{display:flex;align-items:center;gap:13px;min-width:0}
.PotanCategoryMark{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid rgba(255,255,255,.13);border-radius:13px;color:#241207;background:linear-gradient(135deg,#f8dd86,#e8a923);font-size:18px;font-weight:800;box-shadow:0 10px 28px rgba(245,185,66,.18)}
.PotanCategoryHeader h3{margin:0;color:#fff;font-size:20px;line-height:1.25}
.PotanCategoryHeader p{margin:3px 0 0;color:rgba(255,255,255,.5);font-size:12px}
.PotanCategoryHeader>a{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;color:#f6c75b;font-size:13px;font-weight:600}
.PotanCustomerAccountGrid{display:grid;grid-template-columns:minmax(270px,330px) minmax(0,1fr);gap:22px;align-items:start}
.PotanCustomerAccountGrid>aside{position:sticky;top:98px}
.PotanCustomerAccountCard{text-align:center}
.PotanAvatarXL{width:86px;height:86px;margin:0 auto 15px;border-radius:28px;font-size:34px}
.PotanCustomerAccountCard h2{margin:0 0 18px}
.PotanCustomerAccountCard .PotanDetailList{text-align:left}
.PotanTableActions{display:flex;align-items:center;gap:9px;white-space:nowrap}
.PotanTableActions form{margin:0}
@media(max-width:980px){.PotanCustomerAccountGrid{grid-template-columns:1fr}.PotanCustomerAccountGrid>aside{position:static}.PotanLuxuryProductGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.PotanCategoryHeader{align-items:flex-start;flex-direction:column}.PotanCategoryHeader>a{padding-left:55px}.PotanLuxuryProductGrid{grid-template-columns:1fr}.PotanTableActions{align-items:flex-start;flex-direction:column}}


/* =========================================================
   PotanSaitao v3.1.0 — readability, responsive, single QR
   ========================================================= */
:root {
  --potan-readable-white: #f8fafc;
  --potan-readable-muted: #b7c0cf;
  --potan-dark-surface: #11141a;
  --potan-dark-surface-2: #171b23;
  --potan-dark-border: rgba(255,255,255,.13);
}
.PotanNavToggle { display: none !important; }
.PotanLabelRow { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; }
.PotanLabelRow a { color: #f7c65a; font-size: 13px; font-weight: 600; }
.PotanLabelRow a:hover { color: #fff; text-decoration: underline; }
.PotanAuthGridFocused { max-width: 1040px; }
.PotanPasswordResetSection .PotanAuthCard { min-height: 0; }
.PotanPasswordResetSection .PotanNotice { margin-bottom: 18px; }

.PotanPublicBody .PotanForm label,
.PotanPublicBody .PotanBuyBox label,
.PotanPublicBody .PotanSettingsForm label { color: var(--potan-readable-white); }
.PotanPublicBody .PotanForm label > small,
.PotanPublicBody .PotanBuyBox small,
.PotanPublicBody .PotanFormHint,
.PotanPublicBody .PotanAuthCard > p,
.PotanPublicBody .PotanAuthLegal,
.PotanPublicBody .PotanPanelHeader p,
.PotanPublicBody .PotanDetailList span,
.PotanPublicBody .PotanOrderSummary span { color: var(--potan-readable-muted); }
.PotanPublicBody .PotanAuthLegal a,
.PotanPublicBody .PotanAuthSwitch a { color: #f7c65a; }
.PotanPublicBody .PotanInput,
.PotanPublicBody .PotanTextarea,
.PotanPublicBody .PotanSelect,
.PotanPublicBody .PotanFileInput {
  color: #fff;
  background: #0d1015;
  border-color: rgba(255,255,255,.18);
}
.PotanPublicBody .PotanInput:focus,
.PotanPublicBody .PotanTextarea:focus,
.PotanPublicBody .PotanSelect:focus,
.PotanPublicBody .PotanFileInput:focus {
  border-color: #fb465b;
  box-shadow: 0 0 0 4px rgba(251,70,91,.17);
}
.PotanPublicBody .PotanFileInput { padding: 12px; }
.PotanPublicBody .PotanFileInput::file-selector-button {
  margin-right: 12px;
  padding: 9px 13px;
  color: #fff;
  background: #252a34;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 9px;
}
.PotanPublicBody .PotanNoticeInfo { color: #dff4ff; background: rgba(14,116,144,.19); border-color: rgba(56,189,248,.31); }
.PotanPublicBody .PotanNoticeWarning { color: #fff1c2; background: rgba(161,98,7,.2); border-color: rgba(250,204,21,.3); }
.PotanPublicBody .PotanNoticeDanger { color: #ffe4e8; background: rgba(159,18,57,.22); border-color: rgba(251,113,133,.32); }
.PotanPublicBody .PotanNoticeSuccess { color: #dcfce7; background: rgba(6,95,70,.25); border-color: rgba(52,211,153,.3); }

/* Payment cards: avoid white card + white text */
.PotanPublicBody .PotanPaymentMethods { gap: 18px; }
.PotanPublicBody .PotanPaymentMethod {
  grid-template-columns: 22px 54px minmax(0,1fr) auto;
  gap: 15px;
  padding: 18px;
  color: #fff;
  background: linear-gradient(145deg,#191d25,#11141a);
  border-color: rgba(255,255,255,.14);
}
.PotanPublicBody .PotanPaymentMethod:hover,
.PotanPublicBody .PotanPaymentMethod:has(input:checked) {
  border-color: #fb465b;
  background: linear-gradient(145deg,#211820,#15161c);
  box-shadow: 0 0 0 4px rgba(251,70,91,.12),0 18px 48px rgba(0,0,0,.3);
}
.PotanPaymentMethodInfo { min-width: 0; }
.PotanPaymentMethodInfo strong { display: block; margin-bottom: 4px; color: #fff; font-size: 17px; }
.PotanPaymentMethodInfo small { display: block; color: #c2cad6; line-height: 1.6; }
.PotanPaymentMethod > i { color: #f7c65a; font-style: normal; font-weight: 700; }
.PotanPaymentQr {
  width: 150px;
  height: 150px;
  object-fit: contain;
  padding: 7px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(0,0,0,.34);
}

/* Store cards: more breathing room */
.PotanCatalogGroups { gap: 54px; }
.PotanCategoryHeader { margin-bottom: 26px; padding: 17px 20px; }
.PotanLuxuryProductGrid,
.PotanProductGrid { gap: clamp(24px,2.4vw,34px); align-items: stretch; }
.PotanCatalogCard { height: 100%; }
.PotanCatalogCard .PotanProductBody { padding: 22px; }
.PotanCatalogCard h2 { margin-bottom: 11px; }
.PotanCatalogCard p { color: rgba(255,255,255,.66); }
.PotanQuickBuy { gap: 12px; margin-top: auto; padding-top: 18px; }

/* QR manager */
.PotanQrManagerGrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; margin-top: 24px; }
.PotanQrManagerCard { display: grid; gap: 15px; padding: 20px; border: 1px solid var(--potan-border); border-radius: 18px; background: #f8fafc; }
.PotanQrManagerCard > div:first-child { display: grid; gap: 4px; }
.PotanQrManagerCard > div:first-child small { color: var(--potan-muted); }
.PotanQrManagerCard img { width: min(240px,100%); aspect-ratio: 1; object-fit: contain; padding: 8px; border: 1px solid var(--potan-border); border-radius: 16px; background: #fff; }
.PotanQrPlaceholder { display: grid; place-items: center; min-height: 180px; color: var(--potan-muted); border: 1px dashed #bdc8d8; border-radius: 16px; background: #fff; }

/* Manual delivery slots */
.PotanDeliveryIdentity { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.PotanDeliveryIdentity > div { display: grid; gap: 3px; padding: 15px 17px; border: 1px solid var(--potan-border); border-radius: 14px; background: #f8fafc; }
.PotanDeliveryIdentity span { color: var(--potan-muted); font-size: 12px; }
.PotanDeliveryIdentity strong { color: var(--potan-ink); }
.PotanDeliveryIdentity small { color: var(--potan-muted); }
.PotanDeliverySlotGrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; margin-top: 22px; }
.PotanDeliverySlotCard { min-width: 0; padding: 20px; border: 1px solid #d9e1ec; border-radius: 18px; background: #fff; box-shadow: 0 12px 34px rgba(15,35,67,.07); scroll-margin-top: 110px; }
.PotanDeliverySlotCard > header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.PotanDeliverySlotCard > header > span { display: grid; place-items: center; width: 42px; height: 42px; color: #fff; background: linear-gradient(135deg,#b51429,#fb465b); border-radius: 13px; font-size: 18px; font-weight: 800; }
.PotanDeliverySlotCard > header div { display: grid; }
.PotanDeliverySlotCard > header small { color: var(--potan-muted); }
.PotanDeliverySlotCard .PotanCodeTextarea { min-height: 220px; color: #e7f8ee; background: #07130d; border-color: #244b38; }
.PotanLinkDanger { display: inline-flex; margin-top: 10px; padding: 0; color: #dc2626; border: 0; background: transparent; font-weight: 600; }
.PotanLinkDanger:hover { text-decoration: underline; }

/* Email manager */
.PotanEmailTestBox { margin-top: 20px; padding: 15px 17px; border: 1px dashed var(--potan-border); border-radius: 14px; background: #f8fafc; }
.PotanEmailTestBox small { display: block; color: var(--potan-muted); }
.PotanEmailTestPanel { margin-top: 24px; }
.PotanEmailTestForm { grid-template-columns: minmax(260px,1fr) auto; align-items: end; }

/* Admin polish */
.PotanAdminBody { color: #172033; background: #eef2f7; }
.PotanAdminBody .PotanPanel { border-color: #dce4ef; box-shadow: 0 14px 38px rgba(15,35,67,.08); }
.PotanAdminBody .PotanPanelHeader p,
.PotanAdminBody .PotanForm label small,
.PotanAdminBody .PotanTable small { color: #69778c; }
.PotanAdminBody .PotanInput,
.PotanAdminBody .PotanTextarea,
.PotanAdminBody .PotanSelect,
.PotanAdminBody .PotanFileInput {
  color: #162033;
  background: #fff;
  border-color: #cfd9e7;
}
.PotanAdminBody .PotanInput::placeholder,
.PotanAdminBody .PotanTextarea::placeholder { color: #8b98aa; }
.PotanAdminBody .PotanTable th { color: #475569; background: #f3f6fa; }
.PotanAdminBody .PotanTable td { color: #243247; }

/* Responsive */
@media (max-width: 900px) {
  .PotanNavToggle { display: inline-grid !important; }
  .PotanPublicBody .PotanPaymentMethod { grid-template-columns: 22px 48px minmax(0,1fr); }
  .PotanPaymentQr { grid-column: 2 / -1; width: min(220px,100%); height: auto; justify-self: start; }
  .PotanPaymentMethod > i { grid-column: 3; }
  .PotanDeliverySlotGrid,
  .PotanQrManagerGrid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .PotanContainer { width: min(calc(100% - 24px),var(--potan-container)); }
  .PotanSection { padding: 58px 0; }
  .PotanCatalogGroups { gap: 40px; }
  .PotanCategoryHeader { margin-bottom: 20px; }
  .PotanLuxuryProductGrid,
  .PotanProductGrid { gap: 24px; }
  .PotanCatalogCard .PotanProductBody { min-height: auto; padding: 20px; }
  .PotanPublicBody .PotanPaymentMethod { grid-template-columns: 22px 44px minmax(0,1fr); padding: 15px; }
  .PotanPaymentQr { grid-column: 1 / -1; justify-self: center; width: min(260px,100%); }
  .PotanDeliveryIdentity { grid-template-columns: 1fr; }
  .PotanDeliverySlotCard { padding: 16px; }
  .PotanEmailTestForm { grid-template-columns: 1fr; }
  .PotanLabelRow { align-items: flex-start; }
}


/* =========================================================
   PotanSaitao v3.1.0 — black / green / cyan premium refresh
   ========================================================= */
.PotanPublicBody{
  color:#eef7f5;
  background:#06090d;
  background-image:radial-gradient(circle at 12% 0%,rgba(22,199,132,.10),transparent 30%),radial-gradient(circle at 88% 10%,rgba(34,184,240,.09),transparent 28%);
}
.PotanPublicBody .PotanSection,.PotanPublicBody .PotanSectionAlt{background:transparent;color:#eef7f5}
.PotanPublicBody .PotanPanel,.PotanPublicBody .PotanAccountNav,.PotanPublicBody .PotanMetricGrid article,.PotanPublicBody .PotanAccordion details,.PotanPublicBody .PotanOrdersPanel{
  color:#eef7f5;background:linear-gradient(145deg,#111820,#0c1117);border-color:rgba(125,211,252,.15);box-shadow:0 18px 54px rgba(0,0,0,.28)
}
.PotanPublicBody .PotanPanel h1,.PotanPublicBody .PotanPanel h2,.PotanPublicBody .PotanPanel h3,.PotanPublicBody .PotanMetricGrid strong,.PotanPublicBody .PotanAccordion summary{color:#f8fffd}
.PotanPublicBody .PotanPanel p,.PotanPublicBody .PotanMetricGrid span,.PotanPublicBody .PotanAccordion p,.PotanPublicBody .PotanTable td,.PotanPublicBody .PotanTable th{color:#b9c9cf}
.PotanPublicBody .PotanTable{border-color:rgba(255,255,255,.12);background:#0c1117}
.PotanPublicBody .PotanTable thead th{color:#dce9ed;background:#121a22;border-color:rgba(255,255,255,.1)}
.PotanPublicBody .PotanTable td{border-color:rgba(255,255,255,.08)}
.PotanPublicBody .PotanTable tr:hover td{background:rgba(34,184,240,.055)}
.PotanPublicBody .PotanAccountNav>a{color:#c0cbd1}
.PotanPublicBody .PotanAccountNav>a:hover,.PotanPublicBody .PotanAccountNav>a.active{color:#07120e;background:linear-gradient(135deg,#16c784,#57dfb0);font-weight:700}
.PotanPublicBody .PotanMetricGrid article i{display:none}
.PotanPublicBody .PotanMetricGrid article{min-height:126px;padding:22px;border-radius:18px}
.PotanPublicBody .PotanMetricGrid article::after{content:"";position:absolute;inset:auto 18px 0;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--potan-primary),var(--potan-secondary));opacity:.75}
.PotanPublicBody .PotanAccordion{gap:14px}
.PotanPublicBody .PotanAccordion details{overflow:hidden;border:1px solid rgba(125,211,252,.16);border-radius:16px}
.PotanPublicBody .PotanAccordion summary{padding:18px 20px;background:#111820}
.PotanPublicBody .PotanAccordion details[open] summary{color:#9ff6d3;background:linear-gradient(90deg,rgba(22,199,132,.13),rgba(34,184,240,.08))}
.PotanPublicBody .PotanAccordion p{margin:0;padding:18px 20px 22px;background:#0c1117;line-height:1.85}
.PotanPublicBody .PotanInput::placeholder,.PotanPublicBody .PotanTextarea::placeholder{color:#91a1aa;opacity:1}
.PotanPublicBody .PotanInput:focus,.PotanPublicBody .PotanTextarea:focus,.PotanPublicBody .PotanSelect:focus,.PotanPublicBody .PotanFileInput:focus{border-color:#22b8f0;box-shadow:0 0 0 4px rgba(34,184,240,.15)}
.PotanCatalogGroups{gap:64px}
.PotanLuxuryProductGrid,.PotanProductGrid{column-gap:32px;row-gap:36px}
.PotanCatalogCard{border-color:rgba(125,211,252,.16);background:linear-gradient(155deg,#111820,#0a0f15)}
.PotanCatalogCard:hover{border-color:rgba(22,199,132,.48);box-shadow:0 26px 70px rgba(0,0,0,.42),0 0 0 1px rgba(34,184,240,.08)}
.PotanCategoryHeader{background:linear-gradient(90deg,rgba(22,199,132,.15),rgba(34,184,240,.10));border-color:rgba(34,184,240,.18)}
.PotanCategoryHeader>a{color:#75e6ff}
.PotanFooter{border-top-color:rgba(125,211,252,.12);background:#06111f}
.PotanSinglePayment{display:grid;gap:22px;padding:22px;border:1px solid rgba(125,211,252,.18);border-radius:22px;background:linear-gradient(145deg,#111820,#0b1016)}
.PotanSinglePaymentHead{display:flex;align-items:center;gap:14px}
.PotanSinglePaymentHead>span{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;color:#05120d;background:linear-gradient(135deg,#16c784,#7dd3fc)}
.PotanSinglePaymentHead div{display:grid;gap:3px}.PotanSinglePaymentHead strong{font-size:18px;color:#fff}.PotanSinglePaymentHead small{color:#afbec6}
.PotanSingleQrFrame{width:min(480px,100%);margin-inline:auto;padding:14px;border-radius:24px;background:#fff;box-shadow:0 25px 70px rgba(0,0,0,.38)}
.PotanSingleQrFrame img{width:100%;height:auto;max-height:680px;object-fit:contain;border-radius:15px}
.PotanQrSafety{display:grid;grid-template-columns:auto repeat(4,1fr);gap:8px;align-items:center;padding:14px;border-radius:14px;background:rgba(34,184,240,.08);color:#cbe9f3;font-size:13px}
.PotanQrSafety strong{color:#75e6ff}.PotanQrSafety span{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.055)}
.PotanQrManagerGridSingle{grid-template-columns:minmax(0,620px)}
.PotanQrManagerGridSingle .PotanQrManagerCard img{width:min(360px,100%);aspect-ratio:auto;max-height:520px}
.PotanAdminBody .PotanButton:not(.PotanButtonDanger):not(.PotanButtonGhost):not(.PotanButtonLight){--button-bg:linear-gradient(135deg,#16c784,#079bc8);box-shadow:0 12px 28px rgba(22,199,132,.22)}
.PotanAdminBody .PotanButtonSuccess{--button-bg:linear-gradient(135deg,#16c784,#059669);font-weight:700}
.PotanAdminBody .PotanRejectForm{margin-top:16px;padding-top:16px;border-top:1px solid #e2e8f0}
.PotanAdminBody .PotanRejectForm .PotanButtonDanger{width:auto;min-height:40px;padding:9px 16px;font-size:13px;box-shadow:none}
.PotanAdminGridOrder{gap:28px}.PotanAdminGridOrder main{display:grid;gap:28px}
.PotanAdminGridOrder main>.PotanPanel{margin:0}
.PotanAdminBody .PotanCustomerCard{padding:22px;border:1px solid #dbe6ef;border-radius:20px;background:linear-gradient(145deg,#fff,#f7fbff);box-shadow:0 14px 36px rgba(15,35,67,.07)}
.PotanAdminBody .PotanCustomerCard .PotanAvatar{background:linear-gradient(135deg,#16c784,#22b8f0)}
.PotanAdminBody .PotanCustomerCard strong{color:#142033}.PotanAdminBody .PotanCustomerCard small{color:#64748b}
@media(max-width:900px){.PotanQrSafety{grid-template-columns:1fr 1fr}.PotanQrSafety strong{grid-column:1/-1}.PotanAccountLayout{gap:20px}.PotanAccountNav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.PotanSinglePayment{padding:16px}.PotanSinglePaymentHead{align-items:flex-start}.PotanQrSafety{grid-template-columns:1fr}.PotanLuxuryProductGrid,.PotanProductGrid{row-gap:28px}.PotanAccountNav{grid-template-columns:1fr 1fr;padding:12px}.PotanAccountNav>a{display:flex;justify-content:center;text-align:center}.PotanMetricGridFour{grid-template-columns:1fr 1fr}.PotanMetricGrid article{min-height:112px;padding:17px}.PotanAdminGridOrder{gap:18px}}
@media(max-width:420px){.PotanMetricGridFour{grid-template-columns:1fr}.PotanAccountNav{grid-template-columns:1fr}.PotanSingleQrFrame{padding:9px}}

/* =========================================================
   PotanSaitao v3.1.0 — final corrections from owner review
   ========================================================= */

/* Main public palette: black + green + cyan. Red remains only for destructive actions. */
.PotanPublicBody .PotanHeader{
  background:rgba(4,9,13,.94);
  border-bottom-color:rgba(34,184,240,.20);
  box-shadow:0 12px 42px rgba(0,0,0,.44);
}
.PotanPublicBody .PotanLogoMark{
  color:#03110c;
  background:linear-gradient(135deg,#16c784 0%,#68e5bd 46%,#22b8f0 100%);
  box-shadow:0 12px 34px rgba(22,199,132,.28);
}
.PotanPublicBody .PotanButton:not(.PotanButtonDanger){
  --button-bg:linear-gradient(135deg,#16c784 0%,#13b493 48%,#22b8f0 100%);
  color:#03110d;
  box-shadow:0 14px 34px rgba(22,199,132,.22);
}
.PotanPublicBody .PotanButtonGhost{
  --button-bg:transparent;
  color:#8cefd0;
  border-color:rgba(125,211,252,.24);
  box-shadow:none;
}
.PotanPublicBody .PotanButtonGhost:hover{color:#fff;background:rgba(34,184,240,.09)}
.PotanPublicBody .PotanButtonDanger,
.PotanAdminBody .PotanButtonDanger{
  --button-bg:linear-gradient(135deg,#ef4444,#dc2626);
  color:#fff;
}
.PotanPublicBody .PotanPageHero,
.PotanMemberOrdersHero,
.PotanCatalogHero{
  background:
    radial-gradient(circle at 14% 0%,rgba(22,199,132,.21),transparent 35%),
    radial-gradient(circle at 88% 30%,rgba(34,184,240,.15),transparent 30%),
    linear-gradient(145deg,#05090d,#0b1117 58%,#060b10);
  border-bottom-color:rgba(34,184,240,.16);
}
.PotanCatalogHero .PotanEyebrow,
.PotanCatalogHeroCard>span,
.PotanCatalogHeroCard svg,
.PotanLuxuryNotices a,
.PotanCatalogHeading>a,
.PotanCatalogCard .PotanProductMeta>span:first-child,
.PotanCategoryHeader>a,
.PotanCustomerOrderTable code{
  color:#75e6ff;
}
.PotanCatalogHeroCard>div{background:rgba(3,11,14,.42);border-color:rgba(125,211,252,.12)}
.PotanLuxuryNotices{background:#070b0f}
.PotanLuxuryNotices article{
  border-color:rgba(34,184,240,.18);
  background:linear-gradient(90deg,rgba(22,199,132,.12),rgba(34,184,240,.05));
}
.PotanLuxuryNotices article>span{color:#03110c;background:linear-gradient(135deg,#16c784,#7dd3fc)}
.PotanCategoryTabs a:hover,.PotanCategoryTabs a.active{
  color:#ecfffa;
  border-color:rgba(22,199,132,.44);
  background:linear-gradient(135deg,rgba(22,199,132,.19),rgba(34,184,240,.09));
}
.PotanCategoryHeader{
  border-color:rgba(34,184,240,.22);
  background:linear-gradient(90deg,rgba(22,199,132,.16),rgba(34,184,240,.09),rgba(255,255,255,.02));
}
.PotanCategoryMark{
  color:#03110c;
  background:linear-gradient(135deg,#16c784,#7dd3fc);
  box-shadow:0 10px 28px rgba(22,199,132,.19);
}
.PotanLuxuryFlow{
  background:linear-gradient(90deg,#063225,#075345 50%,#063047);
  border-block-color:rgba(125,211,252,.16);
}
.PotanLuxuryFlow .PotanContainer{border-color:rgba(125,211,252,.16);background:rgba(125,211,252,.10)}
.PotanLuxuryFlow article{background:rgba(3,24,24,.70)}
.PotanLuxuryFlow article>span{color:#03110c;background:linear-gradient(135deg,#7df0c2,#7dd3fc)}

/* Product catalog search: keep icon and placeholder separated. */
.PotanCatalogToolbar{align-items:stretch}
.PotanSearchField{position:relative;display:block;min-width:0;flex:1;max-width:560px}
.PotanSearchField svg{z-index:2;left:16px;color:#7dd3fc;pointer-events:none}
.PotanSearchField .PotanInput{
  width:100%;
  min-height:50px;
  padding-left:50px;
  padding-right:16px;
  color:#f8fffd;
  background:#0c1218;
  border-color:rgba(125,211,252,.20);
}
.PotanSearchField .PotanInput::placeholder{color:#95a7ad;opacity:1}

/* Product cards: fixed comfortable width and visible separation. */
.PotanLuxuryProductGrid,
.PotanProductGrid{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,245px),285px));
  justify-content:start;
  column-gap:32px;
  row-gap:38px;
}
.PotanCatalogCard{min-width:0;border-radius:22px}
.PotanCatalogCard .PotanProductBody{display:flex;flex-direction:column;min-height:350px;padding:23px}
.PotanQuickBuy{margin-top:auto}

/* FAQ: no white-on-white text; use padded dark accordion cards. */
.PotanPublicBody .PotanFaqLayout,
.PotanPublicBody .PotanFaqPage{align-items:start}
.PotanPublicBody .PotanAccordion{display:grid;gap:15px}
.PotanPublicBody .PotanAccordion details{
  overflow:hidden;
  color:#eef7f5;
  border:1px solid rgba(125,211,252,.18);
  border-radius:17px;
  background:linear-gradient(145deg,#111920,#0c1218);
  box-shadow:0 16px 42px rgba(0,0,0,.23);
}
.PotanPublicBody .PotanAccordion summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:58px;
  padding:17px 20px;
  color:#f8fffd;
  background:#111920;
  line-height:1.5;
}
.PotanPublicBody .PotanAccordion summary span{color:#7dd3fc;font-size:22px}
.PotanPublicBody .PotanAccordion details[open] summary{
  color:#a8f5dc;
  background:linear-gradient(90deg,rgba(22,199,132,.14),rgba(34,184,240,.09));
  border-bottom:1px solid rgba(125,211,252,.13);
}
.PotanPublicBody .PotanAccordion details>p,
.PotanPublicBody .PotanAccordion details>div{
  margin:0;
  padding:18px 20px 22px;
  color:#becdd1;
  background:#0c1218;
  line-height:1.9;
}

/* Member dashboard: dark readable cards, remove decorative metric icon boxes. */
.PotanPublicBody .PotanAccountLayout{grid-template-columns:230px minmax(0,1fr);gap:28px}
.PotanPublicBody .PotanAccountNav{
  display:grid;
  gap:7px;
  padding:12px;
  border:1px solid rgba(125,211,252,.15);
  border-radius:20px;
  background:linear-gradient(145deg,#111920,#0c1218);
  box-shadow:0 18px 50px rgba(0,0,0,.25);
}
.PotanPublicBody .PotanAccountNav>a{
  min-height:48px;
  padding:12px 14px;
  border-radius:12px;
  color:#bac8cd;
}
.PotanPublicBody .PotanAccountNav>a svg{color:#7dd3fc}
.PotanPublicBody .PotanAccountNav>a.active,
.PotanPublicBody .PotanAccountNav>a:hover{
  color:#03110c;
  background:linear-gradient(135deg,#16c784,#7dd3fc);
}
.PotanPublicBody .PotanAccountNav>a.active svg,
.PotanPublicBody .PotanAccountNav>a:hover svg{color:#03110c}
.PotanPublicBody .PotanMetricGrid{gap:18px;margin-bottom:22px}
.PotanPublicBody .PotanMetricGrid>article{
  position:relative;
  min-height:126px;
  padding:22px;
  color:#eef7f5;
  border:1px solid rgba(125,211,252,.15);
  background:linear-gradient(145deg,#111920,#0c1218);
  box-shadow:0 16px 44px rgba(0,0,0,.24);
}
.PotanPublicBody .PotanMetricGrid article span{color:#aebfc4}
.PotanPublicBody .PotanMetricGrid article strong{color:#f8fffd;font-size:clamp(27px,3vw,36px)}
.PotanPublicBody .PotanMetricGrid article i{display:none!important}
.PotanPublicBody .PotanMetricGrid article::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:0;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,#16c784,#22b8f0);
}
.PotanPublicBody .PotanTableWrap{border-color:rgba(125,211,252,.14);background:#0c1218}
.PotanPublicBody .PotanTable{color:#e9f3f1;background:#0c1218}
.PotanPublicBody .PotanTable th{color:#c8d6da;background:#131c23;border-color:rgba(255,255,255,.10)}
.PotanPublicBody .PotanTable td{color:#d6e2e4;background:#0c1218;border-color:rgba(255,255,255,.075)}
.PotanPublicBody .PotanTable tbody tr:hover td{background:rgba(34,184,240,.06)}
.PotanPublicBody .PotanTableAction{color:#7dd3fc;font-weight:700}

/* Single QR checkout. */
.PotanSinglePayment{padding:24px;gap:24px}
.PotanSingleQrFrame{width:min(520px,100%);padding:12px;border-radius:24px}
.PotanSingleQrFrame img{display:block;width:100%;height:auto;max-height:760px;object-fit:contain}
.PotanQrSafety{grid-template-columns:auto repeat(4,minmax(0,1fr));gap:10px}
.PotanQrSafety span{color:#d1e3e7}

/* Admin Order Detail: compact sections and clearer customer identity. */
.PotanAdminGridOrder{gap:26px;align-items:start}
.PotanAdminGridOrder main{display:grid;gap:22px;align-content:start}
.PotanAdminGridOrder main>.PotanPanel{margin:0;min-height:0}
.PotanAdminGridOrder aside{position:sticky;top:92px}
.PotanAdminGridOrder .PotanDetailList{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 16px;
  margin-top:16px;
}
.PotanAdminGridOrder .PotanDetailList>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:0;
  padding:11px 13px;
  border:1px solid #e3eaf2;
  border-radius:12px;
  background:#f8fafc;
}
.PotanAdminGridOrder .PotanDetailList>div span{color:#64748b;font-size:12px}
.PotanAdminGridOrder .PotanDetailList>div strong{color:#142033;text-align:right;overflow-wrap:anywhere}
.PotanAdminGridOrder .PotanDetailList>div.highlight{border-color:#a7f3d0;background:#f0fdf4}
.PotanAdminGridOrder .PotanDetailList>div.highlight strong{color:#047857;font-size:18px}
.PotanAdminBody .PotanCustomerCard{display:grid;gap:18px;padding:20px}
.PotanCustomerCardHead{display:flex;align-items:center;gap:14px}
.PotanCustomerCardHead h3{margin:3px 0 0;color:#142033;font-size:20px}
.PotanCustomerId{display:inline-flex;color:#078268;font-size:12px;font-weight:700}
.PotanCustomerInfoGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.PotanCustomerInfoGrid>div{display:grid;gap:4px;min-width:0;padding:12px 14px;border:1px solid #dce5ee;border-radius:12px;background:#f8fbfd}
.PotanCustomerInfoGrid span{color:#64748b;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.PotanCustomerInfoGrid strong{color:#142033;overflow-wrap:anywhere;font-size:13px}
.PotanAdminBody .PotanButtonSuccess{--button-bg:linear-gradient(135deg,#16c784,#059669);color:#fff}
.PotanAdminBody .PotanRejectForm{margin-top:15px;padding-top:15px;border-top:1px solid #e2e8f0}
.PotanAdminBody .PotanRejectForm .PotanButtonDanger{
  width:auto!important;
  min-height:40px;
  padding:9px 16px;
  font-size:13px;
  box-shadow:none;
}
.PotanDeliverySlotCard>header>span{background:linear-gradient(135deg,#16c784,#22b8f0);color:#03110c}

/* Responsive refinements. */
@media(max-width:1100px){
  .PotanLuxuryProductGrid,.PotanProductGrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr))}
  .PotanQrSafety{grid-template-columns:repeat(2,minmax(0,1fr))}
  .PotanQrSafety strong{grid-column:1/-1}
}
@media(max-width:900px){
  .PotanCatalogToolbar{display:grid;grid-template-columns:1fr 1fr}
  .PotanSearchField{grid-column:1/-1;max-width:none}
  .PotanCatalogToolbar .PotanButton{width:100%}
  .PotanPublicBody .PotanAccountLayout{grid-template-columns:1fr}
  .PotanPublicBody .PotanAccountNav{grid-template-columns:repeat(4,minmax(0,1fr));position:static}
  .PotanPublicBody .PotanAccountNav>a{justify-content:center;text-align:center}
  .PotanAdminGridOrder aside{position:static}
  .PotanAdminGridOrder .PotanDetailList{grid-template-columns:1fr}
}
@media(max-width:640px){
  .PotanCatalogToolbar{grid-template-columns:1fr}
  .PotanSearchField{grid-column:auto}
  .PotanLuxuryProductGrid,.PotanProductGrid{grid-template-columns:1fr;row-gap:28px}
  .PotanCatalogCard .PotanProductBody{min-height:auto}
  .PotanPublicBody .PotanAccountNav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .PotanPublicBody .PotanMetricGridFour{grid-template-columns:1fr 1fr}
  .PotanPublicBody .PotanMetricGrid>article{min-height:108px;padding:17px}
  .PotanPublicBody .PotanMetricGrid article strong{font-size:27px}
  .PotanQrSafety{grid-template-columns:1fr}
  .PotanCustomerInfoGrid{grid-template-columns:1fr}
  .PotanAdminGridOrder .PotanDetailList>div{align-items:flex-start;flex-direction:column}
  .PotanAdminGridOrder .PotanDetailList>div strong{text-align:left}
}
@media(max-width:430px){
  .PotanPublicBody .PotanAccountNav{grid-template-columns:1fr}
  .PotanPublicBody .PotanMetricGridFour{grid-template-columns:1fr}
  .PotanSinglePayment{padding:15px}
  .PotanSingleQrFrame{padding:8px}
}

/* v3 final palette consistency */
.PotanPublicBody .PotanLabelRow a,
.PotanPublicBody .PotanAuthLegal a,
.PotanPublicBody .PotanAuthSwitch a,
.PotanPublicBody .PotanFormHint a{color:#75e6ff}
.PotanPublicBody .PotanLabelRow a:hover,
.PotanPublicBody .PotanAuthLegal a:hover,
.PotanPublicBody .PotanAuthSwitch a:hover,
.PotanPublicBody .PotanFormHint a:hover{color:#a8f5dc}
.PotanPublicBody .PotanInput:focus,
.PotanPublicBody .PotanTextarea:focus,
.PotanPublicBody .PotanSelect:focus,
.PotanPublicBody .PotanFileInput:focus{
  border-color:#22b8f0;
  box-shadow:0 0 0 4px rgba(34,184,240,.15),0 0 0 1px rgba(22,199,132,.22);
}
.PotanPublicBody .PotanFileInput::file-selector-button{
  color:#03110d;
  background:linear-gradient(135deg,#16c784,#7dd3fc);
  border-color:transparent;
  font-weight:700;
}
.PotanPublicBody a:focus-visible,
.PotanPublicBody button:focus-visible,
.PotanPublicBody input:focus-visible,
.PotanPublicBody select:focus-visible,
.PotanPublicBody textarea:focus-visible{
  outline:3px solid rgba(125,211,252,.75);
  outline-offset:3px;
}


/* =========================================================
   PotanSaitao v3.1.0 — strict contrast + centered popup + pro search
   Every component declares its own foreground/background pairing.
   ========================================================= */

:root{
  --potan-dark-0:#05080b;
  --potan-dark-1:#0a1016;
  --potan-dark-2:#101922;
  --potan-dark-3:#17232d;
  --potan-on-dark:#b1b1b1; /*ตรงนี้ฉันแก้* #f4fbfa;*/
  --potan-on-dark-muted:#868686;  /*ตรงนี้ฉันแก้*/
  --potan-light-0:#ffffff;
  --potan-light-1:#f6f9fc;
  --potan-on-light:#132033;
  --potan-on-light-muted:#5e6d80;
}

/* Strict public dark-surface contract. */
.PotanPublicBody :is(.PotanPanel,.PotanAccountNav,.PotanOrdersPanel,.PotanDeliveryPanel,.PotanBuyBox,.PotanOrderSummary,.PotanPaymentReview,.PotanContactCard,.PotanLegalDocument,.PotanAuthCard){
  color:var(--potan-on-dark);
  background:linear-gradient(145deg,var(--potan-dark-2),var(--potan-dark-1));
  border-color:rgba(125,211,252,.16);
}
.PotanPublicBody :is(.PotanPanel,.PotanAccountNav,.PotanOrdersPanel,.PotanDeliveryPanel,.PotanBuyBox,.PotanOrderSummary,.PotanPaymentReview,.PotanContactCard,.PotanLegalDocument,.PotanAuthCard) :is(h1,h2,h3,h4,h5,h6,strong,label,legend){color:var(--potan-on-dark)}
.PotanPublicBody :is(.PotanPanel,.PotanAccountNav,.PotanOrdersPanel,.PotanDeliveryPanel,.PotanBuyBox,.PotanOrderSummary,.PotanPaymentReview,.PotanContactCard,.PotanLegalDocument,.PotanAuthCard) :is(p,small,li,dd,.PotanMuted,.PotanFormHint){color:var(--potan-on-dark-muted)}
.PotanPublicBody :is(.PotanPanel,.PotanAccountNav,.PotanOrdersPanel,.PotanDeliveryPanel,.PotanBuyBox,.PotanOrderSummary,.PotanPaymentReview,.PotanContactCard,.PotanLegalDocument,.PotanAuthCard) a:not(.PotanButton):not(.PotanStatus){color:#7de7ff}

/* Strict public form contract on dark surfaces. */
.PotanPublicBody :is(.PotanInput,.PotanSelect,.PotanTextarea,.PotanFileInput){
  color:#f7fffd;
  caret-color:#7dd3fc;
  background:#071016;
  border-color:rgba(125,211,252,.24);
}
.PotanPublicBody :is(.PotanInput,.PotanTextarea)::placeholder{color:#a5b7bd;opacity:1}
.PotanPublicBody .PotanSelect option{color:#101827;background:#fff}
.PotanPublicBody .PotanFileInput::file-selector-button{color:#04110c;background:linear-gradient(135deg,#70e5bc,#7dd3fc)}

/* Explicit light-surface contract. */
.PotanPublicBody :is(.PotanNotice,.PotanStatus,.PotanSingleQrFrame,.PotanToast,.PotanComplianceNote,.PotanDangerPanel){color:var(--potan-on-light)}
.PotanPublicBody :is(.PotanNotice,.PotanToast,.PotanComplianceNote,.PotanDangerPanel) :is(h1,h2,h3,h4,strong,label){color:var(--potan-on-light)}
.PotanPublicBody :is(.PotanNotice,.PotanToast,.PotanComplianceNote,.PotanDangerPanel) :is(p,small,li,.PotanRichText){color:var(--potan-on-light-muted)}
.PotanPublicBody .PotanNoticeWarning{color:#5b3700;background:#fff5d8;border-color:#f2c14e}
.PotanPublicBody .PotanNoticeDanger{color:#7f1d1d;background:#fff1f2;border-color:#fda4af}
.PotanPublicBody .PotanNoticeInfo{color:#123b69;background:#eaf6ff;border-color:#7dd3fc}

/* Admin is a light application: never use pale text on pale cards. */
.PotanAdminBody :is(.PotanPanel,.PotanMetricGrid>article,.PotanTableWrap,.PotanSettingsBar,.PotanCustomerCard,.PotanInventoryCounterCard,.PotanDeliverySlotCard,.PotanAdminProof,.PotanSeoPreview,.PotanSecurityAction){color:var(--potan-on-light);background:var(--potan-light-0)}
.PotanAdminBody :is(.PotanPanel,.PotanMetricGrid>article,.PotanTableWrap,.PotanSettingsBar,.PotanCustomerCard,.PotanInventoryCounterCard,.PotanDeliverySlotCard,.PotanAdminProof,.PotanSeoPreview,.PotanSecurityAction) :is(h1,h2,h3,h4,strong,label,legend){color:var(--potan-on-light)}
.PotanAdminBody :is(.PotanPanel,.PotanMetricGrid>article,.PotanTableWrap,.PotanSettingsBar,.PotanCustomerCard,.PotanInventoryCounterCard,.PotanDeliverySlotCard,.PotanAdminProof,.PotanSeoPreview,.PotanSecurityAction) :is(p,small,span:not(.PotanStatus):not(.PotanBadgeAlert),li,td,th){color:#000000;}
.PotanAdminBody :is(.PotanInput,.PotanSelect,.PotanTextarea,.PotanFileInput){color:#172033;background:#fff;border-color:#c9d4e2}
.PotanAdminBody :is(.PotanInput,.PotanTextarea)::placeholder{color:#6d7b8d;opacity:1}
.PotanAdminBody .PotanTable thead th{color:#344359;background:#edf3f8}
.PotanAdminBody .PotanTable tbody td{color:#1e2d42;background:#fff}
.PotanAdminBody .PotanTable tbody tr:hover td{background:#f0faf7}

/* Centered popup: no side slide, no off-screen transform. */
.PotanModal{
  position:fixed;
  z-index:2000;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;
  padding:clamp(16px,4vw,40px);
  overscroll-behavior:contain;
}
.PotanModalBackdrop{position:fixed;inset:0;background:rgba(1,7,10,.82);backdrop-filter:blur(10px)}
.PotanModalCard{
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  width:min(620px,100%);
  max-height:min(760px,calc(100dvh - 32px));
  margin:auto;
  overflow:auto;
  padding:clamp(28px,5vw,48px);
  color:var(--potan-on-dark);
  text-align:center;
  border:1px solid rgba(125,211,252,.24);
  border-radius:28px;
  background:linear-gradient(150deg,#132029,#091117 72%);
  box-shadow:0 40px 120px rgba(0,0,0,.62),0 0 0 1px rgba(22,199,132,.08) inset;
  opacity:0;
  transform:scale(.96);
  transition:opacity .22s ease,transform .22s ease;
  animation:none;
}
.PotanModal.is-open .PotanModalCard{opacity:1;transform:scale(1)}
.PotanModalIcon{display:grid;place-items:center;width:68px;height:68px;margin-bottom:20px;color:#03110c;border-radius:22px;background:linear-gradient(135deg,#16c784,#7dd3fc);box-shadow:0 18px 45px rgba(22,199,132,.23)}
.PotanModalIcon svg{width:30px;height:30px}
.PotanModalContent{width:100%}
.PotanModalCard .PotanEyebrow{color:#7de7ff}
.PotanModalCard h2{margin:12px 0 14px;color:#f8fffd;font-size:clamp(27px,5vw,38px);line-height:1.25}
.PotanModalCard .PotanRichText{color:#c4d3d7;font-size:16px;line-height:1.85;overflow-wrap:anywhere}
.PotanModalActions{display:grid;width:100%;gap:10px;margin-top:26px}
.PotanModalClose{right:16px;top:16px;color:#d8e6e8;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10)}
.PotanModalClose:hover{color:#04110c;background:#7dd3fc}
.PotanModalCard .PotanButtonGhost{color:#bfeff8;border-color:rgba(125,211,252,.25)}

/* Full professional search console. */
.PotanSearchConsole{
  display:grid;
  gap:22px;
  margin-bottom:38px;
  padding:clamp(22px,4vw,34px);
  color:var(--potan-on-dark);
  border:1px solid rgba(125,211,252,.17);
  border-radius:26px;
  background:linear-gradient(145deg,#121c24,#091117);
  box-shadow:0 26px 72px rgba(0,0,0,.31);
}
.PotanSearchConsoleHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.PotanSearchConsoleHeader h2{margin:8px 0 4px;color:#f8fffd;font-size:clamp(25px,3.5vw,38px);line-height:1.25}
.PotanSearchConsoleHeader p{margin:0;color:#afc0c5}
.PotanSearchResultBadge{display:flex;align-items:center;gap:11px;min-width:max-content;padding:12px 15px;color:#cfeaed;border:1px solid rgba(125,211,252,.17);border-radius:15px;background:rgba(34,184,240,.07)}
.PotanSearchResultBadge svg{color:#7dd3fc}.PotanSearchResultBadge strong{color:#7df0c2;font-size:22px}
.PotanCatalogToolbar{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(210px,.75fr) auto;gap:14px;align-items:end;margin:0}
.PotanSearchField,.PotanSearchSelectField{display:grid;gap:8px;max-width:none}
.PotanFieldLabel{color:#d8e6e8;font-size:12px;font-weight:700;letter-spacing:.04em}
.PotanSearchInputWrap{position:relative;display:block}
.PotanSearchInputWrap svg{position:absolute;z-index:2;left:17px;top:50%;width:20px;height:20px;color:#7dd3fc;transform:translateY(-50%);pointer-events:none}
.PotanSearchInputWrap .PotanInput{min-height:56px;padding:13px 18px 13px 51px;border-radius:14px;background:#061017}
.PotanSearchSelectField .PotanSelect{min-height:56px;border-radius:14px;background:#061017}
.PotanSearchSubmit{min-height:56px;padding-inline:24px;border-radius:14px;white-space:nowrap}
.PotanSearchQuickFilters{display:flex;flex-wrap:wrap;gap:9px;padding-top:1px}
.PotanSearchQuickFilters a{display:inline-flex;align-items:center;min-height:38px;padding:8px 13px;color:#b9c9ce;border:1px solid rgba(125,211,252,.13);border-radius:999px;background:rgba(255,255,255,.035);font-size:13px;transition:.2s ease}
.PotanSearchQuickFilters a:hover,.PotanSearchQuickFilters a.active{color:#03110c;border-color:transparent;background:linear-gradient(135deg,#16c784,#7dd3fc);font-weight:700}
.PotanCatalogResult{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-top:16px;color:#9fb2b8;border-top:1px solid rgba(125,211,252,.11);white-space:normal}
.PotanCatalogResult strong{color:#f3fbfa}.PotanCatalogResult a{margin-left:auto;color:#7de7ff;font-weight:700}

/* Comfortable catalog rhythm. */
.PotanLuxuryProductGrid,.PotanProductGrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));column-gap:36px;row-gap:44px}
.PotanCatalogCard{height:100%}.PotanCatalogCard .PotanProductBody{height:100%}

/* Accessible status chips retain their own dark text on light backgrounds. */
.PotanPublicBody .PotanStatus-success,.PotanPublicBody .PotanStatus-paid,.PotanPublicBody .PotanStatus-delivered,.PotanPublicBody .PotanStatus-active,.PotanPublicBody .PotanStatus-done,.PotanPublicBody .PotanStatus-ok{color:#046c50}
.PotanPublicBody .PotanStatus-warning,.PotanPublicBody .PotanStatus-waiting,.PotanPublicBody .PotanStatus-pending,.PotanPublicBody .PotanStatus-reserved{color:#865400}
.PotanPublicBody .PotanStatus-danger,.PotanPublicBody .PotanStatus-rejected,.PotanPublicBody .PotanStatus-cancelled,.PotanPublicBody .PotanStatus-expired,.PotanPublicBody .PotanStatus-blocked,.PotanPublicBody .PotanStatus-fail{color:#a51624}

@media(max-width:900px){
  .PotanSearchConsoleHeader{align-items:flex-start;flex-direction:column}
  .PotanCatalogToolbar{grid-template-columns:1fr 1fr}
  .PotanSearchField{grid-column:1/-1}
  .PotanSearchSubmit{width:100%}
}
@media(max-width:640px){
  .PotanSearchConsole{padding:20px 16px;border-radius:20px}
  .PotanCatalogToolbar{grid-template-columns:1fr}
  .PotanSearchField{grid-column:auto}
  .PotanCatalogResult a{width:100%;margin-left:0}
  .PotanModal{padding:12px}
  .PotanModalCard{max-height:calc(100dvh - 24px);padding:32px 20px 24px;border-radius:22px}
  .PotanModalIcon{width:58px;height:58px;border-radius:18px}
  .PotanLuxuryProductGrid,.PotanProductGrid{row-gap:32px}
}

@media(prefers-reduced-motion:reduce){
  .PotanModalCard,.PotanSearchQuickFilters a{transition:none!important}
}