*{box-sizing:border-box;margin:0;padding:0}body{font-family:Gmarket Sans,-apple-system,BlinkMacSystemFont,sans-serif;background:#fdf6ee;color:#2c1a0e;min-height:100vh}header{background:#fff8f0;border-bottom:2px solid #f0d9c0;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px #b4641e14;position:sticky;top:0;z-index:100}header h1{font-size:1.4rem;font-weight:700;color:#7c3f10;letter-spacing:-.5px}.header-right{display:flex;align-items:center;gap:16px}.online-badge{font-size:.78rem;font-weight:500;color:#9ca3af;transition:color .3s}.online-badge.connected{color:#22c55e}header nav a{color:#9c6a3a;text-decoration:none;font-size:.85rem;transition:color .2s}header nav a:hover{color:#7c3f10}main{max-width:560px;margin:0 auto;padding:28px 20px 60px;display:flex;flex-direction:column;gap:28px}.add-menu-section{background:#fff;border:1.5px solid #eddcc8;border-radius:16px;padding:16px;box-shadow:0 2px 6px #b4641e0f}#add-menu-form{display:flex;gap:8px;align-items:center}.emoji-picker-wrap{position:relative;flex-shrink:0}#emoji-trigger{width:52px;height:42px;font-size:1.2rem;border:1.5px solid #e8c9a4;border-radius:8px;background:#fdf6ee;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0}#emoji-trigger:hover{border-color:#c2692a;background:#fff0e0}#emoji-trigger.open{border-color:#c2692a;background:#fff0e0;box-shadow:0 0 0 3px #c2692a26}.emoji-palette{display:none;position:absolute;top:calc(100% + 8px);left:0;background:#fdf6ee;border:1.5px solid #e8c9a4;border-radius:14px;padding:12px;box-shadow:0 8px 32px #00000024;z-index:200;width:272px;max-width:calc(100vw - 40px)}.emoji-palette.open{display:block;animation:fadeIn .15s ease}.emoji-grid{display:flex;flex-direction:column;gap:8px}.ep-label{font-size:.72rem;font-weight:700;color:#a07040;letter-spacing:.5px;text-transform:uppercase}.emoji-row{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.ep-btn{width:100%;aspect-ratio:1;font-size:1.1rem;border:none;background:#fdf6ee;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .1s,transform .1s;padding:0;line-height:1}.ep-btn:hover{background:#f5e6d0;transform:scale(1.2)}.ep-btn:active{transform:scale(.95)}#add-menu-emoji{width:52px;text-align:center;font-size:1.1rem;padding:10px 6px;border:1.5px solid #e8c9a4;border-radius:8px;background:#fdf6ee;color:#3d1f08}#add-menu-name{flex:2}#add-menu-price{flex:1;min-width:0}#add-menu-name,#add-menu-price{padding:10px 12px;border:1.5px solid #e8c9a4;border-radius:8px;background:#fdf6ee;color:#3d1f08;font-size:.88rem;font-family:inherit;transition:border-color .2s}#add-menu-name:focus,#add-menu-price:focus,#add-menu-emoji:focus{outline:none;border-color:#c2692a}#add-menu-name::placeholder,#add-menu-price::placeholder{color:#c4a882}#add-menu-form button[type=submit]{background:linear-gradient(135deg,#c2692a,#e08040);color:#fff;border:none;border-radius:8px;padding:10px 16px;font-size:.88rem;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .2s}#add-menu-form button[type=submit]:hover{background:linear-gradient(135deg,#a85520,#c2692a);transform:translateY(-1px)}.summary-qty-price{display:flex;align-items:center;gap:8px}.summary-line-price{font-size:.82rem;color:#a07040;font-weight:500}.total-count{margin-top:14px;padding-top:14px;border-top:2px solid #eddcc8;display:flex;flex-direction:column;gap:6px}.total-row{display:flex;align-items:baseline;justify-content:flex-end;gap:6px;font-size:.9rem;color:#6b3a1f;font-weight:500}.total-row strong{font-size:1.3rem;color:#c2692a}.total-price-row strong{font-size:1.5rem}.menu-section{display:grid;grid-template-columns:1fr 1fr;gap:12px}.menu-card{background:#fff;border:1.5px solid #eddcc8;border-radius:16px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:all .2s;box-shadow:0 2px 6px #b4641e0f}.menu-delete-btn{position:absolute;top:8px;right:8px;width:22px;height:22px;border:none;border-radius:50%;background:#ef44441f;color:#ef4444;font-size:.65rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s;-webkit-tap-highlight-color:transparent}.menu-card{position:relative}.menu-card:hover .menu-delete-btn,.menu-card:focus-within .menu-delete-btn{opacity:1}.menu-delete-btn:hover{background:#ef444440;transform:scale(1.1)}@media (hover: none){.menu-delete-btn{opacity:1}}.menu-card:hover{border-color:#d4863a;box-shadow:0 4px 14px #b4641e24;transform:translateY(-1px)}.menu-card.active{border-color:#c2692a;background:#fff5eb}.menu-emoji{font-size:2rem;line-height:1}.menu-name{font-size:.9rem;font-weight:700;color:#3d1f08;text-align:center;line-height:1.3}.menu-price{font-size:.78rem;color:#a07040;font-weight:500}.qty-control{display:flex;align-items:center;gap:0;background:#fdf0e4;border:1.5px solid #e8c9a4;border-radius:30px;overflow:hidden;margin-top:4px}.qty-btn{width:36px;height:36px;border:none;background:transparent;color:#7c3f10;font-size:1.2rem;font-weight:700;cursor:pointer;transition:background .15s;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}.qty-btn:hover{background:#b4641e1f}.qty-btn:active{background:#b4641e38}.qty-btn.minus{border-radius:30px 0 0 30px}.qty-btn.plus{border-radius:0 30px 30px 0}.qty-num{min-width:32px;text-align:center;font-size:1rem;font-weight:700;color:#3d1f08;transition:transform .15s}.qty-num.bump{transform:scale(1.35)}.summary-section{background:#fff;border:1.5px solid #eddcc8;border-radius:16px;padding:20px;box-shadow:0 2px 8px #b4641e0f}.summary-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.summary-header h2{font-size:1rem;font-weight:700;color:#3d1f08}.reset-btn{background:transparent;border:1.5px solid #e8c9a4;border-radius:8px;color:#a07040;font-size:.8rem;font-weight:500;padding:6px 12px;cursor:pointer;font-family:inherit;transition:all .2s}.reset-btn:hover{border-color:#e05a2b;color:#e05a2b;background:#e05a2b0f}.summary-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px dashed #f0d9c0;animation:fadeIn .2s ease}.summary-row:last-child{border-bottom:none}.summary-menu{display:flex;align-items:center;gap:8px;font-size:.9rem;color:#3d1f08}.summary-qty{font-size:.9rem;font-weight:700;color:#c2692a;background:#fff0e0;padding:3px 10px;border-radius:20px}.empty{text-align:center;color:#b09070;padding:24px 0;font-size:.9rem}@keyframes slideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(110%);opacity:0}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 480px){main{padding:16px 12px 60px;gap:16px}header{padding:14px 16px}#add-menu-form{flex-wrap:wrap;gap:8px}.emoji-picker-wrap{flex-shrink:0;order:1}#add-menu-form #add-menu-name{flex:1 1 0;min-width:0;font-size:16px;order:2}#add-menu-form #add-menu-price{flex:1 1 0;min-width:0;font-size:16px;order:3}#add-menu-form button[type=submit]{flex-shrink:0;order:4;padding:12px 20px;font-size:1rem}.emoji-palette{width:calc(100vw - 48px);left:0}.menu-section{grid-template-columns:1fr 1fr;gap:10px}.menu-card{padding:16px 10px}.menu-emoji{font-size:1.7rem}.menu-name{font-size:.82rem}.qty-btn{width:32px;height:32px}}