:root{
    --paper:#faf8f5;
    --khaki:#f5efe6;
    --cream:#faf8f5;
    --surface:#faf8f5;
    --sand:#f5efe6;
    --ink:#121212;
    --muted:#4a4036;
    --caption:#7d6b58;
    --line:#e8dfd3;
    --line-strong:rgba(56,35,25,.2);
    --on-paper:#121212;
    --on-paper-mute:#4a4036;
    --green:#121212;
    --green-dark:#382319;
    --green-soft:#efe7dc;
    --orange:#382319;
    --orange-soft:#efe7dc;
    --yellow:#382319;
    --gold:#382319;
    --gold-hover:#121212;
    --espresso:#382319;
    --serif:'Cormorant Garamond',Georgia,serif;
    --sans:'Plus Jakarta Sans',system-ui,sans-serif;
    --sidebar:280px;
    --shadow:0 1px 2px rgba(18,18,18,.06);
    --shop-ink:#121212;
    --shop-mute:#4a4036;
    --shop-line:#e8dfd3;
    --shop-paper:#faf8f5;
    --shop-gold:#382319;
    --radius:18px;
    --radius-sm:12px;
}
*{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth}
body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
::selection{background:#e8dfd3;color:#121212}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#faf8f5}
::-webkit-scrollbar-thumb{background:#dfd4c3;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#c4b59d}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border-radius:var(--radius-sm)}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.muted{color:var(--muted)}
.eyebrow{
    margin:0 0 8px;
    color:var(--caption);
    font-size:11px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
}
h1,h2,h3{letter-spacing:-.02em;font-weight:500}
.button,.icon-button,.row-action,.filter-tab{
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow);
}
.text-action{
    border-radius:0;
    box-shadow:none;
}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:0 22px;
    border:1px solid var(--ink);
    background:var(--paper);
    color:var(--ink);
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    transition:background .18s,color .18s,border-color .18s;
}
.button:hover{transform:none;background:#eae2d3;color:var(--ink)}
.button-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.button-primary:hover{background:var(--espresso);color:var(--paper)}
.button-dark{background:var(--espresso);color:var(--paper);border-color:var(--espresso)}
.button-dark:hover{background:var(--ink);color:var(--paper)}
.icon-button{
    width:36px;
    height:36px;
    border:1px solid transparent;
    background:transparent;
    color:var(--ink);
    box-shadow:none;
    transition:transform .28s cubic-bezier(.22,.7,.2,1),background .18s;
}
.icon-button:hover{transform:translateY(-3px);background:#efe7dc}
.icon-button.is-press{animation:iconFloat .48s cubic-bezier(.22,.7,.2,1) both}
.text-action{
    padding:0;
    border:0;
    background:none;
    color:var(--ink);
    font-size:13px;
    font-weight:650;
    text-decoration:underline;
    text-underline-offset:3px;
}
.text-action:hover{color:var(--ink);transform:none}
.form-error{color:#9b2c1f;font-size:14px}

/* Login */
.login-screen{min-height:100dvh;display:grid;grid-template-columns:1.05fr .95fr;background:var(--paper)}
.login-art{
    position:relative;
    display:flex;
    min-height:100dvh;
    flex-direction:column;
    justify-content:space-between;
    padding:40px 10%;
    background:#14110f;
    color:#f6efe6;
    overflow:hidden;
}
.login-art:before,.login-art:after{display:none}
.login-slides,.login-art-veil{position:absolute;inset:0}
.login-slides{z-index:0;overflow:hidden}
.login-slides-track{
    display:flex;
    height:100%;
    width:100%;
    transform:translateX(0);
    transition:transform .85s cubic-bezier(.45,0,.15,1);
    will-change:transform;
}
.login-slides-track.is-jumping{transition:none}
.login-slide{
    position:relative;
    flex:0 0 100%;
    width:100%;
    height:100%;
    background:#1a1512 center/cover no-repeat;
}
.login-art-veil{
    z-index:1;
    background:linear-gradient(180deg,rgba(12,10,8,.42) 0%,rgba(12,10,8,.18) 38%,rgba(12,10,8,.78) 100%);
    pointer-events:none;
}
.login-slide-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px}
.login-slide-nav{display:flex;align-items:center;gap:8px}
.login-slide-dot{
    width:28px;
    height:3px;
    padding:0;
    border:0;
    background:rgba(246,239,230,.35);
}
.login-slide-dot.is-active{background:var(--paper)}
.login-slide-dot:hover{background:rgba(246,239,230,.7)}
.login-brand,
.login-art-copy,
.login-location,
.login-slide-foot{
    position:relative;
    z-index:2;
}
.login-brand{
    width:auto!important;
    height:auto!important;
    gap:12px;
    font-size:13px;
    letter-spacing:.16em;
}
.login-secret-dot{
    position:relative;
    display:inline;
    margin:0;
    padding:0;
    border:0;
    background:none;
    color:inherit;
    font:inherit;
    line-height:inherit;
    letter-spacing:inherit;
    cursor:default;
    vertical-align:baseline;
}
.login-secret-dot::after{
    content:'';
    position:absolute;
    inset:-12px -10px -10px -8px;
}
.login-brand .brand-mark.login-secret-hit{
    padding:0;
    color:inherit;
    background:transparent;
    cursor:default;
}
.login-secret-dot:focus,
.login-secret-dot:focus-visible,
.login-brand .brand-mark.login-secret-hit:focus,
.login-brand .brand-mark.login-secret-hit:focus-visible{
    outline:none;
}
.login-brand .brand-mark,
.sidebar-brand .brand-mark{
    display:grid;
    width:32px;
    height:32px;
    place-items:center;
    border:1px solid currentColor;
    border-radius:50%;
    font:600 16px var(--serif);
}
.login-art-copy .eyebrow{color:#dfd4c3}
.login-art-copy h1{
    margin:14px 0 16px;
    font:500 68px/.92 var(--serif);
    letter-spacing:-.03em;
}
.login-art-copy>p:last-child{color:rgba(246,239,230,.68);font-size:16px;line-height:1.6}
.login-location{color:rgba(246,239,230,.45);font-size:11px;letter-spacing:.14em}
.login-form-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 48px;background:var(--paper);color:var(--ink)}
.login-form,.login-chooser,.role-switch{width:min(100%,560px)}
.login-form h2,.login-chooser h2{margin:0 0 8px;font:500 40px/1.05 var(--serif);color:var(--ink)}
.login-form>.muted,.login-chooser>.muted{margin:0 0 24px;color:var(--muted);font-size:15px}
.login-form label{margin:16px 0 6px;font-size:13px;color:var(--ink)}
.login-form input,.app-dialog input,.app-dialog select,.search-wrap input{
    min-height:48px;
    border:1px solid var(--line);
    background:transparent;
    color:var(--ink);
    border-radius:var(--radius-sm);
}
.login-form input:focus,.app-dialog input:focus,.app-dialog select:focus,.search-wrap input:focus{
    border-color:var(--ink);
    outline:none;
}
.role-switch{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 22px;padding:0;background:transparent;border:1px solid var(--ink);border-radius:var(--radius-sm);overflow:hidden}
.role-switch button{min-height:52px;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.role-switch button.active{background:var(--ink);color:var(--paper)}
.login-submit{width:100%;margin-top:20px;min-height:50px}
.login-switch{margin-top:16px;color:var(--muted);font-size:15px}
.login-switch button{color:var(--espresso);text-decoration:underline;text-underline-offset:3px;font-size:15px}
.login-foot{margin-top:36px;color:var(--caption);font-size:12px;letter-spacing:.08em}
.login-screen .login-form .eyebrow{margin-bottom:12px;font-size:12px;letter-spacing:.2em;color:var(--caption)}
.login-form-wrap .muted-block{color:var(--muted)}
.login-form-wrap .text-action{color:var(--espresso)}
.login-screen .login-form h2{margin:0 0 14px;font:500 52px/1.05 var(--serif);letter-spacing:-.03em}
.login-screen .login-form>.muted{margin:0 0 32px;font-size:18px;line-height:1.55}
.login-screen .login-form label:not(.login-field){margin:22px 0 8px;font-size:16px;font-weight:650}
.login-screen .login-form input,
.login-screen .login-form select{min-height:58px;padding:0 16px;font-size:18px}
.login-screen .login-field{
    display:flex;
    flex-direction:column;
    gap:8px;
    width:100%;
    margin:0 0 14px;
    padding:14px 18px 12px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#f5efe6;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.login-screen .login-field:focus-within{
    border-color:var(--ink);
    background:#faf8f5;
    box-shadow:0 0 0 4px rgba(56,35,25,.08);
}
.login-screen .login-field>span{
    color:var(--caption);
    font-size:11px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.login-screen .login-form .login-field input,
.login-screen .login-form .login-field select{
    min-height:34px;
    padding:0;
    border:0;
    background:transparent;
    border-radius:0;
    font-size:18px;
}
.login-screen .login-form .login-field input::placeholder{
    color:#b09a86;
    font-weight:400;
}
.login-screen .login-form .login-field input:focus,
.login-screen .login-form .login-field select:focus{
    outline:none;
    border:0;
    box-shadow:none;
}
.login-screen .login-form .password-field{
    display:block;
    position:relative;
    width:100%;
}
.login-screen .login-form .password-field input{width:100%;padding-right:46px}
.login-screen .login-form .see-password{
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:transparent;
    color:var(--caption);
}
.login-screen .login-form .see-password:hover{
    background:#efe7dc;
    color:var(--ink);
}
.login-screen .login-form .login-submit,
.login-screen .login-form .button{min-height:58px;font-size:17px}
.login-screen .login-form .login-submit{margin-top:28px}
.login-screen .login-form .login-foot{margin-top:40px;font-size:15px}
.login-screen .muted-block{margin-top:18px;font-size:15px}

/* Admin shell */
.app-shell{background:var(--paper)}
.sidebar{
    width:var(--sidebar);
    padding:28px 18px 18px;
    background:var(--paper);
    border-right:1px solid var(--line);
}
.sidebar-brand{
    display:flex!important;
    width:100%!important;
    height:auto!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:12px!important;
    padding:4px 6px!important;
    border:0!important;
    background:transparent!important;
}
.sidebar-brand .brand-mark{color:var(--on-paper)!important;border-color:var(--on-paper)!important}
.sidebar-brand>span:last-child{display:block;flex:1;min-width:0}
.sidebar-brand strong{
    display:block!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    color:var(--on-paper)!important;
    font-size:16px!important;
    font-weight:700!important;
    letter-spacing:.14em!important;
    line-height:1.3!important;
}
.sidebar-brand small{
    display:block!important;
    margin:3px 0 0!important;
    padding:0!important;
    background:transparent!important;
    color:var(--on-paper-mute)!important;
    font-size:13px!important;
    font-weight:500!important;
    letter-spacing:.04em!important;
}
.shop-tag{
    margin:22px 6px 20px!important;
    padding:0!important;
    min-height:0!important;
    background:transparent!important;
    color:var(--on-paper-mute)!important;
    font-size:13px!important;
    letter-spacing:.12em!important;
}
.shop-tag .live-dot{display:none}
.nav-label{
    margin:0 6px 10px;
    color:var(--on-paper-mute);
    font-size:14px;
    letter-spacing:.14em;
}
.nav-item{
    display:flex;
    align-items:center;
    gap:10px;
    height:52px;
    padding:0 10px;
    border:0;
    background:transparent;
    color:var(--on-paper-mute);
    font-size:17px;
    font-weight:550;
}
.nav-icon{
    display:grid;
    flex:0 0 22px;
    width:22px;
    height:22px;
    place-items:center;
}
.nav-icon svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linejoin:round;
    stroke-linecap:round;
}
.nav-title{display:inline-block;transform:translateX(0);transition:transform .32s cubic-bezier(.22,.7,.2,1)}
.nav-icon{transition:transform .32s cubic-bezier(.22,.7,.2,1)}
.nav-item:hover{background:transparent;color:var(--on-paper)}
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon{transform:translateY(-4px)}
.nav-item:hover .nav-title,
.nav-item.active .nav-title{transform:translateX(6px)}
.nav-item.is-press .nav-icon{animation:iconFloat .48s cubic-bezier(.22,.7,.2,1) both}
.nav-item.is-press .nav-title{animation:titleNudge .48s cubic-bezier(.22,.7,.2,1) both}
.nav-item.active{
    background:transparent;
    color:var(--on-paper);
    font-weight:700;
    box-shadow:inset 2px 0 0 var(--ink);
}
.nav-count{color:var(--on-paper);font-size:12px}
.user-chip{padding:16px 4px 12px;border-top:1px solid var(--line)}
.user-avatar{
    width:34px;
    height:34px;
    background:var(--ink);
    color:var(--paper);
    font:500 16px var(--serif);
}
.user-meta strong{font-size:13px;color:var(--on-paper)}
.user-meta small{color:var(--on-paper-mute);font-size:12px}
.admin-signout{
    width:100%;
    min-height:42px;
    margin:4px 0 8px;
    border:1px solid var(--on-paper);
    background:transparent;
    color:var(--on-paper);
    font-size:13px;
}
.admin-signout:hover{background:var(--on-paper);color:var(--paper)}
.sidebar-version{margin:8px 4px 0;color:var(--on-paper-mute);font-size:10px;letter-spacing:.12em}
.main-content{margin-left:var(--sidebar);background:var(--paper)}
.topbar{
    height:68px;
    padding:0 32px;
    background:rgba(250,248,245,.92);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(12px);
}
.breadcrumb{color:var(--on-paper-mute);font-size:15px;letter-spacing:.12em}
.breadcrumb strong{color:var(--on-paper)}
.today-label{color:var(--on-paper-mute);font-size:13px}
#new-order-button{min-height:40px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.page-wrap{max-width:1280px;padding:36px 32px 72px}
.page-heading{align-items:flex-end;margin-bottom:28px}
.page-heading h1{
    margin:0 0 8px;
    font:500 56px/1.02 var(--serif)!important;
    letter-spacing:-.03em;
    color:var(--on-paper);
}
.page-heading .muted{max-width:52ch;font-size:15px;line-height:1.55;color:var(--on-paper-mute)}
.date-stamp{
    padding:10px 14px;
    border:1px solid var(--line);
    background:var(--khaki);
    color:var(--muted);
    font-size:12px;
    font-weight:650;
    letter-spacing:.08em;
}
.stats-grid{gap:12px;margin-bottom:18px}
.stat-card,.report-stat{
    min-height:0;
    padding:22px 22px 20px;
    background:transparent;
    border:1px solid var(--line-strong);
    box-shadow:none;
}
.stat-featured{background:#171412;color:#f6efe6;border-color:#171412}
.stat-top{
    width:auto;
    height:auto;
    justify-content:space-between;
    color:var(--muted);
    font-size:11px;
    letter-spacing:.12em;
    background:transparent;
}
.stat-featured .stat-top,.stat-featured>small,.stat-featured .stat-foot{color:rgba(246,239,230,.62)}
.stat-card>strong,.stat-featured>strong,.report-stat strong{
    display:block;
    margin:14px 0 6px;
    font:500 34px/1 var(--serif)!important;
    letter-spacing:-.03em;
}
.stat-card>small{color:var(--muted);font-size:13px}
.stat-symbol{display:none}
.stat-rule{background:rgba(243,195,74,.35)}
.stat-foot{font-size:11px;letter-spacing:.1em}
.stat-foot b{color:#fff;font-size:13px}
.stat-mini{display:none}
.panel,.shop-form,.table-panel,.sales-panel,.queue-panel,.recent-panel,.report-chart-panel,.popular-panel,.daily-table-panel{
    background:var(--khaki);
    border:1px solid var(--line);
    box-shadow:none;
}
.panel{padding:22px}
.sales-panel,.queue-panel,.recent-panel,.report-chart-panel,.popular-panel,.daily-table-panel{padding:22px}
.panel-heading h2{font:500 24px/1.1 var(--serif)}
.panel-meta{color:var(--muted);font-size:11px;letter-spacing:.1em}
.queue-row{border-top:1px solid var(--line);padding:12px 0}
.queue-order{color:var(--ink);font-size:13px}
.queue-person{color:var(--muted);font-size:13px}
.empty-note{color:var(--muted);font-size:14px}
th{
    padding:12px 14px;
    background:var(--cream);
    color:var(--muted);
    font-size:11px;
    letter-spacing:.1em;
    border-top:0;
}
td,td strong{padding:14px;font-size:14px;color:var(--ink)}
td{border-top:1px solid var(--line)}
.order-number{color:var(--ink)}
.sub-cell{color:var(--muted);font-size:12px}
.status-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 10px;
    border-radius:999px;
    background:var(--cream);
    color:var(--muted);
    font-size:11px;
    font-weight:650;
    letter-spacing:.02em;
}
.status-pending{background:#f4efe4;color:#8a7040}
.status-confirmed{background:#eef3f0;color:#3d5a4c}
.status-ready{background:#e8f0ea;color:#2f5d3c}
.status-preparing{background:#fff6d8;color:#7a5a12}
.status-out_for_delivery{background:#eef3f8;color:#35536d}
.status-delivered{background:#171412;color:#f6efe6}
.status-cancelled{background:#f7ece9;color:#9b2c1f}
.row-action{
    min-height:34px;
    padding:0 10px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    font-size:12px;
}
.toolbar{margin-bottom:16px}
.search-wrap{border:1px solid var(--line);background:#fff}
.search-wrap input{min-height:42px;font-size:14px}
.filter-tabs{gap:0;padding:0;background:transparent;border:1px solid var(--line)}
.filter-tab{
    min-height:38px;
    padding:0 14px;
    background:transparent;
    color:var(--muted);
    font-size:13px;
    box-shadow:none;
}
.filter-tab.selected{background:var(--ink);color:#fff;font-weight:700}
.delivery-summary{gap:12px}
.delivery-kpi{
    display:grid;
    gap:6px;
    padding:18px 20px;
    border:1px solid var(--line);
    background:var(--khaki);
    box-shadow:none;
}
.delivery-kpi:hover,.delivery-kpi.selected{border-color:var(--ink);background:var(--khaki);box-shadow:none}
.delivery-kpi strong{font:500 28px/1 var(--serif)}
.delivery-kpi span{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.report-stat span{color:var(--muted);font-size:11px;letter-spacing:.1em}
.shop-form{padding:22px;background:var(--khaki);border:1px solid var(--line)}
.shop-form-head h2{font:500 24px var(--serif)}
.shop-form input,.shop-form select,.customer-profile input,.customer-cart-panel input,.customer-cart-panel select{
    min-height:46px;
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
}
.shop-form input:focus,.shop-form select:focus,.customer-profile input:focus{
    border-color:var(--ink);
}
.customer-profile,.store-pin{
    background:var(--khaki);
    border:1px solid var(--line);
}
.customer-avatar{background:var(--gold);color:#171412}
.promo-chip,.rating-row button{
    border:1px solid var(--line);
    background:var(--khaki);
    border-radius:var(--radius-sm);
}
button.promo-chip:hover,button.promo-chip.selected{
    border-color:var(--ink);
    background:var(--cream);
    box-shadow:none;
}
.fulfillment-option span{border:1px solid var(--line);background:#fff}
.fulfillment-option input:checked+span,.fulfillment-option.selected span{
    border-color:var(--ink);
    background:var(--cream);
    box-shadow:none;
}

/* Dialogs */
.app-dialog{border:1px solid var(--line);box-shadow:none;border-radius:var(--radius);background:var(--khaki)}
.app-dialog::backdrop{background:rgba(23,20,18,.45);backdrop-filter:blur(4px)}
.dialog-head h2{font:500 28px var(--serif)}
.catalog-item{border:1px solid var(--line);border-radius:var(--radius-sm)}
.catalog-item:hover{border-color:var(--ink);background:var(--cream)}
.catalog-thumb{
    width:44px;
    height:44px;
    flex:0 0 44px;
    object-fit:cover;
    background:var(--cream);
}
.segmented-control{padding:0;background:transparent;border:1px solid var(--ink);border-radius:var(--radius-sm);overflow:hidden}
.segmented-control input:checked+span{background:var(--ink);color:#fff}
.toast{background:#171412;color:#fff;box-shadow:none;border-radius:var(--radius-sm)}
.toast.error{background:#9b2c1f}

/* Shared shop / rider */
.shop-shell,.rider-shell{min-height:100dvh;padding:0;background:var(--paper);font-family:var(--sans)}
.shop-wrap{width:min(1180px,100%);margin:0 auto;padding:0 22px 72px}
.shop-nav{
    position:sticky;
    top:0;
    z-index:8;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    height:80px;
    margin:0 -22px 8px;
    padding:0 22px;
    background:rgba(250,248,245,.9);
    border-bottom:1px solid rgba(232,223,211,.8);
    backdrop-filter:blur(12px);
    color:var(--ink);
}
.shop-brand{display:flex;align-items:center;gap:10px;margin:0;padding:0;border:0;background:transparent;color:inherit;font:500 22px/1 var(--serif);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.shop-brand span{display:grid;width:28px;height:28px;place-items:center;border:1px solid currentColor;border-radius:50%;font:600 14px var(--serif);transition:transform .32s cubic-bezier(.22,.7,.2,1)}
.shop-brand:hover span,.shop-brand.is-press span{transform:translateY(-3px)}
.shop-brand.is-press span{animation:iconFloat .48s cubic-bezier(.22,.7,.2,1) both}
.shop-desk-tabs{display:flex;align-items:center;gap:2px}
.shop-desk-tabs button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:40px;
    padding:0 12px;
    border:0;
    background:transparent;
    color:var(--muted);
    font-size:13px;
    font-weight:500;
}
.shop-desk-tabs button.is-active{color:var(--ink);font-weight:600;box-shadow:inset 0 -1.5px 0 var(--ink)}
.shop-desk-tabs .nav-icon{
    display:grid;
    flex:0 0 18px;
    width:18px;
    height:18px;
    place-items:center;
    transition:transform .32s cubic-bezier(.22,.7,.2,1);
}
.shop-desk-tabs .nav-icon svg{width:18px;height:18px}
.shop-desk-tabs .nav-title{display:inline-block;transform:translateX(0);transition:transform .32s cubic-bezier(.22,.7,.2,1)}
.shop-desk-tabs button:hover .nav-icon,
.shop-desk-tabs button.is-active .nav-icon{transform:translateY(-4px)}
.shop-desk-tabs button:hover .nav-title,
.shop-desk-tabs button.is-active .nav-title{transform:translateX(6px)}
.shop-desk-tabs button.is-press .nav-icon{animation:iconFloat .48s cubic-bezier(.22,.7,.2,1) both}
.shop-desk-tabs button.is-press .nav-title{animation:titleNudge .48s cubic-bezier(.22,.7,.2,1) both}
.shop-cart-chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.shop-back{
    display:inline-flex;
    margin:0 0 8px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--ink);
    font-size:13px;
    font-weight:650;
    text-decoration:underline;
    text-underline-offset:3px;
}
.shop-cart-head{display:grid;gap:4px;align-items:start}
.saved-address-box{margin:0 0 12px}
.saved-address-card{
    display:grid;
    gap:4px;
    width:100%;
    padding:14px 16px;
    border:1px solid var(--line);
    background:var(--khaki);
    text-align:left;
}
.saved-address-card:hover{border-color:var(--ink)}
.saved-address-card strong{font:500 17px/1.3 var(--serif)}
.saved-address-card small{color:var(--muted);font-size:12px}
.save-address-row{margin:8px 0 14px}
.save-address-row .button{width:100%}
.profile-address-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.profile-address-actions .button{margin-top:0;flex:1;min-height:44px}
#customer-portal[data-shop-view="menu"] .shop-pane:not([data-shop-pane="menu"]),
#customer-portal[data-shop-view="bag"] .shop-pane:not([data-shop-pane="bag"]),
#customer-portal[data-shop-view="orders"] .shop-pane:not([data-shop-pane="orders"]),
#customer-portal[data-shop-view="account"] .shop-pane:not([data-shop-pane="account"]),
#rider-portal[data-rider-view="run"] .shop-pane:not([data-rider-pane="run"]),
#rider-portal[data-rider-view="open"] .shop-pane:not([data-rider-pane="open"]),
#rider-portal[data-rider-view="done"] .shop-pane:not([data-rider-pane="done"]){display:none!important}
#customer-portal .shop-layout,
#customer-portal[data-shop-view="menu"] .shop-layout,
#customer-portal[data-shop-view="bag"] .shop-layout,
#customer-portal[data-shop-view="orders"] .shop-layout,
#customer-portal[data-shop-view="account"] .shop-layout{grid-template-columns:1fr}
#customer-portal[data-shop-view="bag"] .customer-cart-panel{
    width:min(560px,100%);
    margin:16px auto 0;
    border:1px solid var(--line);
}
.shop-text-btn{
    min-height:40px;
    padding:0 4px;
    border:0;
    background:transparent;
    color:var(--ink);
    text-decoration:underline;
    text-underline-offset:3px;
    box-shadow:none;
}
.shop-text-btn:hover{
    background:transparent;
    color:var(--espresso);
    transform:none;
}
.shop-signout{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:40px;
    padding:0 16px;
    border:1px solid var(--line-strong);
    background:#efe7dc;
    color:var(--ink);
    border-radius:999px;
    box-shadow:none;
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    text-decoration:none;
    transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.shop-signout svg{
    width:15px;
    height:15px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.shop-signout:hover{
    background:var(--ink);
    border-color:var(--ink);
    color:var(--paper);
    transform:translateY(-1px);
}
.shop-hero{display:grid;gap:10px;margin:0 0 28px;padding:32px 0 4px;color:var(--ink)}
.shop-hero h1{margin:0;font:500 48px/.95 var(--serif);letter-spacing:-.03em}
.shop-hero p{margin:0;max-width:46ch;color:var(--muted);font-size:16px;font-weight:300}
.shop-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin:0 0 28px;
    background:transparent;
    border:0;
}
.shop-stat{padding:18px 20px;background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius)}
.shop-stat span{display:block;color:var(--caption);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.shop-stat strong{display:block;margin-top:8px;font:500 28px/1 var(--serif)}
.shop-section,.customer-menu-panel,.customer-cart-panel{
    border:1px solid var(--line-strong);
    background:transparent;
    padding:22px;
    box-shadow:none;
    border-radius:var(--radius);
}
.shop-notice{margin-bottom:18px;padding:16px 18px;border:1px solid var(--line);background:var(--sand)}
.shop-menu-head,.shop-cart-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 16px}
.shop-cart-head{display:grid;align-items:start;justify-content:stretch;gap:4px}
.shop-menu-head h2,.shop-cart-head h2{margin:0;font:500 44px/1 var(--serif);display:inline-block}
.shop-menu-head h2.is-nudge,.shop-cart-head h2.is-nudge,.rider-hello h1.is-nudge{animation:headingShift .5s cubic-bezier(.22,.7,.2,1) both}
#customer-portal .shop-menu-head h2,
#rider-portal .shop-menu-head h2{color:var(--ink)}
#customer-portal .shop-menu-head .muted,
#rider-portal .shop-menu-head .muted{color:var(--muted)}
.shop-hero .eyebrow{color:var(--caption)}
.rider-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rider-map-card{margin-bottom:18px}
.rider-map-toolbar{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.rider-map-toolbar label,.admin-map-toolbar label{display:grid;gap:6px;font-size:13px;font-weight:650}
.rider-map-toolbar select,#admin-map-order,#rider-map-order{
    min-width:min(100%,280px);
    min-height:44px;
    padding:0 12px;
    border:1px solid var(--line);
    background:#fff;
}
.rider-order-card{padding:16px;border:1px solid var(--line);background:var(--khaki)}
.rider-order-foot .button{min-height:40px}
.cash-drawer{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:end;
    margin-bottom:18px;
    padding:20px 22px;
    border:1px solid var(--line);
    background:var(--khaki);
}
.cash-drawer strong{display:block;margin:4px 0 6px;font:500 28px/1 var(--serif)}
#cash-count-form{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
#cash-count-form label{display:grid;gap:6px;font-size:13px;font-weight:650}
#cash-count-form input{min-height:44px;padding:0 12px;border:1px solid var(--line);background:#fff}
.admin-map-card{margin-bottom:16px;padding:22px;background:var(--khaki);border:1px solid var(--line)}
.admin-map-toolbar{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}

.app-shell .page-wrap{max-width:1520px;padding:40px 36px 80px}
.app-shell .page-heading{margin-bottom:32px}
.app-shell .stats-grid,.app-shell .dashboard-grid,.app-shell .reports-grid{gap:18px}
.app-shell .stat-card,
.app-shell .report-stat{
    min-height:188px;
    padding:32px 30px 28px;
}
.app-shell .stat-card>strong,
.app-shell .stat-featured>strong,
.app-shell .report-stat strong{
    margin:18px 0 8px;
    font:500 42px/1 var(--serif)!important;
}
.app-shell .stat-card>small,
.app-shell .stat-featured>small{font-size:15px}
.app-shell .stat-top,.app-shell .report-stat span{font-size:12px}
.app-shell .stat-foot{font-size:12px}
.app-shell .cash-drawer{gap:22px;margin-bottom:22px;padding:28px 32px}
.app-shell .cash-drawer strong{margin:8px 0 8px;font:500 36px/1 var(--serif)}
.app-shell #cash-count-form input{min-height:50px;font-size:16px}
.app-shell .shop-notice,
.app-shell .panel,
.app-shell .shop-form,
.app-shell .sales-panel,
.app-shell .queue-panel,
.app-shell .recent-panel,
.app-shell .report-chart-panel,
.app-shell .popular-panel,
.app-shell .daily-table-panel,
.app-shell .admin-map-card,
.app-shell .table-panel{
    padding:32px;
}
.app-shell .sales-panel,
.app-shell .queue-panel{min-height:360px}
.app-shell .panel-heading h2,
.app-shell .shop-form-head h2{font:500 28px/1.1 var(--serif)}
.app-shell .chart-wrap{height:240px;margin-top:18px}
.app-shell .report-chart-wrap{height:300px;margin-top:18px}
.app-shell .queue-row{padding:16px 0}
.app-shell .queue-order,.app-shell .queue-person{font-size:15px}
.app-shell th{padding:16px 18px;font-size:12px}
.app-shell td,
.app-shell td strong{padding:18px;font-size:16px}
.app-shell .toolbar{margin-bottom:20px}
.app-shell .search-wrap input{min-height:48px;font-size:15px}
.app-shell .filter-tab{min-height:44px;padding:0 18px;font-size:14px}
.app-shell .delivery-summary{gap:16px;margin-bottom:20px}
.app-shell .delivery-kpi{min-height:120px;padding:26px 28px}
.app-shell .delivery-kpi strong{font:500 36px/1 var(--serif)}
.app-shell .delivery-kpi span{font-size:13px}
.app-shell .shop-form input,
.app-shell .shop-form select{min-height:52px;font-size:16px}
.app-shell .row-action{min-height:40px;padding:0 14px;font-size:13px}
.app-shell .admin-route-map{height:400px}

@media(max-width:1100px){
    :root{--sidebar:220px}
    .login-art-copy h1{font-size:52px}
    .page-wrap{padding:28px 22px 56px}
    .app-shell .page-wrap{padding:32px 24px 64px}
    .app-shell .stat-card,.app-shell .report-stat{min-height:160px;padding:24px}
}
@media(max-width:900px){
    .shop-stats,.rider-columns{grid-template-columns:1fr}
    .shop-hero h1{font-size:36px}
}
@media(max-width:820px){
    .login-screen{grid-template-columns:1fr}
    .login-art{min-height:260px;padding:24px 22px}
    .login-art-copy h1{font-size:40px}
    .main-content{margin-left:0}
    .topbar{padding:0 16px}
    .page-wrap{padding:22px 16px 48px}
    .app-shell .page-wrap{padding:22px 16px 48px}
    .app-shell .panel,.app-shell .shop-form,.app-shell .sales-panel,.app-shell .queue-panel,.app-shell .recent-panel,.app-shell .table-panel,.app-shell .admin-map-card{padding:22px}
}
@media(max-width:700px){
    .login-art{min-height:220px;padding:16px}
    .login-art-copy{display:none}
    .login-form-wrap{padding:24px 16px 36px;align-items:stretch}
    .login-form,.role-switch{width:100%}
    .login-screen .login-form h2{font-size:40px}
    .login-screen .login-form>.muted{font-size:16px}
    .login-screen .role-switch button{min-height:50px}
    .shop-wrap{padding:0 16px 48px}
    .shop-nav{margin:0 -16px 8px;padding:0 16px;height:64px}
    .shop-hero{padding-top:12px}
    .shop-hero h1{font-size:32px}
    .shop-stats{grid-template-columns:1fr 1fr}
    .page-heading h1{font-size:40px!important}
    .stats-grid{grid-template-columns:1fr 1fr}
    .rider-order-foot .button{width:100%;margin-left:0}
}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.shop-brand-block{min-width:0}
.shop-store-line{margin:6px 0 0;color:var(--caption);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.shop-mobile-hi{display:none;margin:4px 0 10px;font:500 22px/1.1 var(--serif);color:var(--ink)}
.shop-search{display:block;margin:0 0 12px}
.shop-search input{
    width:100%;
    min-height:48px;
    padding:0 18px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    font:500 16px/1 var(--sans);
}
.shop-cats{display:flex;gap:6px;overflow-x:auto;margin:0 0 18px;padding:4px;background:#eae2d3;scrollbar-width:none}
.shop-cats::-webkit-scrollbar{display:none}
.shop-cat{
    flex:0 0 auto;
    min-height:36px;
    padding:0 16px;
    border:0;
    background:transparent;
    color:var(--muted);
    font-size:12px;
    font-weight:500;
    letter-spacing:.04em;
}
.shop-cat.is-active{background:var(--paper);border-color:transparent;color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.shop-card-media{position:relative}
.shop-card-plus{display:none}
.shop-tabbar,.shop-account-signout{display:none}
#customer-pin-map,
.customer-google-map,
#store-map-frame.store-map{
    display:block;
    width:100%;
    height:220px;
    margin-top:8px;
    border:1px solid var(--line);
    background:#e4ece0;
}
#customer-pin-map[hidden],
.shop-map[hidden]{
    display:none !important;
}
.shop-map{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
}
.shop-map-badge{
    position:absolute;
    top:10px;
    bottom:auto;
    left:10px;
    z-index:500;
    pointer-events:none;
    padding:5px 10px;
    border-radius:999px;
    background:rgba(251,246,240,.94);
    color:#6b3e2e;
    font:650 11px/1 var(--sans);
    letter-spacing:.04em;
    text-transform:uppercase;
    box-shadow:0 6px 16px rgba(58,46,36,.12);
}
.shop-map-canvas,
.shop-map .in-app-map{
    width:100%;
    height:100%;
}
.shop-map iframe,
.google-map-frame{
    display:block;
    width:100%;
    height:100%;
    border:0;
    background:#e8eef4;
}
.shop-map-pin{
    background:none !important;
    border:0 !important;
}
.shop-map-pin span{
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    border-radius:50%;
    color:#fff;
    font:700 11px/1 var(--sans);
    box-shadow:0 8px 16px rgba(58,46,36,.28);
}
.shop-map-pin i{
    display:block;
    width:10px;
    height:10px;
    margin:-3px auto 0;
    transform:rotate(45deg);
    border-radius:0 0 2px 0;
}
.shop-map-pin.is-cafe span,.shop-map-pin.is-cafe i{background:#6b3e2e}
.shop-map-pin.is-drop span,.shop-map-pin.is-drop i{background:#c45c26}
.shop-map-pin.is-rider span,.shop-map-pin.is-rider i{background:#2f6f4e}
.rider-live-map .shop-map-badge,
#rider-portal .shop-map-badge{
    top:auto;
    bottom:10px;
}
.customer-order-card .shop-map{
    height:220px;
    margin-top:10px;
    border-radius:var(--radius);
}

@media(max-width:820px){
    .shop-wide-only{display:none!important}
    .shop-mobile-hi{display:block}
    .shop-search input,.shop-cat{border-radius:999px}
    .shop-tabbar{
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:30;
        height:calc(64px + env(safe-area-inset-bottom));
        padding:6px 4px env(safe-area-inset-bottom);
        background:#fff;
        border-top:1px solid var(--line);
    }
    .shop-tabbar button{
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        border:0;
        background:transparent;
        color:#8a8078;
        font-size:10px;
        font-weight:750;
        letter-spacing:.08em;
        text-transform:uppercase;
    }
    .shop-tabbar button.is-active{color:#171412}
    .shop-tabbar svg{width:22px;height:22px;transition:transform .32s cubic-bezier(.22,.7,.2,1)}
    .shop-tabbar .nav-title{display:block;transition:transform .32s cubic-bezier(.22,.7,.2,1)}
    .shop-tabbar button:hover svg,
    .shop-tabbar button.is-active svg{transform:translateY(-3px)}
    .shop-tabbar button:hover .nav-title,
    .shop-tabbar button.is-active .nav-title{transform:translateY(-2px)}
    .shop-tabbar button.is-press svg{animation:iconFloat .48s cubic-bezier(.22,.7,.2,1) both}
    .shop-tabbar button.is-press .nav-title{animation:tabTitleNudge .48s cubic-bezier(.22,.7,.2,1) both}
    .shop-tab-bag b{
        position:absolute;
        top:2px;
        right:18%;
        min-width:16px;
        height:16px;
        padding:0 4px;
        border-radius:99px;
        background:var(--gold);
        color:#171412;
        font-size:10px;
        line-height:16px;
    }
    #customer-portal.shop-shell{background:var(--paper)}
    #customer-portal .shop-notice{display:none}
    #customer-portal.shop-shell .shop-wrap{padding:0 16px calc(92px + env(safe-area-inset-bottom))!important}
    #customer-portal .shop-nav{
        height:auto;
        min-height:56px;
        margin:0 -16px 10px;
        padding:10px 16px;
        background:#fff;
        color:var(--ink);
        border-bottom:1px solid var(--line);
    }
    #customer-portal .shop-brand{font-size:12px;letter-spacing:.14em;color:var(--ink)}
    #customer-portal .shop-store-line{margin-top:4px;font-size:11px;color:var(--muted)}
    #customer-portal[data-shop-view="menu"] .shop-pane:not([data-shop-pane="menu"]),
    #customer-portal[data-shop-view="bag"] .shop-pane:not([data-shop-pane="bag"]),
    #customer-portal[data-shop-view="orders"] .shop-pane:not([data-shop-pane="orders"]),
    #customer-portal[data-shop-view="account"] .shop-pane:not([data-shop-pane="account"]){display:none!important}
    #customer-portal .shop-layout,
    #customer-portal .customer-order-layout{grid-template-columns:1fr;gap:0}
    #customer-portal .customer-menu-panel{
        padding:0!important;
        border:0;
        background:transparent;
    }
    #customer-portal .customer-menu-list{grid-template-columns:1fr!important;gap:10px}
    #customer-portal .shop-card{
        grid-template-columns:120px minmax(0,1fr);
        min-height:120px;
        border:0;
        background:var(--khaki);
        border-radius:16px;
    }
    #customer-portal .shop-card-media,
    #customer-portal .shop-card-photo,
    #customer-portal .shop-card-photo-empty{
        width:120px;
        height:120px;
        border-radius:16px 0 0 16px;
    }
    #customer-portal .shop-card-copy{display:none}
    #customer-portal .shop-card-body{padding:10px 12px;gap:2px}
    #customer-portal .shop-card-top{flex-direction:row;align-items:baseline;gap:8px}
    #customer-portal .shop-card-top strong{font-size:16px}
    #customer-portal .shop-card-top em{font-size:13px}
    #customer-portal .shop-card-meta{font-size:10px}
    #customer-portal .shop-card-actions{display:flex;justify-content:flex-end;margin-top:auto}
    #customer-portal .shop-add-wide{display:none}
    #customer-portal .shop-card-plus{
        display:grid;
        place-items:center;
        position:absolute;
        right:6px;
        bottom:6px;
        width:28px;
        height:28px;
        border:0;
        border-radius:50%;
        background:var(--gold);
        color:#171412;
        font-size:18px;
        font-weight:700;
        line-height:1;
    }
    #customer-portal .shop-card-plus:disabled{opacity:.35}
    #customer-portal .shop-btn{min-height:30px;padding:0 12px;font-size:11px}
    #customer-portal .customer-cart-panel{
        position:static;
        min-height:calc(100dvh - 160px);
        padding:18px 16px 24px!important;
        border:0;
    }
    #customer-portal .shop-section{margin-top:0!important;border:0}
    #customer-portal .customer-profile,
    #customer-portal .store-pin{margin-top:0!important}
    #customer-portal .shop-account-signout{
        display:inline-flex;
        width:100%;
        min-height:50px;
        margin:16px 0 0;
    }
    #customer-portal .shop-toolbar{
        position:sticky;
        top:56px;
        z-index:7;
        margin:0 -16px 12px;
        padding:8px 16px 10px;
        background:rgba(250,248,245,.94);
        backdrop-filter:blur(14px);
    }
    #customer-portal .shop-feature{min-height:0;margin-bottom:12px;padding:16px 18px;border-radius:16px}
    #customer-portal .shop-menu-head h2,#customer-portal .shop-cart-head h2{font-size:36px}
    #customer-portal .shop-feature h2{font-size:22px;margin:4px 0 4px}
    #customer-portal .shop-tabbar button.is-active svg{animation:iconFloat .48s cubic-bezier(.22,.7,.2,1) both}
}

/* Unique motion per module */
.motion-rise{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1);
    transition-delay:var(--delay,0ms);
}
.motion-rise.is-in{opacity:1;transform:none}
.page-enter{animation:pageIn .42s cubic-bezier(.2,.7,.2,1)}
.shop-pane-in{animation:zusIn .38s cubic-bezier(.22,.7,.2,1)}
@keyframes pageIn{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:none}
}
@keyframes zusIn{
    from{opacity:0;transform:translate3d(0,18px,0)}
    to{opacity:1;transform:none}
}
@keyframes tabPop{
    50%{transform:scale(1.18)}
}
@keyframes bagPop{
    0%{transform:scale(.7)}
    60%{transform:scale(1.22)}
    100%{transform:scale(1)}
}
@keyframes featureDrift{
    from{transform:scale(1.08)}
    to{transform:scale(1)}
}
@keyframes riderGlow{
    0%,100%{box-shadow:0 0 0 0 rgba(56,35,25,0)}
    50%{box-shadow:0 0 0 6px rgba(56,35,25,.12)}
}
@keyframes formIn{
    from{opacity:0;transform:translateY(18px)}
    to{opacity:1;transform:none}
}

@media(min-width:821px){
    #customer-portal .shop-toolbar{
        position:sticky;
        top:72px;
        z-index:7;
        margin-bottom:14px;
        padding:4px 0 8px;
        background:rgba(250,248,245,.94);
        backdrop-filter:blur(12px);
    }
}
#customer-portal .shop-hero{display:none}
#customer-portal .shop-notice{display:none}
#customer-portal .shop-stats{margin-bottom:20px}
#customer-portal .shop-stat{padding:18px 22px}
#customer-portal .shop-stat strong{font-size:28px}
#customer-portal .customer-menu-panel{
    padding:0;
    border:0;
    background:transparent;
}
#customer-portal .shop-menu-head{margin:0 0 16px}
#customer-portal .shop-menu-head h2{font-size:48px}
@media(max-width:820px){
    #customer-portal .shop-menu-head h2,
    #customer-portal .shop-cart-head h2{font-size:36px}
}
#customer-portal .shop-feature{
    position:relative;
    overflow:hidden;
    min-height:0;
    margin:0 0 20px;
    padding:26px 28px;
    border-radius:18px;
    color:#f6efe6;
    background:#14110f center/cover no-repeat;
    background-image:linear-gradient(100deg,rgba(12,10,8,.74),rgba(12,10,8,.22)),url('../img/login/03-pour.jpg');
}
#customer-portal .shop-feature::after{
    content:'';
    position:absolute;
    inset:-10%;
    z-index:0;
    background:inherit;
    animation:featureDrift 14s ease-out forwards;
}
#customer-portal .shop-feature-copy{position:relative;z-index:1;max-width:42ch}
#customer-portal .shop-feature .eyebrow{color:#dfd4c3}
#customer-portal .shop-feature h2{margin:6px 0 8px;font:500 34px/.95 var(--serif)}
#customer-portal .shop-feature p{margin:0;color:rgba(246,239,230,.78);font-size:16px;line-height:1.45}
#customer-portal .customer-menu-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}
#customer-portal .shop-card{
    display:grid;
    grid-template-columns:200px minmax(0,1fr);
    align-items:stretch;
    min-height:200px;
    border:1px solid var(--line-strong);
    border-radius:var(--radius);
    overflow:hidden;
    background:transparent;
    transition:border-color .2s ease,background .2s ease;
}
#customer-portal .shop-card-media{
    position:relative;
    width:200px;
    height:200px;
    overflow:hidden;
}
#customer-portal .shop-card-photo,
#customer-portal .shop-card-photo-empty{
    display:block;
    width:200px;
    height:200px;
    object-fit:cover;
    background:#1c1612;
    transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
#customer-portal .shop-card-photo-empty{display:grid;place-items:center;color:#cbb79a;font:500 36px var(--serif)}
#customer-portal .shop-card-body{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    min-width:0;
    padding:16px 20px;
}
#customer-portal .shop-card-top{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
}
#customer-portal .shop-card-top strong{min-width:0;font:500 24px/1.15 var(--serif)}
#customer-portal .shop-card-top em{flex:0 0 auto;font-style:normal;font-weight:700;font-size:18px}
#customer-portal .shop-card-meta{
    color:var(--muted);
    font-size:12px;
    font-weight:650;
    letter-spacing:.08em;
    text-transform:uppercase;
}
#customer-portal .shop-card-copy{
    display:-webkit-box;
    line-clamp:2;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:0;
    color:var(--muted);
    font-size:15px;
    line-height:1.4;
}
#customer-portal .shop-card-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:8px;
}
#customer-portal .shop-add-wide{display:none}
#customer-portal .shop-btn{
    min-height:40px;
    padding:0 16px;
    border:1px solid var(--ink);
    background:var(--ink);
    color:var(--paper);
    font-size:11px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
}
#customer-portal .shop-btn:hover{background:var(--espresso);color:var(--paper)}
#customer-portal .shop-btn-gold{background:transparent;color:var(--ink);border-color:var(--ink)}
#customer-portal .shop-btn-gold:hover{background:#eae2d3;color:var(--ink)}
#customer-portal .shop-card-plus{
    display:grid;
    place-items:center;
    position:absolute;
    right:10px;
    bottom:10px;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:var(--ink);
    color:var(--paper);
    font-size:22px;
    font-weight:700;
    line-height:1;
    transition:transform .18s ease,background .18s ease;
}
#customer-portal .shop-card-plus:disabled{opacity:.35}
#customer-portal .shop-card:hover{
    transform:none;
    background:rgba(250,248,245,.5);
    border-color:var(--ink);
}
#customer-portal .shop-card:hover .shop-card-photo,
#customer-portal .shop-card:hover .shop-card-photo-empty{transform:scale(1.06)}
#customer-portal .shop-card-plus:hover{transform:translateY(-4px)}
#customer-portal .shop-card-plus.is-press{animation:iconFloat .48s cubic-bezier(.22,.7,.2,1) both}
#customer-portal .skeleton-photo{width:200px;height:200px}
@media(max-width:820px){
    #customer-portal .shop-card{
        grid-template-columns:120px minmax(0,1fr);
        min-height:120px;
    }
    #customer-portal .shop-card-media,
    #customer-portal .shop-card-photo,
    #customer-portal .shop-card-photo-empty,
    #customer-portal .skeleton-photo{
        width:120px;
        height:120px;
        border-radius:16px 0 0 16px;
    }
    #customer-portal .shop-card-copy{display:none}
    #customer-portal .shop-card-body{padding:8px 12px;gap:2px}
}
#customer-portal .shop-cat,
#customer-portal .shop-search input{transition:background .2s,color .2s,box-shadow .2s,transform .2s}
#customer-portal .shop-cat.is-active{transform:scale(1.03)}
#customer-portal .shop-bag-count.is-pop{animation:bagPop .35s ease}
#customer-portal .shop-cart-chip{transition:transform .2s ease,background .2s}
#customer-portal .shop-cart-chip:hover{transform:translateY(-1px)}

.app-shell .stat-card,
.app-shell .report-stat,
.app-shell .delivery-kpi{
    transition:transform .28s ease,border-color .28s ease,background .28s ease;
}
.app-shell .stat-card:hover,
.app-shell .report-stat:hover,
.app-shell .delivery-kpi:hover{
    transform:translateY(-3px);
    border-color:var(--gold);
}
.app-shell .nav-item{transition:color .2s,box-shadow .2s}
.app-shell .nav-item.active{box-shadow:inset 2px 0 0 var(--gold)}
.app-shell .page-heading h1{display:inline-block;transition:none}
.app-shell .page-heading h1.is-nudge{animation:headingShift .5s cubic-bezier(.22,.7,.2,1) both}
.app-shell .page-wrap{overflow-x:hidden}
.app-shell .page-view.page-enter-right{animation:wsSlideRight .4s cubic-bezier(.22,.7,.2,1)}
.app-shell .page-view.page-enter-left{animation:wsSlideLeft .4s cubic-bezier(.22,.7,.2,1)}
#page-crumb.is-swap{display:inline-block;animation:crumbIn .28s ease}
@keyframes wsSlideRight{
    from{opacity:0;transform:translateX(36px)}
    to{opacity:1;transform:none}
}
@keyframes wsSlideLeft{
    from{opacity:0;transform:translateX(-36px)}
    to{opacity:1;transform:none}
}
@keyframes crumbIn{
    from{opacity:0}
    to{opacity:1}
}
@keyframes iconFloat{
    0%{transform:translateY(0)}
    38%{transform:translateY(-8px)}
    100%{transform:translateY(-4px)}
}
@keyframes titleNudge{
    0%{transform:translateX(0)}
    40%{transform:translateX(10px)}
    100%{transform:translateX(6px)}
}
@keyframes headingShift{
    0%{opacity:.55;transform:translateX(-14px)}
    100%{opacity:1;transform:none}
}
@keyframes tabTitleNudge{
    0%{transform:translateY(0)}
    40%{transform:translateY(-4px)}
    100%{transform:translateY(-2px)}
}

#rider-portal .rider-order-card.motion-rise{transform:translateX(22px)}
#rider-portal .rider-order-card.is-in{transform:none}
#rider-portal .rider-order-card{
    transition:transform .3s ease,border-color .3s ease;
}
#rider-portal .rider-order-card:hover{transform:translateX(4px);border-color:var(--gold)}
#rider-portal .rider-angkas-sheet{animation:none}

.login-form-wrap{animation:formIn .55s cubic-bezier(.2,.7,.2,1)}
.login-form input,
.login-form select{
    transition:border-color .2s,box-shadow .2s;
}
.login-form input:focus,
.login-form select:focus{
    outline:none;
    border-color:var(--ink);
    box-shadow:0 0 0 4px rgba(56,35,25,.08);
}
.login-screen .login-form .login-field input:focus,
.login-screen .login-form .login-field select:focus{
    box-shadow:none;
}

.customer-menu-list .empty-state,
.catalog-list .empty-state,
#promo-list .empty-state,
#customer-cart-items .empty-state,
#customer-order-history .empty-state,
#rider-available-orders .empty-state,
#rider-active-run .empty-state,
#rider-done-list .empty-state,
.popular-list .empty-state{grid-column:1/-1}
.empty-state{
    display:grid;
    justify-items:center;
    gap:8px;
    padding:36px 18px;
    text-align:center;
}
.empty-mark{
    display:grid;
    width:42px;
    height:42px;
    place-items:center;
    border:1px solid var(--line);
    border-radius:50%;
    color:var(--gold);
    font:500 18px var(--serif);
}
.empty-state strong{
    font:500 20px/1.2 var(--serif);
    color:var(--ink);
}
.empty-state small{
    max-width:34ch;
    color:var(--muted);
    font-size:13px;
    line-height:1.5;
}
td .empty-state{padding:28px 12px}
.skeleton-card,.skeleton-row td{pointer-events:none}
.skeleton-photo,
.skeleton-line{
    display:block;
    background:linear-gradient(90deg,#efe8de 0%,#f7f3ec 45%,#efe8de 100%);
    background-size:220% 100%;
    animation:skel 1.1s ease-in-out infinite;
}
.skeleton-photo{height:148px}
.skeleton-line{height:10px;margin:8px 0;border-radius:99px}
.skeleton-line.short{width:46%}
@keyframes skel{
    0%{background-position:100% 0}
    100%{background-position:0 0}
}
.rider-next-label,
.rider-drop-label{
    margin:0 0 6px;
    color:var(--gold);
    font-size:10px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.rider-drop-label{margin-top:10px;color:var(--muted)}
.rider-order-card.is-next{border-color:var(--ink)}
.rider-address-button{
    display:block;
    width:100%;
    margin:0 0 10px;
    padding:0;
    border:0;
    background:none;
    color:var(--ink);
    font:500 18px/1.35 var(--serif);
    text-align:left;
}
.rider-address-button:hover{text-decoration:underline}
.receipt-sheet{
    max-width:360px;
    margin:0 auto;
    padding:28px 22px;
    border:1px dashed #cfc4b6;
    background:#fffdf8;
}
.receipt-mark{
    display:grid;
    width:36px;
    height:36px;
    place-items:center;
    margin:0 auto 10px;
    border:1px solid var(--ink);
    border-radius:50%;
    font:600 16px var(--serif);
}
.receipt-brand{
    margin:0;
    text-align:center;
    letter-spacing:.16em;
    font:700 12px var(--sans);
}
.receipt-sheet h3{text-align:center}
.receipt-thanks{text-align:center}

.admin-feature{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(220px,.95fr);
    gap:18px;
    align-items:center;
    min-height:0;
    margin:0 0 18px;
    padding:26px 28px;
    border-radius:18px;
    color:#f6efe6;
    background:#14110f center/cover no-repeat;
    background-image:linear-gradient(100deg,rgba(12,10,8,.74),rgba(12,10,8,.28)),url('../img/login/02-interior.jpg');
}
.admin-feature-copy{position:relative;z-index:1;max-width:46ch}
.admin-feature .dashboard-map{
    height:220px;
    margin:0;
    border-color:rgba(240,216,139,.28);
}
.order-dialog-map,
.receipt-map{
    height:180px;
    margin:10px 0 12px;
}
@media(max-width:820px){
    .admin-feature{grid-template-columns:1fr}
    .admin-feature .dashboard-map{height:200px}
}
.admin-feature .eyebrow{color:#dfd4c3}
.admin-feature h2{margin:6px 0 8px;font:500 32px/.95 var(--serif)}
.admin-feature p{margin:0;color:rgba(246,239,230,.78);font-size:15px;line-height:1.45}
.admin-next-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin:0 0 18px;
}
.admin-next-card{
    display:grid;
    gap:6px;
    padding:18px 20px;
    border:1px solid var(--line);
    background:var(--khaki);
    text-align:left;
    cursor:pointer;
}
.admin-next-card:hover{border-color:var(--ink)}
.admin-next-card span{
    color:var(--muted);
    font-size:11px;
    font-weight:650;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.admin-next-card strong{font:500 32px/1 var(--serif)}
.admin-next-card small{color:var(--muted);font-size:13px}
.queue-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 0;
    border-top:1px solid var(--line);
}
.queue-card:first-child{border-top:0}
.queue-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.queue-items{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.4}
.queue-card .button{flex:0 0 auto;min-height:36px;padding:0 12px;font-size:12px}
.order-board{
    display:grid;
    grid-template-columns:repeat(4,minmax(220px,1fr));
    gap:14px;
    align-items:start;
    overflow:auto;
    padding-bottom:8px;
}
.order-board-done{
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.order-lane{
    min-width:0;
    border:1px solid var(--line);
    background:var(--khaki);
}
.order-lane header{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:8px;
    padding:14px 14px 10px;
    border-bottom:1px solid var(--line);
}
.order-lane h3{margin:0;font:500 18px/1 var(--serif)}
.order-lane b{color:var(--muted);font-size:12px}
.order-lane-body{display:grid;gap:10px;padding:12px}
.lane-empty{margin:8px 0;color:var(--muted);font-size:13px}
.order-ticket{
    display:grid;
    gap:6px;
    padding:12px;
    border:1px solid var(--line);
    background:var(--cream);
}
.order-ticket-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.order-ticket-name{margin:0;font:500 16px/1.25 var(--serif)}
.order-ticket-items,.order-ticket-meta{margin:0;color:var(--muted);font-size:12px;line-height:1.4}
.order-ticket-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.order-ticket-actions .button{min-height:34px;padding:0 12px;font-size:12px;width:auto}
.order-ticket .status-select{min-height:34px;max-width:100%}
.admin-product-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}
.admin-product-card{
    display:grid;
    grid-template-columns:176px minmax(0,1fr);
    min-height:176px;
    overflow:hidden;
    border:1px solid var(--line);
    background:var(--khaki);
}
.admin-product-card.is-archived{opacity:.62}
.admin-product-photo{width:176px;height:176px;overflow:hidden;background:#1c1612}
.admin-product-photo img{display:block;width:176px;height:176px;object-fit:cover}
.admin-product-body{display:flex;flex-direction:column;gap:4px;min-width:0;padding:14px 16px}
.admin-product-copy{
    display:-webkit-box;
    line-clamp:2;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.4;
}
.product-image-preview{margin:4px 0 10px}
.product-crop-stage{
    position:relative;
    width:min(100%,280px);
    aspect-ratio:1;
    overflow:hidden;
    margin:0 auto;
    background:#1c1612;
    touch-action:none;
}
.product-image-preview .product-crop-stage img{position:absolute;display:block;max-width:none;max-height:none;object-fit:contain;border:0;background:transparent;user-select:none;-webkit-user-drag:none;pointer-events:none}
.product-crop-frame{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.52);cursor:move}
.product-crop-handle{position:absolute;width:14px;height:14px;border:2px solid #fff;border-radius:50%;background:var(--shop-gold);touch-action:none}
.product-crop-handle.nw{top:-7px;left:-7px;cursor:nwse-resize}
.product-crop-handle.ne{top:-7px;right:-7px;cursor:nesw-resize}
.product-crop-handle.sw{bottom:-7px;left:-7px;cursor:nesw-resize}
.product-crop-handle.se{right:-7px;bottom:-7px;cursor:nwse-resize}
.product-crop-hint{margin:8px 0;color:var(--muted);font-size:12px;text-align:center}
.product-venti-price-field{margin-top:-4px}
.shop-size-picker,.pos-size-picker{display:grid;gap:5px;font-size:11px;font-weight:650}
.shop-size-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.shop-size-tab{display:grid;gap:2px;min-height:40px;padding:5px 8px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);font-size:12px;font-weight:700;text-align:center}
.shop-size-tab small{color:var(--muted);font-size:12px;font-weight:600}
.shop-size-tab.is-active{border-color:var(--ink);background:var(--ink);color:#fff}
.shop-size-tab.is-active small{color:#f2e8d8}
.shop-size-tab:disabled{opacity:.55;cursor:not-allowed}
.pos-size-picker select{width:100%;min-height:34px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);font:inherit}
.admin-product-stock{display:flex;justify-content:space-between;gap:8px;margin-top:4px}
.admin-product-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.admin-product-actions .button{min-height:34px;padding:0 12px;font-size:12px;width:auto}
.admin-product-body .shop-card-top strong{font-size:20px}
.admin-product-body .shop-card-top em{font-size:15px}
.admin-product-grid .empty-state,.order-board .empty-state{grid-column:1/-1}
.stock-meter{height:6px;margin-top:4px;background:var(--cream);overflow:hidden}
.stock-meter span{display:block;height:100%;background:var(--gold)}
.stock-meter.low span{background:#bf653b}
#page-promos .promo-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:16px}
.order-dialog{width:min(1180px,calc(100% - 28px))}
.order-create-layout{grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr);min-height:520px}
.pos-cats{display:flex;gap:8px;overflow:auto;margin:12px 0 0;padding-bottom:4px;scrollbar-width:none}
.pos-cats::-webkit-scrollbar{display:none}
.pos-cat{
    flex:0 0 auto;
    min-height:34px;
    padding:0 12px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    font-size:12px;
    font-weight:650;
}
.pos-cat.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.pos-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    max-height:460px;
    margin-top:12px;
    overflow:auto;
}
.pos-tile{
    display:grid;
    gap:6px;
    padding:0 0 12px;
    border:1px solid var(--line);
    background:var(--khaki);
    text-align:left;
    cursor:pointer;
}
.pos-tile:hover{border-color:var(--ink)}
.pos-tile:disabled{opacity:.4;cursor:not-allowed}
.pos-tile img{display:block;width:100%;height:150px;object-fit:cover;background:#1c1612}
.pos-tile strong{padding:0 10px;font:500 15px/1.2 var(--serif)}
.pos-tile em{padding:0 10px;font-style:normal;font-weight:700;font-size:13px}
.pos-tile small{padding:0 10px;color:var(--muted);font-size:11px}
.pos-size-picker{margin:0 10px}
.pos-tile [data-add-cart]{margin:2px 10px 0;min-height:32px;border:1px solid var(--ink);border-radius:var(--radius-sm);background:var(--ink);color:#fff;font:600 12px var(--sans);cursor:pointer}
.pos-tile [data-add-cart]:disabled{opacity:.45;cursor:not-allowed}

@media(max-width:1100px){
    .admin-next-actions,.admin-product-grid{grid-template-columns:1fr}
    .order-board{grid-template-columns:repeat(2,minmax(220px,1fr))}
    .pos-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:820px){
    .admin-next-actions,.order-board,.admin-product-grid,.order-board-done{grid-template-columns:1fr}
    .admin-product-card{grid-template-columns:112px minmax(0,1fr);min-height:112px}
    .admin-product-photo,.admin-product-photo img{width:112px;height:112px}
    .order-create-layout{grid-template-columns:1fr}
    .pos-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:280px}
}

#rider-portal .shop-nav{
    background:rgba(250,248,245,.9);
    color:var(--ink);
    border-bottom:1px solid var(--line);
}
#rider-portal .shop-brand{color:var(--ink)}
#rider-portal .shop-store-line{margin:4px 0 0;color:var(--caption);font-size:11px}
#rider-portal .shop-desk-tabs button{color:var(--muted)}
#rider-portal .shop-desk-tabs button.is-active{color:var(--ink);box-shadow:inset 0 -1.5px 0 var(--ink)}
#rider-portal .shop-text-btn{color:var(--ink)}
#rider-portal .shop-text-btn:hover{color:var(--espresso)}
#rider-portal .shop-nav-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.rider-gps-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:34px;
    padding:0 12px;
    border:1px solid rgba(246,239,230,.22);
    background:transparent;
    color:#f6efe6;
    font-size:11px;
    font-weight:750;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.rider-gps-pill .rider-gps-dot{transition:transform .32s cubic-bezier(.22,.7,.2,1)}
.rider-gps-pill .nav-title{display:inline-block;transition:transform .32s cubic-bezier(.22,.7,.2,1)}
.rider-gps-pill:hover .rider-gps-dot,
.rider-gps-pill.is-press .rider-gps-dot{transform:translateY(-4px)}
.rider-gps-pill:hover .nav-title,
.rider-gps-pill.is-press .nav-title{transform:translateX(6px)}
.rider-gps-pill.is-press .rider-gps-dot{animation:iconFloat .48s cubic-bezier(.22,.7,.2,1) both}
.rider-gps-pill.is-press .nav-title{animation:titleNudge .48s cubic-bezier(.22,.7,.2,1) both}
.rider-gps-pill:disabled{opacity:.45}
.rider-gps-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#8a8078;
}
.rider-gps-pill.is-live{border-color:var(--gold);color:var(--gold)}
.rider-gps-pill.is-live .rider-gps-dot{
    background:var(--gold);
    animation:riderGpsPulse 1.6s ease-in-out infinite;
}
.rider-gps-pill.is-press .rider-gps-dot,
.rider-gps-pill.is-live.is-press .rider-gps-dot{animation:iconFloat .48s cubic-bezier(.22,.7,.2,1) both}
@keyframes riderGpsPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(243,195,74,.55)}
    50%{box-shadow:0 0 0 6px rgba(243,195,74,0)}
}
.rider-hello{margin:8px 0 16px;color:var(--on-paper)}
.rider-hello h1{margin:4px 0 8px;font:500 52px/.95 var(--serif);display:inline-block}
.rider-hello p{margin:0;max-width:46ch;color:var(--on-paper-mute);font-size:15px;line-height:1.45}
.rider-feature{
    position:relative;
    overflow:hidden;
    margin:0 0 18px;
    padding:24px 26px;
    border-radius:18px;
    color:#f6efe6;
    background:#14110f center/cover no-repeat;
    background-image:linear-gradient(105deg,rgba(12,10,8,.82),rgba(12,10,8,.28)),url('../img/login/01-bar.jpg');
}
.rider-feature-copy{position:relative;z-index:1;max-width:44ch}
.rider-feature .eyebrow{color:#dfd4c3}
.rider-feature h2{margin:6px 0 8px;font:500 30px/.95 var(--serif)}
.rider-feature p{margin:0;color:rgba(246,239,230,.78);font-size:15px;line-height:1.45}
#rider-portal .shop-stats.rider-stats{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    margin-bottom:18px;
}
#rider-portal .rider-stats .shop-stat{padding:14px 12px}
#rider-portal .rider-stats .shop-stat strong{font-size:22px}
.rider-run-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px;align-items:start;margin-bottom:8px}
#rider-portal[data-rider-view="run"] .shop-wrap{
    width:100%;
    max-width:none;
    padding:0;
}
#rider-portal[data-rider-view="run"]{
    background:#171412;
}
#rider-portal[data-rider-view="run"] .shop-nav{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:26;
    margin:0;
    background:linear-gradient(180deg,#171412 0%,rgba(23,20,18,.7) 62%,transparent);
    border-bottom:0;
    color:#f6efe6;
}
#rider-portal[data-rider-view="run"] .shop-brand,
#rider-portal[data-rider-view="run"] .shop-desk-tabs button.is-active{color:#f6efe6}
#rider-portal[data-rider-view="run"] .shop-store-line{color:rgba(246,239,230,.58)}
#rider-portal[data-rider-view="run"] .shop-desk-tabs button{color:rgba(246,239,230,.55)}
#rider-portal[data-rider-view="run"] .shop-signout{
    background:rgba(250,248,245,.12);
    border-color:rgba(246,239,230,.28);
    color:#f6efe6;
}
#rider-portal[data-rider-view="run"] .shop-signout:hover{
    background:#faf8f5;
    border-color:#faf8f5;
    color:#121212;
}
#rider-portal[data-rider-view="run"] .rider-run-pane,
#rider-portal[data-rider-view="run"] .rider-angkas{
    position:relative;
    height:100dvh;
    min-height:560px;
}
.rider-angkas-map,
#rider-portal[data-rider-view="run"] #rider-map-frame{
    position:absolute;
    inset:0;
    z-index:0;
    width:100%;
    height:100% !important;
    margin:0;
    border:0;
    border-radius:0;
}
#rider-portal[data-rider-view="run"] .shop-map-badge{
    display:none;
}
#rider-portal[data-rider-view="run"] .shop-map-canvas,
#rider-portal[data-rider-view="run"] .google-map-frame{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}
.rider-angkas-hud{
    position:absolute;
    top:72px;
    left:12px;
    right:12px;
    z-index:22;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    pointer-events:none;
}
.rider-angkas-chip{
    margin:0;
    max-width:70%;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(251,246,240,.94);
    color:#3a2e24;
    font:750 12px/1.2 var(--sans);
    letter-spacing:.04em;
    text-transform:uppercase;
    box-shadow:0 8px 20px rgba(23,20,18,.18);
}
.rider-recenter{
    pointer-events:auto;
    position:absolute;
    top:86px;
    right:0;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    background:#fff;
    color:#2f6f4e;
    font-size:20px;
    box-shadow:0 8px 20px rgba(23,20,18,.2);
}
.rider-angkas-sheet{
    position:absolute;
    left:12px;
    right:12px;
    bottom:calc(76px + env(safe-area-inset-bottom));
    z-index:23;
    max-height:46dvh;
    overflow:auto;
    padding:8px 16px 16px;
    border-radius:22px 22px 16px 16px;
    background:var(--paper);
    box-shadow:0 16px 40px rgba(18,18,18,.16);
}
.rider-sheet-handle{
    display:block;
    width:42px;
    height:4px;
    margin:4px auto 10px;
    border-radius:99px;
    background:#e7dccf;
}
.rider-sheet-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}
.rider-sheet-name{
    margin:0;
    font:600 18px/1.2 var(--serif);
    color:var(--ink);
}
.rider-angkas-sheet #rider-map-order{
    max-width:46%;
    min-height:40px;
    margin:0;
}
.rider-angkas-next{
    margin:0 0 8px;
    color:#6b3e2e;
    font-size:13px;
    font-weight:650;
    line-height:1.35;
}
.rider-sheet-gps{
    margin:8px 0 0;
    color:var(--muted);
    font-size:12px;
    line-height:1.4;
}
.rider-angkas-address{
    margin:6px 0 8px;
    color:var(--ink);
    font-size:16px;
    font-weight:650;
    line-height:1.35;
}
.rider-queue-note{
    margin:8px 0 0;
    color:var(--muted);
    font-size:12px;
}
.rider-angkas-sheet .rider-run-card{
    margin:0;
    padding:4px 0 0;
    border:0;
    background:transparent;
}
.rider-gps-puck{background:none !important;border:0 !important}
.rider-gps-puck b{
    display:block;
    width:22px;
    height:22px;
    margin:7px;
    border-radius:50%;
    background:#2f6f4e;
    box-shadow:0 0 0 7px rgba(47,111,78,.2),0 8px 16px rgba(23,20,18,.28);
    position:relative;
}
.rider-gps-puck b::after{
    content:"";
    position:absolute;
    left:50%;
    top:-7px;
    border:6px solid transparent;
    border-bottom-color:#2f6f4e;
    transform:translateX(-50%);
}
@media(min-width:821px){
    #rider-portal[data-rider-view="run"] .shop-nav{position:relative;margin:0;background:#171412}
    #rider-portal[data-rider-view="run"] .rider-run-pane,
    #rider-portal[data-rider-view="run"] .rider-angkas{height:calc(100dvh - 64px);min-height:640px}
    .rider-angkas-sheet{
        left:16px;
        right:auto;
        width:min(400px,calc(100% - 32px));
        bottom:16px;
        max-height:56dvh;
    }
    .rider-angkas-hud{top:16px}
}
#rider-portal .shop-pane[data-rider-pane="open"],
#rider-portal .shop-pane[data-rider-pane="done"]{
    padding:8px 22px 40px;
}
.rider-run-card,.rider-job-chip{
    margin-bottom:14px;
    padding:18px;
    border:1px solid var(--line);
    background:var(--khaki);
}
.rider-run-card.is-next{border-color:var(--ink)}
.rider-steps{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
    margin:0 0 16px;
    padding:0;
    list-style:none;
}
.rider-steps li{display:grid;gap:6px;justify-items:center;text-align:center}
.rider-steps i{
    width:100%;
    height:3px;
    background:#efe6da;
}
.rider-steps span{color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.rider-steps .is-done i,.rider-steps .is-now i{background:var(--gold)}
.rider-steps .is-now span{color:var(--ink)}
.rider-steps .is-done span{color:var(--ink)}
.rider-run-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 12px}
.rider-pay-badge{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:0 8px;
    border:1px solid var(--line);
    color:var(--ink);
    font-size:10px;
    font-weight:750;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.rider-job-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rider-job-chip-top,.rider-job-chip-foot,.rider-run-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.rider-job-eta{margin:6px 0 0;color:var(--gold);font-size:12px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.rider-job-items{margin:0 0 12px;color:var(--muted);font-size:13px;line-height:1.4}
.rider-pane-copy{margin:-8px 0 16px;max-width:46ch}
.rider-dock{display:none}
#rider-dock[hidden]{display:none!important}
.rider-tabbar{grid-template-columns:repeat(3,minmax(0,1fr))}
.rider-tab-open b{
    position:absolute;
    top:2px;
    right:22%;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border-radius:99px;
    background:var(--gold);
    color:#171412;
    font-size:10px;
    line-height:16px;
}
.rider-proof-dialog canvas{
    display:block;
    width:100%;
    height:180px;
    margin:8px 0 10px;
    border:1px solid var(--line);
    background:#fff;
    touch-action:none;
}
.rider-pin-input{
    letter-spacing:.45em;
    font-size:28px;
    font-weight:700;
    text-align:center;
}
#rider-portal .rider-order-card.motion-rise,
#rider-portal .rider-job-chip.motion-rise,
#rider-portal .rider-run-card.motion-rise{transform:translateX(22px)}
#rider-portal .rider-order-card.is-in,
#rider-portal .rider-job-chip.is-in,
#rider-portal .rider-run-card.is-in{transform:none}

@media(max-width:820px){
    #rider-portal .shop-wrap{padding:0 16px calc(88px + env(safe-area-inset-bottom))!important}
    #rider-portal[data-rider-view="run"] .shop-wrap{padding:0!important;max-width:none}
    #rider-portal .shop-pane[data-rider-pane="open"],
    #rider-portal .shop-pane[data-rider-pane="done"]{padding:0 0 12px}
    #rider-portal .shop-nav{
        height:auto;
        min-height:56px;
        margin:0 -16px 10px;
        padding:10px 16px;
    }
    #rider-portal[data-rider-view="run"] .shop-nav{margin:0}
    .rider-hello h1{font-size:40px}
    .rider-run-grid,.rider-job-list{grid-template-columns:1fr}
    .rider-steps{gap:4px}
    .rider-dock{display:none!important}
    .rider-angkas-sheet .rider-run-foot .button{flex:1}
    .rider-tabbar{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}


.date-stamp,
.stat-card,
.report-stat,
.panel,
.shop-form,
.table-panel,
.sales-panel,
.queue-panel,
.recent-panel,
.report-chart-panel,
.popular-panel,
.daily-table-panel,
.delivery-kpi,
.customer-profile,
.store-pin,
.shop-section,
.customer-menu-panel,
.customer-cart-panel,
.shop-notice,
.saved-address-card,
.rider-order-card,
.rider-run-card,
.rider-job-chip,
.cash-drawer,
.admin-map-card,
.admin-next-card,
.order-lane,
.order-ticket,
.admin-product-card,
.pos-tile,
.shop-card,
.shop-feature,
.admin-feature,
.rider-feature,
.rider-map-card,
.receipt-sheet,
.app-dialog{
    border-radius:var(--radius);
}
.table-panel,
.shop-card,
#customer-portal .shop-card,
.admin-product-card,
.pos-tile,
.order-lane,
.shop-feature,
.admin-feature,
.rider-feature{
    overflow:hidden;
}
.button,
.icon-button,
.row-action,
.filter-tab,
.shop-btn,
.shop-cat,
.pos-cat,
.admin-signout,
.shop-cart-chip,
.promo-chip,
.rating-row button,
.catalog-item,
.search-wrap,
.login-form input,
.login-form select,
.app-dialog input,
.app-dialog select,
.shop-form input,
.shop-form select,
.customer-profile input,
.customer-cart-panel input,
.customer-cart-panel select,
.shop-search input,
#cash-count-form input,
.rider-map-toolbar select,
#admin-map-order,
#rider-map-order,
.status-select,
.fulfillment-option span,
.shop-qty button,
.rider-gps-pill,
.rider-pay-badge,
.see-password{
    border-radius:var(--radius-sm);
}
.filter-tabs,
.role-switch,
.search-wrap{
    border-radius:var(--radius-sm);
    overflow:hidden;
}
.search-wrap input{border-radius:0}
.role-switch button{border-radius:0}
.filter-tab{border-radius:0}
.shop-cart-chip b{border-radius:50%}

#customer-portal,
#rider-portal{
    font-size:18px;
}
#customer-portal .shop-brand,
#rider-portal .shop-brand{font-size:16px!important}
#customer-portal .shop-store-line,
#rider-portal .shop-store-line{font-size:14px!important}
#customer-portal .shop-desk-tabs button,
#rider-portal .shop-desk-tabs button{font-size:16px;min-height:44px}
#customer-portal .shop-cart-chip{font-size:16px;min-height:44px}
#customer-portal .shop-cart-chip b{font-size:14px;min-width:22px;height:22px}
#customer-portal .shop-text-btn,
#customer-portal .shop-signout,
#rider-portal .shop-text-btn,
#rider-portal .shop-signout{font-size:12px}
#customer-portal .shop-back{font-size:16px}
#customer-portal .shop-mobile-hi{font-size:28px}
#customer-portal .shop-search input{min-height:54px;font-size:18px}
#customer-portal .shop-cat{min-height:42px;padding:0 16px;font-size:15px}
#customer-portal .eyebrow,
#rider-portal .eyebrow{font-size:13px}
#customer-portal .muted,
#rider-portal .muted,
#customer-portal .customer-fulfillment-hint,
#rider-portal .rider-pane-copy{font-size:16px;line-height:1.5}
#customer-portal .shop-stat span,
#rider-portal .shop-stat span{font-size:13px}
#customer-portal .shop-stat strong{font-size:32px!important}
#rider-portal .rider-stats .shop-stat strong{font-size:28px!important}
#customer-portal .shop-feature h2{font-size:38px}
#customer-portal .shop-feature p{font-size:18px}
#customer-portal .shop-card-top strong{font-size:28px!important}
#customer-portal .shop-card-top em{font-size:20px!important}
#customer-portal .shop-card-meta{font-size:13px!important}
#customer-portal .shop-card-copy{font-size:16px!important}
#customer-portal .shop-btn{min-height:46px;font-size:16px!important}
#customer-portal .shop-total{font-size:18px}
#customer-portal .shop-total span:last-child{font-size:34px}
#customer-portal #customer-place-order{min-height:54px;font-size:18px}
#customer-portal .fulfillment-option strong{font-size:18px}
#customer-portal .fulfillment-option small{font-size:15px}
#customer-portal .customer-profile h2,
#customer-portal .store-pin h2{font-size:30px}
#customer-portal .customer-profile label,
#customer-portal .customer-cart-panel label,
#customer-portal .customer-delivery-address{font-size:16px}
#customer-portal input,
#customer-portal select,
#customer-portal textarea,
#rider-portal input,
#rider-portal select{min-height:52px;font-size:17px}
#customer-portal .button,
#rider-portal .button{min-height:48px;font-size:16px}
#customer-portal .promo-chip strong{font-size:16px}
#customer-portal .promo-chip span{font-size:14px}
#customer-portal .customer-discount-row{font-size:16px}
#customer-portal .customer-order-items{font-size:16px}
#customer-portal .order-timeline span{font-size:13px}
#customer-portal .shop-account-signout{font-size:12px}
#customer-portal .empty-state strong,
#rider-portal .empty-state strong{font-size:22px}
#customer-portal .empty-state small,
#rider-portal .empty-state small{font-size:15px}
#customer-portal .saved-address-card strong{font-size:20px}
#customer-portal .saved-address-card small{font-size:14px}
#rider-portal .rider-hello p{font-size:18px}
#rider-portal .rider-feature h2{font-size:34px}
#rider-portal .rider-feature p{font-size:18px}
#rider-portal .rider-gps-pill{font-size:13px;min-height:38px}
#rider-portal .rider-map-toolbar label{font-size:16px}
#rider-portal .rider-steps span{font-size:12px}
#rider-portal .rider-pay-badge{font-size:12px}
#rider-portal .rider-job-eta{font-size:14px}
#rider-portal .rider-job-items{font-size:16px}
#rider-portal .rider-address-button{font-size:20px}
#rider-portal .rider-order-customer,
#rider-portal .rider-order-address{font-size:16px}
#rider-portal .rider-order-top small{font-size:14px}
#rider-portal .rider-order-items li,
#rider-portal .rider-route-steps li{font-size:16px}
#rider-portal .rider-route-steps span{font-size:14px}
#rider-portal .rider-order-pay{font-size:13px}
#rider-portal .rider-order-foot .button{font-size:16px;min-height:48px}
#rider-portal .rider-pin-input{font-size:32px}
@media(max-width:820px){
    #customer-portal .shop-tabbar button,
    #rider-portal .shop-tabbar button{font-size:12px}
    #customer-portal .shop-tabbar svg,
    #rider-portal .shop-tabbar svg{width:24px;height:24px}
    #customer-portal .shop-brand,
    #rider-portal .shop-brand{font-size:14px!important}
    #customer-portal .shop-store-line,
    #rider-portal .shop-store-line{font-size:13px!important}
    #customer-portal .shop-card-top strong{font-size:20px!important}
    #customer-portal .shop-card-top em{font-size:16px!important}
    #customer-portal .shop-card-meta{font-size:12px!important}
    #customer-portal .shop-btn{min-height:40px;font-size:14px!important}
    #customer-portal .shop-menu-head h2,
    #customer-portal .shop-cart-head h2{font-size:36px}
    #rider-portal .rider-hello h1{font-size:40px}
}

/* Kōhī-style page bottom */
.cafe-foot{margin-top:auto}
.login-screen .cafe-foot{grid-column:1/-1}
.cafe-cta{background:var(--paper);border-top:0;padding:28px 24px 8px}
.cafe-cta-inner{
    width:min(1440px,100%);
    margin:0 auto;
    padding:40px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:#F5EFE6;
}
.cafe-cta-eyebrow{
    display:block;
    margin-bottom:8px;
    color:var(--caption);
    font-size:11px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.cafe-cta h2{margin:0 0 8px;color:var(--ink);font:500 34px/1.1 var(--serif)}
.cafe-cta p{margin:0;max-width:52ch;color:#4A4036;font-size:15px;line-height:1.55}
.cafe-cta-btn{
    flex:0 0 auto;
    min-height:48px;
    padding:0 22px;
    border:0;
    border-radius:999px;
    background:#121212;
    color:#FAF8F5;
    font-size:11px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.cafe-cta-btn:hover{background:var(--espresso)}
.cafe-footer{background:#121212;color:#FAF8F5;border-top:1px solid rgba(56,35,25,.4)}
.cafe-footer-inner{width:min(1440px,100%);margin:0 auto;padding:64px 32px 48px}
.cafe-footer-grid{display:grid;grid-template-columns:1.4fr .9fr .7fr 1fr;gap:40px}
.cafe-footer-mark{
    display:block;
    margin-bottom:14px;
    font:500 22px/1 var(--serif);
    letter-spacing:.2em;
}
.cafe-footer p{margin:0 0 8px;max-width:36ch;color:#C4B59D;font-size:13px;line-height:1.65}
.cafe-footer-cities{margin-top:16px!important;color:#8C7A68!important;font-size:11px!important;letter-spacing:.08em}
.cafe-footer-label{
    display:block;
    margin-bottom:12px;
    color:#C4B59D;
    font-size:11px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.cafe-footer-address{margin-top:12px!important;color:#C4B59D!important}
.cafe-footer ul{margin:0;padding:0;list-style:none}
.cafe-footer li{margin:0 0 8px}
.cafe-footer li button,
.cafe-footer li span{
    padding:0;
    border:0;
    background:none;
    color:#E0D4C2;
    font-size:13px;
}
.cafe-footer li button:hover{color:#FAF8F5}
.cafe-footer-form{display:flex;align-items:center;gap:8px;margin-top:14px}
.cafe-footer-form input{
    flex:1;
    min-width:0;
    min-height:40px;
    padding:0 12px;
    border:1px solid #382319;
    border-radius:var(--radius-sm);
    background:#1C1C1C;
    color:#FAF8F5;
    font-size:13px;
}
.cafe-footer-form input::placeholder{color:#7D6B58}
.cafe-footer-form input:focus{outline:none;border-color:#C4B59D}
.cafe-footer-form button{
    flex:0 0 auto;
    min-height:40px;
    padding:0 16px;
    border:0;
    border-radius:999px;
    background:#FAF8F5;
    color:#121212;
    font-size:11px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.cafe-footer-form button:hover{background:#EAE2D3}
.cafe-footer-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:48px;
    padding-top:28px;
    border-top:1px solid #2A2A2A;
}
.cafe-footer-bar p{margin:0;max-width:none;color:#7D6B58;font-size:11px}
#rider-portal[data-rider-view="run"] .cafe-foot{display:none}
.app-shell .page-wrap{padding-bottom:48px}
@media(max-width:900px){
    .cafe-cta-inner{flex-direction:column;align-items:flex-start;padding:36px 22px}
    .cafe-cta h2{font-size:28px}
    .cafe-footer-inner{padding:48px 22px 36px}
    .cafe-footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:820px){
    .login-screen{grid-template-rows:auto auto auto}
    #customer-portal .cafe-footer,
    #rider-portal .cafe-footer{padding-bottom:calc(28px + 72px + env(safe-area-inset-bottom))}
}
@media(max-width:600px){
    .login-screen{grid-template-rows:190px auto auto}
    .cafe-footer-grid{grid-template-columns:1fr}
    .cafe-footer-bar{flex-direction:column;align-items:flex-start}
}
.shop-addon-picker,
.pos-addon-picker{display:grid;gap:6px;margin:10px 0;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.55)}
.shop-addon-picker legend,
.pos-addon-picker legend{padding:0 4px;color:var(--caption);font-size:11px;font-weight:700}
.shop-addon-picker label,
.pos-addon-picker label{display:flex;align-items:center;gap:7px;margin:0;color:var(--ink);font-size:12px;font-weight:500}
.shop-addon-picker input,
.pos-addon-picker input{width:16px;height:16px;min-height:0;accent-color:var(--green)}
#customer-portal .shop-addon-picker label{font-size:13px}
#customer-portal .shop-addon-picker input{width:16px;height:16px;min-height:0}
#customer-portal .shop-favorite-button{
    position:absolute;top:10px;right:10px;z-index:1;display:grid;place-items:center;
    width:36px;height:36px;border:1px solid rgba(23,20,18,.14);border-radius:50%;
    background:rgba(255,255,255,.94);color:var(--ink);font-size:21px;line-height:1
}
#customer-portal .shop-favorite-button.is-favorite{color:#9a4d2e}
.product-addons-list{display:grid;gap:8px;margin-top:18px}
.product-addon-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.product-addon-row>span{display:grid;gap:3px}
.product-addon-row small{color:var(--muted)}
.product-addon-row.is-inactive{opacity:.65}