@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/*
 * WPOS Premium Visual System 2026
 * A reversible presentation layer shared by the public site, authentication,
 * Owner, POS, Admin, and Crenova surfaces. Loaded last by design.
 */

:root {
  --wpos-ink: #171219;
  --wpos-ink-soft: #2a222c;
  --wpos-plum: #211620;
  --wpos-plum-deep: #120d13;
  --wpos-paper: #f5f2ee;
  --wpos-paper-soft: #fbf9f6;
  --wpos-surface: #ffffff;
  --wpos-line: rgba(31, 22, 31, .11);
  --wpos-line-strong: rgba(31, 22, 31, .18);
  --wpos-muted: #736b75;
  --wpos-red: #d71f2b;
  --wpos-red-dark: #b91420;
  --wpos-red-soft: #fff0f1;
  --wpos-yellow: #f6bd16;
  --wpos-green: #087b61;
  --wpos-display: "Manrope", "Plus Jakarta Sans", system-ui, sans-serif;
  --wpos-body: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wpos-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --wpos-radius-sm: 12px;
  --wpos-radius-md: 18px;
  --wpos-radius-lg: 28px;
  --wpos-shadow-sm: 0 1px 2px rgba(25, 17, 25, .04), 0 12px 32px rgba(25, 17, 25, .055);
  --wpos-shadow-lg: 0 30px 90px rgba(15, 9, 15, .20);
}

html {
  accent-color: var(--wpos-red);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
  font-family: var(--wpos-body) !important;
}

::selection {
  color: #fff;
  background: var(--wpos-red);
}

:focus-visible {
  outline: 3px solid rgba(215, 31, 43, .24);
  outline-offset: 3px;
}

/* Public product page */
body:has(.site-frame) {
  color: var(--wpos-ink);
  background: var(--wpos-paper);
}

.site-frame {
  background:
    radial-gradient(circle at 78% 3%, rgba(246, 189, 22, .08), transparent 24rem),
    var(--wpos-paper);
}

.site-frame .topbar {
  min-height: 76px;
  padding-inline: clamp(24px, 4vw, 54px);
  background: rgba(18, 13, 19, .94);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(20px) saturate(1.18);
}

.site-frame .brand img {
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .18));
}

.site-frame .desktop-tabs {
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 15px;
  background: rgba(255, 255, 255, .035);
}

.site-frame .desktop-tab {
  min-height: 38px;
  padding-inline: 15px;
  border-radius: 10px;
  color: rgba(255, 255, 255, .60);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.site-frame .desktop-tab:hover { color: #fff; }

.site-frame .desktop-tab[aria-selected="true"] {
  color: #fff;
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 -2px 0 var(--wpos-yellow);
}

.site-frame .btn {
  min-height: 48px;
  padding: 13px 18px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
  box-shadow: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.site-frame .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 35px rgba(23, 18, 25, .13);
}

.site-frame .btn-primary {
  color: #fff;
  background: var(--wpos-red);
  border-color: var(--wpos-red);
}

.site-frame .btn-primary:hover {
  background: var(--wpos-red-dark);
  border-color: var(--wpos-red-dark);
}

.site-frame .overview-grid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(58px, 7vw, 104px) clamp(24px, 4.2vw, 58px) clamp(48px, 6vw, 84px);
  background:
    linear-gradient(rgba(23, 18, 25, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 18, 25, .035) 1px, transparent 1px),
    radial-gradient(circle at 83% 22%, rgba(215, 31, 43, .10), transparent 19rem),
    linear-gradient(145deg, #f9f7f4 0%, #f2eef1 100%);
  background-size: 32px 32px, 32px 32px, auto, auto;
  border-bottom: 1px solid var(--wpos-line);
}

.site-frame .overview-grid::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -110px;
  right: -90px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(215, 31, 43, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 46px rgba(215, 31, 43, .025), 0 0 0 92px rgba(246, 189, 22, .025);
}

.site-frame .overview-copy::before {
  content: "WPOS / MULTI-INDUSTRY OS";
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 20px;
  padding: 6px 10px;
  border: 1px solid rgba(215, 31, 43, .18);
  border-radius: 999px;
  color: var(--wpos-red);
  background: rgba(255, 255, 255, .64);
  font-family: var(--wpos-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}

.site-frame .overview-copy h1,
.site-frame .view-head h2,
.site-frame .home-section h2,
.site-frame .home-final h2 {
  font-family: var(--wpos-display);
  color: var(--wpos-ink);
  font-weight: 800;
  letter-spacing: -.065em;
}

.site-frame .overview-copy h1 {
  max-width: 760px;
  font-size: clamp(52px, 6.35vw, 92px);
  line-height: .98;
}

.site-frame .overview-copy .accent { color: var(--wpos-red); }

.site-frame .hero-copy {
  max-width: 690px;
  color: #69616b;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.65;
}

.site-frame .trust-line {
  gap: 10px 18px;
  color: #5f5861;
  font-size: 11px;
  font-weight: 700;
}

.site-frame .trust-line i {
  color: #fff;
  background: var(--wpos-green);
  box-shadow: 0 0 0 4px rgba(8, 123, 97, .08);
}

.site-frame .ops-window {
  border: 1px solid rgba(31, 22, 31, .12);
  border-radius: 28px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 34px 85px rgba(31, 22, 31, .15), 0 3px 0 rgba(255, 255, 255, .88) inset;
  backdrop-filter: blur(18px);
  transform: rotate(.35deg);
}

.site-frame .ops-window::after {
  content: "LIVE";
  position: absolute;
  top: 17px;
  right: 18px;
  color: var(--wpos-red);
  font-family: var(--wpos-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .13em;
}

.site-frame .metric,
.site-frame .order-panel {
  border-color: var(--wpos-line);
  border-radius: 16px;
}

.site-frame .metric.featured {
  background: linear-gradient(145deg, #e42834, #c61622);
  box-shadow: 0 16px 34px rgba(198, 22, 34, .22);
}

.site-frame .foundation-strip,
.site-frame .home-section,
.site-frame .home-final {
  border-color: var(--wpos-line);
}

.site-frame .home-section {
  padding-block: clamp(58px, 7vw, 98px);
}

.site-frame .home-section-head .lead,
.site-frame .view-head .lead { color: var(--wpos-muted); }

.site-frame .home-flow-card,
.site-frame .home-feature-card,
.site-frame .module-card,
.site-frame .audience-item {
  border-color: var(--wpos-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--wpos-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.site-frame .home-flow-card:hover,
.site-frame .home-feature-card:hover,
.site-frame .module-card:hover,
.site-frame .audience-item:hover {
  transform: translateY(-4px);
  border-color: rgba(215, 31, 43, .24);
  box-shadow: 0 24px 50px rgba(31, 22, 31, .10);
}

.site-frame .audience-index,
.site-frame .module-no,
.site-frame .eyebrow {
  color: var(--wpos-red);
  font-family: var(--wpos-mono);
}

.site-frame .audience-meta {
  color: var(--wpos-red-dark);
  background: var(--wpos-red-soft);
  border-color: rgba(215, 31, 43, .12);
}

.site-frame .home-audience-section h2 { color: #fff; }

.site-frame .home-audience-section .lead {
  color: rgba(255, 255, 255, .64);
}

.site-frame .home-audience-section .audience-item {
  color: var(--wpos-ink);
  background: rgba(255, 255, 255, .94);
}

.site-frame .home-audience-section .audience-item strong {
  color: var(--wpos-ink);
}

.site-frame .home-audience-section .audience-desc {
  color: var(--wpos-muted);
}

.site-frame .home-final {
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 0%, rgba(246, 189, 22, .17), transparent 18rem),
    linear-gradient(135deg, var(--wpos-plum) 0%, var(--wpos-plum-deep) 100%);
  box-shadow: 0 28px 70px rgba(18, 13, 19, .18);
}

.site-frame .home-final h2,
.site-frame .home-final p,
.site-frame .home-final .eyebrow { color: #fff; }

/* Authentication and onboarding */
body:has(.auth-shell) {
  min-width: 320px;
  color: var(--wpos-ink);
  background:
    radial-gradient(circle at 14% 8%, rgba(215, 31, 43, .22), transparent 28rem),
    radial-gradient(circle at 88% 92%, rgba(246, 189, 22, .12), transparent 26rem),
    linear-gradient(145deg, #130e14 0%, #251823 56%, #100c12 100%);
}

.auth-shell {
  position: relative;
  isolation: isolate;
  padding: clamp(22px, 4vw, 54px);
}

.auth-shell::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

.auth-card {
  position: relative;
  overflow: hidden;
  width: min(520px, 100%);
  padding: clamp(30px, 4vw, 48px);
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: var(--wpos-radius-lg);
  color: var(--wpos-ink);
  background: rgba(253, 252, 250, .97);
  box-shadow: var(--wpos-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .88);
  backdrop-filter: blur(24px);
}

.auth-card:has(.industry-picker) { width: min(780px, 100%); }

.auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--wpos-red) 0 64%, var(--wpos-yellow) 64% 100%);
}

.auth-logo {
  width: 190px !important;
  max-width: 54% !important;
  max-height: none !important;
  margin: 0 0 28px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.pill {
  gap: 8px;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(215, 31, 43, .14);
  border-radius: 999px;
  color: var(--wpos-red);
  background: var(--wpos-red-soft);
  font-family: var(--wpos-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}

.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(215, 31, 43, .08);
}

.auth-card h1 {
  margin: 18px 0 10px;
  color: var(--wpos-ink);
  font-family: var(--wpos-display) !important;
  font-size: clamp(31px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.055em;
}

.auth-card > p,
.auth-card form + p {
  color: var(--wpos-muted);
  font-size: 14px;
  line-height: 1.75;
}

.auth-card:has(.industry-picker) form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 18px;
}

.auth-card:has(.industry-picker) form > .form-group:has(.industry-picker),
.auth-card:has(.industry-picker) form > .form-group:last-of-type,
.auth-card:has(.industry-picker) form > .btn-main {
  grid-column: 1 / -1;
}

.form-group { margin: 17px 0; }

.form-group label {
  margin-bottom: 8px;
  color: #615963;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.input {
  min-height: 52px;
  padding: 13px 15px;
  border: 1px solid var(--wpos-line-strong);
  border-radius: 13px;
  color: var(--wpos-ink);
  background: rgba(255, 255, 255, .90);
  font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(23, 18, 25, .02);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.input:hover { border-color: rgba(31, 22, 31, .28); }

.input:focus {
  border-color: rgba(215, 31, 43, .72);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(215, 31, 43, .09);
}

.industry-picker {
  gap: 12px;
  margin: 10px 0 8px;
}

.industry-option {
  min-height: 138px;
  padding: 18px;
  border: 1px solid var(--wpos-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 8px 22px rgba(31, 22, 31, .035);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.industry-option:hover {
  transform: translateY(-2px);
  border-color: rgba(215, 31, 43, .32);
  box-shadow: 0 18px 34px rgba(31, 22, 31, .08);
}

.industry-option input {
  inset: 18px 18px auto auto;
  width: 16px;
  height: 16px;
  accent-color: var(--wpos-red);
}

.industry-option:has(input:checked) {
  border-color: var(--wpos-red);
  background: linear-gradient(145deg, #fff 0%, #fff7f7 100%);
  box-shadow: 0 0 0 4px rgba(215, 31, 43, .08), 0 18px 34px rgba(31, 22, 31, .07);
}

.industry-option.is-disabled {
  opacity: .54;
  background: #f3f1ef;
}

.industry-option strong {
  margin-bottom: 7px;
  color: var(--wpos-ink);
  font-family: var(--wpos-display);
  font-size: 15px;
  letter-spacing: -.025em;
}

.industry-option small {
  color: var(--wpos-muted);
  font-size: 11px;
  line-height: 1.55;
}

.industry-option span {
  margin-top: 12px;
  color: var(--wpos-red-dark);
  font-family: var(--wpos-mono);
  font-size: 8px;
  letter-spacing: .11em;
}

.btn-main {
  min-height: 54px;
  margin-top: 7px;
  border-radius: 14px;
  color: #fff;
  background: var(--wpos-red);
  box-shadow: 0 14px 30px rgba(215, 31, 43, .22);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.015em;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.btn-main:hover {
  transform: translateY(-2px);
  background: var(--wpos-red-dark);
  box-shadow: 0 20px 38px rgba(185, 20, 32, .26);
}

.btn-main:active { transform: translateY(0); }
.link { color: var(--wpos-red-dark); }

.alert,
.demo-box { border-radius: 14px; }

/* Authenticated application shell */
.sidebar {
  background:
    radial-gradient(circle at 18% 0%, rgba(215, 31, 43, .16), transparent 18rem),
    linear-gradient(180deg, var(--wpos-plum) 0%, var(--wpos-plum-deep) 100%);
  border-right-color: rgba(255, 255, 255, .075);
}

.panel-brand-title,
.top-title h1,
.card h1,
.card h2,
.card h3,
.section-heading h2,
.section-heading h3 {
  font-family: var(--wpos-display) !important;
}

.panel-brand-title { letter-spacing: -.025em; }

.industry-context-pill {
  border-color: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .74);
  background: rgba(255, 255, 255, .065);
  font-family: var(--wpos-mono);
}

.nav a,
.nav-disabled { border-radius: 12px; }

.nav a.active {
  background: linear-gradient(90deg, rgba(215, 31, 43, .17), rgba(255, 255, 255, .06));
  box-shadow: inset 3px 0 0 var(--wpos-red);
}

.nav a.active .dot {
  background: var(--wpos-red);
  box-shadow: 0 0 0 4px rgba(215, 31, 43, .14);
}

body:not(:has(.site-frame)):not(:has(.auth-shell)) .topbar.panel-topbar,
body:not(:has(.site-frame)):not(:has(.auth-shell)) .topbar:not(.topbar-pos-kiosk):not(.topbar-kitchen-kiosk) {
  background: rgba(245, 242, 238, .90);
  border-bottom-color: var(--wpos-line);
}

.content:not(.content-pos-kiosk):not(.content-kitchen-kiosk) {
  background:
    radial-gradient(circle at 96% 0%, rgba(215, 31, 43, .035), transparent 24rem),
    transparent;
}

.card,
.metric,
.executive-kpi,
.user-pill,
.panel-scope-switcher {
  border-color: var(--wpos-line);
  background-color: rgba(255, 255, 255, .92);
  box-shadow: var(--wpos-shadow-sm);
}

.card { border-radius: 20px; }

.metric,
.executive-kpi {
  background: linear-gradient(145deg, #fff 0%, var(--wpos-paper-soft) 100%);
}

.metric-value,
.executive-kpi strong,
.kpi-value,
.customer-value-bridge strong,
.payment-total-hero strong,
.pos-cart-total strong,
.kds-stat-card strong {
  font-family: var(--wpos-mono);
}

.btn-primary {
  background: var(--wpos-ink);
  border-color: var(--wpos-ink);
}

.btn-primary:hover {
  background: var(--wpos-red);
  border-color: var(--wpos-red);
}

.form-control:focus,
.select:focus,
.input:focus {
  border-color: rgba(215, 31, 43, .62);
  box-shadow: 0 0 0 4px rgba(215, 31, 43, .08);
}

@media (max-width: 900px) {
  .site-frame .overview-grid { padding-top: 46px; }
  .site-frame .ops-window { transform: none; }
}

@media (max-width: 700px) {
  .auth-card:has(.industry-picker) form { grid-template-columns: 1fr; }
  .auth-card:has(.industry-picker) form > * { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .site-frame .overview-grid {
    padding: 34px 20px 42px;
    background-size: 26px 26px, 26px 26px, auto, auto;
  }

  .site-frame .overview-copy::before {
    margin-bottom: 16px;
    font-size: 8px;
  }

  .site-frame .overview-copy h1 {
    font-size: clamp(44px, 14vw, 62px);
    line-height: .99;
  }

  .site-frame .hero-copy { font-size: 14px; }
  .site-frame .home-section { padding-block: 50px; }

  .auth-shell { padding: 16px; }
  .auth-card { padding: 28px 24px; border-radius: 22px; }
  .auth-logo { width: 164px; margin-bottom: 22px; }
  .auth-card h1 { font-size: 31px; }
  .industry-option { min-height: 126px; padding: 16px; }
}

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