:root {
			--bg: #0f1117;
			--card: #1a1f2e;
			--text: #e2e8f0;
			--text-light: #94a3b8;
			--primary: #f59e0b;
			--green: #22c55e;
			--red: #ef4444;
			--border: #2d3748;
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			font-family: system-ui, -apple-system, sans-serif;
			background: var(--bg);
			color: var(--text);
			min-height: 100vh;
			display: flex;
			flex-direction: column;
		}

		header {
			background: #111827;
			padding: 12px 20px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid var(--border);
		}

		.logo {
			font-size: 1.5rem;
			font-weight: bold;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.logo i {
			color: var(--primary);
		}

		.right-header {
			display: flex;
			align-items: center;
			gap: 20px;
		}

		.search-bar {
			background: var(--card);
			border: 1px solid var(--border);
			border-radius: 8px;
			padding: 8px 14px;
			width: 320px;
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.search-bar input {
			background: transparent;
			border: none;
			color: var(--text);
			flex: 1;
		}

		.icon-btn {
			background: none;
			border: none;
			color: var(--text-light);
			font-size: 1.3rem;
			cursor: pointer;
		}

		.main {
			display: flex;
			flex: 1;
			overflow: hidden;
		}
		
		/* LEFT NARROW TABLE PANEL */
        .tables-panel {
            width: 200px;
            background: #0c0f1a;
            border-right: 1px solid var(--border);
            transition: width 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .tables-panel.collapsed {
            width: 10px;
        }

        .toggle-btn {
            position: absolute;
            top: 10px;
            right: 0px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--primary);
            border: none;
            cursor: pointer;
            z-index: 10;
        }

        .tables-content {
            padding: 20px;
        }

        .tables-panel.collapsed .tables-content {
           /* display: none; */
        }

        .table-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 20px;
        }

        .table-card {
            background: var(--card);
            padding: 10px;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            border: 1px solid var(--border);
        }

		.left-panel {
			width: 75%;
			padding: 20px;
			overflow-y: auto;
		}
        .left-panel.collapsed {
            width: 10px;
        }

		.menu-header {
			display: flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 20px;
		}

		.back-btn {
			background: var(--card);
			border: 1px solid var(--border);
			width: 44px;
			height: 44px;
			border-radius: 12px;
			display: grid;
			place-items: center;
			font-size: 1.3rem;
			color: var(--text-light);
		}

		.category-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
			gap: 14px;
			margin-bottom: 28px;
		}

		.category-card {
			background: linear-gradient(135deg, #1e293b, #111827);
			border-radius: 16px;
			padding: 20px 16px;
			text-align: center;
			color: white;
			font-weight: 600;
			cursor: pointer;
			transition: transform 0.12s;
		}

		.category-card:hover {
			transform: translateY(-2px);
		}

		.items-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
			gap: 16px;
		}

		.item-card {
			background: var(--card);
			border-radius: 12px;
			padding: 14px;
			text-align: center;
			border: 1px solid var(--border);
		}

		.item-name {
			font-weight: 600;
			margin: 10px 0 6px;
			font-size: 1.05rem;
		}

		.item-price {
			color: var(--green);
			font-weight: bold;
			margin-bottom: 10px;
		}

		.qty-controls {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 12px;
			background: #111827;
			border-radius: 30px;
			padding: 4px 10px;
			width: fit-content;
			margin: 0 auto;
		}

		.qty-btn {
			background: none;
			border: none;
			color: var(--text);
			font-size: 1.4rem;
			width: 28px;
			height: 28px;
			cursor: pointer;
		}

		.qty {
			width: 36px;
			text-align: center;
			font-weight: bold;
		}

		.add-btn {
			background: var(--green);
			color: black;
			border: none;
			border-radius: 50%;
			width: 36px;
			height: 36px;
			font-size: 1.3rem;
			cursor: pointer;
			margin-top: 10px;
		}

		.right-panel {
			width: 25%;
			background: #0c0f1a;
			border-left: 1px solid var(--border);
			display: flex;
			flex-direction: column;
			padding: 20px;
		}
		.right-panel.expand {
            width: 100%;
            display:block;
        }

		.customer-info {
			background: var(--card);
			border-radius: 12px;
			padding: 16px;
			margin-bottom: 20px;
		}

		.cn-badge {
			background: var(--primary);
			color: black;
			font-weight: bold;
			padding: 6px 10px;
			border-radius: 8px;
			display: inline-block;
			margin-bottom: 8px;
		}

		.order-items {
			flex: 1;
			overflow-y: auto;
		}

		.order-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: var(--card);
			padding: 12px 14px;
			border-radius: 10px;
			margin-bottom: 12px;
		}

		.order-item-left {
			flex: 1;
		}

		.order-qty {
			color: var(--text-light);
		}

		.order-actions {
			display: flex;
			gap: 8px;
		}

		.summary {
			background: var(--card);
			border-radius: 12px;
			padding: 16px;
			margin: 20px 0;
		}

		.summary-row {
			display: flex;
			justify-content: space-between;
			margin: 8px 0;
		}

		.payment-methods {
			display: flex;
			gap: 12px;
			margin: 20px 0;
		}

		.pay-btn {
			flex: 1;
			padding: 14px;
			border: none;
			border-radius: 10px;
			font-weight: bold;
			cursor: pointer;
		}

		.cash {
			background: #334155;
			color: white;
		}

		.online {
			background: var(--green);
			color: black;
		}

		.action-bar {
			display: flex;
			gap: 12px;
			margin-top: auto;
		}

		.big-btn {
			flex: 1;
			padding: 16px;
			font-size: 1.1rem;
			font-weight: bold;
			border: none;
			border-radius: 12px;
			cursor: pointer;
		}

		.print {
			background: #3b82f6;
			color: white;
		}

		.place {
			background: var(--primary);
			color: black;
		}

		footer {
			background: #111827;
			padding: 12px 20px;
			display: flex;
			justify-content: space-around;
			border-top: 1px solid var(--border);
		}

		.nav-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: var(--text-light);
			font-size: 0.85rem;
			gap: 4px;
		}

		.nav-item.active {
			color: var(--primary);
		}

		.bell {
			position: relative;
		}

		.bell::after {
			content: "";
			position: absolute;
			width: 10px;
			height: 10px;
			background: var(--red);
			border-radius: 50%;
			top: -4px;
			right: -4px;
		}