:root {
    --hanis-ink: #1d1a18;
    --hanis-surface: #fffdf9;
    --hanis-muted: #78716c;
    --hanis-line: rgba(80, 58, 37, .12);
    --hanis-coffee: #402d22;
    --hanis-gold: #c8914a;
    --hanis-gold-soft: #f4e5cd;
    --hanis-success: #1f8a5b;
    --hanis-danger: #c84d4d;
    --hanis-shadow: 0 18px 45px rgba(49, 33, 21, .10);
}

/* Safe rendering baseline for older Android WebViews and mobile browsers.
   Decorative blur/enhancements remain optional; layout must never depend on them. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }
@supports not (backdrop-filter: blur(1px)) {
    .header, .table-selector, .floating-cart, .sidebar, .topbar, .modal-content {
        background-color: #17213d !important;
    }
}

body {
    font-family: Tahoma, "Segoe UI", sans-serif !important;
    text-rendering: optimizeLegibility;
}

button, input, select, textarea {
    font: inherit;
}

.hanis-login-page {
    display: grid !important;
    place-items: center;
    min-height: 100vh;
    padding: 22px;
    background:
        radial-gradient(circle at 15% 15%, rgba(200, 145, 74, .25), transparent 32%),
        radial-gradient(circle at 85% 80%, rgba(106, 69, 42, .35), transparent 32%),
        #1b1410 !important;
}

.hanis-login-page .main {
    width: min(100%, 410px) !important;
    height: auto !important;
    min-height: 430px;
    padding: 34px 28px !important;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 28px !important;
    background: rgba(42, 30, 24, .86) !important;
    box-shadow: 0 25px 70px rgba(0,0,0,.38) !important;
}

.hanis-login-page .signup form {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.hanis-login-page label {
    margin: 4px 0 18px !important;
    color: #fff4e5 !important;
    font-size: 27px !important;
}

.hanis-login-page input {
    width: 100% !important;
    height: 49px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    outline: none;
}

.hanis-login-page input:focus {
    border-color: var(--hanis-gold) !important;
    box-shadow: 0 0 0 4px rgba(200,145,74,.16);
}

.hanis-login-page button[name="login"] {
    width: 100% !important;
    height: 50px;
    margin: 9px 0 0 !important;
    border: 0;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #d8aa61, #b87832) !important;
    color: #21150d !important;
    font-weight: 800;
    cursor: pointer;
}

.hanis-public-page {
    background: #19130f !important;
}

.hanis-public-page .navbar {
    background: rgba(25, 19, 15, .82) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    backdrop-filter: blur(16px);
}

.hanis-public-page .brand,
.hanis-public-page .section-header h2,
.hanis-public-page .hero .highlight {
    color: #e0b36d !important;
    -webkit-text-fill-color: #e0b36d !important;
    background: none !important;
}

.hanis-public-page .hero .btn-primary {
    background: #d0a15c !important;
    color: #24180f !important;
    border-radius: 13px !important;
}

.hanis-public-page .menu-section .menu-item,
.hanis-public-page .contact .item {
    background: rgba(255,255,255,.055) !important;
    border-color: rgba(224,179,109,.18) !important;
    border-radius: 18px !important;
}

body.light {
    background: #f7f3ec !important;
    color: var(--hanis-ink) !important;
}

body.light .header,
body.light .cat-wrap {
    background: rgba(255, 253, 249, .94) !important;
    backdrop-filter: blur(16px);
    border-color: var(--hanis-line) !important;
}

body.light .header {
    min-height: 66px;
    padding: 14px max(16px, env(safe-area-inset-right)) !important;
}

body.light .header h1 {
    color: var(--hanis-coffee) !important;
    font-size: 18px !important;
}

body.light .table-info span {
    background: var(--hanis-gold-soft) !important;
    color: var(--hanis-coffee) !important;
    font-weight: 700;
}

.hanis-menu-search {
    position: sticky;
    top: 66px;
    z-index: 98;
    padding: 10px 12px 8px;
    background: rgba(247, 243, 236, .94);
    backdrop-filter: blur(16px);
}

.hanis-menu-search__field {
    width: 100%;
    height: 46px;
    border: 1px solid var(--hanis-line);
    border-radius: 15px;
    padding: 0 44px 0 14px;
    outline: none;
    color: var(--hanis-ink);
    background: rgba(255,255,255,.9);
    box-shadow: 0 8px 22px rgba(49, 33, 21, .06);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.hanis-menu-search__field:focus {
    border-color: var(--hanis-gold);
    box-shadow: 0 0 0 4px rgba(200, 145, 74, .15);
}

.hanis-menu-search__icon {
    position: absolute;
    right: 27px;
    top: 22px;
    color: var(--hanis-muted);
    pointer-events: none;
}

.hanis-menu-search__empty {
    display: none;
    padding: 24px 12px;
    text-align: center;
    color: var(--hanis-muted);
    font-size: 13px;
}

body.light .cat-wrap {
    top: 130px !important;
}

body.dark .cat-wrap {
    top: 130px !important;
}

body.dark .hanis-menu-search {
    background: rgba(10, 10, 21, .94);
}

body.dark .hanis-menu-search__field {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: #fff;
}

body.light .cat-btn {
    border-color: var(--hanis-line) !important;
    background: #fffdfa !important;
    color: #67594f !important;
    padding: 8px 14px !important;
}

body.light .cat-btn.active {
    border-color: var(--hanis-coffee) !important;
    background: var(--hanis-coffee) !important;
    color: #fff !important;
}

body.light .content {
    padding: 18px 14px 42px !important;
    max-width: 1180px;
}

body.light .cat-title {
    border-color: var(--hanis-gold) !important;
    color: var(--hanis-coffee) !important;
}

body.light .item-card {
    border: 1px solid var(--hanis-line) !important;
    border-radius: 18px !important;
    padding: 9px !important;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(49, 33, 21, .055);
}

body.light .item-card:hover {
    border-color: rgba(200, 145, 74, .52) !important;
    transform: translateY(-3px);
}

body.light .item-card .img {
    border-radius: 13px !important;
}

body.light .item-card .name {
    margin-top: 4px;
    color: var(--hanis-ink) !important;
    font-weight: 700 !important;
}

body.light .item-card .price,
body.light .detail-panel .detail-price {
    color: #a36624 !important;
    font-weight: 800 !important;
}

body.light .detail-panel {
    border: 1px solid var(--hanis-line);
    border-radius: 24px !important;
    box-shadow: var(--hanis-shadow);
}

body.light .detail-panel .detail-close-btn {
    background: var(--hanis-coffee) !important;
}

body.light .theme-toggle {
    background: var(--hanis-coffee) !important;
    color: #fff !important;
    box-shadow: var(--hanis-shadow) !important;
}

body.hanis-menu-page {
    min-height: 100vh;
    color: #f8eee4 !important;
    font-family: Tahoma, "Segoe UI", sans-serif !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(200, 145, 74, .20), transparent 24%),
        radial-gradient(circle at 87% 88%, rgba(122, 78, 45, .22), transparent 28%),
        linear-gradient(145deg, #17100d 0%, #2a1b14 52%, #17100d 100%) !important;
}

body.hanis-menu-page::before {
    content: "";
    position: fixed;
    inset: -25%;
    z-index: -1;
    opacity: .62;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 242, 219, .12) 1px, transparent 1px);
    background-size: 23px 23px;
    animation: hanis-menu-drift 24s linear infinite;
}

.hanis-cafe-atmosphere {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.hanis-cafe-atmosphere__item {
    position: absolute;
    display: block;
    color: rgba(244, 207, 158, .17);
    font-family: "Segoe UI Symbol", "Segoe UI Emoji", sans-serif;
    line-height: 1;
    filter: drop-shadow(0 12px 13px rgba(0, 0, 0, .18));
    animation: hanis-cafe-float 7s ease-in-out infinite alternate;
}

.hanis-cafe-atmosphere__item--extra {
    top: var(--top);
    right: var(--right);
    left: auto;
    bottom: auto;
    font-size: var(--size);
    transform: rotate(var(--turn));
    animation-delay: var(--delay);
    animation-duration: var(--duration);
    color: rgba(244, 207, 158, .105);
}

.hanis-cafe-atmosphere .item-cup { top: 17%; right: 4%; font-size: 76px; transform: rotate(-17deg); animation-delay: -.8s; }
.hanis-cafe-atmosphere .item-plate { top: 46%; right: 7%; font-size: 135px; color: rgba(244, 207, 158, .09); animation-duration: 9s; animation-delay: -3.2s; }
.hanis-cafe-atmosphere .item-cutlery { top: 67%; right: 18%; font-size: 88px; transform: rotate(148deg); color: rgba(244, 207, 158, .12); animation-delay: -1.8s; }
.hanis-cafe-atmosphere .item-cake { top: 20%; left: 5%; font-size: 65px; opacity: .48; animation-duration: 8.5s; animation-delay: -4s; }
.hanis-cafe-atmosphere .item-cup-small { top: 60%; left: 7%; font-size: 58px; transform: rotate(13deg); animation-duration: 6.4s; animation-delay: -2.6s; }
.hanis-cafe-atmosphere .item-glass { bottom: 8%; left: 28%; font-size: 102px; color: rgba(244, 207, 158, .1); animation-duration: 10s; animation-delay: -5s; }
.hanis-cafe-atmosphere .item-spark { top: 34%; left: 19%; font-size: 31px; animation-duration: 4s; animation-delay: -1.5s; }
.hanis-cafe-atmosphere .item-spark-two { bottom: 26%; right: 30%; font-size: 24px; animation-duration: 4.8s; animation-delay: -2.2s; }
.hanis-cafe-atmosphere .item-coffee-bean { top: 10%; left: 27%; font-size: 29px; color: rgba(244, 207, 158, .12); animation-duration: 5.5s; animation-delay: -3.4s; }
.hanis-cafe-atmosphere .item-coffee-bean-two { bottom: 18%; right: 10%; font-size: 35px; color: rgba(244, 207, 158, .11); animation-duration: 6.9s; animation-delay: -4.2s; }
.hanis-cafe-atmosphere .item-bowl { top: 39%; left: 3%; font-size: 92px; color: rgba(244, 207, 158, .12); transform: rotate(-13deg); animation-duration: 10.5s; animation-delay: -1.3s; }
.hanis-cafe-atmosphere .item-spoon { top: 79%; left: 12%; font-size: 84px; color: rgba(244, 207, 158, .12); transform: rotate(38deg); animation-duration: 8s; animation-delay: -5.3s; }
.hanis-cafe-atmosphere .item-cup-three { top: 74%; right: 3%; font-size: 52px; opacity: .5; transform: rotate(-17deg); animation-duration: 7.6s; animation-delay: -3s; }
.hanis-cafe-atmosphere .item-plate-two { top: 6%; right: 39%; font-size: 94px; color: rgba(244, 207, 158, .08); animation-duration: 11s; animation-delay: -7s; }
.hanis-cafe-atmosphere .item-dessert { bottom: 3%; right: 42%; font-size: 66px; color: rgba(244, 207, 158, .1); transform: rotate(19deg); animation-duration: 9.2s; animation-delay: -2.4s; }
.hanis-cafe-atmosphere .item-spark-three { top: 55%; left: 25%; font-size: 20px; animation-duration: 3.6s; animation-delay: -2.9s; }
.hanis-cafe-atmosphere .item-spark-four { top: 16%; left: 43%; font-size: 28px; animation-duration: 5.3s; animation-delay: -4.7s; }
.hanis-cafe-atmosphere .item-fork { bottom: 35%; right: 38%; font-size: 57px; color: rgba(244, 207, 158, .09); transform: rotate(17deg); animation-duration: 9.8s; animation-delay: -6s; }
.hanis-cafe-atmosphere .item-pastry { bottom: 11%; left: 41%; font-size: 45px; color: rgba(244, 207, 158, .12); animation-duration: 6.7s; animation-delay: -1s; }
.hanis-cafe-atmosphere .item-glass-two { top: 27%; right: 25%; font-size: 53px; color: rgba(244, 207, 158, .12); animation-duration: 7.3s; animation-delay: -5.5s; }
.hanis-cafe-atmosphere .item-cup-four { top: 31%; left: 38%; font-size: 48px; opacity: .42; transform: rotate(21deg); animation-duration: 7.7s; animation-delay: -6.1s; }
.hanis-cafe-atmosphere .item-cup-five { bottom: 38%; left: 3%; font-size: 44px; opacity: .4; transform: rotate(-12deg); animation-duration: 6.2s; animation-delay: -2.3s; }
.hanis-cafe-atmosphere .item-plate-three { top: 78%; right: 24%; font-size: 78px; color: rgba(244, 207, 158, .08); animation-duration: 11.5s; animation-delay: -4.4s; }
.hanis-cafe-atmosphere .item-plate-four { top: 43%; right: 42%; font-size: 58px; color: rgba(244, 207, 158, .09); animation-duration: 9.2s; animation-delay: -7.4s; }
.hanis-cafe-atmosphere .item-dessert-two { top: 56%; right: 3%; font-size: 52px; color: rgba(244, 207, 158, .1); animation-duration: 8.8s; animation-delay: -4.8s; }
.hanis-cafe-atmosphere .item-dessert-three { bottom: 5%; left: 18%; font-size: 72px; color: rgba(244, 207, 158, .1); transform: rotate(-23deg); animation-duration: 10.4s; animation-delay: -2.8s; }
.hanis-cafe-atmosphere .item-cutlery-two { top: 12%; right: 18%; font-size: 46px; color: rgba(244, 207, 158, .1); transform: rotate(24deg); animation-duration: 8.1s; animation-delay: -6.7s; }
.hanis-cafe-atmosphere .item-cutlery-three { bottom: 20%; right: 5%; font-size: 68px; color: rgba(244, 207, 158, .1); transform: rotate(-31deg); animation-duration: 9.4s; animation-delay: -1.7s; }
.hanis-cafe-atmosphere .item-bean-three { top: 23%; left: 14%; font-size: 23px; color: rgba(244, 207, 158, .13); animation-duration: 5.2s; animation-delay: -3.1s; }
.hanis-cafe-atmosphere .item-bean-four { bottom: 29%; left: 36%; font-size: 27px; color: rgba(244, 207, 158, .11); animation-duration: 6.6s; animation-delay: -5.2s; }
.hanis-cafe-atmosphere .item-spark-five { top: 8%; left: 6%; font-size: 22px; animation-duration: 4.1s; animation-delay: -2s; }
.hanis-cafe-atmosphere .item-spark-six { top: 72%; left: 27%; font-size: 19px; animation-duration: 3.9s; animation-delay: -1s; }
.hanis-cafe-atmosphere .item-spark-seven { bottom: 44%; right: 17%; font-size: 28px; animation-duration: 4.7s; animation-delay: -3.7s; }
.hanis-cafe-atmosphere .item-spark-eight { bottom: 8%; right: 14%; font-size: 18px; animation-duration: 3.8s; animation-delay: -2.6s; }
.hanis-cafe-atmosphere .item-mug-one { top: 49%; left: 46%; font-size: 38px; opacity: .36; transform: rotate(-8deg); animation-duration: 7.9s; animation-delay: -3.8s; }
.hanis-cafe-atmosphere .item-mug-two { bottom: 4%; right: 32%; font-size: 43px; opacity: .34; transform: rotate(17deg); animation-duration: 6.5s; animation-delay: -1.9s; }
.hanis-cafe-atmosphere .item-food-one { top: 14%; right: 32%; font-size: 57px; color: rgba(244,207,158,.1); animation-duration: 9.5s; animation-delay: -2.7s; }
.hanis-cafe-atmosphere .item-food-two { top: 63%; left: 31%; font-size: 49px; color: rgba(244,207,158,.1); animation-duration: 8.4s; animation-delay: -6.2s; }
.hanis-cafe-atmosphere .item-food-three { bottom: 42%; right: 45%; font-size: 63px; color: rgba(244,207,158,.09); transform: rotate(12deg); animation-duration: 10.8s; animation-delay: -4.5s; }
.hanis-cafe-atmosphere .item-tray-one { top: 38%; right: 32%; font-size: 67px; color: rgba(244,207,158,.09); transform: rotate(-19deg); animation-duration: 9.7s; animation-delay: -3.1s; }
.hanis-cafe-atmosphere .item-tray-two { bottom: 15%; left: 49%; font-size: 55px; color: rgba(244,207,158,.1); transform: rotate(22deg); animation-duration: 8.2s; animation-delay: -5.8s; }
.hanis-cafe-atmosphere .item-glass-three { top: 7%; left: 49%; font-size: 47px; color: rgba(244,207,158,.11); animation-duration: 6.8s; animation-delay: -2.3s; }
.hanis-cafe-atmosphere .item-glass-four { bottom: 27%; right: 47%; font-size: 44px; color: rgba(244,207,158,.1); animation-duration: 7.4s; animation-delay: -6.4s; }
.hanis-cafe-atmosphere .item-plate-five { top: 86%; left: 6%; font-size: 72px; color: rgba(244,207,158,.08); animation-duration: 10.6s; animation-delay: -4s; }
.hanis-cafe-atmosphere .item-plate-six { top: 29%; left: 27%; font-size: 43px; color: rgba(244,207,158,.09); animation-duration: 8.7s; animation-delay: -7.1s; }
.hanis-cafe-atmosphere .item-spoon-two { top: 6%; right: 7%; font-size: 48px; color: rgba(244,207,158,.11); transform: rotate(47deg); animation-duration: 8.8s; animation-delay: -4.2s; }
.hanis-cafe-atmosphere .item-fork-two { bottom: 47%; left: 17%; font-size: 42px; color: rgba(244,207,158,.1); transform: rotate(-22deg); animation-duration: 8.1s; animation-delay: -1.3s; }
.hanis-cafe-atmosphere .item-bean-five { top: 34%; right: 11%; font-size: 18px; color: rgba(244,207,158,.14); animation-duration: 5.7s; animation-delay: -2.9s; }
.hanis-cafe-atmosphere .item-bean-six { bottom: 34%; left: 45%; font-size: 22px; color: rgba(244,207,158,.13); animation-duration: 6.2s; animation-delay: -4.8s; }
.hanis-cafe-atmosphere .item-star-nine { top: 45%; left: 9%; font-size: 16px; animation-duration: 3.6s; animation-delay: -1.4s; }
.hanis-cafe-atmosphere .item-star-ten { top: 26%; left: 35%; font-size: 18px; animation-duration: 4.3s; animation-delay: -5.1s; }
.hanis-cafe-atmosphere .item-star-eleven { bottom: 16%; right: 22%; font-size: 21px; animation-duration: 4.9s; animation-delay: -2.5s; }
.hanis-cafe-atmosphere .item-star-twelve { bottom: 38%; left: 4%; font-size: 19px; animation-duration: 3.7s; animation-delay: -3.2s; }
.hanis-cafe-atmosphere .item-leaf-one { top: 82%; right: 38%; font-size: 46px; color: rgba(244,207,158,.1); transform: rotate(32deg); animation-duration: 8.9s; animation-delay: -6.3s; }
.hanis-cafe-atmosphere .item-leaf-two { top: 48%; right: 24%; font-size: 34px; color: rgba(244,207,158,.1); transform: rotate(-26deg); animation-duration: 7.2s; animation-delay: -1.6s; }
.hanis-cafe-atmosphere .item-cake-four { top: 89%; left: 35%; font-size: 37px; color: rgba(244,207,158,.11); animation-duration: 6.9s; animation-delay: -5.5s; }
.hanis-cafe-atmosphere .item-mug-six { top: 4%; right: 48%; font-size: 35px; opacity: .32; transform: rotate(16deg); animation-duration: 7.1s; animation-delay: -2.2s; }
.hanis-cafe-atmosphere .item-mug-seven { top: 71%; left: 48%; font-size: 37px; opacity: .35; transform: rotate(-15deg); animation-duration: 8.2s; animation-delay: -6.3s; }
.hanis-cafe-atmosphere .item-plate-seven { top: 54%; right: 49%; font-size: 61px; color: rgba(244,207,158,.08); animation-duration: 10.1s; animation-delay: -4.9s; }
.hanis-cafe-atmosphere .item-plate-eight { bottom: 2%; right: 4%; font-size: 57px; color: rgba(244,207,158,.09); animation-duration: 9.3s; animation-delay: -1.2s; }
.hanis-cafe-atmosphere .item-dessert-four { top: 36%; left: 48%; font-size: 35px; color: rgba(244,207,158,.11); animation-duration: 7.5s; animation-delay: -3.3s; }
.hanis-cafe-atmosphere .item-dessert-five { top: 94%; right: 49%; font-size: 49px; color: rgba(244,207,158,.09); transform: rotate(25deg); animation-duration: 9.7s; animation-delay: -5.4s; }
.hanis-cafe-atmosphere .item-glass-five { top: 21%; right: 49%; font-size: 32px; color: rgba(244,207,158,.12); animation-duration: 6.7s; animation-delay: -2.7s; }
.hanis-cafe-atmosphere .item-spoon-three { bottom: 49%; left: 48%; font-size: 47px; color: rgba(244,207,158,.1); transform: rotate(35deg); animation-duration: 8.3s; animation-delay: -6.7s; }
.hanis-cafe-atmosphere .item-bean-seven { top: 64%; right: 49%; font-size: 17px; color: rgba(244,207,158,.14); animation-duration: 4.8s; animation-delay: -1.8s; }
.hanis-cafe-atmosphere .item-bean-eight { bottom: 22%; left: 49%; font-size: 20px; color: rgba(244,207,158,.13); animation-duration: 5.9s; animation-delay: -4.1s; }
.hanis-cafe-atmosphere .item-star-thirteen { top: 17%; right: 41%; font-size: 20px; animation-duration: 3.9s; animation-delay: -3s; }
.hanis-cafe-atmosphere .item-star-fourteen { bottom: 46%; right: 43%; font-size: 16px; animation-duration: 4.4s; animation-delay: -5s; }
.hanis-cafe-atmosphere .item-leaf-three { bottom: 7%; left: 49%; font-size: 32px; color: rgba(244,207,158,.1); transform: rotate(-21deg); animation-duration: 7.6s; animation-delay: -2.5s; }
.hanis-cafe-atmosphere .item-tray-three { top: 82%; right: 48%; font-size: 43px; color: rgba(244,207,158,.1); transform: rotate(-13deg); animation-duration: 8.6s; animation-delay: -4.6s; }

.hanis-cafe-atmosphere__steam {
    position: absolute;
    width: 4px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(180deg, transparent, rgba(248, 222, 185, .25), transparent);
    filter: blur(1px);
    animation: hanis-cafe-steam 4.5s ease-in-out infinite;
}
.hanis-cafe-atmosphere .steam-one { top: 13%; right: 11%; transform: rotate(9deg); }
.hanis-cafe-atmosphere .steam-two { top: 15%; right: 14%; transform: rotate(-8deg); animation-delay: -1.7s; }
.hanis-cafe-atmosphere .steam-three { top: 52%; left: 11%; transform: rotate(12deg); animation-delay: -2.8s; }
.hanis-cafe-atmosphere .steam-four { top: 70%; right: 8%; transform: rotate(-8deg); animation-delay: -1.1s; }
.hanis-cafe-atmosphere .steam-five { top: 11%; left: 31%; transform: rotate(9deg); animation-delay: -3.5s; }
.hanis-cafe-atmosphere .steam-six { top: 27%; left: 42%; transform: rotate(-10deg); animation-delay: -4.2s; }
.hanis-cafe-atmosphere .steam-seven { bottom: 28%; left: 8%; transform: rotate(7deg); animation-delay: -2.1s; }
.hanis-cafe-atmosphere .steam-eight { top: 44%; right: 28%; transform: rotate(-6deg); animation-delay: -3.7s; }
.hanis-cafe-atmosphere .steam-nine { bottom: 11%; right: 34%; transform: rotate(13deg); animation-delay: -5.2s; }

@keyframes hanis-cafe-float {
    from { translate: 0 0; rotate: 0deg; }
    to { translate: 0 -22px; rotate: 4deg; }
}

@keyframes hanis-cafe-steam {
    0% { opacity: 0; translate: 0 12px; scale: .72; }
    45% { opacity: .85; }
    100% { opacity: 0; translate: 16px -24px; scale: 1.25; }
}

@keyframes hanis-menu-drift {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to { transform: translate3d(34px, -26px, 0) rotate(3deg); }
}

body.hanis-menu-page .header {
    min-height: 78px;
    padding: 17px max(18px, calc((100% - 1120px) / 2)) !important;
    background: rgba(27, 18, 14, .78) !important;
    border-bottom: 1px solid rgba(232, 194, 142, .16) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
    backdrop-filter: blur(16px);
}

body.hanis-menu-page .header h1 {
    color: #f6d3a2 !important;
    font-size: clamp(20px, 4vw, 28px) !important;
    font-weight: 800 !important;
    letter-spacing: -.5px;
}

body.hanis-menu-page .hanis-menu-search {
    top: 78px;
    padding: 15px max(14px, calc((100% - 1120px) / 2)) !important;
    background: rgba(33, 22, 16, .88) !important;
    border-bottom: 1px solid rgba(232, 194, 142, .12);
    backdrop-filter: blur(15px);
}

body.hanis-menu-page .hanis-menu-search__field {
    min-height: 50px;
    color: #fff5e8 !important;
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(232, 194, 142, .22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 25px rgba(0, 0, 0, .12);
}

body.hanis-menu-page .hanis-menu-search__field::placeholder { color: rgba(255, 239, 217, .55); }
body.hanis-menu-page .hanis-menu-search__field:focus { border-color: #d9a967 !important; box-shadow: 0 0 0 4px rgba(217, 169, 103, .15) !important; }
body.hanis-menu-page .hanis-menu-search__icon { color: #f2c687 !important; }

body.hanis-menu-page .cat-wrap {
    top: 158px !important;
    padding: 11px 0 !important;
    background: rgba(33, 22, 16, .9) !important;
    border-bottom: 1px solid rgba(232, 194, 142, .13) !important;
    backdrop-filter: blur(15px);
}

body.hanis-menu-page .cat-scroll { gap: 10px !important; padding: 0 max(14px, calc((100% - 1120px) / 2)) 3px !important; }
body.hanis-menu-page .cat-btn {
    padding: 9px 17px !important;
    color: rgba(255, 239, 217, .72) !important;
    background: rgba(255, 255, 255, .055) !important;
    border: 1px solid rgba(232, 194, 142, .17) !important;
    font-weight: 700 !important;
    transition: transform .22s ease, background .22s ease, border-color .22s ease !important;
}
body.hanis-menu-page .cat-btn:hover { transform: translateY(-2px); border-color: rgba(242, 198, 135, .5) !important; }
body.hanis-menu-page .cat-btn.active { color: #2c1b11 !important; background: linear-gradient(135deg, #f4d0a0, #c89048) !important; border-color: transparent !important; box-shadow: 0 7px 18px rgba(196, 135, 62, .23); }

body.hanis-menu-page .content { max-width: 1120px !important; padding: 33px 16px 68px !important; }
body.hanis-menu-page .cat-section { margin-bottom: 38px !important; }
body.hanis-menu-page .cat-title { color: #f5d4a5 !important; border-color: #d59e58 !important; font-size: 19px !important; font-weight: 800 !important; }

body.hanis-menu-page .item-card {
    position: relative;
    min-height: 218px;
    padding: 12px !important;
    color: #fff4e6 !important;
    background: linear-gradient(150deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .045)) !important;
    border: 1px solid rgba(235, 196, 142, .21) !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .20) !important;
    animation: hanis-menu-card-in .55s both;
    transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease !important;
}
body.hanis-menu-page .item-card:nth-child(2) { animation-delay: .08s; }
body.hanis-menu-page .item-card:nth-child(3) { animation-delay: .16s; }
body.hanis-menu-page .item-card:nth-child(4) { animation-delay: .24s; }
body.hanis-menu-page .item-card:hover { transform: translateY(-7px) !important; border-color: rgba(246, 205, 145, .66) !important; box-shadow: 0 24px 42px rgba(0, 0, 0, .3) !important; }
body.hanis-menu-page .item-card:active { transform: translateY(-2px) scale(.985) !important; }
body.hanis-menu-page .item-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(125deg, rgba(255,255,255,.14), transparent 34%); }

@keyframes hanis-menu-card-in { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

body.hanis-menu-page .item-card .img,
body.hanis-menu-page .item-card .placeholder {
    height: 128px !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, #4b3022, #a56d3c) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
body.hanis-menu-page .item-card .name { color: #fff5e9 !important; font-size: 14px !important; font-weight: 800 !important; }
body.hanis-menu-page .item-card .desc { color: rgba(255, 239, 217, .65) !important; font-size: 11px !important; }
body.hanis-menu-page .item-card .price { color: #f2c687 !important; font-size: 15px !important; font-weight: 800 !important; }
body.hanis-menu-page .item-card .price::before { color: rgba(255, 239, 217, .62) !important; }
body.hanis-menu-page .item-card .view-detail { color: rgba(255, 239, 217, .48) !important; }
body.hanis-menu-page .detail-overlay { background: rgba(15, 9, 6, .78) !important; backdrop-filter: blur(8px); }
body.hanis-menu-page .detail-panel { color: #fff3e4 !important; background: #2c1d16 !important; border: 1px solid rgba(235, 196, 142, .24) !important; box-shadow: 0 28px 70px rgba(0,0,0,.48) !important; }
body.hanis-menu-page .detail-panel .detail-name { color: #fff5ea !important; }
body.hanis-menu-page .detail-panel .detail-price { color: #f2c687 !important; }
body.hanis-menu-page .detail-panel .close-btn { color: #fff5ea !important; background: rgba(255,255,255,.1) !important; }
body.hanis-menu-page .hanis-menu-search__empty { color: #f2c687 !important; }

@media (max-width: 480px) {
    body.hanis-menu-page .header { min-height: 68px; padding: 13px 16px !important; }
    body.hanis-menu-page .hanis-menu-search { top: 68px; padding: 11px 12px !important; }
    body.hanis-menu-page .cat-wrap { top: 140px !important; }
    body.hanis-menu-page .content { padding: 25px 12px 52px !important; }
    body.hanis-menu-page .items-grid { gap: 12px !important; }
    body.hanis-menu-page .item-card { min-height: 196px; border-radius: 18px !important; }
    body.hanis-menu-page .item-card .img,
    body.hanis-menu-page .item-card .placeholder { height: 105px !important; }
    .hanis-cafe-atmosphere .item-plate { right: -15%; font-size: 118px; }
    .hanis-cafe-atmosphere .item-cutlery { right: -7%; font-size: 68px; }
    .hanis-cafe-atmosphere .item-cake { left: -4%; font-size: 54px; }
    .hanis-cafe-atmosphere .item-glass { left: 4%; font-size: 76px; }
}

/* =========================================================
   DASHBOARD THEME — midnight navy with muted gold accents
   Scoped to the staff panel so the customer menu stays intact.
   ========================================================= */
:root {
    --hanis-navy-950: #060b1d;
    --hanis-navy-900: #0a1230;
    --hanis-navy-850: #0e193d;
    --hanis-navy-800: #13224c;
    --hanis-navy-700: #1b3164;
    --hanis-gold-dashboard: #d7ad68;
    --hanis-gold-soft-dashboard: #f0d8a5;
    --hanis-dashboard-text: #f5f1e8;
    --hanis-dashboard-muted: #aeb9d0;
    --hanis-dashboard-line: rgba(215, 173, 104, .18);
}

body.hanis-dashboard {
    min-height: 100vh;
    color: var(--hanis-dashboard-text) !important;
    background:
        radial-gradient(circle at 86% 5%, rgba(55, 83, 148, .34), transparent 27%),
        radial-gradient(circle at 13% 90%, rgba(191, 143, 68, .12), transparent 26%),
        linear-gradient(145deg, var(--hanis-navy-950), var(--hanis-navy-900) 54%, #07112a) !important;
    background-attachment: fixed !important;
}

body.hanis-dashboard .layout,
body.hanis-dashboard .main,
body.hanis-dashboard .content {
    background: transparent !important;
}

body.hanis-dashboard .sidebar {
    background: linear-gradient(180deg, rgba(9, 18, 45, .98), rgba(5, 11, 29, .98)) !important;
    border-left: 1px solid var(--hanis-dashboard-line) !important;
    box-shadow: -12px 0 34px rgba(0, 0, 0, .24) !important;
}

body.hanis-dashboard .sidebar .logo {
    color: var(--hanis-gold-soft-dashboard) !important;
    -webkit-text-fill-color: var(--hanis-gold-soft-dashboard) !important;
    text-shadow: 0 5px 20px rgba(215, 173, 104, .16);
}

body.hanis-dashboard .sidebar a {
    color: rgba(222, 230, 245, .72) !important;
    border-right-color: transparent !important;
}

body.hanis-dashboard .sidebar a:hover,
body.hanis-dashboard .sidebar a.active {
    color: #fff8e8 !important;
    background: linear-gradient(90deg, rgba(215, 173, 104, .18), rgba(38, 63, 121, .28)) !important;
    border-right-color: var(--hanis-gold-dashboard) !important;
    box-shadow: inset 0 0 0 1px rgba(215, 173, 104, .12);
}

body.hanis-dashboard .topbar,
body.hanis-dashboard .header,
body.hanis-dashboard .table-selector,
body.hanis-dashboard .floating-cart {
    background: rgba(8, 16, 39, .88) !important;
    border-color: var(--hanis-dashboard-line) !important;
    backdrop-filter: blur(18px);
}

body.hanis-dashboard .topbar h1,
body.hanis-dashboard .topbar h2,
body.hanis-dashboard .topbar h3,
body.hanis-dashboard .main h1,
body.hanis-dashboard .main h2,
body.hanis-dashboard .main h3,
body.hanis-dashboard .header h1,
body.hanis-dashboard .category-title {
    color: var(--hanis-gold-soft-dashboard) !important;
}

body.hanis-dashboard .stat-card,
body.hanis-dashboard .panel,
body.hanis-dashboard .card,
body.hanis-dashboard .table-container,
body.hanis-dashboard .content-card,
body.hanis-dashboard .category-card,
body.hanis-dashboard .item-card,
body.hanis-dashboard .order-card,
body.hanis-dashboard .table-card,
body.hanis-dashboard .cashier-card,
body.hanis-dashboard .customer-card {
    color: var(--hanis-dashboard-text) !important;
    background: linear-gradient(145deg, rgba(21, 37, 79, .96), rgba(11, 23, 55, .96)) !important;
    border: 1px solid var(--hanis-dashboard-line) !important;
    box-shadow: 0 16px 35px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
    animation: hanis-dashboard-card-in .52s both;
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease !important;
}

body.hanis-dashboard .stat-card:nth-child(2),
body.hanis-dashboard .item-card:nth-child(2),
body.hanis-dashboard .category-card:nth-child(2),
body.hanis-dashboard .order-card:nth-child(2) { animation-delay: .06s; }
body.hanis-dashboard .stat-card:nth-child(3),
body.hanis-dashboard .item-card:nth-child(3),
body.hanis-dashboard .category-card:nth-child(3),
body.hanis-dashboard .order-card:nth-child(3) { animation-delay: .12s; }
body.hanis-dashboard .stat-card:nth-child(4),
body.hanis-dashboard .item-card:nth-child(4),
body.hanis-dashboard .category-card:nth-child(4),
body.hanis-dashboard .order-card:nth-child(4) { animation-delay: .18s; }

body.hanis-dashboard .stat-card:hover,
body.hanis-dashboard .item-card:hover,
body.hanis-dashboard .category-card:hover,
body.hanis-dashboard .order-card:hover,
body.hanis-dashboard .table-card:hover,
body.hanis-dashboard .cashier-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(240, 216, 165, .58) !important;
    box-shadow: 0 23px 43px rgba(0, 0, 0, .28), 0 0 0 1px rgba(215, 173, 104, .08) !important;
}

@keyframes hanis-dashboard-card-in {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

body.hanis-dashboard .stat-card .number,
body.hanis-dashboard .stat-card .stat-value,
body.hanis-dashboard .item-price,
body.hanis-dashboard .price,
body.hanis-dashboard .total-price,
body.hanis-dashboard .cashier-summary__total,
body.hanis-dashboard .important-badge {
    color: var(--hanis-gold-soft-dashboard) !important;
}

body.hanis-dashboard p,
body.hanis-dashboard .item-desc,
body.hanis-dashboard .item-count,
body.hanis-dashboard .order-row__meta,
body.hanis-dashboard .cashier-header p,
body.hanis-dashboard small {
    color: var(--hanis-dashboard-muted) !important;
}

body.hanis-dashboard input,
body.hanis-dashboard select,
body.hanis-dashboard textarea,
body.hanis-dashboard .customer-search-wrapper input {
    color: #f7f2e8 !important;
    background: rgba(4, 12, 33, .72) !important;
    border-color: rgba(174, 190, 220, .22) !important;
}

body.hanis-dashboard input:focus,
body.hanis-dashboard select:focus,
body.hanis-dashboard textarea:focus {
    border-color: var(--hanis-gold-dashboard) !important;
    box-shadow: 0 0 0 4px rgba(215, 173, 104, .13) !important;
}

body.hanis-dashboard select option { background: var(--hanis-navy-850); color: #fff; }
body.hanis-dashboard table thead { background: rgba(31, 52, 103, .72) !important; }
body.hanis-dashboard table th { color: var(--hanis-gold-soft-dashboard) !important; }
body.hanis-dashboard table td { color: #e7edf9 !important; border-color: rgba(174, 190, 220, .12) !important; }
body.hanis-dashboard table tr:hover td { background: rgba(215, 173, 104, .055) !important; }

body.hanis-dashboard .glass-btn,
body.hanis-dashboard .add-btn,
body.hanis-dashboard .submit-btn,
body.hanis-dashboard .btn-primary,
body.hanis-dashboard button[type="submit"],
body.hanis-dashboard .btn-view-cart,
body.hanis-dashboard .card-button {
    color: #17120b !important;
    background: linear-gradient(135deg, #f0d6a1, #c8954e) !important;
    border: 1px solid rgba(255, 238, 197, .28) !important;
    box-shadow: 0 8px 20px rgba(157, 110, 43, .2) !important;
}

body.hanis-dashboard .glass-btn:hover,
body.hanis-dashboard .add-btn:hover,
body.hanis-dashboard .submit-btn:hover,
body.hanis-dashboard .btn-primary:hover,
body.hanis-dashboard button[type="submit"]:hover,
body.hanis-dashboard .btn-view-cart:hover,
body.hanis-dashboard .card-button:hover {
    filter: brightness(1.07);
    transform: translateY(-2px);
}

body.hanis-dashboard .modal,
body.hanis-dashboard .success-overlay { background: rgba(2, 6, 19, .76) !important; }
body.hanis-dashboard .modal-box,
body.hanis-dashboard .success-box { background: linear-gradient(145deg, #142653, #0b1737) !important; border-color: var(--hanis-dashboard-line) !important; }

@media (prefers-reduced-motion: reduce) {
    body.hanis-dashboard .stat-card,
    body.hanis-dashboard .item-card,
    body.hanis-dashboard .category-card,
    body.hanis-dashboard .order-card,
    body.hanis-dashboard .table-card,
    body.hanis-dashboard .cashier-card { animation: none !important; transition: none !important; }
}

body.hanis-menu-page .item-card {
    min-height: 290px;
    padding: 0 !important;
    overflow: hidden;
}

body.hanis-menu-page .item-card .img,
body.hanis-menu-page .item-card .placeholder {
    display: block;
    width: 100%;
    height: 152px !important;
    margin: 0 !important;
    border-radius: 0 0 28px 28px !important;
    background: linear-gradient(135deg, #4b3022, #a56d3c) !important;
    transition: transform .5s ease;
}

body.hanis-menu-page .item-card:hover .img { transform: scale(1.075); }
body.hanis-menu-page .hanis-menu-card__placeholder { color: rgba(255, 245, 233, .78) !important; }
body.hanis-menu-page .hanis-menu-card__category { position: absolute; z-index: 3; top: 12px; right: 12px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: #fff7ed; background: rgba(32, 20, 13, .62); backdrop-filter: blur(8px); font-size: 10px; font-weight: 800; }
body.hanis-menu-page .hanis-menu-card__body { position: relative; z-index: 2; padding: 13px 14px 12px; }
body.hanis-menu-page .item-card .desc { min-height: 31px; margin-top: 5px; color: rgba(255, 239, 217, .65) !important; font-size: 11px !important; line-height: 1.55; }
body.hanis-menu-page .hanis-menu-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
body.hanis-menu-page .item-card .price { margin: 0 !important; }
body.hanis-menu-page .hanis-menu-card__arrow { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(242,198,135,.35); border-radius: 50%; color: #f8d3a0; font-size: 17px; transition: transform .24s ease, background .24s ease; }
body.hanis-menu-page .item-card:hover .hanis-menu-card__arrow { transform: translateX(-4px); background: rgba(242,198,135,.16); }
body.hanis-menu-page .item-card .view-detail { display: block; margin-top: 5px; color: rgba(255, 239, 217, .48) !important; font-size: 10px; }

@media (max-width: 480px) {
    body.hanis-menu-page .item-card { min-height: 268px; }
    body.hanis-menu-page .item-card .img,
    body.hanis-menu-page .item-card .placeholder { height: 125px !important; border-radius: 0 0 23px 23px !important; }
}

@media (max-width: 600px) {
    .hanis-cafe-atmosphere__item { opacity: .46; }
    .hanis-cafe-atmosphere__item:nth-of-type(n+19) { display: none; }
    .hanis-cafe-atmosphere__steam:nth-of-type(n+4) { display: none; }
    .hanis-cafe-atmosphere .item-plate { font-size: 104px; right: -13%; }
    .hanis-cafe-atmosphere .item-cup { font-size: 58px; right: 2%; }
    .hanis-cafe-atmosphere .item-cake { font-size: 46px; left: -3%; }
    .hanis-cafe-atmosphere .item-glass { font-size: 66px; left: 4%; }
}

body.hanis-menu-page,
body.hanis-menu-page button,
body.hanis-menu-page input {
    font-family: "Vazirmatn", Tahoma, "Segoe UI", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.hanis-menu-page .header h1 {
    letter-spacing: -.9px;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .24);
}

body.hanis-menu-page .hanis-menu-search__field {
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: -.18px;
}

body.hanis-menu-page .cat-btn {
    font-size: 12px !important;
    letter-spacing: -.2px;
}

body.hanis-menu-page .cat-title {
    letter-spacing: -.48px;
    line-height: 1.65;
    text-shadow: 0 3px 16px rgba(0, 0, 0, .2);
}

body.hanis-menu-page .item-card .name {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.7;
    letter-spacing: -.42px;
    text-shadow: 0 2px 11px rgba(0, 0, 0, .16);
}

body.hanis-menu-page .item-card .desc {
    font-weight: 400 !important;
    letter-spacing: -.15px;
    line-height: 1.8 !important;
}

body.hanis-menu-page .item-card .price {
    font-size: 16px !important;
    letter-spacing: .05px;
    text-shadow: 0 3px 14px rgba(168, 105, 43, .22);
}

body.hanis-menu-page .item-card .price::before {
    font-size: 10px !important;
    font-weight: 500 !important;
}

body.hanis-menu-page .item-card .view-detail {
    font-weight: 500 !important;
    letter-spacing: -.2px;
}

body.hanis-menu-page .hanis-menu-card__category {
    font-family: "Vazirmatn", Tahoma, sans-serif !important;
    letter-spacing: -.18px;
}

body.hanis-menu-page .detail-overlay {
    padding: 18px !important;
    background: rgba(12, 7, 5, .83) !important;
    backdrop-filter: blur(13px);
}

body.hanis-menu-page .detail-panel {
    width: min(100%, 460px) !important;
    max-height: min(780px, 92vh) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    background: linear-gradient(155deg, #332017, #20130f) !important;
    animation: hanis-detail-open .38s cubic-bezier(.2,.85,.32,1) both !important;
}

@keyframes hanis-detail-open {
    from { opacity: 0; transform: translateY(28px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

body.hanis-menu-page .detail-panel .close-btn {
    z-index: 6;
    top: 14px !important;
    left: 14px !important;
    width: 39px !important;
    height: 39px !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    color: #fff8f0 !important;
    background: rgba(30, 18, 13, .6) !important;
    backdrop-filter: blur(9px);
}

.hanis-detail__hero {
    position: relative;
    height: 218px;
    overflow: hidden;
    background: radial-gradient(circle at 30% 25%, #b87740, transparent 43%), linear-gradient(135deg, #56351f, #261611);
}

body.hanis-menu-page .detail-img {
    display: none;
    width: 100%;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    object-fit: cover;
}

.hanis-detail__placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 70px;
    color: rgba(255, 240, 219, .86);
    text-shadow: 0 15px 25px rgba(0,0,0,.26);
    animation: hanis-detail-icon-float 3.6s ease-in-out infinite alternate;
}

@keyframes hanis-detail-icon-float { from { transform: translateY(4px) rotate(-3deg); } to { transform: translateY(-9px) rotate(3deg); } }
.hanis-detail__shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.22), transparent 34%, rgba(0,0,0,.16)); }
.hanis-detail__content { padding: 20px 22px 22px; }
body.hanis-menu-page .detail-category { display: inline-flex; padding: 6px 10px; margin: 0 0 8px !important; border-radius: 999px; color: #eac18b !important; background: rgba(242,198,135,.1); font-size: 11px !important; font-weight: 700; }
body.hanis-menu-page .detail-name { margin: 0 !important; color: #fff6eb !important; font-size: 24px !important; font-weight: 800 !important; line-height: 1.65; letter-spacing: -.7px; }
.hanis-detail__price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; margin-top: 9px; border-top: 1px solid rgba(242,198,135,.16); border-bottom: 1px solid rgba(242,198,135,.16); }
.hanis-detail__price-label { color: rgba(255,239,217,.58); font-size: 12px; font-weight: 500; }
body.hanis-menu-page .detail-price { margin: 0 !important; color: #f4c686 !important; font-size: 21px !important; font-weight: 800 !important; }
.hanis-detail__description-label { margin-top: 17px; color: rgba(255,239,217,.52); font-size: 11px; font-weight: 700; }
body.hanis-menu-page .detail-desc { margin-top: 6px !important; padding: 0 !important; color: rgba(255,243,229,.8) !important; background: transparent !important; font-size: 13px !important; line-height: 2 !important; }
.hanis-detail__bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 17px; }
body.hanis-menu-page .detail-status { margin: 0 !important; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.hanis-detail__hint { color: rgba(255,239,217,.42); font-size: 10px; }
body.hanis-menu-page .detail-close-btn { width: 100%; min-height: 46px; margin-top: 18px; border: 1px solid rgba(246,205,145,.28); border-radius: 14px; color: #2d1a10; background: linear-gradient(135deg, #f0cc99, #c98f50); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: transform .2s ease, filter .2s ease; }
body.hanis-menu-page .detail-close-btn:active { transform: scale(.98); filter: brightness(.94); }

@media (max-width: 480px) {
    .hanis-detail__hero { height: 190px; }
    .hanis-detail__content { padding: 17px 18px 18px; }
    body.hanis-menu-page .detail-name { font-size: 21px !important; }
    body.hanis-menu-page .detail-price { font-size: 19px !important; }
}

.layout {
    background: #f7f3ec !important;
}

.layout .sidebar {
    width: 248px !important;
    padding: 22px 12px !important;
    background: #2a1e18 !important;
    border-left: 0 !important;
    box-shadow: -8px 0 30px rgba(40, 23, 13, .12);
}

.layout .sidebar .logo {
    padding: 8px 14px 24px !important;
    color: #fff4e5 !important;
    -webkit-text-fill-color: #fff4e5 !important;
    background: none !important;
    letter-spacing: 1px;
}

.layout .sidebar a {
    margin: 3px 0;
    border-radius: 12px;
    color: rgba(255, 247, 238, .72) !important;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.layout .sidebar a:hover,
.layout .sidebar a.active {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    transform: translateX(-2px);
}

.layout .main,
.layout .content {
    background: transparent !important;
}

.layout .topbar {
    min-height: 72px;
    border-bottom: 1px solid var(--hanis-line) !important;
    background: rgba(255, 253, 249, .82) !important;
    backdrop-filter: blur(14px);
}

.layout .topbar h3,
.layout .main h1,
.layout .main h2,
.layout .main h3 {
    color: var(--hanis-coffee) !important;
}

.layout .panel,
.layout .stat-card,
.layout .card,
.layout .table-container,
.layout .content-card {
    border: 1px solid var(--hanis-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(49, 33, 21, .06) !important;
}

.layout .stat-card {
    background: #fffdfa !important;
    overflow: hidden;
}

.layout .panel,
.layout .table-container,
.layout .content-card {
    background: #fffdfa !important;
}

.layout table thead {
    background: #f4e5cd !important;
}

.layout table th {
    color: var(--hanis-coffee) !important;
}

.layout table td {
    border-color: var(--hanis-line) !important;
    color: #4c4139 !important;
}

.layout input,
.layout select,
.layout textarea {
    border: 1px solid var(--hanis-line) !important;
    border-radius: 11px !important;
    background: #fffdfa !important;
    color: var(--hanis-ink) !important;
    outline: none;
}

.layout input:focus,
.layout select:focus,
.layout textarea:focus {
    border-color: var(--hanis-gold) !important;
    box-shadow: 0 0 0 4px rgba(200,145,74,.14) !important;
}

.layout button,
.layout .btn,
.layout input[type="submit"] {
    border-radius: 11px !important;
}

.layout .btn-primary,
.layout .add-btn,
.layout .submit-btn,
.layout button[type="submit"] {
    background: var(--hanis-coffee) !important;
    color: #fff !important;
}

@media (max-width: 820px) {
    .layout .sidebar {
        width: 72px !important;
        padding: 14px 8px !important;
    }

    .layout .sidebar .logo {
        padding: 5px 0 18px !important;
        font-size: 0 !important;
        text-align: center;
    }

    .layout .sidebar .logo::after {
        content: "H";
        font-size: 23px;
        font-weight: 900;
    }

    .layout .sidebar a {
        font-size: 0 !important;
        text-align: center;
        padding: 13px 5px !important;
    }

    .layout .sidebar a::first-letter {
        font-size: 19px;
    }

    .layout .main {
        margin-right: 72px !important;
    }

    .layout .topbar {
        padding: 12px 14px !important;
    }

    .layout .topbar h3 {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .hanis-menu-search {
        top: 62px;
    }

    body.light .cat-wrap {
        top: 126px !important;
    }

    body.light .items-grid {
        gap: 10px !important;
    }

    .layout .main {
        margin-right: 0 !important;
        padding-bottom: 78px;
    }

    .layout .sidebar {
        position: fixed !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        height: 66px !important;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 5px !important;
        overflow-x: auto;
    }

    .layout .sidebar .logo {
        display: none;
    }

    .layout .sidebar a {
        min-width: 52px;
        margin: 0 !important;
        padding: 10px 5px !important;
    }
}

/* Keep the navy theme above the legacy light dashboard form/table rules. */
body.hanis-dashboard .layout input,
body.hanis-dashboard .layout select,
body.hanis-dashboard .layout textarea {
    color: #f7f2e8 !important;
    background: rgba(4, 12, 33, .72) !important;
    border-color: rgba(174, 190, 220, .22) !important;
}

body.hanis-dashboard .layout input:focus,
body.hanis-dashboard .layout select:focus,
body.hanis-dashboard .layout textarea:focus {
    border-color: var(--hanis-gold-dashboard) !important;
    box-shadow: 0 0 0 4px rgba(215, 173, 104, .13) !important;
}

body.hanis-dashboard .layout table thead { background: rgba(31, 52, 103, .72) !important; }
body.hanis-dashboard .layout table th { color: var(--hanis-gold-soft-dashboard) !important; }
body.hanis-dashboard .layout table td { color: #e7edf9 !important; border-color: rgba(174, 190, 220, .12) !important; }

/* Customer menu: the existing warm cafe look is day mode; night mode is navy and muted gold. */
body.hanis-menu-page {
    transition: background .35s ease, color .35s ease !important;
}

body.hanis-menu-page .hanis-menu-theme-toggle {
    position: fixed;
    left: max(16px, env(safe-area-inset-left));
    right: auto;
    bottom: max(18px, env(safe-area-inset-bottom));
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    z-index: 700;
    border: 1px solid rgba(245, 210, 160, .32);
    border-radius: 50%;
    color: #fff5e8;
    background: rgba(36, 23, 16, .78);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
    backdrop-filter: blur(12px);
}

body.hanis-menu-page .hanis-menu-theme-toggle:active { transform: scale(.94); }

body.hanis-menu-page.dark {
    color: #f1f4fb !important;
    background:
        radial-gradient(circle at 84% 5%, rgba(62, 97, 173, .29), transparent 29%),
        radial-gradient(circle at 10% 92%, rgba(210, 164, 86, .11), transparent 28%),
        linear-gradient(145deg, #071126 0%, #0c1b3e 55%, #08132c 100%) !important;
}

body.hanis-menu-page.dark::before {
    opacity: .68;
    background:
        radial-gradient(circle at 18% 14%, rgba(226, 186, 110, .09), transparent 21%),
        radial-gradient(circle at 81% 67%, rgba(84, 119, 195, .15), transparent 27%) !important;
}

body.hanis-menu-page.dark .header,
body.hanis-menu-page.dark .hanis-menu-search,
body.hanis-menu-page.dark .cat-wrap {
    background: rgba(7, 17, 41, .86) !important;
    border-color: rgba(222, 186, 116, .16) !important;
}

body.hanis-menu-page.dark .header h1,
body.hanis-menu-page.dark .cat-title { color: #f2d7a2 !important; }
body.hanis-menu-page.dark .hanis-menu-search__field {
    color: #f5f7fc !important;
    background: rgba(255, 255, 255, .055) !important;
    border-color: rgba(222, 186, 116, .22) !important;
}
body.hanis-menu-page.dark .hanis-menu-search__field::placeholder { color: rgba(229, 234, 247, .55) !important; }
body.hanis-menu-page.dark .hanis-menu-search__icon { color: #e5bd79 !important; }

body.hanis-menu-page.dark .cat-btn {
    color: rgba(237, 241, 251, .78) !important;
    background: rgba(255, 255, 255, .045) !important;
    border-color: rgba(222, 186, 116, .18) !important;
}
body.hanis-menu-page.dark .cat-btn.active {
    color: #18203c !important;
    background: linear-gradient(135deg, #f1d49b, #c99850) !important;
    border-color: transparent !important;
    box-shadow: 0 8px 21px rgba(190, 137, 61, .22) !important;
}

body.hanis-menu-page.dark .item-card {
    background: linear-gradient(145deg, rgba(24, 45, 94, .92), rgba(10, 25, 59, .93)) !important;
    border-color: rgba(224, 190, 122, .18) !important;
    box-shadow: 0 15px 34px rgba(0, 0, 0, .2) !important;
}
body.hanis-menu-page.dark .item-card:hover {
    border-color: rgba(244, 214, 155, .54) !important;
    box-shadow: 0 22px 40px rgba(0, 0, 0, .3) !important;
}
body.hanis-menu-page.dark .item-card .name,
body.hanis-menu-page.dark .detail-name { color: #f7f4ec !important; }
body.hanis-menu-page.dark .item-card .desc,
body.hanis-menu-page.dark .detail-desc { color: rgba(228, 235, 249, .7) !important; }
body.hanis-menu-page.dark .item-card .price,
body.hanis-menu-page.dark .detail-price { color: #f2cd8d !important; }
body.hanis-menu-page.dark .hanis-menu-card__category { background: rgba(8, 22, 54, .7) !important; border-color: rgba(242, 205, 141, .25) !important; }

body.hanis-menu-page.dark .detail-overlay { background: rgba(3, 8, 23, .82) !important; }
body.hanis-menu-page.dark .detail-panel { background: linear-gradient(145deg, #152c60, #0a1b42) !important; border-color: rgba(232, 196, 129, .22) !important; }
body.hanis-menu-page.dark .detail-close-btn { color: #1b1a1a !important; background: linear-gradient(135deg, #f0d29b, #c8944d) !important; }
body.hanis-menu-page.dark .hanis-menu-theme-toggle { color: #142042; background: rgba(243, 211, 154, .92); border-color: rgba(255, 244, 213, .5); }

@media (max-width: 480px) {
    body.hanis-menu-page .hanis-menu-theme-toggle { left: 13px; bottom: max(14px, env(safe-area-inset-bottom)); width: 42px; height: 42px; }
}

/* Mobile-first staff panels. Cashier stays desktop-oriented by explicit scope. */
@media (max-width: 760px) {
    body.hanis-login-page {
        min-height: 100dvh;
        padding: 16px !important;
    }

    body.hanis-login-page .main {
        width: min(100%, 430px) !important;
        min-height: 0 !important;
        padding: 27px 20px !important;
        border-radius: 22px !important;
    }

    body.hanis-login-page input,
    body.hanis-login-page button[name="login"] {
        min-height: 48px !important;
        font-size: 16px !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) {
        min-width: 0;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .layout {
        display: block !important;
        min-height: 100dvh;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .sidebar {
        position: sticky !important;
        top: 0;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 58px;
        display: flex !important;
        align-items: center;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 8px 10px !important;
        z-index: 1000;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .sidebar::-webkit-scrollbar { display: none; }
    body.hanis-dashboard:not(.hanis-cashier-page) .sidebar .logo {
        flex: 0 0 auto;
        padding: 0 7px !important;
        margin: 0 !important;
        font-size: 16px !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .sidebar a {
        flex: 0 0 auto;
        padding: 9px 11px !important;
        border: 1px solid transparent !important;
        border-radius: 11px;
        font-size: 12px !important;
        white-space: nowrap;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .sidebar a.active {
        border-color: rgba(215, 173, 104, .45) !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .main {
        width: 100% !important;
        min-width: 0;
        margin: 0 !important;
        padding: 16px 12px 96px !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .page-header,
    body.hanis-dashboard:not(.hanis-cashier-page) .header {
        gap: 10px;
        padding: 13px 12px !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .page-header h1,
    body.hanis-dashboard:not(.hanis-cashier-page) .page-header h2,
    body.hanis-dashboard:not(.hanis-cashier-page) .header h1 {
        font-size: clamp(18px, 5vw, 23px) !important;
        line-height: 1.55;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .stats-grid,
    body.hanis-dashboard:not(.hanis-cashier-page) .categories-grid,
    body.hanis-dashboard:not(.hanis-cashier-page) .orders-grid,
    body.hanis-dashboard:not(.hanis-cashier-page) .items-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .stat-card,
    body.hanis-dashboard:not(.hanis-cashier-page) .category-card,
    body.hanis-dashboard:not(.hanis-cashier-page) .order-card,
    body.hanis-dashboard:not(.hanis-cashier-page) .item-card,
    body.hanis-dashboard:not(.hanis-cashier-page) .table-card {
        min-width: 0;
        border-radius: 16px !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) input,
    body.hanis-dashboard:not(.hanis-cashier-page) select,
    body.hanis-dashboard:not(.hanis-cashier-page) textarea,
    body.hanis-dashboard:not(.hanis-cashier-page) button {
        min-height: 44px;
        font-size: 15px !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .table-wrapper,
    body.hanis-dashboard:not(.hanis-cashier-page) .table-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) table { min-width: 650px; }
    body.hanis-dashboard:not(.hanis-cashier-page) .modal { padding: 12px !important; }
    body.hanis-dashboard:not(.hanis-cashier-page) .modal-box,
    body.hanis-dashboard:not(.hanis-cashier-page) .modal-content {
        width: min(100%, 520px) !important;
        max-height: calc(100dvh - 24px) !important;
        overflow-y: auto;
        border-radius: 20px !important;
    }
}

@media (max-width: 390px) {
    body.hanis-dashboard:not(.hanis-cashier-page) .stats-grid,
    body.hanis-dashboard:not(.hanis-cashier-page) .categories-grid,
    body.hanis-dashboard:not(.hanis-cashier-page) .orders-grid {
        grid-template-columns: 1fr !important;
    }
}

/*
   One mobile layout for every staff dashboard page.
   Legacy page-specific CSS used to leave a fixed right sidebar active on phones,
   shrinking the main page to a narrow strip.  The navigation is now a compact
   horizontal bar and the content always receives the complete screen width.
*/
@media (max-width: 760px) {
    body.hanis-dashboard:not(.hanis-cashier-page),
    body.hanis-dashboard:not(.hanis-cashier-page) .layout {
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .layout .sidebar {
        position: sticky !important;
        inset: 0 auto auto 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 58px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        padding: 8px 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        z-index: 1100 !important;
        -webkit-overflow-scrolling: touch;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .layout .sidebar .logo {
        display: block !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 5px !important;
        font-size: 15px !important;
        line-height: 40px !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .layout .sidebar .logo::after {
        content: none !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .layout .sidebar a {
        flex: 0 0 auto !important;
        min-width: auto !important;
        margin: 0 !important;
        padding: 9px 10px !important;
        border: 1px solid transparent !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        line-height: 20px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .layout .sidebar a::first-letter {
        font-size: inherit !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .layout .main,
    body.hanis-dashboard:not(.hanis-cashier-page) .layout .content {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 16px 12px 30px !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .layout .topbar {
        min-height: 0 !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-bottom: 18px !important;
        padding: 0 2px 14px !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .layout .topbar h3 {
        flex: 1 1 100% !important;
        margin: 0 !important;
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .layout .topbar .user {
        font-size: 12px !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .layout .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-bottom: 18px !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .layout .stat-card {
        min-width: 0 !important;
        min-height: 112px !important;
        padding: 13px !important;
        border-radius: 14px !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .layout .stat-card .stat-number {
        font-size: 21px !important;
        line-height: 1.25 !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .layout .stat-card .stat-label,
    body.hanis-dashboard:not(.hanis-cashier-page) .layout .stat-card .stat-change {
        font-size: 11px !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .layout .row {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-bottom: 18px !important;
    }

    body.hanis-dashboard:not(.hanis-cashier-page) .layout .panel {
        min-width: 0 !important;
        padding: 14px !important;
        border-radius: 14px !important;
    }
}

@media (max-width: 350px) {
    body.hanis-dashboard:not(.hanis-cashier-page) .layout .stats-grid {
        grid-template-columns: 1fr !important;
    }
}