@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Khmer:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap');

:root {
  font-family: 'Noto Sans SC', 'Noto Sans Khmer', system-ui, sans-serif;
  color: #142634;
  background: #edf2f4;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --navy: #071b2b;
  --navy-2: #0d2c42;
  --teal: #159f96;
  --teal-dark: #0d736e;
  --mint: #e1f4f1;
  --amber: #e5a84e;
  --cream: #f6efe4;
  --ink: #132a3a;
  --muted: #748492;
  --line: #dfe7ea;
  --white: #ffffff;
  --shadow: 0 18px 50px rgba(9, 38, 54, .1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #eef3f4; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 16% 12%, rgba(38, 174, 163, .18), transparent 34%), #eef3f4; }
.auth-card { width: min(410px, 100%); padding: 28px; border: 1px solid #dfe8eb; border-radius: 24px; background: white; box-shadow: 0 24px 70px rgba(9, 38, 54, .12); }
.auth-card .brand-mark { width: 150px; height: 76px; margin: -8px auto 16px; }
.auth-card h1 { margin: 0; color: var(--ink); font-size: 25px; text-align: center; }
.auth-card > p { margin: 8px 0 22px; color: var(--muted); font-size: 11px; line-height: 1.7; text-align: center; }
.auth-card form { display: flex; flex-direction: column; gap: 13px; }
.auth-card form label { display: flex; flex-direction: column; gap: 6px; }
.auth-card form label span { color: #526b78; font-size: 10px; font-weight: 700; }
.auth-card form input { height: 43px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fbfdfd; outline: 0; font-size: 11px; }
.auth-card form input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(21, 159, 150, .12); }
.auth-card form .primary-button { margin-top: 4px; }
.demo-login-button { width: 100%; height: 41px; margin-top: 10px; border: 1px solid var(--line); border-radius: 11px; color: var(--teal-dark); background: var(--mint); font-size: 11px; font-weight: 700; }
.demo-login-button:disabled { opacity: .55; cursor: default; }
.auth-switch-button { width: 100%; margin-top: 12px; padding: 5px; border: 0; color: var(--teal-dark); background: transparent; font-size: 10px; font-weight: 700; }
.auth-notice { color: #b85343 !important; background: #fff3ef; border-radius: 10px; padding: 9px 10px; }
.auth-card--loading { text-align: center; }
.auth-card--loading > p { margin-bottom: 0; }

.brand-mark { display: flex; align-items: center; width: 132px; height: 64px; overflow: hidden; color: white; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; background: white; }
.brand-mark--dark { color: var(--navy); }

.icon-button { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; padding: 8px; border-radius: 12px; }
.icon-button:hover { background: rgba(16, 55, 75, .06); }

.consumer-page { min-height: 100vh; }
.desktop-header { height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(32px, calc((100vw - 1180px) / 2)); background: rgba(255,255,255,.88); border-bottom: 1px solid rgba(216,229,233,.9); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 30; }
.desktop-header nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 500; color: #47606f; }
.desktop-header nav a:hover { color: var(--teal-dark); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.admin-link { height: 40px; padding: 0 16px; display: flex; gap: 8px; align-items: center; color: white; background: var(--navy); border: 0; border-radius: 13px; font-size: 13px; font-weight: 600; }
.language-control { position: relative; }
.language-button { gap: 6px; padding: 9px 10px; color: #365260; font-size: 12px; font-weight: 600; }
.language-popover { position: absolute; right: 0; top: calc(100% + 8px); min-width: 130px; padding: 6px; border-radius: 14px; background: white; box-shadow: 0 15px 40px rgba(9, 34, 51, .15); border: 1px solid var(--line); z-index: 50; }
.language-popover button { width: 100%; border: 0; border-radius: 9px; background: transparent; display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; color: #465f6d; font-size: 12px; }
.language-popover button:hover, .language-popover button.active { background: var(--mint); color: var(--teal-dark); }

.consumer-shell { max-width: 1180px; margin: 0 auto; padding: 34px 0 70px; display: grid; grid-template-columns: minmax(0, 700px) 420px; gap: 36px; }
.app-column { min-width: 0; }
.mobile-topbar { display: none; }
.store-selector { width: 100%; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; }
.store-pin { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: var(--mint); color: var(--teal-dark); }
.store-selector > span:nth-child(2) { display: flex; flex-direction: column; }
.store-selector small { color: var(--muted); font-size: 11px; }
.store-selector b { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 14px; }
.store-time { margin-left: auto; display: flex; align-items: center; gap: 5px; color: #56707e; font-size: 12px; }

.order-type-switch { width: 270px; display: flex; padding: 4px; margin: 22px 0 20px; background: #e3eaed; border-radius: 14px; }
.ordering-paused-banner { display: flex; align-items: center; gap: 8px; margin: 16px 0 -8px; padding: 10px 12px; border: 1px solid #f1d4aa; border-radius: 11px; color: #875321; background: #fff7eb; font-size: 10px; }
.order-type-switch button { flex: 1; height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 10px; color: #657986; background: transparent; font-size: 12px; font-weight: 600; transition: .25s ease; }
.order-type-switch button.active { color: var(--navy); background: white; box-shadow: 0 4px 13px rgba(12, 44, 61, .1); }

.hero-card { position: relative; min-height: 286px; display: flex; align-items: center; overflow: hidden; padding: 42px 38px; color: white; background: var(--navy); border-radius: 30px; box-shadow: var(--shadow); }
.hero-copy { position: relative; z-index: 3; width: 55%; }
.hero-copy h1 { margin: 0; max-width: 420px; font-size: clamp(28px, 3vw, 42px); line-height: 1.18; letter-spacing: -.035em; }
.hero-copy p { margin: 15px 0 24px; max-width: 360px; color: #b9cbd5; font-size: 13px; line-height: 1.75; }
.hero-copy button { height: 44px; padding: 0 17px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 13px; color: var(--navy); background: white; font-size: 12px; font-weight: 700; transition: transform .2s ease; }
.hero-copy button:hover { transform: translateY(-2px); }
.hero-orbit { position: absolute; border: 1px solid rgba(91, 217, 205, .22); border-radius: 50%; }
.orbit-one { width: 360px; height: 360px; right: -85px; top: -55px; }
.orbit-two { width: 245px; height: 245px; right: -25px; top: 20px; border-color: rgba(255,255,255,.12); }
.hero-cup { position: absolute; width: 174px; height: 235px; right: 63px; bottom: -10px; animation: floatCup 5s ease-in-out infinite; }
.cup-lid { position: absolute; left: 19px; top: 0; width: 137px; height: 24px; background: linear-gradient(#e7edf0, #a9b8c0); border-radius: 50% 50% 30% 30%; z-index: 3; box-shadow: inset 0 4px 5px rgba(255,255,255,.6); }
.cup-body { position: absolute; left: 27px; top: 12px; width: 121px; height: 196px; overflow: hidden; border: 2px solid rgba(255,255,255,.6); background: linear-gradient(180deg, rgba(229,242,242,.65) 0 18%, #d4a273 26%, #8b4f2c 72%, #542b18 100%); clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%); box-shadow: inset 18px 0 20px rgba(255,255,255,.12), inset -13px 0 20px rgba(0,0,0,.16); }
.cup-body b { position: absolute; left: 43px; top: 91px; width: 40px; height: 43px; display: grid; place-items: center; color: white; background: var(--teal); border-radius: 50% 50% 45% 45%; font: 700 20px 'Outfit'; }
.ice { position: absolute; width: 28px; height: 24px; border: 1px solid rgba(255,255,255,.55); background: rgba(239,251,251,.24); transform: rotate(22deg); border-radius: 7px; }
.ice-one { top: 31px; left: 18px; }.ice-two { top: 27px; right: 16px; transform: rotate(-13deg); }.ice-three { top: 57px; left: 53px; transform: rotate(4deg); }
.cup-shadow { position: absolute; left: 22px; bottom: 8px; width: 135px; height: 18px; background: rgba(0,0,0,.35); filter: blur(11px); border-radius: 50%; }
@keyframes floatCup { 0%,100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-8px) rotate(-1deg); } }

.offer-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0 28px; }
.offer-rail > button { min-height: 88px; display: flex; align-items: center; gap: 12px; padding: 15px 16px; border: 0; border-radius: 19px; text-align: left; transition: transform .2s ease, box-shadow .2s ease; }
.offer-rail > button:hover { transform: translateY(-2px); box-shadow: 0 11px 28px rgba(13, 51, 68, .09); }
.offer-rail > button.is-disabled { opacity: .62; }
.invite-card { background: #dff4f1; color: #0c6c68; }
.wallet-card { background: #f5eadb; color: #875321; }
.offer-rail button > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
.offer-rail b { font-size: 13px; }
.offer-rail small { margin-top: 4px; color: currentColor; opacity: .7; font-size: 10px; }
.invite-icon { width: 42px; height: 42px; display: grid; place-items: center; background: rgba(255,255,255,.6); border-radius: 14px; }

.menu-section { scroll-margin-top: 95px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.section-heading h2 { margin: 0; color: var(--ink); font-size: 24px; letter-spacing: -.02em; }
.section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.section-heading button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 13px; background: white; color: #526b79; }
.category-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs button { flex: 0 0 auto; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: white; color: #607681; font-size: 11px; font-weight: 600; }
.category-tabs button.active { border-color: var(--navy); color: white; background: var(--navy); }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.product-card { min-width: 0; overflow: hidden; background: white; border: 1px solid #e2e9ec; border-radius: 22px; box-shadow: 0 8px 24px rgba(10, 39, 55, .055); transition: transform .25s ease, box-shadow .25s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 16px 35px rgba(10, 39, 55, .1); }
.product-image-wrap { position: relative; height: 190px; overflow: hidden; background: #dce7e9; }
.product-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.product-card:hover img { transform: scale(1.045); }
.product-tag { position: absolute; left: 12px; top: 12px; padding: 5px 8px; color: white; background: var(--teal); border-radius: 8px; font: 700 8px 'Outfit'; letter-spacing: .08em; }
.favorite-button { position: absolute; right: 11px; top: 11px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 11px; background: rgba(255,255,255,.86); color: #596f7b; backdrop-filter: blur(8px); }
.product-body { padding: 16px; }
.product-body h3 { margin: 0; color: var(--ink); font-size: 15px; }
.product-body p { height: 36px; overflow: hidden; margin: 7px 0 16px; color: var(--muted); font-size: 10px; line-height: 1.75; }
.product-footer { display: flex; align-items: center; justify-content: space-between; }
.product-footer > div { display: flex; align-items: baseline; gap: 7px; }
.product-footer b { color: var(--ink); font: 700 18px 'Outfit'; }
.product-footer div span { color: #a3b0b7; font: 500 10px 'Outfit'; text-decoration: line-through; }
.add-button { height: 34px; display: flex; align-items: center; gap: 4px; padding: 0 11px; border: 0; border-radius: 11px; color: white; background: var(--navy); font-size: 10px; font-weight: 600; }
.add-button:active { transform: scale(.96); }

.desktop-order-panel { position: sticky; top: 108px; height: fit-content; padding: 28px; color: white; background: var(--navy); border-radius: 30px; box-shadow: 0 24px 60px rgba(5, 28, 43, .18); }
.panel-head { display: flex; justify-content: space-between; gap: 15px; }
.panel-head small { color: #60cfc5; font: 700 9px 'Outfit'; letter-spacing: .18em; }
.panel-head h2 { max-width: 270px; margin: 8px 0 0; font-size: 27px; line-height: 1.3; letter-spacing: -.025em; }
.panel-head > span { display: flex; align-items: center; gap: 5px; height: 25px; padding: 0 9px; color: #91d8d1; background: rgba(31, 160, 150, .12); border: 1px solid rgba(89, 209, 197, .25); border-radius: 999px; font-size: 9px; }
.panel-head > span i { width: 6px; height: 6px; background: #59d3c8; border-radius: 50%; box-shadow: 0 0 0 4px rgba(89,211,200,.12); }
.panel-head > span.is-offline { color: #e1b3a7; background: rgba(210, 109, 89, .14); border-color: rgba(210, 109, 89, .3); }
.panel-head > span.is-offline i { background: #d26d59; box-shadow: 0 0 0 4px rgba(210,109,89,.14); }
.map-card { position: relative; height: 240px; overflow: hidden; margin: 24px 0; border-radius: 22px; background: #0b3149; }
.map-grid { position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 32px 32px; transform: rotate(-9deg) scale(1.2); }
.map-route { position: absolute; height: 3px; background: #51c8bd; border-radius: 4px; box-shadow: 0 0 11px rgba(81,200,189,.6); transform-origin: left; }
.route-one { width: 150px; left: 78px; top: 91px; transform: rotate(17deg); }.route-two { width: 93px; left: 210px; top: 136px; transform: rotate(-28deg); }
.map-point { position: absolute; width: 38px; height: 38px; display: grid; place-items: center; border: 3px solid #0b3149; border-radius: 50%; background: #f0f6f7; color: var(--teal-dark); box-shadow: 0 7px 17px rgba(0,0,0,.3); }
.point-store { left: 49px; top: 67px; }.point-user { right: 45px; top: 91px; background: #f3b65f; color: #57320d; }
.map-caption { position: absolute; left: 16px; right: 16px; bottom: 14px; padding: 12px 14px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.11); border-radius: 14px; background: rgba(4, 27, 42, .72); backdrop-filter: blur(10px); }
.map-caption b { font-size: 12px; }.map-caption span { margin-top: 3px; color: #91aebb; font-size: 9px; }
.panel-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.panel-features > div { padding: 13px 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: rgba(255,255,255,.035); }
.panel-features span { width: 32px; height: 32px; display: grid; place-items: center; color: #65d2c8; background: rgba(46,173,162,.12); border-radius: 10px; }
.panel-features b, .panel-features small { display: block; }.panel-features b { margin-top: 11px; font-size: 10px; }.panel-features small { margin-top: 5px; color: #88a3b2; font-size: 8px; line-height: 1.5; }
.qr-promo { display: flex; align-items: center; gap: 13px; margin-top: 18px; padding: 13px; border-radius: 16px; background: white; color: var(--ink); }
.fake-qr { flex: 0 0 auto; width: 50px; height: 50px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 5px; background: #eaf0f2; border-radius: 8px; }
.fake-qr i { background: white; }.fake-qr i.dark { background: var(--navy); }
.qr-promo > div:last-child { display: flex; flex-direction: column; }.qr-promo b { font-size: 11px; }.qr-promo span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.qr-placeholder { width: 50px; height: 50px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #d8e3e6; border-radius: 8px; color: var(--teal-dark); background: #eaf7f5; font: 700 13px 'Outfit'; letter-spacing: .08em; }
.qr-link { margin-left: auto; padding: 6px 8px; border-radius: 8px; color: var(--teal-dark); background: var(--mint); font-size: 9px; font-weight: 700; }

.floating-cart { position: fixed; left: 50%; bottom: 25px; z-index: 20; width: min(440px, calc(100% - 32px)); height: 58px; display: none; align-items: center; gap: 12px; padding: 0 16px; border: 0; border-radius: 18px; color: white; background: var(--navy); box-shadow: 0 18px 40px rgba(5,28,43,.28); transform: translateX(-50%); animation: cartIn .35s cubic-bezier(.2,.8,.2,1); }
.floating-cart > span { position: relative; width: 36px; height: 36px; display: grid; place-items: center; color: var(--navy); background: #63d3c9; border-radius: 11px; }.floating-cart > span i { position: absolute; right: -5px; top: -6px; width: 18px; height: 18px; display: grid; place-items: center; color: white; background: #dc684d; border: 2px solid var(--navy); border-radius: 50%; font-size: 8px; font-style: normal; }.floating-cart b { font-size: 12px; }.floating-cart strong { margin-left: auto; font: 700 16px 'Outfit'; }
@keyframes cartIn { from { opacity: 0; transform: translate(-50%, 18px); } }
.bottom-nav { display: none; }

.modal-backdrop { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: center; align-items: flex-end; background: rgba(4, 22, 33, .55); backdrop-filter: blur(6px); animation: fadeIn .22s ease; }
.bottom-sheet { width: min(560px, 100%); max-height: 86vh; overflow: auto; padding: 11px 20px 26px; background: white; border-radius: 28px 28px 0 0; box-shadow: 0 -20px 50px rgba(6,29,44,.2); animation: sheetUp .35s cubic-bezier(.2,.8,.2,1); }
.sheet-handle { width: 42px; height: 4px; margin: 0 auto 15px; border-radius: 3px; background: #d6e0e4; }
.sheet-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }.sheet-title p { margin: 0; color: var(--ink); font-size: 18px; font-weight: 700; }.sheet-title span { color: var(--muted); font-size: 10px; }
.store-list { display: flex; flex-direction: column; gap: 8px; }
.store-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: white; color: var(--ink); text-align: left; }.store-row.selected { border-color: var(--teal); background: #f1fbf9; }.store-row:disabled { opacity: .5; }.store-icon { width: 39px; height: 39px; display: grid; place-items: center; color: var(--teal-dark); background: var(--mint); border-radius: 12px; }.store-copy { flex: 1; display: flex; flex-direction: column; }.store-copy b { font-size: 12px; }.store-copy small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.cart-items { display: flex; flex-direction: column; gap: 10px; max-height: 47vh; overflow: auto; }.cart-row { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 15px; background: #f5f8f8; }.cart-row img { width: 62px; height: 62px; object-fit: cover; border-radius: 12px; }.cart-copy { flex: 1; display: flex; flex-direction: column; }.cart-copy b { font-size: 12px; }.cart-copy span { margin: 3px 0 7px; color: var(--muted); font-size: 9px; }.cart-copy strong { color: var(--navy); font: 700 14px 'Outfit'; }.quantity-control { display: flex; align-items: center; gap: 8px; }.quantity-control button { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--navy); }.quantity-control span { min-width: 13px; text-align: center; font: 600 11px 'Outfit'; }
.coupon-row { display: flex; align-items: center; gap: 10px; margin: 14px 0; padding: 11px 14px; border-radius: 14px; background: var(--mint); color: var(--teal-dark); font-size: 11px; }.coupon-row label { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }.coupon-row select { min-width: 0; flex: 1; height: 30px; padding: 0 8px; border: 1px solid rgba(13, 115, 110, .18); border-radius: 8px; color: var(--teal-dark); background: rgba(255,255,255,.72); font-size: 10px; }.coupon-row b { flex: 0 0 auto; font: 700 11px 'Outfit'; white-space: nowrap; }.checkout-row { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); }.checkout-row > div { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 6px; }.checkout-row span { color: var(--muted); font-size: 9px; }.checkout-row b { color: var(--navy); font: 700 24px 'Outfit'; }.checkout-row small { grid-column: 1 / -1; color: var(--teal-dark); font-size: 9px; }.primary-button { height: 46px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 14px; color: white; background: var(--navy); font-size: 11px; font-weight: 700; }.primary-button:disabled { opacity: .55; }.primary-button.full { width: 100%; }
.note-field { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }.note-field span { color: var(--muted); font-size: 9px; font-weight: 700; }.note-field textarea { min-height: 54px; resize: vertical; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fbfdfd; outline: 0; font: inherit; font-size: 10px; }.note-field textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(21,159,150,.12); }
.empty-cart { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9aa9b1; }.empty-cart p { margin-top: 12px; font-size: 11px; }
.success-backdrop { align-items: center; padding: 20px; }.success-card { width: min(380px, 100%); padding: 34px 28px 28px; text-align: center; background: white; border-radius: 28px; box-shadow: 0 30px 70px rgba(4,23,35,.25); animation: successIn .4s cubic-bezier(.2,.8,.2,1); }.success-ring { width: 74px; height: 74px; display: grid; place-items: center; margin: 0 auto; color: white; background: var(--teal); border-radius: 50%; box-shadow: 0 0 0 12px var(--mint); }.success-card h2 { margin: 27px 0 8px; font-size: 23px; }.success-card > p { margin: 0; color: var(--muted); font-size: 11px; }.pickup-code { margin: 22px 0; padding: 18px; display: flex; flex-direction: column; background: #f3f7f8; border-radius: 18px; }.pickup-code span, .pickup-code small { color: var(--muted); font-size: 9px; }.pickup-code b { margin: 6px 0; color: var(--navy); font: 700 38px 'Outfit'; letter-spacing: .08em; }
@keyframes fadeIn { from { opacity: 0; } } @keyframes sheetUp { from { transform: translateY(100%); } } @keyframes successIn { from { opacity: 0; transform: scale(.9) translateY(15px); } }

/* Admin */
.admin-page { min-height: 100vh; display: grid; grid-template-columns: 238px 1fr; color: #1d3240; background: #f4f7f8; }
.admin-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 25px 17px 18px; color: white; background: var(--navy); }
.admin-sidebar .brand-mark { width: 150px; height: 76px; padding: 0 10px; }
.admin-store-badge { display: flex; align-items: center; gap: 9px; margin: 25px 0 20px; padding: 11px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.04); }.admin-store-badge > span { width: 34px; height: 34px; display: grid; place-items: center; color: #65d4c9; background: rgba(73,196,184,.12); border-radius: 10px; }.admin-store-badge > div { flex: 1; display: flex; flex-direction: column; }.admin-store-badge small { color: #7f9aa9; font-size: 8px; }.admin-store-badge b { margin-top: 3px; font-size: 10px; }
.admin-sidebar nav { display: flex; flex-direction: column; gap: 4px; }.admin-sidebar nav button { width: 100%; height: 42px; display: flex; align-items: center; gap: 11px; padding: 0 12px; border: 0; border-radius: 11px; color: #8da6b4; background: transparent; font-size: 11px; text-align: left; }.admin-sidebar nav button:hover, .admin-sidebar nav button.active { color: white; background: rgba(39, 177, 165, .14); }.admin-sidebar nav button.active svg { color: #65d4c9; }.admin-sidebar nav button i { margin-left: auto; min-width: 19px; height: 19px; display: grid; place-items: center; color: white; background: #d35e4f; border-radius: 7px; font-size: 8px; font-style: normal; }
.sidebar-footer { width: 100%; margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 13px 9px 0; border: 0; border-top: 1px solid rgba(255,255,255,.08); color: white; background: transparent; text-align: left; }.sidebar-footer:hover { background: rgba(255,255,255,.06); }.admin-avatar { width: 35px; height: 35px; display: grid; place-items: center; color: var(--navy); background: #68d4ca; border-radius: 11px; font: 700 10px 'Outfit'; }.sidebar-footer > div:nth-child(2) { flex: 1; display: flex; flex-direction: column; }.sidebar-footer b { font-size: 10px; }.sidebar-footer small { margin-top: 3px; color: #7893a2; font-size: 8px; }
.admin-main { min-width: 0; }
.admin-topbar { height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; background: white; border-bottom: 1px solid #e3eaed; }.admin-topbar > div:first-of-type { display: flex; flex-direction: column; }.admin-topbar p { margin: 0; font-size: 14px; font-weight: 700; }.admin-topbar span { margin-top: 3px; color: #82939d; font-size: 8px; }.admin-top-actions { display: flex; align-items: center; gap: 10px; }.admin-top-actions label { width: 230px; height: 37px; display: flex; align-items: center; gap: 8px; padding: 0 11px; color: #8c9da5; background: #f3f6f7; border-radius: 11px; }.admin-top-actions input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 9px; }.admin-top-actions .icon-button { position: relative; border: 1px solid #e1e8eb; }.admin-top-actions .icon-button i, .notification-button i { position: absolute; right: 6px; top: 5px; width: 6px; height: 6px; background: #df6a52; border: 2px solid white; border-radius: 50%; }.admin-top-actions a { height: 37px; display: flex; align-items: center; gap: 7px; padding: 0 12px; color: white; background: var(--navy); border-radius: 11px; font-size: 9px; font-weight: 600; }.mobile-menu-button { display: none; }
.dashboard-content { padding: 27px 30px 40px; }
.dashboard-title { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }.dashboard-title h1 { margin: 0; color: var(--ink); font-size: 23px; letter-spacing: -.02em; }.dashboard-title p { margin: 6px 0 0; color: var(--muted); font-size: 9px; }.dashboard-title select, .panel-title select { height: 37px; padding: 0 32px 0 11px; border: 1px solid #dfe7ea; border-radius: 11px; color: #536a77; background: white; font-size: 9px; outline: 0; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }.metric-grid article { min-width: 0; height: 119px; display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 17px; overflow: hidden; background: white; border: 1px solid #e1e8eb; border-radius: 16px; box-shadow: 0 8px 26px rgba(15, 50, 68, .035); }.metric-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; }.metric-icon.teal { color: #168d86; background: #dff4f1; }.metric-icon.amber { color: #a96c20; background: #faedd8; }.metric-icon.navy { color: #315872; background: #e4edf2; }.metric-icon.coral { color: #b85343; background: #fbe6df; }.metric-grid article > div:nth-child(2) { display: flex; flex-direction: column; }.metric-grid small { color: #81929b; font-size: 8px; }.metric-grid b { margin: 5px 0 3px; color: var(--ink); font: 700 20px 'Outfit'; }.metric-grid em { color: #169a82; font-size: 8px; font-style: normal; }.metric-grid em.neutral { color: #768b97; }.metric-hint { grid-column: 1 / -1; align-self: end; color: #9aa8af; font-size: 7px; }
.sparkline { grid-column: 1 / -1; height: 27px; display: flex; align-items: flex-end; gap: 4px; margin-top: -2px; }.sparkline i { flex: 1; border-radius: 3px 3px 0 0; background: #52beb5; opacity: .72; }.sparkline i:nth-child(1){height:28%}.sparkline i:nth-child(2){height:50%}.sparkline i:nth-child(3){height:37%}.sparkline i:nth-child(4){height:64%}.sparkline i:nth-child(5){height:55%}.sparkline i:nth-child(6){height:80%}.sparkline i:nth-child(7){height:100%}.amber-line i { background: #e2a44a; }.coral-line i { background: #dc755f; }.donut { grid-column: 1 / -1; width: 37px; height: 37px; margin: -9px 0 0 auto; border: 7px solid #dce8ed; border-top-color: #527e98; border-right-color: #527e98; border-radius: 50%; transform: rotate(22deg); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .7fr); gap: 14px; margin-top: 14px; }.admin-panel { background: white; border: 1px solid #e1e8eb; border-radius: 17px; box-shadow: 0 8px 26px rgba(15, 50, 68, .035); }.panel-title { display: flex; align-items: center; justify-content: space-between; padding: 17px 18px 13px; }.panel-title h2 { margin: 0; color: var(--ink); font-size: 13px; }.panel-title p { margin: 4px 0 0; color: #8a9aa3; font-size: 8px; }.panel-title > button:not(.icon-button) { display: flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--teal-dark); font-size: 8px; font-weight: 600; }
.order-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }.cancel-button, .refund-button, .payment-button, .refund-complete-button, .refund-failed-button { height: 28px; padding: 0 7px; border-radius: 8px; font-size: 7px; white-space: nowrap; }.cancel-button { border: 1px solid #f0d5ce; color: #b85343; background: #fff7f4; }.cancel-button:hover { background: #ffede8; }.payment-button { border: 1px solid #cbe9df; color: #147e72; background: #effaf6; }.refund-button { border: 1px solid #f0dcc2; color: #9a6421; background: #fff8ec; }.refund-complete-button { border: 1px solid #cbe9df; color: #147e72; background: #effaf6; }.refund-failed-button { border: 1px solid #f0d5ce; color: #b85343; background: #fff7f4; }
.store-status-list { padding: 0 17px; }.store-status-list > div { display: flex; align-items: center; gap: 9px; padding: 11px 0; border-top: 1px solid #edf1f2; }.store-status-list > div > div { flex: 1; display: flex; flex-direction: column; }.store-logo { width: 35px; height: 35px; display: grid; place-items: center; color: #16887f; background: #dff4f1; border-radius: 11px; }.store-logo.offline { color: #82939c; background: #edf1f2; }.store-status-list b { font-size: 9px; }.store-status-list small { margin-top: 3px; color: #8b9ba3; font-size: 7px; }.live-dot { display: flex; align-items: center; gap: 4px; color: #168d7d; font-size: 7px; }.live-dot i { width: 5px; height: 5px; background: #23aa95; border-radius: 50%; }.live-dot.offline { color: #8d9ca4; }.live-dot.offline i { background: #9eabb1; }.store-summary { margin: 8px 17px 17px; padding: 13px; border-radius: 12px; background: #f6f8f9; }.store-summary > div { display: flex; justify-content: space-between; color: #70838e; font-size: 7px; }.store-summary b { color: var(--ink); font: 600 8px 'Outfit'; }.summary-bar { height: 5px; margin: 5px 0 9px; overflow: hidden; background: #dfe7ea; border-radius: 5px; }.summary-bar i { display: block; height: 100%; background: var(--teal); border-radius: 5px; }.summary-bar.amber i { background: var(--amber); }.store-summary.is-empty { color: #82939c; }.store-summary.is-empty small { display: block; margin-top: 1px; font-size: 8px; }
.dashboard-bottom-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); gap: 14px; margin-top: 14px; }.chart-area { height: 205px; display: flex; padding: 3px 20px 18px; }.chart-y { width: 40px; display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 18px; color: #9aa8af; font: 500 7px 'Outfit'; }.chart-lines { position: relative; flex: 1; }.chart-lines > i { position: absolute; left: 0; right: 0; height: 1px; background: #edf1f2; }.chart-lines > i:nth-child(1){top:0}.chart-lines > i:nth-child(2){top:33%}.chart-lines > i:nth-child(3){top:66%}.chart-lines > i:nth-child(4){bottom:18px}.chart-lines svg { position: absolute; left: 0; right: 0; bottom: 18px; width: 100%; height: calc(100% - 18px); overflow: visible; }.chart-lines .area { fill: url(#chartFill); }.chart-lines .line { fill: none; stroke: #19a59b; stroke-width: 3; vector-effect: non-scaling-stroke; }.chart-x { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; color: #95a4ab; font: 500 7px 'Outfit'; }.trend-bars { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; padding: 8px 3px 0; border-bottom: 1px solid #edf1f2; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(33.333% - 1px), #edf1f2 calc(33.333% - 1px), #edf1f2 33.333%); }.trend-bar-item { height: 100%; min-width: 24px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }.trend-bar { width: min(28px, 72%); min-height: 2px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #37b9ad, #159f96); transition: height .25s ease; }.trend-bar-value { min-height: 10px; color: #718690; font: 500 7px 'Outfit'; }.trend-bar-item > span { color: #95a4ab; font: 500 7px 'Outfit'; }.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #9aa9b1; font-size: 10px; }.chart-source { color: #8a9aa3; font-size: 8px; }
.campaign-panel { padding-bottom: 8px; }.campaign-row { display: flex; align-items: center; gap: 9px; margin: 0 16px; padding: 11px 0; border-top: 1px solid #edf1f2; }.campaign-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #177f78; background: #dff4f1; }.campaign-1 { color: #8a5b22; background: #f8ead6; }.campaign-2 { color: #42667d; background: #e5eef2; }.campaign-row > div { flex: 1; display: flex; flex-direction: column; }.campaign-row b { font-size: 9px; }.campaign-row small { margin-top: 4px; color: #8a9aa2; font-size: 7px; }.campaign-row > svg { color: #8c9ca4; }
.campaign-row.inactive { opacity: .55; }

@media (max-width: 1040px) {
  .desktop-header { padding: 0 24px; }.desktop-header nav { display: none; }
  .consumer-shell { grid-template-columns: 1fr; max-width: 720px; padding: 26px 24px 70px; }.desktop-order-panel { display: none; }
  .admin-page { grid-template-columns: 78px 1fr; }.admin-sidebar { padding: 24px 12px 17px; }.admin-store-badge > div, .admin-store-badge > svg, .admin-sidebar nav span, .sidebar-footer > div:nth-child(2), .sidebar-footer > svg { display: none; }.admin-sidebar .brand-mark { width: 54px; height: 54px; justify-content: center; padding: 0; }.admin-sidebar .brand-mark img { border-radius: 11px; object-fit: cover; object-position: center 28%; }.admin-store-badge { justify-content: center; padding: 10px 0; }.admin-sidebar nav button { justify-content: center; padding: 0; }.admin-sidebar nav button i { position: absolute; margin: 0 0 0 28px; transform: translateY(-12px); }.sidebar-footer { justify-content: center; padding: 14px 0 0; }.metric-grid { grid-template-columns: repeat(2, 1fr); }.dashboard-grid, .dashboard-bottom-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  body { background: white; }
  .desktop-header { display: none; }
  .consumer-shell { display: block; max-width: none; padding: 0 0 118px; }
  .app-column { padding: 0 18px; }
  .mobile-topbar { height: 70px; display: flex; align-items: center; justify-content: space-between; }.mobile-topbar > div { display: flex; align-items: center; }.notification-button { position: relative; }
  .store-selector { margin-top: 7px; }.store-pin { width: 36px; height: 36px; }.store-time { font-size: 10px; }
  .order-type-switch { width: 100%; margin: 17px 0 14px; }
  .hero-card { min-height: 236px; padding: 29px 24px; border-radius: 24px; }
  .hero-copy { width: 62%; }.hero-copy h1 { font-size: 27px; }.hero-copy p { margin: 11px 0 18px; font-size: 10px; line-height: 1.6; }.hero-copy button { height: 39px; padding: 0 13px; font-size: 10px; }
  .hero-cup { width: 145px; height: 205px; right: -2px; bottom: -3px; transform: scale(.86); transform-origin: bottom right; }.orbit-one { width: 260px; height: 260px; right: -80px; }.orbit-two { width: 175px; height: 175px; right: -25px; top: 34px; }
  .offer-rail { display: flex; gap: 10px; margin: 15px -18px 24px; padding: 0 18px; overflow-x: auto; scrollbar-width: none; }.offer-rail::-webkit-scrollbar { display: none; }.offer-rail > button { min-width: 280px; min-height: 78px; }
  .section-heading h2 { font-size: 21px; }.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }.product-image-wrap { height: 150px; }.product-body { padding: 12px; }.product-body h3 { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.product-body p { height: 30px; margin: 5px 0 11px; font-size: 8px; }.product-footer b { font-size: 15px; }.product-footer div span { display: none; }.add-button { width: 32px; padding: 0; justify-content: center; }.add-button span { display: none; }
  .floating-cart { display: flex; bottom: 74px; }
  .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 19; height: 68px; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 12px max(8px, env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); border-top: 1px solid #e3eaed; backdrop-filter: blur(18px); }.bottom-nav button { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; color: #84949c; background: transparent; }.bottom-nav button > span { position: relative; }.bottom-nav small { font-size: 8px; }.bottom-nav button.active { color: var(--teal-dark); }.bottom-nav button i { position: absolute; right: -9px; top: -7px; width: 16px; height: 16px; display: grid; place-items: center; color: white; background: #dc654e; border-radius: 50%; font-size: 7px; font-style: normal; }
  .admin-page { display: block; }.admin-sidebar { display: none; }.admin-topbar { height: 63px; padding: 0 16px; }.mobile-menu-button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #e2e8eb; border-radius: 11px; background: white; }.admin-topbar > div:first-of-type { display: none; }.admin-top-actions label, .admin-top-actions a { display: none; }.dashboard-content { padding: 20px 15px 30px; }.dashboard-title { align-items: flex-start; }.dashboard-title h1 { font-size: 21px; }.dashboard-title p { max-width: 250px; line-height: 1.6; }.dashboard-title select { max-width: 115px; }.metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }.metric-grid article { height: 112px; padding: 13px; gap: 8px; }.metric-icon { width: 34px; height: 34px; }.metric-grid b { font-size: 16px; }.order-board { overflow: hidden; }.order-table-wrap { overflow-x: auto; }.order-table-wrap table { min-width: 720px; }.dashboard-grid, .dashboard-bottom-grid { gap: 10px; margin-top: 10px; }
}

@media (max-width: 390px) {
  .app-column { padding: 0 14px; }.hero-card { min-height: 226px; padding: 25px 19px; }.hero-copy h1 { font-size: 24px; }.hero-cup { right: -17px; transform: scale(.78); }.product-grid { gap: 8px; }.product-image-wrap { height: 135px; }.metric-grid { grid-template-columns: 1fr; }
}

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

/* Interactive states and management workspaces */
.favorite-button.active { color: #d45f51; background: #fff2ef; }
.section-heading button.active { color: white; border-color: var(--navy); background: var(--navy); }
.search-field { display: flex; align-items: center; gap: 8px; height: 42px; margin: -7px 0 14px; padding: 0 11px; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); background: white; }
.search-field input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.search-field button { width: 26px; height: 26px; border: 0; background: transparent; color: var(--muted); }
.no-results { grid-column: 1 / -1; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9aa9b1; }
.no-results p { margin: 9px 0 0; font-size: 11px; }
.no-results--error .secondary-button { margin-top: 12px; }
.sheet-actions { display: flex; align-items: center; gap: 2px; }
.address-field { display: flex; align-items: center; gap: 8px; margin: 12px 0; padding: 0 12px; height: 42px; border: 1px solid var(--line); border-radius: 12px; color: var(--teal-dark); background: #fbfdfd; }
.address-field input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.order-history-list { display: flex; flex-direction: column; gap: 10px; }
.history-card { padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: #f8fbfb; }
.history-head, .history-card > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.history-head b { color: var(--ink); font: 700 13px 'Outfit'; }
.history-card p { margin: 10px 0; color: #526b78; font-size: 10px; line-height: 1.6; }
.history-statuses { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; color: #7d8e96; font-size: 8px; }
.history-statuses span { padding: 3px 6px; border-radius: 999px; background: #eef2f3; }
.notification-list { display: flex; flex-direction: column; gap: 8px; }
.notification-row { position: relative; width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: #fbfdfd; text-align: left; }
.notification-row:hover { border-color: #b8dfda; background: #f4fbfa; }
.notification-row.is-read { opacity: .7; }
.notification-icon { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; color: var(--teal-dark); background: var(--mint); border-radius: 10px; }
.notification-row > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.notification-row b { color: var(--ink); font-size: 10px; }
.notification-row small { color: #526b78; font-size: 9px; line-height: 1.45; }
.notification-row em { color: var(--muted); font-size: 8px; font-style: normal; }
.notification-row > i { width: 7px; height: 7px; flex: 0 0 auto; margin: 3px 0 0 auto; border-radius: 50%; background: #df6a52; }
.history-card > div:last-child span { color: var(--muted); font-size: 9px; }
.history-card strong { color: var(--navy); font: 700 15px 'Outfit'; }
.history-cancel-button { width: 100%; height: 30px; margin-top: 10px; border: 1px solid #f0d5ce; border-radius: 9px; color: #b85343; background: #fff7f4; font-size: 9px; font-weight: 700; }
.profile-hero { display: flex; align-items: center; gap: 11px; padding: 15px; border-radius: 17px; background: linear-gradient(135deg, #e7f6f3, #f5fbfa); }
.profile-avatar { width: 47px; height: 47px; display: grid; place-items: center; color: white; background: var(--navy); border-radius: 15px; font: 700 21px 'Outfit'; }
.profile-hero > div:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.profile-hero b { color: var(--ink); font-size: 14px; }
.profile-hero small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.member-badge { padding: 5px 8px; color: #946326; background: #f8e9ca; border-radius: 999px; font: 700 9px 'Outfit'; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.profile-stats > div { display: flex; flex-direction: column; padding: 12px; border-radius: 13px; background: #f5f8f8; }
.profile-stats b { color: var(--navy); font: 700 17px 'Outfit'; }
.profile-stats span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.profile-list { display: flex; flex-direction: column; gap: 7px; }
.profile-list button { display: flex; align-items: center; gap: 9px; padding: 13px 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: white; text-align: left; }
.profile-list button > span { margin-left: auto; color: var(--muted); font-size: 9px; }
.profile-list button > svg:last-child { color: #94a3aa; }
.profile-list .profile-logout { color: #b85343; background: #fff7f4; border-color: #f3ddd6; }
.profile-list .profile-logout > svg:last-child { color: #d18a7d; }
.password-change { margin-top: 13px; padding-top: 12px; border-top: 1px solid #edf1f2; }
.password-change-toggle { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 2px; border: 0; color: var(--ink); background: transparent; text-align: left; }
.password-change-toggle span { font-size: 11px; font-weight: 700; }.password-change-toggle small { margin-left: auto; color: var(--muted); font-size: 8px; }.password-change-toggle svg:last-child { color: var(--muted); transition: transform .2s ease; }.password-change-toggle svg.is-open { transform: rotate(180deg); }
.password-change-form { display: flex; flex-direction: column; gap: 9px; padding: 11px; border-radius: 12px; background: #f6f9f9; }.password-change-form label { display: flex; flex-direction: column; gap: 5px; }.password-change-form label span { color: #526b78; font-size: 9px; font-weight: 700; }.password-change-form input { height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; outline: 0; font-size: 10px; }.password-change-form .primary-button { height: 38px; align-self: flex-start; font-size: 10px; }.password-change--compact { max-width: 430px; margin-top: 22px; padding: 0; border-top: 0; }.password-change--compact .password-change-toggle { padding-left: 0; }
.fee-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 2px; color: var(--muted); font-size: 10px; }
.fee-row b { color: var(--ink); font: 600 12px 'Outfit'; }
.payment-note { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; color: #7b8d96; font-size: 9px; }
.payment-note svg { color: var(--teal-dark); flex: 0 0 auto; }
.quote-error { margin: 9px 0 0; padding: 9px 10px; border-radius: 10px; color: #a64f43; background: #fff2ee; font-size: 9px; line-height: 1.5; }
.spin-icon { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; left: 50%; bottom: 25px; z-index: 100; display: inline-flex; align-items: center; gap: 7px; max-width: min(90vw, 420px); padding: 11px 15px; border: 0; border-radius: 999px; color: white; background: var(--navy); box-shadow: 0 14px 34px rgba(5, 28, 43, .25); transform: translateX(-50%); font-size: 11px; animation: toastIn .25s ease; }
.toast svg { color: #68d4ca; flex: 0 0 auto; }
.admin-toast { bottom: 24px; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } }
.status-cancelled { color: #a65d65; background: #fbe7ea; }
.status-cancelled i { background: #c86d79; }
.status-payment-pending, .status-refund-none { color: #7e8d95; background: #eef2f3; }
.status-payment-pending i, .status-refund-none i { background: #99a8ae; }
.status-payment-paid { color: #168d7d; background: #e6f6f1; }
.status-payment-paid i { background: #24a88f; }
.status-payment-failed, .status-refund-failed { color: #b85343; background: #fff0eb; }
.status-payment-failed i, .status-refund-failed i { background: #d26d59; }
.status-payment-refunded, .status-refund-completed { color: #42667d; background: #e9f0f4; }
.status-payment-refunded i, .status-refund-completed i { background: #6c91a5; }
.status-refund-requested { color: #9a6421; background: #fff4df; }
.status-refund-requested i { background: #d49b42; }
.order-link { padding: 0; border: 0; color: var(--teal-dark); background: transparent; font: 700 10px 'Outfit'; text-align: left; }
.order-link:hover { text-decoration: underline; }
.table-substatus { display: block; margin-top: 4px; color: #8a9aa3; font-size: 7px; }
.order-details-modal { width: min(760px, calc(100vw - 30px)); }
.order-detail-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 12px; padding: 13px 14px; border-radius: 13px; background: #f5f8f8; }
.order-detail-summary > div { display: flex; flex-direction: column; gap: 4px; }
.order-detail-summary b { color: var(--ink); font-size: 13px; }
.order-detail-summary span { color: var(--muted); font-size: 9px; }
.order-detail-summary strong { color: var(--navy); font: 700 20px 'Outfit'; }
.order-detail-statuses { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }
.order-detail-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 12px; }
.order-detail-block { padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #fbfdfd; }
.order-detail-block h3 { margin: 0 0 10px; color: var(--ink); font-size: 11px; }
.order-detail-items, .order-detail-logs { display: flex; flex-direction: column; gap: 8px; }
.order-detail-items > div, .order-detail-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #526b78; font-size: 9px; }
.order-detail-items b, .order-detail-total b { color: var(--ink); font: 600 10px 'Outfit'; }
.order-detail-total { margin-top: 9px; padding-top: 9px; border-top: 1px solid #edf1f2; }
.order-detail-block dl { display: flex; flex-direction: column; gap: 9px; margin: 0; }
.order-detail-block dl > div { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 8px; }
.order-detail-block dt { color: var(--muted); font-size: 8px; }
.order-detail-block dd { margin: 0; color: var(--ink); font-size: 9px; overflow-wrap: anywhere; }
.order-detail-logs > div { display: flex; flex-direction: column; gap: 3px; padding-bottom: 7px; border-bottom: 1px solid #edf1f2; }
.order-detail-logs > div:last-child { padding-bottom: 0; border-bottom: 0; }
.order-detail-logs span { color: var(--ink); font-size: 9px; }
.order-detail-logs small { color: var(--muted); font-size: 8px; }
.order-detail-actions { display: flex; justify-content: flex-end; margin-top: 13px; }
.management-workspace { min-height: 440px; padding: 20px; }
.workspace-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.workspace-heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.secondary-button.compact { height: 36px; display: inline-flex; align-items: center; gap: 5px; padding: 0 11px; }
.workspace-heading h2 { margin: 0; color: var(--ink); font-size: 18px; }
.workspace-heading p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.workspace-search { width: min(240px, 45%); height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: #f8fafb; }
.workspace-search input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 10px; }
.workspace-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; color: #9aa9b1; }.workspace-empty p { margin: 8px 0 0; font-size: 10px; }
.management-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.setting-control select { height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; font-size: 9px; }
.marketing-subheading { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 9px; }.marketing-subheading h3 { margin: 0; color: var(--ink); font-size: 11px; }.marketing-subheading span { color: var(--muted); font-size: 8px; }.compact-empty { min-height: 130px; }
@media (max-width: 700px) { .management-workspace { padding: 15px; }.workspace-heading { flex-direction: column; }.workspace-search { width: 100%; }.management-grid, .user-summary-grid { grid-template-columns: 1fr; }.management-card { align-items: flex-start; }.management-card-actions { margin-left: auto; }.product-management-grid .management-card { align-items: center; }.toast { bottom: 83px; }.profile-stats b { font-size: 15px; }.admin-sidebar.mobile-open { position: fixed; inset: 0 auto 0 0; z-index: 90; display: flex; width: min(260px, 82vw); padding: 25px 17px 18px; box-shadow: 18px 0 40px rgba(5,28,43,.25); }.admin-sidebar.mobile-open .admin-store-badge > div, .admin-sidebar.mobile-open .admin-store-badge > svg, .admin-sidebar.mobile-open nav span, .admin-sidebar.mobile-open .sidebar-footer > div:nth-child(2), .admin-sidebar.mobile-open .sidebar-footer > svg { display: flex; }.admin-sidebar.mobile-open .admin-store-badge > svg, .admin-sidebar.mobile-open .sidebar-footer > svg { display: block; }.admin-sidebar.mobile-open nav button { justify-content: flex-start; padding: 0 12px; }.admin-sidebar.mobile-open .admin-store-badge { justify-content: flex-start; padding: 11px; }.admin-sidebar.mobile-open .brand-mark { width: 150px; height: 76px; justify-content: flex-start; padding: 0 10px; }.admin-sidebar.mobile-open .brand-mark img { object-fit: contain; object-position: center; } }
.audit-log-list { display: flex; flex-direction: column; }.audit-log-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(120px, .7fr); gap: 14px; align-items: center; padding: 12px 2px; border-top: 1px solid #edf1f2; }.audit-log-row:first-child { border-top: 0; }.audit-log-row > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }.audit-log-row b { color: var(--ink); font-size: 10px; }.audit-log-row span, .audit-log-row small { color: var(--muted); font-size: 8px; }.audit-log-row code { overflow: hidden; color: #82939d; font: 8px 'Outfit'; text-overflow: ellipsis; white-space: nowrap; }
.audit-subheading { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); }.audit-subheading h3 { margin: 0; color: var(--ink); font-size: 12px; }.audit-subheading span { color: var(--muted); font-size: 8px; }.payment-event-list { display: flex; flex-direction: column; }.payment-event-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(140px, .75fr); gap: 12px; align-items: center; padding: 10px 2px; border-top: 1px solid #edf1f2; }.payment-event-row > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }.payment-event-row b { color: var(--ink); font-size: 9px; }.payment-event-row span, .payment-event-row small { color: var(--muted); font-size: 8px; }.payment-event-row code { overflow: hidden; color: #82939d; font: 8px 'Outfit'; text-overflow: ellipsis; white-space: nowrap; }
.admin-form-modal { width: min(680px, calc(100vw - 30px)); max-height: min(88vh, 760px); overflow: auto; padding: 20px; border-radius: 20px; background: white; box-shadow: 0 30px 80px rgba(4,23,35,.25); }.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.admin-form-field { display: flex; flex-direction: column; gap: 5px; }.admin-form-field span { color: #526b78; font-size: 9px; font-weight: 700; }.admin-form-field input { height: 38px; min-width: 0; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fbfdfd; outline: 0; font-size: 10px; }.admin-form-field input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(21,159,150,.12); }.admin-form-grid > .admin-form-field:nth-child(3), .admin-form-grid > .admin-form-field:nth-child(4), .admin-form-grid > .admin-form-field:nth-child(9) { grid-column: 1 / -1; }.admin-check-field { display: flex; align-items: center; gap: 7px; color: #526b78; font-size: 10px; }.admin-check-field input { accent-color: var(--teal); }.admin-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; padding-top: 5px; }.secondary-button { height: 42px; padding: 0 15px; border: 1px solid var(--line); border-radius: 11px; color: #526b78; background: white; font-size: 10px; font-weight: 700; }.mini-edit-button { height: 24px; padding: 0 7px; border: 1px solid var(--line); border-radius: 7px; color: var(--teal-dark); background: white; font-size: 8px; }
.form-notice { grid-column: 1 / -1; margin: 0; padding: 9px 10px; border-radius: 9px; color: #b85343; background: #fff3ef; font-size: 10px; }
.admin-file-field { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px 9px; padding: 10px; border: 1px dashed #b9ccd2; border-radius: 10px; color: #526b78; background: #f8fbfb; }.admin-file-field > span { grid-column: 1 / -1; font-size: 9px; font-weight: 700; }.admin-file-field input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }.admin-file-field b { color: var(--teal-dark); font-size: 10px; }.admin-file-field small { color: var(--muted); font-size: 8px; }.admin-image-preview { display: grid; place-items: center; min-height: 80px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #f4f8f8; }.admin-image-preview img { width: 100%; height: 100px; object-fit: cover; }
@media (max-width: 700px) {
  .order-detail-grid { grid-template-columns: 1fr; }
  .order-detail-summary strong { font-size: 17px; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-form-grid > .admin-form-field:nth-child(3), .admin-form-grid > .admin-form-field:nth-child(4), .admin-form-grid > .admin-form-field:nth-child(9) { grid-column: auto; }
  .workspace-heading-actions { width: 100%; }
  .workspace-heading-actions > button { flex: 1; }
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(21, 159, 150, .32); outline-offset: 2px; }

/* 2026 admin UI refinement */
.admin-page {
  grid-template-columns: 252px minmax(0, 1fr);
  background: linear-gradient(135deg, #f7fafb 0%, #eef4f5 100%);
}
.admin-sidebar {
  padding: 28px 18px 20px;
  background: linear-gradient(180deg, #071b2b 0%, #0a2537 100%);
  box-shadow: 12px 0 34px rgba(7, 27, 43, .08);
}
.admin-sidebar .brand-mark {
  width: 166px;
  height: 66px;
  padding: 0 8px;
}
.admin-store-badge {
  margin: 28px 0 22px;
  padding: 13px;
  border-color: rgba(117, 211, 201, .17);
  background: rgba(255,255,255,.06);
}
.admin-sidebar nav { gap: 6px; }
.admin-sidebar nav button {
  height: 45px;
  border-radius: 13px;
  font-size: 12px;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.admin-sidebar nav button:hover { transform: translateX(2px); }
.admin-sidebar nav button.active {
  color: #f8ffff;
  background: linear-gradient(90deg, rgba(55, 190, 178, .22), rgba(55, 190, 178, .08));
  box-shadow: inset 3px 0 0 #65d4c9;
}
.sidebar-footer { padding-top: 16px; }
.admin-main { min-width: 0; }
.admin-topbar {
  height: 78px;
  padding: 0 34px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(223, 232, 235, .9);
}
.admin-topbar p { font-size: 16px; letter-spacing: -.02em; }
.admin-topbar span { font-size: 9px; }
.admin-top-actions { gap: 12px; }
.admin-top-actions label {
  width: 270px;
  height: 40px;
  border: 1px solid #e6edef;
  background: #f7fafa;
  border-radius: 13px;
}
.admin-top-actions input { font-size: 10px; }
.admin-top-actions .icon-button {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: #fff;
}
.admin-top-actions a {
  height: 40px;
  padding: 0 14px;
  border-radius: 13px;
  font-size: 10px;
  box-shadow: 0 5px 12px rgba(7,27,43,.12);
}
.dashboard-content { max-width: 1600px; margin: 0 auto; padding: 34px 36px 48px; }
.dashboard-title { margin-bottom: 24px; }
.dashboard-title h1 { font-size: clamp(25px, 2vw, 31px); }
.dashboard-title p { font-size: 10px; }
.dashboard-title select, .panel-title select {
  height: 40px;
  border-radius: 12px;
  font-size: 10px;
  box-shadow: 0 4px 14px rgba(15,50,68,.04);
}
.metric-grid { gap: 16px; }
.metric-grid article {
  height: 132px;
  padding: 18px;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(15, 50, 68, .055);
  transition: transform .2s ease, box-shadow .2s ease;
}
.metric-grid article:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(15,50,68,.09); }
.metric-icon { width: 43px; height: 43px; border-radius: 13px; }
.metric-grid small { font-size: 9px; }
.metric-grid b { margin: 6px 0 4px; font-size: 23px; }
.metric-grid em { font-size: 9px; }
.metric-hint { font-size: 8px; }
.dashboard-grid, .dashboard-bottom-grid { gap: 16px; margin-top: 16px; }
.admin-panel {
  border-color: #e4ecee;
  border-radius: 19px;
  box-shadow: 0 10px 30px rgba(15, 50, 68, .045);
}
.panel-title { padding: 19px 20px 14px; }
.panel-title h2 { font-size: 14px; }
.panel-title p { font-size: 9px; }
.panel-title > button:not(.icon-button) { font-size: 9px; }
.order-table-wrap { overflow-x: auto; }
.order-board table { min-width: 700px; }
.order-board thead th { font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
.order-board tbody tr { transition: background .18s ease; }
.order-board tbody tr:hover { background: #f7fbfb; }
.order-board td { padding-top: 14px; padding-bottom: 14px; }
.order-link { font-size: 11px; }
.status-pill { padding: 5px 8px; border-radius: 999px; font-size: 8px; font-weight: 700; }
.store-status-list { padding: 0 20px; }
.store-status-list > div { padding: 13px 0; }
.store-summary { margin: 10px 20px 20px; padding: 15px; border-radius: 14px; }
.chart-area { height: 232px; padding: 5px 22px 20px; }
.trend-bar { box-shadow: 0 5px 12px rgba(21,159,150,.18); }
.campaign-panel { padding-bottom: 10px; }
.campaign-row { margin: 0 20px; padding: 13px 0; }
.campaign-row:hover { background: #fbfdfd; }
.management-workspace { padding: 24px; }
.workspace-heading { margin-bottom: 20px; }
.workspace-heading h2 { font-size: 20px; }
.workspace-heading p { font-size: 10px; }
.management-grid { gap: 13px; }

@media (max-width: 1040px) {
  .admin-page { grid-template-columns: 82px minmax(0, 1fr); }
  .dashboard-content { padding: 28px 24px 40px; }
}
@media (max-width: 700px) {
  .admin-page { background: #f4f7f8; }
  .admin-topbar { height: 68px; padding: 0 15px; }
  .dashboard-content { padding: 20px 15px 32px; }
  .dashboard-title { gap: 12px; }
  .dashboard-title h1 { font-size: 22px; }
  .metric-grid article { height: 116px; padding: 14px; }
  .metric-grid b { font-size: 17px; }
  .admin-panel { border-radius: 16px; }
  .management-workspace { padding: 16px; }
  .admin-sidebar.mobile-open { box-shadow: 22px 0 50px rgba(5,28,43,.32); }
}

/* Management workspaces: aligned cards, controls and responsive layouts */
.management-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 92px;
  padding: 14px;
  border: 1px solid #e3ecee;
  border-radius: 15px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%);
  box-shadow: 0 5px 16px rgba(15, 50, 68, .035);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.management-card:hover {
  border-color: #b9dfdb;
  box-shadow: 0 10px 24px rgba(15, 50, 68, .07);
  transform: translateY(-1px);
}
.management-card > img {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 13px;
  object-fit: cover;
  background: #edf4f4;
}
.management-card-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--teal-dark);
  background: #e2f5f2;
  border-radius: 13px;
}
.management-card-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.management-card-copy h3 {
  overflow: hidden;
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.management-card-copy p {
  overflow: hidden;
  margin: 0;
  color: #5e7480;
  font-size: 9px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.management-card-copy small {
  overflow: hidden;
  color: #8a9aa3;
  font-size: 8px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.management-card-actions {
  min-width: 76px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}
.switch-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6c8089;
  font-size: 8px;
  white-space: nowrap;
}
.switch-row input,
.settings-list > label > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.switch-row i,
.settings-list > label > i {
  position: relative;
  display: block;
  width: 32px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #cbd7db;
  transition: background .2s ease;
}
.switch-row i::after,
.settings-list > label > i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(7,27,43,.18);
  content: '';
  transition: transform .2s ease;
}
.switch-row input:checked + i,
.settings-list > label > input:checked + i { background: var(--teal); }
.switch-row input:checked + i::after,
.settings-list > label > input:checked + i::after { transform: translateX(14px); }
.mini-edit-button {
  min-width: 42px;
  padding: 0 9px;
  font-weight: 700;
}
.product-management-grid .management-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 106px;
}
.product-management-grid .management-card-copy h3 { font-size: 13px; }
.product-management-grid .management-card-copy small { color: var(--teal-dark); font: 600 10px 'Outfit'; }
.campaign-management-card .management-card-icon { background: #fbefd9; color: #9a6421; }
.campaign-management-card:nth-child(2n) .management-card-icon { background: #e7eef4; color: #42667d; }
.coupon-management-card .management-card-icon { background: #eee9f9; color: #6a5795; }
.marketing-subheading {
  margin: 22px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #edf1f2;
}
.marketing-subheading:first-of-type { margin-top: 4px; }
.marketing-subheading h3 { font-size: 12px; }
.marketing-subheading span {
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--teal-dark);
  background: var(--mint);
  font-size: 8px;
  font-weight: 700;
}
.user-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.user-summary-grid article {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid #e3ecee;
  border-radius: 14px;
  color: var(--teal-dark);
  background: #f7fbfb;
}
.user-summary-grid article > svg { grid-row: 1 / span 2; }
.user-summary-grid article b {
  color: var(--ink);
  font: 700 20px 'Outfit';
}
.user-summary-grid article span {
  color: #5e7480;
  font-size: 9px;
}
.user-summary-grid article em {
  grid-column: 2;
  margin-top: 4px;
  color: #8a9aa3;
  font-size: 8px;
  font-style: normal;
}
.user-management-grid .management-card { min-height: 88px; }
.workspace-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 13px 14px;
  border: 1px solid #cce8e3;
  border-radius: 13px;
  color: var(--teal-dark);
  background: #f0faf8;
}
.workspace-note > div { min-width: 0; }
.workspace-note b { color: var(--ink); font-size: 10px; }
.workspace-note p { margin: 4px 0 0; color: #5e7480; font-size: 9px; line-height: 1.5; }
.settings-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #edf1f2;
}
.settings-list > label {
  position: relative;
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 2px;
  border-bottom: 1px solid #edf1f2;
}
.settings-list > label > span:first-child {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-list > label b { color: var(--ink); font-size: 11px; }
.settings-list > label small { color: #83949d; font-size: 8px; line-height: 1.5; }
.settings-list > label > i { margin-left: auto; }
.setting-control, .setting-status {
  min-width: 86px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: var(--teal-dark);
  font-size: 9px;
  font-weight: 700;
  text-align: right;
}
.setting-status svg { color: #1da58f; }
.settings-list + .password-change--compact { margin-top: 24px; }

@media (max-width: 900px) {
  .management-grid { grid-template-columns: 1fr; }
  .user-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .management-card { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
  .management-card > img { width: 54px; height: 54px; }
  .management-card-icon { width: 38px; height: 38px; }
  .management-card-copy h3 { font-size: 11px; }
  .management-card-copy p { font-size: 8px; }
  .management-card-copy small { font-size: 7px; }
  .management-card-actions { min-width: 66px; gap: 6px; }
  .user-summary-grid { grid-template-columns: 1fr; gap: 8px; }
  .user-summary-grid article { min-height: 64px; }
  .settings-list > label { align-items: flex-start; }
  .setting-control, .setting-status { min-width: 74px; padding-top: 3px; }
  .settings-list > label b { font-size: 10px; }
  .settings-list > label small { font-size: 7px; }
}