/* ANVA WORKSPACE BASE LAYER V58 — canonical base shell, intentionally below components/compositions/project. */
@layer base {
:root {
    --bg:#f5f7f6; --surface:#fff; --surface-soft:#eef4f1; --surface-strong:#e2ece7;
    --text:#17221f; --muted:#66736e; --border:#d7e1dc;
    --accent:#12624f; --accent-strong:#0a4b3b; --accent-soft:#dcefe8;
    --success:#196640; --success-soft:#e1f2e8; --warning:#8a5a10; --warning-soft:#fff1d6;
    --danger:#a73333; --danger-soft:#fae8e8; --info:#245a88; --info-soft:#e3effa;
    --shadow:0 10px 30px rgba(23,34,31,.08);
    --r-sm:.75rem; --r-md:1rem; --r-lg:1.5rem;
    --header:4.5rem; --bottom:4.8rem; --max:78rem;
    --safe-bottom:env(safe-area-inset-bottom,0px); --safe-top:env(safe-area-inset-top,0px);
}
@media (prefers-color-scheme:dark) {
    :root {
        --bg:#0f1715; --surface:#16211e; --surface-soft:#1c2a26; --surface-strong:#24352f;
        --text:#eef5f2; --muted:#a7b5b0; --border:#30443d;
        --accent:#65c5a8; --accent-strong:#8ed8c2; --accent-soft:#173c32;
        --success:#8bd3aa; --success-soft:#1e3a2b; --warning:#f3c56f; --warning-soft:#3e321c;
        --danger:#ff9a9a; --danger-soft:#442424; --info:#9bc9f1; --info-soft:#1d3549; --shadow:none;
    }
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;background:var(--bg);color:var(--text);font:1rem/1.6 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.has-modal,body.has-drawer{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button,[role=button],.btn,.bottom-nav__item,.account-bridge,.icon-btn{min-height:44px}
img,video{display:block;max-width:100%}
svg{display:block}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:3px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;top:.5rem;left:.5rem;z-index:1000;transform:translateY(-160%);padding:.7rem 1rem;border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--shadow)}
.skip-link:focus{transform:none}
.app-shell{min-height:100dvh}.app-main-shell{min-width:0}
.app-header{position:sticky;top:0;z-index:40;padding-top:var(--safe-top);border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(16px)}
.app-header__inner{width:min(100% - 1.25rem,var(--max));min-height:var(--header);margin:auto;display:flex;align-items:center;gap:.7rem}
.brand{display:flex;align-items:center;gap:.65rem;min-width:0}
.brand-mark{width:2.5rem;height:2.5rem;display:grid;place-items:center;flex:none;border-radius:.85rem;background:var(--accent);color:#fff;font-weight:900}
.brand-copy{display:grid;min-width:0;line-height:1.15}.brand-copy small{margin-top:.15rem;color:var(--muted);font-size:.7rem;white-space:nowrap}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:.4rem}
.icon-btn{width:2.75rem;padding:0;display:grid;place-items:center;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);cursor:pointer}
.icon-btn svg{width:1.25rem;height:1.25rem}
.account-bridge{display:flex;align-items:center;gap:.5rem;padding:.2rem .45rem .2rem .2rem;border:1px solid var(--border);border-radius:999px;background:var(--surface)}
.account-bridge__avatar{width:2.1rem;height:2.1rem;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent-strong);font-weight:900}
.account-bridge__copy{display:none;line-height:1.1}.account-bridge__copy small{color:var(--muted);font-size:.68rem}.account-bridge__copy strong{max-width:8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem}
.header-logout,.desktop-public-nav,.app-sidebar{display:none}
.app-content{width:min(100% - 1.25rem,var(--max));margin:auto;padding:1rem 0 calc(var(--bottom) + var(--safe-bottom) + 1.5rem)}
.app-footer{width:min(100% - 1.25rem,var(--max));margin:auto;padding:2rem 0 calc(var(--bottom) + var(--safe-bottom) + 1rem);display:grid;gap:1rem;color:var(--muted);font-size:.9rem}
.app-footer p{margin:.2rem 0}.app-footer nav{display:flex;gap:1rem;flex-wrap:wrap}
.bottom-nav{position:fixed;inset:auto 0 0;z-index:50;min-height:calc(var(--bottom) + var(--safe-bottom));padding:.35rem .35rem calc(.35rem + var(--safe-bottom));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface) 95%,transparent);backdrop-filter:blur(18px)}
.bottom-nav__item{position:relative;min-width:0;padding:.35rem .1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12rem;border:0;border-radius:.75rem;background:transparent;color:var(--muted);font:inherit;font-size:.67rem;font-weight:700;line-height:1.15;text-align:center;text-decoration:none;appearance:none;-webkit-appearance:none}
.bottom-nav__item.is-active{background:var(--accent-soft);color:var(--accent-strong)}
.nav-icon{width:1.35rem;height:1.35rem}
.offline-banner{position:sticky;top:calc(var(--header) + var(--safe-top));z-index:39;padding:.5rem 1rem;background:var(--warning-soft);color:var(--warning);text-align:center;font-size:.84rem}
.flash-stack{position:fixed;top:calc(var(--header) + var(--safe-top) + .6rem);right:.7rem;left:.7rem;z-index:70;display:grid;gap:.5rem;pointer-events:none}
.flash{width:min(100%,34rem);margin-left:auto;padding:.75rem .85rem;display:flex;align-items:center;gap:.7rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);pointer-events:auto}
.flash--success{background:var(--success-soft);color:var(--success)}.flash--danger{background:var(--danger-soft);color:var(--danger)}.flash--warning{background:var(--warning-soft);color:var(--warning)}.flash--info{background:var(--info-soft);color:var(--info)}
.flash__close{margin-left:auto;border:0;background:none;color:inherit;cursor:pointer}
.page-hero{padding:1.35rem 0 .5rem;display:grid;gap:.9rem}
.page-hero--feature{padding:1.35rem;border:1px solid var(--border);border-radius:var(--r-lg);background:radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 40%),var(--surface);background-repeat:no-repeat}
.page-kicker{margin:0;color:var(--accent-strong);font-size:.8rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.page-title{margin:0;max-width:19ch;font-size:clamp(1.85rem,7vw,3.8rem);line-height:1.07;letter-spacing:-.045em}
.page-subtitle{margin:0;max-width:68ch;color:var(--muted)}
.hero-actions,.filter-actions,.card-actions{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.search-bar{display:flex;gap:.5rem;width:100%}.search-bar input{min-width:0;flex:1}
.section{padding:1.15rem 0}.section-header{margin-bottom:.8rem;display:flex;align-items:end;justify-content:space-between;gap:1rem}.section-header h1,.section-header h2{margin:0;line-height:1.2;letter-spacing:-.025em}.section-header p{margin:.2rem 0 0;color:var(--muted)}.section-link{color:var(--accent-strong);font-weight:800;white-space:nowrap}
.content-grid{display:grid;grid-template-columns:1fr;gap:.8rem}.content-grid--compact{grid-template-columns:repeat(2,minmax(0,1fr))}
.ui-card{min-width:0;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);transition:border-color .18s ease,transform .18s ease}
a.ui-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-soft)}.card-media img,.card-media .media-placeholder{width:100%;height:100%;object-fit:cover}
.card-body{padding:.9rem}.card-body h3{margin:0;font-size:1rem;line-height:1.3}.card-body p{margin:.4rem 0 0;color:var(--muted);font-size:.9rem}
.card-meta{margin-bottom:.45rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;color:var(--muted);font-size:.78rem}
.card-price{margin-top:.55rem;font-size:1.05rem;font-weight:900}.price-old{margin-left:.3rem;color:var(--muted);font-size:.8rem;font-weight:500;text-decoration:line-through}
.media-placeholder{display:grid;place-items:center;background:linear-gradient(135deg,var(--surface-soft),var(--surface-strong));color:var(--accent-strong);font-weight:900}
.ui-badge{display:inline-flex;align-items:center;min-height:1.7rem;padding:.16rem .48rem;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.71rem;font-weight:800;line-height:1}
.ui-badge--success{background:var(--success-soft);color:var(--success)}.ui-badge--warning{background:var(--warning-soft);color:var(--warning)}.ui-badge--danger{background:var(--danger-soft);color:var(--danger)}.ui-badge--info{background:var(--info-soft);color:var(--info)}.ui-badge--accent{background:var(--accent-soft);color:var(--accent-strong)}
.btn{min-height:44px;padding:.65rem .9rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid transparent;border-radius:.8rem;background:transparent;color:inherit;font-weight:800;line-height:1.1;cursor:pointer}
.btn--primary{background:var(--accent);color:#fff}.btn--secondary{border-color:color-mix(in srgb,var(--accent) 35%,var(--border));background:var(--accent-soft);color:var(--accent-strong)}.btn--ghost{border-color:var(--border);background:var(--surface)}.btn--small{min-height:38px;padding:.48rem .68rem;font-size:.84rem}
input,select,textarea{width:100%;min-height:46px;padding:.7rem .8rem;border:1px solid var(--border);border-radius:.8rem;background:var(--surface);color:var(--text)}textarea{min-height:8rem;resize:vertical}label{display:grid;gap:.35rem;font-weight:700}.form-help{color:var(--muted);font-size:.82rem;font-weight:400}.form-error{margin:.25rem 0 0;color:var(--danger);font-size:.84rem}
.filter-bar{padding:.8rem;display:grid;gap:.65rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}.filter-grid{display:grid;gap:.65rem}
.empty-state{padding:2rem 1rem;display:grid;justify-items:center;gap:.5rem;border:1px dashed var(--border);border-radius:var(--r-md);background:var(--surface);text-align:center}.empty-state__icon{width:3rem;height:3rem;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent-strong);font-size:1.4rem}.empty-state h2{margin:0;font-size:1.08rem}.empty-state p{margin:0 0 .5rem;max-width:48ch;color:var(--muted)}
.pagination{margin-top:1.1rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.7rem}.pagination>:last-child{justify-self:end}.pagination__page{color:var(--muted);font-size:.84rem}
.detail-layout{display:grid;gap:1rem}.detail-hero{overflow:hidden;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}.detail-hero__media{min-height:15rem;aspect-ratio:16/9}.detail-hero__media img,.detail-hero__media .media-placeholder{width:100%;height:100%;object-fit:cover}.detail-hero__content{padding:1rem}.detail-hero h1{margin:.35rem 0 0;font-size:clamp(1.7rem,6vw,3rem);line-height:1.1}.detail-hero p{color:var(--muted)}
.detail-panel{padding:1rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}.detail-panel h2,.detail-panel h3{margin-top:0}.prose p{white-space:pre-line}
.stat-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.stat{padding:.7rem;border-radius:.8rem;background:var(--surface-soft)}.stat small{display:block;color:var(--muted)}.stat strong{display:block;margin-top:.1rem}
.hours-list,.simple-list{margin:0;padding:0;list-style:none}.hours-list li,.simple-list li{padding:.62rem 0;display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--border)}.hours-list li:last-child,.simple-list li:last-child{border:0}
.promo-ribbon{position:absolute;top:.55rem;left:.55rem;z-index:2}.progress{height:.65rem;overflow:hidden;border-radius:999px;background:var(--surface-strong)}.progress__bar{height:100%;border-radius:inherit;background:var(--accent)}
.journey-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.journey-item{min-height:7.5rem;padding:.85rem;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}.journey-item span{color:var(--muted);font-size:.82rem}
.auth-shell{width:min(100%,30rem);margin:1.5rem auto}.auth-card{padding:1rem;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}.auth-card h1{margin-top:0}.form-stack{display:grid;gap:.82rem}.legal-prose{max-width:72ch}.legal-prose h2{margin-top:2rem}
.scan-shell{display:grid;gap:1rem}.scan-viewport{position:relative;min-height:18rem;overflow:hidden;display:grid;place-items:center;border:1px solid var(--border);border-radius:var(--r-lg);background:#0d1513}.scan-video{width:100%;height:100%;min-height:18rem;object-fit:cover}.scan-frame{position:absolute;width:min(62vw,16rem);aspect-ratio:1;border:3px solid rgba(255,255,255,.9);border-radius:1.25rem;box-shadow:0 0 0 999px rgba(0,0,0,.2);pointer-events:none}.scan-status{margin:0;color:var(--muted)}.scan-status[data-error=true]{color:var(--danger)}
.modal,.drawer{position:fixed;inset:0;z-index:100}.modal__backdrop,.drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}.modal__panel{position:relative;width:min(calc(100% - 1.25rem),34rem);max-height:calc(100dvh - 2rem);margin:1rem auto;overflow:auto;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow)}.modal__header,.drawer__header{padding:.8rem 1rem;display:flex;align-items:center;gap:1rem;border-bottom:1px solid var(--border)}.modal__header h2{margin:0;font-size:1.1rem}.modal__header .icon-btn,.drawer__header .icon-btn{margin-left:auto}.modal__body{padding:1rem}.drawer__panel{position:relative;width:min(88vw,22rem);height:100%;margin-left:auto;background:var(--surface);box-shadow:var(--shadow)}.drawer__body{padding:1rem}
.action-bar{position:sticky;bottom:calc(var(--bottom) + var(--safe-bottom) + .5rem);z-index:20;margin-top:1rem;padding:.65rem;display:flex;align-items:center;gap:.65rem;border:1px solid var(--border);border-radius:var(--r-md);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(15px)}.action-bar__secondary{min-width:0;flex:1}.action-bar__primary{margin-left:auto}
.story-content{font-size:1.05rem;white-space:pre-line}.story-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.story-media-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:.8rem}
.product-options{display:grid;gap:.75rem}.option-group{padding-top:.75rem;border-top:1px solid var(--border)}.option-values{display:flex;gap:.4rem;flex-wrap:wrap}.review-summary{display:flex;align-items:baseline;gap:.4rem}.review-summary strong{font-size:2rem;line-height:1}.review-item{padding:.8rem 0;border-bottom:1px solid var(--border)}.review-item:last-child{border:0}
@media (min-width:620px){
    .app-header__inner,.app-content,.app-footer{width:min(100% - 2rem,var(--max))}
    .account-bridge__copy{display:grid}.content-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.content-grid--compact{grid-template-columns:repeat(3,minmax(0,1fr))}
    .journey-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-hero__content{padding:1.3rem}.stat-row{grid-template-columns:repeat(4,minmax(0,1fr))}.story-media-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:960px){
    .bottom-nav{display:none}.app-content{padding:1.5rem 0 3rem}.app-footer{padding-bottom:2rem;grid-template-columns:1fr auto;align-items:end}
    .desktop-public-nav{margin-left:1rem;display:flex;align-items:center;gap:.15rem}.desktop-public-nav__item{min-height:42px;padding:.55rem .68rem;display:inline-flex;align-items:center;gap:.35rem;border-radius:.75rem;color:var(--muted);font-size:.85rem;font-weight:800}.desktop-public-nav__item .nav-icon{display:none}.desktop-public-nav__item.is-active{background:var(--accent-soft);color:var(--accent-strong)}
    .header-logout{display:block}
    .app-context--member .app-shell,.app-context--merchant .app-shell,.app-context--manager .app-shell,.app-context--superadmin .app-shell{display:grid;grid-template-columns:15rem minmax(0,1fr)}
    .app-sidebar{position:sticky;top:0;height:100dvh;padding:1rem;display:flex;flex-direction:column;gap:1rem;border-right:1px solid var(--border);background:var(--surface)}.app-sidebar__brand{display:flex;align-items:center;gap:.65rem}.app-sidebar__brand span:last-child{display:grid;line-height:1.2}.app-sidebar__brand small{color:var(--muted)}.app-sidebar__nav{display:grid;gap:.25rem}.app-sidebar__item{min-height:44px;padding:.6rem .7rem;display:flex;align-items:center;gap:.65rem;border-radius:.75rem;color:var(--muted);font-weight:800}.app-sidebar__item.is-active{background:var(--accent-soft);color:var(--accent-strong)}.app-sidebar__public-link{margin-top:auto;color:var(--muted);font-size:.84rem}
    .content-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.content-grid--compact{grid-template-columns:repeat(4,minmax(0,1fr))}.page-hero--feature{padding:2rem}.filter-bar{grid-template-columns:1fr auto;align-items:end}.filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.detail-layout{grid-template-columns:minmax(0,1.7fr) minmax(18rem,.8fr);align-items:start}.detail-layout__sticky{position:sticky;top:calc(var(--header) + 1rem)}.action-bar{bottom:1rem}.modal__panel{margin-top:5vh}
}
@media (min-width:1280px){
    .app-context--member .app-shell,.app-context--merchant .app-shell,.app-context--manager .app-shell,.app-context--superadmin .app-shell{grid-template-columns:17rem minmax(0,1fr)}
    .content-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.content-grid--compact{grid-template-columns:repeat(5,minmax(0,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}}
@media print{.app-header,.bottom-nav,.app-sidebar,.app-footer,.offline-banner,.action-bar,.pwa-install{display:none!important}.app-content{width:100%;padding:0}body{background:#fff;color:#000}}


/* PHASE 3 — MERCHANT WORKSPACE */
.workspace-header{margin-bottom:1rem;padding:1.1rem;display:flex;flex-direction:column;gap:1rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}.workspace-header h1{margin:0;font-size:clamp(1.65rem,5vw,2.5rem);line-height:1.08}.workspace-header p{margin:.35rem 0 0;color:var(--muted)}.workspace-header__meta{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}.metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.metric-card{padding:.9rem;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}.metric-card small,.metric-card span{color:var(--muted)}.metric-card strong{margin:.25rem 0;font-size:1.6rem;line-height:1.1}.merchant-action-grid{display:grid;gap:.7rem}.merchant-action{padding:1rem;display:grid;gap:.25rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}.merchant-action span{color:var(--muted);font-size:.86rem}.workspace-grid,.qr-workspace{display:grid;gap:1rem}.workspace-panel{padding:1rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}.workspace-panel--soft{background:var(--surface-soft)}.field-grid{display:grid;gap:.75rem}.profile-preview{overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}.profile-preview__banner{height:10rem;overflow:hidden}.profile-preview__banner img,.profile-preview__banner .media-placeholder{width:100%;height:100%;object-fit:cover}.profile-preview__logo{width:5rem;height:5rem;margin:-2.5rem 0 .75rem 1rem;position:relative;overflow:hidden;border:4px solid var(--surface);border-radius:1.2rem}.profile-preview__logo img,.profile-preview__logo .media-placeholder{width:100%;height:100%;object-fit:cover}.profile-preview h3,.profile-preview p{margin-left:1rem;margin-right:1rem}.hours-editor{display:grid;gap:.65rem}.hours-editor__row{padding:.8rem;display:grid;gap:.65rem;border:1px solid var(--border);border-radius:.85rem;background:var(--surface-soft)}.hours-editor__day{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.switch-line{display:inline-flex;align-items:center;gap:.45rem}.switch-line input[type=checkbox],.checkbox-cell input{width:1.1rem;height:1.1rem;min-height:0}.payment-method-list,.notification-list{display:grid;gap:.75rem}.payment-method-card,.notification-item{padding:1rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}.payment-method-card.is-inactive{opacity:.72}.payment-method-card__head,.notification-item__head{display:flex;justify-content:space-between;gap:1rem}.payment-method-card h2,.notification-item h2{margin:.25rem 0;font-size:1.05rem}.payment-method-card__qr{width:4.5rem;height:4.5rem;overflow:hidden;border-radius:.7rem}.payment-method-card__qr img{width:100%;height:100%;object-fit:cover}.card-actions form{display:inline-flex;margin:0}.qr-card{padding:1.1rem;display:grid;justify-items:center;gap:.8rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);text-align:center}.qr-card__canvas{width:min(100%,25rem);aspect-ratio:1;display:grid;place-items:center;padding:1rem;border-radius:1rem;background:#fff}.qr-card__canvas svg{width:100%;height:auto}.qr-card__url{max-width:100%;overflow-wrap:anywhere;color:var(--muted);font-size:.84rem}.guideline-list{margin:0;padding:0;display:grid;gap:.75rem;list-style:none}.guideline-list li{display:grid;gap:.2rem}.guideline-list span{color:var(--muted)}.notification-item.is-unread{border-color:color-mix(in srgb,var(--accent) 50%,var(--border));background:color-mix(in srgb,var(--accent-soft) 42%,var(--surface))}.preference-matrix{margin-bottom:1rem;display:grid;gap:.35rem;overflow-x:auto}.preference-matrix__head,.preference-matrix__row{min-width:28rem;display:grid;grid-template-columns:minmax(8rem,1.5fr) repeat(3,minmax(4.5rem,1fr));align-items:center;gap:.35rem}.preference-matrix__head{padding:.5rem;color:var(--muted);font-size:.78rem;text-align:center}.preference-matrix__row{padding:.55rem;border-radius:.7rem;background:var(--surface-soft)}.checkbox-cell{display:grid;place-items:center}.responsive-table{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}.responsive-table table{width:100%;min-width:44rem;border-collapse:collapse}.responsive-table th,.responsive-table td{padding:.8rem;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}.responsive-table th{color:var(--muted);font-size:.78rem}.responsive-table td small{display:block;color:var(--muted)}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(min-width:620px){.workspace-header{padding:1.25rem;flex-direction:row;align-items:center;justify-content:space-between}.metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.merchant-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hours-editor__row{grid-template-columns:minmax(9rem,1.4fr) repeat(2,minmax(7rem,1fr));align-items:end}}@media(min-width:960px){.workspace-grid,.qr-workspace{grid-template-columns:minmax(0,1.55fr) minmax(18rem,.75fr);align-items:start}.workspace-panel--sticky{position:sticky;top:calc(var(--header-height) + 1rem)}.metric-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.merchant-action-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}


/* =====================================================================
   PHASE 4 — COMMERCE END-TO-END
   ===================================================================== */
.workspace-search { margin-bottom: 1rem; }
.repeat-card { position: relative; padding: 1rem; margin-top: .75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-soft); }
.repeat-card--row { display: grid; gap: .55rem; }
.repeat-card__remove { position: absolute; top: .45rem; right: .45rem; width: 2rem; height: 2rem; min-height: 2rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; }
.inventory-list,.voucher-list,.order-card-list,.cart-list,.payment-choice-list { display: grid; gap: .75rem; }
.inventory-card { display: grid; gap: .75rem; }
.inline-form { display: contents; }
.checkout-layout { display: grid; gap: 1rem; }
.order-item,.cart-item,.payment-row,.order-card { padding: .85rem 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); }
.order-item:last-child,.payment-row:last-child { border-bottom: 0; }
.cart-item { padding: 1rem; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.cart-item.is-invalid { border-color: var(--danger); background: var(--danger-soft); }
.cart-item__body { min-width: 0; flex: 1 1 auto; }
.cart-item h2 { margin: 0; font-size: 1rem; }
.cart-item label { width: 6.5rem; }
.order-card { padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.order-card > div { display: grid; gap: .2rem; }
.order-card > div:last-child { justify-items: end; }
.payment-choice { padding: .75rem; display: flex; grid-template-columns: auto 1fr; align-items: flex-start; gap: .65rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--surface-soft); cursor: pointer; }
.payment-choice input { width: 1.1rem; height: 1.1rem; min-height: 0; margin-top: .2rem; }
.payment-choice span { display: grid; }
.payment-choice small { color: var(--muted); }
.voucher-hints { display: flex; flex-wrap: wrap; gap: .35rem; }
.choice-fieldset { margin: 0; padding: .75rem; border: 1px solid var(--border); border-radius: .8rem; }
.choice-fieldset legend { padding: 0 .25rem; font-weight: 750; }
.choice-line { padding: .35rem 0; display: flex; grid-template-columns: auto 1fr; align-items: center; gap: .45rem; font-weight: 500; }
.choice-line input { width: 1.1rem; height: 1.1rem; min-height: 0; }
.payment-proof { max-width: 30rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-soft); }
.payment-proof img { width: 100%; height: auto; }
.member-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
code { padding: .1rem .3rem; border-radius: .35rem; background: var(--surface-strong); font-size: .9em; }
@media (min-width:620px){ .repeat-card--row { grid-template-columns: 1.4fr 1fr .8fr .7fr .8fr auto; align-items: end; } }
@media (min-width:960px){ .checkout-layout { grid-template-columns: minmax(0,1.55fr) minmax(20rem,.75fr); align-items:start; } .checkout-layout > .workspace-panel:last-child { position:sticky; top:calc(var(--header-height) + 1rem); } }

/* =====================================================================
   PHASE 6 - STORIES, REVIEWS, NOTIFICATIONS, PROFILE
   ===================================================================== */
.content-card {
    min-width: 0;
    display: block;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: transform .18s ease, border-color .18s ease;
}
.content-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
}
.review-editor-grid,
.review-list {
    display: grid;
    gap: .85rem;
}
.review-reply {
    margin-top: .85rem;
    padding: .85rem;
    border-left: 3px solid var(--accent);
    border-radius: .65rem;
    background: var(--surface-soft);
}
.review-reply p { margin-bottom: 0; }
.story-content {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.75;
}
.notification-item h2 { overflow-wrap: anywhere; }
@media (min-width: 620px) {
    .review-editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
    .review-editor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .content-card { transition: none; }
    .content-card:hover { transform: none; }
}

/* =====================================================================
   PHASE 7 - GAMIFICATION & LOYALTY
   ===================================================================== */
.btn--large{min-height:52px;padding:.85rem 1.2rem;font-size:1rem}
.checkin-stage{position:relative;min-height:24rem;overflow:hidden;padding:2rem 1rem;display:grid;place-items:center;border:1px solid var(--border);border-radius:var(--r-lg);background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--accent) 20%,var(--surface)),var(--surface) 60%)}
.checkin-stage.is-checked{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--success) 18%,var(--surface)),var(--surface) 60%)}
.checkin-stage__content{position:relative;z-index:2;max-width:34rem;display:grid;justify-items:center;gap:.65rem;text-align:center}
.checkin-stage__number{font-size:clamp(5rem,22vw,10rem);line-height:.8;letter-spacing:-.08em;color:var(--accent-strong)}
.checkin-stage__content>span{color:var(--muted);font-weight:800}
.checkin-stage__orbit{position:absolute;width:min(80vw,28rem);aspect-ratio:1;border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);border-radius:50%}
.checkin-stage__orbit::before,.checkin-stage__orbit::after{content:"";position:absolute;inset:12%;border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);border-radius:50%}.checkin-stage__orbit::after{inset:27%}
.checkin-stage__orbit span{position:absolute;width:.7rem;height:.7rem;border-radius:50%;background:var(--accent)}
.checkin-stage__orbit span:nth-child(1){top:8%;left:48%}.checkin-stage__orbit span:nth-child(2){right:13%;bottom:23%}.checkin-stage__orbit span:nth-child(3){left:10%;bottom:28%}
.checkin-complete{padding:.65rem .9rem;border-radius:999px;background:var(--success-soft);color:var(--success);font-weight:900}
.gamification-metrics{margin-top:1rem}
.checkin-history{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.checkin-history article{padding:.8rem;display:grid;gap:.15rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.checkin-history span,.checkin-history small{color:var(--muted)}
.member-loyalty-banner{margin-bottom:1rem;padding:1rem;display:flex;flex-direction:column;gap:1rem;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));border-radius:var(--r-lg);background:linear-gradient(135deg,var(--accent-soft),var(--surface))}
.member-loyalty-banner h2{margin:.25rem 0;font-size:clamp(1.35rem,5vw,2.15rem)}.member-loyalty-banner p{margin:0;color:var(--muted)}
.gamification-tabs{margin-bottom:1rem;padding:.35rem;display:flex;gap:.25rem;overflow-x:auto;border:1px solid var(--border);border-radius:999px;background:var(--surface)}
.gamification-tabs a{min-height:42px;padding:.55rem .85rem;display:flex;align-items:center;justify-content:center;flex:1 0 auto;border-radius:999px;color:var(--muted);font-weight:800}
.gamification-tabs a.is-active{background:var(--accent);color:#fff}
.loyalty-summary{display:grid;gap:.75rem}
.loyalty-level{padding:1rem;display:grid;grid-template-columns:4rem minmax(0,1fr);align-items:center;gap:1rem;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.loyalty-level__icon{width:4rem;height:4rem;overflow:hidden;border-radius:1.2rem;background:var(--accent-soft)}
.loyalty-level__icon img,.loyalty-level__icon .media-placeholder{width:100%;height:100%;object-fit:cover}
.loyalty-level small,.loyalty-level p{color:var(--muted)}.loyalty-level h2{margin:0}.loyalty-level p{margin:.35rem 0 0;font-size:.82rem}
.progress-track{height:.65rem;overflow:hidden;border-radius:999px;background:var(--surface-strong)}.progress-track span{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.loyalty-balances{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.loyalty-balances>div{padding:.85rem;display:grid;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.loyalty-balances small,.loyalty-balances span{color:var(--muted)}.loyalty-balances strong{font-size:1.55rem}
.gamification-shortcuts{margin-top:1rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.gamification-shortcuts a{padding:.9rem;display:grid;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.gamification-shortcuts span{color:var(--muted);font-size:.82rem}
.mission-grid,.reward-grid,.badge-grid{display:grid;gap:.75rem}
.mission-card,.reward-card,.badge-card{padding:1rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.mission-card h2,.reward-card h2,.badge-card h2,.reward-card h3,.badge-card h3{margin:.3rem 0}.mission-card p,.reward-card p,.badge-card p{color:var(--muted)}
.mission-progress{margin:.9rem 0;display:grid;gap:.4rem}.mission-progress>div:first-child{display:flex;justify-content:space-between;gap:1rem}
.mission-claimed{margin-top:.75rem;padding:.6rem .75rem;border-radius:.75rem;background:var(--success-soft);color:var(--success);font-weight:900;text-align:center}
.badge-card{display:grid;grid-template-columns:4.25rem minmax(0,1fr);gap:.85rem;align-items:start}.badge-card.is-locked{opacity:.62;filter:saturate(.35)}
.badge-card__icon{width:4.25rem;height:4.25rem;overflow:hidden;border-radius:50%;background:var(--surface-strong)}.badge-card__icon img,.badge-card__icon .media-placeholder{width:100%;height:100%;object-fit:cover}
.badge-card small,.badge-card .form-help{display:block;color:var(--muted)}
.reward-card{padding:0;overflow:hidden}.reward-card__media{height:9rem;background:var(--surface-soft)}.reward-card__media img,.reward-card__media .media-placeholder{width:100%;height:100%;object-fit:cover}.reward-card__body{padding:1rem;display:grid;gap:.55rem}.reward-cost{font-size:1.2rem;color:var(--accent-strong)}
.ledger-list{display:grid;gap:.5rem}.ledger-list article{padding:.75rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}.ledger-list article>div{display:flex;align-items:center;gap:.65rem}.ledger-list article>div>div{display:grid}.ledger-list small{color:var(--muted)}
.ledger-icon{width:2.25rem;height:2.25rem;display:grid;place-items:center;border-radius:.75rem;background:var(--accent-soft);color:var(--accent-strong);font-weight:900}.ledger-credit{color:var(--success)}.ledger-debit{color:var(--danger)}
.admin-gamification-nav{margin:1rem 0;padding:.5rem;display:flex;gap:.4rem;overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}.admin-gamification-nav a{padding:.5rem .7rem;flex:0 0 auto;border-radius:.65rem;background:var(--surface-soft);font-weight:800;font-size:.82rem}
.admin-editor,.admin-entity-list details,.level-admin-card details,.badge-card details,.reward-card details{margin-top:.8rem;padding:.75rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-soft)}
.admin-editor>summary,.admin-entity-list summary,.level-admin-card summary,.badge-card summary,.reward-card summary{cursor:pointer;font-weight:900}
.admin-editor form,.admin-entity-list details form,.level-admin-card details form,.badge-card details form,.reward-card details form{margin-top:.8rem}
.level-admin-grid,.admin-entity-list{display:grid;gap:.75rem}.level-admin-card,.admin-entity-list>article{padding:1rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}.level-admin-card h3{margin:.25rem 0}.level-admin-card small{display:block;color:var(--muted)}
.admin-entity-list__summary{display:flex;flex-direction:column;gap:.8rem}.admin-entity-list__summary h3{margin:.25rem 0}.admin-entity-list__summary p{margin:.2rem 0;color:var(--muted)}.admin-entity-list__stats{display:grid;grid-template-columns:repeat(2,auto);gap:.15rem .65rem;align-content:start}.admin-entity-list__stats strong{font-size:1.35rem}.admin-entity-list__stats span{color:var(--muted);font-size:.75rem}
@media (min-width:620px){
    .checkin-history{grid-template-columns:repeat(4,minmax(0,1fr))}.loyalty-summary{grid-template-columns:minmax(18rem,1.35fr) minmax(18rem,1fr)}
    .mission-grid,.reward-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.level-admin-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .member-loyalty-banner{flex-direction:row;align-items:center;justify-content:space-between}.admin-entity-list__summary{flex-direction:row;justify-content:space-between}
}
@media (min-width:960px){
    .checkin-history{grid-template-columns:repeat(7,minmax(0,1fr))}.gamification-shortcuts{grid-template-columns:repeat(4,minmax(0,1fr))}
    .mission-grid,.reward-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.badge-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-reward-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.checkin-stage__orbit{display:none}}


/* =====================================================================
   PHASE 8 — GOODNESS
   ===================================================================== */
.transaction-stack{display:grid;gap:.8rem}.transaction-card{padding:1rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}.transaction-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.transaction-card__head strong,.transaction-card__head small{display:block}.transaction-card__head small{margin-top:.2rem;color:var(--muted)}.transaction-card .card-price{margin:.6rem 0}.goodness-integrity-mismatch{border-color:color-mix(in srgb,var(--danger) 55%,var(--border))}.goodness-payment-proof{max-width:22rem;border-radius:var(--radius-md);overflow:hidden}.goodness-payment-proof img{width:100%;height:auto;display:block}


/* =====================================================================
   PHASE 10 — PRODUCTION HARDENING & ADAPTIVE PRODUCTIVITY
   ===================================================================== */
:where(html){overflow-x:hidden;scroll-behavior:smooth}
:where(body){min-width:320px;overflow-x:hidden;overflow-wrap:break-word;word-break:normal}
:where(img,svg,video,canvas,iframe){max-width:100%;height:auto}
:where(input,select,textarea,button){max-width:100%;font:inherit}
:where(pre,code){white-space:pre-wrap;overflow-wrap:anywhere}
:where(a,button,input,select,textarea,summary):focus-visible{
    outline:3px solid color-mix(in srgb,var(--accent) 70%,#fff);
    outline-offset:3px
}
:where([hidden]){display:none!important}
.app-content{min-width:0}
.app-main-shell,.workspace-grid,.detail-layout,.content-grid,.field-grid,.filter-grid{min-width:0}
.responsive-table{width:100%;max-width:100%;overflow:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.responsive-table table{width:100%;min-width:44rem}
.content-card,.workspace-panel,.detail-panel,.transaction-card{contain:layout paint}
.content-grid>.content-card{content-visibility:auto;contain-intrinsic-size:20rem}
.workspace-menu-button{display:none}
.update-banner{
    position:sticky;top:0;z-index:95;padding:.65rem 1rem;
    align-items:center;justify-content:center;gap:.75rem;
    border-bottom:1px solid var(--border);background:var(--accent-soft)
}
.update-banner:not([hidden]){display:flex}
.drawer-workspace-nav{display:grid;gap:.35rem}
.drawer-workspace-nav .app-sidebar__item{display:flex}
body.has-modal,body.has-drawer{overflow:hidden}
.modal__panel,.drawer__panel{max-height:min(90dvh,60rem);overflow:auto}
.skip-link:focus{z-index:9999}
.form-stack button[disabled],form[data-submitting="true"] button[type="submit"]{
    opacity:.65;cursor:wait
}
.status-dot{width:.55rem;height:.55rem;border-radius:50%;display:inline-block;background:currentColor}
@media (max-width:959px){
    .app-context--member .workspace-menu-button,
    .app-context--merchant .workspace-menu-button,
    .app-context--manager .workspace-menu-button,
    .app-context--superadmin .workspace-menu-button{display:grid}
    .account-bridge__copy,.header-logout{display:none}
    .app-header__inner{gap:.5rem}
}
@media (max-width:619px){
    .app-content{padding-inline:.75rem}
    .workspace-panel,.detail-panel{padding:.9rem}
    .responsive-table table{min-width:38rem}
    .btn{white-space:normal;text-align:center}
    .filter-actions,.hero-actions{align-items:stretch}
    .filter-actions>.btn,.hero-actions>.btn{width:100%}
}
@media (min-width:1440px){
    .app-content{max-width:1480px;margin-inline:auto;width:100%}
    .app-sidebar{width:17rem}
    .app-main-shell{margin-left:17rem}
    .content-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-contrast:more){
    :root{--border:color-mix(in srgb,currentColor 42%,transparent)}
    .btn,.content-card,.workspace-panel,.detail-panel{border-width:2px}
}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important
    }
}
@media print{
    .app-header,.app-sidebar,.bottom-nav,.app-footer,.offline-banner,.update-banner,
    .btn,.icon-btn,.drawer,.modal{display:none!important}
    .app-main-shell{margin:0!important}
    .app-content{max-width:none;padding:0}
    body{background:#fff;color:#000}
    a{text-decoration:none;color:inherit}
}

/* =====================================================================
   ANVA WORKSPACE SHELL V56 — single shared shell authority
   Member / Merchant / Manager / Superadmin share one adaptive shell.
   Role-specific styles may theme surfaces and navigation, but they do not
   own positioning, scrolling, drawer geometry, or breakpoint behavior.
   ===================================================================== */
:root{
    --workspace-sidebar:17rem;
    --workspace-sidebar-compact:15rem;
    --workspace-drawer:22rem;
    --workspace-nav-radius:.85rem;
    --workspace-elevated:0 18px 50px rgba(23,34,31,.12)
}

.app-main-shell{min-width:0;min-height:100dvh;display:flex;flex-direction:column;margin-left:0}
.app-content{flex:1 0 auto}
.workspace-header-identity,.brand--workspace-mobile,.app-sidebar__top,.app-sidebar__footer,
.workspace-nav-group__label,.workspace-nav-arrow,.drawer__footer{display:none}

.workspace-nav-group{display:grid;gap:.18rem}
.workspace-nav-group+.workspace-nav-group{margin-top:.85rem}
.workspace-nav-group__label{
    margin:0;padding:.15rem .72rem .32rem;color:var(--muted);
    font-size:.66rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase
}
.workspace-nav-icon{
    width:1.9rem;height:1.9rem;display:grid;place-items:center;flex:0 0 1.9rem;
    border-radius:.65rem;color:inherit;background:transparent
}
.workspace-nav-icon .nav-icon{width:1.08rem;height:1.08rem}
.workspace-nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace-nav-arrow{margin-left:auto;color:color-mix(in srgb,var(--muted) 68%,transparent);font-size:1.05rem;line-height:1}

/* Drawer is one component for public and private navigation. */
.drawer{position:fixed;inset:0;z-index:110;display:block;overflow:hidden}
.drawer[hidden]{display:none!important}
.drawer__backdrop{
    position:absolute;inset:0;background:rgba(8,17,14,.58);opacity:0;
    backdrop-filter:blur(2px);transition:opacity .2s ease
}
.drawer__panel{
    position:absolute;inset:0 auto 0 0;width:min(90vw,var(--workspace-drawer));height:100dvh;max-height:100dvh;
    margin:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;
    border-right:1px solid color-mix(in srgb,var(--border) 75%,transparent);
    border-radius:0 1.1rem 1.1rem 0;background:var(--surface);box-shadow:var(--workspace-elevated);
    transform:translate3d(-102%,0,0);transition:transform .22s cubic-bezier(.22,.8,.32,1)
}
.drawer.is-open .drawer__backdrop{opacity:1}
.drawer.is-open .drawer__panel{transform:translate3d(0,0,0)}
.drawer__header{
    min-height:5rem;padding:calc(.8rem + var(--safe-top)) .9rem .8rem 1rem;
    display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--border);background:var(--surface)
}
.drawer__brand-mark{
    width:2.65rem;height:2.65rem;display:grid;place-items:center;flex:none;
    border-radius:.85rem;background:var(--accent);color:#fff;font-weight:950
}
.drawer__title-copy{min-width:0;display:grid;line-height:1.12}
.drawer__title-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem}
.drawer__title-copy small{margin-top:.18rem;color:var(--muted);font-size:.72rem}
.drawer__close{margin-left:auto;flex:none;background:var(--surface-soft)}
.drawer__body{
    min-width:0;min-height:0;padding:.85rem .7rem 1rem;overflow-y:auto;overflow-x:hidden;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-gutter:stable
}
.drawer__footer{
    min-width:0;padding:.75rem .8rem calc(.75rem + var(--safe-bottom));
    border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface) 94%,var(--surface-soft))
}
.drawer__body::-webkit-scrollbar,.app-sidebar__nav::-webkit-scrollbar{width:6px}
.drawer__body::-webkit-scrollbar-track,.app-sidebar__nav::-webkit-scrollbar-track{background:transparent}
.drawer__body::-webkit-scrollbar-thumb,.app-sidebar__nav::-webkit-scrollbar-thumb{
    border-radius:999px;background:color-mix(in srgb,var(--muted) 52%,transparent)
}

.drawer-workspace-nav{display:grid;gap:.15rem}
.drawer-workspace-nav .workspace-nav-group__label{display:block}
.drawer-workspace-nav .app-sidebar__item{
    position:relative;min-height:3rem;padding:.48rem .58rem;display:flex;align-items:center;gap:.55rem;
    border:1px solid transparent;border-radius:var(--workspace-nav-radius);color:var(--text);font-weight:780
}
.drawer-workspace-nav .app-sidebar__item.is-active{
    border-color:color-mix(in srgb,var(--accent) 20%,var(--border));
    background:var(--accent-soft);color:var(--accent-strong);box-shadow:inset 3px 0 0 var(--accent)
}
.drawer-workspace-nav .app-sidebar__item.is-active .workspace-nav-icon{
    background:color-mix(in srgb,var(--accent) 12%,transparent)
}
.drawer-account-row{display:flex;align-items:center;gap:.5rem;min-width:0}
.drawer-account-card{min-width:0;flex:1 1 auto;padding:.1rem 0 .65rem}
.drawer-account-card__identity{min-width:0;display:flex;align-items:center;gap:.65rem}
.drawer-account-card__identity>span:last-child{min-width:0;display:grid;line-height:1.15}
.drawer-account-card__identity strong,.drawer-account-card__identity small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-account-card__identity small{margin-top:.18rem;color:var(--muted);font-size:.72rem}
.drawer-footer-actions{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:.45rem}
.drawer-public-link,.drawer-logout-button{
    width:100%;min-width:0;min-height:2.55rem;padding:.45rem .55rem;display:flex;align-items:center;justify-content:center;gap:.42rem;
    border:1px solid var(--border);border-radius:.75rem;background:var(--surface);color:var(--text);font-size:.76rem;font-weight:850;white-space:nowrap
}
.drawer-public-link:hover{background:var(--surface-soft)}
.drawer-logout-form{min-width:0;margin:0}
.drawer-logout-button{border-color:color-mix(in srgb,var(--danger) 24%,var(--border));background:var(--danger-soft);color:var(--danger);cursor:pointer}
.drawer-public-link svg,.drawer-logout-button svg{width:1rem;height:1rem;flex:none}
body.has-drawer .bottom-nav{opacity:0;transform:translateY(110%);pointer-events:none}
body.has-drawer .app-header{box-shadow:none}

/* Compact + medium: top bar + drawer + bottom navigation. */
@media (max-width:959px){
    .app-context--member .app-sidebar,
    .app-context--merchant .app-sidebar,
    .app-context--manager .app-sidebar,
    .app-context--superadmin .app-sidebar{display:none}

    .app-context--member .app-shell,
    .app-context--merchant .app-shell,
    .app-context--manager .app-shell,
    .app-context--superadmin .app-shell{display:block}

    .app-context--member .app-header__inner,
    .app-context--merchant .app-header__inner,
    .app-context--manager .app-header__inner,
    .app-context--superadmin .app-header__inner{
        width:100%;min-height:calc(4.35rem + var(--safe-top));padding:.55rem .75rem;gap:.55rem;
        background:color-mix(in srgb,var(--surface) 94%,transparent)
    }
    .app-context--member .workspace-menu-button,
    .app-context--merchant .workspace-menu-button,
    .app-context--manager .workspace-menu-button,
    .app-context--superadmin .workspace-menu-button{
        width:2.8rem;height:2.8rem;display:grid;flex:none;border-color:var(--border);background:var(--surface-soft)
    }
    .brand--workspace-mobile{min-width:0;display:flex;flex:1 1 auto;gap:.55rem}
    .brand--workspace-mobile .brand-mark{width:2.55rem;height:2.55rem;border-radius:.8rem}
    .brand--workspace-mobile .brand-copy{min-width:0}
    .brand--workspace-mobile .brand-copy strong,.brand--workspace-mobile .brand-copy small{
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap
    }
    .brand--workspace-mobile .brand-copy strong{font-size:.96rem}
    .brand--workspace-mobile .brand-copy small{font-size:.67rem}
    .app-context--member .header-actions,
    .app-context--merchant .header-actions,
    .app-context--manager .header-actions,
    .app-context--superadmin .header-actions{margin-left:0;flex:none}
    .app-context--member .header-search,
    .app-context--merchant .header-search,
    .app-context--manager .header-search,
    .app-context--superadmin .header-search,
    .app-context--member .pwa-install,
    .app-context--merchant .pwa-install,
    .app-context--manager .pwa-install,
    .app-context--superadmin .pwa-install,
    .app-context--member .header-logout,
    .app-context--merchant .header-logout,
    .app-context--manager .header-logout,
    .app-context--superadmin .header-logout{display:none}
    .app-context--member .account-bridge,
    .app-context--merchant .account-bridge,
    .app-context--manager .account-bridge,
    .app-context--superadmin .account-bridge{min-height:2.8rem;padding:.18rem;border:0;background:transparent}
    .app-context--member .account-bridge__avatar,
    .app-context--merchant .account-bridge__avatar,
    .app-context--manager .account-bridge__avatar,
    .app-context--superadmin .account-bridge__avatar{width:2.55rem;height:2.55rem;border:1px solid color-mix(in srgb,var(--accent) 15%,var(--border))}
    .app-context--member .account-bridge__copy,
    .app-context--merchant .account-bridge__copy,
    .app-context--manager .account-bridge__copy,
    .app-context--superadmin .account-bridge__copy{display:none}
    .app-context--member .app-content,
    .app-context--merchant .app-content,
    .app-context--manager .app-content,
    .app-context--superadmin .app-content{padding-top:.9rem}
    .drawer__footer{display:block;box-shadow:0 -10px 26px rgba(23,34,31,.045)}

    .bottom-nav{
        z-index:55;min-height:calc(4.65rem + var(--safe-bottom));padding:.34rem .4rem calc(.3rem + var(--safe-bottom));
        border-top:1px solid color-mix(in srgb,var(--border) 85%,transparent);
        background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 -10px 30px rgba(23,34,31,.06);
        transition:opacity .18s ease,transform .2s ease
    }
    .bottom-nav__item{position:relative;min-height:3.7rem;padding:.28rem .1rem;border:0;border-radius:.8rem;background:transparent;font-size:.63rem;letter-spacing:-.01em;appearance:none;-webkit-appearance:none}
    .bottom-nav__item .nav-icon{width:1.22rem;height:1.22rem}
    .bottom-nav__item>span:not(.nav-icon){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.15}
    .bottom-nav__item .nav-count{position:absolute;top:.2rem;left:calc(50% + .45rem);min-width:1.15rem;height:1.15rem;padding:0 .25rem;display:grid;place-items:center;border:2px solid var(--surface);border-radius:999px;background:var(--danger);color:#fff;font-size:.58rem;font-weight:900;line-height:1;box-shadow:0 2px 8px rgba(23,34,31,.12)}
    .bottom-nav__item.is-active{background:transparent;color:var(--accent-strong)}
    .bottom-nav__item.is-active::before{
        content:"";position:absolute;top:.12rem;width:2rem;height:.18rem;border-radius:999px;background:var(--accent)
    }
}

@media (max-width:360px){
    .drawer-footer-actions{grid-template-columns:1fr}
}

/* Expanded + wide: persistent sidebar with independent navigation scroll. */
@media (min-width:960px){
    .app-context--member .app-shell,
    .app-context--merchant .app-shell,
    .app-context--manager .app-shell,
    .app-context--superadmin .app-shell{
        display:grid;grid-template-columns:var(--workspace-sidebar-compact) minmax(0,1fr);align-items:start
    }
    .app-context--member .app-sidebar,
    .app-context--merchant .app-sidebar,
    .app-context--manager .app-sidebar,
    .app-context--superadmin .app-sidebar{
        position:fixed;inset-block:0;inset-inline-start:0;top:0;z-index:45;
        width:var(--workspace-sidebar-compact);height:100dvh;max-height:100dvh;min-height:0;padding:.9rem .75rem;
        display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:.7rem;overflow:hidden;
        border-right:1px solid var(--border);background:color-mix(in srgb,var(--surface) 96%,var(--surface-soft))
    }
    .app-context--member .app-main-shell,
    .app-context--merchant .app-main-shell,
    .app-context--manager .app-main-shell,
    .app-context--superadmin .app-main-shell{grid-column:2;margin-left:0;min-width:0;min-height:100dvh}

    .app-sidebar__top,.app-sidebar__footer{display:block;min-width:0;min-height:0}
    .app-sidebar__brand{min-height:3.8rem;padding:.35rem;display:flex;align-items:center;gap:.65rem;border-radius:.85rem}
    .app-sidebar__brand:hover{background:var(--surface-soft)}
    .app-sidebar__brand .brand-mark{width:2.65rem;height:2.65rem;border-radius:.8rem}
    .app-sidebar__brand-copy{min-width:0;display:grid;line-height:1.13}
    .app-sidebar__brand-copy strong,.app-sidebar__brand-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .app-sidebar__brand-copy strong{font-size:.98rem}
    .app-sidebar__brand-copy small{margin-top:.18rem;color:var(--muted);font-size:.67rem}
    .app-sidebar__nav{
        min-width:0;min-height:0;height:auto;max-height:none;padding:.25rem .12rem .7rem;display:block;
        overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;
        scrollbar-gutter:stable;scrollbar-width:thin
    }
    .app-sidebar__nav .workspace-nav-group__label{display:block}
    .app-sidebar__item{
        position:relative;min-height:2.75rem;padding:.36rem .48rem;display:flex;align-items:center;gap:.5rem;
        border:1px solid transparent;border-radius:var(--workspace-nav-radius);color:var(--muted);font-size:.84rem;font-weight:780
    }
    .app-sidebar__item:hover{background:var(--surface-soft);color:var(--text)}
    .app-sidebar__item.is-active{
        border-color:color-mix(in srgb,var(--accent) 18%,var(--border));background:var(--accent-soft);color:var(--accent-strong)
    }
    .app-sidebar__item.is-active::before{
        content:"";position:absolute;left:-.15rem;top:.58rem;bottom:.58rem;width:.19rem;border-radius:999px;background:var(--accent)
    }
    .app-sidebar__item.is-active .workspace-nav-icon{background:color-mix(in srgb,var(--accent) 10%,transparent)}
    .app-sidebar__item.is-active .workspace-nav-arrow{display:block;color:var(--accent-strong)}
    .app-sidebar__footer{padding-top:.65rem;border-top:1px solid var(--border)}
    .workspace-public-link{
        min-height:2.55rem;padding:.48rem .55rem;display:flex;align-items:center;gap:.5rem;
        border-radius:.7rem;color:var(--muted);font-size:.76rem;font-weight:800
    }
    .workspace-public-link:hover{background:var(--surface-soft);color:var(--text)}
    .workspace-public-link svg{width:1rem;height:1rem;flex:none}
    .workspace-user-card{
        margin-top:.38rem;padding:.42rem;display:flex;align-items:center;gap:.35rem;
        border:1px solid var(--border);border-radius:.85rem;background:var(--surface)
    }
    .workspace-user-card__identity{min-width:0;display:flex;align-items:center;gap:.52rem;flex:1 1 auto}
    .workspace-user-card__avatar{
        width:2rem;height:2rem;display:grid;place-items:center;flex:none;border-radius:.62rem;
        background:var(--accent-soft);color:var(--accent-strong);font-size:.78rem;font-weight:950;overflow:hidden
    }
    .workspace-user-card__avatar img{width:100%;height:100%;object-fit:cover}
    .workspace-user-card__copy{min-width:0;display:grid;line-height:1.12}
    .workspace-user-card__copy strong,.workspace-user-card__copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .workspace-user-card__copy strong{font-size:.75rem}
    .workspace-user-card__copy small{margin-top:.15rem;color:var(--muted);font-size:.61rem}
    .workspace-user-card .workspace-logout-button{width:2rem;height:2rem;min-height:2rem;padding:0;border:0;background:transparent;color:var(--muted)}
    .workspace-user-card .workspace-logout-button span{display:none}
    .workspace-user-card .workspace-logout-button:hover{background:var(--danger-soft);color:var(--danger)}

    .brand--workspace-mobile{display:none}
    .workspace-header-identity{min-width:0;display:grid;line-height:1.12}
    .workspace-header-identity small{color:var(--muted);font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
    .workspace-header-identity strong{margin-top:.14rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.96rem}
    .workspace-menu-button{display:none}
    .bottom-nav{display:none}
    .app-context--member .account-bridge,
    .app-context--merchant .account-bridge,
    .app-context--manager .account-bridge,
    .app-context--superadmin .account-bridge,
    .app-context--member .header-logout,
    .app-context--merchant .header-logout,
    .app-context--manager .header-logout,
    .app-context--superadmin .header-logout{display:none}
    .app-context--member .app-footer,
    .app-context--merchant .app-footer,
    .app-context--manager .app-footer,
    .app-context--superadmin .app-footer{display:none}
    .app-context--member .app-header__inner,
    .app-context--merchant .app-header__inner,
    .app-context--manager .app-header__inner,
    .app-context--superadmin .app-header__inner,
    .app-context--member .app-content,
    .app-context--merchant .app-content,
    .app-context--manager .app-content,
    .app-context--superadmin .app-content{width:min(100% - 2rem,94rem)}
    .app-header.has-scroll{box-shadow:0 8px 24px rgba(23,34,31,.05)}
    .workspace-panel--sticky{top:calc(var(--header) + 1rem)}
}

@media (min-width:1280px){
    .app-context--member .app-shell,
    .app-context--merchant .app-shell,
    .app-context--manager .app-shell,
    .app-context--superadmin .app-shell{grid-template-columns:var(--workspace-sidebar) minmax(0,1fr)}
    .app-context--member .app-sidebar,
    .app-context--merchant .app-sidebar,
    .app-context--manager .app-sidebar,
    .app-context--superadmin .app-sidebar{width:var(--workspace-sidebar);padding-inline:.9rem}
    .app-sidebar__item{font-size:.88rem}
}

/* Shared content density remains composition-level, not role-specific patching. */
.workspace-header{
    overflow:hidden;border-color:color-mix(in srgb,var(--accent) 10%,var(--border));
    background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--accent-soft) 26%,var(--surface)))
}
.metric-card{min-width:0;box-shadow:0 5px 18px rgba(23,34,31,.035)}
.metric-card strong{letter-spacing:-.035em}
.responsive-table{scrollbar-gutter:stable}
.responsive-table th{white-space:nowrap}

@media (max-width:619px){
    .workspace-header{padding:1rem;border-radius:1rem}
    .workspace-header h1{font-size:clamp(1.55rem,9vw,2.05rem)}
    .workspace-header__meta{width:100%}
    .workspace-header__meta>.btn,.workspace-header__meta>form,.workspace-header__meta>form>.btn{width:100%}
    .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
    .metric-card{padding:.75rem;border-radius:.85rem}
    .metric-card strong{font-size:1.42rem}
    .workspace-panel{border-radius:.9rem}
    .app-footer{display:none}
}

@media (prefers-reduced-motion:reduce){
    .drawer__panel,.drawer__backdrop,.bottom-nav{transition:none!important}
}

/* ========================================================================
   MOBILE GESTURE CONTRACT V3.5
   - Pinch/cubit and browser zoom gestures are disabled on mobile view.
   - Single-finger vertical scrolling and native pull-to-refresh remain active.
   ======================================================================== */
@media (max-width:959px){
    html,body{
        touch-action:pan-x pan-y;
        overscroll-behavior-x:none;
        overscroll-behavior-y:auto!important;
        -webkit-text-size-adjust:100%;
        text-size-adjust:100%;
    }
    a,button,[role="button"],input,select,textarea,summary,label{
        touch-action:manipulation;
    }
    input,select,textarea{
        font-size:16px;
    }
}

/* Merchant mobile bottom navigation V4.19.9.2 */
@media (max-width: 959px) {
  body.app-context--merchant .bottom-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  body.app-context--merchant .bottom-nav__item {
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: var(--muted);
    font: inherit;
    line-height: 1.05;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.app-context--merchant button.bottom-nav__item {
    padding: .28rem .1rem;
  }
  body.app-context--merchant .bottom-nav__item > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .64rem;
    font-weight: 800;
  }
  body.app-context--merchant .bottom-nav__item.is-active {
    color: var(--accent-strong);
  }
  body.app-context--merchant .bottom-nav__item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
}


}


/* V105 — Scanner General as the primary mobile operation for Lapak. */
@media (max-width: 767px){
  body.app-context--merchant .bottom-nav__item.is-primary{
    color:var(--accent-strong);
    font-weight:800;
  }
  body.app-context--merchant .bottom-nav__item.is-primary .nav-icon{
    width:1.55rem;
    height:1.55rem;
    transform:translateY(-2px);
  }
  body.app-context--merchant .bottom-nav__item.is-primary::after{
    content:"";
    position:absolute;
    inset:.2rem .3rem auto;
    height:2.45rem;
    border:1px solid color-mix(in srgb,var(--accent-strong) 22%,transparent);
    background:color-mix(in srgb,var(--accent-soft) 78%,transparent);
    border-radius:1rem;
    z-index:-1;
  }
}
.scanner-general-map-v105{margin-bottom:1rem}
.scanner-general-types-v105{display:flex;flex-wrap:wrap;gap:.45rem}
.scanner-general-types-v105 span{display:inline-flex;align-items:center;min-height:2rem;padding:.35rem .65rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:.78rem;font-weight:750;color:var(--text)}