@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600;800;900&display=swap');

        :root {
            --brown-dark: #3e2723;
            --brown-panel: #5d4037;
            --brown-light: #8d6e63;
        }

        body {
            font-family: 'Cairo', sans-serif; background-color: #111;
            margin: 0; padding: 0; display: flex; justify-content: center;
            align-items: center; height: 100vh; overflow: hidden; user-select: none;
        }

        .arabic-text { font-family: 'Cairo', sans-serif; }

        /* Game Root Container */
        #game-container {
            width: 100%; max-width: 1100px; aspect-ratio: 16/9; min-height: 650px;
            background-color: #795548;
            background-image: linear-gradient(335deg, rgba(0,0,0,0.3) 2px, transparent 2px), linear-gradient(155deg, rgba(0,0,0,0.3) 2px, transparent 2px);
            background-size: 40px 20px; position: relative;
            box-shadow: 0 0 20px rgba(0,0,0,1); border-radius: 12px; overflow: hidden;
            display: flex; flex-direction: column; transition: box-shadow 0.3s, background-color 0.5s;
        }
.rush-hour-active { animation: rushPulse 1s infinite alternate; }
        @keyframes rushPulse { 0% { box-shadow: inset 0 0 30px rgba(229, 57, 53, 0.3); } 100% { box-shadow: inset 0 0 80px rgba(229, 57, 53, 0.7); } }

        /* ================= STATIC HUD ELEMENTS ================= */
        .top-hud-static { position: absolute; top: 15px; left: 15px; z-index: 1000; display: flex; gap: 8px; }
        .btn-round { width: 45px; height: 45px; border-radius: 50%; background: linear-gradient(to bottom, #4dd0e1, #00acc1); border: 3px solid #e0f7fa; color: white; font-size: 20px; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 6px rgba(0,0,0,0.4); cursor: pointer; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); transition: transform 0.1s; pointer-events: auto;}
        .btn-round:active { transform: scale(0.95); }
        .btn-gold { background: linear-gradient(to bottom, #ffd54f, #ffb300); border-color: #fff8e1; }
        .btn-admin { background: linear-gradient(to bottom, #1e293b, #0f172a); border-color: #cbd5e1; }

        /* ================= DYNAMIC ABSOLUTE ELEMENTS ================= */
        .dyn-element { position: absolute; transform: translate(-50%, 50%); transition: left 0.4s ease-out, bottom 0.4s ease-out, transform 0.3s, opacity 0.3s; }
        
        .hud-pill { background-color: #fff8e1; border: 3px solid #ffb300; border-radius: 20px; padding: 4px 12px; font-size: 15px; font-weight: 900; color: #3e2723; display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
        .pill-timer { background-color: #e3f2fd; border-color: #1976d2; color: #0d47a1; }
        .chef-panel { background-color: var(--brown-panel); border: 4px solid var(--brown-dark); border-radius: 12px; padding: 10px; width: 170px; color: white; box-shadow: 0 5px 10px rgba(0,0,0,0.5); }
        .chef-name { font-size: 16px; font-weight: 900; border-bottom: 2px solid var(--brown-dark); padding-bottom: 4px; margin-bottom: 6px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
        .stat-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; margin-bottom: 4px; }
        .stat-bar-bg { width: 80px; height: 12px; background-color: #2e1d16; border: 2px solid #1a100c; border-radius: 6px; overflow: hidden; }
        .stat-bar-fill { height: 100%; transition: width 0.3s; }
        .fill-happy { background-color: #66bb6a; width: 100%; }
        .fill-level { background-color: #8d6e63; width: 0%; } 
        .game-title { background: linear-gradient(to bottom, #66bb6a, #2e7d32); border: 4px solid #fbc02d; border-radius: 20px; padding: 5px 30px; color: #fff; font-size: 32px; font-weight: 900; text-shadow: 2px 2px 0px #1b5e20; box-shadow: 0 6px 10px rgba(0,0,0,0.5); white-space: nowrap; }

        .current-order-panel-inner { background-color: #f1f8e9; border: 4px solid #33691e; border-radius: 12px; width: 170px; color: #1b5e20; overflow: hidden; box-shadow: 0 6px 10px rgba(0,0,0,0.5); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform: scale(0); transform-origin: center; }
        .current-order-panel-inner.show { transform: scale(1); }
        .order-header { background-color: #4caf50; color: white; text-align: center; font-weight: 900; padding: 6px; border-bottom: 3px solid #33691e; font-size: 15px; }
        .order-content { padding: 8px 10px; font-size: 14px; font-weight: 800; line-height: 1.6; color: #2e1d16; text-align: center; }

        .ui-box { background-color: var(--brown-light); border: 4px solid var(--brown-dark); border-radius: 12px; height: 70px; position: relative; display: flex; align-items: center; color: white; box-shadow: inset 0 2px 5px rgba(255,255,255,0.2), 0 4px 6px rgba(0,0,0,0.4); pointer-events: auto;}
        .ui-box-title { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background-color: var(--brown-dark); color: #fff; padding: 2px 15px; font-size: 14px; font-weight: 900; border-radius: 12px; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.5); }
        .inventory-box { width: 420px; min-height: 92px; align-items: stretch; justify-content: flex-start; padding: 8px 10px; overflow: hidden; flex-direction: column; gap: 8px; background: linear-gradient(to bottom, #8d6e63, #6d4c41); }
        .inventory-title-inline { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; background: #3e2723; color: #fff; border: 2px solid #2e1d16; border-radius: 12px; padding: 2px 12px; font-size: 13px; font-weight: 900; line-height: 1.2; box-shadow: 0 2px 4px rgba(0,0,0,0.35); }
        .inventory-items-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; width: 100%; }
        .inv-item { text-align: center; line-height: 1.2; min-width: 50px; }
        .inv-item-station { background: rgba(46, 29, 22, 0.5); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 5px 6px; display: flex; align-items: center; gap: 6px; }
        .inv-meta { min-width: 0; flex: 1; text-align: right; }
        .inv-name-line { font-size: 11px; font-weight: 900; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .inv-sub { font-size: 9px; font-weight: 700; color: #ffe0b2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .inv-amount { min-width: 36px; text-align: center; background: #2e1d16; border: 2px solid #1a100c; border-radius: 999px; color: #ffd54f; font-size: 12px; font-weight: 900; padding: 2px 6px; line-height: 1.1; }
        .inv-empty { grid-column: 1 / -1; background: rgba(0,0,0,0.3); border: 1px dashed rgba(255,255,255,0.35); border-radius: 8px; padding: 6px 8px; text-align: center; font-size: 11px; font-weight: 800; color: #f5f5f5; }
        .inv-icon { font-size: 20px; background: #fff; width: 30px; height: 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0; border: 2px solid var(--brown-dark); box-shadow: 0 2px 4px rgba(0,0,0,0.3); overflow: hidden; }
        .inv-icon.inv-icon-plain { width: 40px; height: 40px; background: transparent; border: none; box-shadow: none; border-radius: 0; }
        .inv-icon.inv-icon-plain img { width: 100%; height: 100%; object-fit: contain; }
        .inv-text { font-size: 10px; font-weight: 800; white-space: nowrap; }
        .action-buttons-container { display: flex; gap: 15px; pointer-events: auto; }
        .btn-action { border: 4px solid var(--brown-dark); border-radius: 12px; padding: 8px 20px; font-weight: 900; font-size: 20px; color: #fff; cursor: pointer; display: flex; align-items: center; gap: 6px; box-shadow: 0 6px 0 var(--brown-dark); transition: all 0.1s; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
        .btn-action:active { transform: translateY(6px); box-shadow: 0 0 0 var(--brown-dark); }
        .btn-prep { background: linear-gradient(to bottom, #ffca28, #f57c00); color: #3e2723; text-shadow: none; }
        .btn-serve { background: linear-gradient(to bottom, #66bb6a, #388e3c); }

        /* Game Actors */
        .chef-inner { font-size: 150px; filter: drop-shadow(0 10px 10px rgba(0,0,0,0.4)); transition: transform 0.1s; line-height: 1; }
        .helper-inner { font-size: 90px; filter: drop-shadow(0 10px 10px rgba(0,0,0,0.4)); line-height: 1; }
        .helper-walk { animation: walkWobble 0.25s infinite alternate; }
        @keyframes walkWobble { 0% { transform: rotate(-5deg); } 100% { transform: translateY(-10px) rotate(5deg); } }
        .helper-item { position: absolute; top: -10px; right: -20px; font-size: 50px; filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.5)); transition: opacity 0.2s; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px;}

        /* Customers */
        .customer-container { position: absolute; font-size: 130px; display: flex; justify-content: center; align-items: flex-end; transition: left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s; opacity: 0; pointer-events: none; }
        .customer-inner { position: relative; display: inline-block; line-height: 1.1; transition: transform 0.3s; --customer-scale: 1; --customer-mirror: 1; transform: translateY(0); }
        .customer-inner .model-span { display: inline-block; line-height: 1; transform: scale(var(--customer-scale)) scaleX(var(--customer-mirror)); transform-origin: center bottom; }
        .customer-container.active { opacity: 1; }
        .customer-container.active .customer-inner { animation: idleBounce 2s infinite alternate ease-in-out; }
        @keyframes idleBounce { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }
        
        .vip-tag { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); background: linear-gradient(to bottom, #ffd54f, #f57f17); color: #3e2723; font-size: 18px; font-weight: 900; padding: 2px 12px; border-radius: 12px; border: 2px solid #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.5); z-index: 20; text-shadow: 1px 1px 0px rgba(255,255,255,0.5); animation: vipBounce 1s infinite alternate; }
        @keyframes vipBounce { 0% { transform: translateX(-50%) translateY(0) scale(1); } 100% { transform: translateX(-50%) translateY(-5px) scale(1.1); } }
        .vip-glow { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8)); }
        .speech-bubble { position: absolute; top: auto; right: auto; bottom: auto; left: auto; background: white; border: 3px solid #212121; border-radius: 12px; padding: 8px 15px; font-size: 16px; font-weight: 800; color: #212121; white-space: nowrap; box-shadow: 0 4px 8px rgba(0,0,0,0.2); opacity: 0; --speech-transform: translateX(-50%); --speech-origin: bottom center; --speech-mirror-scale-x: 1; transform: var(--speech-transform) scaleX(var(--speech-mirror-scale-x)) scale(0); transform-origin: var(--speech-origin); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 10; }
        .speech-bubble.show { opacity: 1; transform: var(--speech-transform) scaleX(var(--speech-mirror-scale-x)) scale(1); }
        .speech-bubble::after { content: ''; position: absolute; border-style: solid; border-width: 0; border-color: transparent; pointer-events: none; }
        .speech-pos-top { top: -60px; left: 50%; --speech-transform: translateX(-50%); --speech-origin: bottom center; }
        .speech-pos-top::after { bottom: -12px; left: 50%; transform: translateX(-50%); border-width: 12px 10px 0; border-color: white transparent transparent transparent; }
        .speech-pos-bottom { bottom: -60px; left: 50%; --speech-transform: translateX(-50%); --speech-origin: top center; }
        .speech-pos-bottom::after { top: -12px; left: 50%; transform: translateX(-50%); border-width: 0 10px 12px; border-color: transparent transparent white transparent; }
        .speech-pos-left { left: -16px; top: 50%; --speech-transform: translate(-100%, -50%); --speech-origin: center right; }
        .speech-pos-left::after { right: -12px; top: 50%; transform: translateY(-50%); border-width: 10px 0 10px 12px; border-color: transparent transparent transparent white; }
        .speech-pos-right { left: calc(100% + 16px); top: 50%; --speech-transform: translateY(-50%); --speech-origin: center left; }
        .speech-pos-right::after { left: -12px; top: 50%; transform: translateY(-50%); border-width: 10px 12px 10px 0; border-color: transparent white transparent transparent; }
        .speech-mirror-fix { --speech-mirror-scale-x: -1; }
        .customer-timer { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 90%; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; border: 2px solid #212121; }
        .customer-timer-fill { height: 100%; width: 100%; background: #4caf50; transition: width 1s linear, background-color 0.3s; }
        .angry-shake { animation: angryShake 0.4s infinite !important; }
        @keyframes angryShake { 0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); } 25% { transform: translateX(-5px) translateY(0) rotate(-2deg); } 75% { transform: translateX(5px) translateY(0) rotate(2deg); } }

        /* Stations & Trays */
        .station-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: absolute; cursor: pointer; pointer-events: auto; }
        .station-wrapper:active > div:first-child { transform: scale(0.95); }
        .dyn-station-spit { width: 90px; height: 240px; background: linear-gradient(to right, #757575, #9e9e9e, #757575); border: 5px solid #424242; border-radius: 6px; display: flex; justify-content: center; align-items: center; box-shadow: 8px 8px 15px rgba(0,0,0,0.6); position: relative; transition: transform 0.1s; }
        .dyn-station-grill { width: 140px; height: 100px; background: #424242; border: 5px solid #212121; border-radius: 10px; display: flex; justify-content: space-evenly; align-items: center; box-shadow: 8px 8px 15px rgba(0,0,0,0.6); background-image: repeating-linear-gradient(0deg, transparent, transparent 15px, #212121 15px, #212121 20px); transition: transform 0.1s; }
        .dyn-grill-patty { width: 40px; height: 20px; background: #5d4037; border-radius: 10px; box-shadow: inset 0 -3px 5px rgba(0,0,0,0.6); transition: background-color 0.3s; }
        .dyn-station-pot { width: 100px; height: 110px; background: linear-gradient(to right, #455a64, #78909c, #455a64); border-radius: 10px 10px 40px 40px; border: 4px solid #263238; display: flex; justify-content: center; align-items: flex-start; box-shadow: 8px 8px 15px rgba(0,0,0,0.6); position: relative; transition: transform 0.1s;}
        .dyn-pot-lid { width: 110%; height: 15px; background: #607d8b; border-radius: 10px; position: absolute; top: -10px; border: 3px solid #263238; }
        .dyn-pot-bubbles { position: absolute; top: -30px; font-size: 24px; animation: bubbleUp 1s infinite alternate; transition: opacity 0.3s; }
        .dyn-station-oven { width: 130px; height: 140px; background: #d84315; border: 6px solid #bf360c; border-radius: 100px 100px 10px 10px; display: flex; justify-content: center; align-items: flex-end; box-shadow: 8px 8px 15px rgba(0,0,0,0.6); position: relative; transition: transform 0.1s;}
        .dyn-oven-opening { width: 90px; height: 70px; background: #212121; border-radius: 50px 50px 0 0; border: 4px solid #111; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; position: absolute; bottom:10px; }
        .station-drinks { width: 80px; height: 180px; background: linear-gradient(to right, #d32f2f, #f44336, #d32f2f); border: 5px solid #b71c1c; border-radius: 10px 10px 0 0; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 8px 8px 15px rgba(0,0,0,0.6); transition: transform 0.1s; }
        .drink-logo { font-size: 35px; font-weight: 900; color: white; text-shadow: 1px 1px 2px #000; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; width: 100%; height: 40px; }
        .drink-nozzle { width: 12px; height: 15px; background: #fff; border-radius: 0 0 5px 5px; margin-bottom: 5px; box-shadow: inset 0 -2px 5px rgba(0,0,0,0.3); }
        .drink-cup { width: 30px; height: 40px; background: rgba(255,255,255,0.9); border-radius: 0 0 10px 10px; border: 2px solid #ccc; border-top: none; position: relative; overflow: hidden; }
        .drink-liquid { position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; background: #3e2723; transition: height 0.2s; }
        .flames { position: absolute; left: 5px; height: 85%; width: 20px; background: linear-gradient(to top, #ff5722, #ffeb3b, transparent); border-radius: 10px; opacity: 0.8; animation: flicker 0.1s infinite alternate; }
        .spit-meat { width: 90%; height: 80%; background: linear-gradient(to right, #6d4c41, #8d6e63, #6d4c41); border-radius: 40% 40% 30% 30% / 10% 10% 80% 80%; box-shadow: inset -10px 0 20px rgba(0,0,0,0.7); transition: transform 0.1s; }
        
        .ingredient-tray { width: 65px; height: 50px; background: #e0e0e0; border: 3px solid #9e9e9e; border-bottom: 8px solid #757575; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 32px; cursor: pointer; box-shadow: 0 6px 10px rgba(0,0,0,0.3); transition: transform 0.1s; overflow: visible; pointer-events: auto;}
        .ingredient-tray:active { transform: translateY(4px); border-bottom-width: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
        .ingredient-tray::after { content: attr(data-label); position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 900; color: #fff; text-shadow: 1px 1px 2px #000; white-space: nowrap; pointer-events: none;}
        .ingredient-tray.ingredient-tray-plain { width: 72px; height: 72px; background: transparent; border: none; border-bottom: none; box-shadow: none; border-radius: 0; }
        .ingredient-tray.ingredient-tray-plain:active { transform: scale(0.96); border-bottom-width: 0; box-shadow: none; }
        .ingredient-tray.ingredient-tray-plain img { width: 100%; height: 100%; object-fit: contain; }
        .tray-style-pita { border-radius: 50% 50% 40% 40% !important; }

        .counter-table { position: absolute; bottom: 100px; width: 100%; height: 180px; background: linear-gradient(to bottom, #b0bec5, #78909c); border-top: 8px solid #cfd8dc; border-bottom: 6px solid #546e7a; z-index: 6; display: flex; justify-content: center; align-items: flex-start; padding-top: 25px; box-shadow: 0 -10px 20px rgba(0,0,0,0.4); pointer-events:none; }
        .prep-board { min-width: 120px; min-height: 44px; background: transparent; border: none; border-radius: 0; display: flex; justify-content: center; align-items: center; gap: 6px; box-shadow: none; pointer-events: auto; padding: 0 4px; }
        .prep-item { font-size: 35px; animation: pop 0.2s ease-out; display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; background: transparent; border: none; box-shadow: none; }
        .prep-item img { width: 100%; height: 100%; object-fit: contain; }

        .floating-text { position: absolute; color: #fff; font-weight: 900; font-size: 30px; text-shadow: 2px 2px 0 #000; pointer-events: none; z-index: 1000; animation: floatUp 1s ease-out forwards; display: flex; align-items: center; gap: 4px; }
        @keyframes floatUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-80px); } }

        /* PAUSE OVERLAY */
        #pause-overlay {
            position: absolute; inset: 0; background: rgba(0,0,0,0.7); z-index: 900; 
            display: none; justify-content: center; align-items: center; flex-direction: column;
            backdrop-filter: blur(5px); color: white;
        }
        #pause-overlay h1 { font-size: 60px; font-weight: 900; text-shadow: 0 4px 10px rgba(0,0,0,0.8); margin-bottom: 20px; color: #ffb300;}

        /* MAIN MENU */
        #main-menu { position: absolute; inset: 0; z-index: 1500; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #212121; background-size: cover; background-position: center; transition: opacity 0.5s; overflow: hidden; }
        .main-menu-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); z-index: 2; }
        .main-menu-bg-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; pointer-events: none; display: none; }
        .main-menu-content { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 20px; }
        .main-title-text { font-size: 70px; font-weight: 900; color: #fff; text-shadow: 0 4px 10px rgba(0,0,0,0.8), 0 0 20px #ffb300; text-align: center; line-height: 1.2; margin-bottom: 20px; -webkit-text-stroke: 2px #3e2723;}

        /* Modals & Master Admin */
        .modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.85); z-index: 2000; display: none; flex-direction: column; justify-content: center; align-items: center; backdrop-filter: blur(8px); overflow-y: auto;}
        .modal-box { background: #5d4037; border: 4px solid #3e2723; border-radius: 16px; padding: 24px; text-align: center; color: white; width: 500px; max-width: 95%; max-height: 95vh; overflow-y: auto; box-shadow: 0 10px 25px rgba(0,0,0,0.6); }
        .lb-entry { display: flex; justify-content: space-between; background: #3e2723; padding: 8px 12px; border-radius: 8px; margin-bottom: 6px; font-weight: bold; }
        .lb-entry.me { border: 2px solid #ffb300; background: #4e342e; }
        .save-indicator { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.7); color: white; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: bold; opacity: 0; transition: opacity 0.3s; z-index: 5000; }
        
        #master-admin-modal { z-index: 3000; }
        .master-admin-box { background: #f8fafc; border: 4px solid #1e293b; border-radius: 16px; width: 1100px; max-width: 95%; height: 90vh; display: flex; flex-direction: row-reverse; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.7); }
        .admin-sidebar { width: 250px; background: #1e293b; padding: 20px; display: flex; flex-direction: column; gap: 10px; border-left: 2px solid #334155; flex-shrink: 0; overflow-y: auto;}
        .admin-content { flex: 1; padding: 25px; overflow-y: auto; color: #0f172a; text-align: right; position: relative;}
        .admin-tab-btn { width: 100%; text-align: right; padding: 12px 16px; border-radius: 8px; font-weight: bold; color: #cbd5e1; transition: all 0.2s; border: 1px solid transparent; }
        .admin-tab-btn:hover { background-color: rgba(255,255,255,0.1); }
        .admin-tab-btn.active { background-color: #3b82f6; color: white; border-color: #60a5fa; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
        .admin-section { display: none; height: 100%;}
        .admin-section.active { display: block; }
        .admin-input { width: 100%; padding: 10px; border: 2px solid #cbd5e1; border-radius: 8px; font-weight: bold; outline: none; margin-bottom: 15px; }
        .admin-input:focus { border-color: #3b82f6; }
        .admin-label { display: block; font-weight: 900; color: #1e293b; margin-bottom: 6px; }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #3e2723; border-radius: 4px; }
        ::-webkit-scrollbar-thumb { background: #8d6e63; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #ffb300; }
        .admin-content::-webkit-scrollbar-track { background: #f1f5f9; }
        .admin-content::-webkit-scrollbar-thumb { background: #94a3b8; }

        /* Visual Layout Builder Styles */
        .layout-editor-container { width: 100%; aspect-ratio: 1100/650; max-height: 500px; background: #795548; position: relative; border-radius: 8px; border: 4px solid #334155; overflow: hidden; margin-bottom: 10px; background-image: linear-gradient(335deg, rgba(0,0,0,0.3) 2px, transparent 2px), linear-gradient(155deg, rgba(0,0,0,0.3) 2px, transparent 2px); background-size: 20px 10px; }
        .draggable-item { position: absolute; transform: translate(-50%, 50%); cursor: grab; display: flex; justify-content: center; align-items: center; font-weight: bold; color: white; user-select: none; z-index: 10; border: 2px dashed rgba(255,255,255,0.4); transition: border 0.2s; touch-action: none; text-shadow: 1px 1px 2px #000; text-align: center; }
        .draggable-item:hover { border-color: #ffeb3b; background: rgba(255,235,59,0.2); }
        .draggable-item.active-drag { cursor: grabbing; border-color: #00e5ff; z-index: 100; background: rgba(0,229,255,0.3); }
        .draggable-item.drag-order-no-frame { border: none !important; box-shadow: none !important; }
        .draggable-item.drag-order-no-frame:hover { border: none !important; background: transparent !important; }
        .draggable-item.drag-order-no-frame.active-drag { border: none !important; background: transparent !important; }
        
        .drag-box { background: rgba(0, 0, 0, 0.6); border-radius: 8px; padding: 5px; min-width: 60px; min-height: 40px; flex-direction: column;}
        .drag-customer-spot { background: rgba(76, 175, 80, 0.4); border: 2px dashed #4caf50; border-radius: 50%; width: 80px; height: 30px; }
        .drag-customer-spot::after { content: '\0648\0642\0648\0641 \0627\0644\0632\0628\0648\0646'; font-size: 10px; position: absolute; bottom: -20px; color: #4caf50; white-space: nowrap;}
        .drag-station { border: 1px dashed rgba(255,255,255,0.45); background: transparent; padding: 0; }
        .draggable-item.drag-station:hover { background: rgba(59,130,246,0.18); border-color: #93c5fd; }
        
        #layout-props-panel { position: absolute; top: 10px; right: 10px; background: white; border: 2px solid #cbd5e1; border-radius: 8px; padding: 15px; width: 260px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); display: none; z-index: 150; }
        
        /* Mood Overlays */
        .mood-overlay { position: absolute; top: -0.34em; left: 50%; font-size: 0.16em; transform: translateX(-50%) scale(1); filter: drop-shadow(0 2px 2px rgba(0,0,0,0.45)); animation: popMood 0.26s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        @keyframes popMood { 0% { transform: translateX(-50%) scale(0); } 100% { transform: translateX(-50%) scale(1); } }






/* Main Menu Auth */
.mm-auth-panel {
    position: absolute;
    left: 50%;
    bottom: 3.5%;
    transform: translateX(-50%);
    z-index: 15;
    width: min(92%, 560px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 14px;
    padding: 10px 12px;
    backdrop-filter: blur(6px);
}

.mm-auth-status-line {
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.mm-auth-actions {
    width: 100%;
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.mm-auth-btn {
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 900;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, opacity 0.2s ease;
}

.mm-auth-btn:hover { transform: translateY(-1px); }
.mm-auth-btn:active { transform: translateY(1px); }
.mm-auth-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

.mm-auth-btn-google { background: linear-gradient(180deg, #ef4444, #b91c1c); }
.mm-auth-btn-facebook { background: linear-gradient(180deg, #2563eb, #1d4ed8); }
.mm-auth-btn-logout { background: linear-gradient(180deg, #475569, #334155); }

.mm-auth-user-name {
    color: #f8fafc;
    font-size: 13px;
    font-weight: 900;
    max-width: 260px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@media (max-width: 800px) {
    .mm-auth-panel {
        bottom: 2.5%;
        width: min(95%, 520px);
        padding: 8px 10px;
    }

    .mm-auth-btn {
        padding: 7px 10px;
        font-size: 12px;
    }

    .mm-auth-status-line {
        font-size: 12px;
    }
}





@media (max-width: 800px) {
    .inventory-box {
        width: 320px;
        min-height: 86px;
        padding: 6px 8px;
    }

    .inventory-items-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 5px;
    }

    .inv-item-station {
        padding: 4px 5px;
    }
}