/* ═══════════════════════════════════════════════════════
   EQUIPE COVIP — style.css
   Tema: quente, rústico-moderno, marca forte
═══════════════════════════════════════════════════════ */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

:root {
   --bg: #FBF7F2;
   --surface: #FFFFFF;
   --surface2: #F3EEE7;
   --border: rgba(0, 0, 0, .09);
   --border-md: rgba(0, 0, 0, .16);
   --text: #1C1610;
   --muted: #7B6F63;
   --hint: #B0A698;
   --accent: #C94B1D;
   --accent-dk: #A33C16;
   --accent-lt: #FAEAE3;
   --gold: #D4962A;
   --gold-lt: #FDF4E3;
   --green: #1A7A4F;
   --green-lt: #E3F5EC;
   --red: #9B2121;
   --red-lt: #FDEAEA;
   --amber: #9A5B0C;
   --amber-lt: #FEF3E2;
   --r-sm: 8px;
   --r-md: 14px;
   --r-lg: 20px;
   --r-xl: 28px;
   --sh-sm: 0 1px 4px rgba(0, 0, 0, .06);
   --sh-md: 0 4px 20px rgba(0, 0, 0, .10);
   --sh-lg: 0 8px 40px rgba(0, 0, 0, .13);
   --ease: .22s cubic-bezier(.4, 0, .2, 1);
   --font-display: 'Playfair Display', Georgia, serif;
   --font: 'Plus Jakarta Sans', system-ui, sans-serif;
}

html {
   font-size: 16px;
   -webkit-text-size-adjust: 100%
}

body {
   font-family: var(--font);
   background: var(--bg);
   color: var(--text);
   min-height: 100dvh;
   overflow-x: hidden
}

/* ── Screen system ─────────────────────────────────── */
#app {
   position: relative
}

.screen {
   display: none;
   flex-direction: column;
   min-height: 100dvh;
   max-width: 500px;
   margin: 0 auto
}

.screen.active {
   display: flex
}

/* ═══════════════════════════════════
   SPLASH
═══════════════════════════════════ */
.splash-bg {
   position: fixed;
   inset: 0;
   z-index: 0;
   background: #1C1610;
   overflow: hidden
}

.splash-grain {
   position: absolute;
   inset: 0;
   opacity: .04;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
   background-size: 200px
}

.splash-orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(80px);
   opacity: .35
}

.orb1 {
   width: 340px;
   height: 340px;
   background: var(--accent);
   top: -80px;
   right: -80px
}

.orb2 {
   width: 260px;
   height: 260px;
   background: var(--gold);
   bottom: -60px;
   left: -60px
}

.splash-content {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   padding: 56px 28px 48px;
   min-height: 100dvh
}

.brand-badge {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   background: rgba(255, 255, 255, .1);
   border: 1px solid rgba(255, 255, 255, .15);
   border-radius: 100px;
   padding: 5px 14px 5px 10px;
   color: rgba(255, 255, 255, .7);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .06em;
   text-transform: uppercase;
   margin-bottom: 24px;
   width: fit-content
}

.brand-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--accent);
   box-shadow: 0 0 10px var(--accent)
}

.brand-name {
   font-family: var(--font-display);
   font-size: 58px;
   line-height: 1.05;
   font-weight: 700;
   color: #fff;
   margin-bottom: 16px
}

.brand-name em {
   font-style: italic;
   font-weight: 400;
   color: #E8C28A
}

.brand-tagline {
   font-size: 15px;
   color: rgba(255, 255, 255, .55);
   line-height: 1.65;
   margin-bottom: 36px
}

.splash-card {
   background: rgba(255, 255, 255, .07);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: var(--r-xl);
   padding: 28px 24px 24px
}

.splash-card .field-label {
   color: rgba(255, 255, 255, .6)
}

.splash-card .field-input {
   background: rgba(255, 255, 255, .1);
   border-color: rgba(255, 255, 255, .18);
   color: #fff;
   margin-bottom: 16px
}

.splash-card .field-input::placeholder {
   color: rgba(255, 255, 255, .35)
}

.splash-card .field-input:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgba(201, 75, 29, .25)
}

.splash-card .whatsapp-optin {
   margin-top: 14px;
   line-height: 1.4
}

.whatsapp-btn {
   color: #087f5b;
   background: #e7f8ef;
   border-color: #a9e4c5
}

.whatsapp-btn:hover {
   color: #fff;
   background: #18a66b;
   border-color: #18a66b
}

.badge.whatsapp-sent {
   color: #087f5b;
   background: #e7f8ef;
   border: 1px solid #a9e4c5
}

.whatsapp-batch-modal { max-width: 620px }

.whatsapp-batch-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 12px 0;
   border-bottom: 1px solid var(--border)
}

.whatsapp-batch-row div { min-width: 0 }
.whatsapp-batch-row strong { display: block; font-size: 14px }
.whatsapp-batch-row span { display: block; margin-top: 3px; color: var(--hint); font-size: 12px }
.whatsapp-batch-empty { padding: 22px; color: var(--green); background: var(--green-lt); border-radius: var(--r-sm); text-align: center; font-weight: 700 }

.config-textarea {
   min-height: 104px;
   resize: vertical;
   line-height: 1.5;
   padding-top: 12px;
   padding-bottom: 12px
}

.whatsapp-template-editor {
   margin-top: 16px;
   padding: 14px;
   background: var(--surface2);
   border: 1px solid var(--border);
   border-radius: var(--r-md)
}

.whatsapp-template-editor .config-textarea { margin-top: 10px }

.whatsapp-template-picker {
   display: grid;
   gap: 10px
}

.whatsapp-template-option {
   width: 100%;
   padding: 14px 16px;
   color: var(--text);
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--r-md);
   text-align: left;
   cursor: pointer;
   transition: border-color var(--ease), background var(--ease)
}

.whatsapp-template-option:hover {
   background: var(--green-lt);
   border-color: var(--green)
}

.whatsapp-template-option strong { display: block; color: var(--green); font-size: 14px; margin-bottom: 5px }
.whatsapp-template-option span { display: block; color: var(--muted); font-size: 12px; line-height: 1.45 }

.btn-ghost-sm {
   margin-top: 12px;
   background: none;
   border: none;
   font-family: var(--font);
   font-size: 13px;
   color: rgba(255, 255, 255, .4);
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 5px;
   width: 100%;
   justify-content: center;
   padding: 6px;
   border-radius: 6px;
   transition: color var(--ease)
}

.btn-ghost-sm:hover {
   color: rgba(255, 255, 255, .7)
}

.security-note {
   margin-top: 24px;
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 11px;
   color: rgba(255, 255, 255, .25);
   justify-content: center
}

/* ═══════════════════════════════════
   SHARED COMPONENTS
═══════════════════════════════════ */
.field-label {
   display: block;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .07em;
   color: var(--muted);
   margin-bottom: 8px
}

.field-input {
   width: 100%;
   height: 48px;
   padding: 0 14px;
   border-radius: var(--r-sm);
   border: 1.5px solid var(--border-md);
   background: var(--bg);
   color: var(--text);
   font-family: var(--font);
   font-size: 15px;
   outline: none;
   transition: border-color var(--ease), box-shadow var(--ease)
}

.field-input:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgba(201, 75, 29, .12)
}

.field-help {
  margin-top: 6px;
  color: var(--hint);
  font-size: 12px;
  line-height: 1.4;
}

select.field-input {
   cursor: pointer
}

.btn-cta {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   width: 100%;
   height: 52px;
   background: var(--accent);
   color: #fff;
   border: none;
   border-radius: var(--r-sm);
   font-family: var(--font);
   font-size: 15px;
   font-weight: 700;
   cursor: pointer;
   letter-spacing: .01em;
   transition: background var(--ease), transform var(--ease), opacity var(--ease)
}

.btn-cta:hover {
   background: var(--accent-dk)
}

.btn-cta:active {
   transform: scale(.98)
}

.btn-cta:disabled {
   opacity: .35;
   cursor: default;
   pointer-events: none
}

.btn-cta.small {
   height: 40px;
   font-size: 14px;
   width: auto;
   padding: 0 20px
}

.btn-ghost {
   width: 100%;
   height: 48px;
   background: none;
   border: 1.5px solid var(--border-md);
   border-radius: var(--r-sm);
   font-family: var(--font);
   font-size: 14px;
   color: var(--muted);
   cursor: pointer;
   transition: background var(--ease)
}

.btn-ghost:hover {
   background: var(--surface2)
}

.icon-btn {
   width: 38px;
   height: 38px;
   background: var(--surface2);
   border: none;
   border-radius: 10px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--muted);
   transition: background var(--ease)
}

.icon-btn:hover {
   background: var(--border-md)
}

/* ── Top bar ──────────────────────────────────────── */
.top-bar {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 18px 12px;
   border-bottom: 1px solid var(--border);
   background: var(--bg);
   position: sticky;
   top: 0;
   z-index: 20;
   backdrop-filter: blur(10px)
}

.top-bar-title {
   flex: 1;
   font-family: var(--font-display);
   font-size: 20px;
   font-weight: 700
}

.step-pill {
   font-size: 11px;
   color: var(--hint);
   background: var(--surface2);
   padding: 4px 10px;
   border-radius: 100px;
   font-weight: 600
}

/* ═══════════════════════════════════
   CARDÁPIO
═══════════════════════════════════ */
.menu-hello {
   padding: 16px 20px 6px;
   font-size: 14px;
   color: var(--muted)
}

.menu-hello strong {
   color: var(--text)
}

.menu-list {
   padding: 10px 16px 100px;
   display: flex;
   flex-direction: column;
   gap: 10px
}

.menu-item {
   display: flex;
   align-items: center;
   gap: 14px;
   background: var(--surface);
   border: 1.5px solid var(--border);
   border-radius: var(--r-md);
   padding: 16px;
   transition: border-color var(--ease), box-shadow var(--ease)
}

.menu-item.selected {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgba(201, 75, 29, .08)
}

.menu-item.unavailable {
   opacity: .45;
   pointer-events: none
}

.item-emoji {
   font-size: 34px;
   flex-shrink: 0;
   width: 44px;
   text-align: center
}

.item-product-image {
   width:72px;
   height:72px;
   flex:0 0 72px;
   padding:0;
   overflow:hidden;
   border:0;
   border-radius:14px;
   background:var(--surface2);
   cursor:zoom-in;
}

.item-product-image img,
.ci-product-image {
   width:100%;
   height:100%;
   object-fit:cover;
   display:block;
}

.ci-product-image { width:58px; height:58px; flex:0 0 58px; border-radius:12px; }
.product-file-input { padding:10px; }
.product-image-editor { display:flex; align-items:center; gap:12px; margin-top:10px; }
.product-image-editor img { width:88px; height:88px; object-fit:cover; border-radius:14px; border:1px solid var(--border); }
.product-image-editor > div { display:flex; flex-direction:column; align-items:flex-start; gap:8px; color:var(--muted); line-height:1.4; }

.delivery-method-options { display:grid; gap:8px; margin-top:8px; }
.delivery-method-options label { display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid var(--border); border-radius:12px; background:var(--surface); cursor:pointer; font-size:13px; }
.delivery-method-options input { width:18px; height:18px; accent-color:var(--green); }
.storefront-message-preview { margin-top:12px; padding:13px 15px; border-radius:12px; background:var(--green-lt); color:var(--green); }
.storefront-message-preview small { display:block; margin-bottom:5px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.storefront-message-preview strong { display:block; font-size:13px; line-height:1.5; }

@media (max-width:420px){
   .item-product-image { width:62px; height:62px; flex-basis:62px; }
}

.item-info {
   flex: 1;
   min-width: 0
}

.item-name {
   font-size: 15px;
   font-weight: 700
}

.item-desc {
   font-size: 12px;
   color: var(--muted);
   margin-top: 2px
}

.item-price {
   font-size: 14px;
   font-weight: 700;
   color: var(--accent);
   margin-top: 4px
}

.item-stock,
.ci-stock {
  margin-top: 5px;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
}

.item-stock.low,
.ci-stock.low {
  color: #9a5b0c;
}

.item-stock.sold-out,
.ci-stock.sold-out {
  color: var(--red);
}

.qty-btn:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.qty-ctrl {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-shrink: 0
}

.qty-btn {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   border: 1.5px solid var(--border-md);
   background: var(--surface2);
   color: var(--text);
   font-size: 18px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--ease);
   user-select: none
}

.qty-btn:hover {
   border-color: var(--accent);
   background: var(--accent-lt);
   color: var(--accent)
}

.qty-num {
   font-size: 16px;
   font-weight: 700;
   min-width: 20px;
   text-align: center
}

/* ── Sticky cart ──────────────────────────────────── */
.sticky-cart {
   position: fixed;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   max-width: 500px;
   background: var(--surface);
   border-top: 1px solid var(--border);
   padding: 12px 20px 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   box-shadow: 0 -4px 24px rgba(0, 0, 0, .08)
}

.cart-left {
   display: flex;
   flex-direction: column
}

.cart-qty {
   font-size: 12px;
   color: var(--muted)
}

.cart-price {
   font-size: 22px;
   font-weight: 700
}

/* ═══════════════════════════════════
   PAGAMENTO
═══════════════════════════════════ */
.pay-summary {
   margin: 16px 20px 12px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--r-md);
   padding: 18px 20px
}

.pay-sum-title {
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .07em;
   color: var(--hint);
   margin-bottom: 12px
}

.pay-sum-row {
   display: flex;
   justify-content: space-between;
   font-size: 14px;
   color: var(--muted);
   padding: 4px 0
}

.pay-sum-row.total {
   border-top: 1px solid var(--border);
   margin-top: 8px;
   padding-top: 12px;
   font-size: 17px;
   font-weight: 700;
   color: var(--text)
}

.pix-block {
   margin: 0 20px 16px;
   background: var(--text);
   border-radius: var(--r-md);
   padding: 20px
}

.pix-header-row {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 14px
}

.pix-badge {
   background: #32BCAD;
   color: #fff;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: .05em;
   padding: 3px 10px;
   border-radius: 6px
}

.pix-label-txt {
   font-size: 13px;
   color: rgba(255, 255, 255, .5)
}

.pix-key-row {
   display: flex;
   align-items: center;
   background: rgba(255, 255, 255, .08);
   border-radius: var(--r-sm);
   padding: 12px 14px;
   gap: 10px;
   margin-bottom: 10px
}

.pix-key-val {
   flex: 1;
   font-size: 14px;
   font-weight: 600;
   color: #fff;
   word-break: break-all
}

.copy-btn {
   background: rgba(255, 255, 255, .12);
   border: none;
   border-radius: 6px;
   padding: 6px 8px;
   color: #fff;
   cursor: pointer;
   display: flex;
   align-items: center;
   transition: background var(--ease)
}

.copy-btn:hover {
   background: rgba(255, 255, 255, .22)
}

.copy-btn.ok {
   background: #32BCAD
}

.pix-amount-note {
   font-size: 13px;
   color: rgba(255, 255, 255, .5)
}

.pix-amount-note strong {
   color: #E8C28A;
   font-size: 15px
}

.upload-block {
   padding: 0 20px 14px
}

.paid-confirm-block {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   margin: 16px 20px 0;
   padding: 16px;
   border: 1px solid rgba(26, 122, 79, .22);
   border-radius: var(--r-md);
   background: var(--green-lt)
}

.paid-confirm-block strong,
.paid-confirm-block small {
   display: block
}

.paid-confirm-block small {
   margin-top: 3px;
   color: var(--muted);
   font-size: 12px
}

.btn-paid {
   flex: 0 0 auto;
   min-height: 44px;
   padding: 0 18px;
   border: 0;
   border-radius: 12px;
   background: var(--green);
   color: #fff;
   font-weight: 800;
   cursor: pointer
}

.btn-paid.confirmed {
   background: #12633f
}

.optional-pill {
   display: inline-block;
   margin-left: 6px;
   padding: 3px 7px;
   border-radius: 999px;
   background: var(--surface2);
   color: var(--muted);
   font-size: 10px;
   font-weight: 800;
   vertical-align: middle
}

[hidden] {
   display: none !important
}

@media (max-width: 420px) {
   .paid-confirm-block {
      align-items: stretch;
      flex-direction: column
   }

   .btn-paid {
      width: 100%
   }
}

.upload-block-title {
   font-size: 15px;
   font-weight: 700;
   margin-bottom: 4px
}

.upload-block-sub {
   font-size: 13px;
   color: var(--muted);
   line-height: 1.5;
   margin-bottom: 14px
}

.drop-zone {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   border: 2px dashed var(--border-md);
   border-radius: var(--r-md);
   padding: 28px 20px;
   cursor: pointer;
   transition: all var(--ease);
   color: var(--hint)
}

.drop-zone:hover {
   border-color: var(--accent);
   background: var(--accent-lt);
   color: var(--accent)
}

.drop-zone input {
   display: none
}

.drop-zone span {
   font-size: 14px;
   font-weight: 600;
   color: var(--text)
}

.drop-zone small {
   font-size: 12px
}

#preview-wrap {
   margin-top: 12px;
   border-radius: var(--r-md);
   overflow: hidden;
   border: 1px solid var(--border)
}

#preview-img {
   width: 100%;
   max-height: 220px;
   object-fit: contain;
   display: block;
   background: var(--surface2)
}

.btn-remove {
   width: 100%;
   border: none;
   background: none;
   border-top: 1px solid var(--border);
   padding: 10px;
   font-family: var(--font);
   font-size: 13px;
   color: var(--muted);
   cursor: pointer;
   transition: color var(--ease), background var(--ease)
}

.btn-remove:hover {
   background: var(--red-lt);
   color: var(--red)
}

/* ── Status ───────────────────────────────────────── */
#status-area {
   margin: 0 20px 12px
}

.status-card {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   border-radius: var(--r-md);
   padding: 14px 16px;
   font-size: 14px;
   line-height: 1.5
}

.status-card.loading {
   background: var(--surface2);
   border: 1px solid var(--border)
}

.status-card.ok {
   background: var(--green-lt);
   border: 1px solid #9ED8BC
}

.status-card.error {
   background: var(--red-lt);
   border: 1px solid #F5B5B5
}

.status-card.warn {
   background: var(--amber-lt);
   border: 1px solid #F5C97C
}

.sc-icon {
   flex-shrink: 0;
   margin-top: 2px
}

.sc-title {
   font-weight: 700;
   margin-bottom: 3px
}

.status-card.ok .sc-title {
   color: var(--green)
}

.status-card.error .sc-title {
   color: var(--red)
}

.status-card.warn .sc-title {
   color: var(--amber)
}

.sc-msg {
   color: var(--muted);
   font-size: 13px
}

.spinner {
   width: 18px;
   height: 18px;
   border: 2px solid rgba(0, 0, 0, .1);
   border-top-color: var(--muted);
   border-radius: 50%;
   animation: spin .7s linear infinite
}

@keyframes spin {
   to {
      transform: rotate(360deg)
   }
}

.rate-bar {
   margin: 0 20px 12px;
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   color: var(--amber);
   background: var(--amber-lt);
   border: 1px solid #F5C97C;
   border-radius: var(--r-sm);
   padding: 8px 12px
}

.pay-actions {
   padding: 0 20px 32px
}

/* ═══════════════════════════════════
   CONFIRMAÇÃO
═══════════════════════════════════ */
.ok-wrap {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 64px 28px 40px;
   min-height: 100dvh
}

.purchase-confirmed-alert {
   position: fixed;
   top: 18px;
   left: 50%;
   z-index: 1200;
   transform: translateX(-50%);
   width: min(92%, 520px);
   display: grid;
   grid-template-columns: 44px 1fr 30px;
   align-items: center;
   gap: 12px;
   padding: 14px;
   color: #fff;
   background: var(--green);
   border-radius: var(--r-md);
   box-shadow: 0 18px 45px rgba(18,95,83,.28);
   animation: alertDrop .35s ease both
}

.purchase-confirmed-alert[hidden] { display: none }
.purchase-confirmed-alert strong { display: block; font-size: 16px; margin-bottom: 2px }
.purchase-confirmed-alert span { display: block; font-size: 12px; line-height: 1.4; opacity: .9 }
.purchase-confirmed-alert button { border: 0; background: transparent; color: #fff; font-size: 26px; cursor: pointer }
.purchase-confirmed-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.18); font-size: 22px; font-weight: 800 }

@keyframes alertDrop {
   from { opacity: 0; transform: translate(-50%,-18px) }
   to { opacity: 1; transform: translate(-50%,0) }
}

.ok-circle {
   width: 76px;
   height: 76px;
   border-radius: 50%;
   background: var(--green-lt);
   border: 2px solid #9ED8BC;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--green);
   margin-bottom: 24px;
   animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1) both
}

@keyframes popIn {
   from {
      transform: scale(0);
      opacity: 0
   }

   to {
      transform: scale(1);
      opacity: 1
   }
}

.ok-title {
   font-family: var(--font-display);
   font-size: 34px;
   font-weight: 700;
   margin-bottom: 10px
}

.ok-sub {
   font-size: 15px;
   color: var(--muted);
   margin-bottom: 24px;
   line-height: 1.6
}

.ok-card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--r-md);
   padding: 16px 20px;
   width: 100%;
   margin-bottom: 14px;
   text-align: left
}

.ok-row {
   display: flex;
   justify-content: space-between;
   font-size: 14px;
   padding: 4px 0;
   color: var(--muted)
}

.ok-row.total {
   border-top: 1px solid var(--border);
   margin-top: 8px;
   padding-top: 10px;
   font-size: 16px;
   font-weight: 700;
   color: var(--text)
}

.ok-number {
   font-size: 11px;
   color: var(--hint);
   background: var(--surface2);
   padding: 6px 16px;
   border-radius: 100px;
   margin-bottom: 28px;
   font-weight: 600;
   letter-spacing: .04em
}

/* ═══════════════════════════════════
   ADMIN LOGIN
═══════════════════════════════════ */
.admin-login-wrap {
   display: flex;
   flex-direction: column;
   padding: 48px 28px 40px;
   min-height: 100dvh
}

.admin-login-icon {
   width: 56px;
   height: 56px;
   background: var(--surface2);
   border-radius: var(--r-md);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--muted);
   margin-bottom: 20px
}

.admin-login-title {
   font-family: var(--font-display);
   font-size: 30px;
   font-weight: 700;
   margin-bottom: 8px
}

.admin-login-sub {
   font-size: 14px;
   color: var(--muted);
   line-height: 1.55;
   margin-bottom: 28px
}

.admin-login-error {
   font-size: 13px;
   color: var(--red);
   background: var(--red-lt);
   border: 1px solid #F5B5B5;
   border-radius: var(--r-sm);
   padding: 10px 14px;
   margin-top: 10px
}

.management-login-bg,
.management-login-brand { display:none; }

body.management-portal #screen-admin-login {
   max-width:none;
   align-items:center;
   justify-content:center;
   padding:28px;
}

body.management-portal .management-login-bg { display:block; }

body.management-portal #screen-admin-login .admin-login-wrap {
   position:relative;
   z-index:1;
   width:min(100%, 500px);
   min-height:auto;
   margin:auto;
   padding:30px 28px 32px;
   border:1px solid rgba(255,255,255,.5);
   border-radius:var(--r-xl);
   background:rgba(255,255,255,.94);
   box-shadow:0 24px 70px rgba(10,44,40,.3);
   backdrop-filter:blur(18px);
   -webkit-backdrop-filter:blur(18px);
}

body.management-portal .management-login-brand {
   display:block;
   margin-bottom:28px;
}

body.management-portal .management-login-brand .brand-badge {
   color:#326258;
   background:#eaf4ef;
   border-color:#d4e8df;
   margin-bottom:18px;
}

.management-brand-name {
   font-family:var(--font-display);
   color:#123f3a;
   font-size:clamp(42px, 12vw, 58px);
   font-weight:700;
   line-height:.95;
   letter-spacing:-.05em;
}

.management-brand-name em {
   color:#d39a33;
   font-weight:400;
}

.management-brand-name span {
   display:inline-block;
   margin-left:8px;
   font-family:var(--font);
   font-size:.2em;
   letter-spacing:.08em;
}

.management-login-brand p {
   margin-top:14px;
   color:#62766f;
   font-size:14px;
   line-height:1.55;
}

body.management-portal #screen-admin-login .admin-login-icon { display:none; }

@media (max-width:520px){
   body.management-portal #screen-admin-login { padding:18px; }
   body.management-portal #screen-admin-login .admin-login-wrap { padding:26px 22px 28px; }
}

.login-persistence-option { display:flex; align-items:flex-start; gap:10px; margin-top:14px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.55); cursor:pointer; }
.login-persistence-option input { width:18px; height:18px; margin-top:2px; accent-color:var(--primary); }
.login-persistence-option span { display:flex; flex-direction:column; gap:3px; color:var(--text); font-size:13px; }
.login-persistence-option small { color:var(--muted); font-size:11px; line-height:1.35; }

.box-entry-content { max-width:560px; }
.box-entry-content .brand-name { line-height:.9; }
.box-entry-content .brand-name em { display:inline; margin-left:4px; color:#f0b35a; }
.box-entry-content .brand-name .brand-suffix {
  display:inline-block;
  margin-left:10px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.2em;
  font-style:normal;
  font-weight:700;
  letter-spacing:.12em;
  vertical-align:.18em;
  color:#f0b35a;
}
.btn-partner-highlight { width:100%; margin-top:16px; padding:15px 20px; border:1px solid rgba(240,179,90,.55); border-radius:14px; background:rgba(240,179,90,.14); color:#fff; font:600 14px 'Plus Jakarta Sans',sans-serif; cursor:pointer; }
.btn-partner-highlight:hover { background:rgba(240,179,90,.23); }
.company-showcase-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; padding:12px 14px; border:1px solid rgba(255,255,255,.16); border-radius:14px; background:rgba(255,255,255,.08); text-align:left; }
.company-showcase-logo,.company-showcase-head img { width:76px; height:76px; flex:0 0 76px; border-radius:15px; object-fit:contain; padding:4px; box-sizing:border-box; background:#fff; color:#123f3a; display:grid; place-items:center; font-size:28px; font-weight:800; }
.company-showcase-head img[hidden] { display:none; }
.company-showcase-head img { cursor:zoom-in; transition:transform .2s ease,box-shadow .2s ease; }
@media (hover:hover) and (pointer:fine) {
  .company-showcase-head img:hover { transform:scale(1.75); box-shadow:0 12px 32px rgba(3,29,26,.32); z-index:3; }
}
.company-showcase-head div:last-child { display:flex; flex-direction:column; gap:3px; }
.company-showcase-head strong { color:#fff; font-size:14px; }
.company-showcase-head span { color:rgba(255,255,255,.7); font-size:11px; }

/* ═══════════════════════════════════
   ADMIN PANEL
═══════════════════════════════════ */
.admin-topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 14px 20px;
   background: var(--text);
   position: sticky;
   top: 0;
   z-index: 30
}

.admin-topbar-brand {
   font-family: var(--font-display);
   font-size: 18px;
   font-weight: 700;
   color: #fff;
   display: flex;
   align-items: center;
   gap: 10px
}

.admin-covip-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--accent)
}

.admin-topbar-sub {
   font-size: 11px;
   font-weight: 600;
   color: rgba(255, 255, 255, .4);
   background: rgba(255, 255, 255, .1);
   padding: 2px 8px;
   border-radius: 100px;
   font-family: var(--font);
   letter-spacing: .04em;
   text-transform: uppercase
}

.admin-topbar .icon-btn {
   background: rgba(255, 255, 255, .08);
   color: rgba(255, 255, 255, .6)
}

.admin-topbar .icon-btn:hover {
   background: rgba(255, 255, 255, .15);
   color: #fff
}

.admin-tabs {
   display: flex;
   gap: 0;
   border-bottom: 1px solid var(--border);
   background: var(--bg);
   overflow-x: auto;
   -webkit-overflow-scrolling: touch
}

.admin-tab {
   flex: 1;
   min-width: 80px;
   height: 46px;
   background: none;
   border: none;
   border-bottom: 2px solid transparent;
   font-family: var(--font);
   font-size: 12px;
   font-weight: 600;
   color: var(--muted);
   cursor: pointer;
   transition: all var(--ease);
   white-space: nowrap;
   padding: 0 12px
}

.admin-tab:hover {
   color: var(--text);
   background: var(--surface2)
}

.admin-tab.active {
   color: var(--accent);
   border-bottom-color: var(--accent)
}

.admin-section {
   display: none;
   flex-direction: column;
   gap: 16px;
   padding: 18px 16px 60px
}

.admin-section.active {
   display: flex
}

.admin-section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 10px
}

.admin-section-title {
   font-family: var(--font-display);
   font-size: 18px;
   font-weight: 700
}

/* Metrics grid */
.metrics-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px
}

.metric-card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--r-md);
   padding: 16px
}

.metric-val {
   font-size: 26px;
   font-weight: 700;
   margin-bottom: 4px
}

.metric-lbl {
   font-size: 12px;
   color: var(--muted);
   font-weight: 500
}

.metric-card.green .metric-val {
   color: var(--green)
}

.metric-card.amber .metric-val {
   color: var(--amber)
}

.metric-card.accent .metric-val {
   color: var(--accent)
}

/* Admin cards */
.admin-card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--r-md);
   padding: 18px 20px
}

.admin-card-title {
   font-size: 13px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--muted);
   margin-bottom: 16px
}

/* Rank chart */
.rank-row {
   margin-bottom: 12px
}

.rank-row-top {
   display: flex;
   justify-content: space-between;
   font-size: 14px;
   margin-bottom: 5px
}

.rank-bar-bg {
   height: 7px;
   background: var(--surface2);
   border-radius: 4px;
   overflow: hidden
}

.rank-bar-fill {
   height: 100%;
   background: var(--accent);
   border-radius: 4px;
   transition: width .4s ease
}

/* Venda cards */
.vendas-batch-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 14px;
   padding: 12px 14px;
   background: var(--green-lt);
   border: 1px solid rgba(20,122,112,.2);
   border-radius: var(--r-md)
}

.vendas-select-all,
.venda-title-row {
   display: flex;
   align-items: center;
   gap: 10px
}

.vendas-select-all {
   color: var(--green);
   font-size: 13px;
   font-weight: 700;
   cursor: pointer
}

.venda-select,
.vendas-select-all input {
   width: 18px;
   height: 18px;
   accent-color: var(--green);
   cursor: pointer;
   flex: 0 0 auto
}

.venda-card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--r-md);
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 10px
}

.venda-card.pago {
   border-left: 4px solid var(--green)
}

.venda-card.pendente {
   border-left: 4px solid var(--accent)
}

.venda-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 6px
}

.venda-name {
   font-size: 15px;
   font-weight: 700
}

.venda-hora {
   font-size: 12px;
   color: var(--hint)
}

.badge {
   display: inline-block;
   padding: 3px 10px;
   border-radius: 100px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .04em
}

.badge.pago {
   background: var(--green-lt);
   color: var(--green)
}

.badge.pendente {
   background: var(--accent-lt);
   color: var(--accent)
}

.venda-itens {
   font-size: 13px;
   color: var(--muted)
}

.venda-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 8px
}

.venda-total {
   font-size: 17px;
   font-weight: 700
}

.venda-actions {
   display: flex;
   gap: 8px
}

.btn-add {
   height: 38px;
   padding: 0 16px;
   background: var(--accent);
   color: #fff;
   border: none;
   border-radius: var(--r-sm);
   font-family: var(--font);
   font-size: 13px;
   font-weight: 700;
   cursor: pointer;
   transition: background var(--ease)
}

.btn-add:hover {
   background: var(--accent-dk)
}

.btn-danger-sm {
   height: 36px;
   padding: 0 14px;
   background: none;
   border: 1.5px solid #F5B5B5;
   color: var(--red);
   border-radius: var(--r-sm);
   font-family: var(--font);
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   transition: background var(--ease)
}

.btn-danger-sm:hover {
   background: var(--red-lt)
}

.btn-danger {
   width: 100%;
   height: 44px;
   background: none;
   border: 1.5px solid #F5B5B5;
   color: var(--red);
   border-radius: var(--r-sm);
   font-family: var(--font);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: background var(--ease);
   margin-top: 8px
}

.btn-danger:hover {
   background: var(--red-lt)
}

.btn-sm {
   height: 34px;
   padding: 0 12px;
   background: none;
   border: 1.5px solid var(--border-md);
   color: var(--muted);
   border-radius: var(--r-sm);
   font-family: var(--font);
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   transition: all var(--ease)
}

.btn-sm:hover {
   background: var(--surface2)
}

.btn-sm.ok-btn {
   border-color: #9ED8BC;
   color: var(--green)
}

.btn-sm.ok-btn:hover {
   background: var(--green-lt)
}

.btn-sm.danger {
   border-color: #F5B5B5;
   color: var(--red)
}

.btn-sm.danger:hover {
   background: var(--red-lt)
}

/* Cardápio list admin */
.cardapio-item-admin {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--r-md);
   padding: 14px 16px;
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 8px
}

.cardapio-item-admin.inactive {
   opacity: .5
}

.ci-emoji {
   font-size: 28px;
   width: 38px;
   text-align: center;
   flex-shrink: 0
}

.ci-info {
   flex: 1;
   min-width: 0
}

.ci-name {
   font-size: 14px;
   font-weight: 700
}

.ci-price {
   font-size: 13px;
   color: var(--accent);
   font-weight: 700
}

.ci-desc {
   font-size: 12px;
   color: var(--hint)
}

.ci-actions {
   display: flex;
   gap: 6px;
   flex-shrink: 0
}

/* Modal */
.modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .5);
   backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 100;
   padding: 16px
}

.modal-box {
   background: var(--bg);
   border-radius: var(--r-xl);
   padding: 28px 24px 32px;
   width: 100%;
   max-width: 480px;
   max-height: 92dvh;
   overflow-y: auto
}

.modal-title {
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 700;
   margin-bottom: 20px
}

.modal-actions {
   display: flex;
   gap: 10px;
   margin-top: 20px
}

.modal-actions .btn-ghost {
   flex: 1
}

.modal-actions .btn-cta {
   flex: 1
}

.cfg-msg {
   margin-top: 10px;
   font-size: 13px
}

.cfg-msg.ok {
   color: var(--green)
}

.cfg-msg.err {
   color: var(--red)
}

/* Empty state */
.empty-state {
   text-align: center;
   padding: 48px 20px;
   color: var(--hint);
   font-size: 14px
}

.empty-state svg {
   margin-bottom: 12px;
   opacity: .4
}

/* ── Responsive desktop ───────────────────────────── */
@media(min-width:520px) {
   body {
      background: #E8E2D9
   }

   #app {
      max-width: 500px;
      margin: 20px auto;
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: var(--sh-lg);
      background: var(--bg)
   }

   .screen {
      min-height: auto
   }

   .sticky-cart,
   .admin-tabs {
      position: sticky
   }
}

@keyframes fadeUp {
   from {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

.screen.active {
   animation: fadeUp .22s ease both
}

/* ═══════════════════════════════════
   BOTÃO BALCÃO (splash)
═══════════════════════════════════ */
.btn-balcao {
   margin-top: 10px;
   width: 100%;
   height: 44px;
   background: rgba(255,255,255,.12);
   border: 1.5px solid rgba(255,255,255,.2);
   border-radius: var(--r-sm);
   font-family: var(--font);
   font-size: 14px;
   font-weight: 600;
   color: rgba(255,255,255,.85);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   transition: background var(--ease), border-color var(--ease)
}

.btn-balcao:hover {
   background: rgba(255,255,255,.2);
   border-color: rgba(255,255,255,.35)
}

.btn-team-access {
   width: 100%;
   min-height: 46px;
   margin-top: 10px;
   border: 1px solid rgba(18,63,58,.12);
   border-radius: 12px;
   color: var(--text);
   background: #fff;
   font: 700 13px var(--font);
   cursor: pointer;
}

.team-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 22px 20px;
   color: #fff;
   background: var(--green);
}

.team-header > div {
   display: grid;
   gap: 4px;
}

.team-header span {
   color: rgba(255,255,255,.62);
   font-size: 9px;
   font-weight: 800;
   letter-spacing: .12em;
}

.team-header strong {
   font-family: var(--font-display);
   font-size: 22px;
}

.team-logout {
   padding: 8px 12px;
   border: 1px solid rgba(255,255,255,.2);
   border-radius: 9px;
   color: #fff;
   background: transparent;
   cursor: pointer;
}

.team-balance-card {
   display: grid;
   gap: 5px;
   margin: 18px;
   padding: 20px;
   border-radius: 18px;
   color: #fff;
   background: #15312e;
}

.team-balance-card span,
.team-balance-card small {
   color: rgba(255,255,255,.6);
   font-size: 11px;
}

.team-balance-card strong {
   color: #f1c95f;
   font-family: var(--font-display);
   font-size: 30px;
}

.team-section-title {
   padding: 6px 18px 12px;
   font: 700 14px var(--font);
}

.team-product-list {
   display: grid;
   gap: 9px;
   padding: 0 18px 120px;
}

.team-product {
   display: grid;
   grid-template-columns: 42px minmax(0,1fr) auto;
   align-items: center;
   gap: 11px;
   padding: 13px;
   border: 1px solid var(--border);
   border-radius: 14px;
   background: #fff;
}

.team-product-emoji {
   display: grid;
   place-items: center;
   width: 42px;
   height: 42px;
   border-radius: 11px;
   background: var(--gold-lt);
   font-size: 21px;
}

.team-product-info {
   display: grid;
   gap: 3px;
}

.team-product-info strong { font-size: 13px; }
.team-product-info span { color: var(--muted); font-size: 10px; }

.team-qty {
   display: flex;
   align-items: center;
   gap: 7px;
}

.team-qty button {
   width: 30px;
   height: 30px;
   border: 1px solid var(--border);
   border-radius: 8px;
   color: var(--green);
   background: var(--green-lt);
   font-size: 17px;
   cursor: pointer;
}

.team-qty span {
   min-width: 18px;
   text-align: center;
   font-weight: 800;
}

.team-consumption-cart {
   position: sticky;
   z-index: 20;
   bottom: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin: 0 12px 12px;
   padding: 13px 14px;
   border-radius: 16px;
   color: #fff;
   background: #15312e;
   box-shadow: var(--sh-lg);
}

.team-consumption-cart > div {
   display: grid;
   gap: 3px;
}

.team-consumption-cart span { color: rgba(255,255,255,.6); font-size: 10px; }
.team-consumption-cart strong { font-size: 16px; }

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

.team-debt-summary > div {
   display: grid;
   gap: 7px;
   padding: 17px;
   border: 1px solid var(--border);
   border-radius: 15px;
   background: #fff;
}

.team-debt-summary span { color: var(--muted); font-size: 11px; }
.team-debt-summary strong { color: var(--accent-dk); font: 700 24px var(--font-display); }

.team-debt-card {
   display: grid;
   gap: 10px;
   margin-top: 10px;
   padding: 15px;
   border: 1px solid var(--border);
   border-left: 4px solid var(--amber);
   border-radius: 14px;
   background: #fff;
}

.team-debt-card.paid {
   border-left-color: var(--green);
   opacity: .72;
}
.team-debt-card.cancelled { opacity:.72; border-color:rgba(192,57,43,.25); background:rgba(192,57,43,.035); }
.badge.cancelado { color:#a93226; background:rgba(192,57,43,.12); }

.team-debt-head,
.team-debt-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
}

.team-debt-head > div { display: grid; gap: 2px; }
.team-debt-head strong { font-size: 13px; }
.team-debt-head span,
.team-debt-items { color: var(--muted); font-size: 10px; }
.team-debt-head b { color: var(--text); font-size: 16px; }

.company-form-grid {
   display: grid;
   gap: 12px;
}

.platform-company-row {
   display: grid;
   grid-template-columns: 44px minmax(0,1fr) auto;
   align-items: center;
   gap: 12px;
   padding: 12px 0;
   border-bottom: 1px solid var(--border);
}

.platform-company-row:last-child {
   border-bottom: 0;
}

.platform-company-row > div:nth-child(2) {
   display: grid;
   gap: 3px;
}

.platform-company-row strong {
   color: var(--text);
   font-size: 13px;
}

.platform-company-row span {
   color: var(--muted);
   font-size: 10px;
   text-transform: capitalize;
}

.platform-company-row a {
   color: var(--green);
   font-size: 11px;
   font-weight: 800;
   text-decoration: none;
}

@media (min-width: 700px) {
   .company-form-grid {
      grid-template-columns: repeat(2,minmax(0,1fr));
   }
}

/* ═══════════════════════════════════
   TELA BALCÃO / RETIRADA
═══════════════════════════════════ */
.retirada-live-badge {
   font-size: 10px;
   font-weight: 800;
   letter-spacing: .1em;
   color: #fff;
   background: var(--green);
   padding: 3px 9px;
   border-radius: 100px;
   display: flex;
   align-items: center;
   gap: 5px
}

.retirada-live-badge::before {
   content: '';
   display: inline-block;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #fff;
   animation: pulse 1.4s ease infinite
}

@keyframes pulse {
   0%, 100% { opacity: 1; transform: scale(1) }
   50% { opacity: .5; transform: scale(.85) }
}

.retirada-hero {
   background: var(--text);
   padding: 28px 20px 24px;
   text-align: center
}

.retirada-count {
   font-family: var(--font-display);
   font-size: 72px;
   font-weight: 700;
   color: #fff;
   line-height: 1;
   margin-bottom: 6px
}

.retirada-count-label {
   font-size: 14px;
   color: rgba(255,255,255,.5);
   font-weight: 500
}

.retirada-search {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 16px 16px 4px;
   padding: 0 14px;
   min-height: 50px;
   color: var(--hint);
   background: var(--surface);
   border: 1.5px solid var(--border);
   border-radius: var(--r-md);
   box-shadow: 0 4px 16px rgba(18, 63, 58, .06);
   transition: border-color var(--ease), box-shadow var(--ease)
}

.retirada-search:focus-within {
   color: var(--green);
   border-color: var(--green);
   box-shadow: 0 0 0 3px rgba(18, 95, 83, .1)
}

.retirada-search input {
   width: 100%;
   min-width: 0;
   border: 0;
   outline: 0;
   background: transparent;
   color: var(--text);
   font: 600 15px var(--font-body)
}

.retirada-search input::placeholder {
   color: var(--hint);
   font-weight: 500
}

.retirada-section-label {
   padding: 14px 20px 8px;
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: var(--hint)
}

.retirados-label {
   display: flex;
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
   user-select: none;
   transition: color var(--ease)
}

.retirados-label:hover {
   color: var(--text)
}

#retirados-chevron {
   transition: transform .25s ease
}

#retirada-pendentes,
#retirada-feitos {
   padding: 0 16px
}

.retirada-card {
   background: var(--surface);
   border: 1.5px solid var(--border);
   border-left: 4px solid var(--gold);
   border-radius: var(--r-md);
   padding: 16px;
   margin-bottom: 10px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   box-shadow: var(--sh-sm)
}

.retirada-card.feito {
   border-left-color: var(--green);
   opacity: .65
}

.retirada-card-top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 10px
}

.retirada-nome {
   font-size: 17px;
   font-weight: 700
}

.retirada-code {
   font-size: 12px;
   color: var(--hint);
   margin-top: 2px
}

.retirada-total {
   font-size: 18px;
   font-weight: 700;
   color: var(--accent);
   flex-shrink: 0
}

.retirada-itens {
   font-size: 13px;
   color: var(--muted);
   line-height: 1.5
}

.btn-retirada {
   width: 100%;
   height: 50px;
   background: var(--green);
   color: #fff;
   border: none;
   border-radius: var(--r-sm);
   font-family: var(--font);
   font-size: 15px;
   font-weight: 700;
   cursor: pointer;
   letter-spacing: .01em;
   transition: background var(--ease), transform var(--ease);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px
}

.btn-retirada:hover {
   background: #156340
}

.btn-retirada:active {
   transform: scale(.98)
}

.badge.retirado {
   background: var(--green-lt);
   color: var(--green)
}

.retirada-empty {
   text-align: center;
   padding: 40px 20px;
   color: var(--hint);
   font-size: 14px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px
}

.retirada-empty svg {
   opacity: .3
}

/* ── Tip balcão na tela de confirmação ─────────── */
.ok-balcao-tip {
   display: flex;
   align-items: center;
   gap: 8px;
   background: var(--gold-lt);
   border: 1px solid #EDD898;
   border-radius: var(--r-sm);
   padding: 12px 16px;
   font-size: 13px;
   font-weight: 600;
   color: var(--amber);
   margin-bottom: 20px;
   width: 100%;
   text-align: left
}

.ok-balcao-tip.confirmed {
   color: var(--green);
   background: var(--green-lt);
   border-color: rgba(20,122,112,.28)
}

/* ================================================================
   COVIP 2026 — identidade visual renovada
   ================================================================ */
:root {
   --bg: #fff8f1;
   --surface: #ffffff;
   --surface2: #f8eee8;
   --border: rgba(80, 22, 48, .10);
   --border-md: rgba(80, 22, 48, .18);
   --text: #301522;
   --muted: #806a73;
   --hint: #ad969f;
   --accent: #e84f5f;
   --accent-dk: #c9364a;
   --accent-lt: #fff0f1;
   --gold: #efa63c;
   --gold-lt: #fff5df;
   --green: #147a70;
   --green-lt: #e5f6f2;
   --red: #b4233f;
   --red-lt: #fff0f2;
   --amber: #9b620b;
   --amber-lt: #fff5df;
   --r-sm: 12px;
   --r-md: 18px;
   --r-lg: 24px;
   --r-xl: 32px;
   --sh-sm: 0 2px 10px rgba(72, 25, 45, .06);
   --sh-md: 0 12px 30px rgba(72, 25, 45, .10);
   --sh-lg: 0 26px 70px rgba(48, 12, 28, .18);
}

body {
   background:
      radial-gradient(circle at 8% 8%, rgba(232, 79, 95, .12), transparent 25rem),
      radial-gradient(circle at 92% 88%, rgba(239, 166, 60, .13), transparent 28rem),
      #f8eee8;
}

button,
input,
select {
   -webkit-tap-highlight-color: transparent;
}

.splash-bg {
   background:
      radial-gradient(circle at 78% 8%, rgba(255, 139, 105, .34), transparent 25rem),
      radial-gradient(circle at 5% 88%, rgba(239, 166, 60, .18), transparent 22rem),
      linear-gradient(155deg, #3d1029 0%, #641a38 48%, #8b2842 100%);
}

.splash-grain {
   opacity: .025;
}

.splash-orb {
   filter: blur(100px);
   opacity: .4;
}

.orb1 {
   background: #ff6d6d;
}

.orb2 {
   background: #f7b84b;
}

.splash-content {
   padding-top: clamp(36px, 8vh, 72px);
}

.brand-badge {
   background: rgba(255,255,255,.12);
   border-color: rgba(255,255,255,.22);
   box-shadow: inset 0 1px rgba(255,255,255,.12);
}

.brand-dot {
   background: #ffb84a;
   box-shadow: 0 0 0 5px rgba(255,184,74,.15);
}

.brand-name {
   font-size: clamp(54px, 15vw, 72px);
   letter-spacing: -.045em;
   text-shadow: 0 12px 32px rgba(27, 4, 16, .28);
}

.brand-name em {
   color: #ffd39b;
}

.brand-tagline {
   max-width: 340px;
   color: rgba(255,255,255,.72);
   font-size: 16px;
}

.splash-card {
   background: rgba(255,255,255,.12);
   border-color: rgba(255,255,255,.22);
   box-shadow: 0 24px 60px rgba(28, 4, 16, .24), inset 0 1px rgba(255,255,255,.12);
}

.splash-card .field-input {
   min-height: 54px;
   background: rgba(255,255,255,.14);
   border-color: rgba(255,255,255,.24);
}

.btn-cta {
   min-height: 52px;
   border-radius: 14px;
   background: linear-gradient(135deg, #f26462 0%, #df3f59 100%);
   box-shadow: 0 10px 24px rgba(198, 38, 72, .24);
}

.btn-cta:hover {
   background: linear-gradient(135deg, #fa716c 0%, #d93450 100%);
   box-shadow: 0 14px 28px rgba(198, 38, 72, .30);
   transform: translateY(-1px);
}

.btn-balcao {
   min-height: 48px;
   border-radius: 14px;
   background: rgba(255,255,255,.11);
}

.top-bar {
   min-height: 66px;
   padding-inline: 18px;
   background: rgba(255,248,241,.88);
   border-color: var(--border);
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
}

.top-bar-title {
   font-family: var(--font-display);
   font-size: 21px;
   color: #4c1930;
}

.step-pill {
   background: var(--accent-lt);
   color: var(--accent-dk);
   border: 1px solid rgba(232,79,95,.14);
}

.icon-btn {
   border-radius: 12px;
   background: #fff;
   box-shadow: var(--sh-sm);
}

.menu-hello {
   padding: 24px 20px 14px;
   font-size: 17px;
}

.menu-list {
   padding: 8px 16px 120px;
}

.menu-item {
   margin-bottom: 12px;
   padding: 17px 15px;
   border-color: transparent;
   border-radius: 20px;
   box-shadow: 0 7px 22px rgba(72,25,45,.07);
}

.menu-item:hover {
   transform: translateY(-2px);
   box-shadow: var(--sh-md);
}

.menu-item.selected {
   border-color: rgba(232,79,95,.45);
   background: linear-gradient(135deg, #fff 65%, #fff0f1);
   box-shadow: 0 10px 28px rgba(190,48,75,.12);
}

.item-emoji {
   width: 54px;
   height: 54px;
   border-radius: 16px;
   background: linear-gradient(145deg, #fff4e6, #ffe8dc);
   box-shadow: inset 0 0 0 1px rgba(232,79,95,.08);
}

.item-name {
   color: #3b1727;
   font-size: 16px;
}

.item-price {
   color: var(--accent-dk);
   font-weight: 800;
}

.qty-btn {
   border-radius: 11px;
}

.qty-btn:last-child {
   color: #fff;
   background: var(--accent);
   border-color: var(--accent);
}

.sticky-cart {
   margin: 0 12px 12px;
   width: calc(100% - 24px);
   bottom: 0;
   border: 1px solid rgba(255,255,255,.12);
   border-radius: 22px;
   background: rgba(63,19,40,.96);
   box-shadow: 0 18px 40px rgba(48,12,28,.24);
   backdrop-filter: blur(16px);
}

.cart-qty {
   color: rgba(255,255,255,.65);
}

.cart-price {
   color: #fff;
}

.pay-summary,
.pix-box,
.upload-box,
.admin-card,
.config-card,
.venda-card,
.cardapio-item-admin,
.retirada-card {
   border-color: transparent;
   border-radius: 20px;
   box-shadow: var(--sh-sm);
}

.pix-box {
   background: linear-gradient(145deg, #fff 60%, #eaf8f5);
}

.admin-topbar,
.retirada-hero {
   background:
      radial-gradient(circle at 85% 0, rgba(255,137,105,.28), transparent 17rem),
      linear-gradient(135deg, #401128, #711d3d);
}

.admin-topbar {
   padding: 16px 20px;
}

.admin-covip-dot {
   background: #ffb84a;
   box-shadow: 0 0 0 5px rgba(255,184,74,.12);
}

.admin-tabs {
   gap: 6px;
   padding: 8px;
   background: rgba(255,248,241,.94);
   backdrop-filter: blur(16px);
}

.admin-tab {
   height: 42px;
   border: 0;
   border-radius: 12px;
}

.admin-tab.active {
   color: #fff;
   border: 0;
   background: linear-gradient(135deg, #e84f5f, #c9364a);
   box-shadow: 0 7px 16px rgba(198,54,74,.2);
}

.admin-section-title {
   font-family: var(--font-display);
   font-size: 24px;
   color: #4c1930;
}

.modal-overlay {
   background: rgba(45,11,29,.62);
   backdrop-filter: blur(8px);
}

.modal-box {
   border: 1px solid rgba(255,255,255,.38);
   border-radius: 28px;
   box-shadow: 0 30px 80px rgba(36,7,22,.26);
}

.field-input {
   min-height: 50px;
   border-radius: 13px;
   background: #fffdfb;
}

.field-input:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 4px rgba(232,79,95,.10);
}

.retirada-count {
   color: #ffd39b;
   text-shadow: 0 12px 30px rgba(23,2,13,.25);
}

.btn-retirada {
   border-radius: 14px;
   background: linear-gradient(135deg, #17877a, #106d65);
   box-shadow: 0 9px 20px rgba(20,122,112,.18);
}

@media (min-width: 520px) {
   body {
      padding: 20px;
   }

   #app {
      margin: 0 auto;
      border: 1px solid rgba(255,255,255,.7);
      box-shadow: 0 30px 90px rgba(74,24,45,.18);
   }
}

@media (max-width: 380px) {
   .splash-content {
      padding-inline: 20px;
   }

   .brand-name {
      font-size: 50px;
   }

   .menu-item {
      padding-inline: 12px;
   }
}

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

.btn-report {
   min-height: 36px;
   padding: 0 14px;
   border: 0;
   border-radius: 11px;
   color: #fff;
   background: linear-gradient(135deg, #17877a, #106d65);
   font: 700 12px var(--font);
   cursor: pointer;
   box-shadow: 0 6px 14px rgba(20,122,112,.16);
}

.forgot-password-btn {
   display: block;
   width: fit-content;
   margin: 9px 0 0 auto;
   padding: 4px 0;
   border: 0;
   color: var(--accent-dk);
   background: transparent;
   font: 700 12px var(--font);
   cursor: pointer;
}

.forgot-password-btn:hover {
   text-decoration: underline;
}

/* ================================================================
   COVIP — REESTRUTURAÇÃO VISUAL
   Direção: editorial contemporânea, operacional e acolhedora
   ================================================================ */
:root {
   --bg: #f6f4ed;
   --surface: #ffffff;
   --surface2: #eeece3;
   --border: rgba(18, 63, 58, .10);
   --border-md: rgba(18, 63, 58, .18);
   --text: #15312e;
   --muted: #687b77;
   --hint: #97a5a1;
   --accent: #e55f3c;
   --accent-dk: #c94729;
   --accent-lt: #fff0e9;
   --gold: #e9b63d;
   --gold-lt: #fff6d9;
   --green: #19766c;
   --green-lt: #e4f4ef;
   --red: #b83b3b;
   --red-lt: #fceaea;
   --amber: #9a690d;
   --amber-lt: #fff4d8;
   --r-sm: 10px;
   --r-md: 16px;
   --r-lg: 22px;
   --r-xl: 28px;
   --sh-sm: 0 2px 8px rgba(18,63,58,.06);
   --sh-md: 0 12px 28px rgba(18,63,58,.09);
   --sh-lg: 0 28px 70px rgba(18,50,46,.15);
}

body {
   background:
      linear-gradient(rgba(18,63,58,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(18,63,58,.035) 1px, transparent 1px),
      #e9ece5;
   background-size: 32px 32px;
}

#app {
   background: var(--bg);
}

.screen {
   max-width: 720px;
}

.splash-bg {
   background:
      radial-gradient(circle at 78% 18%, rgba(233,182,61,.32), transparent 25rem),
      linear-gradient(140deg, #0d302d 0%, #124c45 55%, #1b665b 100%);
}

.orb1 {
   width: 420px;
   height: 420px;
   top: -180px;
   right: -100px;
   background: #e9b63d;
   opacity: .28;
}

.orb2 {
   width: 360px;
   height: 360px;
   bottom: -170px;
   left: -120px;
   background: #e55f3c;
   opacity: .22;
}

.brand-badge {
   color: #f6eac9;
   background: rgba(255,255,255,.08);
   border-color: rgba(255,255,255,.16);
}

.brand-dot {
   background: #e9b63d;
   box-shadow: 0 0 0 5px rgba(233,182,61,.14);
}

.brand-name {
   color: #fffdf5;
   letter-spacing: -.055em;
   text-shadow: none;
}

.brand-name em {
   color: #f1c95f;
}

.brand-tagline {
   color: rgba(255,255,255,.68);
}

.splash-card {
   background: #fffdf8;
   border: 0;
   box-shadow: 0 26px 70px rgba(3,29,26,.28);
}

.splash-card .field-label {
   color: var(--muted);
}

.splash-card .field-input {
   color: var(--text);
   background: #f4f2ea;
   border-color: transparent;
}

.splash-card .field-input::placeholder {
   color: var(--hint);
}

.splash-card .field-input:focus {
   border-color: var(--green);
   box-shadow: 0 0 0 4px rgba(25,118,108,.12);
}

.splash-card .btn-cta,
.btn-cta {
   background: var(--accent);
   border-radius: 12px;
   box-shadow: 0 8px 20px rgba(201,71,41,.20);
}

.btn-cta:hover {
   background: var(--accent-dk);
   box-shadow: 0 10px 24px rgba(201,71,41,.24);
}

.btn-balcao {
   color: var(--green);
   background: var(--green-lt);
   border-color: transparent;
}

.btn-balcao:hover {
   color: #fff;
   background: var(--green);
}

.btn-ghost-sm {
   color: var(--muted);
}

.security-note {
   color: rgba(255,255,255,.55);
}

.top-bar {
   background: rgba(246,244,237,.90);
   border-bottom: 1px solid var(--border);
}

.top-bar-title {
   color: var(--text);
}

.step-pill {
   color: var(--green);
   background: var(--green-lt);
   border-color: transparent;
}

.menu-hello {
   padding-top: 30px;
   font-family: var(--font-display);
   font-size: 23px;
}

.menu-list {
   display: grid;
   gap: 12px;
   padding: 8px 18px 130px;
}

.menu-item {
   position: relative;
   margin: 0;
   border: 1px solid var(--border);
   border-radius: 16px;
   box-shadow: none;
   overflow: hidden;
}

.menu-item::before {
   content: "";
   position: absolute;
   inset: 0 auto 0 0;
   width: 4px;
   background: transparent;
}

.menu-item:hover {
   border-color: var(--border-md);
   transform: translateY(-1px);
}

.menu-item.selected {
   border-color: rgba(25,118,108,.30);
   background: #f7fcfa;
   box-shadow: 0 10px 24px rgba(25,118,108,.08);
}

.menu-item.selected::before {
   background: var(--green);
}

.item-emoji {
   background: var(--gold-lt);
   border-radius: 14px;
   box-shadow: none;
}

.item-name {
   color: var(--text);
}

.item-price {
   color: var(--green);
}

.qty-btn:last-child {
   background: var(--green);
   border-color: var(--green);
}

.sticky-cart {
   max-width: 680px;
   margin-inline: auto;
   width: calc(100% - 32px);
   color: #fff;
   background: #123f3a;
   border: 0;
   border-radius: 16px;
   box-shadow: 0 16px 34px rgba(18,63,58,.24);
}

.sticky-cart .btn-cta {
   background: #f0bc45;
   color: #15312e;
   box-shadow: none;
}

.pay-summary,
.pix-box,
.upload-box,
.admin-card,
.config-card,
.venda-card,
.cardapio-item-admin,
.retirada-card {
   border: 1px solid var(--border);
   border-radius: 16px;
   box-shadow: none;
}

.pix-box {
   background: #f2faf7;
}

.admin-login-wrap {
   max-width: 460px;
   margin: auto;
   padding: 48px 28px;
}

.admin-login-icon {
   color: var(--green);
   background: var(--green-lt);
}

.admin-login-title {
   color: var(--text);
}

.admin-topbar,
.retirada-hero {
   background: #123f3a;
}

.admin-topbar {
   min-height: 72px;
   padding: 16px 24px;
}

.admin-covip-dot {
   background: var(--gold);
}

.admin-tabs {
   gap: 4px;
   padding: 8px;
   background: #fff;
   border-bottom: 1px solid var(--border);
}

.admin-tab {
   color: var(--muted);
   border-radius: 9px;
}

.admin-tab:hover {
   color: var(--green);
   background: var(--green-lt);
}

.admin-tab.active {
   color: #fff;
   background: var(--green);
   box-shadow: none;
}

.admin-section {
   padding: 28px 24px 70px;
}

.admin-section-header {
   align-items: flex-end;
}

.admin-eyebrow {
   margin-bottom: 5px;
   color: var(--green);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: .14em;
}

.admin-section-title {
   color: var(--text);
   font-size: 28px;
}

.metrics-grid {
   gap: 12px;
}

.metric-card {
   border: 1px solid var(--border);
   box-shadow: none;
}

.btn-add,
.btn-report {
   min-height: 40px;
   border-radius: 10px;
   background: var(--green);
   box-shadow: none;
}

.btn-add:hover,
.btn-report:hover {
   background: #0f5f57;
}

.modal-overlay {
   background: rgba(7,35,32,.68);
}

.modal-box {
   border-radius: 20px;
   box-shadow: 0 32px 80px rgba(7,35,32,.24);
}

/* Modais sempre ancorados ao topo da janela, mesmo em listas longas. */
.modal-overlay {
   align-items: flex-start;
   overflow-y: auto;
   overscroll-behavior: contain;
   padding: max(20px, env(safe-area-inset-top)) 16px 24px
}

.modal-box {
   margin: 0 auto;
   max-height: calc(100dvh - 44px)
}

#whatsapp-batch-list {
   max-height: min(56dvh, 520px);
   overflow-y: auto;
   overscroll-behavior: contain;
   padding-right: 4px
}

.field-input {
   background: #fbfaf6;
   border-color: var(--border);
}

.field-input:focus {
   border-color: var(--green);
   box-shadow: 0 0 0 4px rgba(25,118,108,.10);
}

.retirada-count {
   color: #f1c95f;
}

.btn-retirada {
   background: var(--green);
}

/* Estoque */
.stock-summary {
   display: grid;
   grid-template-columns: repeat(2, minmax(0,1fr));
   gap: 12px;
}

.stock-kpi {
   display: grid;
   gap: 8px;
   min-height: 112px;
   padding: 18px;
   border: 1px solid var(--border);
   border-radius: 16px;
   background: #fff;
}

.stock-kpi span {
   color: var(--muted);
   font-size: 12px;
   font-weight: 600;
}

.stock-kpi strong {
   color: var(--green);
   font-family: var(--font-display);
   font-size: 34px;
}

.stock-kpi.warning strong {
   color: var(--amber);
}

.stock-kpi.danger strong {
   color: var(--red);
}

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

.stock-card {
   display: grid;
   grid-template-columns: minmax(0,1fr) auto;
   gap: 14px 18px;
   align-items: center;
   padding: 16px;
   border: 1px solid var(--border);
   border-radius: 16px;
   background: #fff;
}

.stock-product {
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 0;
}

.stock-emoji {
   display: grid;
   place-items: center;
   width: 46px;
   height: 46px;
   flex: 0 0 auto;
   border-radius: 12px;
   background: var(--gold-lt);
   font-size: 23px;
}

.stock-name {
   overflow: hidden;
   color: var(--text);
   font-size: 14px;
   font-weight: 800;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.stock-status {
   width: fit-content;
   margin-top: 4px;
   padding: 3px 7px;
   border-radius: 100px;
   font-size: 10px;
   font-weight: 800;
}

.stock-status.ok {
   color: var(--green);
   background: var(--green-lt);
}

.stock-status.warning {
   color: var(--amber);
   background: var(--amber-lt);
}

.stock-status.danger {
   color: var(--red);
   background: var(--red-lt);
}

.stock-balance {
   display: grid;
   justify-items: end;
}

.stock-balance strong {
   color: var(--text);
   font-family: var(--font-display);
   font-size: 28px;
   line-height: 1;
}

.stock-balance span {
   color: var(--hint);
   font-size: 10px;
}

.stock-actions {
   display: grid;
   grid-column: 1 / -1;
   grid-template-columns: repeat(4,1fr);
   gap: 7px;
}

.stock-actions button {
   min-height: 38px;
   border: 1px solid var(--border);
   border-radius: 9px;
   color: var(--muted);
   background: var(--surface2);
   font: 800 12px var(--font);
   cursor: pointer;
}

.stock-actions button:hover {
   color: var(--text);
   border-color: var(--border-md);
}

.stock-actions button.add {
   color: var(--green);
   background: var(--green-lt);
   border-color: rgba(25,118,108,.12);
}

.internal-use-btn {
   grid-column: 1 / -1;
   min-height: 38px;
   border: 1px dashed rgba(154,105,13,.28);
   border-radius: 9px;
   color: var(--amber);
   background: var(--amber-lt);
   font: 700 11px var(--font);
   cursor: pointer;
}

.movement-empty {
   padding: 16px 0;
   color: var(--hint);
   font-size: 12px;
   text-align: center;
}

.movement-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 11px 0;
   border-bottom: 1px solid var(--border);
}

.movement-row:last-child {
   border-bottom: 0;
}

.movement-row > div:first-child {
   display: grid;
   gap: 3px;
}

.movement-row strong {
   color: var(--text);
   font-size: 12px;
}

.movement-row span {
   color: var(--muted);
   font-size: 10px;
}

.movement-qty {
   color: var(--amber);
   font: 800 15px var(--font);
}

@media (min-width: 760px) {
   body {
      padding: 24px;
   }

   #app {
      max-width: 720px;
      border: 1px solid rgba(255,255,255,.8);
      border-radius: 28px;
      box-shadow: var(--sh-lg);
   }

   #screen-splash {
      max-width: 1100px;
   }

   body:has(#screen-splash.active) #app {
      max-width: 1100px;
   }

   .splash-content {
      display: grid;
      grid-template-columns: minmax(0,1.1fr) minmax(340px,.8fr);
      grid-template-areas:
         "badge card"
         "name card"
         "tagline card"
         ". security";
      column-gap: 72px;
      align-content: center;
      min-height: calc(100dvh - 48px);
      padding: 70px;
   }

   .brand-badge { grid-area: badge; }
   .brand-name { grid-area: name; font-size: 82px; }
   .brand-tagline { grid-area: tagline; margin: 0; }
   .splash-card { grid-area: card; align-self: center; padding: 32px; }
   .security-note { grid-area: security; justify-content: center; }
}

@media (min-width: 980px) {
   body:has(#screen-admin.active) #app {
      max-width: 1180px;
   }

   #screen-admin.active {
      display: grid;
      grid-template-columns: 220px minmax(0,1fr);
      grid-template-rows: 72px minmax(620px,auto);
      max-width: 1180px;
   }

   #screen-admin .admin-topbar {
      grid-column: 1 / -1;
      grid-row: 1;
   }

   #screen-admin .admin-tabs {
      position: relative;
      grid-column: 1;
      grid-row: 2;
      flex-direction: column;
      align-items: stretch;
      padding: 22px 12px;
      border-right: 1px solid var(--border);
      border-bottom: 0;
   }

   #screen-admin .admin-tab {
      flex: 0 0 auto;
      width: 100%;
      min-height: 46px;
      text-align: left;
      padding: 0 14px;
   }

   #screen-admin .admin-section {
      grid-column: 2;
      grid-row: 2;
      width: 100%;
      max-width: 960px;
      padding: 34px 38px 70px;
   }

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

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

@media (max-width: 520px) {
   body {
      background: var(--bg);
   }

   #app {
      border-radius: 0;
      box-shadow: none;
   }

   .admin-section {
      padding-inline: 16px;
   }

   .admin-tabs {
      justify-content: flex-start;
   }

   .admin-tab {
      flex: 0 0 auto;
      min-width: max-content;
      padding-inline: 14px;
   }
}

.checkout-customer-card{margin:16px;padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.checkout-delivery-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 16px}.checkout-delivery-options label{cursor:pointer}.checkout-delivery-options input{position:absolute;opacity:0}.checkout-delivery-options span{display:grid;min-height:54px;padding:10px;place-items:center;border:1px solid var(--border);border-radius:11px;color:var(--muted);font-size:11px;font-weight:700;text-align:center}.checkout-delivery-options input:checked+span{border-color:var(--green);background:var(--green-lt);color:var(--green)}
.checkout-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.checkout-address{padding-top:4px}.checkout-customer-card .field-input{margin-bottom:10px}.product-extra-title{margin:16px 0 12px;padding-top:14px;border-top:1px solid var(--border);color:var(--green);font-size:12px;font-weight:800}.product-long-description{min-height:90px;resize:vertical}.venda-delivery{display:grid;gap:3px;margin:10px 0;padding:10px 12px;border-radius:10px;background:var(--surface-2);color:var(--muted);font-size:11px}.venda-delivery strong{color:var(--green)}.venda-delivery small{color:var(--hint)}
@media(max-width:560px){.checkout-delivery-options,.checkout-grid{grid-template-columns:1fr}.checkout-customer-card{margin:12px;padding:14px}}

.company-logo-field {
   grid-column: 1 / -1;
}

.logo-file-input {
   padding: 10px 12px;
   cursor: pointer;
}

.logo-file-input::file-selector-button {
   margin-right: 10px;
   padding: 8px 11px;
   border: 0;
   border-radius: 9px;
   color: #fff;
   background: var(--green);
   font: 700 11px var(--font);
   cursor: pointer;
}

.logo-upload-preview {
   display: flex;
   align-items: center;
   gap: 10px;
   min-height: 34px;
   margin-top: 7px;
   color: var(--muted);
   font-size: 10px;
}

.logo-upload-preview img {
   width: 52px;
   height: 52px;
   padding: 4px;
   border: 1px solid var(--border);
   border-radius: 11px;
   object-fit: contain;
   background: #fff;
}

.partner-logo-field {
   padding-top: 2px;
}

.platform-commercial-card {
   border-top: 3px solid var(--green);
}

.commercial-full {
   grid-column: 1 / -1;
}

.commercial-actions {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 15px;
}

.commercial-actions .btn-cta {
   width: auto;
   padding: 0 20px;
}

.commercial-list {
   display: grid;
   gap: 9px;
   margin-top: 16px;
}

.commercial-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   padding: 13px 14px;
   border: 1px solid var(--border);
   border-radius: 12px;
   background: var(--surface-2);
}

.commercial-row > div:first-child {
   display: flex;
   min-width: 0;
   flex-direction: column;
   gap: 4px;
}

.commercial-row strong {
   color: var(--text);
   font-size: 13px;
}

.commercial-row span {
   color: var(--muted);
   font-size: 10px;
   line-height: 1.45;
}

.commercial-row > div:last-child {
   display: flex;
   flex-shrink: 0;
   gap: 7px;
}

.entry-plan-price {
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
   gap: 5px;
   margin: 10px 0;
   color: #fff;
}

.entry-plan-price strong {
   font-size: 17px;
}

.entry-plan-price del {
   color: rgba(255,255,255,.48);
   font-size: 10px;
}

.entry-plan-price small {
   color: rgba(255,255,255,.55);
   font-size: 9px;
}

.plan-builder { margin:18px 0 14px; padding:20px; border:1px solid rgba(241,201,95,.35); border-radius:20px; background:rgba(255,255,255,.08); backdrop-filter:blur(12px); }
.custom-plan-card{width:min(100%,275px);margin:14px auto 0;border-color:rgba(241,201,95,.58);background:linear-gradient(145deg,rgba(241,201,95,.15),rgba(255,255,255,.07));text-align:left}
.custom-plan-card .plan-demo-btn{margin-top:15px}
.plan-builder-modal{position:relative;width:min(94vw,680px);max-width:680px;max-height:calc(100dvh - 24px);overflow:auto;padding:8px;background:linear-gradient(145deg,#123f3a,#426044)}
.plan-builder-modal .plan-builder{margin:0;padding:28px 20px 20px;border:0;background:transparent;backdrop-filter:none}
.plan-builder-modal .plan-demo-close{z-index:2;background:rgba(255,255,255,.14);color:#fff}
.plan-builder-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:16px; }
.plan-builder-head > div:first-child { display:flex; flex-direction:column; gap:4px; }
.plan-builder-head span { color:#f1c95f; font-size:10px; font-weight:800; letter-spacing:.1em; }
.plan-builder-head strong { color:#fff; font-size:14px; line-height:1.4; }
.plan-builder-total { text-align:right; display:flex; flex-direction:column; white-space:nowrap; }
.plan-builder-total strong { color:#f1c95f; font-size:21px; }
.plan-builder-total small { color:rgba(255,255,255,.58); font-size:9px; }
.plan-builder-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.plan-builder-option { display:flex; gap:9px; align-items:center; padding:10px; border:1px solid rgba(255,255,255,.13); border-radius:11px; background:rgba(255,255,255,.05); cursor:pointer; }
.plan-builder-option input { width:17px; height:17px; accent-color:#e9b63d; }
.plan-builder-option span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.plan-builder-option strong { color:#fff; font-size:11px; }
.plan-builder-option small { color:#f1c95f; font-size:9px; }
.plan-contact-btn { margin-top:10px; padding:8px 12px; border:1px solid rgba(241,201,95,.45); border-radius:9px; background:transparent; color:#f1c95f; font:700 10px var(--font); cursor:pointer; }
.builder-admin-options { display:grid; gap:8px; margin-top:16px; }
.builder-admin-row { display:grid; grid-template-columns:minmax(160px,1fr) 130px auto; gap:9px; align-items:center; }
.builder-admin-row > div { display:flex; align-items:center; gap:5px; }
.builder-admin-row > label { font-size:12px; white-space:nowrap; }
@media(max-width:520px){ .plan-builder-options{grid-template-columns:1fr}.plan-builder-head{flex-direction:column}.plan-builder-total{text-align:left}.builder-admin-row{grid-template-columns:1fr 120px}.builder-admin-row>label{grid-column:1/-1} }

@media (max-width: 520px) {
   .commercial-row {
      align-items: stretch;
      flex-direction: column;
   }
}

.closing-search-row {
   display: grid;
   grid-template-columns: minmax(190px,1fr) auto auto;
   align-items: end;
   gap: 10px;
}

.closing-search-row .field-input {
   margin-bottom: 0;
}

.closing-search-row .btn-cta {
   width: auto;
   padding: 0 20px;
}

@media (max-width: 560px) {
   .closing-search-row {
      grid-template-columns: 1fr 1fr;
   }

   .closing-search-row > div {
      grid-column: 1 / -1;
   }

   .closing-search-row .btn-cta,
   .closing-search-row .btn-ghost {
      width: 100%;
   }
}

.platform-finance-metrics {
   display: grid;
   grid-template-columns: repeat(4,minmax(0,1fr));
   gap: 10px;
   margin: 16px 0;
}

.platform-finance-metrics > div {
   display: flex;
   min-height: 78px;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   padding: 13px;
   border: 1px solid var(--border);
   border-radius: 13px;
   background: var(--surface-2);
}

.platform-finance-metrics strong {
   color: var(--green);
   font-size: 17px;
}

.platform-finance-metrics span {
   color: var(--muted);
   font-size: 9px;
   line-height: 1.35;
   text-transform: uppercase;
}

.storefront-return-btn {
   position: absolute;
   z-index: 5;
   top: 18px;
   left: 20px;
   width: auto;
   margin: 0;
   padding: 11px 14px;
   border: 1px solid rgba(255,255,255,.28);
   border-radius: 12px;
   color: #fff;
   background: rgba(255,255,255,.12);
   font: 700 12px var(--font);
   cursor: pointer;
}

.storefront-return-btn:hover {
   background: rgba(255,255,255,.20);
}

.session-renewal-tooltip {
   position: fixed;
   z-index: 12000;
   top: 18px;
   left: 50%;
   display: grid;
   grid-template-columns: auto minmax(0,1fr) auto;
   align-items: center;
   gap: 12px;
   width: min(92vw,680px);
   padding: 14px 16px;
   border: 1px solid rgba(18,63,58,.18);
   border-radius: 16px;
   background: #fffdf8;
   box-shadow: 0 20px 60px rgba(3,29,26,.28);
   transform: translateX(-50%);
}

.session-renewal-icon { font-size: 24px; }
.session-renewal-copy { display:flex; flex-direction:column; gap:3px; }
.session-renewal-copy strong { color:var(--text); font-size:13px; }
.session-renewal-copy span { color:var(--muted); font-size:10px; line-height:1.4; }
.session-renewal-tooltip .btn-cta { width:auto; min-height:40px; padding:0 14px; white-space:nowrap; }

.company-showcase-head {
   gap: 18px;
   padding: 16px 20px;
   border-color: rgba(255,255,255,.45);
   background: linear-gradient(135deg,#f4d36f 0%,#e7af35 100%);
   box-shadow: 0 14px 34px rgba(3,29,26,.24);
}

.company-showcase-head strong {
   color: #123f3a;
   font-size: 18px;
   line-height: 1.35;
}

.company-showcase-head span {
   color: rgba(18,63,58,.76);
   font-size: 13px;
   font-weight: 600;
}

.logo-lightbox[hidden] { display:none; }
.logo-lightbox { position:fixed; inset:0; z-index:10050; display:grid; place-items:center; padding:24px; background:rgba(3,20,18,.86); backdrop-filter:blur(6px); }
.logo-lightbox img { display:block; width:min(88vw,620px); height:min(78vh,620px); object-fit:contain; border-radius:20px; background:#fff; padding:12px; box-shadow:0 24px 80px rgba(0,0,0,.45); }
.logo-lightbox button { position:absolute; top:18px; right:20px; width:44px; height:44px; border:0; border-radius:50%; background:#fff; color:#123f3a; font-size:30px; line-height:1; cursor:pointer; }
.order-sound-toggle { margin-left:auto; min-height:36px; padding:0 12px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(255,255,255,.1); color:#fff; font:600 11px 'Plus Jakarta Sans',sans-serif; cursor:pointer; white-space:nowrap; }
.order-sound-toggle.enabled { border-color:rgba(244,211,111,.65); background:rgba(244,211,111,.18); color:#f4d36f; }
.order-sound-toggle.push-coming-soon { opacity:.58; cursor:not-allowed; }

@media (max-width:560px) {
  .company-showcase-logo,.company-showcase-head img { width:64px; height:64px; flex-basis:64px; }
  .company-showcase-head { gap:14px; padding:14px 16px; }
  .company-showcase-head strong { font-size:16px; }
  .order-sound-toggle span { display:none; }
  .order-sound-toggle { width:38px; padding:0; font-size:16px; }
}

.company-share-box {
   margin-top: 18px;
   padding: 14px;
   border: 1px solid var(--border);
   border-radius: 13px;
   background: var(--surface-2);
}

.company-share-box .field-input { margin-bottom: 9px; font-size: 11px; }
.company-share-box > div { display:flex; gap:8px; }

.support-new-card { border-top:3px solid var(--green); }
.support-ticket-list { display:grid; gap:10px; margin-top:12px; }
.support-ticket-row { display:flex; justify-content:space-between; gap:14px; padding:15px; border:1px solid var(--border); border-radius:13px; background:var(--surface-2); }
.support-ticket-row > div:first-child { min-width:0; }
.support-ticket-row strong { display:block; color:var(--text); font-size:13px; }
.support-ticket-row span { color:var(--muted); font-size:9px; text-transform:capitalize; }
.support-ticket-row p { margin-top:7px; color:var(--muted); font-size:11px; line-height:1.5; white-space:pre-wrap; }
.support-ticket-row > div:last-child { display:flex; align-items:flex-end; flex-direction:column; gap:6px; flex-shrink:0; }
.support-priority,.support-status { padding:5px 8px; border-radius:999px; font-weight:800; }
.support-priority.normal { color:var(--green); background:var(--green-lt); }
.support-priority.alta { color:#9a5a00; background:#fff2d6; }
.support-priority.urgente { color:var(--red); background:var(--red-lt); }
.support-status.aberto { color:#275f9b; background:#e8f2ff; }
.support-status.em_atendimento { color:#8a5a00; background:#fff2d6; }
.support-status.resolvido { color:var(--green); background:var(--green-lt); }
.support-status-select { min-width:138px; margin:0; padding:7px 9px; font-size:10px; }

@media (max-width:520px){
   .support-ticket-row { flex-direction:column; }
   .support-ticket-row > div:last-child { align-items:flex-start; flex-direction:row; }
}

@media (max-width: 560px) {
   .session-renewal-tooltip { grid-template-columns:auto 1fr; }
   .session-renewal-tooltip .btn-cta { grid-column:1 / -1; width:100%; }
}

@media (max-width: 700px) {
   .platform-finance-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

.section-subtitle,
.config-description {
   margin-top: 4px;
   color: var(--muted);
   font-size: 13px;
   line-height: 1.5;
}

.config-description {
   margin-bottom: 16px;
}

.role-explainer {
   display: grid;
   gap: 10px;
}

.role-explainer > div {
   display: grid;
   gap: 4px;
   padding: 14px;
   border-radius: 14px;
   background: var(--surface2);
}

.role-explainer strong {
   color: var(--text);
   font-size: 14px;
}

.role-explainer span {
   color: var(--muted);
   font-size: 12px;
   line-height: 1.5;
}

.company-identity {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 18px;
   padding: 14px;
   border-radius: 14px;
   background: var(--surface2);
}

.company-avatar {
   display: grid;
   place-items: center;
   width: 44px;
   height: 44px;
   flex: 0 0 auto;
   border-radius: 12px;
   color: #fff;
   background: var(--green);
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 700;
}

.company-identity > div:last-child {
   display: grid;
   gap: 3px;
}

.company-identity strong {
   color: var(--text);
   font-size: 14px;
}

.company-identity span {
   color: var(--muted);
   font-size: 11px;
}

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

.media-picker > input {
   display: none;
}

.media-option {
   display: flex;
   align-items: center;
   gap: 11px;
   min-height: 86px;
   padding: 14px;
   border: 1px solid var(--border);
   border-radius: 14px;
   color: var(--text);
   background: #fff;
   font-family: var(--font);
   text-align: left;
   cursor: pointer;
   transition: border-color var(--ease), transform var(--ease), background var(--ease);
}

.media-option:hover {
   border-color: rgba(25,118,108,.35);
   background: var(--green-lt);
   transform: translateY(-1px);
}

.media-option-icon {
   display: grid;
   place-items: center;
   width: 38px;
   height: 38px;
   flex: 0 0 auto;
   border-radius: 10px;
   color: var(--green);
   background: var(--green-lt);
   font-size: 18px;
   font-weight: 800;
}

.media-option.camera .media-option-icon {
   color: var(--accent-dk);
   background: var(--accent-lt);
}

.media-option > span:last-child {
   display: grid;
   gap: 4px;
}

.media-option strong {
   font-size: 12px;
   line-height: 1.3;
}

.media-option small {
   color: var(--muted);
   font-size: 10px;
   line-height: 1.35;
}

.media-picker-note {
   grid-column: 1 / -1;
   color: var(--hint);
   font-size: 10px;
   text-align: center;
}

.voucher-btn {
   color: var(--green);
   border-color: rgba(25,118,108,.18);
   background: var(--green-lt);
}

@media (max-width: 380px) {
   .media-picker {
      grid-template-columns: 1fr;
   }

   .media-picker-note {
      grid-column: 1;
   }
}

/* BoxExpress — entrada central responsiva */
body:has(#screen-box-entry.active) #app {
   width: min(100%, 760px);
   max-width: 760px;
}

#screen-box-entry .box-entry-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   max-width: 620px;
   min-height: 100dvh;
   margin: 0 auto;
   padding: clamp(36px, 7vh, 68px) 28px 38px;
   text-align: center;
}

#screen-box-entry .brand-badge {
   align-self: center;
   max-width: 100%;
}

#screen-box-entry .brand-name {
   width: 100%;
   margin: 28px 0 14px;
   font-size: clamp(52px, 12vw, 78px);
   line-height: .92;
   overflow-wrap: normal;
   white-space: nowrap;
}

#screen-box-entry .brand-tagline {
   width: 100%;
   max-width: 440px;
   margin: 0 auto 28px;
   font-size: clamp(15px, 3.5vw, 17px);
}

#screen-box-entry .splash-card,
#screen-box-entry .btn-partner-highlight,
#screen-box-entry .security-note {
   width: 100%;
   max-width: 480px;
}

#screen-box-entry .splash-card {
   align-self: center;
   padding: 28px 26px 24px;
   text-align: left;
}

#screen-box-entry .splash-card .btn-ghost-sm {
   width: 100%;
   margin-top: 8px;
}

#screen-box-entry .btn-partner-highlight {
   flex-shrink: 0;
   min-height: 52px;
   margin: 16px auto 0;
   white-space: normal;
}

#screen-box-entry .security-note {
   margin: 22px auto 0;
}

@media (max-width: 520px) {
   #screen-box-entry .box-entry-content {
      justify-content: flex-start;
      padding: 30px 18px 26px;
   }

   #screen-box-entry .brand-name {
      margin-top: 24px;
      font-size: clamp(43px, 14vw, 62px);
   }

   #screen-box-entry .brand-tagline {
      margin-bottom: 24px;
   }

   #screen-box-entry .brand-tagline br {
      display: none;
   }

   #screen-box-entry .splash-card {
      padding: 24px 20px 20px;
      border-radius: 22px;
   }
}

@media (max-width: 350px) {
   #screen-box-entry .brand-name {
      font-size: 40px;
   }
}

/* Planos e cadastro inicial de empresas */
#screen-box-entry .entry-plans {
   width: 100%;
   max-width: 560px;
   margin: 26px auto 4px;
   color: #fff;
   text-align: left;
}

.entry-plans-heading {
   margin-bottom: 14px;
   text-align: center;
}

.entry-plans-heading span {
   color: #f1c95f;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: .12em;
   text-transform: uppercase;
}

.entry-plans-heading h2 {
   margin-top: 5px;
   color: #fffdf8;
   font-size: 18px;
   line-height: 1.35;
}

.entry-plan-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
}

.entry-plan-card {
   position: relative;
   padding: 18px;
   border: 1px solid rgba(255,255,255,.18);
   border-radius: 16px;
   background: rgba(255,255,255,.08);
}

.entry-plan-card.featured {
   border-color: rgba(241,201,95,.58);
   background: rgba(241,201,95,.12);
}

.entry-plan-name {
   margin-bottom: 8px;
   color: #fff;
   font-size: 16px;
   font-weight: 800;
}

.entry-plan-card p {
   margin: 0 0 12px;
   color: rgba(255,255,255,.72);
   font-size: 12px;
   line-height: 1.55;
}

.entry-plan-card > span {
   color: #f1c95f;
   font-size: 10px;
   font-weight: 700;
}

.plan-demo-btn,.plan-contact-btn{width:100%;margin-top:14px;padding:10px 12px;border:1px solid rgba(241,201,95,.55);border-radius:10px;background:transparent;color:#f1c95f;font:700 11px 'Plus Jakarta Sans',sans-serif;cursor:pointer;transition:.2s ease}
.plan-demo-btn:hover,.plan-demo-btn:focus-visible{background:#f1c95f;color:#123f3a;transform:translateY(-1px)}
.plan-contact-btn{margin-top:8px;background:#f1c95f;color:#123f3a}
.plan-demo-modal{position:relative;width:min(94vw,760px);max-width:760px;max-height:calc(100dvh - 24px);overflow:auto;padding:28px;background:#f8f5ea;color:#123f3a}
.plan-demo-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;border-radius:50%;background:#e9e7dc;color:#123f3a;font-size:24px;cursor:pointer}
.plan-demo-kicker{color:#a67809;font-size:10px;font-weight:800;letter-spacing:.14em}
.plan-demo-head{display:flex;justify-content:space-between;gap:24px;margin:8px 0 20px}
.plan-demo-head h2{margin:0 0 7px;font-size:30px}.plan-demo-head p{max-width:430px;margin:0;color:#526965;font-size:13px;line-height:1.55}
.plan-demo-price{text-align:right;white-space:nowrap}.plan-demo-price strong,.plan-demo-price span{display:block}.plan-demo-price strong{font-size:19px}.plan-demo-price span{margin-top:5px;color:#a67809;font-size:11px;font-weight:700}
.plan-demo-preview{overflow:hidden;border-radius:16px;background:linear-gradient(135deg,#0b3e39,#586c3e);box-shadow:0 16px 36px rgba(10,50,46,.2)}
.plan-demo-browser{display:flex;align-items:center;gap:5px;padding:9px 12px;background:rgba(0,0,0,.18)}.plan-demo-browser i{width:7px;height:7px;border-radius:50%;background:#f1c95f}.plan-demo-browser span{margin-left:8px;color:rgba(255,255,255,.68);font-size:9px}
.plan-demo-showcase{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px;color:#fff}.plan-demo-showcase small,.plan-demo-showcase strong,.plan-demo-showcase em{display:block}.plan-demo-showcase small{color:#f1c95f;font-weight:800;letter-spacing:.12em}.plan-demo-showcase strong{max-width:340px;margin:8px 0;font-size:22px}.plan-demo-showcase em{color:rgba(255,255,255,.65);font-size:11px;font-style:normal}
.plan-demo-products{display:flex;gap:7px}.plan-demo-products i{display:block;width:45px;height:58px;border-radius:9px;background:linear-gradient(145deg,#fff,#e8c75d)}.plan-demo-products i:nth-child(2){transform:translateY(-8px)}
.plan-demo-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}.plan-demo-columns section{padding:17px;border:1px solid #dcded4;border-radius:14px;background:#fff}.plan-demo-columns h3{margin:0 0 13px;font-size:13px}.plan-demo-features,.plan-demo-steps{display:grid;gap:10px;margin:0;padding:0;list-style:none}.plan-demo-features li,.plan-demo-steps li{display:flex;align-items:flex-start;gap:9px;color:#526965;font-size:12px;line-height:1.4}.plan-demo-features span,.plan-demo-steps span{display:grid;flex:0 0 20px;height:20px;place-items:center;border-radius:50%;background:#e8f0e5;color:#185249;font-size:10px;font-weight:800}
.plan-demo-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.plan-demo-video-note{display:block;margin-top:12px;color:#7b8986;font-size:9px;text-align:center}
@media(max-width:620px){.plan-demo-modal{padding:22px 16px}.plan-demo-head{display:block}.plan-demo-price{margin-top:14px;text-align:left}.plan-demo-showcase{padding:20px 16px}.plan-demo-products{display:none}.plan-demo-columns{grid-template-columns:1fr;gap:10px}.plan-demo-actions{flex-direction:column-reverse}.plan-demo-actions button{width:100%}}

.entry-plan-tag {
   display: inline-block;
   margin-bottom: 8px;
   padding: 4px 7px;
   border-radius: 999px;
   color: #123f3a;
   background: #f1c95f;
   font-size: 9px;
   font-weight: 800;
   text-transform: uppercase;
}

.entry-plans > small {
   display: block;
   margin-top: 11px;
   color: rgba(255,255,255,.55);
   font-size: 10px;
   line-height: 1.5;
   text-align: center;
}

.partner-modal-box {
   width: min(92vw, 720px);
   max-width: 720px;
   max-height: calc(100dvh - 32px);
   overflow-y: auto;
}

.partner-choice {
   display: grid;
   grid-template-columns: repeat(2, minmax(0,1fr));
   gap: 10px;
   margin: 18px 0;
}

.partner-choice label {
   cursor: pointer;
}
.partner-person-type{display:flex;gap:8px;margin:0 0 16px}.partner-person-type label{flex:1;cursor:pointer}.partner-person-type input{position:absolute;opacity:0}.partner-person-type span{display:block;padding:11px;border:1px solid var(--border);border-radius:11px;color:var(--muted);font-size:12px;font-weight:700;text-align:center}.partner-person-type input:checked+span{border-color:var(--green);background:var(--green-lt);color:var(--green)}

.partner-choice input {
   position: absolute;
   opacity: 0;
}

.partner-choice span {
   display: flex;
   flex-direction: column;
   min-height: 72px;
   padding: 13px;
   border: 1px solid var(--border);
   border-radius: 13px;
   background: var(--surface-2);
}

.partner-choice input:checked + span {
   border-color: var(--green);
   background: var(--green-lt);
   box-shadow: 0 0 0 3px rgba(25,118,108,.10);
}

.partner-choice strong {
   color: var(--text);
   font-size: 13px;
}

.partner-choice small {
   margin-top: 4px;
   color: var(--muted);
   font-size: 10px;
   line-height: 1.4;
}

.partner-form-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0,1fr));
   gap: 12px;
}

.partner-form-grid .field-input {
   margin-bottom: 0;
}

.partner-consent {
   display: flex;
   align-items: flex-start;
   gap: 9px;
   margin-top: 16px;
   color: var(--muted);
   font-size: 11px;
   line-height: 1.45;
}

.partner-consent input {
   width: 17px;
   height: 17px;
   flex: 0 0 auto;
   accent-color: var(--green);
}

@media (max-width: 520px) {
   .entry-plan-grid,
   .partner-choice,
   .partner-form-grid {
      grid-template-columns: 1fr;
   }

   .entry-plan-card {
      padding: 16px;
   }

   .partner-modal-box {
      width: calc(100vw - 24px);
      max-height: calc(100dvh - 24px);
      padding: 22px 18px;
   }
}