/* ===== pos.css 完整內容10/1測試端 ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent
}

html, body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #e8ebef;
    font-family: system-ui, sans-serif;
    touch-action: none;
    font-size: 18px
}

#app {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #e8ebef;
    padding-top: 30px;
    box-sizing: border-box;
}

.login-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px
}
.login-overlay.hidden { display: none }
.login-box {
    background: #fff;
    border-radius: 40px;
    padding: 44px 36px;
    max-width: 400px;
    width: 100%;
    text-align: center
}
.login-box h2 { margin: 12px 0 6px; color: #2d1f14 }
.login-box .google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px;
    background: #fff;
    border: 2px solid #c3c9d1;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    color: #2d1f14;
    cursor: pointer
}
.login-box .login-error {
    color: #d93025;
    font-size: 13px;
    min-height: 24px;
    margin-top: 12px
}

.top-bar {
    background: #fff;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #cfd4db;
    flex-shrink: 0;
    min-height: 56px;
    gap: 8px;
    flex-wrap: wrap;
}
.brand {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 800;
    color: #2d1f14;
    flex-shrink: 0;
}
.top-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}
.top-actions button {
    font-size: 12px;
    padding: 6px 16px;
    border-radius: 30px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    background: #d5d9df;
    color: #2d1f14;
    min-height: 38px;
    white-space: nowrap;
}
.top-actions button:active { transform: scale(0.94) }
.top-actions .btn-settle { background: #2d1f14; color: #fff }
.top-actions .btn-history { background: #e67e4a; color: #fff }
.top-actions .btn-announce-top { background: #e6e9ee; color: #e67e4a }
.status-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #6b5a4a;
    cursor: pointer;
    padding: 4px 10px 4px 6px;
    border-radius: 30px;
    background: #e6e9ee;
    border: 1px solid #cfd4db;
    min-height: 32px;
    white-space: nowrap;
}
.status-item .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.status-item .dot.green { background: #34a853 }
.status-item .dot.red { background: #ea4335 }
.status-item .dot.off { background: #ccc }
.status-item .dot.blink { animation: blink 1s infinite }

@keyframes blink {
    0%,100%{opacity:1}50%{opacity:.2}
}

.user-area {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #6b5b4e;
    background: #d5d9df;
    padding: 4px 12px 4px 16px;
    border-radius: 30px;
}
.user-area .logout-btn {
    background: transparent;
    border: none;
    color: #8a7a6e;
    font-size: 12px;
    cursor: pointer;
}
.order-header-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    background: #f3f5f8;
    padding: 0 14px;
    border-radius: 30px;
    border: 1px solid #cfd4db;
    min-height: 38px;
}
.order-header-inline h2 {
    font-size: 17px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #2d1f14;
}
.order-header-inline .cart-count-badge {
    font-size: 13px;
    font-weight: 600;
    color: #888;
    background: #d5d9df;
    padding: 0 12px;
    border-radius: 30px;
    line-height: 24px;
}
.order-header-inline .header-btns {
    display: flex;
    gap: 4px;
}
.order-header-inline .header-btns button {
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 30px;
}
.order-header-inline .btn-take { color: #e67e4a }
.order-header-inline .btn-clear { color: #b71c1c }

.main-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}
.menu-panel {
    flex: 2;
    display: flex;
    flex-direction: column;
    background: #f3f5f8;
    overflow: hidden;
    min-width: 0;
}
.order-panel {
    flex: 1;
    min-width: 280px;
    max-width: 420px;
    background: #fff;
    border-left: 2px solid #cfd4db;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.menu-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    background: #fff;
    border-bottom: 2px solid #d5d9df;
    flex-shrink: 0;
    min-height: 52px
}
.menu-toolbar .menu-title {
    font-size: 18px;
    font-weight: 800;
    color: #2d1f14;
    display: flex;
    align-items: center;
    gap: 8px
}
.menu-toolbar .menu-title .flavor-count-hint {
    font-size: 14px;
    font-weight: 600;
    color: #e67e4a;
    background: #e6e9ee;
    padding: 2px 14px;
    border-radius: 30px
}

.product-grid-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px
}

.product-card {
    background: #fff;
    border-radius: 20px;
    padding: 16px 10px 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    cursor: pointer;
    border: 3px solid transparent;
    text-align: center;
    position: relative;
    transition: 0.15s;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}
.product-card:active {
    transform: scale(0.94);
    border-color: #e67e4a
}
.product-card .product-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 14px;
    margin: 0 auto 4px;
    background: #e6e9ee
}
.product-card .product-img.placeholder {
    font-size: 38px;
    line-height: 64px;
    color: #ccc
}
.product-card .name {
    font-size: 17px;
    font-weight: 700;
    color: #2d1f14;
    margin-top: 2px
}
.product-card .price {
    font-size: 19px;
    font-weight: 800;
    color: #e67e4a;
    margin-top: 2px
}
.product-card .price::before { content: '$'; font-size: 14px }
.product-card .price.planning { color: #aaa; font-weight: 600 }
.product-card .price.planning::before { content: '' }
.product-card .flavor-hint {
    font-size: 12px;
    color: #1d6b3a;
    margin-top: 4px;
    background: #e8f5e8;
    padding: 2px 14px;
    border-radius: 30px;
    font-weight: 600
}

.product-card .admin-ctrl {
    display: none;
    position: absolute;
    top: 4px;
    left: 4px;
    gap: 3px;
    background: rgba(255,255,255,0.97);
    padding: 6px 8px;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    align-items: center;
    flex-wrap: wrap;
    font-size: 10px;
    z-index: 5;
    border: 1px solid #cfd4db;
    min-width: 200px;
    max-width: 300px
}
.admin-mode .product-card .admin-ctrl { display: flex }
.admin-mode .product-card {
    cursor: default;
    border-style: dashed;
    border-color: #d0c8c0
}
.admin-mode .product-card.disabled {
    opacity: .65;
    filter: grayscale(.6);
    pointer-events: none
}
.admin-mode .product-card.disabled .admin-ctrl {
    pointer-events: auto;
    opacity: 1;
    filter: none
}
.product-card .admin-ctrl .flavor-settings {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    margin-top: 2px
}
.product-card .admin-ctrl .flavor-settings label {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 600
}
.product-card .admin-ctrl .flavor-settings .flavor-type-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 2px
}
.product-card .admin-ctrl .flavor-settings .flavor-type-toggle label {
    font-size: 9px;
    font-weight: 600;
    cursor: pointer
}
.product-card .admin-ctrl .flavor-settings .flavor-type-toggle input[type="radio"] { margin: 0 }
.product-card .admin-ctrl .flavor-settings .flavor-local-input {
    width: 100%;
    padding: 2px 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 9px;
    margin-top: 2px
}
.product-card .admin-ctrl .flavor-settings .flavor-firebase-count {
    font-size: 9px;
    color: #1d6b3a;
    font-weight: 600;
    margin-top: 2px
}

.order-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 10px;
    min-height: 120px
}

.order-item {
    display: flex;
    flex-direction: column;
    padding: 8px 12px 6px 12px;
    background: #f3f5f8;
    border: 1px solid #cfd4db;
    border-radius: 16px;
    margin-bottom: 6px;
    position: relative;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.order-item .row1 {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.order-item .row1 .name {
    font-weight: 700;
    font-size: 17px;
    color: #2d1f14;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.order-item .row1 .qty-ctrl {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #d5d9df;
    border-radius: 30px;
    padding: 2px 6px;
}
.order-item .row1 .qty-ctrl button {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 50%;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2d1f14;
}
.order-item .row1 .qty-ctrl span {
    min-width: 28px;
    text-align: center;
    font-weight: 800;
    font-size: 18px;
}
.order-item .row1 .price {
    color: #e67e4a;
    font-weight: 800;
    font-size: 18px;
    cursor: pointer;
    margin-left: auto;
}
.order-item .flavor-detail {
    font-size: 14px;
    color: #888;
    padding-left: 8px;
    margin-top: 2px;
    border-left: 3px solid #cfd4db;
    margin-bottom: 2px;
}
.order-item .item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
    border-top: 2px dashed #d5cbc2;
    padding-top: 6px;
    background: #e8ebef;
    border-radius: 0 0 12px 12px;
    margin-left: -6px;
    margin-right: -6px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 4px;
}
.order-item .item-actions button {
    border: none;
    border-radius: 30px;
    background: #d5d9df;
    color: #6b5a4a;
    font-size: 11px;
    padding: 2px 12px;
    cursor: pointer;
    font-weight: 600;
    min-height: 28px;
}
.order-item .item-actions button:hover { background: #e0dbd4; }
.order-item .item-actions .discount-btn { background: #fde8d8; color: #e67e4a; }
.order-item .item-actions .discount-btn:hover { background: #fdd0b8; }
.order-item .item-actions .price-btn { background: #e8f0f5; color: #1a5a8a; }
.order-item .item-actions .price-btn:hover { background: #d0e0ec; }
.order-item .item-actions .discount-display {
    font-size: 12px;
    color: #e67e4a;
    font-weight: 600;
    background: #fff;
    border-radius: 30px;
    padding: 0 10px;
    line-height: 24px;
    min-height: 24px;
}
.order-item .item-actions input {
    width: 60px;
    padding: 2px 6px;
    border: 1px solid #ccc;
    border-radius: 30px;
    font-size: 13px;
    text-align: center;
    background: #fff;
    min-height: 28px;
}
.order-item .item-actions .apply-btn {
    background: #2d1f14;
    color: #fff;
    padding: 0 14px;
    font-size: 11px;
}
.order-item .item-actions .apply-btn:hover { background: #1a110a; }
.order-item .item-actions .cancel-discount-btn {
    background: #fce4e4;
    color: #b71c1c;
}

.order-footer {
    padding: 10px 14px;
    border-top: 2px solid #cfd4db;
    background: #f3f5f8;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 80px;
    gap: 6px
}
.order-footer .order-total {
    flex: 0 0 100%;
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    font-weight: 800;
    padding: 2px 4px;
    margin-bottom: 4px
}
.order-footer .order-total .total-amount { color: #e67e4a }
.order-footer .btn-suspend {
    background: #e6e9ee;
    border: none;
    border-radius: 30px;
    padding: 8px 18px;
    font-size: 15px;
    font-weight: 700;
    color: #e67e4a;
    cursor: pointer;
    flex: 1;
    max-width: 120px;
    min-height: 46px
}
.checkout-btn {
    padding: 10px 28px;
    background: #2d1f14;
    color: #fff;
    border: none;
    border-radius: 60px;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    flex: 2;
    min-width: 100px;
    min-height: 52px
}
.checkout-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: .6
}

.empty-state {
    text-align: center;
    color: #bbb;
    padding: 30px 0;
    font-size: 16px
}

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 12px
}
.modal-overlay.active { display: flex }

.modal-box {
    background: #fff;
    border-radius: 28px;
    max-width: 820px;
    width: 100%;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 40px 80px rgba(0,0,0,0.3);
    overflow: hidden
}
.modal-header {
    padding: 14px 20px;
    border-bottom: 2px solid #d5d9df;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background: #f3f5f8;
    min-height: 56px
}
.modal-header h3 {
    font-size: 20px;
    color: #2d1f14;
    display: flex;
    align-items: center;
    gap: 10px
}
.modal-header .close-btn {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #999;
    padding: 0 6px;
    min-height: 40px;
    min-width: 40px;
    border-radius: 50%
}
.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px
}
.modal-footer {
    padding: 10px 18px;
    border-top: 2px solid #d5d9df;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-shrink: 0;
    background: #f3f5f8;
    flex-wrap: wrap;
    min-height: 56px;
    align-items: center
}
.modal-footer button {
    padding: 8px 22px;
    border: none;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    min-height: 40px
}
.modal-footer .btn-primary { background: #2d1f14; color: #fff }
.modal-footer .btn-secondary { background: #d5d9df; color: #6b5a4a }

.flavor-labels-box { max-width: 680px; }
.flavor-labels-help { color: #6b5a4a; font-size: 14px; line-height: 1.55; margin: 0 0 14px; }
.flavor-labels-size { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.flavor-labels-size label { display: flex; align-items: center; gap: 8px; color: #6b5a4a; font-size: 13px; font-weight: 700; }
.flavor-labels-size input { width: 86px; min-height: 38px; border: 1px solid #c3c9d1; border-radius: 10px; padding: 6px 8px; font: inherit; }
.flavor-labels-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: #6b5a4a; font-size: 13px; font-weight: 700; }
.flavor-labels-toolbar > div { display: flex; gap: 6px; }
.flavor-labels-toolbar button { border: 0; border-radius: 18px; background: #e8ebef; color: #2d1f14; padding: 7px 12px; font: inherit; cursor: pointer; }
.flavor-labels-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.flavor-labels-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 10px; border: 1px solid #d5d9df; border-radius: 12px; background: #fff; }
.flavor-labels-row input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; accent-color: #e67e4a; }
.flavor-labels-name { flex: 1; min-width: 0; color: #2d1f14; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.flavor-labels-qty { display: flex; align-items: center; gap: 5px; color: #8a7a6e; font-size: 12px; }
.flavor-labels-qty input { width: 58px; min-height: 34px; border: 1px solid #c3c9d1; border-radius: 8px; padding: 4px 6px; font-size: 14px; }
.flavor-labels-empty { grid-column: 1 / -1; margin: 0; padding: 24px 12px; color: #8a7a6e; text-align: center; }
.flavor-labels-box .modal-footer .btn-primary:disabled { cursor: not-allowed; opacity: .5; }

.flavor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 10px;
    padding: 12px 6px 8px 6px
}
.flavor-section-label {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 700;
    color: #3d2a1e;
    padding: 12px 4px 6px 4px;
    border-bottom: 2px solid #d5d9df;
    margin-top: 4px
}
.flavor-section-label .badge-sync {
    font-size: 11px;
    font-weight: 600;
    background: #e8f0e8;
    color: #1d6b3a;
    padding: 2px 14px;
    border-radius: 30px
}
.flavor-section-label .badge-manual {
    font-size: 11px;
    font-weight: 600;
    background: #e6e9ee;
    color: #e67e4a;
    padding: 2px 14px;
    border-radius: 30px
}
.flavor-divider {
    grid-column: 1/-1;
    height: 1px;
    background: #d5d9df;
    margin: 2px 0 4px 0
}
.flavor-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f5f8;
    border: 2px solid #cfd4db;
    border-radius: 16px;
    padding: 8px 6px;
    font-size: 14px;
    font-weight: 600;
    color: #2d1f14;
    cursor: pointer;
    user-select: none;
    min-height: 52px;
    text-align: center;
    transition: all .15s ease;
    position: relative;
    word-break: break-word;
    line-height: 1.3
}
.flavor-card:active { transform: scale(.94) }
.flavor-card.selected-1 {
    background: #fde8d8;
    border-color: #e67e4a;
    box-shadow: 0 0 0 2px rgba(230,126,74,.2)
}
.flavor-card.selected-2 {
    background: #fdd8b8;
    border-color: #d45f2a;
    box-shadow: 0 0 0 2px rgba(212,95,42,.2)
}
.flavor-card.locked {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(.3)
}
.flavor-card.manual {
    background: #fdf5ed;
    border: 2px dashed #d5c5b5;
    justify-content: center;
    padding: 8px 6px;
    min-height: 52px
}
.flavor-card.manual .fname { text-align: center; padding: 0 4px }
.flavor-card.manual .remove-manual {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 10px;
    font-weight: 600;
    color: #b0a094;
    cursor: pointer;
    background: rgba(255,255,255,.85);
    padding: 0 10px;
    border-radius: 30px;
    line-height: 20px;
    transition: all .2s ease;
    border: 1px solid #cfd4db
}
.flavor-card.manual .remove-manual:hover {
    background: #fce4e4;
    color: #b71c1c;
    border-color: #f0c8c8
}
.flavor-card .fcount {
    font-size: 11px;
    font-weight: 700;
    color: #e67e4a;
    background: #e6e9ee;
    padding: 0 8px;
    border-radius: 30px;
    margin-left: 2px
}

.flavor-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-top: 2px solid #d5d9df;
    background: #f3f5f8;
    border-radius: 0 0 28px 28px;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 60px
}
.flavor-footer #flavorStatus {
    font-size: 15px;
    color: #6b5a4a;
    font-weight: 500;
    padding: 4px 0
}
.flavor-footer #flavorStatus strong { color: #2d1f14 }
.flavor-footer .flavor-actions {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap
}
.flavor-footer .flavor-secondary-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1;
    order: 1
}
.flavor-footer .flavor-actions button {
    border: none;
    border-radius: 12px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    min-height: 42px;
    transition: all .2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px
}
.flavor-footer .flavor-actions .flavor-clear-btn {
    background: #f2ede8;
    color: #6b5a4a;
    border: 1px solid #e2d8cf
}
.flavor-footer .flavor-actions .flavor-clear-btn:hover { background: #cfd4db }
.flavor-footer .flavor-actions .flavor-add-local-btn {
    background: #fff4e8;
    color: #c9652f;
    border: 1px solid #f1c9aa
}
.flavor-footer .flavor-actions .flavor-add-local-btn:hover { background: #fde0d0 }
.flavor-footer .flavor-actions .flavor-manage-btn {
    background: #e8f0f5;
    color: #1a5a8a;
    border: 1px solid #c8d8e8
}
.flavor-footer .flavor-actions .flavor-manage-btn:hover { background: #d0e0ec }
.flavor-footer .flavor-actions .flavor-confirm-btn {
    order: 2;
    margin-left: auto;
    background: #e67e4a;
    color: #fff;
    padding: 10px 28px;
    min-width: 120px;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 5px 12px rgba(230,126,74,.24)
}
.flavor-footer .flavor-actions .flavor-confirm-btn:hover { background: #d45f2a; transform: translateY(-1px) }
.flavor-footer .flavor-actions .flavor-confirm-btn:disabled {
    background: #ccc;
    box-shadow: none;
    cursor: not-allowed;
    opacity: .6
}

@media (max-width:480px){.flavor-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;padding:8px 4px}.flavor-card{min-height:44px;font-size:13px;padding:6px 4px}.flavor-card.manual{min-height:44px;padding:6px 4px}.flavor-card.manual .remove-manual{font-size:9px;bottom:2px;right:4px;padding:0 8px;line-height:18px}.flavor-footer{padding:10px 14px;flex-direction:column;align-items:stretch;gap:8px}.flavor-footer #flavorStatus{text-align:center;font-size:14px}.flavor-footer .flavor-actions{justify-content:stretch;gap:8px}.flavor-footer .flavor-secondary-actions{width:100%;flex:none}.flavor-footer .flavor-actions button{font-size:12px;padding:7px 14px;min-height:38px}.flavor-footer .flavor-actions .flavor-confirm-btn{width:100%;margin-left:0;padding:8px 20px;font-size:14px}}

.cashier-box .modal-box{max-width:480px;border-radius:20px;overflow:visible}
.cashier-box .modal-body{padding:12px 20px 20px;display:flex;flex-direction:column;gap:4px}
.cashier-box .cashier-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px 8px;border-bottom:2px solid #d5d9df;flex-wrap:wrap;gap:8px;background:#f3f5f8;border-radius:20px 20px 0 0}
.cashier-box .cashier-header .order-type-group{display:flex;align-items:center;gap:4px;background:#e6e9ee;padding:2px 4px;border-radius:40px;border:1px solid #cfd4db}
.cashier-box .cashier-header .order-type-group .order-type-btn{border:none;background:transparent;border-radius:30px;padding:6px 12px;font-size:13px;font-weight:700;color:#6b5a4a;cursor:pointer;transition:all .2s}
.cashier-box .cashier-header .order-type-group .order-type-btn.active{background:#2d1f14;color:#fff}
.cashier-box .cashier-header .order-type-group .order-type-btn:active{transform:scale(.94)}
.cashier-box .cashier-header .discount-group{display:flex;align-items:center;gap:6px;background:#e6e9ee;padding:4px 12px 4px 16px;border-radius:40px;border:1px solid #cfd4db}
.order-type-alert-btn{border:2px solid #c3c9d1;background:#e6e9ee;border-radius:30px;padding:10px 20px;font-size:15px;font-weight:700;color:#6b5a4a;cursor:pointer;transition:all .2s;min-width:80px}
.order-type-alert-btn:hover{border-color:#e67e4a;color:#e67e4a}
.order-type-alert-btn:active{transform:scale(.94)}
.cashier-box .cashier-header .discount-group input{width:52px;padding:4px;border:2px solid #c3c9d1;border-radius:30px;font-size:16px;font-weight:700;text-align:center;background:#fff;min-height:32px}
.cashier-box .cashier-header .discount-group .discount-result{font-size:17px;font-weight:800;color:#e67e4a;min-width:80px;text-align:center}
.cashier-box .cashier-row{display:flex;justify-content:space-between;align-items:center;padding:10px 4px;font-size:20px;font-weight:700;border-bottom:1px solid #e8ebef}
.cashier-box .cashier-row .row-value{color:#e67e4a;font-size:22px}
.cashier-box .cashier-row.total-row .row-value{font-size:28px;font-weight:900;color:#2d1f14}
.cashier-box .cashier-row.change-row .row-value{font-size:28px;font-weight:900;color:#1d6b3a}
.cashier-box .cashier-row.received-row .row-value{font-size:24px;font-weight:800;color:#1a6fc4}
/* 實收不足時標紅提醒；找零為 0 時淡化顯示 */
.cashier-box .cashier-row.received-row.insufficient .row-value{color:#c0392b}
.cashier-box .cashier-row.change-row.zero-change .row-value{color:#b0a094}
.cashier-box .payment-methods{display:flex;gap:8px;padding:10px 0;border-bottom:1px solid #d5d9df;flex-wrap:wrap}
.cashier-box .payment-methods .payment-method{flex:1;min-width:70px;padding:10px 0;border:2px solid #ddd;border-radius:30px;background:#e6e9ee;font-size:15px;font-weight:700;color:#6b5a4a;cursor:pointer;text-align:center;transition:all .2s}
.cashier-box .payment-methods .payment-method.active{background:#2d1f14;border-color:#2d1f14;color:#fff}
/* 依付款方式區分顏色：現金=綠、LINE Pay=品牌綠、掛賬=警示紅 */
.cashier-box .payment-methods .payment-method[data-method="cash"].active{background:#1d6b3a;border-color:#1d6b3a;color:#fff}
.cashier-box .payment-methods .payment-method[data-method="linepay"].active{background:#06c755;border-color:#06c755;color:#fff}
.cashier-box .payment-methods .payment-method[data-method="credit"].active{background:#c0392b;border-color:#c0392b;color:#fff}
.cashier-box .payment-methods .payment-method:active{transform:scale(.94)}

.cashier-box .num-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:8px 0}
.cashier-box .num-pad>button.num,.cashier-box .num-pad>button.quick,.cashier-box .num-pad>button.action{padding:12px 0;min-height:58px;font-size:22px;border-radius:14px;border:none;background:#e6e9ee;cursor:pointer;font-weight:700;color:#2d1f14;transition:all .1s;display:flex;align-items:center;justify-content:center}
.cashier-box .num-pad>button.num:active,.cashier-box .num-pad>button.quick:active,.cashier-box .num-pad>button.action:active{transform:scale(.92);background:#cfd4db}
.cashier-box .num-pad .quick{background:#fde8d8;color:#e67e4a}
.cashier-box .num-pad .quick:active{background:#fdd0b8}
.cashier-box .num-pad .action.clear{background:#fce4e4;color:#b71c1c}
.cashier-box .num-pad .action.clear:active{background:#f8c8c8}
.cashier-box .num-pad .remark-btn{background:#e6e9ee;color:#e67e4a;font-size:16px}
.cashier-box .num-pad .remark-btn:active{background:#fde0d0}
.cashier-box .num-pad .btn-confirm-grid{grid-row:span 3;border:none;border-radius:16px;background:#2d1f14;color:#fff;font-size:20px;font-weight:800;cursor:pointer;line-height:1.4;transition:all .15s}
.cashier-box .num-pad .btn-confirm-grid:hover{background:#1a110a}
.cashier-box .num-pad .btn-confirm-grid:active{transform:scale(.96)}
.cashier-box .print-toggle-row{grid-column:span 2;display:flex;gap:8px;background:#e6e9ee;border:1px solid #cfd4db;border-radius:14px;padding:5px}
.cashier-box .print-toggle-row .toggle-print-btn{flex:1;border:none;border-radius:30px;padding:6px 0;font-size:14px;font-weight:700;cursor:pointer;min-height:32px;transition:all .2s;background:#d5d9df;color:#6b5a4a}
.cashier-box .print-toggle-row .toggle-print-btn.active{background:#2d1f14;color:#fff}
.cashier-box .num-pad .btn-confirm-grid:disabled{background:#ccc;cursor:not-allowed;opacity:.6}

.bluetooth-status{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:30px;background:#e6e9ee;border:1px solid #cfd4db;font-size:12px;font-weight:600;color:#6b5a4a;min-height:38px}
.bluetooth-status.connected{background:#e8f5e8;border-color:#34a853;color:#1d6b3a}
.bluetooth-status .bt-dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:#ccc}
.bluetooth-status.connected .bt-dot{background:#34a853}

.floating-toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:rgba(30,30,30,.94);color:#fff;padding:8px 24px;border-radius:50px;font-weight:700;font-size:16px;z-index:99999;backdrop-filter:blur(6px);white-space:nowrap;transition:opacity .35s;opacity:0;pointer-events:none}
.floating-toast.show{opacity:1;pointer-events:auto}

#receipt-print-area,#settle-print-area{display:none}
@media print{body *{visibility:hidden}#receipt-print-area,#receipt-print-area *{visibility:visible}#receipt-print-area{display:block!important;position:fixed;left:0;top:0;width:80mm;background:#fff;padding:6mm;font-family:monospace;white-space:pre;font-size:11px;color:#000}}
@media (max-width:900px){.order-panel{width:280px;min-width:200px}.product-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}
@media (max-width:640px){.order-panel{width:180px;min-width:140px}.product-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}

.stats-header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid #d5d9df}
.stats-period{display:flex;gap:6px}
.stats-period button{padding:8px 20px;border:none;border-radius:30px;background:#e6e9ee;color:#6b5a4a;font-weight:600;font-size:14px;cursor:pointer;transition:all .2s;min-height:38px}
.stats-period button:hover{background:#cfd4db}
.stats-period button.active{background:#2d1f14;color:#fff}
.stats-custom-date{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.stats-custom-date input{padding:6px 12px;border:2px solid #c3c9d1;border-radius:30px;font-size:14px;min-height:38px;background:#fff}
.stats-custom-date button{padding:6px 18px;border:none;border-radius:30px;background:#e67e4a;color:#fff;font-weight:600;font-size:14px;cursor:pointer;min-height:38px;transition:all .2s}
.stats-custom-date button:hover{background:#d45f2a}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.stat-card{background:#f3f5f8;border-radius:16px;padding:18px 12px;text-align:center;border:1px solid #d5d9df;transition:all .2s}
.stat-card:hover{border-color:#e67e4a;transform:translateY(-2px)}
.stat-card .stat-number{font-size:32px;font-weight:800;color:#2d1f14;line-height:1.2}
.stat-card .stat-number.gold{color:#e67e4a}
.stat-card .stat-label{font-size:13px;color:#8a7a6e;margin-top:4px;font-weight:500}
.stat-card.highlight{background:#f3f5f8;border-color:#e67e4a;border-width:2px}
.stats-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.stats-panel{background:#f3f5f8;border-radius:16px;padding:14px 16px;border:1px solid #d5d9df}
.stats-panel .panel-title{font-weight:700;font-size:15px;color:#2d1f14;padding-bottom:8px;border-bottom:2px solid #d5d9df;margin-bottom:10px}
.stats-panel .panel-body{display:flex;flex-direction:column;gap:4px}
.stats-panel .empty-item{color:#b0a094;font-size:14px;padding:8px 0;text-align:center}
.rank-item{display:flex;justify-content:space-between;padding:6px 4px;font-size:14px;border-bottom:1px dashed #d5d9df}
.rank-item:last-child{border-bottom:none}
.rank-item .rank-name{color:#2d1f14;font-weight:500}
.rank-item .rank-qty{color:#e67e4a;font-weight:700}
.pay-item{display:flex;align-items:center;gap:8px;padding:6px 4px;font-size:14px;border-bottom:1px dashed #d5d9df}
.pay-item:last-child{border-bottom:none}
.pay-item .pay-name{font-weight:600;color:#2d1f14;flex:1}
.pay-item .pay-detail{color:#8a7a6e;font-size:13px}
.stats-flavor-row{margin-top:4px}
.stats-flavor-row .flavor-panel .panel-body{flex-direction:row;flex-wrap:wrap;gap:8px}
.flavor-tag{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid #cfd4db;border-radius:30px;padding:4px 16px;font-size:14px;font-weight:500;color:#2d1f14}
.flavor-tag .flavor-qty{color:#e67e4a;font-weight:700;font-size:12px;background:#e6e9ee;padding:0 8px;border-radius:30px}
@media (max-width:640px){.stats-grid{grid-template-columns:1fr 1fr}.stats-grid .stat-card:last-child{grid-column:span 2}.stats-detail-grid{grid-template-columns:1fr}.stats-header{flex-direction:column;align-items:stretch}.stats-period{justify-content:center}.stats-custom-date{justify-content:center}.stat-card .stat-number{font-size:26px}}

.history-layout{display:flex;gap:16px;height:100%;min-height:400px}
.history-left{flex:1;border-right:2px solid #d5d9df;overflow-y:auto;max-height:480px;padding-right:8px}
.history-right{flex:1.5;overflow-y:auto;max-height:480px;padding-left:4px}
.history-date-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 0 12px;border-bottom:2px solid #e8ebef;margin-bottom:12px}
.history-date-filter input{padding:6px 14px;border-radius:30px;border:2px solid #c3c9d1;font-size:14px;min-height:38px;background:#fff}
.history-date-filter button{padding:6px 20px;border:none;border-radius:30px;background:#d5d9df;color:#6b5a4a;font-weight:600;font-size:13px;cursor:pointer;min-height:38px;transition:all .2s}
.history-date-filter button:hover{background:#e67e4a;color:#fff}
.history-date-filter button:first-of-type:hover{background:#2d1f14;color:#fff}
.history-list-scroll{max-height:380px;overflow-y:auto;padding-right:4px}
.history-item{background:#f3f5f8;border-radius:14px;padding:14px 16px;margin-bottom:8px;border:2px solid #d5d9df;cursor:pointer;transition:all .25s ease}
.history-item:hover{border-color:#e67e4a;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.history-item.active{border-color:#e67e4a;background:#e6e9ee;box-shadow:0 4px 16px rgba(230,126,74,.12)}
.history-item .h-row{display:flex;justify-content:space-between;align-items:center;width:100%;overflow:hidden;gap:10px}
.history-item .orderno{font-weight:700;font-size:17px;color:#2d1f14;white-space:nowrap}
.history-item .total{font-weight:800;color:#e67e4a;font-size:17px;white-space:nowrap;text-align:right;flex-shrink:0}
.history-item .date-display{font-size:13px;color:#8a7a6e;font-weight:500}
.history-item .time{font-size:12px;color:#b0a094}
.history-item .weekday{font-size:12px;color:#b0a094;background:#e6e9ee;padding:0 10px;border-radius:30px}
.history-item .h-sub{font-size:12px;color:#b0a094;margin-top:6px;display:flex;gap:12px;flex-wrap:wrap}
.history-item .h-sub span{background:#e6e9ee;padding:0 12px;border-radius:30px;line-height:22px}
.history-item.voided{opacity:.5;filter:grayscale(.4);border-style:dashed}
.history-item.voided .total{color:#999}
.history-detail{padding:4px 6px}
.history-detail .detail-header{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#6b5a4a;border-bottom:2px solid #e8ebef;padding-bottom:10px;margin-bottom:10px}
.history-detail .order-id{font-weight:800;font-size:20px;color:#2d1f14}
.history-detail .order-time{font-size:13px;color:#8a7a6e}
.history-detail .detail-payment{display:inline-block;padding:2px 16px;border-radius:30px;font-size:13px;font-weight:600;margin-bottom:10px}
.history-detail .detail-payment.cash{background:#e8f5e8;color:#1d6b3a}
.history-detail .detail-payment.linepay{background:#e8f0f5;color:#1a5a8a}
.history-detail .detail-items{margin:10px 0;background:#f3f5f8;border-radius:12px;padding:6px 12px}
.history-detail .detail-row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;border-bottom:1px dashed #d5d9df}
.history-detail .detail-row:last-child{border-bottom:none}
.history-detail .detail-row .dname{color:#2d1f14;font-weight:500}
.history-detail .detail-row .dprice{color:#6b5a4a;font-weight:600}
.history-detail .detail-flavor{font-size:12px;color:#8a7a6e;padding-left:20px;margin-bottom:4px}
.history-detail .detail-total{display:flex;justify-content:space-between;align-items:center;font-size:18px;font-weight:800;padding:10px 0 4px;border-top:2px solid #e67e4a;margin-top:4px}
.history-detail .detail-total .total-amount{color:#e67e4a;font-size:22px}
.history-detail .detail-actions{display:flex;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid #e8ebef}
.history-detail .detail-actions button{border:none;border-radius:30px;padding:8px 22px;font-weight:600;font-size:14px;cursor:pointer;min-height:40px;transition:all .2s}
.history-detail .btn-reprint{background:#d5d9df;color:#6b5a4a}
.history-detail .btn-reprint:hover{background:#cfd4db}
.history-detail .btn-void{background:#fce4e4;color:#b71c1c}
.history-detail .btn-void:hover:not(.voided){background:#f8d0d0}
.history-detail .btn-void.voided{background:#d5d9df;color:#aaa;cursor:not-allowed}
@media (max-width:640px){.history-layout{flex-direction:column;min-height:300px}.history-left{border-right:none;border-bottom:2px solid #d5d9df;max-height:260px;padding-right:0;padding-bottom:8px}.history-right{max-height:300px;padding-left:0}.history-date-filter{justify-content:center}.history-item .orderno{font-size:15px}.history-item .total{font-size:15px}.history-detail .order-id{font-size:17px}}

.menu-toolbar .menu-quick-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.btn-admin-mode{background:#e6e9ee;color:#6b5a4a;border:none;border-radius:30px;padding:0 20px;height:38px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn-admin-mode.active{background:#d93025!important;color:#fff!important;animation:blink-admin 1s infinite}
@keyframes blink-admin{0%,100%{opacity:1}50%{opacity:.6}}
.btn-admin-mode:hover{transform:translateY(-1px)}
.btn-add-product{background:#2d1f14;color:#fff;border:none;border-radius:30px;padding:0 20px;height:38px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn-add-product:hover{background:#1a110a}

.btn-announce-top{background:#e6e9ee;color:#e67e4a;border:none;border-radius:30px;padding:4px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;min-height:32px}
.btn-announce-top:hover{background:#fde0d0}

.toggle-print-btn{transition:all .2s ease}
.toggle-print-btn.inactive{background:#d5d9df!important;color:#6b5a4a!important}
.toggle-print-btn.active{background:#2d1f14!important;color:#fff!important}
.cashier-box .modal-body{overflow-y:auto!important;padding-bottom:12px!important}

.printer-settings-box{background:#f8f5f1}
.receipt-editor{border-top:2px solid #e8e0d8;padding-top:18px}
.receipt-editor-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.receipt-editor-heading h4{font-size:20px;color:#2d1f14;margin-bottom:4px}
.receipt-editor-heading p{font-size:13px;color:#8a7a6e}

.receipt-editor-actions{display:flex;gap:8px;flex-wrap:wrap}
.receipt-editor-actions button{border:0;border-radius:10px;padding:9px 14px;background:#ebe5df;color:#6b5a4a;font-size:13px;font-weight:700;cursor:pointer;min-height:38px}
.receipt-editor-actions button.danger{background:#fce4e4;color:#b71c1c}
@media (max-width:480px){.receipt-editor-heading{flex-direction:column;gap:8px}}

@media (max-width:480px){.cashier-box .cashier-header{flex-direction:column;align-items:stretch;gap:4px}.cashier-box .cashier-header>div{justify-content:center}.toggle-print-btn{font-size:12px!important;padding:3px 10px!important;min-height:28px!important}.cashier-box .num-pad button{min-height:48px;font-size:18px;padding:8px 0}.cashier-box .num-pad .btn-confirm-grid{font-size:15px}}
.admin-mode .product-card{border-color:#d93025!important;border-width:3px!important;border-style:dashed!important;background:#fef8f6!important}

/* 網路訂單按鈕 */
.btn-online-orders {
    font-size: 14px;
    padding: 6px 18px;
    border-radius: 30px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

/* 有新訂單時的閃爍效果 */
.btn-online-orders.has-new {
    background: #d93025 !important;
    color: #fff !important;
    animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(217, 48, 37, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(217, 48, 37, 0); }
    100% { box-shadow: 0 0 0 0 rgba(217, 48, 37, 0); }
}

/* 網路訂單列表項目 */
.online-order-item {
    background: #f3f5f8;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
    border: 2px solid #d5d9df;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.online-order-item .info {
    flex: 1;
}
.online-order-item .info h4 {
    margin: 0 0 4px 0;
    color: #2d1f14;
    font-size: 16px;
}
.online-order-item .info p {
    margin: 2px 0;
    font-size: 13px;
    color: #8a7a6e;
}
.online-order-item .actions {
    display: flex;
    gap: 6px;
    flex-direction: column;
}
.online-order-item .actions button {
    border: none;
    border-radius: 30px;
    padding: 6px 16px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    min-height: 36px;
}
.online-order-item .btn-accept {
    background: #34a853;
    color: #fff;
}
.online-order-item .btn-reject {
    background: #fce4e4;
    color: #b71c1c;
}

/* Unified online and historical order workspace */
#app.orders-open .top-bar,
#app.orders-open .main-body { display: none; }

.orders-workspace {
    display: none;
    position: absolute;
    inset: 30px 0 0;
    z-index: 20;
    flex-direction: column;
    overflow: hidden;
    color: #30231b;
    background: #e8ebef;
    touch-action: pan-y;
}
#app.orders-open .orders-workspace { display: flex; }

.orders-topbar {
    min-height: 78px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 12px 34px;
    background: #fff;
    border-bottom: 1px solid #e9e2dc;
}
.orders-back {
    justify-self: start;
    border: 0;
    border-radius: 30px;
    background: #f4eee8;
    color: #594638;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.orders-heading { text-align: center; }
.orders-eyebrow, .orders-kicker, .orders-detail-label {
    color: #ba7450;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
}
.orders-heading h1 { margin: 2px 0 0; font-size: 21px; letter-spacing: .3px; }
.orders-heading p { color: #96877d; font-size: 12px; }
.orders-live {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #72816d;
    font-size: 12px;
    font-weight: 700;
}
.orders-live span { width: 8px; height: 8px; border-radius: 50%; background: #78a47a; box-shadow: 0 0 0 4px #e8f0e6; }
.orders-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    padding: 22px clamp(16px, 3vw, 42px) 28px;
    overflow: auto;
    overscroll-behavior: contain;
}
.orders-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 120px;
    padding: 20px 28px;
    border: 1px solid #f0e5db;
    border-radius: 20px;
    background: linear-gradient(110deg, #fffaf5 0%, #fff 65%, #f5eee7 100%);
    box-shadow: 0 8px 26px rgba(75, 49, 30, .045);
}
.orders-overview-copy h2 { margin: 5px 0; font-size: clamp(20px, 2.4vw, 27px); letter-spacing: -.5px; }
.orders-overview-copy p { color: #96877d; font-size: 13px; }
.orders-stats { display: flex; gap: 12px; }
.orders-stats > div {
    min-width: 112px;
    padding: 12px 16px;
    border-left: 1px solid #eadfd5;
}
.orders-stats span { display: block; color: #938278; font-size: 11px; white-space: nowrap; }
.orders-stats strong { display: block; margin-top: 5px; font-size: 23px; }
.orders-stats > div:first-child strong { color: #cf7550; }
.orders-board {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(320px, .94fr) minmax(380px, 1.06fr);
    gap: 16px;
    min-height: 360px;
    margin-top: 16px;
}
.orders-list-panel, .orders-detail-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #cfd4db;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(75, 49, 30, .04);
}
.orders-list-panel { display: flex; flex-direction: column; }
.orders-list-toolbar { padding: 16px 18px 12px; border-bottom: 1px solid #d5d9df; }
.orders-tabs { display: flex; gap: 22px; margin-bottom: 14px; border-bottom: 1px solid #d5d9df; }
.orders-tab {
    position: relative;
    padding: 0 1px 12px;
    border: 0;
    background: none;
    color: #988a80;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.orders-tab.active { color: #35271f; }
.orders-tab.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #d9815b; content: ""; }
.orders-tab span { display: inline-grid; min-width: 20px; height: 20px; place-items: center; margin-left: 3px; border-radius: 20px; background: #fbede5; color: #c96e4a; font-size: 11px; }
.orders-search { display: flex; align-items: center; gap: 8px; min-height: 39px; padding: 0 11px; border: 1px solid #d5d9df; border-radius: 10px; background: #fbfaf8; color: #ad9e93; }
.orders-search span { font-size: 22px; line-height: 1; }
.orders-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #382a21; font-size: 12px; }
.orders-date { display: flex; align-items: center; gap: 9px; margin-top: 9px; color: #a08f83; font-size: 11px; }
.orders-date input { padding: 5px 9px; border: 1px solid #d5d9df; border-radius: 8px; color: #514239; background: #fff; font: inherit; }
.orders-list-meta { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px 7px; color: #9a8a7f; font-size: 11px; font-weight: 700; }
.orders-list-meta button { border: 0; background: none; color: #c27655; font: inherit; cursor: pointer; }
.orders-list { flex: 1; min-height: 120px; padding: 0 12px 12px; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; }
.orders-card { display: block; width: 100%; margin: 4px 0 8px; padding: 13px 14px; border: 1px solid #d5d9df; border-radius: 12px; background: #fff; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.orders-card:hover { transform: translateY(-1px); border-color: #e4c2ae; }
.orders-card.selected { border-color: #d98560; background: #eef3fb; box-shadow: 0 3px 12px rgba(204, 119, 78, .09); }
.orders-card.is-pending { border-left: 3px solid #d98560; }
.orders-card-top, .orders-card-main, .orders-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.orders-card-top { margin-bottom: 7px; }
.orders-type { padding: 4px 8px; border-radius: 20px; font-size: 10px; font-weight: 800; }
.orders-type.online { background: #fff0e8; color: #bf6846; }
.orders-type.pos { background: #f1f0ec; color: #756a60; }
.orders-card-time { color: #ab9d93; font-size: 10px; }
.orders-card-main strong { overflow: hidden; color: #33271f; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.orders-card-main b { color: #bd7655; font-size: 14px; white-space: nowrap; }
.orders-card-bottom { margin-top: 7px; color: #998a80; font-size: 11px; }
.orders-card-bottom > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orders-status { flex-shrink: 0; color: #8e8278; }
.orders-status.waiting { color: #c5724f; font-weight: 800; }
.orders-empty { display: flex; min-height: 220px; flex-direction: column; align-items: center; justify-content: center; padding: 24px; color: #a39489; text-align: center; }
.orders-empty > span, .orders-detail-empty > span { color: #d99a77; font-size: 28px; }
.orders-empty strong { margin: 10px 0 4px; color: #59483c; font-size: 14px; }
.orders-empty p, .orders-detail-empty p { font-size: 12px; line-height: 1.7; }
.orders-detail-panel { padding: 24px clamp(18px, 3vw, 34px); overflow: auto; overscroll-behavior: contain; touch-action: pan-y; }
.orders-detail-empty { display: flex; min-height: 300px; flex-direction: column; align-items: center; justify-content: center; color: #a39489; text-align: center; }
.orders-detail-empty h3 { margin: 12px 0 5px; color: #59483c; font-size: 15px; }
.orders-detail-head { position: relative; padding-bottom: 17px; border-bottom: 1px solid #d5d9df; }
.orders-detail-status { position: absolute; top: 0; right: 0; padding: 6px 10px; border-radius: 20px; background: #f0efec; color: #71675f; font-size: 10px; font-weight: 800; }
.orders-detail-status.waiting { background: #fff0e8; color: #c16b49; }
.orders-detail-head h2 { margin: 7px 0 4px; font-size: clamp(20px, 2vw, 25px); }
.orders-detail-head p { color: #9e8f84; font-size: 12px; }
.orders-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; padding: 17px 0; border-bottom: 1px solid #d5d9df; }
.orders-info-grid span { display: block; margin-bottom: 4px; color: #a5968b; font-size: 10px; }
.orders-info-grid strong { color: #504137; font-size: 12px; }
.orders-items-heading { display: flex; justify-content: space-between; margin: 18px 0 9px; color: #57463b; font-size: 13px; }
.orders-items-heading span { color: #aa9a8f; font-size: 11px; }
.orders-items { border-top: 1px solid #f1ece8; }
.orders-item { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; padding: 12px 0; border-bottom: 1px solid #f3efeb; }
.orders-item-index { color: #c1b2a8; font-size: 10px; }
.orders-item strong { display: block; color: #493a30; font-size: 12px; }
.orders-item small { display: block; margin-top: 3px; color: #a29388; font-size: 10px; }
.orders-item-qty, .orders-item b { color: #7d6c60; font-size: 11px; white-space: nowrap; }
.orders-no-items { padding: 20px 0; color: #a39489; font-size: 12px; }
.orders-total { display: flex; justify-content: space-between; align-items: center; padding: 17px 0; color: #67564b; font-size: 13px; }
.orders-total strong { color: #c67552; font-size: 22px; }
.orders-detail-actions { display: flex; gap: 10px; padding-top: 15px; border-top: 1px solid #d5d9df; }
.orders-detail-actions button { min-height: 42px; padding: 0 18px; border: 0; border-radius: 9px; font-size: 12px; font-weight: 800; cursor: pointer; }
.orders-accept { flex: 1; background: #cf805d; color: #fff; }
.orders-reject, .orders-void { background: #f7efeb; color: #a65d45; }
.orders-print { background: #342820; color: #fff; }
.orders-void:disabled { color: #aaa; cursor: not-allowed; }

@media (max-width: 760px) {
    .orders-topbar { grid-template-columns: 1fr auto; padding: 10px 14px; }
    .orders-heading { grid-column: 1; grid-row: 1; text-align: left; }
    .orders-heading h1 { font-size: 18px; }
    .orders-heading p { display: none; }
    .orders-back { grid-column: 2; grid-row: 1; padding: 9px 12px; font-size: 12px; }
    .orders-live { display: none; }
    .orders-content { padding: 12px 10px 18px; }
    .orders-overview { align-items: stretch; flex-direction: column; gap: 14px; padding: 16px; }
    .orders-overview-copy h2 { font-size: 20px; }
    .orders-stats { gap: 0; justify-content: space-between; }
    .orders-stats > div { min-width: 0; flex: 1; padding: 8px 9px; }
    .orders-stats span { font-size: 9px; }
    .orders-stats strong { font-size: 19px; }
    .orders-board { display: flex; flex-direction: column; min-height: unset; margin-top: 10px; }
    .orders-list-panel { min-height: 360px; }
    .orders-detail-panel { min-height: 300px; }
}
@media (max-width: 420px) {
    .orders-search input { font-size: 11px; }
    .orders-info-grid { gap: 12px; }
    .orders-detail-panel { padding: 20px 16px; }
    .orders-item { grid-template-columns: 20px minmax(0, 1fr) auto; }
    .orders-item b { grid-column: 2 / 4; justify-self: end; }
}

/* ===== 測試模式（資料隔離）===== */
.test-mode-banner {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 34px;
    min-height: 34px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #3a2a06;
    background: repeating-linear-gradient(
        135deg,
        #ffd65a,
        #ffd65a 16px,
        #ffc531 16px,
        #ffc531 32px
    );
    border-bottom: 2px solid #e0a600;
    z-index: 50;
}
#app.test-mode-active .test-mode-banner { display: flex; }
#app.test-mode-active .orders-workspace { inset: 64px 0 0; }

.test-mode-panel { margin-top: 18px; border-top: 1px dashed #c3c9d1; padding-top: 18px; }
.test-mode-panel .receipt-editor-heading p { max-width: 640px; }
.test-mode-toggle-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
}
.test-mode-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 30px;
    flex-shrink: 0;
}
.test-mode-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.test-mode-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #d8cfc5;
    border-radius: 30px;
    transition: 0.2s;
}
.test-mode-slider::before {
    content: "";
    position: absolute;
    height: 24px;
    width: 24px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.test-mode-switch input:checked + .test-mode-slider {
    background: #e0a600;
}
.test-mode-switch input:checked + .test-mode-slider::before {
    transform: translateX(22px);
}
.test-mode-status-label {
    font-weight: 700;
    color: #6b5a4a;
    font-size: 14px;
}
.test-mode-status-label.is-on { color: #a35b00; }

/* 訂單狀態色彩 */
.orders-status[data-status="accepted"], .orders-detail-status[data-status="accepted"] { background: #e8f1fb; color: #2f6fb0; }
.orders-status[data-status="preparing"], .orders-detail-status[data-status="preparing"] { background: #fff4d6; color: #a77100; }
.orders-status[data-status="ready"], .orders-detail-status[data-status="ready"] { background: #e3f4e5; color: #2f7d3a; }
.orders-status[data-status="completed"], .orders-detail-status[data-status="completed"] { background: #eef0ee; color: #5d6b5e; }
.orders-status[data-status="rejected"], .orders-status[data-status="cancelled"], .orders-status[data-status="voided"],
.orders-detail-status[data-status="rejected"], .orders-detail-status[data-status="cancelled"], .orders-detail-status[data-status="voided"] { background: #fce4e4; color: #b71c1c; }
.orders-status[data-status] { padding: 2px 8px; border-radius: 20px; font-weight: 700; }

/* 免捲動：清單改為分頁，視窗自動縮放適配畫面 */
.orders-list { overflow: hidden; touch-action: manipulation; }
.orders-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 12px; }
.orders-pager[hidden] { display: none; }
.orders-pager button { flex: 1; min-height: 44px; border: 1px solid #c3c9d1; border-radius: 12px; background: #fff; color: #5a4636; font-size: 15px; font-weight: 700; cursor: pointer; }
.orders-pager button:disabled { opacity: .35; cursor: default; }
.orders-pager span { min-width: 64px; text-align: center; color: #7a6a5c; font-weight: 700; }
.modal-box { max-height: 98vh; }
::-webkit-scrollbar { display: none; }

/* 訂單中心精簡版：單列頂欄＋左清單右明細 */
.orders-topbar { display: flex; align-items: center; gap: 16px; padding: 8px 14px; min-height: 0; }
.orders-topbar h1 { margin: 0; font-size: 18px; }
.orders-topbar .orders-stats { margin-left: auto; gap: 8px; }
.orders-topbar .orders-stats > div { display: flex; align-items: baseline; gap: 6px; padding: 5px 12px; min-width: 0; }
.orders-topbar .orders-stats strong { margin: 0; font-size: 16px; }
.orders-content { padding: 10px; overflow: hidden; }
.orders-board { height: 100%; grid-template-columns: 380px minmax(0, 1fr); gap: 10px; }
.orders-list-toolbar { padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.orders-tabs { margin: 0; gap: 14px; border: 0; width: 100%; }
.orders-search { flex: 1; min-width: 0; min-height: 36px; }
.orders-date { margin: 0; }
.orders-list-meta { padding: 4px 12px; }
.orders-list { padding: 0 8px; min-height: 0; }
.orders-card { margin: 0 0 6px; padding: 8px 10px; height: 54px; box-sizing: border-box; }
.orders-card-main, .orders-card-bottom { margin: 0; }
.orders-card-main { gap: 8px; justify-content: flex-start; }
.orders-card-main b { margin-left: auto; }
.orders-card-bottom { margin-top: 4px; }
.orders-pager { padding: 6px 8px 8px; }
.orders-pager button { min-height: 38px; font-size: 14px; }
.orders-detail-panel { padding: 16px 20px; }
.orders-board { min-height: 0; margin-top: 0; }
.orders-list-panel { min-height: 0; }
.orders-list-panel .orders-list { flex: 1 1 0; }

/* 對照銀豹架構：左清單（單號＋狀態／時間＋金額），右明細（表格＋固定底部按鈕列） */
.orders-card { height: 58px; padding: 7px 12px; border-radius: 8px; }
.orders-card-top, .orders-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.orders-card-top strong { font-size: 14px; }
.orders-card-bottom { margin-top: 4px; font-size: 11px; color: #8d7f75; }
.orders-card-bottom b { font-size: 15px; color: #c0643f; white-space: nowrap; }
.orders-card.selected { background: #cf805d; border-color: #cf805d; }
.orders-card.selected strong, .orders-card.selected .orders-card-bottom, .orders-card.selected .orders-card-bottom b { color: #fff; }
.orders-detail-panel { display: flex; flex-direction: column; padding: 0; overflow: hidden; background: #f3f1ee; }
.orders-detail-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: #fff; border-bottom: 1px solid #e8e2dc; }
.orders-detail-head h2 { margin: 0; font-size: 16px; color: #bf6846; }
.orders-detail-status { position: static; }
.orders-info-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; padding: 10px 18px; border: 0; }
.orders-table { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0 18px; background: #fff; border: 1px solid #ddd5cd; }
.orders-table-head, .orders-item { display: grid; grid-template-columns: minmax(0, 1fr) 60px 70px 80px; gap: 8px; padding: 9px 12px; text-align: right; }
.orders-table-head { color: #6d5e53; font-size: 13px; border-bottom: 1px solid #ece6e0; }
.orders-table-head span:first-child, .orders-item > div { text-align: left; }
.orders-table-meta { padding: 7px 12px; background: #f5f0ea; color: #6d5e53; font-size: 12px; border-bottom: 1px solid #ece6e0; }
.orders-items { flex: 1; min-height: 0; overflow-y: auto; border: 0; }
.orders-item strong { font-size: 14px; }
.orders-item span, .orders-item b { font-size: 13px; color: #4a3b31; }
.orders-total { padding: 8px 18px; font-size: 13px; }
.orders-total strong { font-size: 16px; color: #3a2d24; }
.orders-detail-actions { padding: 10px 18px; background: #fff; border-top: 1px solid #e8e2dc; }
.orders-detail-actions button { min-height: 46px; font-size: 15px; }

/* ===== 中性灰白配色：線條與區塊清楚分隔 ===== */
.modal-box, .orders-list-panel, .orders-detail-panel, .orders-card { border-color: #b8bfc8; }
.orders-card { border: 1px solid #c3c9d1; background: #fff; }
.orders-card.selected { background: #cf805d; border-color: #b96b49; }
.orders-topbar { background: #fff; border-bottom: 2px solid #c3c9d1; }
.orders-detail-head, .orders-detail-actions { border-color: #c3c9d1; }
.orders-table { border-color: #b8bfc8; }
.orders-table-head { background: #eef0f3; border-bottom: 1px solid #b8bfc8; }
.orders-table-meta { background: #e6e9ee; border-bottom: 1px solid #c3c9d1; }
.orders-item { border-bottom: 1px solid #d5d9df; }
.modal-header, .modal-footer { border-color: #c3c9d1; }

/* ===== 營業概況 ===== */
#settleModal .modal-box { max-width: 1000px; }
#settleModal .modal-body { background: #e8ebef; padding: 12px; }
.st-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 12px; }
.st-side, .st-table { background: #fff; border: 1px solid #b8bfc8; border-radius: 6px; }
.st-side { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.st-ranges { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #b8bfc8; border-radius: 6px; overflow: hidden; }
.st-ranges button { min-height: 42px; border: 0; border-right: 1px solid #b8bfc8; border-bottom: 1px solid #b8bfc8; background: #fff; color: #333; font-size: 15px; cursor: pointer; }
.st-ranges button:nth-child(3n) { border-right: 0; }
.st-ranges button:nth-child(n+4) { border-bottom: 0; }
.st-ranges button.active { background: #2f80ed; color: #fff; font-weight: 700; }
.st-dates { display: flex; flex-direction: column; gap: 8px; }
.st-dates input { min-height: 40px; padding: 0 10px; border: 1px solid #b8bfc8; border-radius: 6px; font-size: 14px; background: #fff; }
.st-dates button { min-height: 40px; border: 0; border-radius: 6px; background: #2f80ed; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.st-kpi { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #b8bfc8; border-radius: 6px; }
.st-kpi > div { padding: 12px 8px; text-align: center; }
.st-kpi-main { border-right: 1px solid #b8bfc8; }
.st-kpi strong { display: block; font-size: 26px; color: #222; }
.st-kpi-main strong { color: #e8590c; }
.st-kpi-sub strong { color: #2b8a3e; font-size: 22px; }
.st-kpi span { display: block; margin-top: 4px; color: #6b7280; font-size: 13px; }
.st-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.st-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 120px; align-items: center; min-height: 44px; padding: 0 14px; border-bottom: 1px solid #d5d9df; font-size: 16px; color: #333; }
.st-row:last-child { border-bottom: 0; }
.st-row > span:not(:first-child) { text-align: right; }
.st-head { background: #f3f5f8; color: #e8590c; font-weight: 700; border-bottom: 2px solid #b8bfc8; }
.st-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-row2, .st-head2 { grid-template-columns: minmax(0, 1fr) 60px; min-height: 38px; font-size: 15px; }
.st-empty { padding: 14px; text-align: center; color: #9aa1ab; }
/* 選中卡片上的狀態標籤維持原色並加白底，避免與橘底融在一起 */
.orders-card.selected .orders-status { background-color: #fff; box-shadow: 0 0 0 2px #fff; }
.orders-card.selected .orders-status:not([data-status]) { color: #8e8278; }

.orders-adjust { display: block; margin-top: 3px; color: #d9480f; font-size: 12px; font-style: normal; font-weight: 700; }
.orders-extra { margin: 8px 18px 0; background: #fff; border: 1px solid #b8bfc8; border-radius: 6px; }
.orders-extra > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #d5d9df; font-size: 14px; color: #333; }
.orders-extra > div:last-child { border-bottom: 0; }
.orders-extra b { color: #d9480f; text-align: right; word-break: break-all; }

/* ===== 訂單明細：整合資訊卡 ===== */
.orders-info-card {
    margin: 12px 18px 0;
    background: #fff;
    border: 1px solid #b8bfc8;
    border-radius: 10px;
    overflow: hidden;
}
.orders-info-customer {
    padding: 14px 16px;
    border-bottom: 1px solid #e8e2dc;
    background: linear-gradient(110deg, #fffaf5 0%, #fff 70%);
}
.orders-info-customer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.orders-info-customer-head .info-label {
    font-size: 11px;
    font-weight: 800;
    color: #9e8f84;
    letter-spacing: 1px;
}
.orders-info-customer-body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
}
.orders-info-customer-body .customer-name {
    font-size: 20px;
    font-weight: 800;
    color: #2d1f14;
}
.contact-phone-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.contact-phone-row .phone-number {
    font-size: 16px;
    font-weight: 700;
    color: #1a6fc4;
    letter-spacing: 1px;
}
.contact-phone-row .phone-number.empty {
    color: #b0a094;
    font-weight: 500;
    letter-spacing: 0;
}
.orders-info-customer-body .member-no {
    width: 100%;
    font-size: 12px;
    color: #8a7a6e;
}
.contact-tag {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.contact-tag.guest { background: #fff4e8; color: #c9652f; }
.contact-tag.line  { background: #e6f7ec; color: #06c755; }

.orders-info-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    background: #fafbfc;
}
.orders-info-meta .info-block {
    padding: 12px 16px;
    border-right: 1px solid #ece6e0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.orders-info-meta .info-block:last-child {
    border-right: 0;
}
.orders-info-meta .info-label {
    font-size: 11px;
    font-weight: 800;
    color: #9e8f84;
    letter-spacing: 0.5px;
}
.orders-info-meta .info-block strong {
    font-size: 14px;
    color: #2d1f14;
    font-weight: 700;
    word-break: break-word;
}

.contact-copy, .contact-call {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    background: #eef0f3;
    color: #2f80ed;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    white-space: nowrap;
}
.contact-call { background: #e8f5e8; color: #2b8a3e; }
.contact-copy:active, .contact-call:active { transform: scale(0.95); }

@media (max-width: 640px) {
    .orders-info-card { margin: 10px 12px 0; }
    .orders-info-customer-body .customer-name { font-size: 18px; }
    .orders-info-meta { grid-template-columns: 1fr 1fr; }
    .orders-info-meta .info-block:nth-child(2n) { border-right: 0; }
    .orders-info-meta .info-block:nth-child(-n+2) { border-bottom: 1px solid #ece6e0; }
}

/* ===== 新版頂部欄設計 ===== */
.top-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    background: #fff;
    border-bottom: 2px solid #cfd4db;
    min-height: 64px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow: visible;
}

/* --- 左：品牌 --- */
.top-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.top-logo {
    height: 44px;
    width: auto;
    object-fit: contain;
    border-radius: 10px;
}
.top-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.top-brand-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
}
.top-brand-sub {
    font-size: 12px;
    color: #8a7a6e;
    letter-spacing: 1px;
}

/* --- 中：主要操作 --- */
.top-center {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.btn-top-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 30px;
    border: none;
    background: #eef0f3;
    color: #2d1f14;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    white-space: nowrap;
    min-height: 40px;
}
.btn-top-action:hover { background: #d5d9df; transform: translateY(-1px); }
.btn-top-action:active { transform: scale(0.96); }

.btn-orders { background: #eef3fb; color: #2f6fb0; }
.btn-orders.has-new {
    background: #d93025 !important;
    color: #fff !important;
    animation: pulse-red 1.5s infinite;
}
.btn-orders .badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #d93025;
    color: #fff;
    border-radius: 50%;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 800;
    display: none;
    align-items: center;
    justify-content: center;
}
.btn-orders.has-new .badge { display: inline-flex; }

.btn-settle { background: #2d1f14; color: #fff; }
.btn-settle:hover { background: #1a110a; }

/* --- 右：狀態 + 選單 + 使用者 --- */
.top-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.status-cluster {
    display: flex;
    gap: 4px;
    padding: 4px 6px;
    background: #f5f6f8;
    border-radius: 30px;
    border: 1px solid #e0e0e0;
}
.status-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 12px;
    font-weight: 600;
    color: #6b5a4a;
    min-height: 30px;
}
.status-chip:hover { background: #e8ebef; }
.status-chip .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.status-chip .dot.green { background: #34a853; box-shadow: 0 0 8px rgba(52,168,83,0.5); }
.status-chip .dot.red { background: #ea4335; }
.status-chip .dot.off { background: #ccc; }
.status-chip .dot.blink { animation: blink 1s infinite; }

/* 下拉選單 */
.dropdown { position: relative; }
.btn-menu { background: #eef0f3; }
.dropdown-content {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #cfd4db;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    padding: 6px;
    min-width: 180px;
    z-index: 1000;
    display: none;
}
.dropdown.open .dropdown-content { display: block; }
.dropdown-content button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #2d1f14;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.dropdown-content button:hover { background: #f5f6f8; }

/* 使用者 */
.user-area {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    background: #d5d9df;
    border-radius: 30px;
    font-size: 13px;
    color: #6b5b4e;
    min-height: 40px;
}
.user-area .user-icon { font-size: 14px; }
.user-area .logout-btn {
    background: #fff;
    border: none;
    color: #2d1f14;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 5px 14px;
    border-radius: 30px;
    transition: all 0.2s;
    min-height: 30px;
}
.user-area .logout-btn:hover { background: #fce4e4; color: #b71c1c; }

/* --- 購物車面板標題 --- */
.order-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #f3f5f8;
    border-bottom: 2px solid #d5d9df;
    flex-shrink: 0;
    min-height: 52px;
}
.cart-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 800;
    color: #2d1f14;
}
.cart-count-badge {
    font-size: 12px;
    font-weight: 700;
    color: #6b5a4a;
    background: #d5d9df;
    padding: 2px 10px;
    border-radius: 30px;
    min-width: 30px;
    text-align: center;
}
.cart-actions { display: flex; gap: 6px; }
.btn-cart-action {
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 30px;
    transition: all 0.2s;
    min-height: 32px;
}
.btn-cart-action.btn-take { color: #e67e4a; }
.btn-cart-action.btn-take:hover { background: #fde8d8; }
.btn-cart-action.btn-clear { color: #b71c1c; }
.btn-cart-action.btn-clear:hover { background: #fce4e4; }

/* --- 響應式：小螢幕收合 --- */
@media (max-width: 1200px) {
    .top-brand-sub { display: none; }
    .btn-top-action { padding: 8px 14px; font-size: 13px; }
    .status-chip .status-label { display: none; }
    .status-chip { padding: 4px 8px; }
}
@media (max-width: 900px) {
    .top-bar { gap: 8px; padding: 6px 10px; min-height: 58px; }
    .top-logo { height: 36px; }
    .top-brand-title { font-size: 13px; }
    .btn-top-action { padding: 7px 12px; font-size: 12px; min-height: 36px; }
    .btn-top-action .badge { font-size: 10px; min-width: 18px; height: 18px; }
    .user-area { padding: 3px 4px 3px 10px; font-size: 12px; }
    .user-area .logout-btn { padding: 4px 10px; font-size: 11px; }
}

.btn-menu.has-new-wish {
    background: #fff4e8 !important;
    color: #c9652f !important;
}
.btn-menu.has-new-wish::after {
    content: '●';
    position: absolute;
    top: 2px;
    right: 4px;
    color: #d93025;
    font-size: 14px;
    animation: pulse-dot 1.5s infinite;
}

#wishMgmtBtn {
    position: relative;
}
#wishMgmtBtn.has-new-wish {
    background: #fff4e8;
    color: #c9652f;
}
.wish-badge {
    position: absolute;
    top: 2px;
    right: 6px;
    background: #d93025;
    color: #fff;
    border-radius: 30px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 800;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
}


/* ===== G4 導航欄樣式 ===== */
.top-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #fff;
    border-bottom: 2px solid #cfd4db;
    min-height: 62px;
    flex-shrink: 0;
}

/* 漢堡按鈕 */
.hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 9px;
    border: none;
    border-radius: 12px;
    background: #eef0f3;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s;
}
.hamburger-btn:active { transform: scale(.94); }
.hamburger-btn span {
    display: block;
    height: 3px;
    border-radius: 3px;
    background: #2d1f14;
}

/* 品牌區 */
.top-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.top-logo {
    height: 42px;
    width: auto;
    object-fit: contain;
    border-radius: 10px;
}
.top-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.top-brand-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
}
.top-brand-sub {
    font-size: 11px;
    color: #8a7a6e;
    letter-spacing: 1px;
}

/* 右側主要按鈕與狀態 */
.top-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.btn-top-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 30px;
    border: none;
    background: #eef0f3;
    color: #2d1f14;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    min-height: 40px;
    transition: all .2s;
    position: relative;
}
.btn-top-action:hover { background: #d5d9df; transform: translateY(-1px); }
.btn-top-action:active { transform: scale(.96); }
.btn-orders { background: #eef3fb; color: #2f6fb0; }
.btn-orders.has-new { background: #d93025 !important; color: #fff !important; animation: pulse-red 1.5s infinite; }
.btn-orders .badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #d93025;
    color: #fff;
    border-radius: 50%;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 800;
    display: none;
    align-items: center;
    justify-content: center;
}
.btn-orders.has-new .badge { display: inline-flex; }
.btn-settle { background: #2d1f14; color: #fff; }
.btn-settle:hover { background: #1a110a; }
.btn-wish { background: #fff4e8; color: #c9652f; }

/* 狀態燈群組 */
.status-cluster {
    display: flex;
    gap: 4px;
    padding: 4px 6px;
    background: #f5f6f8;
    border-radius: 30px;
    border: 1px solid #e0e0e0;
}
.status-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 30px;
    cursor: pointer;
    transition: background .2s;
    font-size: 12px;
    font-weight: 600;
    color: #6b5a4a;
    min-height: 30px;
}
.status-chip:hover { background: #e8ebef; }
.status-chip .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.status-chip .dot.green { background: #34a853; box-shadow: 0 0 8px rgba(52,168,83,.5); }
.status-chip .dot.red { background: #ea4335; }
.status-chip .dot.off { background: #ccc; }
.status-chip .dot.blink { animation: blink 1s infinite; }

/* 左側抽屜 */
.nav-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(3px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
.nav-drawer-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}
.nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    max-width: 86vw;
    height: 100%;
    background: #fff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    box-shadow: 8px 0 30px rgba(0,0,0,.15);
    transform: translateX(-105%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.nav-drawer.open { transform: translateX(0); }

.nav-drawer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid #e8ebef;
}
.nav-drawer-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 10px;
}
.nav-drawer-head-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    flex: 1;
}
.nav-drawer-head-text strong { font-size: 15px; color: #2d1f14; }
.nav-drawer-head-text span { font-size: 11px; color: #8a7a6e; }
.nav-drawer-close {
    border: none;
    background: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 50%;
}

.nav-drawer-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f7f8fa;
    border-bottom: 1px solid #e8ebef;
}
.user-avatar { font-size: 20px; }
.user-meta {
    display: flex;
    flex-direction: column;
    flex: 1;
    line-height: 1.3;
}
.user-meta strong { font-size: 14px; color: #2d1f14; }
.user-meta span { font-size: 11px; color: #8a7a6e; }
.logout-btn {
    border: none;
    background: #fff;
    color: #b71c1c;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 30px;
    cursor: pointer;
    min-height: 32px;
    transition: background .2s;
}
.logout-btn:hover { background: #fce4e4; }

.nav-drawer-menu {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nav-drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: none;
    background: transparent;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #2d1f14;
    cursor: pointer;
    text-align: left;
    transition: background .15s;
}
.nav-drawer-item:hover { background: #f3f5f8; }
.nav-drawer-item .ndi-ico { font-size: 18px; width: 24px; text-align: center; }
.nav-drawer-item .ndi-label { flex: 1; }
.nav-drawer-item .ndi-state {
    font-size: 11px;
    font-weight: 700;
    color: #8a7a6e;
    background: #eef0f3;
    padding: 2px 10px;
    border-radius: 30px;
}
.nav-drawer-divider {
    height: 1px;
    background: #e8ebef;
    margin: 6px 10px;
}
.nav-drawer-foot {
    display: flex;
    justify-content: space-between;
    padding: 12px 18px;
    border-top: 1px solid #e8ebef;
    font-size: 11px;
    color: #b0a094;
}


/* =========================================
   G4 藍色 tint 毛玻璃風格
   ========================================= */

/* 讓整體背景有漸層，毛玻璃才看得出效果（可選） */
#app {
    background: linear-gradient(135deg, #eef2f7 0%, #e2eaf5 50%, #f0f4f9 100%);
}

/* =========================================
   頂部欄 G4 半透明立體（3D Glass）
   依 glass-19 樣式調整為淺色底適用
   ========================================= */

.top-bar {
    background: linear-gradient(135deg,
        rgba(225, 235, 255, 0.60) 0%,
        rgba(240, 245, 255, 0.42) 100%) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.75) !important;
    box-shadow: 0 4px 24px rgba(70, 110, 180, 0.10);
}

/* 基本玻璃按鈕 */
.top-right .btn-top-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 22px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.90);
    color: #1a3b5c;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.4px;
    cursor: pointer;
    white-space: nowrap;
    min-height: 44px;
    transition: all 0.12s ease;
    box-shadow:
        0 4px 0 rgba(70, 110, 180, 0.16),
        0 8px 28px rgba(70, 110, 180, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.top-right .btn-top-action:hover {
    background: rgba(255, 255, 255, 0.72);
    transform: translateY(-1px);
    box-shadow:
        0 5px 0 rgba(70, 110, 180, 0.18),
        0 10px 32px rgba(70, 110, 180, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}
.top-right .btn-top-action:active {
    transform: translateY(4px);
    box-shadow:
        0 0 0 rgba(70, 110, 180, 0.16),
        0 3px 12px rgba(70, 110, 180, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* 訂單中心：藍色玻璃 */
.top-right .btn-orders {
    background: linear-gradient(135deg,
        rgba(96, 145, 230, 0.78),
        rgba(130, 175, 250, 0.58));
    color: #fff;
    text-shadow: 0 1px 2px rgba(30, 60, 120, 0.35);
    border-color: rgba(255, 255, 255, 0.8);
}
.top-right .btn-orders:hover {
    background: linear-gradient(135deg,
        rgba(96, 145, 230, 0.92),
        rgba(130, 175, 250, 0.72));
}
.top-right .btn-orders.has-new {
    background: linear-gradient(135deg, #d93025, #ff5a4e) !important;
    color: #fff !important;
    animation: pulse-red 1.5s infinite;
}

/* 許願池：暖陽玻璃 */
.top-right .btn-wish {
    background: linear-gradient(135deg,
        rgba(235, 155, 90, 0.78),
        rgba(245, 190, 130, 0.58));
    color: #fff;
    text-shadow: 0 1px 2px rgba(150, 70, 20, 0.3);
    border-color: rgba(255, 255, 255, 0.8);
}
.top-right .btn-wish:hover {
    background: linear-gradient(135deg,
        rgba(235, 155, 90, 0.92),
        rgba(245, 190, 130, 0.72));
}

/* 營業時間：白玻璃 + 狀態點 */
.top-right .btn-hours {
    background: rgba(255, 255, 255, 0.52);
    color: #1a3b5c;
    padding: 10px 20px;
    gap: 8px;
}
.top-right .btn-hours:hover {
    background: rgba(255, 255, 255, 0.74);
}
.btn-hours .hours-label {
    font-weight: 700;
    opacity: 0.7;
    font-size: 13px;
}
.btn-hours .hours-sep {
    opacity: 0.35;
    font-weight: 900;
}
.btn-hours .hours-state-text {
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.4px;
}
.btn-hours .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    flex-shrink: 0;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.85),
        0 0 10px currentColor;
    transition: background 0.35s ease;
}

/* 漢堡按鈕同步玻璃質感 */
.hamburger-btn {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow:
        0 3px 0 rgba(70, 110, 180, 0.16),
        0 6px 20px rgba(70, 110, 180, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    transition: all 0.12s ease;
}
.hamburger-btn:active {
    transform: translateY(3px);
    box-shadow:
        0 0 0 rgba(70, 110, 180, 0.16),
        0 2px 10px rgba(70, 110, 180, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* 狀態燈群組：同款玻璃 */
.status-cluster {
    background: rgba(255, 255, 255, 0.48) !important;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow:
        0 3px 0 rgba(70, 110, 180, 0.14),
        0 6px 18px rgba(70, 110, 180, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

@media (max-width: 900px) {
    .top-right .btn-top-action {
        padding: 8px 14px;
        font-size: 12px;
        min-height: 40px;
        gap: 5px;
    }
    .btn-hours .hours-label,
    .btn-hours .hours-sep {
        display: none;
    }
}

/* ===== 修正：頂部欄佈局 ===== */
.top-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 18px;
    min-height: 64px;
}

/* 漢堡：強制三條線顯示 */
.hamburger-btn {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.hamburger-btn span {
    display: block !important;
    width: 22px;
    height: 3px !important;
    border-radius: 3px;
    background: #1a3b5c !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 品牌不壓縮 */
.top-brand { flex: 0 0 auto; }

/* 關鍵：右側整組推到最右邊 */
.top-right {
    margin-left: auto !important;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* 玻璃按鈕間距統一 */
.top-right .btn-top-action {
    margin: 0;
}

/* 小螢幕時才允許換行 */
@media (max-width: 900px) {
    .top-bar { flex-wrap: wrap; gap: 8px; }
    .top-right { gap: 6px; }
}


/* ===== 頂部欄重新排版：全部靠左 ===== */
.top-bar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 14px !important;
    min-height: 64px !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
}

/* 覆蓋舊的 .top-right margin-left:auto，不再靠右 */
.top-bar .top-right {
    margin-left: 0 !important;
}

/* 漢堡按鈕固定尺寸 */
.top-bar .hamburger-btn {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.top-bar .hamburger-btn span {
    display: block !important;
    width: 22px;
    height: 3px !important;
    border-radius: 3px;
    background: #1a3b5c !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 狀態燈群組移到左邊，跟漢堡並排 */
.top-bar .status-cluster {
    flex-shrink: 0;
    margin-right: 4px;
}

/* 三顆玻璃按鈕靠左排列 */
.top-bar .btn-top-action {
    flex-shrink: 0;
}



/* ===== 購物車面板上的 Logo 區 ===== */
.order-logo-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 2px solid #d5d9df;
    flex-shrink: 0;
    min-height: 64px;
}
.order-logo {
    height: 42px;
    width: auto;
    object-fit: contain;
    border-radius: 10px;
    flex-shrink: 0;
}
.order-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.order-logo-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.order-logo-sub {
    font-size: 11px;
    color: #8a7a6e;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* 小螢幕時縮小 Logo */
@media (max-width: 900px) {
    .order-logo { height: 34px; }
    .order-logo-title { font-size: 13px; }
    .order-logo-sub { display: none; }
}


/* 覆蓋：小螢幕仍顯示狀態文字 */
@media (max-width: 1200px) {
    .status-chip .status-label {
        display: inline !important;
    }
    .status-chip {
        padding: 4px 10px !important;
        font-size: 11px;
    }
}
/* =========================================
   新版營業概況（卡片式、大數字 KPI）
   ========================================= */

.stats-new-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px;
}

/* 頂部工具列 */
.stats-top-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border-radius: 14px;
    padding: 14px 18px;
    border: 1px solid #d5d9df;
}
.st-ranges-new {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    background: #f3f5f8;
    padding: 4px;
    border-radius: 10px;
}
.st-ranges-new button {
    border: none;
    background: transparent;
    padding: 10px 6px;
    font-size: 14px;
    font-weight: 700;
    color: #6b5a4a;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s;
}
.st-ranges-new button:hover {
    background: #e8ebef;
}
.st-ranges-new button.active {
    background: #2f80ed;
    color: #fff;
    box-shadow: 0 2px 8px rgba(47,128,237,0.3);
}
.st-dates-new {
    display: flex;
    align-items: center;
    gap: 8px;
}
.st-dates-new input {
    flex: 1;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #c3c9d1;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}
.st-dates-new span {
    color: #b0a094;
    font-weight: 700;
}
.st-dates-new button {
    min-height: 38px;
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    background: #2f80ed;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

/* KPI 大數字 */
.stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.stats-kpi-card {
    background: #fff;
    border: 1px solid #d5d9df;
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.2s;
}
.stats-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.stats-kpi-card.primary {
    background: linear-gradient(135deg, #fff4e8 0%, #ffe8d0 100%);
    border-color: #e67e4a;
}
.stats-kpi-card .kpi-label {
    font-size: 13px;
    font-weight: 700;
    color: #8a7a6e;
    letter-spacing: 0.5px;
}
.stats-kpi-card .kpi-value {
    font-size: 28px;
    font-weight: 900;
    color: #2d1f14;
    line-height: 1.1;
}
.stats-kpi-card.primary .kpi-value {
    color: #e67e4a;
    font-size: 32px;
}

/* 下方詳細資料卡 */
.stats-detail-grid-new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.stats-card {
    background: #fff;
    border: 1px solid #d5d9df;
    border-radius: 14px;
    padding: 16px 18px;
}
.stats-card.full-width {
    grid-column: 1 / -1;
}
.stats-card-title {
    font-size: 16px;
    font-weight: 800;
    color: #2d1f14;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
}
.stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #ececec;
    font-size: 15px;
}
.stats-row:last-child {
    border-bottom: none;
}
.stats-row span:first-child {
    flex: 1;
    color: #4a3b31;
    font-weight: 600;
}
.stats-row span:nth-child(2) {
    color: #8a7a6e;
    font-size: 13px;
    margin-right: 16px;
}
.stats-row b {
    color: #e67e4a;
    font-size: 16px;
    font-weight: 800;
    min-width: 80px;
    text-align: right;
}
.stats-empty {
    color: #b0a094;
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
}

/* 熱銷商品排名 */
.stats-rank-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed #ececec;
}
.stats-rank-row:last-child {
    border-bottom: none;
}
.rank-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f3f5f8;
    color: #6b5a4a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 13px;
    flex-shrink: 0;
}
.stats-rank-row:nth-child(1) .rank-badge { background: #ffd65a; color: #3a2a06; }
.stats-rank-row:nth-child(2) .rank-badge { background: #d5d9df; color: #4a3b31; }
.stats-rank-row:nth-child(3) .rank-badge { background: #e6c7a8; color: #4a2c14; }
.rank-name {
    flex: 1;
    font-weight: 700;
    color: #2d1f14;
    font-size: 15px;
}
.rank-qty {
    font-weight: 800;
    color: #2f80ed;
    font-size: 15px;
    white-space: nowrap;
}

/* 熱銷口味標籤（全部列出，自動換行） */
.flavor-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 0;
}
.flavor-tag-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f3f5f8;
    border: 1px solid #d5d9df;
    border-radius: 30px;
    padding: 5px 14px 5px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #2d1f14;
    transition: all 0.15s;
}
.flavor-tag-item:hover {
    background: #fff4e8;
    border-color: #e67e4a;
}
.flavor-tag-item .tag-qty {
    background: #e67e4a;
    color: #fff;
    border-radius: 30px;
    padding: 1px 9px;
    font-size: 12px;
    font-weight: 800;
    min-width: 26px;
    text-align: center;
}

/* 響應式 */
@media (max-width: 900px) {
    .stats-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-detail-grid-new { grid-template-columns: 1fr; }
    .st-ranges-new { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .stats-kpi-card .kpi-value { font-size: 22px; }
    .stats-kpi-card.primary .kpi-value { font-size: 26px; }
    .stats-kpi-card { padding: 12px; }
}

.product-card .flavor-hint {
    color: #e67e4a !important;
    background: #e6e9ee !important;
    font-size: 12px !important;  
    font-weight: 600 !important;
    padding: 2px 14px !important;
}

/* =========================================
   新版營業概況（4格 KPI + 列印按鈕在標題列）
   ========================================= */

.stats-new-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 時間工具列 */
.stats-top-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border-radius: 14px;
    padding: 14px 18px;
    border: 1px solid #d5d9df;
}
.st-ranges-new {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    background: #f3f5f8;
    padding: 4px;
    border-radius: 10px;
}
.st-ranges-new button {
    border: none;
    background: transparent;
    padding: 10px 6px;
    font-size: 14px;
    font-weight: 700;
    color: #6b5a4a;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s;
}
.st-ranges-new button:hover { background: #e8ebef; }
.st-ranges-new button.active {
    background: #2f80ed;
    color: #fff;
    box-shadow: 0 2px 8px rgba(47,128,237,0.3);
}
.st-dates-new {
    display: flex;
    align-items: center;
    gap: 8px;
}
.st-dates-new input {
    flex: 1;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #c3c9d1;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}
.st-dates-new span { color: #b0a094; font-weight: 700; }
.st-dates-new button {
    min-height: 38px;
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    background: #2f80ed;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

/* KPI 大數字（4 格） */
.stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.stats-kpi-card {
    background: #fff;
    border: 1px solid #d5d9df;
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.2s;
}
.stats-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.stats-kpi-card.primary {
    background: linear-gradient(135deg, #fff4e8 0%, #ffe8d0 100%);
    border-color: #e67e4a;
}
.stats-kpi-card .kpi-label {
    font-size: 13px;
    font-weight: 700;
    color: #8a7a6e;
    letter-spacing: 0.5px;
}
.stats-kpi-card .kpi-value {
    font-size: 28px;
    font-weight: 900;
    color: #2d1f14;
    line-height: 1.1;
}
.stats-kpi-card.primary .kpi-value {
    color: #e67e4a;
    font-size: 32px;
}

/* 第三格：現場 · 網路 */
.kpi-value-split {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 28px;
}
.kpi-value-split b {
    font-weight: 900;
    line-height: 1.1;
}
.kpi-value-split b.pos { color: #2f6fb0; }
.kpi-value-split b.online { color: #e67e4a; }
.kpi-value-split i {
    color: #b0a094;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
}

/* 詳細區 */
.stats-detail-grid-new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.stats-card {
    background: #fff;
    border: 1px solid #d5d9df;
    border-radius: 14px;
    padding: 16px 18px;
}
.stats-card.full-width { grid-column: 1 / -1; }
.stats-card-title {
    font-size: 16px;
    font-weight: 800;
    color: #2d1f14;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
}
.stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #ececec;
    font-size: 15px;
}
.stats-row:last-child { border-bottom: none; }
.stats-row span:first-child { flex: 1; color: #4a3b31; font-weight: 600; }
.stats-row span:nth-child(2) { color: #8a7a6e; font-size: 13px; margin-right: 16px; }
.stats-row b {
    color: #e67e4a;
    font-size: 16px;
    font-weight: 800;
    min-width: 80px;
    text-align: right;
}
.stats-empty { color: #b0a094; text-align: center; padding: 20px 0; font-size: 14px; }

/* 排名 */
.stats-rank-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed #ececec;
}
.stats-rank-row:last-child { border-bottom: none; }
.rank-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f3f5f8;
    color: #6b5a4a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 13px;
    flex-shrink: 0;
}
.stats-rank-row:nth-child(2) .rank-badge { background: #ffd65a; color: #3a2a06; }
.stats-rank-row:nth-child(3) .rank-badge { background: #d5d9df; color: #4a3b31; }
.stats-rank-row:nth-child(4) .rank-badge { background: #e6c7a8; color: #4a2c14; }
.rank-name { flex: 1; font-weight: 700; color: #2d1f14; font-size: 15px; }
.rank-qty { font-weight: 800; color: #2f80ed; font-size: 15px; white-space: nowrap; }

/* 口味標籤 */
.flavor-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 0;
}
.flavor-tag-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f3f5f8;
    border: 1px solid #d5d9df;
    border-radius: 30px;
    padding: 5px 14px 5px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #2d1f14;
    transition: all 0.15s;
}
.flavor-tag-item:hover {
    background: #fff4e8;
    border-color: #e67e4a;
}
.flavor-tag-item .tag-qty {
    background: #e67e4a;
    color: #fff;
    border-radius: 30px;
    padding: 1px 9px;
    font-size: 12px;
    font-weight: 800;
    min-width: 26px;
    text-align: center;
}
.flavor-tags-container::-webkit-scrollbar { width: 6px; }
.flavor-tags-container::-webkit-scrollbar-track { background: transparent; }
.flavor-tags-container::-webkit-scrollbar-thumb {
    background: #cfd4db;
    border-radius: 6px;
}

/* 響應式 */
@media (max-width: 900px) {
    .stats-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-detail-grid-new { grid-template-columns: 1fr; }
    .st-ranges-new { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .stats-kpi-card .kpi-value { font-size: 22px; }
    .stats-kpi-card.primary .kpi-value { font-size: 26px; }
    .stats-kpi-card { padding: 12px; }
    .kpi-value-split { font-size: 22px; }
}



/* ===== Google 大頭照 ===== */
.user-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    flex-shrink: 0;
}

/* emoji 備援（無 photoURL 時顯示） */
.user-avatar {
    font-size: 22px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e6e9ee;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ===== 現場·網路 合併卡：用虛線分隔 ===== */
.kpi-value-split {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    font-size: 28px;
    line-height: 1.1;
    white-space: nowrap;
}

.kpi-value-split b {
    font-weight: 900;
    font-size: 28px;
}
.kpi-value-split b.pos { color: #2f6fb0; }
.kpi-value-split b.online { color: #e67e4a; }

/* 虛線分隔 */
.kpi-value-split .vline {
    color: #d5d9df;
    font-style: normal;
    font-weight: 400;
    font-size: 26px;
    border-left: 2px dashed #c3c9d1;
    width: 0;
    height: 32px;
    display: inline-block;
    /* 用 border 畫虛線、文字內容隱藏 */
    text-indent: -9999px;
    overflow: hidden;
    opacity: 0.9;
}


/* =========================================
   商品管理（專業版）
   ========================================= */

/* 列表 Modal 的新增按鈕 */
.pm-add-btn {
    padding: 8px 18px;
    border: none;
    border-radius: 30px;
    background: linear-gradient(135deg, #c9652f, #e67e4a);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(200, 100, 50, 0.3);
    transition: all 0.15s;
}
.pm-add-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(200, 100, 50, 0.4); }

/* 商品列表 */
.pm-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pm-empty {
    text-align: center;
    padding: 60px 20px;
    color: #b0a094;
    font-size: 15px;
}

/* 商品列卡片 */
.pm-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    padding: 12px 16px;
    transition: all 0.15s;
}
.pm-item:hover {
    border-color: #e67e4a;
    box-shadow: 0 4px 16px rgba(200, 100, 50, 0.08);
}
.pm-item.is-off {
    opacity: 0.55;
    background: #fafafa;
}

.pm-item-img {
    width: 56px; height: 56px;
    border-radius: 12px;
    background: #f3f5f8;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    overflow: hidden;
}
.pm-item-img img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.pm-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pm-item-name {
    font-size: 16px;
    font-weight: 800;
    color: #2d1f14;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-item-meta {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: #8a7a6e;
    flex-wrap: wrap;
    align-items: center;
}
.pm-item-price {
    font-weight: 800;
    color: #e67e4a;
    font-size: 15px;
}
.pm-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}
.pm-badge.on { background: #e8f5e8; color: #1d6b3a; }
.pm-badge.off { background: #fce4e4; color: #b71c1c; }
.pm-badge.mode-firebase { background: #e8f0f5; color: #1a5a8a; }
.pm-badge.mode-local { background: #fff4e8; color: #c9652f; }
.pm-badge.mode-none { background: #f0f0f0; color: #888; }

.pm-item-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.pm-btn {
    border: none;
    border-radius: 30px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.pm-btn-edit { background: #eef0f3; color: #2f6fb0; }
.pm-btn-edit:hover { background: #dbe8f5; }
.pm-btn-toggle { background: #f3f5f8; color: #6b5a4a; }
.pm-btn-toggle:hover { background: #e8ebef; }
.pm-btn-delete { background: #fce4e4; color: #b71c1c; }
.pm-btn-delete:hover { background: #f8d0d0; }

/* =========================================
   商品編輯 Modal
   ========================================= */
.pe-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.pe-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pe-label {
    font-size: 13px;
    font-weight: 800;
    color: #6b5a4a;
    letter-spacing: 0.3px;
}
.pe-required { color: #e67e4a; }

.pe-input,
.pe-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e6e8ec;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    color: #2d1f14;
    transition: all 0.15s;
    outline: none;
}
.pe-input:focus,
.pe-textarea:focus {
    border-color: #e67e4a;
    box-shadow: 0 0 0 3px rgba(230, 126, 74, 0.12);
}
.pe-textarea { resize: vertical; min-height: 90px; }

/* 價格前綴 */
.pe-input-prefix {
    display: flex;
    align-items: center;
    border: 2px solid #e6e8ec;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.15s;
}
.pe-input-prefix:focus-within {
    border-color: #e67e4a;
    box-shadow: 0 0 0 3px rgba(230, 126, 74, 0.12);
}
.pe-input-prefix span {
    padding: 0 14px;
    background: #f7f8fa;
    color: #6b5a4a;
    font-weight: 700;
    font-size: 14px;
    line-height: 42px;
    border-right: 1px solid #e6e8ec;
}
.pe-input-prefix .pe-input {
    border: none;
    box-shadow: none;
    border-radius: 0;
    flex: 1;
}
.pe-input-prefix .pe-input:focus { box-shadow: none; }

/* 圖片上傳 */
.pe-image-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.pe-image-preview {
    width: 96px; height: 96px;
    border-radius: 14px;
    background: #f3f5f8;
    border: 2px dashed #d5d9df;
    display: flex; align-items: center; justify-content: center;
    font-size: 42px;
    overflow: hidden;
    flex-shrink: 0;
}
.pe-image-preview img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.pe-image-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.pe-btn-upload,
.pe-btn-remove {
    border: none;
    border-radius: 30px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}
.pe-btn-upload { background: #eef0f3; color: #2f6fb0; }
.pe-btn-upload:hover { background: #dbe8f5; }
.pe-btn-remove { background: #fce4e4; color: #b71c1c; }
.pe-btn-remove:hover { background: #f8d0d0; }
.pe-hint {
    font-size: 11px;
    color: #b0a094;
    margin: 0;
}

/* 上架開關 */
.pe-switch-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pe-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 30px;
    flex-shrink: 0;
}
.pe-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.pe-switch-slider {
    position: absolute;
    inset: 0;
    background: #d5d9df;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.2s;
}
.pe-switch-slider::before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.pe-switch input:checked + .pe-switch-slider {
    background: #1d6b3a;
}
.pe-switch input:checked + .pe-switch-slider::before {
    transform: translateX(22px);
}
.pe-switch-label {
    font-size: 14px;
    font-weight: 700;
    color: #6b5a4a;
}

/* 口味模式選擇（卡片式） */
.pe-mode-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.pe-mode-option {
    cursor: pointer;
}
.pe-mode-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pe-mode-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 2px solid #e6e8ec;
    border-radius: 12px;
    background: #fff;
    transition: all 0.15s;
    text-align: center;
    height: 100%;
}
.pe-mode-card b {
    font-size: 13px;
    font-weight: 800;
    color: #2d1f14;
}
.pe-mode-card small {
    font-size: 11px;
    color: #8a7a6e;
}
.pe-mode-option input:checked + .pe-mode-card {
    border-color: #e67e4a;
    background: #fff4e8;
    box-shadow: 0 0 0 3px rgba(230, 126, 74, 0.12);
}

/* Checkbox row */
.pe-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #4a3b31;
    font-weight: 600;
    cursor: pointer;
}
.pe-checkbox-row input {
    width: 18px; height: 18px;
    accent-color: #e67e4a;
    cursor: pointer;
}

/* 響應式 */
@media (max-width: 600px) {
    .pm-item {
        flex-wrap: wrap;
    }
    .pm-item-actions {
        width: 100%;
        justify-content: flex-end;
    }
    .pe-mode-group {
        grid-template-columns: 1fr;
    }
}