:root {
  --bg: #f7f3ea;
  --panel: #fffdf8;
  --ink: #272522;
  --muted: #746f66;
  --line: rgba(39, 37, 34, 0.12);
  --brand: #1f7a5a;
  --brand-2: #d99a2b;
  --danger: #b34235;
  --blue: #3867b7;
  --shadow: 0 18px 50px rgba(39, 37, 34, 0.1);
  --radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}
button, input, select, textarea { font: inherit; }
button, a { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.kicker {
  color: var(--brand);
  display: inline-block;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2.4rem, 7vw, 5.4rem); line-height: .92; margin-bottom: 10px; }
h2 { font-size: clamp(1.35rem, 3vw, 2.1rem); line-height: 1; margin-bottom: 10px; }
h3 { margin-bottom: 8px; }
p { color: var(--muted); line-height: 1.55; }

button, .top-actions a, .top-actions > summary, .top-dropdown summary, .home-actions a {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  font-weight: 800;
}
.primary {
  border-color: var(--brand);
  background: var(--brand);
  color: white;
}
.danger, .alert.danger {
  border-color: rgba(179, 66, 53, .26);
  background: rgba(179, 66, 53, .08);
  color: var(--danger);
}
.icon-button { width: 42px; padding: 0; font-size: 1.25rem; }

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  padding: 12px;
}
label {
  color: var(--muted);
  display: grid;
  gap: 7px;
  font-size: .82rem;
  font-weight: 800;
}
.check {
  display: flex;
  align-items: center;
  gap: 10px;
}
.check input { width: auto; }

.home-page, .login-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 22px;
}
.home-shell { width: min(920px, 100%); }
.login-shell { width: min(460px, 100%); }
.home-hero, .login-card, .form-card, .side-panel, .main-panel, .stats-row article, .locked-card, .cart-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, .88);
  box-shadow: var(--shadow);
}
.home-hero, .login-card { padding: clamp(26px, 6vw, 56px); }
.login-card {
  width: 100%;
  margin: auto;
  display: grid;
  gap: 16px;
}
.login-card h1 {
  font-size: clamp(3rem, 10vw, 4rem);
  line-height: 1;
  margin-bottom: 4px;
}
.login-card small { color: var(--muted); }
.login-footer {
  margin-top: 16px;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 700;
  text-align: center;
}
.login-footer a {
  color: var(--brand);
  font-weight: 900;
}
.login-page {
  position: relative;
  overflow-x: hidden;
  isolation: isolate;
  background: #07111d;
  color: #f9f3e7;
}
.login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(110deg, rgba(7,17,29,.96), rgba(19,27,37,.86) 46%, rgba(34,28,22,.76)),
    url("../img/hero-bakery.webp") center / cover no-repeat;
  filter: saturate(.85);
  transform: scale(1.02);
}
.login-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18));
  backdrop-filter: blur(3px);
}
.login-page .login-shell {
  position: relative;
  width: min(1120px, 100%);
  min-height: calc(100svh - 44px);
  display: grid;
  place-items: center;
}
.login-brand {
  position: absolute;
  top: clamp(8px, 3vw, 28px);
  left: 0;
}
.login-brand a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.brand-logo {
  display: inline-flex;
  align-items: center;
  width: clamp(112px, 17vw, 150px);
  min-width: 112px;
}
.brand-logo img {
  width: 100%;
  height: auto;
  max-height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.28));
}
.brand-product {
  border-left: 1px solid rgba(255,255,255,.28);
  color: #d9b66d;
  padding-left: 10px;
  font-size: clamp(1rem, 2.3vw, 1.25rem);
  font-weight: 850;
}
.login-page .login-card {
  width: min(460px, 100%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  background: rgba(11, 20, 33, .72);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
  padding: clamp(28px, 5vw, 46px);
  gap: 18px;
}
.login-page .login-card .kicker {
  color: #d9b66d;
  letter-spacing: .16em;
}
.login-page .login-card h1 {
  color: #fff8ec;
  font-size: clamp(2rem, 6vw, 3.1rem);
  line-height: 1.02;
  margin-bottom: 0;
}
.login-page .login-card p {
  color: rgba(249,243,231,.72);
}
.login-page .login-card label {
  color: rgba(249,243,231,.78);
}
.login-page .login-card input {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
  min-height: 52px;
}
.login-page .login-card input::placeholder {
  color: rgba(249,243,231,.46);
}
.login-page .login-card input:focus {
  outline: 2px solid rgba(217,182,109,.5);
  border-color: rgba(217,182,109,.74);
}
.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(249,243,231,.72);
  font-size: .88rem;
  font-weight: 800;
}
.login-options .check {
  display: inline-flex;
  min-width: 0;
  color: rgba(249,243,231,.72);
}
.login-options input {
  width: auto;
  min-height: auto;
  padding: 0;
  border-color: transparent;
  background: transparent;
  accent-color: #d9b66d;
}
.login-options a,
.login-help a {
  color: #e5c77f;
  font-weight: 900;
}
.login-page .login-card .primary {
  min-height: 54px;
  border-color: rgba(230,194,118,.9);
  background: linear-gradient(180deg, #e3bd70, #b98735);
  color: #14120e;
  box-shadow: 0 14px 34px rgba(185,135,53,.28);
}
.login-page .login-card .primary:hover {
  filter: brightness(1.04);
}
.login-help {
  margin: 0;
  text-align: center;
  font-size: .9rem;
}
.login-page .login-footer {
  position: absolute;
  right: 0;
  bottom: clamp(8px, 3vw, 24px);
  color: rgba(249,243,231,.66);
}
.login-page .login-footer a {
  color: #e5c77f;
}
.login-page .alert.danger {
  border-color: rgba(255,123,103,.34);
  background: rgba(179,66,53,.16);
  color: #ffd8d1;
}
@media (max-width: 640px) {
  .login-page {
    padding: 16px;
  }
  .login-page .login-shell {
    min-height: calc(100svh - 32px);
    align-content: center;
    gap: 18px;
  }
  .login-brand,
  .login-page .login-footer {
    position: static;
    justify-self: start;
  }
  .login-page .login-footer {
    justify-self: center;
    text-align: center;
  }
  .login-options {
    align-items: flex-start;
    flex-direction: column;
  }
}
.home-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.home-page {
  display: block;
  min-height: 100svh;
  overflow-x: hidden;
  padding: 0;
  background: #f7f3ea;
}
.home-shell {
  width: 100%;
}
.home-hero {
  min-height: min(720px, 86svh);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(14, 22, 29, .92), rgba(14, 22, 29, .66) 58%, rgba(31, 122, 90, .18)),
    url("../img/hero-bakery.webp") center / cover no-repeat;
  box-shadow: none;
  color: #fff8ec;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 10vw, 120px) max(20px, calc((100vw - 1160px) / 2));
}
.home-hero .kicker {
  color: #e1bd74;
}
.home-hero h1 {
  width: min(760px, 100%);
  font-size: clamp(2.5rem, 7.6vw, 6.2rem);
  letter-spacing: 0;
}
.home-hero p {
  width: min(700px, 100%);
  color: rgba(255, 248, 236, .82);
  font-size: clamp(1rem, 2vw, 1.22rem);
}
.home-actions a {
  min-height: 50px;
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 253, 248, .12);
  color: #fff8ec;
  padding: 0 18px;
}
.home-actions a.primary {
  border-color: var(--brand);
  background: var(--brand);
  color: white;
}
.home-section,
.home-split,
.home-trust {
  width: min(1160px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(42px, 7vw, 74px) 0;
}
.home-section-head {
  width: min(680px, 100%);
  margin-bottom: 20px;
}
.home-section-head h2,
.home-split h2,
.home-trust h2 {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.02;
}
.home-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.home-feature-grid article,
.home-steps article,
.home-mini-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, .92);
  box-shadow: 0 16px 38px rgba(39, 37, 34, .07);
  padding: 20px;
}
.home-feature-grid article span,
.home-steps article span {
  color: var(--brand);
  display: inline-flex;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  margin-bottom: 18px;
}
.home-feature-grid h3,
.home-mini-panel strong {
  font-size: 1.12rem;
}
.home-feature-grid p,
.home-steps p {
  margin-bottom: 0;
}
.home-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  align-items: center;
  gap: clamp(22px, 4vw, 46px);
}
.home-mini-panel {
  background: #10231d;
  color: #fff8ec;
}
.home-mini-panel ul {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding-left: 18px;
}
.home-mini-panel li {
  color: rgba(255, 248, 236, .82);
}
.home-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.home-steps article span {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(31, 122, 90, .12);
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.home-trust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--line);
}
.home-trust div {
  width: min(720px, 100%);
}
.home-trust a {
  white-space: nowrap;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr);
  align-items: center;
  gap: clamp(28px, 6vw, 76px);
}
.home-hero-copy {
  min-width: 0;
}
.home-hero-card {
  display: grid;
  gap: 16px;
  justify-self: end;
  width: min(420px, 100%);
}
.home-phone,
.home-dashboard-card {
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 22px;
  background: rgba(255, 253, 248, .12);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
}
.home-phone {
  display: grid;
  gap: 14px;
  margin-left: auto;
  min-height: 360px;
  padding: 24px;
}
.home-phone strong {
  color: #fff8ec;
  font-size: 2.2rem;
}
.home-phone-item {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 248, 236, .86);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
}
.home-phone-item b {
  color: #e1bd74;
}
.home-phone button {
  border: 0;
  border-radius: 12px;
  background: var(--brand);
  color: white;
  min-height: 48px;
  font-weight: 900;
}
.home-dashboard-card {
  color: #fff8ec;
  display: grid;
  gap: 6px;
  padding: 18px 20px;
}
.home-dashboard-card span,
.home-dashboard-card small {
  color: rgba(255, 248, 236, .72);
  font-weight: 800;
}
.home-dashboard-card strong {
  font-size: 1.8rem;
}
.home-feature-grid article {
  transition: transform .18s ease, box-shadow .18s ease;
}
.home-feature-grid article:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 46px rgba(39, 37, 34, .1);
}
.home-feature-grid article .home-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(31, 122, 90, .12);
  color: var(--brand);
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  letter-spacing: 0;
  margin-bottom: 18px;
}
.home-trust a.primary {
  border: 1px solid var(--brand);
  border-radius: 8px;
  background: var(--brand);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 20px;
  font-weight: 900;
}

@media (max-width: 860px) {
  .home-feature-grid,
  .home-steps,
  .home-split,
  .home-hero {
    grid-template-columns: 1fr;
  }
  .home-hero-card {
    justify-self: stretch;
    width: 100%;
  }
  .home-trust {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .home-hero {
    min-height: 76svh;
    padding: 46px 18px;
  }
  .home-phone {
    min-height: 300px;
  }
  .home-actions a,
  .home-trust a {
    width: 100%;
  }
  .home-section,
  .home-split,
  .home-trust {
    width: min(100% - 28px, 1160px);
  }
}

.bakery-home {
  background:
    radial-gradient(circle at 18% 12%, rgba(217,154,43,.22), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(31,122,90,.16), transparent 30%),
    linear-gradient(180deg, #fff8ee 0%, #f8efe1 48%, #fffaf1 100%);
  color: #261911;
}
.bakery-home a {
  text-decoration: none;
}
.bakery-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  width: min(1180px, calc(100% - 32px));
  margin: 14px auto 0;
  border: 1px solid rgba(65,38,24,.13);
  border-radius: 999px;
  background: rgba(255, 250, 241, .82);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 46px rgba(65,38,24,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 12px 10px 18px;
}
.bakery-brand {
  display: inline-grid;
  line-height: .95;
  color: #2c1a10;
  font-weight: 950;
}
.bakery-brand span {
  font-size: .86rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bakery-brand b {
  font-size: 1.2rem;
}
.bakery-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(65,38,24,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
  padding: 0;
}
.bakery-nav-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #2b1710;
  transition: transform .22s ease, opacity .22s ease;
}
.bakery-nav.is-open .bakery-nav-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.bakery-nav.is-open .bakery-nav-toggle span:nth-child(2) {
  opacity: 0;
}
.bakery-nav.is-open .bakery-nav-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
.bakery-nav nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.bakery-nav nav a,
.bakery-actions a,
.bakery-socials a,
.bakery-map-card a,
.bakery-special aside a {
  min-height: 42px;
  border: 1px solid rgba(65,38,24,.14);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  color: #3b2618;
  background: rgba(255,255,255,.55);
  font-weight: 900;
}
.bakery-hero {
  width: min(1180px, calc(100% - 32px));
  margin: clamp(26px, 5vw, 70px) auto 0;
  min-height: min(760px, 82svh);
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(26px, 6vw, 74px);
  align-items: center;
}
.bakery-hero-media {
  position: relative;
  min-height: clamp(380px, 55vw, 660px);
  border-radius: 34px;
  overflow: visible;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.34), transparent 24%),
    linear-gradient(140deg, #3b2517, #86522a);
  box-shadow: 0 32px 90px rgba(65,38,24,.22);
  isolation: isolate;
  transform-style: preserve-3d;
}
.bakery-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 34px;
  background: linear-gradient(180deg, transparent 44%, rgba(32,18,10,.72));
  pointer-events: none;
}
.bakery-hero-media::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: 1;
  background:
    radial-gradient(circle at 22% 30%, rgba(245,202,122,.28), transparent 18%),
    radial-gradient(circle at 78% 64%, rgba(31,122,90,.24), transparent 20%),
    conic-gradient(from 110deg at 50% 50%, transparent 0 20%, rgba(255,248,238,.2), transparent 40% 70%, rgba(217,154,43,.24), transparent 86% 100%);
  mix-blend-mode: screen;
  opacity: .72;
  pointer-events: none;
  animation: bakery-hero-glow 11s linear infinite;
}
.bakery-hero-media > img {
  position: relative;
  z-index: 0;
  border-radius: 34px;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}
.bakery-melty-line {
  position: absolute;
  inset: -58px -54px -42px -62px;
  z-index: -1;
  width: calc(100% + 116px);
  height: calc(100% + 100px);
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 22px 38px rgba(123,63,28,.18));
}
.bakery-melty-line path {
  fill: none;
  stroke: rgba(123, 63, 28, .44);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34 18;
  transition: d 1.15s cubic-bezier(.2,.9,.2,1), stroke .3s ease;
  animation: bakery-line-flow 7s linear infinite;
}
.bakery-hero-orbit {
  position: absolute;
  inset: -28px;
  z-index: -1;
  pointer-events: none;
}
.bakery-hero-orbit span {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(217,154,43,.36), rgba(31,122,90,.18));
  filter: blur(.2px);
}
.bakery-hero-orbit span:nth-child(1) {
  width: 92px;
  height: 92px;
  left: -18px;
  top: 12%;
  animation: bakery-drift 7s ease-in-out infinite;
}
.bakery-hero-orbit span:nth-child(2) {
  width: 54px;
  height: 54px;
  right: 8%;
  top: -14px;
  animation: bakery-drift 8.5s ease-in-out infinite reverse;
}
.bakery-hero-orbit span:nth-child(3) {
  width: 132px;
  height: 132px;
  right: -30px;
  bottom: 16%;
  background: linear-gradient(135deg, rgba(123,63,28,.24), rgba(217,154,43,.28));
  animation: bakery-drift 9s ease-in-out infinite;
}
.bakery-float-product {
  position: absolute;
  z-index: 3;
  width: min(180px, 40%);
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 18px;
  background: rgba(255,250,241,.18);
  color: #fff8ee;
  box-shadow: 0 22px 46px rgba(39,23,13,.22);
  backdrop-filter: blur(16px);
  padding: 10px;
  display: grid;
  gap: 6px;
  animation: bakery-float 5.8s ease-in-out infinite;
}
.bakery-float-product img {
  width: 100%;
  aspect-ratio: 1 / .72;
  border-radius: 12px;
  object-fit: cover;
}
.bakery-float-product span {
  color: rgba(255,248,238,.72);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bakery-float-product b {
  font-size: .9rem;
  line-height: 1.05;
}
.bakery-float-1 {
  right: -26px;
  top: 10%;
}
.bakery-float-2 {
  left: -28px;
  bottom: 12%;
  animation-delay: -1.8s;
}
.bakery-float-3 {
  right: -18px;
  bottom: 31%;
  animation-delay: -3.2s;
}
.bakery-floating-card {
  position: absolute;
  left: 22px;
  right: auto;
  top: 22px;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(42,25,16,.42);
  color: #fff8ee;
  backdrop-filter: blur(14px);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 18px 40px rgba(32,18,10,.22);
  overflow: hidden;
  animation: bakery-badge-breathe 3.8s ease-in-out infinite;
}
.bakery-floating-card::after {
  content: "";
  position: absolute;
  inset: -45% auto -45% -35%;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg);
  animation: bakery-badge-shine 4.6s ease-in-out infinite;
}
.bakery-floating-card strong {
  position: relative;
  z-index: 1;
  font-size: .95rem;
}
.bakery-floating-card span {
  position: relative;
  z-index: 1;
  border-radius: 999px;
  background: #d99a2b;
  color: #2b1710;
  font-size: .72rem;
  font-weight: 950;
  padding: 6px 8px;
  text-transform: uppercase;
  box-shadow: 0 0 0 0 rgba(217,154,43,.42);
  animation: bakery-chip-pulse 2.6s ease-in-out infinite;
}
.bakery-production-rail {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 3;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(42,25,16,.38);
  color: #fff8ee;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 13px;
  backdrop-filter: blur(14px);
}
.bakery-production-rail span {
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bakery-production-rail i {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(245,202,122,.1), rgba(245,202,122,.92), rgba(31,122,90,.72));
  overflow: hidden;
  position: relative;
}
.bakery-production-rail i::after {
  content: "";
  position: absolute;
  inset: -4px auto -4px -30%;
  width: 36%;
  border-radius: 999px;
  background: rgba(255,248,238,.88);
  filter: blur(3px);
  animation: bakery-rail-flow 2.4s linear infinite;
}
.bakery-production-rail i:nth-of-type(2)::after {
  animation-delay: .55s;
}
.bakery-hero-copy {
  min-width: 0;
}
.bakery-eyebrow {
  color: #8e5423;
  display: inline-flex;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .14em;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.bakery-hero h1 {
  color: #25160f;
  font-size: clamp(3rem, 8.3vw, 7.4rem);
  letter-spacing: 0;
  line-height: .86;
  margin-bottom: 20px;
}
.bakery-hero p,
.bakery-section-head p,
.bakery-special p,
.bakery-contact p {
  color: #705d4e;
  font-size: clamp(1rem, 1.8vw, 1.18rem);
}
.bakery-actions,
.bakery-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.bakery-actions a {
  min-height: 52px;
  padding: 0 20px;
}
.bakery-actions .primary {
  border-color: #7b3f1c;
  background: #7b3f1c;
  color: #fff8ee;
  box-shadow: 0 16px 34px rgba(123,63,28,.24);
}
.bakery-strip {
  width: min(1040px, calc(100% - 32px));
  margin: clamp(24px, 5vw, 58px) auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.bakery-strip article {
  border: 1px solid rgba(65,38,24,.12);
  border-radius: 22px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 16px 42px rgba(65,38,24,.07);
  padding: 20px;
}
.bakery-strip b {
  display: block;
  color: #7b3f1c;
  font-size: clamp(1.6rem, 4vw, 2.7rem);
  line-height: .95;
}
.bakery-strip span {
  color: #725e4e;
  font-weight: 850;
}
.bakery-section,
.bakery-special {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(48px, 8vw, 92px) 0;
}
.bakery-section-head {
  width: min(720px, 100%);
  margin-bottom: 26px;
}
.bakery-section h2,
.bakery-special h2,
.bakery-contact h2 {
  color: #28170f;
  font-size: clamp(2rem, 5vw, 4.5rem);
  letter-spacing: 0;
  line-height: .92;
}
.bakery-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.bakery-category-list {
  display: grid;
  gap: 28px;
}
.bakery-category-block {
  position: relative;
  border: 1px solid rgba(65,38,24,.1);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,250,241,.48)),
    radial-gradient(circle at 100% 0%, rgba(217,154,43,.12), transparent 24%);
  box-shadow: 0 22px 60px rgba(65,38,24,.07);
  padding: clamp(14px, 2.5vw, 22px);
  overflow: hidden;
}
.bakery-category-block::before {
  content: "";
  position: absolute;
  right: -48px;
  top: -62px;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  background: rgba(31,122,90,.08);
}
.bakery-category-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.bakery-category-head div {
  display: grid;
  gap: 4px;
}
.bakery-category-head span {
  color: #28170f;
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 950;
}
.bakery-category-head small {
  color: #7d6a5a;
  font-weight: 850;
}
.bakery-category-head b {
  border-radius: 999px;
  background: rgba(123,63,28,.09);
  color: #7b3f1c;
  padding: 8px 12px;
  white-space: nowrap;
}
.bakery-product-card {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(65,38,24,.12);
  border-radius: 24px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 20px 55px rgba(65,38,24,.08);
  overflow: hidden;
  min-width: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bakery-product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 38%, rgba(255,255,255,.36) 48%, transparent 58% 100%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events: none;
}
.bakery-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(65,38,24,.13);
}
.bakery-product-card:hover::after {
  transform: translateX(120%);
}
.bakery-product-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #eadac4;
}
.bakery-product-card div {
  padding: 18px;
}
.bakery-product-card span {
  color: #8e5423;
  font-size: .75rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bakery-product-card h3 {
  color: #25160f;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1;
  margin: 8px 0;
}
.bakery-product-card p {
  color: #756253;
  margin: 0;
}
.bakery-special {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: clamp(22px, 5vw, 60px);
  align-items: stretch;
}
.bakery-special > div,
.bakery-special aside,
.bakery-map-card {
  border: 1px solid rgba(65,38,24,.12);
  border-radius: 28px;
  background: rgba(255,255,255,.64);
  box-shadow: 0 22px 60px rgba(65,38,24,.08);
  padding: clamp(22px, 4vw, 38px);
}
.bakery-special ul {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.bakery-special li {
  border-radius: 999px;
  background: rgba(123,63,28,.08);
  color: #5d3b25;
  font-weight: 900;
  padding: 10px 14px;
}
.bakery-special aside {
  background:
    linear-gradient(160deg, rgba(42,25,16,.58), rgba(123,63,28,.72)),
    var(--special-bg, url("../img/chocolate-cake.webp")) center / cover;
  color: #fff8ee;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 360px;
  overflow: hidden;
  position: relative;
}
.bakery-whatsapp-glow {
  position: absolute;
  inset: auto auto 82px 50%;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(37,211,102,.28), rgba(37,211,102,.08) 48%, transparent 68%);
  transform: translateX(-50%);
  filter: blur(2px);
  animation: bakery-whatsapp-pulse 3.6s ease-in-out infinite;
}
.bakery-special aside::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  pointer-events: none;
}
.bakery-special aside::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -70px;
  top: -54px;
  border-radius: 999px;
  background: rgba(255,248,238,.18);
}
.bakery-special aside > * {
  position: relative;
  z-index: 1;
}
.bakery-card-kicker {
  color: #f5ca7a;
  font-size: .74rem;
  font-weight: 950;
  letter-spacing: .13em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.bakery-special aside strong {
  font-size: 1.35rem;
}
.bakery-special aside a {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.14);
  color: #fff8ee;
  margin: 16px 0;
}
.bakery-special aside small {
  color: rgba(255,248,238,.74);
  font-weight: 800;
}
.bakery-tech {
  --tech-x: 50%;
  --tech-y: 50%;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(46px, 7vw, 86px) clamp(18px, 4vw, 44px);
  border: 1px solid rgba(65,38,24,.12);
  border-radius: 34px;
  background:
    radial-gradient(circle at 86% 16%, rgba(31,122,90,.18), transparent 28%),
    radial-gradient(circle at 10% 90%, rgba(217,154,43,.18), transparent 30%),
    linear-gradient(135deg, rgba(42,25,16,.96), rgba(94,52,27,.9));
  color: #fff8ee;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  overflow: hidden;
  position: relative;
  box-shadow: 0 28px 80px rgba(65,38,24,.18);
}
.bakery-tech::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--tech-x) var(--tech-y), rgba(245,202,122,.28), transparent 18%),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
  opacity: .72;
  pointer-events: none;
  transition: background-position .2s ease;
}
.bakery-tech::after {
  content: "";
  position: absolute;
  inset: -42% -20%;
  background:
    conic-gradient(from 120deg at 50% 50%, transparent 0 18%, rgba(31,122,90,.22), transparent 36% 55%, rgba(245,202,122,.2), transparent 72% 100%);
  filter: blur(28px);
  opacity: .68;
  animation: bakery-tech-orbit 12s linear infinite;
  pointer-events: none;
}
.bakery-tech-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bakery-tech-bg span {
  position: absolute;
  border: 1px solid rgba(245,202,122,.2);
  border-radius: 999px;
  box-shadow: 0 0 28px rgba(245,202,122,.12);
  opacity: .72;
}
.bakery-tech-bg span:nth-child(1) {
  width: 180px;
  height: 180px;
  left: 8%;
  top: 10%;
  animation: bakery-tech-float 8s ease-in-out infinite;
}
.bakery-tech-bg span:nth-child(2) {
  width: 88px;
  height: 88px;
  right: 18%;
  top: 14%;
  animation: bakery-tech-float 7s ease-in-out infinite reverse;
}
.bakery-tech-bg span:nth-child(3) {
  width: 240px;
  height: 240px;
  right: 4%;
  bottom: -10%;
  animation: bakery-tech-float 10s ease-in-out infinite;
}
.bakery-tech-copy,
.bakery-tech-visual {
  position: relative;
  z-index: 1;
}
.bakery-tech .bakery-eyebrow {
  color: #f5ca7a;
}
.bakery-tech h2 {
  color: #fff8ee;
  font-size: clamp(2rem, 5vw, 4.35rem);
  letter-spacing: 0;
  line-height: .94;
  margin-bottom: 16px;
}
.bakery-tech p {
  color: rgba(255,248,238,.78);
  font-size: clamp(1rem, 1.7vw, 1.15rem);
}
.bakery-tech-partner {
  border-left: 3px solid rgba(245,202,122,.78);
  margin-top: 14px;
  padding-left: 14px;
}
.bakery-tech-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}
.bakery-tech-steps article {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  padding: 14px;
}
.bakery-tech-steps b {
  color: #f5ca7a;
  display: block;
  font-size: .82rem;
  margin-bottom: 8px;
}
.bakery-tech-steps span {
  color: rgba(255,248,238,.9);
  font-weight: 900;
}
.bakery-tech-visual {
  position: relative;
  min-height: 390px;
  display: grid;
  align-items: center;
}
.bakery-qr-card,
.bakery-screen-card {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 26px;
  background: rgba(255,250,241,.13);
  box-shadow: 0 26px 60px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
}
.bakery-qr-card {
  width: 190px;
  padding: 18px;
  display: grid;
  gap: 12px;
  transform: rotate(-5deg);
}
.bakery-qr-card span,
.bakery-screen-card span {
  color: #f5ca7a;
  font-size: .74rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.bakery-qr-card small {
  color: rgba(255,248,238,.74);
  font-weight: 850;
}
.bakery-qr-grid {
  aspect-ratio: 1;
  border-radius: 16px;
  background:
    linear-gradient(90deg, #fff8ee 12px, transparent 12px 22px, #fff8ee 22px 34px, transparent 34px),
    linear-gradient(#fff8ee 12px, transparent 12px 22px, #fff8ee 22px 34px, transparent 34px),
    #2b1710;
  background-size: 44px 44px;
  box-shadow: inset 0 0 0 10px #fff8ee;
}
.bakery-flow-line {
  position: absolute;
  left: 170px;
  right: 200px;
  top: 50%;
  height: 3px;
  background: linear-gradient(90deg, rgba(245,202,122,.1), rgba(245,202,122,.9), rgba(31,122,90,.8));
  overflow: hidden;
}
.bakery-flow-line::after {
  content: "";
  position: absolute;
  inset: -6px auto -6px 0;
  width: 42px;
  border-radius: 999px;
  background: rgba(245,202,122,.92);
  filter: blur(3px);
  animation: bakery-flow 2.2s linear infinite;
}
.bakery-screen-card {
  justify-self: end;
  width: min(330px, 100%);
  padding: 22px;
  transform: rotate(3deg);
}
.bakery-screen-card strong {
  display: block;
  color: #fff8ee;
  font-size: 1.5rem;
  line-height: 1;
  margin: 10px 0 16px;
}
.bakery-screen-card ul {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bakery-screen-card li {
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  color: rgba(255,248,238,.86);
  font-weight: 850;
  padding: 10px 12px;
}
.bakery-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  gap: clamp(22px, 5vw, 60px);
  align-items: center;
  border-top: 1px solid rgba(65,38,24,.12);
}
.bakery-contact p a {
  color: #7b3f1c;
  font-weight: 900;
}
.bakery-map-card {
  min-height: 320px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,250,241,.76)),
    linear-gradient(135deg, rgba(31,122,90,.12) 25%, transparent 25% 50%, rgba(217,154,43,.12) 50% 75%, transparent 75%),
    radial-gradient(circle at 70% 20%, rgba(31,122,90,.18), transparent 30%);
  background-size: auto, 44px 44px, auto;
  display: grid;
  align-content: end;
  gap: 8px;
  overflow: hidden;
  position: relative;
}
.bakery-map-lines {
  position: absolute;
  inset: 0;
  opacity: .72;
  pointer-events: none;
}
.bakery-map-lines span {
  position: absolute;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(123,63,28,.24), transparent);
  transform: rotate(-28deg);
}
.bakery-map-lines span:nth-child(1) {
  left: -10%;
  right: 12%;
  top: 26%;
}
.bakery-map-lines span:nth-child(2) {
  left: 8%;
  right: -16%;
  top: 48%;
}
.bakery-map-lines span:nth-child(3) {
  left: -18%;
  right: 24%;
  top: 70%;
}
.bakery-map-card::before {
  content: "";
  position: absolute;
  inset: 26px 24px auto auto;
  width: 46%;
  height: 46%;
  border: 2px dashed rgba(123,63,28,.22);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 38px 0 0;
}
.bakery-map-card::after {
  content: "";
  position: absolute;
  left: 28px;
  top: 28px;
  width: 108px;
  height: 108px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(31,122,90,.22), rgba(31,122,90,.05) 62%, transparent 63%);
}
.bakery-map-card > * {
  position: relative;
  z-index: 1;
}
.bakery-map-pin {
  width: 44px;
  height: 44px;
  border-radius: 999px 999px 999px 4px;
  background: #7b3f1c;
  color: transparent !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
  box-shadow: 0 12px 30px rgba(123,63,28,.24);
}
.bakery-map-pin::after {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #fff8ee;
}
.bakery-map-card span {
  color: #8e5423;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.bakery-map-card strong {
  color: #25160f;
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  line-height: .95;
}
.bakery-map-card p {
  margin-bottom: 10px;
}
.bakery-footer {
  align-items: center;
  border-top: 1px solid rgba(65,38,24,.12);
  color: #6f5b4c;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: space-between;
  margin: 0 auto;
  padding: 24px 0 34px;
  width: min(1180px, calc(100% - 32px));
}
.bakery-footer span {
  color: #2b1710;
  font-weight: 950;
}
.bakery-footer small {
  color: #8a7465;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .01em;
}
.bakery-footer a {
  color: #7b3f1c;
  font-weight: 900;
  text-decoration: none;
}
.bakery-footer a:hover {
  color: #1f7a5a;
}

@media (max-width: 980px) {
  .bakery-hero,
  .bakery-special,
  .bakery-contact,
  .bakery-tech {
    grid-template-columns: minmax(0, 1fr);
  }
  .bakery-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bakery-float-product {
    width: min(160px, 34%);
  }
}

@media (max-width: 640px) {
  .bakery-nav {
    align-items: center;
    border-radius: 22px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px 10px 10px 16px;
  }
  .bakery-nav-toggle {
    display: inline-flex;
  }
  .bakery-nav nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    transform: translateY(-4px);
    transition: max-height .24s ease, opacity .2s ease, padding-top .2s ease, transform .2s ease;
    width: 100%;
  }
  .bakery-nav.is-open nav {
    max-height: 190px;
    opacity: 1;
    padding-top: 10px;
    transform: translateY(0);
  }
  .bakery-nav nav a {
    flex: 1 1 auto;
    min-height: 36px;
    padding: 0 10px;
  }
  .bakery-hero {
    min-height: auto;
    margin-top: 24px;
  }
  .bakery-hero-media {
    min-height: 320px;
    border-radius: 26px;
    overflow: hidden;
  }
  .bakery-melty-line {
    display: block;
    inset: -26px;
    opacity: .54;
    width: calc(100% + 52px);
    height: calc(100% + 52px);
  }
  .bakery-hero-media::after,
  .bakery-hero-media::before,
  .bakery-hero-media > img {
    border-radius: 26px;
  }
  .bakery-float-product {
    width: 116px;
    padding: 8px;
  }
  .bakery-float-product img {
    border-radius: 10px;
  }
  .bakery-float-product span {
    font-size: .58rem;
  }
  .bakery-float-product b {
    font-size: .78rem;
  }
  .bakery-float-1 {
    right: 10px;
    top: 16%;
  }
  .bakery-float-2 {
    left: 10px;
    bottom: 10%;
  }
  .bakery-float-3 {
    display: none;
  }
  .bakery-floating-card {
    align-items: flex-start;
    border-radius: 18px;
    flex-direction: column;
    max-width: calc(100% - 44px);
  }
  .bakery-hero h1 {
    font-size: clamp(2.8rem, 18vw, 4.2rem);
  }
  .bakery-production-rail {
    left: 14px;
    right: 14px;
    bottom: 14px;
    border-radius: 18px;
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .bakery-production-rail i {
    display: none;
  }
  .bakery-actions a,
  .bakery-socials a,
  .bakery-map-card a {
    width: 100%;
  }
  .bakery-strip,
  .bakery-product-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .bakery-category-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .bakery-section,
  .bakery-special,
  .bakery-contact,
  .bakery-tech {
    width: min(100% - 24px, 1180px);
  }
  .bakery-tech {
    padding: 24px;
  }
  .bakery-tech-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .bakery-tech-visual {
    min-height: auto;
    gap: 16px;
  }
  .bakery-qr-card,
  .bakery-screen-card {
    justify-self: stretch;
    width: 100%;
    transform: none;
  }
  .bakery-flow-line {
    display: none;
  }
}

@keyframes bakery-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(1.2deg); }
}

@keyframes bakery-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(12px, -12px, 0) scale(1.06); }
}

@keyframes bakery-line-flow {
  to { stroke-dashoffset: -104; }
}

@keyframes bakery-hero-glow {
  to { transform: rotate(1turn) scale(1.04); }
}

@keyframes bakery-badge-breathe {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 18px 40px rgba(32,18,10,.22); }
  50% { transform: translateY(-3px) scale(1.015); box-shadow: 0 24px 54px rgba(32,18,10,.28); }
}

@keyframes bakery-badge-shine {
  0%, 36% { left: -38%; opacity: 0; }
  48% { opacity: 1; }
  68%, 100% { left: 108%; opacity: 0; }
}

@keyframes bakery-rail-flow {
  to { transform: translateX(360%); }
}

@keyframes bakery-whatsapp-pulse {
  0%, 100% { transform: translateX(-50%) scale(.92); opacity: .55; }
  50% { transform: translateX(-50%) scale(1.08); opacity: .95; }
}

@keyframes bakery-chip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,154,43,.32); }
  50% { box-shadow: 0 0 0 7px rgba(217,154,43,0); }
}

@keyframes bakery-flow {
  from { transform: translateX(-48px); }
  to { transform: translateX(420px); }
}

@keyframes bakery-tech-orbit {
  to { transform: rotate(1turn); }
}

@keyframes bakery-tech-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(18px, -14px, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .bakery-float-product,
  .bakery-hero-orbit span,
  .bakery-melty-line path,
  .bakery-floating-card,
  .bakery-floating-card::after,
  .bakery-floating-card span,
  .bakery-production-rail i::after,
  .bakery-whatsapp-glow,
  .bakery-hero-media::before,
  .bakery-tech::after,
  .bakery-tech-bg span,
  .bakery-flow-line::after {
    animation: none;
  }
}

.app-shell {
  width: min(1480px, calc(100% - 28px));
  margin: 0 auto;
  padding: 24px 0 48px;
}
.topbar, .panel-head, .top-actions, .cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.panel-actions a,
.panel-actions button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}
.panel-actions a.primary {
  border-color: rgba(31, 122, 90, .34);
  background: rgba(255, 253, 248, .9);
  color: var(--brand);
}
.panel-actions button.primary {
  border-color: var(--brand);
  background: var(--brand);
  color: white;
}
.panel-actions a.primary:hover {
  border-color: var(--brand);
  background: rgba(31, 122, 90, .06);
}
.report-reset-badge {
  min-height: 40px;
  border: 1px solid rgba(232,165,55,.34);
  border-radius: 999px;
  background: rgba(232,165,55,.12);
  color: #8a4b14;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-size: .86rem;
  font-weight: 900;
  white-space: nowrap;
}
.topbar { margin-bottom: 18px; }
.topbar h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
.top-actions { flex-wrap: wrap; justify-content: flex-end; }
.mobile-action-menu {
  border: 0;
  background: transparent;
  padding: 0;
}
.mobile-action-menu > summary {
  display: none;
  list-style: none;
  user-select: none;
}
.mobile-action-menu > summary::-webkit-details-marker {
  display: none;
}
.top-action-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.top-dropdown {
  position: relative;
}
.top-dropdown summary {
  list-style: none;
  user-select: none;
}
.top-dropdown summary::-webkit-details-marker {
  display: none;
}
.top-dropdown[open] summary,
.top-dropdown.is-active summary {
  border-color: var(--brand);
  color: var(--brand);
}
.top-dropdown-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 45;
  min-width: 220px;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 10px;
  box-shadow: var(--shadow);
}
.top-dropdown-panel button,
.top-dropdown-panel a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  width: 100%;
}
.account-button {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 13px;
  color: var(--muted);
  background: rgba(255,255,255,.55);
  font-weight: 800;
}
.account-button:hover,
.account-button:focus-visible {
  border-color: rgba(31, 122, 90, .34);
  color: var(--brand);
  background: rgba(31, 122, 90, .06);
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.stats-row article { padding: 18px; }
.stats-row span { color: var(--muted); display: block; font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.stats-row strong { display: block; font-size: clamp(1.7rem, 4vw, 2.7rem); margin-top: 8px; }
.stats-row article.has-open-orders {
  border-color: rgba(179, 66, 53, .42);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(179,66,53,.14));
  animation: open-order-pulse 1.45s ease-in-out infinite;
}
.stats-row article.has-open-orders span,
.stats-row article.has-open-orders strong {
  color: var(--danger);
}

@keyframes open-order-pulse {
  0%, 100% {
    box-shadow: var(--shadow), 0 0 0 0 rgba(179, 66, 53, .18);
  }
  50% {
    box-shadow: var(--shadow), 0 0 0 8px rgba(179, 66, 53, .06);
  }
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.workspace > *,
.main-panel,
.side-panel,
.order-columns {
  min-width: 0;
}
.side-panel, .main-panel { padding: 18px; }
.side-panel { position: sticky; top: 14px; }
.table-grid { display: grid; gap: 10px; margin-top: 14px; }
.operation-tables {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.operation-tables .table-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.table-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-left: 4px solid transparent;
  border-radius: var(--radius);
  background: white;
  padding: 14px;
  display: grid;
  gap: 10px;
}
.table-card > * {
  position: relative;
  z-index: 1;
}
.table-card.is-open {
  border-color: rgba(31,122,90,.42);
  border-left-color: var(--brand);
  background: linear-gradient(90deg, rgba(31,122,90,.11), rgba(255,255,255,.96) 44%);
  box-shadow: 0 10px 24px rgba(31, 122, 90, .08);
}
.table-card.is-open::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 14px;
  bottom: 10px;
  width: 124px;
  pointer-events: none;
  opacity: .14;
  background: right center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 130'%3E%3Cg fill='none' stroke='%231f7a5a' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='85' cy='72' rx='42' ry='24' fill='%23ffffff' fill-opacity='.75'/%3E%3Cpath d='M48 72h74M66 58h38M62 86h48' opacity='.55'/%3E%3Ccircle cx='45' cy='35' r='13' fill='%231f7a5a' fill-opacity='.32'/%3E%3Cpath d='M28 63c7-14 27-14 34 0'/%3E%3Ccircle cx='125' cy='35' r='13' fill='%231f7a5a' fill-opacity='.32'/%3E%3Cpath d='M108 63c7-14 27-14 34 0'/%3E%3Ccircle cx='45' cy='104' r='13' fill='%231f7a5a' fill-opacity='.32'/%3E%3Cpath d='M28 119c7-13 27-13 34 0'/%3E%3Ccircle cx='125' cy='104' r='13' fill='%231f7a5a' fill-opacity='.32'/%3E%3Cpath d='M108 119c7-13 27-13 34 0'/%3E%3C/g%3E%3C/svg%3E");
}
.table-card.is-focused {
  outline: 3px solid rgba(217,154,43,.85);
  box-shadow: 0 0 0 6px rgba(217,154,43,.18), var(--shadow);
}
.table-card header, .table-card footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.badge {
  border-radius: 999px;
  background: rgba(31,122,90,.1);
  color: var(--brand);
  padding: 5px 8px;
  font-size: .72rem;
  font-weight: 900;
}
.badge.warn { background: rgba(217,154,43,.14); color: #8a5d13; }
.badge.blue { background: rgba(56,103,183,.12); color: var(--blue); }
.badge.danger { background: rgba(179,66,53,.1); color: var(--danger); border: 0; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tab.is-active { border-color: var(--brand); color: var(--brand); }
.management-menu { display: none; position: relative; }
.management-menu summary {
  list-style: none;
  user-select: none;
}
.management-menu summary::-webkit-details-marker { display: none; }
.management-menu summary.tab {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  font-weight: 800;
}
.management-menu[open] summary.tab,
.management-menu.is-active summary.tab {
  border-color: var(--brand);
  color: var(--brand);
}
.management-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 35;
  display: grid;
  gap: 6px;
  width: min(220px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.management-menu-panel .tab {
  width: 100%;
  justify-content: flex-start;
}
.view { display: none; }
.view.is-active { display: block; }
.order-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.order-column {
  min-height: 320px;
  border: 1px solid var(--line);
  border-top: 6px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.58);
  padding: 12px;
}
.order-column-open {
  border-color: rgba(179, 66, 53, .24);
  border-top-color: #d84a3a;
  background: rgba(179, 66, 53, .055);
}
.order-column-assigned {
  border-color: rgba(217, 154, 43, .28);
  border-top-color: #d99a2b;
  background: rgba(217, 154, 43, .07);
}
.order-column-delivered {
  border-color: rgba(31, 122, 90, .28);
  border-top-color: var(--brand);
  background: rgba(31, 122, 90, .06);
}
.order-column h3 {
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.order-column h3::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--line);
}
.order-column-open h3 { color: var(--danger); }
.order-column-open h3::before { background: #d84a3a; }
.order-column-assigned h3 { color: #8a5d13; }
.order-column-assigned h3::before { background: #d99a2b; }
.order-column-delivered h3 { color: var(--brand); }
.order-column-delivered h3::before { background: var(--brand); }
.order-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 12px;
  margin-bottom: 10px;
}
.order-card header, .order-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.order-card ul { margin: 10px 0; padding-left: 18px; color: var(--muted); }
.order-card footer { flex-wrap: wrap; }
.order-card small { color: var(--muted); }
.delivered-group-card p {
  margin: 0;
}
.source-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pos-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}
.pos-layout,
.pos-layout > *,
.pos-products,
.menu-products,
.category-pills,
.product-card,
.cart-panel {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.category-pills { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 12px; }
.category-pills button { flex: 0 0 auto; white-space: nowrap; }
.category-pills .is-active { border-color: var(--brand); color: var(--brand); }
.pos-products, .menu-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.qr-preview-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px));
  gap: 10px;
  margin: 12px 0 8px;
}
.qr-preview-summary button {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 12px;
  min-height: 84px;
  text-align: left;
  color: var(--ink);
  box-shadow: none;
}
.qr-preview-summary button:hover,
.qr-preview-summary button.is-active {
  border-color: var(--brand);
  background: #eef7f1;
}
.qr-preview-summary button.is-active {
  box-shadow: inset 0 0 0 1px var(--brand);
}
.qr-preview-summary span {
  color: var(--muted);
  display: block;
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
}
.qr-preview-summary strong {
  display: block;
  font-size: 1.8rem;
  margin-top: 4px;
}
.qr-preview-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.preview-product.is-disabled {
  opacity: .72;
  background: rgba(255,255,255,.72);
}
.preview-product.is-disabled img {
  filter: grayscale(.45);
}
.preview-product-head {
  display: grid;
  gap: 8px;
}
.preview-product-head h3 {
  margin: 0;
}
.preview-product footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.product-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  overflow: hidden;
  display: grid;
  min-width: 0;
}
.product-card img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  background: #ebe5d8;
}
.product-card .body { padding: 12px; display: grid; gap: 8px; }
.product-card p { margin: 0; font-size: .92rem; }
.product-short-description {
  display: -webkit-box;
  min-height: 2.8em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.price { color: var(--brand); font-weight: 900; }
.cart-panel {
  align-self: start;
  padding: 14px;
  position: sticky;
  top: 14px;
  display: grid;
  gap: 12px;
}
.cart-panel h3 { margin: 0; }
.cart-panel label { gap: 6px; }
.cart-panel textarea {
  min-height: 92px;
  max-height: 160px;
  resize: vertical;
}
.cart-panel .primary {
  min-height: 44px;
  padding: 0 16px;
}
.cart-row {
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
  display: grid;
  gap: 6px;
}
.cart-row footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.item-note-field {
  gap: 5px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
}
.item-note-field textarea {
  min-height: 58px;
  resize: vertical;
  font-size: .9rem;
  line-height: 1.25;
}
.has-item-note {
  display: grid;
  gap: 5px;
}
.has-item-note em,
.item-note-alert {
  display: block;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(217, 154, 43, .45);
  border-radius: 10px;
  background: #fff3d7;
  color: #7b3f1c;
  font-size: .78rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1.25;
  margin-top: 4px;
  padding: 6px 8px;
}
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.stepper button { width: 34px; min-height: 34px; padding: 0; }

.settings-grid {
  display: grid;
  grid-template-columns: minmax(240px, .6fr) minmax(280px, 1fr);
  gap: 14px;
  align-items: start;
}
.form-card { padding: 18px; display: grid; gap: 13px; }
[data-panel="menu"] .settings-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
[data-panel="product-categories"] .category-settings-grid {
  grid-template-columns: minmax(0, 520px);
}
[data-panel="menu"] .form-card,
[data-panel="product-categories"] .form-card {
  align-self: start;
  gap: 10px;
  padding: 14px;
  box-shadow: 0 12px 32px rgba(39, 37, 34, .07);
}
.site-settings-form {
  max-width: 1080px;
}
.site-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.site-settings-form textarea {
  resize: vertical;
}
.site-settings-form > .primary {
  justify-self: start;
}
[data-panel="menu"] .form-card h2,
[data-panel="product-categories"] .form-card h2 {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  margin-bottom: 2px;
}
[data-panel="menu"] .form-card label,
[data-panel="product-categories"] .form-card label {
  gap: 5px;
  font-size: .78rem;
}
[data-panel="menu"] .form-card input,
[data-panel="menu"] .form-card select,
[data-panel="menu"] .form-card textarea,
[data-panel="product-categories"] .form-card input {
  min-height: 38px;
  padding: 9px 10px;
}
[data-panel="menu"] .form-card textarea {
  min-height: 82px;
  resize: vertical;
}
[data-panel="menu"] .form-card > button,
[data-panel="product-categories"] .form-card > button {
  justify-self: start;
  min-height: 38px;
  padding: 0 18px;
}
[data-category-form] {
  grid-template-columns: minmax(0, 1fr) 96px;
}
[data-category-form] > .kicker,
[data-category-form] > h2,
[data-category-form] > input[type="hidden"] {
  grid-column: 1 / -1;
}
[data-category-form] .check {
  align-self: center;
}
[data-category-form] > button {
  justify-self: end;
}
[data-product-form] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-product-form] > .kicker,
[data-product-form] > h2,
[data-product-form] > input[type="hidden"],
[data-product-form] > label:nth-of-type(3),
[data-product-form] > .rich-editor-label,
[data-product-form] > .product-image-upload,
[data-product-form] > label:nth-of-type(7),
[data-product-form] > .check,
[data-product-form] > button {
  grid-column: 1 / -1;
}
.product-image-upload {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.58);
  padding: 12px;
}
.product-image-upload input[type="file"] {
  border: 0;
  background: white;
  padding: 10px;
}
.product-image-upload small {
  color: var(--muted);
  font-weight: 800;
}
.product-image-upload img {
  width: min(220px, 100%);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  object-fit: cover;
  object-position: center;
  background: #ebe5d8;
}
.rich-editor-label { gap: 8px; }
.rich-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px 6px 0 0;
  background: rgba(255,255,255,.72);
  padding: 6px;
}
.rich-editor-toolbar button {
  min-height: 32px;
  padding: 0 9px;
}
.rich-editor {
  min-height: 136px;
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: white;
  color: var(--ink);
  padding: 10px;
  font-weight: 500;
  line-height: 1.6;
}
.rich-editor:focus {
  outline: 2px solid var(--brand-2);
  outline-offset: 0;
}
.rich-editor:empty::before {
  content: "Ürünün detaylı açıklaması, içerik bilgisi, görseli veya tablosu...";
  color: var(--muted);
}
.rich-editor img,
.rich-content img {
  border-radius: 6px;
  height: auto;
  margin: 8px 0;
}
.rich-editor table,
.rich-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}
.rich-editor th,
.rich-editor td,
.rich-content th,
.rich-content td {
  border: 1px solid var(--line);
  padding: 8px;
  text-align: left;
}
.rich-editor ul,
.rich-editor ol,
.rich-content ul,
.rich-content ol {
  padding-left: 22px;
}
.catalog-list { display: grid; gap: 8px; margin-top: 14px; }
.catalog-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 9px 10px;
}
.catalog-row img { width: 76px; height: 62px; object-fit: cover; border-radius: 6px; background: #ebe5d8; }
.catalog-row strong {
  display: block;
  line-height: 1.2;
}
.catalog-row p {
  margin: 3px 0 0;
  font-size: .86rem;
}
.catalog-row button {
  min-height: 36px;
  padding: 0 12px;
}
.staff-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.staff-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 12px;
}
.staff-row p {
  margin: 4px 0 0;
}

.qr-layout,
.staff-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.qr-layout .form-card,
.staff-layout .form-card {
  position: sticky;
  top: 14px;
}
.qr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.qr-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 14px;
  display: grid;
  gap: 10px;
}
.qr-card img { width: 180px; height: 180px; margin: 0 auto; image-rendering: crisp-edges; }
.qr-card code { color: var(--muted); overflow-wrap: anywhere; }
.qr-card footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.qr-card footer a,
.qr-card footer button {
  flex: 1 1 96px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  font-size: .9rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.qr-card footer a.primary {
  border-color: var(--brand);
  background: var(--brand);
  color: white;
}
.qr-card footer a:not(.primary):hover,
.qr-card footer button:hover {
  border-color: rgba(31, 122, 90, .32);
  background: rgba(31, 122, 90, .06);
}

.modal { border: 0; border-radius: var(--radius); padding: 0; background: transparent; }
.modal::backdrop { background: rgba(0,0,0,.32); }
.modal-close { position: absolute; right: 12px; top: 12px; width: 34px; min-height: 34px; padding: 0; }
.payment-modal .form-card {
  width: min(620px, calc(100vw - 28px));
}
.product-detail-modal .form-card {
  width: min(520px, calc(100vw - 28px));
}
.support-modal .form-card {
  width: min(620px, calc(100vw - 28px));
}
.account-modal .form-card {
  width: min(980px, calc(100vw - 28px));
  max-height: min(88vh, 860px);
  overflow: auto;
}
.account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 16px;
}
.account-tabs button {
  min-height: 40px;
}
.account-tabs button.is-active {
  border-color: rgba(31, 122, 90, .34);
  background: rgba(31, 122, 90, .1);
  color: var(--brand);
}
.account-panel {
  display: none;
}
.account-panel.is-active {
  display: block;
}
.account-panel > form {
  display: grid;
  gap: 12px;
}
.account-sound-card {
  margin-top: 14px;
  border: 1px solid rgba(31, 122, 90, .18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .58);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.account-sound-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .92rem;
}
.account-site-settings {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.support-source {
  border: 1px solid rgba(31, 122, 90, .22);
  border-radius: var(--radius);
  background: rgba(31, 122, 90, .07);
  padding: 12px;
  display: grid;
  gap: 4px;
}
.support-source span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
}
.support-source strong {
  color: var(--brand);
}
.support-history {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.support-history .panel-head {
  margin-bottom: 8px;
}
.support-history h3 {
  margin: 4px 0 0;
}
.support-history-list {
  display: grid;
  gap: 8px;
  max-height: 240px;
  overflow: auto;
}
.changelog-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
}
.changelog-entry {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(31,122,90,.07), rgba(255,255,255,.9));
  padding: 10px 12px;
}
.changelog-entry summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.changelog-entry summary::-webkit-details-marker {
  display: none;
}
.changelog-entry summary strong {
  border-radius: 999px;
  background: var(--brand);
  color: white;
  font-size: .78rem;
  padding: 5px 9px;
}
.changelog-entry summary span {
  font-weight: 900;
}
.changelog-entry ul {
  margin: 10px 0 0;
  padding-left: 20px;
  color: var(--ink);
}
.changelog-entry li + li {
  margin-top: 6px;
}
.support-request-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 10px;
}
.support-request-row header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.support-request-row small {
  color: var(--muted);
  display: block;
  font-weight: 800;
  margin-top: 6px;
}
.support-request-row p {
  margin: 8px 0 0;
  max-height: 4.8em;
  overflow: auto;
}
.management-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.management-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.82);
  padding: 16px;
}
.management-card h3 {
  font-size: 1.28rem;
  margin-bottom: 12px;
}
.report-section-card {
  background:
    linear-gradient(135deg, rgba(31,122,90,.08), rgba(255,255,255,.88) 42%),
    rgba(255,255,255,.86);
}
.management-wide {
  grid-column: 1 / -1;
}
.management-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.management-profit-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.management-supplier-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.management-stats article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 14px;
}
.dashboard-metric-card {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  box-shadow: 0 12px 30px rgba(36, 25, 17, .08);
}
.dashboard-metric-card::before {
  content: "";
  position: absolute;
  right: -26px;
  top: -30px;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  background: conic-gradient(from 120deg, rgba(31,122,90,.24), rgba(232,165,55,.18), rgba(255,255,255,.1));
}
.dashboard-metric-card.tone-2::before {
  background: conic-gradient(from 120deg, rgba(232,165,55,.28), rgba(31,122,90,.16), rgba(255,255,255,.1));
}
.dashboard-metric-card.tone-3::before {
  background: conic-gradient(from 120deg, rgba(55,92,232,.16), rgba(31,122,90,.22), rgba(255,255,255,.1));
}
.dashboard-metric-card i,
.payment-method-row i,
.product-performance-row i,
.expense-distribution-row i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand) var(--value), rgba(31,122,90,.1) 0);
  margin-top: 10px;
}
.dashboard-metric-card i {
  position: relative;
  z-index: 1;
}
.profit-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 14px;
  min-width: 0;
}
.profit-card {
  position: relative;
  overflow: hidden;
}
.profit-card::after {
  content: "";
  position: absolute;
  inset: auto 12px 12px auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: conic-gradient(var(--brand), rgba(31,122,90,.12));
  opacity: .22;
}
.profit-card.is-expense::after,
.profit-card.is-negative::after {
  background: conic-gradient(var(--danger), rgba(179,66,53,.12));
}
.management-stats span,
.management-row small,
.profit-card span {
  color: var(--muted);
  font-weight: 800;
}
.management-stats strong,
.profit-card strong {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  margin: 4px 0;
  overflow-wrap: anywhere;
}
.profit-card.is-positive strong {
  color: var(--brand);
}
.profit-card.is-negative {
  border-color: rgba(179,66,53,.36);
  background: rgba(179,66,53,.06);
}
.profit-card.is-negative strong,
.profit-card.is-expense strong {
  color: var(--danger);
}
.management-card h4 {
  font-size: 1rem;
  margin: 8px 0 10px;
}
.report-note {
  border-left: 3px solid rgba(31,122,90,.36);
  color: var(--muted);
  font-size: .9rem;
  margin: -2px 0 12px;
  padding-left: 10px;
}
.report-detail-link {
  min-height: auto;
  border: 0;
  background: transparent;
  color: inherit;
  display: inline;
  padding: 0;
  font: inherit;
  font-weight: 950;
  text-align: left;
  cursor: pointer;
}
.report-detail-link:hover {
  color: var(--brand);
  text-decoration: underline;
}
.payment-method-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}
.payment-method-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 12px;
  display: grid;
  gap: 8px;
  min-width: 0;
}
.payment-method-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
}
.payment-method-row span,
.payment-method-row small {
  color: var(--muted);
  font-weight: 800;
}
.payment-method-row small {
  grid-column: 1 / -1;
  font-size: .78rem;
}
.payment-method-row i {
  grid-column: 1 / -1;
  margin-top: 2px;
}
.expense-distribution-row > b {
  position: relative;
  background: conic-gradient(var(--color) var(--value), rgba(31,122,90,.1) 0);
  box-shadow: 0 0 0 4px rgba(31,122,90,.08);
}
.expense-distribution-row > b::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: white;
}
.expense-distribution-row i {
  background: linear-gradient(90deg, var(--color) var(--value), rgba(31,122,90,.1) 0);
}
.product-performance-row > b {
  background: linear-gradient(135deg, var(--brand), #e8a537);
  color: white;
}
.product-performance-row.is-low > b {
  background: linear-gradient(135deg, #b34235, #e8a537);
}
.product-performance-row i {
  height: 6px;
}
.product-performance-row.is-low i {
  background: linear-gradient(90deg, #b34235 var(--value), rgba(179,66,53,.1) 0);
}
.supplier-balance-row > b {
  color: white;
}
.supplier-balance-row.is-debt > b {
  background: linear-gradient(135deg, #b34235, #e8a537);
}
.supplier-balance-row.is-credit > b {
  background: linear-gradient(135deg, var(--brand), #4aa37d);
}
.supplier-balance-row i {
  display: block;
  height: 7px;
  border-radius: 999px;
  margin-top: 10px;
}
.supplier-balance-row.is-debt i {
  background: linear-gradient(90deg, #b34235 var(--value), rgba(179,66,53,.1) 0);
}
.supplier-balance-row.is-credit i {
  background: linear-gradient(90deg, var(--brand) var(--value), rgba(31,122,90,.1) 0);
}
.management-list {
  display: grid;
  gap: 8px;
}
.expense-screen {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.expense-screen > .expense-form,
.expense-screen > .expense-list-card {
  width: 100%;
  max-width: 100%;
}
.expense-layout {
  display: grid;
  grid-template-columns: minmax(300px, 410px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}
.expense-results-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  gap: 16px;
  align-items: start;
  min-width: 0;
}
.expense-category-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}
.expense-category-layout .form-card {
  position: sticky;
  top: 14px;
}
.expense-layout.is-waiter {
  grid-template-columns: minmax(0, 620px);
}
.expense-form {
  align-self: start;
}
.expense-form-grid,
.expense-results-grid,
.expense-admin-grid,
.expense-summary-grid,
.compact-form {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.expense-form-grid,
.compact-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.expense-form-grid label {
  min-width: 0;
}
.expense-wide-field {
  grid-column: span 2;
}
.expense-admin-grid {
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
}
.expense-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.expense-summary-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px;
  background: rgba(255,255,255,.84);
  min-width: 0;
}
.expense-summary-grid span,
.expense-summary-grid small {
  color: var(--muted);
  font-weight: 800;
}
.expense-summary-grid strong {
  display: block;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  margin: 4px 0;
  overflow-wrap: anywhere;
}
.expense-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, .8fr)) minmax(150px, 1fr) minmax(130px, .9fr) minmax(190px, 1.2fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.76);
  padding: 12px;
  min-width: 0;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.expense-list,
.expense-category-list {
  display: grid;
  gap: 10px;
}
.expense-list-card {
  min-width: 0;
}
.expense-screen .expense-list-card {
  align-self: start;
}
.expense-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.expense-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.82);
  padding: 12px;
  min-width: 0;
}
.expense-row-main {
  min-width: 0;
}
.expense-row header {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: flex-start;
}
.expense-row header span {
  color: var(--brand);
  font-weight: 950;
  white-space: nowrap;
}
.expense-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.expense-meta span {
  border-radius: 999px;
  background: rgba(31,122,90,.08);
  color: var(--brand);
  font-size: .76rem;
  font-weight: 850;
  padding: 4px 8px;
}
.expense-meta span.supplier-movement-chip.is-supplier-purchase {
  background: rgba(179,66,53,.1);
  color: #b34235;
}
.expense-meta span.supplier-movement-chip.is-supplier-payment {
  background: rgba(31,122,90,.1);
  color: var(--brand);
}
.supplier-flow {
  font-weight: 950;
}
.expense-row p,
.expense-row small,
.expense-category-row small {
  color: var(--muted);
  margin: 6px 0 0;
}
.expense-detail {
  margin-top: 7px;
}
.expense-detail summary {
  color: var(--brand);
  cursor: pointer;
  font-weight: 850;
}
.expense-detail p {
  max-height: 6.2em;
  overflow: auto;
}
.expense-row footer,
.expense-category-row footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}
.expense-dot {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 999px;
  margin-top: 5px;
  box-shadow: 0 0 0 4px rgba(31,122,90,.08);
}
.expense-category-card {
  min-width: 0;
}
.expense-category-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.82);
  padding: 12px;
  min-width: 0;
}
.expense-category-row footer {
  grid-column: 2 / -1;
  justify-content: flex-start;
}
.supplier-card {
  min-width: 0;
}
.supplier-layout {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.supplier-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.supplier-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.82);
  padding: 12px;
  min-width: 0;
}
.supplier-row small {
  display: block;
  color: var(--muted);
  font-weight: 800;
  margin-top: 4px;
}
.supplier-row > b {
  display: grid;
  gap: 2px;
  min-width: 112px;
  color: var(--muted);
  font-size: .78rem;
  text-align: right;
}
.supplier-row > b small {
  color: var(--ink);
  font-size: .98rem;
  margin: 0;
}
.supplier-row.is-debt > b small {
  color: #c4433b;
}
.supplier-row.is-credit > b small {
  color: var(--brand);
}
.supplier-row footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.empty-state {
  border: 1px dashed rgba(39,37,34,.22);
  border-radius: var(--radius);
  color: var(--muted);
  font-weight: 800;
  padding: 14px;
  text-align: center;
  background: rgba(255,255,255,.52);
}
.management-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 12px;
}
.management-row > b {
  display: grid;
  place-items: center;
  min-height: 42px;
  border-radius: 8px;
  background: rgba(31,122,90,.1);
  color: var(--brand);
}
.management-row.is-danger > b {
  background: rgba(179,66,53,.1);
  color: var(--danger);
}
.management-row strong,
.management-row small {
  display: block;
}
.management-row > span {
  font-weight: 900;
  white-space: nowrap;
}
.table-detail-modal .form-card {
  width: min(760px, calc(100vw - 28px));
  max-height: min(86vh, 820px);
  overflow: auto;
}
.report-detail-modal .form-card {
  width: min(720px, calc(100vw - 28px));
  max-height: min(86vh, 760px);
  overflow: auto;
}
.report-detail-list {
  display: grid;
  gap: 10px;
}
.report-detail-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  display: grid;
  gap: 7px;
  padding: 12px;
}
.report-detail-row header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.report-detail-row header span {
  color: var(--brand);
  font-weight: 950;
  white-space: nowrap;
}
.report-detail-row.is-supplier-purchase,
.expense-row.is-supplier-purchase {
  border-color: rgba(179,66,53,.34);
  border-left: 4px solid #b34235;
  background: rgba(179,66,53,.045);
}
.report-detail-row.is-supplier-payment,
.expense-row.is-supplier-payment {
  border-color: rgba(31,122,90,.34);
  border-left: 4px solid var(--brand);
  background: rgba(31,122,90,.045);
}
.report-detail-row.is-supplier-purchase header span,
.expense-row.is-supplier-purchase header span,
.supplier-flow.is-supplier-purchase {
  color: #b34235;
}
.report-detail-row.is-supplier-payment header span,
.expense-row.is-supplier-payment header span,
.supplier-flow.is-supplier-payment {
  color: var(--brand);
}
.report-detail-row small {
  color: var(--muted);
  font-weight: 800;
}
.report-detail-row p {
  margin: 0;
}
.report-detail-row summary {
  color: var(--brand);
  cursor: pointer;
  font-weight: 900;
}
.table-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.table-detail-summary article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 10px;
}
.table-detail-summary span {
  color: var(--muted);
  display: block;
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
}
.table-detail-summary strong {
  display: block;
  margin-top: 4px;
}
.table-detail-list {
  display: grid;
  gap: 10px;
}
.table-detail-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 12px;
}
.table-detail-row header,
.table-detail-row footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.table-detail-row p {
  margin: 4px 0 0;
}
.table-detail-row ul {
  color: var(--muted);
  margin: 10px 0;
  padding-left: 18px;
}
.table-detail-row li strong,
.table-detail-row footer strong {
  color: var(--ink);
}
.product-detail-modal img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: #ebe5d8;
}
.product-detail-modal h2 {
  margin-bottom: 0;
}
.product-detail-modal .rich-content {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.65;
}
.rich-content p {
  color: var(--ink);
  margin: 0 0 10px;
}
.rich-content a {
  color: var(--brand);
  font-weight: 900;
  text-decoration: underline;
}
.payment-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.payment-modes .is-active {
  border-color: var(--brand);
  color: var(--brand);
}
.payment-summary,
.payment-change {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.payment-summary span,
.payment-change span {
  color: var(--muted);
  font-weight: 800;
}
.payment-summary span {
  display: grid;
  gap: 4px;
}
.payment-summary b {
  color: var(--muted);
}
.payment-summary small {
  color: var(--ink);
  font-weight: 800;
  line-height: 1.35;
}
.payment-summary strong,
.payment-change strong {
  font-size: 1.45rem;
}
.payment-change {
  background: rgba(31, 122, 90, .08);
  border-color: rgba(31, 122, 90, .24);
}
.payment-change.is-change {
  background: rgba(31, 122, 90, .1);
  border-color: rgba(31, 122, 90, .34);
  color: var(--brand);
}
.payment-change.is-change span,
.payment-change.is-change strong {
  color: var(--brand);
}
.payment-change.is-short {
  background: rgba(179, 66, 53, .09);
  border-color: rgba(179, 66, 53, .36);
  color: var(--danger);
}
.payment-change.is-short span,
.payment-change.is-short strong {
  color: var(--danger);
}
.split-panel,
.pending-settlement,
.full-bill-panel,
.order-log-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .6);
  padding: 12px;
}
.pending-settlement {
  border-color: rgba(217, 154, 43, .28);
  background: rgba(217, 154, 43, .07);
}
.split-panel .panel-head,
.pending-settlement .panel-head,
.full-bill-panel .panel-head,
.order-log-panel .panel-head {
  margin-bottom: 10px;
}
.split-panel h3,
.pending-settlement h3,
.full-bill-panel h3,
.order-log-panel h3 {
  margin: 4px 0 0;
}
.split-list,
.pending-settlement-list,
.full-bill-list,
.order-log-list {
  display: grid;
  gap: 8px;
  max-height: min(38vh, 360px);
  overflow: auto;
}
.order-log-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.order-log-total {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 10px;
  display: grid;
  gap: 6px;
}
.order-log-total .badge {
  width: fit-content;
}
.order-log-total small {
  color: var(--muted);
  font-weight: 800;
}
.split-row,
.settlement-row,
.bill-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 10px;
}
.split-row p,
.settlement-row p,
.bill-detail-row p {
  margin: 4px 0 0;
}
.split-row .stepper,
.settlement-row .stepper {
  justify-content: flex-end;
}
.order-log-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 10px;
}
.order-log-row header,
.order-log-row footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.order-log-row p {
  margin: 4px 0 0;
}
.order-log-row ul {
  margin: 10px 0;
  padding-left: 18px;
  color: var(--muted);
}
.order-log-row li strong {
  color: var(--ink);
}
.order-log-row footer {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}
.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: min(380px, calc(100% - 36px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast[hidden] {
  display: none;
}
.toast-item {
  position: relative;
  border-radius: var(--radius);
  background: var(--ink);
  color: white;
  padding: 14px 46px 14px 16px;
  box-shadow: var(--shadow);
  font-weight: 800;
  display: grid;
  gap: 8px;
  pointer-events: auto;
}
.toast-item span {
  font-weight: 700;
}
.toast-item button {
  width: fit-content;
  min-height: 38px;
  border-color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.14);
  color: white;
  padding: 0 12px;
}
.toast-item .toast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border-color: rgba(255,255,255,.35);
}
.toast-item.is-alert {
  background: var(--brand);
  color: white;
  border: 2px solid rgba(255, 255, 255, .82);
  box-shadow: 0 18px 60px rgba(31, 122, 90, .34);
  animation: toast-pulse 1s ease-in-out infinite;
}
@keyframes toast-pulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.touch-mode button,
.touch-mode .top-actions a,
.touch-mode .top-dropdown summary,
.touch-mode input,
.touch-mode select,
.touch-mode textarea {
  min-height: 52px;
  font-size: 1rem;
}
.touch-mode .toast-item button {
  min-height: 38px;
}
.touch-mode .toast-item .toast-close {
  min-height: 30px;
}
.touch-mode .panel-actions a,
.touch-mode .panel-actions button {
  min-height: 40px;
  font-size: .95rem;
}
.touch-mode .icon-button {
  width: 52px;
}
.touch-mode .table-card {
  gap: 12px;
  padding: 16px;
}
.touch-mode .table-card footer,
.touch-mode .preview-product footer {
  gap: 10px;
}
.touch-mode .product-card .body {
  gap: 10px;
  padding: 14px;
}
.touch-mode .cart-panel textarea {
  min-height: 104px;
  resize: vertical;
}
.touch-mode .cart-panel .primary {
  min-height: 54px;
  font-size: 1rem;
}

.customer-page { background: var(--bg); }
.customer-shell { width: min(980px, calc(100% - 24px)); margin: 0 auto; padding: 18px 0 120px; }
.customer-top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(247,243,234,.92);
  backdrop-filter: blur(14px);
  padding: 12px 0;
}
.customer-top h1 { font-size: clamp(2rem, 9vw, 4.2rem); }
.customer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.waiter-call-button {
  border-color: #c58a2a;
  background: #fff7e8;
  color: #8a5a12;
}
.waiter-call-button:not(:disabled):hover {
  border-color: #a66b12;
  color: #6f4509;
}
.waiter-call-button:disabled {
  opacity: .72;
  cursor: not-allowed;
}
.customer-notice {
  border: 1px solid rgba(31, 122, 90, .24);
  border-radius: var(--radius);
  background: rgba(31, 122, 90, .09);
  color: var(--brand);
  font-weight: 900;
  margin: 0 0 12px;
  padding: 10px 12px;
}
.customer-notice.is-error {
  border-color: rgba(183, 48, 48, .28);
  background: rgba(183, 48, 48, .08);
  color: #b73030;
}
.customer-demo-note {
  color: var(--muted);
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}
.customer-demo-note textarea {
  min-height: 86px;
  resize: vertical;
}
.cart-button strong,
.history-button strong {
  border-radius: 999px;
  background: var(--brand);
  color: white;
  min-width: 24px;
  min-height: 24px;
  display: grid;
  place-items: center;
}
.history-button.is-active {
  border-color: var(--brand);
  color: var(--brand);
}
.sticky {
  position: sticky;
  top: 86px;
  z-index: 9;
  background: rgba(247,243,234,.92);
  backdrop-filter: blur(14px);
}
.locked-card { padding: 22px; margin: 18px 0; }
.preview-banner {
  border: 1px solid rgba(31, 122, 90, .24);
  border-radius: var(--radius);
  background: rgba(31, 122, 90, .08);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 16px;
  padding: 12px 14px;
}
.preview-banner strong {
  color: var(--brand);
}
.preview-banner span {
  color: var(--muted);
  font-weight: 800;
}
.table-orders {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, .88);
  box-shadow: var(--shadow);
  padding: 18px;
  margin: 12px 0 16px;
}
.table-orders-head,
.bill-list li,
.table-order-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.table-orders-head h2 {
  margin: 4px 0 0;
}
.table-orders-head > strong {
  color: var(--brand);
  font-size: 1.5rem;
}
.bill-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 14px 0;
  padding: 0;
}
.bill-list li {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  padding: 10px 12px;
}
.table-order-list {
  display: grid;
  gap: 8px;
}
.table-order-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  padding: 12px;
}
.pending-orders,
.delivered-bill,
.order-history {
  margin-top: 14px;
}
.pending-orders h3,
.delivered-bill h3,
.order-history h3 {
  font-size: 1rem;
  margin-bottom: 8px;
}
.bill-list.is-pending li {
  border-color: rgba(217, 154, 43, .36);
  background: rgba(217, 154, 43, .08);
}
.table-order-card.is-pending {
  border-color: rgba(217, 154, 43, .38);
  background: rgba(217, 154, 43, .08);
}
.table-order-card.is-pending header span {
  background: rgba(217, 154, 43, .16);
  color: #8a5d13;
}
.table-order-card header span {
  border-radius: 999px;
  background: rgba(31, 122, 90, .1);
  color: var(--brand);
  font-size: .74rem;
  font-weight: 900;
  padding: 5px 8px;
}
.table-order-card ul {
  color: var(--muted);
  margin: 10px 0 0;
  padding-left: 18px;
}
.customer-cart {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(420px, 100%);
  background: var(--panel);
  box-shadow: -18px 0 50px rgba(39,37,34,.16);
  transform: translateX(102%);
  transition: transform .2s ease;
  z-index: 40;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 18px;
}
.customer-cart.is-open { transform: translateX(0); }
.customer-cart [data-cart-items] { overflow: auto; }
.customer-cart footer {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: grid;
  gap: 12px;
}
.customer-cart footer strong { font-size: 1.5rem; }

@media (max-width: 1080px) {
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace, .pos-layout, .settings-grid, .qr-layout, .staff-layout, .management-grid, .expense-layout, .expense-results-grid, .expense-admin-grid, .expense-category-layout { grid-template-columns: minmax(0, 1fr); }
  .side-panel, .cart-panel, .qr-layout .form-card, .staff-layout .form-card, .expense-category-layout .form-card { position: static; }
  .management-wide { grid-column: auto; }
}

@media (max-width: 768px) {
  body.touch-mode { overflow-x: hidden; }
  .stats-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 10px;
  }
  .stats-row article {
    min-width: 0;
    padding: 10px 6px;
  }
  .stats-row span,
  .stats-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .stats-row span {
    font-size: .62rem;
    letter-spacing: 0;
  }
  .stats-row strong {
    font-size: clamp(.95rem, 4.5vw, 1.35rem);
    margin-top: 5px;
  }
  .workspace,
  .main-panel,
  .side-panel,
  .pos-layout,
  .pos-layout > *,
  .pos-products,
  .category-pills,
  .cart-panel,
  .tabs,
  .expense-screen,
  .expense-layout,
  .expense-results-grid,
  .expense-form,
  .expense-list-card,
  .expense-admin-grid,
  .order-columns {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .main-panel { order: 1; }
  .side-panel { order: 2; }
  .tabs { flex-wrap: wrap; }
  .management-menu {
    display: block;
    flex: 1 1 132px;
    min-width: 0;
  }
  .management-menu > summary.tab {
    width: 100%;
  }
  .pos-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    overflow-x: hidden;
  }
  .pos-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .category-pills {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: thin;
  }
  .product-card {
    min-width: 0;
  }
  .product-card img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
  .cart-panel {
    position: static;
    overflow-x: hidden;
  }
  .cart-row,
  .cart-row footer,
  .stepper {
    min-width: 0;
    max-width: 100%;
  }
  [data-panel="menu"] .settings-grid,
  .site-settings-grid,
  [data-category-form],
  [data-product-form] {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-panel="menu"] .form-card {
    padding: 12px;
  }
  [data-category-form] > button,
  [data-product-form] > button {
    justify-self: stretch;
  }
  .supplier-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .supplier-row > b {
    min-width: 0;
    text-align: left;
  }
  .rich-editor {
    min-height: 118px;
  }
  .order-columns {
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
  }
  .order-column {
    width: 100%;
    min-height: auto;
    min-width: 0;
    box-sizing: border-box;
  }
  .order-column > p {
    margin-bottom: 0;
  }
  .expense-filters,
  .compact-form,
  .expense-form-grid,
  .expense-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .expense-form-grid > *,
  .expense-wide-field {
    grid-column: 1 / -1;
  }
  .expense-results-grid,
  .expense-category-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .expense-filters button,
  .expense-form .form-actions button,
  .expense-category-layout .form-actions button {
    width: 100%;
  }
  .expense-row,
  .expense-category-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .expense-dot {
    display: none;
  }
  .expense-row footer,
  .expense-category-row > .badge,
  .expense-category-row footer {
    grid-column: 1;
    justify-self: flex-start;
  }
  .expense-row header {
    flex-direction: column;
  }
  .expense-row header span {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .app-shell { width: min(100% - 18px, 1480px); padding-top: 12px; }
  .topbar, .panel-head { align-items: flex-start; flex-direction: column; }
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
  }
  .topbar h1 {
    font-size: clamp(1.9rem, 11vw, 2.7rem);
    margin-bottom: 0;
  }
  .top-actions {
    position: relative;
    justify-content: flex-end;
    width: auto;
    justify-self: end;
  }
  .mobile-action-menu > summary {
    display: inline-flex;
    min-width: 78px;
    min-height: 38px;
    padding: 0 12px;
  }
  .top-action-list {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 70;
    width: min(260px, calc(100vw - 18px));
    display: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    padding: 10px;
    box-shadow: var(--shadow);
  }
  .mobile-action-menu[open] .top-action-list {
    display: grid;
  }
  .top-action-list > button,
  .top-action-list > a,
  .top-action-list > details,
  .top-action-list .account-button,
  .top-action-list .top-dropdown > summary {
    width: 100%;
    justify-content: flex-start;
  }
  .top-dropdown-panel {
    left: 0;
    right: auto;
    position: static;
    max-width: 100%;
    min-width: 0;
    margin-top: 8px;
    box-shadow: none;
  }
  .panel-actions { justify-content: flex-start; width: 100%; }
  .tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
    gap: 6px;
  }
  .tabs > .tab,
  .management-menu > summary.tab {
    width: 100%;
    min-height: 38px;
    padding: 0 6px;
    font-size: .78rem;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .side-panel, .main-panel { padding: 12px; }
  .catalog-row { grid-template-columns: 64px minmax(0, 1fr); }
  .catalog-row button { grid-column: 1 / -1; }
  .staff-row { grid-template-columns: 1fr; }
  .payment-modes,
  .order-log-summary,
  .management-stats,
  .management-profit-stats,
  .management-supplier-summary,
  .payment-method-list,
  .management-row,
  .table-detail-summary,
  .split-row,
  .settlement-row,
  .bill-detail-row { grid-template-columns: 1fr; }
  .table-orders-head,
  .bill-list li,
  .table-order-card header,
  .table-detail-row header,
  .table-detail-row footer,
  .order-log-row header,
  .order-log-row footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .preview-banner {
    align-items: flex-start;
    flex-direction: column;
  }
  .pos-products, .menu-products { grid-template-columns: minmax(0, 1fr); }
  .management-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
  }
  .management-row > b {
    width: 36px;
    min-height: 36px;
    align-self: flex-start;
  }
  .management-row > span {
    grid-column: 2;
    justify-self: flex-start;
    white-space: normal;
  }
}

/* Cupertino / macOS inspired admin polish */
body.touch-mode {
  --bg: #f8f3eb;
  --panel: rgba(255, 255, 255, 0.6);
  --ink: #1d1d1f;
  --muted: #70706f;
  --line: rgba(120, 111, 101, 0.18);
  --brand: #2f8f6d;
  --brand-2: #d9a24a;
  --danger: #c84c3f;
  --blue: #5d7fe2;
  --shadow: 0 10px 30px rgba(0,0,0,0.03);
  --radius: 20px;
  min-height: 100svh;
  background:
    radial-gradient(circle at 10% 4%, rgba(255, 218, 185, .55), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(207, 224, 235, .72), transparent 34%),
    radial-gradient(circle at 54% 92%, rgba(232, 213, 181, .62), transparent 36%),
    linear-gradient(135deg, #fbf6ee 0%, #f7efe4 42%, #eef3f5 100%);
  background-attachment: fixed;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
body.touch-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.34), transparent 72%);
}
body.touch-mode .app-shell {
  padding-top: 18px;
}
body.touch-mode .topbar {
  position: sticky;
  top: 12px;
  z-index: 60;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.64), rgba(255,255,255,.42)),
    radial-gradient(circle at 94% 0%, rgba(180,204,214,.24), transparent 34%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,.8);
  padding: 14px 16px;
}
body.touch-mode .topbar h1 {
  font-size: clamp(2rem, 4vw, 3.35rem);
  letter-spacing: -0.055em;
  font-weight: 760;
}
body.touch-mode h1,
body.touch-mode h2,
body.touch-mode h3,
body.touch-mode h4 {
  letter-spacing: -0.035em;
}
body.touch-mode h2 {
  font-weight: 740;
}
body.touch-mode h3,
body.touch-mode h4 {
  font-weight: 700;
}
body.touch-mode .kicker {
  color: rgba(47, 143, 109, .92);
  letter-spacing: .16em;
  font-size: .68rem;
  font-weight: 800;
}
body.touch-mode .main-panel,
body.touch-mode .side-panel,
body.touch-mode .form-card,
body.touch-mode .cart-panel,
body.touch-mode .locked-card,
body.touch-mode .management-card,
body.touch-mode .stats-row article,
body.touch-mode .order-column,
body.touch-mode .table-card,
body.touch-mode .product-card,
body.touch-mode .catalog-row,
body.touch-mode .staff-row,
body.touch-mode .expense-row,
body.touch-mode .expense-category-row,
body.touch-mode .supplier-row,
body.touch-mode .payment-method-group,
body.touch-mode .management-row,
body.touch-mode .report-detail-row,
body.touch-mode .table-detail-row,
body.touch-mode .bill-detail-row,
body.touch-mode .modal .form-card {
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}
body.touch-mode .main-panel,
body.touch-mode .side-panel {
  padding: 20px;
}
body.touch-mode .stats-row article {
  position: relative;
  overflow: hidden;
  min-height: 120px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.touch-mode .stats-row article::after {
  content: "";
  position: absolute;
  right: -24px;
  top: -24px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,143,109,.18), rgba(47,143,109,0) 68%);
}
body.touch-mode .stats-row article:nth-child(2)::after {
  background: radial-gradient(circle, rgba(217,162,74,.22), rgba(217,162,74,0) 68%);
}
body.touch-mode .stats-row article:nth-child(3)::after {
  background: radial-gradient(circle, rgba(93,127,226,.18), rgba(93,127,226,0) 68%);
}
body.touch-mode .stats-row article:hover,
body.touch-mode .management-card:hover,
body.touch-mode .table-card:hover,
body.touch-mode .order-card:hover,
body.touch-mode .product-card:hover,
body.touch-mode .management-row:hover,
body.touch-mode .expense-row:hover {
  transform: scale(1.02);
  box-shadow: 0 18px 45px rgba(72, 56, 40, .07);
}
body.touch-mode button,
body.touch-mode .top-actions a,
body.touch-mode .panel-actions a,
body.touch-mode .panel-actions button,
body.touch-mode .tab,
body.touch-mode .management-menu summary.tab,
body.touch-mode input,
body.touch-mode select,
body.touch-mode textarea {
  border-radius: 999px;
  font-weight: 650;
  letter-spacing: -0.015em;
  transition: transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease;
}
body.touch-mode input,
body.touch-mode select,
body.touch-mode textarea,
body.touch-mode label,
body.touch-mode p,
body.touch-mode small,
body.touch-mode span {
  letter-spacing: -0.012em;
}
body.touch-mode .stats-row span,
body.touch-mode .badge,
body.touch-mode .expense-meta span,
body.touch-mode .report-reset-badge {
  font-weight: 680;
  letter-spacing: .04em;
}
body.touch-mode .stats-row strong,
body.touch-mode .management-stats strong,
body.touch-mode .management-profit-stats strong,
body.touch-mode .management-supplier-summary strong,
body.touch-mode .expense-summary-grid strong,
body.touch-mode .profit-card strong {
  font-weight: 850;
  letter-spacing: -0.05em;
}
body.touch-mode .top-action-list {
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(255,255,255,.46);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 10px 30px rgba(0,0,0,0.025);
  padding: 6px;
}
body.touch-mode .top-action-list > button,
body.touch-mode .top-action-list > a,
body.touch-mode .top-action-list > details > summary,
body.touch-mode .top-action-list .account-button {
  min-height: 40px;
  border-color: transparent;
  background: rgba(255,255,255,.46);
  color: rgba(29,29,31,.78);
  box-shadow: none;
  font-size: .92rem;
  font-weight: 640;
  padding-inline: 16px;
}
body.touch-mode .top-action-list > button:hover,
body.touch-mode .top-action-list > a:hover,
body.touch-mode .top-action-list > details > summary:hover,
body.touch-mode .top-action-list .account-button:hover {
  border-color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.78);
  color: rgba(29,29,31,.94);
  transform: translateY(-1px) scale(1.02);
}
body.touch-mode .top-action-list > button:focus-visible,
body.touch-mode .top-action-list > a:focus-visible,
body.touch-mode .top-action-list > details > summary:focus-visible,
body.touch-mode .top-action-list .account-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 5px rgba(93,127,226,.12);
}
body.touch-mode .top-dropdown[open] summary,
body.touch-mode .top-dropdown.is-active summary {
  border-color: rgba(47,143,109,.18);
  background: rgba(47,143,109,.12);
  color: #176b50;
}
body.touch-mode textarea,
body.touch-mode .rich-editor {
  border-radius: 20px;
}
body.touch-mode button:hover,
body.touch-mode .top-actions a:hover,
body.touch-mode .panel-actions a:hover,
body.touch-mode .panel-actions button:hover,
body.touch-mode .tab:hover,
body.touch-mode .management-menu summary.tab:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
body.touch-mode .primary,
body.touch-mode button.primary,
body.touch-mode .panel-actions button.primary {
  border-color: rgba(47,143,109,.35);
  background: linear-gradient(135deg, rgba(47,143,109,.96), rgba(73,166,125,.88));
  color: #fff;
}
body.touch-mode .tab.is-active,
body.touch-mode .category-pills .is-active,
body.touch-mode .top-dropdown[open] summary,
body.touch-mode .top-dropdown.is-active summary,
body.touch-mode .management-menu[open] summary.tab,
body.touch-mode .management-menu.is-active summary.tab {
  border-color: rgba(47,143,109,.26);
  background: rgba(47,143,109,.1);
  color: #176b50;
}
body.touch-mode input,
body.touch-mode select,
body.touch-mode textarea,
body.touch-mode .rich-editor {
  border-color: rgba(120,111,101,.16);
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
body.touch-mode input:focus,
body.touch-mode select:focus,
body.touch-mode textarea:focus,
body.touch-mode .rich-editor:focus {
  outline: none;
  border-color: rgba(93,127,226,.38);
  box-shadow: 0 0 0 5px rgba(93,127,226,.1);
}
body.touch-mode .top-dropdown-panel,
body.touch-mode .management-menu-panel,
body.touch-mode .top-action-list {
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 48px rgba(56, 43, 32, .08);
}
body.touch-mode .order-columns {
  gap: 14px;
}
body.touch-mode .order-column {
  border-top-width: 0;
  min-height: 260px;
}
body.touch-mode .order-column-open {
  background: linear-gradient(160deg, rgba(255,255,255,.66), rgba(200,76,63,.08));
}
body.touch-mode .order-column-assigned {
  background: linear-gradient(160deg, rgba(255,255,255,.66), rgba(217,162,74,.11));
}
body.touch-mode .order-column-delivered {
  background: linear-gradient(160deg, rgba(255,255,255,.66), rgba(47,143,109,.1));
}
body.touch-mode .order-column h3 {
  border-bottom: 1px solid rgba(120,111,101,.12);
  padding-bottom: 10px;
}
body.touch-mode .order-card {
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 28px rgba(0,0,0,.025);
  transition: transform .3s ease, box-shadow .3s ease;
}
body.touch-mode .table-card.is-open {
  border-color: rgba(47,143,109,.22);
  background: linear-gradient(135deg, rgba(47,143,109,.11), rgba(255,255,255,.72) 54%);
}
body.touch-mode .badge,
body.touch-mode .expense-meta span,
body.touch-mode .report-reset-badge {
  border-radius: 999px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.touch-mode .management-grid {
  gap: 16px;
}
body.touch-mode .report-section-card {
  position: relative;
  overflow: hidden;
}
body.touch-mode .report-section-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, rgba(47,143,109,.85), rgba(217,162,74,.72), rgba(93,127,226,.62));
}
body.touch-mode .management-stats,
body.touch-mode .management-profit-stats,
body.touch-mode .management-supplier-summary,
body.touch-mode .expense-summary-grid {
  gap: 12px;
}
body.touch-mode .management-stats article,
body.touch-mode .management-profit-stats article,
body.touch-mode .management-supplier-summary article,
body.touch-mode .expense-summary-grid article,
body.touch-mode .profit-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 20px;
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}
body.touch-mode .management-stats article::after,
body.touch-mode .management-profit-stats article::after,
body.touch-mode .management-supplier-summary article::after,
body.touch-mode .profit-card::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: conic-gradient(rgba(47,143,109,.22), rgba(217,162,74,.18), rgba(93,127,226,.16), rgba(47,143,109,.22));
  mask: radial-gradient(circle, transparent 48%, #000 50%);
}
body.touch-mode .profit-card.is-negative,
body.touch-mode .profit-card.is-expense {
  background: linear-gradient(145deg, rgba(255,255,255,.66), rgba(200,76,63,.08));
}
body.touch-mode .profit-card.is-positive {
  background: linear-gradient(145deg, rgba(255,255,255,.66), rgba(47,143,109,.1));
}
body.touch-mode .management-row {
  transition: transform .3s ease, box-shadow .3s ease;
}
body.touch-mode .management-row > b {
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(47,143,109,.14), rgba(93,127,226,.1));
}
body.touch-mode .expense-distribution-row > b::after {
  background: rgba(255,255,255,.86);
}
body.touch-mode .expense-distribution-row i,
body.touch-mode .product-performance-row i,
body.touch-mode .supplier-balance-row i {
  height: 9px;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
body.touch-mode .payment-method-group,
body.touch-mode .expense-filters {
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.touch-mode .modal::backdrop {
  background: rgba(32, 28, 24, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 760px) {
  body.touch-mode .topbar {
    top: 8px;
    border-radius: 22px;
    padding: 12px;
  }
  body.touch-mode .stats-row article {
    min-height: 88px;
  }
  body.touch-mode .main-panel,
  body.touch-mode .side-panel {
    padding: 14px;
  }
}

/* Final admin header override: keep top menu soft and readable */
body.touch-mode .topbar .top-action-list {
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 999px;
  background: rgba(255,255,255,.48);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 10px 30px rgba(0,0,0,0.03);
  padding: 6px;
}
body.touch-mode .topbar .top-action-list > button,
body.touch-mode .topbar .top-action-list > a,
body.touch-mode .topbar .top-action-list > details > summary,
body.touch-mode .topbar .top-action-list .account-button {
  min-height: 40px;
  border-color: transparent;
  border-radius: 999px;
  background: rgba(255,255,255,.44);
  color: rgba(29,29,31,.76);
  box-shadow: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Arial, sans-serif;
  font-size: .92rem;
  font-weight: 560;
  letter-spacing: -0.02em;
  padding: 0 16px;
}
body.touch-mode .topbar .top-action-list > button:hover,
body.touch-mode .topbar .top-action-list > a:hover,
body.touch-mode .topbar .top-action-list > details > summary:hover,
body.touch-mode .topbar .top-action-list .account-button:hover {
  border-color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.82);
  color: rgba(29,29,31,.94);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 10px 24px rgba(85,70,55,.045);
}
body.touch-mode .topbar .top-dropdown[open] > summary,
body.touch-mode .topbar .top-dropdown.is-active > summary {
  border-color: rgba(47,143,109,.2);
  background: rgba(47,143,109,.12);
  color: #176b50;
}
body.touch-mode .topbar .account-button {
  color: rgba(29,29,31,.62);
}

@media (max-width: 640px) {
  body.touch-mode .topbar .top-action-list {
    border-radius: 22px;
    background: rgba(255,255,255,.82);
  }
  body.touch-mode .topbar .top-action-list > button,
  body.touch-mode .topbar .top-action-list > a,
  body.touch-mode .topbar .top-action-list > details > summary,
  body.touch-mode .topbar .top-action-list .account-button {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Cupertino admin refresh: softer typography, richer glass, calmer spacing */
body.touch-mode {
  --panel: rgba(255, 255, 255, 0.66);
  --panel-strong: rgba(255, 255, 255, 0.82);
  --panel-soft: rgba(255, 255, 255, 0.48);
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(80, 74, 68, 0.13);
  --brand: #238661;
  --brand-soft: rgba(35, 134, 97, 0.12);
  --brand-2: #c99234;
  --danger: #c2463d;
  --blue: #5e7ce2;
  --shadow: 0 18px 55px rgba(43, 35, 27, 0.055);
  --shadow-soft: 0 10px 30px rgba(43, 35, 27, 0.035);
  --radius: 24px;
  min-height: 100svh;
  overflow-x: hidden;
  isolation: isolate;
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.48;
  font-weight: 500;
  background:
    radial-gradient(circle at 4% 8%, rgba(255, 205, 154, .38), transparent 28%),
    radial-gradient(circle at 88% 3%, rgba(197, 220, 232, .72), transparent 32%),
    radial-gradient(circle at 75% 84%, rgba(214, 202, 255, .26), transparent 34%),
    radial-gradient(circle at 24% 92%, rgba(195, 231, 215, .35), transparent 30%),
    linear-gradient(135deg, #fbf7ef 0%, #f6efe5 46%, #edf3f5 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.touch-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.42), transparent 32%, rgba(255,255,255,.28) 72%, transparent),
    radial-gradient(circle at 15% 25%, rgba(255,255,255,.62), transparent 18%),
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.48), transparent 17%);
  opacity: .72;
  animation: adminMeshDrift 18s ease-in-out infinite alternate;
}

body.touch-mode::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.42), transparent 78%);
}

@keyframes adminMeshDrift {
  0% { transform: translate3d(-1.5%, -1%, 0) scale(1); filter: hue-rotate(0deg); }
  100% { transform: translate3d(1.5%, 1%, 0) scale(1.035); filter: hue-rotate(8deg); }
}

body.touch-mode .app-shell {
  position: relative;
  z-index: 1;
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: clamp(12px, 2vw, 24px);
}

body.touch-mode h1,
body.touch-mode h2,
body.touch-mode h3,
body.touch-mode h4,
body.touch-mode strong {
  color: #171719;
  letter-spacing: -0.045em;
}

body.touch-mode h1 {
  font-size: clamp(2rem, 3.7vw, 3.75rem);
  line-height: .94;
  font-weight: 760;
}

body.touch-mode h2 {
  font-size: clamp(1.45rem, 2.4vw, 2.35rem);
  line-height: 1.04;
  font-weight: 720;
}

body.touch-mode h3 {
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  line-height: 1.12;
  font-weight: 680;
}

body.touch-mode p,
body.touch-mode small,
body.touch-mode li {
  color: var(--muted);
  font-weight: 480;
}

body.touch-mode .kicker {
  color: rgba(35, 134, 97, .92);
  font-size: .67rem;
  font-weight: 760;
  letter-spacing: .15em;
}

body.touch-mode .topbar {
  position: sticky;
  top: 12px;
  z-index: 90;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.48)),
    radial-gradient(circle at 100% 0%, rgba(93,124,226,.13), transparent 30%);
  box-shadow: 0 18px 55px rgba(43, 35, 27, .07), inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter: blur(22px) saturate(1.22);
  -webkit-backdrop-filter: blur(22px) saturate(1.22);
  padding: 14px 18px;
}

body.touch-mode .topbar > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body.touch-mode .topbar h1 {
  margin: 0;
}

body.touch-mode .topbar .kicker {
  color: rgba(35, 134, 97, .86);
}

body.touch-mode .mobile-action-menu {
  justify-self: end;
  max-width: 100%;
}

body.touch-mode .mobile-action-menu > summary {
  border-radius: 999px;
  background: var(--panel-strong);
  box-shadow: var(--shadow-soft);
}

body.touch-mode .topbar .top-action-list {
  display: flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 34px rgba(43,35,27,.045);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  padding: 6px;
}

body.touch-mode .topbar .top-action-list > button,
body.touch-mode .topbar .top-action-list > a,
body.touch-mode .topbar .top-action-list > details > summary,
body.touch-mode .topbar .top-action-list .account-button,
body.touch-mode .tabs > .tab,
body.touch-mode .management-menu > summary.tab {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  color: rgba(29,29,31,.76);
  font-size: .92rem;
  font-weight: 580;
  letter-spacing: -0.025em;
  padding: 0 17px;
  box-shadow: none;
  transition: transform .26s ease, background .26s ease, border-color .26s ease, box-shadow .26s ease, color .26s ease;
}

body.touch-mode .topbar .top-action-list > button:hover,
body.touch-mode .topbar .top-action-list > a:hover,
body.touch-mode .topbar .top-action-list > details > summary:hover,
body.touch-mode .topbar .top-action-list .account-button:hover,
body.touch-mode .tabs > .tab:hover,
body.touch-mode .management-menu > summary.tab:hover {
  transform: translateY(-1px) scale(1.025);
  border-color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.86);
  color: rgba(29,29,31,.96);
  box-shadow: 0 13px 28px rgba(43,35,27,.055);
}

body.touch-mode .topbar .top-dropdown[open] > summary,
body.touch-mode .topbar .top-dropdown.is-active > summary,
body.touch-mode .tab.is-active,
body.touch-mode .management-menu[open] > summary.tab,
body.touch-mode .management-menu.is-active > summary.tab {
  border-color: rgba(35,134,97,.22);
  background: linear-gradient(135deg, rgba(35,134,97,.15), rgba(255,255,255,.74));
  color: #146749;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 10px 24px rgba(35,134,97,.08);
}

body.touch-mode .top-dropdown-panel,
body.touch-mode .management-menu-panel {
  min-width: 230px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 22px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 22px 60px rgba(43,35,27,.11);
  backdrop-filter: blur(24px) saturate(1.16);
  -webkit-backdrop-filter: blur(24px) saturate(1.16);
  padding: 8px;
}

body.touch-mode .top-dropdown-panel button,
body.touch-mode .management-menu-panel .tab {
  justify-content: flex-start;
  width: 100%;
  min-height: 40px;
  border-radius: 16px;
  background: transparent;
  color: rgba(29,29,31,.74);
  font-weight: 560;
}

body.touch-mode .top-dropdown-panel button:hover,
body.touch-mode .management-menu-panel .tab:hover {
  background: rgba(35,134,97,.1);
  color: #146749;
  transform: translateX(2px);
}

body.touch-mode .stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

body.touch-mode .stats-row article,
body.touch-mode .main-panel,
body.touch-mode .side-panel,
body.touch-mode .form-card,
body.touch-mode .cart-panel,
body.touch-mode .locked-card,
body.touch-mode .management-card,
body.touch-mode .order-column,
body.touch-mode .table-card,
body.touch-mode .product-card,
body.touch-mode .catalog-row,
body.touch-mode .staff-row,
body.touch-mode .expense-row,
body.touch-mode .expense-category-row,
body.touch-mode .supplier-row,
body.touch-mode .management-row,
body.touch-mode .report-section-card,
body.touch-mode .report-detail-row,
body.touch-mode .table-detail-row,
body.touch-mode .table-order-card,
body.touch-mode .bill-detail-row,
body.touch-mode .payment-method-group,
body.touch-mode .modal .form-card {
  border: 1px solid rgba(255,255,255,.76);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(1.16);
  -webkit-backdrop-filter: blur(20px) saturate(1.16);
}

body.touch-mode .main-panel,
body.touch-mode .side-panel,
body.touch-mode .form-card,
body.touch-mode .cart-panel {
  padding: clamp(16px, 1.8vw, 24px);
}

body.touch-mode .workspace {
  gap: 16px;
  align-items: start;
}

body.touch-mode .panel-head {
  gap: 12px;
  margin-bottom: 16px;
}

body.touch-mode .panel-head h2,
body.touch-mode .panel-head h3 {
  margin-bottom: 0;
}

body.touch-mode .stats-row article {
  isolation: isolate;
  min-height: 112px;
  padding: 18px;
  overflow: hidden;
}

body.touch-mode .stats-row article::before {
  content: "";
  position: absolute;
  inset: auto 16px 14px auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: conic-gradient(from 120deg, rgba(35,134,97,.22), rgba(201,146,52,.18), rgba(94,124,226,.16), rgba(35,134,97,.22));
  mask: radial-gradient(circle, transparent 47%, #000 49%);
  opacity: .75;
  z-index: -1;
}

body.touch-mode .stats-row span {
  color: rgba(110,110,115,.92);
  font-size: .72rem;
  font-weight: 680;
  letter-spacing: .055em;
}

body.touch-mode .stats-row strong {
  margin-top: 9px;
  font-size: clamp(1.55rem, 3vw, 2.55rem);
  font-weight: 790;
  letter-spacing: -0.06em;
}

body.touch-mode .stats-row article.has-open-orders {
  border-color: rgba(194,70,61,.24);
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(194,70,61,.12));
  box-shadow: 0 18px 52px rgba(194,70,61,.1);
}

body.touch-mode .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 18px;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 999px;
  background: rgba(255,255,255,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84);
  padding: 6px;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}

body.touch-mode button,
body.touch-mode .primary,
body.touch-mode .panel-actions a,
body.touch-mode .panel-actions button,
body.touch-mode .category-pills button,
body.touch-mode .payment-modes button,
body.touch-mode .account-tabs button {
  border-radius: 999px;
  font-weight: 610;
  letter-spacing: -0.02em;
  transition: transform .26s ease, box-shadow .26s ease, background .26s ease, border-color .26s ease, color .26s ease;
}

body.touch-mode button:hover,
body.touch-mode .panel-actions a:hover,
body.touch-mode .panel-actions button:hover,
body.touch-mode .category-pills button:hover,
body.touch-mode .payment-modes button:hover,
body.touch-mode .account-tabs button:hover {
  transform: translateY(-1px) scale(1.018);
}

body.touch-mode .primary,
body.touch-mode button.primary,
body.touch-mode .panel-actions a.primary,
body.touch-mode .panel-actions button.primary {
  border-color: rgba(35,134,97,.28);
  background: linear-gradient(135deg, #238661, #45ad83);
  color: #fff;
  box-shadow: 0 14px 30px rgba(35,134,97,.16), inset 0 1px 0 rgba(255,255,255,.28);
}

body.touch-mode .danger,
body.touch-mode .alert.danger {
  border-color: rgba(194,70,61,.22);
  background: rgba(194,70,61,.08);
  color: var(--danger);
}

body.touch-mode input,
body.touch-mode select,
body.touch-mode textarea,
body.touch-mode .rich-editor {
  min-height: 46px;
  border: 1px solid rgba(80,74,68,.13);
  border-radius: 16px;
  background: rgba(255,255,255,.74);
  color: #1d1d1f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 1px 0 rgba(255,255,255,.44);
  transition: border-color .24s ease, box-shadow .24s ease, background .24s ease;
}

body.touch-mode textarea,
body.touch-mode .rich-editor {
  border-radius: 20px;
}

body.touch-mode input:focus,
body.touch-mode select:focus,
body.touch-mode textarea:focus,
body.touch-mode .rich-editor:focus {
  outline: none;
  border-color: rgba(94,124,226,.42);
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 5px rgba(94,124,226,.11), inset 0 1px 0 rgba(255,255,255,.92);
}

body.touch-mode label {
  color: rgba(80,74,68,.76);
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

body.touch-mode .order-columns {
  gap: 14px;
}

body.touch-mode .order-column {
  min-height: 250px;
  padding: 14px;
  overflow: hidden;
}

body.touch-mode .order-column h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(80,74,68,.1);
}

body.touch-mode .order-card,
body.touch-mode .table-card,
body.touch-mode .product-card,
body.touch-mode .catalog-row,
body.touch-mode .staff-row,
body.touch-mode .expense-row,
body.touch-mode .supplier-row,
body.touch-mode .table-order-card {
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease, background .26s ease;
}

body.touch-mode .order-card {
  background: rgba(255,255,255,.76);
  box-shadow: 0 10px 28px rgba(43,35,27,.035);
}

body.touch-mode .order-card:hover,
body.touch-mode .table-card:hover,
body.touch-mode .product-card:hover,
body.touch-mode .catalog-row:hover,
body.touch-mode .staff-row:hover,
body.touch-mode .expense-row:hover,
body.touch-mode .supplier-row:hover,
body.touch-mode .table-order-card:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 45px rgba(43,35,27,.075);
}

body.touch-mode .order-column-open {
  background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(194,70,61,.085));
}

body.touch-mode .order-column-assigned {
  background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(201,146,52,.105));
}

body.touch-mode .order-column-delivered {
  background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(35,134,97,.105));
}

body.touch-mode .table-card.is-open {
  border-color: rgba(35,134,97,.22);
  background:
    radial-gradient(circle at 96% 18%, rgba(35,134,97,.18), transparent 20%),
    linear-gradient(135deg, rgba(35,134,97,.1), rgba(255,255,255,.76) 58%);
}

body.touch-mode .badge,
body.touch-mode .report-reset-badge,
body.touch-mode .expense-meta span,
body.touch-mode .payment-method-pill {
  border-radius: 999px;
  font-weight: 680;
  letter-spacing: -0.01em;
}

body.touch-mode .product-card img {
  border-radius: 20px 20px 0 0;
  filter: saturate(.98) contrast(.98);
}

body.touch-mode .cart-panel {
  background:
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.52)),
    radial-gradient(circle at 100% 0%, rgba(35,134,97,.12), transparent 28%);
}

body.touch-mode .management-stats,
body.touch-mode .management-profit-stats,
body.touch-mode .management-supplier-summary,
body.touch-mode .expense-summary-grid,
body.touch-mode .settings-grid,
body.touch-mode .qr-layout,
body.touch-mode .staff-layout,
body.touch-mode .expense-layout,
body.touch-mode .expense-results-grid,
body.touch-mode .expense-admin-grid,
body.touch-mode .expense-category-layout {
  gap: 14px;
}

body.touch-mode .management-stats article,
body.touch-mode .management-profit-stats article,
body.touch-mode .management-supplier-summary article,
body.touch-mode .expense-summary-grid article,
body.touch-mode .profit-card {
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 24px;
  background: rgba(255,255,255,.62);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(20px) saturate(1.14);
  -webkit-backdrop-filter: blur(20px) saturate(1.14);
}

body.touch-mode .management-stats strong,
body.touch-mode .management-profit-stats strong,
body.touch-mode .management-supplier-summary strong,
body.touch-mode .expense-summary-grid strong,
body.touch-mode .profit-card strong {
  font-weight: 790;
  letter-spacing: -0.055em;
}

body.touch-mode .expense-distribution-row i,
body.touch-mode .product-performance-row i,
body.touch-mode .supplier-balance-row i {
  height: 10px;
  background: rgba(35,134,97,.12);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}

body.touch-mode .modal::backdrop {
  background: rgba(30, 27, 24, .2);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
}

body.touch-mode .modal .form-card {
  background: rgba(255,255,255,.78);
  box-shadow: 0 26px 80px rgba(43,35,27,.14);
}

@media (max-width: 980px) {
  body.touch-mode .topbar {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.touch-mode .mobile-action-menu {
    justify-self: stretch;
    width: 100%;
  }

  body.touch-mode .topbar .top-action-list {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-radius: 24px;
  }

  body.touch-mode .stats-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  body.touch-mode .stats-row article {
    min-height: 86px;
    padding: 12px;
  }

  body.touch-mode .stats-row span {
    font-size: .58rem;
    letter-spacing: .025em;
  }

  body.touch-mode .stats-row strong {
    font-size: clamp(1.05rem, 4vw, 1.8rem);
    letter-spacing: -0.055em;
  }
}

@media (max-width: 640px) {
  body.touch-mode {
    font-size: 14px;
  }

  body.touch-mode .app-shell {
    padding: 10px;
  }

  body.touch-mode .topbar {
    top: 8px;
    border-radius: 26px;
    padding: 12px;
  }

  body.touch-mode .topbar h1 {
    font-size: clamp(1.85rem, 10vw, 2.55rem);
  }

  body.touch-mode .mobile-action-menu > summary {
    width: 100%;
    justify-content: space-between;
    min-height: 46px;
  }

  body.touch-mode .topbar .top-action-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 8px;
    margin-top: 8px;
  }

  body.touch-mode .topbar .top-action-list > button,
  body.touch-mode .topbar .top-action-list > a,
  body.touch-mode .topbar .top-action-list > details > summary,
  body.touch-mode .topbar .top-action-list .account-button {
    width: 100%;
    justify-content: flex-start;
    min-height: 44px;
  }

  body.touch-mode .top-dropdown-panel {
    position: static;
    width: 100%;
    margin-top: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  }

  body.touch-mode .tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-radius: 22px;
  }

  body.touch-mode .tabs > .tab,
  body.touch-mode .management-menu > summary.tab {
    width: 100%;
    min-height: 42px;
    padding: 0 10px;
    font-size: .84rem;
  }

  body.touch-mode .main-panel,
  body.touch-mode .side-panel,
  body.touch-mode .form-card,
  body.touch-mode .cart-panel {
    padding: 14px;
    border-radius: 22px;
  }

  body.touch-mode .order-column {
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.touch-mode::before {
    animation: none;
  }

  body.touch-mode *,
  body.touch-mode *::before,
  body.touch-mode *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Cupertino login refresh: animated aurora background and frosted sign-in card */
.login-page {
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  color: #f7f4ec;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  background: #0b111c;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.login-page::before {
  content: "";
  position: fixed;
  inset: -28%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 17% 24%, rgba(246, 174, 100, .78), transparent 26%),
    radial-gradient(circle at 78% 18%, rgba(92, 133, 239, .68), transparent 29%),
    radial-gradient(circle at 84% 78%, rgba(54, 184, 134, .58), transparent 30%),
    radial-gradient(circle at 34% 84%, rgba(205, 151, 255, .52), transparent 30%),
    radial-gradient(circle at 50% 48%, rgba(255, 226, 176, .22), transparent 34%),
    linear-gradient(135deg, #07111d 0%, #121726 48%, #201612 100%);
  filter: blur(22px) saturate(1.18);
  opacity: .96;
  transform: scale(1.04);
  animation: loginAuroraDance 24s ease-in-out infinite alternate;
}

.login-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(180deg, rgba(8, 12, 20, .14), rgba(8, 12, 20, .54)),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: auto, auto, 52px 52px, 52px 52px;
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.72));
}

@keyframes loginAuroraDance {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1.04) rotate(-1deg);
    filter: blur(22px) saturate(1.12) hue-rotate(0deg);
  }
  45% {
    transform: translate3d(2%, 1.5%, 0) scale(1.08) rotate(1deg);
    filter: blur(24px) saturate(1.22) hue-rotate(10deg);
  }
  100% {
    transform: translate3d(1%, -2%, 0) scale(1.06) rotate(-.5deg);
    filter: blur(22px) saturate(1.18) hue-rotate(-8deg);
  }
}

.login-page .login-shell {
  position: relative;
  z-index: 1;
  width: min(1160px, 100%);
  min-height: calc(100svh - 44px);
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 34px);
}

.login-page .login-shell::before,
.login-page .login-shell::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 30px 90px rgba(0,0,0,.1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: loginOrbFloat 12s ease-in-out infinite alternate;
}

.login-page .login-shell::before {
  width: clamp(160px, 22vw, 280px);
  height: clamp(160px, 22vw, 280px);
  left: 4%;
  bottom: 12%;
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(246,174,100,.14));
}

.login-page .login-shell::after {
  width: clamp(110px, 15vw, 190px);
  height: clamp(110px, 15vw, 190px);
  right: 8%;
  top: 18%;
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(92,133,239,.16));
  animation-delay: -4s;
}

@keyframes loginOrbFloat {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(18px, -22px, 0) scale(1.05); }
}

.login-brand {
  position: absolute;
  top: clamp(16px, 3vw, 32px);
  left: clamp(14px, 3vw, 34px);
}

.login-brand a {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  box-shadow: 0 18px 55px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  color: #fff;
  padding: 9px 15px;
  transition: transform .28s ease, background .28s ease, border-color .28s ease;
}

.login-brand a:hover {
  transform: translateY(-1px) scale(1.018);
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.18);
}

.login-page .brand-logo {
  width: clamp(108px, 15vw, 145px);
  min-width: 108px;
}

.login-page .brand-logo img {
  max-height: 31px;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.32));
}

.login-page .brand-product {
  border-left: 1px solid rgba(255,255,255,.24);
  color: #f4d596;
  padding-left: 12px;
  font-size: clamp(.98rem, 2vw, 1.2rem);
  font-weight: 680;
  letter-spacing: -0.025em;
}

.login-page .login-card {
  position: relative;
  width: min(470px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.08)),
    rgba(12, 18, 30, .54);
  box-shadow: 0 30px 100px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter: blur(26px) saturate(1.24);
  -webkit-backdrop-filter: blur(26px) saturate(1.24);
  padding: clamp(28px, 5vw, 46px);
  gap: 18px;
}

.login-page .login-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
}

.login-page .login-card::after {
  content: "";
  position: absolute;
  right: -54px;
  top: -54px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,213,150,.2), transparent 66%);
  pointer-events: none;
}

.login-page .login-card .kicker {
  color: #f4d596;
  font-size: .68rem;
  font-weight: 760;
  letter-spacing: .15em;
}

.login-page .login-card h1 {
  color: #fffaf0;
  font-size: clamp(2.05rem, 5.4vw, 3.18rem);
  line-height: 1.02;
  letter-spacing: -0.065em;
  font-weight: 760;
  margin-bottom: 0;
}

.login-page .login-card p,
.login-page .login-card label,
.login-help {
  color: rgba(255,250,240,.72);
}

.login-page .login-card label {
  font-size: .82rem;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.login-page .login-card input {
  min-height: 54px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.1);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  transition: border-color .24s ease, box-shadow .24s ease, background .24s ease, transform .24s ease;
}

.login-page .login-card input::placeholder {
  color: rgba(255,250,240,.42);
}

.login-page .login-card input:focus {
  outline: none;
  border-color: rgba(244,213,150,.64);
  background: rgba(255,255,255,.15);
  box-shadow: 0 0 0 5px rgba(244,213,150,.13), inset 0 1px 0 rgba(255,255,255,.2);
}

.login-options {
  color: rgba(255,250,240,.7);
  font-size: .88rem;
  font-weight: 560;
}

.login-options .check {
  color: rgba(255,250,240,.72);
}

.login-options input {
  accent-color: #f4d596;
}

.login-options a,
.login-help a,
.login-page .login-footer a {
  color: #f4d596;
  font-weight: 680;
}

.login-page .login-card .primary {
  min-height: 56px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: linear-gradient(135deg, #f2d28d, #c98d3a);
  color: #17120d;
  box-shadow: 0 18px 40px rgba(201,141,58,.24), inset 0 1px 0 rgba(255,255,255,.44);
  font-weight: 720;
  letter-spacing: -0.02em;
  transition: transform .28s ease, filter .28s ease, box-shadow .28s ease;
}

.login-page .login-card .primary:hover {
  transform: translateY(-1px) scale(1.018);
  filter: brightness(1.04);
  box-shadow: 0 24px 54px rgba(201,141,58,.3), inset 0 1px 0 rgba(255,255,255,.5);
}

.login-help {
  margin: 0;
  text-align: center;
  font-size: .9rem;
  font-weight: 500;
}

.login-page .login-footer {
  position: absolute;
  right: clamp(14px, 3vw, 34px);
  bottom: clamp(12px, 3vw, 26px);
  color: rgba(255,250,240,.66);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.login-page .alert.danger {
  border-color: rgba(255,123,103,.34);
  border-radius: 18px;
  background: rgba(194,70,61,.18);
  color: #ffd8d1;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 640px) {
  .login-page {
    min-height: 100svh;
    padding: 14px;
  }

  .login-page .login-shell {
    min-height: calc(100svh - 28px);
    align-content: center;
    gap: 16px;
    padding: 0;
  }

  .login-brand,
  .login-page .login-footer {
    position: static;
    justify-self: center;
  }

  .login-brand {
    width: 100%;
  }

  .login-brand a {
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
  }

  .login-page .login-card {
    border-radius: 26px;
    padding: 24px;
  }

  .login-options {
    align-items: flex-start;
    flex-direction: column;
  }

  .login-page .login-footer {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-page::before,
  .login-page .login-shell::before,
  .login-page .login-shell::after {
    animation: none;
  }
}

/* Admin mobile header and clickable KPI refinements */
body.touch-mode .stats-row article[data-stat-view] {
  cursor: pointer;
}

body.touch-mode .stats-row article[data-stat-view]:focus-visible {
  outline: none;
  border-color: rgba(94,124,226,.45);
  box-shadow: 0 0 0 5px rgba(94,124,226,.12), var(--shadow);
}

@media (max-width: 640px) {
  body.touch-mode .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  body.touch-mode .topbar > div:first-child {
    min-width: 0;
  }

  body.touch-mode .topbar .kicker {
    font-size: .58rem;
  }

  body.touch-mode .topbar h1 {
    font-size: clamp(1.55rem, 8vw, 2.18rem);
    white-space: nowrap;
  }

  body.touch-mode .mobile-action-menu {
    position: relative;
    justify-self: end;
    align-self: center;
    width: auto;
    max-width: none;
  }

  body.touch-mode .mobile-action-menu > summary {
    width: auto;
    min-width: 92px;
    min-height: 44px;
    justify-content: center;
    padding: 0 14px;
    white-space: nowrap;
  }

  body.touch-mode .topbar .top-action-list {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 120;
    display: none;
    width: min(300px, calc(100vw - 24px));
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin-top: 0;
    border-radius: 24px;
    padding: 9px;
  }

  body.touch-mode .mobile-action-menu[open] .top-action-list {
    display: grid;
  }

  body.touch-mode .topbar .top-action-list > button,
  body.touch-mode .topbar .top-action-list > a,
  body.touch-mode .topbar .top-action-list > details > summary,
  body.touch-mode .topbar .top-action-list .account-button {
    width: 100%;
    justify-content: flex-start;
  }

  body.touch-mode .topbar .top-dropdown-panel {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 7px;
  }
}

/* Final mobile action sheet fix */
@media (max-width: 640px) {
  body.touch-mode .topbar {
    overflow: visible;
  }

  body.touch-mode .mobile-action-menu {
    position: relative;
    display: block;
  }

  body.touch-mode .mobile-action-menu > summary {
    width: auto;
    min-width: 96px;
    min-height: 44px;
    border-radius: 999px;
    justify-content: center;
    padding: 0 15px;
  }

  body.touch-mode .topbar .top-action-list {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 200;
    display: none;
    width: min(368px, calc(100vw - 24px));
    max-height: min(72vh, 560px);
    overflow-y: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 28px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.74)),
      radial-gradient(circle at 95% 0%, rgba(94,124,226,.12), transparent 34%),
      radial-gradient(circle at 0% 100%, rgba(35,134,97,.12), transparent 34%);
    box-shadow: 0 24px 70px rgba(43,35,27,.16), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    padding: 10px;
    transform-origin: top right;
    animation: adminMobileMenuIn .18s ease-out;
  }

  body.touch-mode .mobile-action-menu[open] .top-action-list {
    display: grid;
  }

  body.touch-mode .topbar .top-action-list > button,
  body.touch-mode .topbar .top-action-list > a,
  body.touch-mode .topbar .top-action-list > details > summary,
  body.touch-mode .topbar .top-action-list .account-button {
    width: 100%;
    min-height: 46px;
    justify-content: flex-start;
    border-radius: 18px;
    padding: 0 14px;
    background: rgba(255,255,255,.56);
  }

  body.touch-mode .topbar .top-action-list > details {
    width: 100%;
  }

  body.touch-mode .topbar .top-dropdown-panel {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    border-radius: 20px;
    background: rgba(255,255,255,.7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  }
}

@keyframes adminMobileMenuIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Full-screen mobile admin menu */
@media (max-width: 760px) {
  body.touch-mode .topbar {
    position: relative;
    z-index: 260;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    overflow: visible;
  }

  body.touch-mode .topbar > div:first-child {
    min-width: 0;
  }

  body.touch-mode .topbar h1 {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.touch-mode .mobile-action-menu {
    position: static;
    justify-self: end;
    width: auto;
  }

  body.touch-mode .mobile-action-menu > summary {
    position: relative;
    z-index: 330;
    display: inline-flex;
    min-width: 94px;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 15px;
    white-space: nowrap;
  }

  body.touch-mode .mobile-action-menu[open]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 300;
    background:
      radial-gradient(circle at 18% 8%, rgba(255,255,255,.54), transparent 28%),
      radial-gradient(circle at 86% 14%, rgba(167,190,255,.32), transparent 30%),
      rgba(38,31,26,.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body.touch-mode .topbar .top-action-list {
    position: fixed;
    inset: 74px 12px 12px;
    z-index: 320;
    display: none;
    width: auto;
    max-width: none;
    max-height: none;
    overflow-y: auto;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 30px;
    padding: 16px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.78)),
      radial-gradient(circle at 100% 0%, rgba(94,124,226,.14), transparent 36%),
      radial-gradient(circle at 0% 100%, rgba(35,134,97,.14), transparent 36%);
    box-shadow: 0 28px 90px rgba(43,35,27,.18), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(26px) saturate(1.18);
    -webkit-backdrop-filter: blur(26px) saturate(1.18);
    transform-origin: top right;
    animation: adminMobileSheetIn .22s ease-out;
  }

  body.touch-mode .mobile-action-menu[open] .top-action-list {
    display: grid;
  }

  body.touch-mode .topbar .top-action-list::before {
    content: "Menü";
    display: block;
    margin: 0 0 4px;
    color: rgba(36,30,25,.66);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  body.touch-mode .topbar .top-action-list > button,
  body.touch-mode .topbar .top-action-list > a,
  body.touch-mode .topbar .top-action-list > details > summary,
  body.touch-mode .topbar .top-action-list .account-button {
    width: 100%;
    min-height: 54px;
    justify-content: flex-start;
    border-radius: 20px;
    padding: 0 16px;
    background: rgba(255,255,255,.62);
    color: #241e19;
    font-size: .98rem;
    font-weight: 720;
    line-height: 1.22;
    white-space: normal;
    text-align: left;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  body.touch-mode .topbar .top-action-list > button:hover,
  body.touch-mode .topbar .top-action-list > a:hover,
  body.touch-mode .topbar .top-action-list > details > summary:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.86);
  }

  body.touch-mode .topbar .top-action-list > details {
    width: 100%;
    min-width: 0;
  }

  body.touch-mode .topbar .top-dropdown-panel {
    position: static;
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 9px;
    border-radius: 22px;
    padding: 9px;
    background: rgba(255,255,255,.7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.84);
  }

  body.touch-mode .topbar .top-dropdown-panel button,
  body.touch-mode .topbar .top-dropdown-panel a {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    justify-content: flex-start;
    border-radius: 17px;
    padding: 0 13px;
    font-size: .94rem;
    line-height: 1.2;
    white-space: normal;
    text-align: left;
    overflow-wrap: anywhere;
  }
}

@keyframes adminMobileSheetIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Hard mobile overlay override: the menu itself becomes the sheet */
@media (max-width: 760px) {
  body.touch-mode .mobile-action-menu[open] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    padding: 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 14% 8%, rgba(255,255,255,.72), transparent 26%),
      radial-gradient(circle at 88% 12%, rgba(158,185,255,.28), transparent 30%),
      linear-gradient(135deg, rgba(249,241,229,.9), rgba(239,247,246,.88)) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
  }

  body.touch-mode .mobile-action-menu[open]::before {
    display: none !important;
  }

  body.touch-mode .mobile-action-menu[open] > summary {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    align-self: flex-end !important;
    width: auto !important;
    min-width: 104px !important;
    min-height: 48px !important;
    margin: 0 0 12px !important;
    border: 1px solid rgba(255,255,255,.84) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.78) !important;
    box-shadow: 0 12px 34px rgba(43,35,27,.1), inset 0 1px 0 rgba(255,255,255,.94) !important;
  }

  body.touch-mode .mobile-action-menu[open] .top-action-list {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - 86px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 10px !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.8) !important;
    border-radius: 28px !important;
    padding: 14px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.66)),
      radial-gradient(circle at 95% 0%, rgba(94,124,226,.11), transparent 35%),
      radial-gradient(circle at 0% 100%, rgba(35,134,97,.12), transparent 35%) !important;
    box-shadow: 0 24px 70px rgba(43,35,27,.15), inset 0 1px 0 rgba(255,255,255,.9) !important;
    transform: none !important;
    animation: adminMobileSheetIn .22s ease-out !important;
  }

  body.touch-mode .mobile-action-menu[open] .top-action-list::before {
    content: "Menü" !important;
    display: block !important;
    margin: 2px 2px 6px !important;
    color: rgba(36,30,25,.62) !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  body.touch-mode .mobile-action-menu[open] .top-action-list > button,
  body.touch-mode .mobile-action-menu[open] .top-action-list > a,
  body.touch-mode .mobile-action-menu[open] .top-action-list > details > summary,
  body.touch-mode .mobile-action-menu[open] .top-action-list .account-button {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-radius: 20px !important;
    padding: 0 16px !important;
    background: rgba(255,255,255,.66) !important;
    color: #241e19 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.touch-mode .mobile-action-menu[open] .top-action-list > details {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.touch-mode .mobile-action-menu[open] .top-dropdown-panel {
    position: static !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 9px 0 0 !important;
    border-radius: 22px !important;
    padding: 9px !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.84) !important;
  }

  body.touch-mode .mobile-action-menu[open] .top-dropdown-panel button,
  body.touch-mode .mobile-action-menu[open] .top-dropdown-panel a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    justify-content: flex-start !important;
    border-radius: 17px !important;
    padding: 0 13px !important;
    font-size: .96rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }
}

/* Detached mobile menu panel. JS moves the list under body to avoid parent clipping. */
@media (max-width: 760px) {
  body.admin-mobile-menu-open {
    overflow: hidden !important;
  }

  body.admin-mobile-menu-open .mobile-action-menu[open] {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.admin-mobile-menu-open .mobile-action-menu[open] > summary {
    position: fixed !important;
    top: 24px !important;
    right: 28px !important;
    z-index: 10001 !important;
    min-width: 104px !important;
    min-height: 48px !important;
    margin: 0 !important;
  }

  body.admin-mobile-menu-open > .top-action-list {
    position: fixed !important;
    inset: 12px !important;
    z-index: 10000 !important;
    display: grid !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 10px !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.78) !important;
    border-radius: 30px !important;
    padding: 74px 14px 14px !important;
    background:
      radial-gradient(circle at 14% 8%, rgba(255,255,255,.75), transparent 26%),
      radial-gradient(circle at 90% 12%, rgba(158,185,255,.28), transparent 30%),
      linear-gradient(135deg, rgba(255,255,255,.9), rgba(245,250,249,.8)) !important;
    box-shadow: 0 30px 95px rgba(43,35,27,.2), inset 0 1px 0 rgba(255,255,255,.92) !important;
    backdrop-filter: blur(26px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.18) !important;
    transform: none !important;
    animation: adminMobileSheetIn .22s ease-out !important;
  }

  body.admin-mobile-menu-open > .top-action-list::before {
    content: "Menü" !important;
    display: block !important;
    margin: 0 2px 6px !important;
    color: rgba(36,30,25,.62) !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  body.admin-mobile-menu-open > .top-action-list > button,
  body.admin-mobile-menu-open > .top-action-list > a,
  body.admin-mobile-menu-open > .top-action-list > details > summary,
  body.admin-mobile-menu-open > .top-action-list .account-button {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-radius: 20px !important;
    padding: 0 16px !important;
    background: rgba(255,255,255,.68) !important;
    color: #241e19 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.admin-mobile-menu-open > .top-action-list > details {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.admin-mobile-menu-open > .top-action-list .top-dropdown-panel {
    position: static !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 9px 0 0 !important;
    border-radius: 22px !important;
    padding: 9px !important;
    background: rgba(255,255,255,.74) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.84) !important;
  }

  body.admin-mobile-menu-open > .top-action-list .top-dropdown-panel button,
  body.admin-mobile-menu-open > .top-action-list .top-dropdown-panel a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    justify-content: flex-start !important;
    border-radius: 17px !important;
    padding: 0 13px !important;
    font-size: .96rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }
}

/* Public coffee-house inspired frontend refresh */
.coffee-inspired-home {
  background:
    radial-gradient(circle at 18% 8%, rgba(180,109,48,.24), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(47,89,70,.18), transparent 30%),
    linear-gradient(180deg, #1c120d 0, #2a1810 42%, #f5ead8 42%, #fff8eb 100%);
  color: #2a170f;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.coffee-topline {
  position: relative;
  z-index: 35;
  width: min(1180px, calc(100% - 32px));
  min-height: 44px;
  margin: 0 auto;
  color: rgba(255,246,230,.76);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.coffee-topline a {
  color: #e8bd74;
}

.coffee-inspired-home .bakery-nav {
  top: 12px;
  border-color: rgba(255,246,230,.14);
  background: rgba(39,22,14,.74);
  color: #fff6e6;
  box-shadow: 0 24px 70px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(1.1);
}

.coffee-inspired-home .bakery-brand,
.coffee-inspired-home .bakery-nav nav a {
  color: #fff6e6;
}

.coffee-inspired-home .bakery-brand span {
  color: #e8bd74;
}

.coffee-inspired-home .bakery-nav nav a {
  border-color: rgba(255,246,230,.14);
  background: rgba(255,246,230,.08);
}

.coffee-inspired-home .bakery-nav nav a:hover {
  background: rgba(232,189,116,.18);
  transform: translateY(-1px);
}

.coffee-inspired-home .bakery-nav-toggle {
  border-color: rgba(255,246,230,.18);
  background: rgba(255,246,230,.12);
}

.coffee-inspired-home .bakery-nav-toggle span {
  background: #fff6e6;
}

.coffee-inspired-home .bakery-hero {
  width: min(1280px, calc(100% - 32px));
  min-height: min(760px, 82svh);
  margin-top: clamp(20px, 4vw, 44px);
  border: 1px solid rgba(255,246,230,.09);
  border-radius: 42px;
  padding: clamp(22px, 4vw, 42px);
  background:
    radial-gradient(circle at 78% 18%, rgba(232,189,116,.16), transparent 28%),
    radial-gradient(circle at 8% 86%, rgba(94,56,31,.5), transparent 32%),
    linear-gradient(135deg, rgba(32,18,11,.98), rgba(57,33,20,.94));
  box-shadow: 0 34px 100px rgba(0,0,0,.2);
}

.coffee-inspired-home .bakery-hero-copy {
  color: #fff6e6;
}

.coffee-inspired-home .bakery-eyebrow {
  color: #e8bd74;
}

.coffee-inspired-home .bakery-hero h1 {
  color: #fff6e6;
  font-size: clamp(3.1rem, 8.6vw, 7.9rem);
  line-height: .84;
  letter-spacing: -.04em;
}

.coffee-inspired-home .bakery-hero p {
  color: rgba(255,246,230,.72);
  max-width: 680px;
}

.coffee-inspired-home .bakery-actions a {
  border-color: rgba(255,246,230,.2);
  background: rgba(255,246,230,.1);
  color: #fff6e6;
}

.coffee-inspired-home .bakery-actions .primary {
  border-color: #e8bd74;
  background: linear-gradient(180deg, #e8bd74, #a8652e);
  color: #211108;
}

.coffee-hero-meta {
  display: grid;
  grid-template-columns: minmax(0, .65fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 24px;
}

.coffee-hero-meta article {
  min-width: 0;
  border: 1px solid rgba(255,246,230,.12);
  border-radius: 22px;
  background: rgba(255,246,230,.08);
  padding: 15px;
}

.coffee-hero-meta span {
  color: #e8bd74;
  display: block;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.coffee-hero-meta strong {
  color: rgba(255,246,230,.88);
  display: block;
  font-size: .95rem;
  line-height: 1.32;
}

.coffee-inspired-home .bakery-hero-media {
  min-height: clamp(420px, 55vw, 640px);
  background:
    radial-gradient(circle at 30% 20%, rgba(232,189,116,.22), transparent 24%),
    linear-gradient(145deg, #120b08, #6d3e20);
}

.coffee-inspired-home .bakery-hero-media::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(26,13,7,.76)),
    radial-gradient(circle at 50% 100%, rgba(232,189,116,.2), transparent 38%);
}

.coffee-inspired-home .bakery-floating-card,
.coffee-inspired-home .bakery-production-rail,
.coffee-inspired-home .bakery-float-product {
  border-color: rgba(255,246,230,.18);
  background: rgba(32,18,11,.48);
  color: #fff6e6;
}

.coffee-inspired-home .bakery-floating-card span {
  background: #e8bd74;
  color: #231109;
}

.coffee-inspired-home .bakery-strip {
  margin-top: clamp(22px, 4vw, 44px);
}

.coffee-inspired-home .bakery-strip article {
  border-color: rgba(255,246,230,.12);
  background: rgba(255,246,230,.88);
  box-shadow: 0 24px 70px rgba(58,32,18,.12);
}

.coffee-inspired-home .bakery-section {
  position: relative;
}

.coffee-inspired-home .bakery-section-head {
  margin-inline: auto;
  text-align: center;
}

.coffee-inspired-home .bakery-section h2,
.coffee-inspired-home .bakery-special h2,
.coffee-inspired-home .bakery-contact h2 {
  letter-spacing: -.045em;
}

.coffee-inspired-home .bakery-category-block {
  border-color: rgba(58,32,18,.12);
  background:
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,246,230,.66)),
    radial-gradient(circle at 100% 0%, rgba(232,189,116,.16), transparent 28%);
  box-shadow: 0 24px 76px rgba(58,32,18,.1);
}

.coffee-inspired-home .bakery-category-head {
  border-bottom: 1px solid rgba(58,32,18,.1);
  padding-bottom: 14px;
}

.coffee-inspired-home .bakery-product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coffee-inspired-home .bakery-product-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  border-radius: 22px;
}

.coffee-inspired-home .bakery-product-card img {
  width: 96px;
  height: 96px;
  aspect-ratio: auto;
  border-radius: 20px;
  margin: 12px 0 12px 12px;
}

.coffee-inspired-home .bakery-product-card div {
  padding: 14px 16px;
}

.coffee-inspired-home .bakery-product-card h3 {
  font-size: clamp(1.05rem, 1.7vw, 1.32rem);
  line-height: 1.06;
}

.coffee-inspired-home .bakery-special > div,
.coffee-inspired-home .bakery-map-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,246,230,.7)),
    radial-gradient(circle at 100% 0%, rgba(168,101,46,.11), transparent 28%);
}

.coffee-inspired-home .bakery-special aside {
  background:
    linear-gradient(160deg, rgba(28,14,7,.68), rgba(111,63,31,.78)),
    var(--special-bg) center / cover;
}

.coffee-inspired-home .bakery-tech {
  background:
    radial-gradient(circle at 86% 16%, rgba(232,189,116,.2), transparent 28%),
    radial-gradient(circle at 10% 90%, rgba(31,122,90,.16), transparent 30%),
    linear-gradient(135deg, rgba(21,12,8,.98), rgba(59,32,18,.94));
}

.coffee-inspired-home .bakery-footer {
  color: rgba(255,246,230,.72);
  border-top-color: rgba(255,246,230,.12);
  margin-top: 34px;
}

.coffee-inspired-home .bakery-footer span,
.coffee-inspired-home .bakery-footer a {
  color: #e8bd74;
}

@media (max-width: 980px) {
  .coffee-inspired-home .bakery-product-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .coffee-topline {
    align-items: flex-start;
    flex-direction: column;
    padding: 10px 0 0;
  }

  .coffee-inspired-home .bakery-nav {
    top: 8px;
    border-radius: 26px;
  }

  .coffee-inspired-home .bakery-nav nav a {
    width: 100%;
  }

  .coffee-inspired-home .bakery-hero {
    border-radius: 28px;
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }

  .coffee-inspired-home .bakery-hero-media {
    min-height: 330px;
    order: 2;
  }

  .coffee-inspired-home .bakery-hero-copy {
    order: 1;
  }

  .coffee-hero-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .coffee-inspired-home .bakery-product-card {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .coffee-inspired-home .bakery-product-card img {
    width: 82px;
    height: 82px;
    border-radius: 17px;
  }
}

/* Public bakery light editorial refinement */
.coffee-inspired-home {
  background:
    radial-gradient(circle at 8% 9%, rgba(232,188,104,.26), transparent 21%),
    radial-gradient(circle at 91% 12%, rgba(170,202,182,.24), transparent 24%),
    radial-gradient(circle at 24% 70%, rgba(244,205,160,.22), transparent 28%),
    linear-gradient(180deg, #fffaf1 0%, #f8efe4 46%, #fffdf8 100%);
  color: #221710;
  font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 520;
}

.coffee-inspired-home::before,
.coffee-inspired-home::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  opacity: .45;
}

.coffee-inspired-home::before {
  left: -80px;
  top: 96px;
  width: 310px;
  height: 310px;
  background:
    radial-gradient(ellipse at 52% 8%, rgba(197,137,44,.38) 0 7%, transparent 8%),
    radial-gradient(ellipse at 43% 22%, rgba(197,137,44,.32) 0 6%, transparent 7%),
    radial-gradient(ellipse at 62% 26%, rgba(197,137,44,.28) 0 5%, transparent 6%),
    linear-gradient(98deg, transparent 48%, rgba(135,92,45,.32) 49% 51%, transparent 52%);
  border-radius: 58% 42% 62% 38%;
  filter: blur(.15px);
  transform: rotate(-27deg);
}

.coffee-inspired-home::after {
  right: -110px;
  bottom: 18%;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 48% 48%, rgba(255,255,255,.72) 0 18%, transparent 19%),
    radial-gradient(circle, rgba(214,198,172,.24), transparent 62%);
}

.coffee-inspired-home main,
.coffee-inspired-home .bakery-nav,
.coffee-topline,
.coffee-inspired-home .bakery-footer {
  position: relative;
  z-index: 1;
}

.coffee-topline {
  color: rgba(90,67,47,.78);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  min-height: 48px;
  text-transform: none;
}

.coffee-topline a {
  color: #9d6727;
}

.coffee-topline-info,
.coffee-topline-socials {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.coffee-topline-info {
  flex-wrap: wrap;
}

.coffee-topline-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  letter-spacing: .02em;
}

.coffee-topline-icon,
.coffee-topline-socials a {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8b5a24;
  background:
    radial-gradient(circle at 34% 20%, rgba(255,255,255,.9), transparent 42%),
    rgba(255,255,255,.64);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(100,74,43,.08);
  flex: 0 0 auto;
}

.coffee-topline-icon svg,
.coffee-topline-socials svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.coffee-topline-socials {
  justify-content: flex-end;
}

.coffee-topline-socials a {
  border: 1px solid rgba(160,119,70,.16);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.coffee-topline-socials a:hover {
  background: #fff8ea;
  color: #9d6727;
  transform: translateY(-2px);
}

.coffee-inspired-home .bakery-nav {
  top: 0;
  border: 1px solid rgba(255,255,255,.82);
  background: rgba(255,255,255,.72);
  color: #221710;
  box-shadow: 0 18px 55px rgba(95,70,43,.08), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(22px) saturate(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

.coffee-inspired-home .bakery-nav.is-scrolled {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  margin: 0;
  border-radius: 0 0 24px 24px;
  padding-left: max(18px, calc((100vw - 1180px) / 2 + 18px));
  padding-right: max(12px, calc((100vw - 1180px) / 2 + 12px));
  transform: none;
  z-index: 80;
  background: rgba(255,255,255,.92);
  border-color: rgba(226,211,190,.92);
  box-shadow: 0 22px 70px rgba(95,70,43,.14), inset 0 1px 0 rgba(255,255,255,.98);
}

.coffee-inspired-home .bakery-brand,
.coffee-inspired-home .bakery-nav nav a {
  color: #231711;
}

.coffee-inspired-home .bakery-brand span {
  color: #ad741e;
  font-weight: 720;
}

.coffee-inspired-home .bakery-brand b {
  font-weight: 780;
  letter-spacing: -.02em;
}

.coffee-inspired-home .bakery-nav nav a {
  border-color: rgba(171,130,80,.18);
  background: rgba(255,255,255,.58);
  color: #3a2b20;
  font-weight: 660;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.coffee-inspired-home .bakery-nav nav a:hover {
  background: #fff8ea;
  color: #8d5a1d;
  transform: translateY(-2px);
}

.coffee-inspired-home .bakery-nav-toggle {
  border-color: rgba(171,130,80,.2);
  background: rgba(255,255,255,.78);
}

.coffee-inspired-home .bakery-nav-toggle span {
  background: #2a1b12;
}

.coffee-inspired-home .bakery-hero {
  position: relative;
  overflow: hidden;
  min-height: min(720px, 80svh);
  border: 1px solid rgba(255,255,255,.82);
  background:
    radial-gradient(circle at 78% 20%, rgba(194,219,200,.42), transparent 28%),
    radial-gradient(circle at 18% 24%, rgba(249,213,154,.38), transparent 28%),
    linear-gradient(112deg, rgba(255,255,255,.92), rgba(253,243,224,.9));
  box-shadow: 0 32px 90px rgba(96,71,45,.12), inset 0 1px 0 rgba(255,255,255,.94);
}

.coffee-inspired-home .bakery-hero::before {
  content: "";
  position: absolute;
  left: -70px;
  top: -90px;
  width: 360px;
  height: 360px;
  border-radius: 52% 48% 63% 37% / 42% 60% 40% 58%;
  background:
    radial-gradient(circle at 40% 42%, rgba(210,151,58,.36), transparent 36%),
    radial-gradient(circle at 64% 50%, rgba(255,255,255,.72), transparent 32%);
  opacity: .55;
}

.coffee-inspired-home .bakery-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -90px;
  width: 380px;
  height: 260px;
  border-radius: 999px 999px 0 0;
  background: rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

.coffee-inspired-home .bakery-hero-copy {
  color: #221710;
  position: relative;
  z-index: 2;
}

.coffee-inspired-home .bakery-eyebrow {
  color: #c88a2e;
  font-weight: 760;
  letter-spacing: .14em;
}

.coffee-inspired-home .bakery-hero h1 {
  color: #231711;
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 760;
  line-height: .88;
  letter-spacing: -.055em;
}

.coffee-inspired-home .bakery-hero p {
  color: #6e5b4b;
  max-width: 660px;
  font-weight: 450;
  line-height: 1.68;
}

.coffee-inspired-home .bakery-actions a {
  border-color: rgba(152,111,63,.16);
  background: rgba(255,255,255,.74);
  color: #2a1b12;
  box-shadow: 0 16px 34px rgba(95,70,43,.08), inset 0 1px 0 rgba(255,255,255,.9);
}

.coffee-inspired-home .bakery-actions .primary {
  border-color: #c98328;
  background: linear-gradient(180deg, #e7b75d, #b66f24);
  color: #fffdf8;
  box-shadow: 0 16px 34px rgba(183,112,36,.22);
}

.coffee-inspired-home .bakery-hero-media {
  position: relative;
  z-index: 2;
  min-height: clamp(390px, 52vw, 610px);
  border: 0;
  border-radius: 52% 48% 44% 56% / 38% 36% 64% 62%;
  background:
    radial-gradient(circle at 38% 26%, rgba(255,255,255,.78), transparent 34%),
    linear-gradient(145deg, #f4dcc0, #fff6e8);
  box-shadow: 0 34px 82px rgba(112,76,38,.18);
}

.coffee-inspired-home .bakery-hero-media::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0), rgba(37,22,12,.16)),
    radial-gradient(circle at 52% 94%, rgba(255,248,238,.58), transparent 42%);
}

.coffee-inspired-home .bakery-hero-media > img {
  border-radius: inherit;
  filter: saturate(1.05) contrast(1.02);
  transition: transform .75s ease, filter .75s ease;
}

.coffee-inspired-home .bakery-hero-media:hover > img {
  transform: scale(1.045);
  filter: saturate(1.12) contrast(1.03);
}

.coffee-inspired-home .bakery-melty-line path {
  stroke: rgba(200,138,46,.5);
}

.coffee-inspired-home .bakery-floating-card,
.coffee-inspired-home .bakery-production-rail,
.coffee-inspired-home .bakery-float-product {
  border-color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.42);
  color: #2a1b12;
  box-shadow: 0 18px 48px rgba(74,49,27,.14), inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.coffee-inspired-home .bakery-floating-card span {
  background: #d8952f;
  color: #fffdf8;
}

.coffee-inspired-home .bakery-production-rail i {
  background: linear-gradient(90deg, rgba(216,149,47,.1), rgba(216,149,47,.9), rgba(84,147,116,.72));
}

.coffee-hero-meta article {
  border-color: rgba(152,111,63,.13);
  background: rgba(255,255,255,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.coffee-hero-meta span {
  color: #bd7b24;
  font-weight: 760;
}

.coffee-hero-meta strong {
  color: #4b3a2d;
  font-weight: 620;
}

.coffee-inspired-home .bakery-strip article {
  border-color: rgba(255,255,255,.76);
  background: rgba(255,255,255,.66);
  box-shadow: 0 18px 46px rgba(92,67,40,.08), inset 0 1px 0 rgba(255,255,255,.92);
}

.coffee-inspired-home .bakery-strip b {
  color: #b66f24;
  font-weight: 760;
}

.coffee-inspired-home .bakery-section {
  position: relative;
}

.coffee-inspired-home #urunler::before {
  content: "";
  position: absolute;
  left: max(-30px, calc((100vw - 1180px) / -2 + 14px));
  top: 6px;
  width: 250px;
  height: 210px;
  opacity: .26;
  background:
    radial-gradient(ellipse at 12% 20%, rgba(190,130,45,.74) 0 5%, transparent 6%),
    radial-gradient(ellipse at 24% 30%, rgba(190,130,45,.64) 0 5%, transparent 6%),
    radial-gradient(ellipse at 36% 42%, rgba(190,130,45,.58) 0 5%, transparent 6%),
    radial-gradient(ellipse at 48% 54%, rgba(190,130,45,.5) 0 5%, transparent 6%),
    linear-gradient(110deg, transparent 0 49%, rgba(126,88,42,.48) 50% 51%, transparent 52% 100%);
  transform: rotate(-20deg);
  pointer-events: none;
}

.coffee-inspired-home .bakery-section-head {
  text-align: center;
  margin-inline: auto;
}

.coffee-inspired-home .bakery-section h2,
.coffee-inspired-home .bakery-special h2,
.coffee-inspired-home .bakery-contact h2 {
  color: #231711;
  font-weight: 740;
  letter-spacing: -.035em;
}

.coffee-inspired-home .bakery-section-head p,
.coffee-inspired-home .bakery-special p,
.coffee-inspired-home .bakery-contact p {
  color: #746457;
  font-weight: 440;
  line-height: 1.72;
}

.coffee-inspired-home .bakery-category-list {
  gap: clamp(36px, 6vw, 76px);
}

.coffee-inspired-home .bakery-category-block {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

.coffee-inspired-home .bakery-category-block::before {
  display: none;
}

.coffee-inspired-home .bakery-category-head {
  margin-bottom: clamp(18px, 3vw, 30px);
  justify-content: center;
  text-align: center;
}

.coffee-inspired-home .bakery-category-head::before,
.coffee-inspired-home .bakery-category-head::after {
  content: "";
  display: block;
  width: min(180px, 22vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183,112,36,.4));
}

.coffee-inspired-home .bakery-category-head::after {
  background: linear-gradient(90deg, rgba(183,112,36,.4), transparent);
}

.coffee-inspired-home .bakery-category-head div {
  gap: 8px;
}

.coffee-inspired-home .bakery-category-head span {
  color: #231711;
  font-size: clamp(1.65rem, 4vw, 3rem);
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.coffee-inspired-home .bakery-category-head small {
  color: #9c6f38;
  font-weight: 650;
  letter-spacing: .05em;
}

.coffee-inspired-home .bakery-category-head b {
  display: none;
}

.coffee-inspired-home .bakery-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 48px);
}

.coffee-inspired-home .bakery-product-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 14px;
  border: 0;
  border-radius: 34px;
  background: transparent;
  box-shadow: none;
  padding: 0 8px 14px;
  text-align: center;
  transition: transform .32s ease, filter .32s ease;
}

.coffee-inspired-home .bakery-product-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 22px;
  z-index: -1;
  width: min(82%, 260px);
  aspect-ratio: 1;
  border-radius: 48% 52% 44% 56% / 56% 42% 58% 44%;
  background:
    radial-gradient(circle at 42% 36%, rgba(255,255,255,.9), rgba(255,255,255,.22) 46%, transparent 68%),
    linear-gradient(145deg, rgba(247,218,168,.48), rgba(198,226,204,.24));
  transform: translateX(-50%);
  box-shadow: 0 28px 70px rgba(117,82,46,.12);
}

.coffee-inspired-home .bakery-product-card::after {
  display: none;
}

.coffee-inspired-home .bakery-product-card:hover {
  transform: translateY(-8px);
  box-shadow: none;
  filter: saturate(1.04);
}

.coffee-inspired-home .bakery-product-card img {
  width: min(100%, 265px);
  height: clamp(180px, 22vw, 255px);
  aspect-ratio: auto;
  margin: 0 auto;
  border-radius: 48% 52% 42% 58% / 36% 44% 56% 64%;
  object-fit: cover;
  background: #f4e4cd;
  box-shadow: 0 28px 60px rgba(116,79,41,.16);
  transform: translateZ(0);
  transition: border-radius .42s ease, transform .42s ease, box-shadow .42s ease;
}

.coffee-inspired-home .bakery-product-card:hover img {
  border-radius: 42% 58% 54% 46% / 52% 38% 62% 48%;
  transform: translateY(-5px) scale(1.035);
  box-shadow: 0 34px 72px rgba(116,79,41,.22);
}

.coffee-inspired-home .bakery-product-card div {
  padding: 0;
}

.coffee-inspired-home .bakery-product-card span {
  color: #b66f24;
  font-size: .72rem;
  font-weight: 760;
}

.coffee-inspired-home .bakery-product-card h3 {
  color: #221710;
  font-size: clamp(1.22rem, 2.2vw, 1.75rem);
  font-weight: 720;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 6px 0;
}

.coffee-inspired-home .bakery-product-card p {
  color: #746457;
  font-size: .96rem;
  line-height: 1.55;
  max-width: 320px;
  margin: 0 auto;
}

.coffee-inspired-home .bakery-special > div,
.coffee-inspired-home .bakery-map-card {
  border-color: rgba(255,255,255,.76);
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,248,236,.66)),
    radial-gradient(circle at 100% 0%, rgba(208,147,57,.12), transparent 30%);
  box-shadow: 0 26px 74px rgba(92,67,40,.1), inset 0 1px 0 rgba(255,255,255,.92);
}

.coffee-inspired-home .bakery-special aside {
  border-color: rgba(255,255,255,.7);
  background:
    linear-gradient(160deg, rgba(62,33,18,.36), rgba(166,99,39,.36)),
    var(--special-bg) center / cover;
  box-shadow: 0 28px 74px rgba(116,79,41,.18), inset 0 1px 0 rgba(255,255,255,.42);
}

.coffee-inspired-home .bakery-tech {
  background:
    radial-gradient(circle at var(--tech-x, 72%) var(--tech-y, 24%), rgba(239,190,95,.38), transparent 26%),
    radial-gradient(circle at 14% 85%, rgba(128,178,145,.2), transparent 28%),
    linear-gradient(135deg, #fbf4e8, #efe2cd);
  color: #24170f;
  border-color: rgba(255,255,255,.74);
  box-shadow: 0 26px 80px rgba(94,67,39,.12), inset 0 1px 0 rgba(255,255,255,.82);
}

.coffee-inspired-home .bakery-tech h2,
.coffee-inspired-home .bakery-tech p,
.coffee-inspired-home .bakery-tech-partner {
  color: #24170f;
}

.coffee-inspired-home .bakery-tech-steps article,
.coffee-inspired-home .bakery-qr-card,
.coffee-inspired-home .bakery-screen-card {
  background: rgba(255,255,255,.58);
  color: #24170f;
  border-color: rgba(255,255,255,.62);
}

.coffee-inspired-home .bakery-footer {
  color: #766253;
  border-top-color: rgba(123,91,55,.16);
}

.coffee-inspired-home .bakery-footer span,
.coffee-inspired-home .bakery-footer a {
  color: #9d6727;
}

@media (max-width: 1040px) {
  .coffee-inspired-home .bakery-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .coffee-inspired-home::before {
    width: 210px;
    height: 210px;
    left: -96px;
    top: 170px;
  }

  .coffee-inspired-home #urunler::before {
    left: -88px;
    top: 22px;
    width: 190px;
    height: 160px;
  }

  .coffee-topline {
    display: none;
  }

  .coffee-inspired-home .bakery-nav {
    top: 10px;
    width: min(100% - 20px, 1180px);
    border-radius: 24px;
  }

  .coffee-inspired-home .bakery-nav nav {
    background: rgba(255,255,255,.9);
    box-shadow: 0 22px 54px rgba(95,70,43,.16);
  }

  .coffee-inspired-home .bakery-hero {
    margin-top: 18px;
    min-height: auto;
  }

  .coffee-inspired-home .bakery-hero h1 {
    font-size: clamp(2.75rem, 15vw, 4.7rem);
  }

  .coffee-inspired-home .bakery-hero-media {
    min-height: 310px;
    border-radius: 36% 64% 38% 62% / 36% 42% 58% 64%;
  }

  .coffee-inspired-home .bakery-float-product {
    transform: scale(.84);
  }

  .coffee-inspired-home .bakery-product-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .coffee-inspired-home .bakery-product-card {
    padding-inline: 0;
  }

  .coffee-inspired-home .bakery-product-card img {
    width: min(82vw, 280px);
    height: 230px;
  }

  .coffee-inspired-home .bakery-category-head {
    align-items: center;
    flex-direction: column;
  }

  .coffee-inspired-home .bakery-category-head::before,
  .coffee-inspired-home .bakery-category-head::after {
    width: 120px;
  }
}

/* Public loader and technology spotlight */
.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 24px;
  background:
    radial-gradient(circle at 24% 18%, rgba(250,206,139,.58), transparent 28%),
    radial-gradient(circle at 74% 20%, rgba(184,213,207,.56), transparent 31%),
    radial-gradient(circle at 48% 86%, rgba(246,184,160,.38), transparent 28%),
    linear-gradient(135deg, #fffaf2, #eef6f2 48%, #f9eadc);
  color: #25170f;
  text-align: center;
  transition: opacity .62s ease, visibility .62s ease, transform .62s ease;
}

.site-preloader::before,
.site-preloader::after {
  content: "";
  position: absolute;
  width: min(54vw, 520px);
  aspect-ratio: 1;
  border-radius: 42% 58% 54% 46% / 48% 38% 62% 52%;
  opacity: .48;
  filter: blur(8px);
  animation: site-loader-drift 6.8s ease-in-out infinite alternate;
}

.site-preloader::before {
  left: -12vw;
  top: -12vw;
  background: rgba(225,166,78,.42);
}

.site-preloader::after {
  right: -12vw;
  bottom: -12vw;
  background: rgba(132,178,157,.38);
  animation-delay: -2.2s;
}

.site-preloader strong,
.site-preloader span,
.site-preloader-orb {
  position: relative;
  z-index: 1;
}

.site-preloader-orb {
  width: 86px;
  height: 86px;
  border-radius: 34% 66% 46% 54% / 52% 42% 58% 48%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.95), transparent 26%),
    linear-gradient(135deg, #eab760, #fff4d8 48%, #8fbba7);
  box-shadow: 0 24px 70px rgba(141,95,43,.18), inset 0 1px 0 rgba(255,255,255,.9);
  animation: site-loader-orb 1.45s ease-in-out infinite alternate;
}

.site-preloader strong {
  font-size: clamp(1.8rem, 5vw, 3.8rem);
  font-weight: 760;
  letter-spacing: -.04em;
}

.site-preloader span {
  color: #8d622e;
  font-size: .82rem;
  font-weight: 740;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.site-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
}

.coffee-inspired-home .bakery-tech {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--tech-x, 72%) var(--tech-y, 24%), rgba(255,209,105,.58), transparent 23%),
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.22), transparent 20%),
    linear-gradient(135deg, #23140e 0%, #5f351d 52%, #bd7b2b 100%);
  color: #fff9ee;
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: 0 34px 95px rgba(96,58,26,.24), inset 0 1px 0 rgba(255,255,255,.3);
}

.coffee-inspired-home .bakery-tech::before,
.coffee-inspired-home .bakery-tech::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.coffee-inspired-home .bakery-tech::before {
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,.12) 45% 46%, transparent 47% 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 74px);
  mask-image: radial-gradient(circle at var(--tech-x, 72%) var(--tech-y, 24%), #000 0 42%, transparent 72%);
  animation: tech-grid-shimmer 8s ease-in-out infinite alternate;
}

.coffee-inspired-home .bakery-tech::after {
  right: -100px;
  top: -80px;
  width: 310px;
  height: 310px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 68%);
}

.coffee-inspired-home .bakery-tech .bakery-eyebrow,
.coffee-inspired-home .bakery-tech h2,
.coffee-inspired-home .bakery-tech p,
.coffee-inspired-home .bakery-tech-partner {
  color: #fff9ee;
}

.coffee-inspired-home .bakery-tech .bakery-eyebrow {
  color: #ffd57f;
}

.coffee-inspired-home .bakery-tech h2 {
  text-shadow: 0 12px 38px rgba(0,0,0,.18);
}

.coffee-inspired-home .bakery-tech p {
  color: rgba(255,249,238,.84);
}

.coffee-inspired-home .bakery-tech-partner {
  border-left: 3px solid #ffd57f;
  color: rgba(255,249,238,.92);
  padding-left: 14px;
}

.bakery-tech-partner-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 18px 0 6px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff9ee;
  font-size: .92rem;
  font-weight: 760;
  padding: 0 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  text-decoration: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform .24s ease, background .24s ease, box-shadow .24s ease;
}

.bakery-tech-partner-link:hover {
  background: rgba(255,255,255,.24);
  box-shadow: 0 18px 44px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.34);
  transform: translateY(-2px);
}

.coffee-inspired-home .bakery-tech-steps article,
.coffee-inspired-home .bakery-qr-card,
.coffee-inspired-home .bakery-screen-card {
  background: rgba(255,255,255,.15);
  color: #fff9ee;
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 22px 60px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.coffee-inspired-home .bakery-tech-steps b,
.coffee-inspired-home .bakery-qr-card span,
.coffee-inspired-home .bakery-screen-card span {
  color: #ffd57f;
}

.coffee-inspired-home .bakery-screen-card li {
  background: rgba(255,255,255,.13);
  color: rgba(255,249,238,.92);
}

.coffee-inspired-home .bakery-qr-grid {
  background:
    repeating-linear-gradient(90deg, #25170f 0 9px, transparent 9px 18px),
    repeating-linear-gradient(0deg, #25170f 0 9px, transparent 9px 18px),
    #fff9ee;
  box-shadow: 0 0 0 12px rgba(255,249,238,.94), 0 18px 42px rgba(0,0,0,.18);
}

@keyframes site-loader-orb {
  from {
    border-radius: 34% 66% 46% 54% / 52% 42% 58% 48%;
    transform: translateY(0) rotate(-4deg) scale(.98);
  }
  to {
    border-radius: 54% 46% 60% 40% / 42% 58% 42% 58%;
    transform: translateY(-6px) rotate(5deg) scale(1.04);
  }
}

@keyframes site-loader-drift {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    transform: translate3d(18px, -14px, 0) rotate(12deg);
  }
}

@keyframes tech-grid-shimmer {
  from {
    opacity: .48;
    transform: translate3d(-1%, 0, 0);
  }
  to {
    opacity: .82;
    transform: translate3d(1%, -1%, 0);
  }
}

@media (max-width: 720px) {
  .site-preloader-orb {
    width: 72px;
    height: 72px;
  }

  .coffee-inspired-home .bakery-tech {
    border-radius: 28px;
  }

  .bakery-tech-partner-link {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-preloader::before,
  .site-preloader::after,
  .site-preloader-orb,
  .coffee-inspired-home .bakery-tech::before {
    animation: none;
  }
}

/* Restored stable POS/admin refinements */
body.touch-mode .top-action-list > button,
body.touch-mode .top-action-list > a,
body.touch-mode .top-action-list > details > summary,
body.touch-mode .top-action-list .account-button {
  font-weight: 900;
  text-transform: uppercase;
}

.counter-panel-head {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: flex-start;
  margin-bottom: 14px;
}

.counter-search {
  flex: 0 1 420px;
  max-width: 420px;
  min-width: 240px;
}

.counter-search span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.counter-search input {
  border-radius: 18px;
  min-height: 52px;
  padding-inline: 18px;
}

.counter-pos-layout {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  height: min(760px, calc(100dvh - 230px));
  min-height: 520px;
  overflow: visible;
}

.counter-pos-layout > div {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

.counter-pos-layout .category-pills {
  flex: 0 0 auto;
  margin-bottom: 14px;
  min-height: 58px;
  padding: 8px 0 14px;
  position: relative;
  z-index: 2;
}

.counter-pos-layout .pos-products {
  align-content: start;
  direction: rtl;
  display: grid;
  flex: 1;
  gap: 10px;
  grid-auto-rows: minmax(218px, auto);
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  max-height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 6px 10px 10px;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(31, 122, 90, .42) rgba(31, 122, 90, .08);
  scrollbar-width: thin;
}

.counter-pos-layout .pos-products > * {
  direction: ltr;
}

.counter-pos-layout .pos-products::-webkit-scrollbar {
  width: 10px;
}

.counter-pos-layout .pos-products::-webkit-scrollbar-track {
  background: rgba(31, 122, 90, .08);
  border-radius: 999px;
}

.counter-pos-layout .pos-products::-webkit-scrollbar-thumb {
  background: rgba(31, 122, 90, .36);
  border-radius: 999px;
}

.pos-product-card {
  border-radius: 22px;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 218px;
  overflow: hidden;
}

.pos-product-card .product-media {
  aspect-ratio: 1.75 / 1;
  background: rgba(31, 122, 90, .08);
  overflow: hidden;
  position: relative;
}

.pos-product-card .product-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.product-price-pill,
.product-stock-pill {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: .78rem;
  font-weight: 900;
  min-height: 30px;
  padding: 5px 10px;
  position: absolute;
  z-index: 2;
}

.product-price-pill {
  background: rgba(255, 255, 255, .94);
  bottom: 8px;
  color: var(--brand);
  left: 8px;
  box-shadow: 0 8px 22px rgba(31, 122, 90, .13);
}

.product-stock-pill {
  background: rgba(255, 246, 217, .96);
  color: #191714;
  right: 8px;
  top: 8px;
  box-shadow: 0 8px 20px rgba(39, 37, 34, .12);
}

.pos-product-card .body {
  gap: 6px;
  padding: 10px;
}

.pos-product-card .body h3 {
  font-size: .98rem;
  line-height: 1.12;
  margin: 0;
  min-height: 2.2em;
}

.pos-product-card .body .kicker {
  font-size: .62rem;
}

.pos-product-card .body button {
  border-color: rgba(31, 122, 90, .2);
  border-radius: 999px;
  color: var(--ink);
  min-height: 38px;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
}

.pos-product-card .body button:hover {
  background: rgba(31, 122, 90, .12);
  border-color: rgba(31, 122, 90, .4);
  color: var(--brand);
  transform: translateY(-1px);
}

.counter-cart-panel {
  align-self: start;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  margin-top: -74px;
  max-height: min(100%, calc(100vh - 118px));
  min-height: auto;
  overflow: auto;
  position: sticky;
  top: 10px;
  transform: translateY(-74px);
}

.counter-cart-head,
.counter-cart-actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

.counter-cart-head {
  justify-content: space-between;
}

.counter-cart-head h3 {
  line-height: 1.05;
  margin: 0;
}

.counter-cart-actions button {
  border-radius: 999px;
  min-height: 42px;
  padding-inline: 14px;
  white-space: nowrap;
}

.counter-cart-hint {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(31, 122, 90, .12);
  border-radius: 16px;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 800;
  margin: 8px 0 10px;
  padding: 10px 12px;
}

.counter-cart-inline-list {
  display: none;
}

.counter-cart-panel.has-items .counter-cart-hint {
  color: var(--brand);
}

.counter-cart-modal::backdrop {
  background: rgba(20, 18, 16, .34);
  backdrop-filter: blur(10px);
}

.counter-cart-modal-card {
  max-width: min(560px, calc(100vw - 28px));
  width: 560px;
}

.counter-cart-detail-list {
  display: grid;
  gap: 10px;
  max-height: min(62vh, 620px);
  overflow: auto;
  padding: 4px 4px 0 0;
}

.counter-cart-panel .cart-row,
.counter-cart-detail-list .cart-row {
  border-radius: 18px;
  padding: 10px;
}

.counter-payment-area {
  background: rgba(255, 253, 248, .94);
  border-radius: 22px;
  display: grid;
  gap: 8px;
  margin-top: 0;
  padding-top: 8px;
  position: relative;
  z-index: 1;
}

.counter-payment-area label {
  gap: 5px;
}

.counter-payment-area input,
.counter-payment-area select {
  min-height: 46px;
}

.counter-payment-area textarea {
  min-height: 82px;
}

.counter-credit-fields {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.counter-credit-fields label:first-child {
  position: relative;
}

.credit-customer-picker {
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(31, 122, 90, .16);
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(39, 37, 34, .14);
  display: grid;
  gap: 6px;
  left: 0;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 25;
}

.credit-customer-picker[hidden] {
  display: none;
}

.credit-customer-picker button {
  align-items: start;
  background: rgba(245, 250, 247, .86);
  border: 1px solid rgba(31, 122, 90, .1);
  border-radius: 14px;
  color: var(--ink);
  display: grid;
  gap: 3px;
  justify-items: start;
  min-height: 48px;
  padding: 9px 10px;
  text-align: left;
  width: 100%;
}

.credit-customer-picker button:hover {
  background: rgba(31, 122, 90, .1);
  border-color: rgba(31, 122, 90, .25);
  color: var(--brand);
}

.credit-customer-picker small {
  color: var(--muted);
  font-weight: 760;
}

.counter-summary,
.counter-cart-panel .payment-change {
  border-radius: 18px;
}

.credit-screen {
  display: grid;
  gap: 16px;
}

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

.credit-summary-card {
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(39, 37, 34, .1);
  border-radius: 22px;
  box-shadow: 0 16px 44px rgba(39, 37, 34, .06);
  display: grid;
  gap: 6px;
  padding: 16px;
}

.credit-summary-card span,
.credit-summary-card small {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
}

.credit-summary-card strong {
  color: var(--brand);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.credit-list {
  display: grid;
  gap: 12px;
}

.credit-row {
  align-items: start;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(39, 37, 34, .1);
  border-radius: 22px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, .45fr) minmax(280px, .9fr);
  padding: 14px;
}

.credit-row p {
  margin: 6px 0 0;
}

.credit-row small {
  color: var(--muted);
  display: block;
  font-weight: 700;
  margin-top: 4px;
}

.credit-row-money {
  display: grid;
  gap: 5px;
  justify-items: end;
}

.credit-row-money b {
  color: var(--danger);
  font-size: 1.08rem;
}

.credit-history-section {
  border-top: 1px solid rgba(39, 37, 34, .08);
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 16px;
}

.credit-history-section h3 {
  font-size: 1.08rem;
  margin: -6px 0 4px;
}

.credit-history-list {
  display: grid;
  gap: 10px;
}

.credit-row-closed {
  background: rgba(255, 255, 255, .46);
  grid-template-columns: minmax(180px, 1fr) minmax(160px, .35fr);
  opacity: .72;
}

.credit-row-closed:hover,
.credit-row-closed:focus-within {
  opacity: 1;
}

.credit-row-closed .credit-row-money b {
  color: var(--muted);
}

.credit-detail {
  min-width: 0;
}

.credit-detail summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  list-style: none;
}

.credit-detail summary::-webkit-details-marker {
  display: none;
}

.credit-detail summary span {
  border: 1px solid rgba(31, 122, 90, .16);
  border-radius: 999px;
  color: var(--brand);
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 850;
  padding: 5px 9px;
}

.credit-detail[open] summary span {
  background: rgba(31, 122, 90, .1);
}

.credit-reminder-actions {
  align-items: center;
  background: rgba(31, 122, 90, .06);
  border: 1px solid rgba(31, 122, 90, .12);
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 9px;
}

.credit-reminder-actions span {
  color: var(--brand);
  flex: 1 1 160px;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.credit-reminder-actions a,
.credit-reminder-actions button {
  align-items: center;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(39, 37, 34, .1);
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font-size: .82rem;
  font-weight: 850;
  min-height: 36px;
  padding: 8px 12px;
  text-decoration: none;
}

.credit-reminder-actions .credit-reminder-whatsapp {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.credit-reminder-actions button:disabled {
  opacity: .55;
}

.credit-detail-body {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.credit-detail-body h4 {
  font-size: .86rem;
  margin: 0 0 8px;
}

.credit-detail-card,
.credit-payment-line {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(39, 37, 34, .08);
  border-radius: 16px;
  padding: 10px;
}

.credit-detail-card {
  display: grid;
  gap: 7px;
  margin-bottom: 8px;
}

.credit-detail-card header,
.credit-payment-line {
  align-items: start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.credit-detail-card ul {
  display: grid;
  gap: 5px;
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
}

.credit-detail-card li {
  align-items: start;
  border-top: 1px dashed rgba(39, 37, 34, .12);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding-top: 5px;
}

.credit-detail-card em {
  color: var(--muted);
  font-style: normal;
}

.credit-payment-line {
  margin-bottom: 8px;
}

.credit-payment-line strong {
  color: var(--brand);
  white-space: nowrap;
}

.credit-payment-form {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, .8fr) minmax(0, .85fr) minmax(0, 1fr) auto;
}

.credit-payment-form input,
.credit-payment-form select {
  min-height: 42px;
}

.credit-public-page {
  min-height: 100vh;
  padding: clamp(18px, 4vw, 48px);
}

.credit-public-shell {
  display: grid;
  gap: 18px;
  margin: 0 auto;
  max-width: 920px;
}

.credit-public-card {
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(39, 37, 34, .1);
  border-radius: 28px;
  box-shadow: 0 20px 70px rgba(39, 37, 34, .08);
  padding: clamp(20px, 4vw, 34px);
}

.credit-public-hero h1 {
  font-size: clamp(2rem, 6vw, 4.4rem);
  letter-spacing: -.05em;
  line-height: .96;
  margin: 8px 0 12px;
}

.credit-public-hero p,
.credit-public-note {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.65;
}

.credit-public-totals {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.credit-public-totals article {
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(39, 37, 34, .08);
  border-radius: 20px;
  padding: 16px;
}

.credit-public-totals span {
  color: var(--muted);
  display: block;
  font-size: .8rem;
  font-weight: 850;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.credit-public-totals strong {
  color: var(--brand);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
}

.credit-public-totals .danger strong {
  color: var(--danger);
}

.credit-public-sales {
  display: grid;
  gap: 12px;
}

.credit-public-sale {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(39, 37, 34, .08);
  border-radius: 20px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.credit-public-sale header,
.credit-public-sale li,
.credit-public-sale footer {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.credit-public-sale small,
.credit-public-sale p,
.credit-public-sale footer {
  color: var(--muted);
  font-weight: 700;
}

.credit-public-sale b {
  color: var(--danger);
  white-space: nowrap;
}

.credit-public-sale ul {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.credit-public-sale li {
  border-top: 1px dashed rgba(39, 37, 34, .14);
  padding-top: 8px;
}

.credit-public-sale em {
  color: var(--muted);
  display: block;
  font-style: normal;
  margin-top: 2px;
}

@media (max-width: 1080px) {
  .counter-pos-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  }

  .counter-pos-layout .pos-products {
    grid-auto-rows: minmax(205px, auto);
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }

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

  .credit-row {
    grid-template-columns: 1fr;
  }

  .credit-row-money {
    justify-items: start;
  }
}

@media (max-width: 760px) {
  .credit-public-page {
    padding: 12px;
  }

  .credit-public-totals {
    grid-template-columns: 1fr;
  }

  .credit-public-sale header,
  .credit-public-sale li,
  .credit-public-sale footer {
    display: grid;
  }

  .counter-panel-head {
    align-items: stretch;
    display: grid;
  }

  .counter-search {
    max-width: 100%;
    min-width: 0;
  }

  .counter-pos-layout {
    display: grid;
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: 132px;
  }

  .counter-pos-layout .pos-products {
    grid-auto-rows: auto;
    grid-template-columns: 1fr;
    max-height: min(56dvh, 520px);
    overflow: auto;
    padding-right: 0;
  }

  .pos-product-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-rows: auto;
    min-height: 104px;
  }

  .pos-product-card .product-media {
    aspect-ratio: auto;
    min-height: 104px;
  }

  .pos-product-card .body h3 {
    min-height: 0;
  }

  .product-price-pill,
  .product-stock-pill {
    font-size: .68rem;
    min-height: 24px;
    padding: 4px 7px;
  }

  .counter-cart-panel {
    bottom: 10px;
    left: 10px;
    margin-top: 0;
    max-height: calc(100dvh - 20px);
    overflow: hidden;
    position: fixed;
    right: 10px;
    top: auto;
    transform: none;
    z-index: 80;
  }

  .counter-cart-panel:not(.is-mobile-open) .counter-payment-area,
  .counter-cart-panel:not(.is-mobile-open) .counter-cart-inline-list {
    display: none;
  }

  .counter-cart-panel.is-mobile-open {
    overflow: auto;
  }

  .counter-cart-panel.is-mobile-open .counter-cart-inline-list {
    display: grid;
    gap: 8px;
    max-height: min(30dvh, 260px);
    overflow: auto;
    padding-right: 2px;
  }

  .counter-cart-panel.is-mobile-open .counter-payment-area {
    display: grid;
  }

  .counter-cart-panel .counter-cart-hint {
    margin: 8px 0 0;
  }

  .counter-cart-modal-card {
    max-height: calc(100vh - 28px);
  }

  .counter-cart-detail-list {
    max-height: min(58vh, 420px);
  }

  .counter-credit-fields,
  .credit-summary-grid,
  .credit-payment-form {
    grid-template-columns: 1fr;
  }

  .credit-customer-picker {
    max-height: 190px;
  }
}

.management-credit-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-bottom: 12px;
}

.credit-report-row b {
  background: rgba(31, 122, 90, .12);
  color: var(--brand);
}

/* POS product list scrolling */
.pos-layout > div:first-child {
  min-height: 0;
}

.pos-layout:not(.counter-pos-layout) {
  max-height: min(760px, calc(100dvh - 250px));
  min-height: 520px;
  overflow: hidden;
}

.pos-layout:not(.counter-pos-layout) > div:first-child {
  display: flex;
  flex-direction: column;
}

.pos-layout:not(.counter-pos-layout) .pos-products,
.counter-pos-layout .pos-products {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.pos-layout:not(.counter-pos-layout) .pos-products {
  align-content: start;
  direction: rtl;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2px 6px 12px 10px;
  scrollbar-color: rgba(31, 122, 90, .42) rgba(31, 122, 90, .08);
  scrollbar-width: thin;
}

.pos-layout:not(.counter-pos-layout) .pos-products > * {
  direction: ltr;
}

.pos-layout:not(.counter-pos-layout) .pos-products::-webkit-scrollbar {
  width: 10px;
}

.pos-layout:not(.counter-pos-layout) .pos-products::-webkit-scrollbar-track {
  background: rgba(31, 122, 90, .08);
  border-radius: 999px;
}

.pos-layout:not(.counter-pos-layout) .pos-products::-webkit-scrollbar-thumb {
  background: rgba(31, 122, 90, .36);
  border-radius: 999px;
}

@media (max-width: 760px) {
  .pos-layout:not(.counter-pos-layout) {
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  .pos-layout:not(.counter-pos-layout) .pos-products {
    max-height: min(58dvh, 540px);
  }

  .counter-pos-layout .pos-products {
    max-height: min(58dvh, 540px);
    padding-left: 10px;
    padding-right: 6px;
  }
}

/* Compact fixed admin header */
body.touch-mode .app-shell {
  padding-top: 0;
}

body.touch-mode .topbar {
  position: sticky;
  top: 0;
  z-index: 260;
  margin-top: 0;
  border-radius: 0 0 28px 28px;
}

@media (max-width: 760px) {
  body.touch-mode .topbar {
    padding: 12px 14px;
    border-radius: 0 0 24px 24px;
  }

  body.admin-mobile-menu-open .mobile-action-menu[open] > summary {
    top: 12px !important;
    right: 16px !important;
  }
}