:root{
	--brand: #6f4e37;
	--brand-dark: #5b3f2e;
	--accent: #e6b89c;
	--accent-light: #f5e8df;
	--muted: #6c6c6c;
	--surface: #ffffff;
	--bg: #faf7f5;
	--success: #27ae60;
	--warning: #f39c12;
}

*{box-sizing:border-box}
html,body{height:100%}
body{font-family:'Segoe UI', Roboto, system-ui, -apple-system, 'Helvetica Neue', Arial; margin:0; background:var(--bg); color:#222; -webkit-font-smoothing:antialiased}

/* Navbar */
.navbar{background:linear-gradient(135deg, var(--surface) 0%, rgba(245,232,223,0.5) 100%)!important;box-shadow:0 2px 8px rgba(0,0,0,0.08)!important}
.navbar-brand{font-weight:700;color:var(--brand)!important;font-size:1.4rem}
.navbar-brand img{height:56px;object-fit:contain;margin-right:12px}
.nav-link{color:#555!important;font-weight:500;transition:color 0.2s ease}
.nav-link:hover{color:var(--brand)!important}

/* Hero section */
.hero{background:linear-gradient(135deg, rgba(111,78,55,0.1) 0%, rgba(230,184,156,0.08) 100%);padding:48px 0 36px;margin-bottom:24px;border-bottom:2px solid rgba(111,78,55,0.08)}
.hero h1{font-size:2.2rem;margin-bottom:8px;color:var(--brand);font-weight:700}
.hero p{margin-bottom:0;color:var(--muted);font-size:1.05rem}

/* Container */
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* Menu grid */
.menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
.card-item{background:var(--surface);border-radius:12px;padding:14px;box-shadow:0 4px 16px rgba(111,78,55,0.08);transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);border:1px solid rgba(111,78,55,0.04);overflow:hidden}
.card-item:hover{transform:translateY(-8px);box-shadow:0 16px 40px rgba(111,78,55,0.15);border-color:var(--accent)}
.card-item img{border-radius:8px;width:100%;height:140px;object-fit:cover;margin-bottom:10px;transition:transform 0.3s ease}
.card-item:hover img{transform:scale(1.05)}
.card-item h4{margin:6px 0 4px;font-size:1.05rem;color:var(--brand);font-weight:600}
.card-item .price{color:var(--brand);font-weight:700;font-size:1.1rem}
.card-item .small{color:var(--muted)}

/* Buttons */
.btn-primary{background:linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);border:none;border-radius:6px;font-weight:600;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(111,78,55,0.2)}
.btn-primary:hover{box-shadow:0 8px 24px rgba(111,78,55,0.3);transform:translateY(-2px)}
.btn-outline-secondary{border-color:var(--muted);color:var(--muted);font-weight:500}
.btn-outline-secondary:hover{background:var(--muted);border-color:var(--muted);color:#fff}
.btn-outline-primary{border-color:var(--brand);color:var(--brand);font-weight:500}
.btn-outline-primary:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-success{background:var(--success);border:none;font-weight:600}
.btn-success:hover{background:darken(var(--success),10%)}

/* Form elements */
.form-control{border:1px solid #ddd;border-radius:6px;padding:8px 12px;transition:all 0.3s ease}
.form-control:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(111,78,55,0.1);outline:none}
.form-check-input{border-color:#ddd}
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}

/* Tables */
table{width:100%;border-collapse:collapse;margin-top:12px}
thead{background:linear-gradient(135deg, var(--accent-light) 0%, rgba(230,184,156,0.1) 100%)}
th{color:var(--brand);font-weight:600;padding:12px;text-align:left}
td{border-bottom:1px solid #eee;padding:12px;text-align:left}
tbody tr:hover{background:var(--accent-light)}

/* Cards */
.card{border:1px solid #eee;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.card-item, .order{background:var(--surface)}

/* Order card */
.order{border-radius:12px;padding:16px;margin:14px 0;box-shadow:0 4px 16px rgba(0,0,0,0.06);border-left:4px solid var(--brand);transition:all 0.3s ease}
.order:hover{box-shadow:0 8px 24px rgba(0,0,0,0.08)}
.order h5{color:var(--brand);font-weight:700;margin:0 0 8px}
.order ul{margin:8px 0;padding-left:20px}
.order li{color:#555;margin:4px 0}
.badge{font-weight:600;padding:4px 8px}
.badge.bg-secondary{background:var(--muted)!important}

/* Text utilities */
.muted{color:var(--muted)}
.text-center{text-align:center}
.gap-2{gap:8px}
.small{font-size:0.9rem;color:var(--muted)}

/* Responsive tweaks */
@media (max-width:768px){
	.hero{padding:32px 0;margin-bottom:20px}
	.hero h1{font-size:1.6rem}
	.menu{gap:16px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
	.card-item{padding:10px}
	.card-item img{height:100px}
}

@media (max-width:576px){
	.hero h1{font-size:1.4rem;margin-bottom:4px}
	.hero p{font-size:0.95rem}
	.menu{gap:12px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
	.card-item{padding:8px;border-radius:8px}
	.card-item img{height:90px;margin-bottom:6px}
	.card-item h4{font-size:0.95rem}
	.btn{font-size:0.85rem;padding:6px 12px}
}

/* Footer */
footer{background:linear-gradient(135deg, var(--surface) 0%, rgba(245,232,223,0.3) 100%);color:#999;font-weight:500}


