/* SaaS pastel theme: cream + mint + lavender + apricot. Pink is intentionally not a primary color. */
:root {
  --green: #57a995;
  --green-d: #377f70;
  --green-l: #edf8f4;
  --green-m: #c9eadf;
  --bg: #f8f6f1;
  --white: #fffefa;
  --text: #3f4652;
  --muted: #7d8492;
  --border: #e5e1d9;
  --r: 13px;
  --r-lg: 19px;
  --shadow: 0 8px 24px rgba(78, 91, 102, .07), 0 2px 7px rgba(78, 91, 102, .04);

  --ivory: #fbf8f1;
  --ivory-2: #f4efe4;
  --ivory-3: #e9e1d2;
  --milk-tea: #d2a36f;
  --milk-tea-d: #a86f3f;
  --milk-tea-l: #f3d9b8;
  --purple: #8a7fc2;
  --purple-d: #645a9a;
  --purple-l: #eeebfa;
  --ink: #414652;
  --ink-soft: #686f7c;
  --success: #57a995;
  --success-l: #edf8f4;
}

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 8% 8%, rgba(138, 127, 194, .10), transparent 24%),
    radial-gradient(circle at 92% 16%, rgba(241, 187, 116, .12), transparent 25%),
    radial-gradient(circle at 76% 92%, rgba(87, 169, 149, .10), transparent 27%);
  background-attachment: fixed;
}

.storefront-launch{min-height:40px;padding:8px 14px;border:1px solid #9bd9c5;border-radius:999px;background:linear-gradient(135deg,#e7f8f1,#fff4d9);color:#246957;font:700 14px/1 inherit;cursor:pointer;box-shadow:0 5px 14px rgba(72,150,124,.13)}
.storefront-launch:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(72,150,124,.2)}
.storefront-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px;padding:18px 20px;border:1px solid #b9e1d4;border-radius:20px;background:linear-gradient(135deg,#eefaf5 0%,#fff8e8 58%,#f2edff 100%);box-shadow:0 8px 24px rgba(60,125,105,.09)}
.storefront-banner strong{display:block;color:#246957;font-size:18px;margin-bottom:4px}
.storefront-banner span{display:block;color:#65726e;font-size:13px}
.storefront-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.storefront-home-tile small{display:block;margin-top:3px;color:#71807b;font-size:10px;line-height:1.3}

@media(max-width:768px){
  .storefront-launch{min-height:42px;padding:8px 11px;font-size:13px;white-space:nowrap}
  .storefront-launch span{display:inline}
  nav.sidebar .stab.storefront-tab{display:flex!important}
  .storefront-banner{align-items:stretch;flex-direction:column;padding:16px;border-radius:16px}
  .storefront-banner strong{font-size:17px}
  .storefront-banner span{font-size:14px;line-height:1.55}
  .storefront-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .storefront-actions .btn{min-height:46px;font-size:14px}
}

#appPage::before { opacity: 0 !important; background-image: none !important; }

.hero {
  background: rgba(255, 254, 250, .91) !important;
  border-bottom: 1px solid rgba(87, 169, 149, .20) !important;
  box-shadow: 0 5px 22px rgba(72, 87, 96, .07) !important;
  backdrop-filter: blur(14px);
}

.hero-logo-img-wrap::before,
.brand-mark::after {
  content: '✦';
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, #73bea9, #8a7fc2);
  box-shadow: 0 5px 14px rgba(100, 90, 154, .20);
}

.brand-mark::after { width: 100%; height: 100%; border-radius: inherit; }
.brand-mark > * { display: none; }

.sidebar,
.mobile-cat-list,
.mobile-cat-trigger {
  background: rgba(255, 254, 250, .92) !important;
  border-color: rgba(138, 127, 194, .16) !important;
  box-shadow: 0 10px 30px rgba(78, 91, 102, .06) !important;
}

.stab,
.cat-item { border-radius: 13px !important; }
.stab:hover,
.cat-item:hover { background: #f4f0fb !important; }
.stab.on,
.cat-item.on {
  color: #4c746b !important;
  background: linear-gradient(100deg, #e5f5ef, #f1eefb) !important;
  box-shadow: inset 0 0 0 1px rgba(87, 169, 149, .12);
}
.cat-item.on::before { background: #57a995 !important; }

.page { max-width: 1540px; margin: 0 auto; }
.card,
.product-card {
  background: rgba(255, 254, 250, .96) !important;
  border: 1px solid rgba(125, 132, 146, .14) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow) !important;
}
.card { position: relative; overflow: hidden; }
.card::after {
  content: '';
  position: absolute;
  width: 90px;
  height: 90px;
  right: -42px;
  top: -48px;
  border-radius: 50%;
  background: rgba(138, 127, 194, .055);
  pointer-events: none;
}

.ct { border-left: 0 !important; padding-left: 0 !important; gap: 9px !important; }
.ct::before {
  content: '•' !important;
  display: inline-grid !important;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(145deg, #73bea9, #8a7fc2);
  font-size: 18px;
  line-height: 1;
}

textarea,
input,
select {
  background: #fffefa !important;
  border-color: #dedbd4 !important;
  border-radius: 13px !important;
}
textarea:focus,
input:focus,
select:focus {
  border-color: #73b7a6 !important;
  box-shadow: 0 0 0 4px rgba(87, 169, 149, .12) !important;
}

.btn { border-radius: 13px !important; }
.btn-green,
.btn-primary {
  background: linear-gradient(135deg, #67b7a3, #529b8b) !important;
  color: #fff !important;
  box-shadow: 0 5px 13px rgba(55, 127, 112, .18) !important;
}
.btn-green:hover,
.btn-primary:hover { background: linear-gradient(135deg, #56a895, #3f8879) !important; }
.btn-outline { background: #fffefa !important; }
.btn-outline:hover { color: #645a9a !important; border-color: #aaa1d4 !important; background: #f4f1fb !important; }
.btn-blue { color: #645a9a !important; background: #f0edfa !important; border-color: #d8d2ef !important; }
.btn-warm { background: #d69a5c !important; }

thead th {
  background: #f3f0e9 !important;
  border-bottom-color: #9d93c9 !important;
}
tbody tr:hover { background: #f1f8f5 !important; }
.stat { background: linear-gradient(145deg, #eef8f4, #f2effa) !important; border: 1px solid rgba(87, 169, 149, .11); }
.tag-green { background: #e2f3ec !important; color: #377f70 !important; }
.tag-blue { background: #eeebfa !important; color: #645a9a !important; }
.tag-warn { background: #fff1dd !important; color: #a36331 !important; }

.product-card:hover {
  transform: translateY(-5px) rotate(-.15deg) !important;
  border-color: rgba(138, 127, 194, .34) !important;
  box-shadow: 0 16px 34px rgba(78, 91, 102, .13) !important;
}
.product-img-wrap,
.product-img-placeholder { background: linear-gradient(145deg, #f3eee3, #edeafa) !important; }
.product-price { color: #645a9a !important; }
.cat-count { background: #f0ecdf !important; }
.cat-item.on .cat-count { background: #8a7fc2 !important; }

.mbox {
  background: #fffefa !important;
  border: 1px solid rgba(138, 127, 194, .18);
  border-radius: 22px !important;
  box-shadow: 0 24px 70px rgba(63, 70, 82, .20);
}

@media (max-width: 700px) {
  html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }
  body {
    font-size: 16px !important;
    line-height: 1.7 !important;
    padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }

  .hero {
    min-height: 62px !important;
    padding: 8px 12px !important;
  }
  .hero-inner { min-height: 54px !important; }
  .hero-logo-img-wrap::before { width: 34px; height: 34px; flex-basis: 34px; font-size: 17px; }
  .hero-logo-text .title,
  .brand-text h1 { font-size: 18px !important; }
  .hero-logo-text .subtitle,
  .brand-text p { font-size: 12px !important; }
  .user-name { font-size: 14px !important; max-width: 92px !important; }
  .logout-btn { min-height: 42px !important; padding: 8px 11px !important; font-size: 14px !important; }

  .page,
  .layout {
    padding: 14px 12px 24px !important;
    width: 100% !important;
  }
  .layout { display: block !important; }
  .main-content { width: 100% !important; }
  .card {
    border-radius: 17px !important;
    padding: 18px 15px !important;
    margin-bottom: 14px !important;
    overflow: visible !important;
  }
  .ct,
  .section-header h2 {
    font-size: 19px !important;
    line-height: 1.4 !important;
    margin-bottom: 14px !important;
  }
  .fl,
  .hint,
  .preview-info,
  .section-header .count { font-size: 14px !important; }

  textarea,
  input:not([type='checkbox']):not([type='radio']):not([type='file']),
  select {
    min-height: 50px !important;
    padding: 12px 13px !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
  textarea { min-height: 118px !important; }
  input[type='checkbox'],
  input[type='radio'] {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }
  input[type='file'] {
    width: 100% !important;
    min-height: 50px !important;
    padding: 10px !important;
    font-size: 15px !important;
    background: #fffefa;
    border: 1px dashed #aaa1d4;
    border-radius: 13px;
  }

  .btn,
  button.btn {
    min-height: 48px !important;
    padding: 11px 16px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    touch-action: manipulation;
  }
  .btn-row { gap: 9px !important; }
  .btn-row > .btn { flex: 1 1 calc(50% - 9px); }
  .fr2,
  .fr3,
  .grid2 { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* The admin navigation becomes a thumb-friendly bottom bar. */
  html body .app-body nav.sidebar,
  nav.sidebar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: calc(72px + env(safe-area-inset-bottom)) !important;
    min-height: 72px !important;
    padding: 7px 7px env(safe-area-inset-bottom) !important;
    z-index: 450 !important;
    border: 0 !important;
    border-top: 1px solid rgba(87, 169, 149, .18) !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -8px 28px rgba(63, 70, 82, .11) !important;
    overflow: hidden !important;
  }
  html body .app-body nav.sidebar .snav,
  nav.sidebar .snav {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 58px !important;
    gap: 5px !important;
    padding: 0 !important;
    overflow-x: auto !important;
  }
  html body .app-body nav.sidebar .stab,
  nav.sidebar .stab {
    flex: 1 0 62px !important;
    min-width: 62px !important;
    min-height: 56px !important;
    padding: 6px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }
  html body .app-body nav.sidebar .stab span:not(.sicon),
  nav.sidebar .stab span:not(.sicon) {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
  nav.sidebar .stab .sicon svg { width: 23px !important; height: 23px !important; }
  nav.sidebar .stab.on { background: linear-gradient(145deg, #67b7a3, #8277b8) !important; color: #fff !important; }

  /* Tables already become cards in the app; these rules keep every card readable. */
  .tw { overflow-x: visible !important; }
  table { font-size: 15px !important; }
  tbody td { font-size: 15px !important; line-height: 1.55 !important; }
  #orderList tbody tr,
  #productList tbody tr,
  #memberList tbody tr,
  #pendingList tbody tr,
  #purchaseList tbody tr {
    border-radius: 17px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    background: #fffefa !important;
    border: 1px solid rgba(125, 132, 146, .14) !important;
    box-shadow: 0 6px 18px rgba(78, 91, 102, .06) !important;
  }
  #productList td,
  #orderList td,
  #memberList td { font-size: 15px !important; }
  #productList td .btn,
  #orderList td .btn,
  #memberList td .btn {
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 9px 11px !important;
  }

  .stats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
  .stat { min-width: 0 !important; padding: 14px 8px !important; }
  .stat .n { font-size: 22px !important; }
  .stat .l { font-size: 13px !important; }

  .mbox {
    width: calc(100% - 18px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 18px) !important;
    padding: 20px 15px !important;
    border-radius: 22px !important;
  }
  .mfoot { position: sticky; bottom: -20px; background: #fffefa; padding: 12px 0 4px !important; }
  .mfoot .btn { flex: 1; }

  .product-card { border-radius: 17px !important; }
  .product-info { padding: 15px !important; }
  .product-name { font-size: 16px !important; min-height: auto !important; }
  .product-price { font-size: 23px !important; }
  .product-specs { font-size: 13px !important; }
  .mobile-cat-trigger { min-height: 52px !important; font-size: 16px !important; }
  .cat-item { min-height: 48px !important; font-size: 16px !important; }
}

@media (max-width: 430px) {
  .products-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .product-img-wrap { aspect-ratio: 4 / 3 !important; }
  .btn-row > .btn { flex-basis: 100%; }
}