:root{
  --blue:#1f5cff;
  --blue-dark:#1b4bd6;
  --bg:#eff3f8;
  --text:#0b1220;
  --muted:#657a96;
  --card:#ffffff;
  --border:#e3e8f2;
  --shadow:0 10px 24px rgba(10,20,60,.10);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:18px}

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:16px;
}
.title{margin:0 0 8px;font-size:26px;letter-spacing:-.2px}
.subtitle{margin:0;color:var(--muted);line-height:1.45}
.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(227,232,242,.95);
  background:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:12px;
  letter-spacing:.3px;
}
.chip.primary{border-color:rgba(31,92,255,.35);background:rgba(31,92,255,.10);color:var(--blue-dark)}
.chip.danger{border-color:rgba(204,31,26,.35);background:rgba(204,31,26,.10);color:#cc1f1a}
.brand{display:flex;flex-direction:column;gap:2px;text-decoration:none}
.brand strong{font-size:14px;letter-spacing:.4px}
.brand span{font-size:11px;color:rgba(255,255,255,.70)}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(227,232,242,.9);
  backdrop-filter:saturate(140%) blur(10px);
}
.logo-sticker{
  position:fixed;
  top:10px;
  left:max(18px, calc((100vw - 1100px) / 2 + 18px));
  transform:none;
  width:96px;
  height:96px;
  border-radius:999px;
  background:#fff;
  border:2px solid rgba(18,58,114,.18);
  box-shadow:var(--shadow);
  display:none;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  z-index:35;
  text-decoration:none;
}
.logo-sticker img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.has-logo .site-header-inner{
  padding-top:42px;
}
.has-logo .logo-mark{
  display:none;
}
.has-logo .logo-sticker{
  display:flex;
}
.site-header-inner{
  max-width:1100px;
  margin:0 auto;
  padding:10px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.logo-mark{
  width:38px;height:38px;
  border-radius:10px;
  background:rgba(31,92,255,.10);
  color:var(--blue-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.logo-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.logo-text{display:flex;flex-direction:column;gap:2px}
.logo-text strong{font-size:14px;letter-spacing:.4px}
.logo-text span{font-size:11px;color:var(--muted)}
.logo-text{display:none}

.site-nav{
  display:flex;
  gap:18px;
  align-items:center;
  flex:1 1 auto;
  justify-content:center;
}
.site-nav a{
  text-decoration:none;
  font-size:12px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#24324a;
  padding:10px 6px;
  border-bottom:2px solid transparent;
}
.site-nav a.active{
  color:var(--blue-dark);
  border-bottom-color:var(--blue-dark);
}

.site-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}
.lang-switch{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
}
.lang-switch a{
  text-decoration:none;
  color:#24324a;
  font-weight:600;
}
.lang-switch a.active{color:var(--blue-dark)}
.lang-switch .sep{color:#a1afc5}
.icon-btn{
  width:34px;height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:1px solid rgba(227,232,242,.9);
  background:#fff;
  position:relative;
}
.icon-btn.active{border-color:rgba(31,92,255,.35);background:rgba(31,92,255,.08);color:var(--blue-dark)}
.fav-badge{
  position:absolute;
  right:-6px;
  top:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:var(--blue-dark);
  color:#fff;
  font-size:11px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #fff;
}

.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translate(-50%, 16px);
  opacity:0;
  pointer-events:none;
  background:#0b1a2b;
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:var(--shadow);
  font-weight:800;
  font-size:12px;
  letter-spacing:.2px;
  transition:opacity .18s ease, transform .18s ease;
  z-index:50;
}
.toast.show{
  opacity:1;
  transform:translate(-50%, 0);
}

.hero-banner{
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.32) 55%, rgba(0,0,0,.50) 100%),
    url("/assets/hero.jpg");
  background-size:cover;
  background-position:center;
  margin-top:18px;
}
.hero-inner{
  padding:26px;
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:18px;
  align-items:stretch;
  min-height:280px;
}
.hero-left h1{
  margin:0 0 12px;
  font-size:44px;
  letter-spacing:-.6px;
  line-height:1.05;
  color:#fff;
}
.hero-left p{
  margin:0;
  color:rgba(255,255,255,.80);
  font-size:13px;
  max-width:56ch;
  line-height:1.55;
}
.hero-actions{margin-top:16px}
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:10px;
  background:var(--blue-dark);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.5px;
  font-size:12px;
  text-transform:uppercase;
}
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:10px;
  background:#fff;
  color:var(--blue-dark);
  border:1px solid rgba(31,92,255,.30);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.4px;
  font-size:12px;
  text-transform:uppercase;
}

.hero-status-card{
  align-self:center;
  background:rgba(17,29,48,.68);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:14px;
  color:#fff;
  backdrop-filter: blur(10px) saturate(140%);
}
.hero-status-title{
  font-size:11px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:rgba(255,255,255,.80);
}
.hero-sign{margin-top:12px;display:flex;flex-direction:column;align-items:flex-start}
.hero-sign-strap{
  width:52px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
  margin-left:10px;
}
.hero-sign-board{
  margin-top:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:96px;
  padding:8px 12px;
  border-radius:12px;
  font-weight:900;
  letter-spacing:.9px;
  font-size:12px;
  background:#fff;
  color:#0b1220;
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}
.hero-sign-board.closed{color:#0b1220}
.hero-sign-board.open{color:#0b1220}
.hero-status-text{
  margin-top:10px;
  color:rgba(255,255,255,.84);
  font-size:12px;
  line-height:1.45;
}

.features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:14px;
}
.feature{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:12px;
  display:flex;
  gap:10px;
  align-items:center;
}
.feature-icon{
  width:34px;height:34px;
  border-radius:10px;
  background:rgba(31,92,255,.10);
  color:var(--blue-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}
.feature-title{
  font-size:11px;
  letter-spacing:.7px;
  text-transform:uppercase;
  font-weight:800;
  color:#24324a;
}
.feature-desc{
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}

.menu-preview{
  margin-top:18px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(227,232,242,.9);
  border-radius:18px;
  padding:16px;
}
.section-head{display:flex;justify-content:center}
.section-title{
  font-size:12px;
  letter-spacing:.9px;
  text-transform:uppercase;
  font-weight:900;
  color:#24324a;
}
.section-subtitle{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
}
.menu-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.category-pills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:14px;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(227,232,242,.95);
  background:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:12px;
  color:#24324a;
}
.pill.active{
  background:var(--blue-dark);
  border-color:var(--blue-dark);
  color:#fff;
}

.menu-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
  margin-top:14px;
}
.menu-card{
  grid-column:span 3;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.menu-card:hover{transform:translateY(-1px);transition:transform .12s ease}
.menu-card-image{
  position:relative;
  height:140px;
  background:
    radial-gradient(500px 180px at 30% 30%, rgba(31,92,255,.22), transparent 55%),
    linear-gradient(135deg,#0b1a2b 0%,#0d2b62 65%,#071018 100%);
}
.menu-card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.menu-heart{
  position:absolute;
  right:10px;
  top:10px;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(227,232,242,.9);
  background:#fff;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  color:#22314a;
}
.menu-heart.active{
  border-color:rgba(31,92,255,.35);
  background:rgba(31,92,255,.10);
  color:var(--blue-dark);
}
.menu-card-body{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1 1 auto;
}
.menu-card-name{
  font-size:13px;
  font-weight:800;
  color:#22314a;
}
.menu-card-desc{
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
  min-height:32px;
}
.menu-card-price{
  margin-top:auto;
  font-weight:900;
  color:#22314a;
}
.menu-cta{
  display:flex;
  justify-content:center;
  margin-top:14px;
}
.empty-state{
  margin-top:14px;
  padding:12px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--border);
  color:var(--muted);
  text-align:center;
}

.site-footer{
  margin-top:22px;
  color:#fff;
}
.footer-card{
  background:linear-gradient(180deg,#0b1a2b 0%,#071018 100%);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.site-footer-inner{
  padding:22px 18px;
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr;
  gap:18px;
}
.footer-logo{font-weight:900;letter-spacing:.3px}
.footer-logo-img{
  width:54px;
  height:54px;
  border-radius:999px;
  background:#fff;
  border:2px solid rgba(255,255,255,.14);
  object-fit:contain;
  display:block;
  margin-bottom:10px;
}
.footer-tagline{margin-top:6px;color:rgba(255,255,255,.72);font-size:12px}
.footer-title{font-weight:900;letter-spacing:.6px;text-transform:uppercase;font-size:11px;margin-bottom:10px}
.footer-text{color:rgba(255,255,255,.76);font-size:12px;line-height:1.5}
.footer-row{display:flex;justify-content:space-between;gap:10px;color:rgba(255,255,255,.76);font-size:12px;line-height:1.6}
.footer-link{display:block;color:rgba(255,255,255,.76);text-decoration:none;font-size:12px;line-height:1.8}
.footer-social{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.footer-social a{color:rgba(255,255,255,.76);text-decoration:none;font-size:12px}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.10);
  text-align:center;
  padding:12px 18px;
  color:rgba(255,255,255,.60);
  font-size:12px;
}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.col-6{grid-column:span 6}
.col-12{grid-column:span 12}
label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px}
input,select,textarea{
  width:100%;
  border-radius:12px;
  border:1px solid var(--border);
  padding:10px 12px;
  font:inherit;
  background:#fff;
}
textarea{min-height:90px;resize:vertical}
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{font-size:12px;color:var(--muted);text-align:left;padding:0 10px}
.table td{background:#fff;border:1px solid var(--border);padding:10px;border-left:none;border-right:none}
.table tr td:first-child{border-left:1px solid var(--border);border-top-left-radius:12px;border-bottom-left-radius:12px}
.table tr td:last-child{border-right:1px solid var(--border);border-top-right-radius:12px;border-bottom-right-radius:12px}
.btn{
  border:1px solid var(--border);
  background:#fff;border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:800;
}
.btn.primary{border-color:rgba(31,92,255,.35);background:rgba(31,92,255,.10);color:var(--blue-dark)}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}

.admin-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.admin-sidebar{position:sticky;top:0;height:100vh;padding:16px 14px;background:linear-gradient(180deg,#0b1a2b 0%,#071018 100%);color:#fff}
.admin-logo{display:flex;gap:10px;align-items:center;text-decoration:none;color:#fff}
.admin-logo-mark{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center}
.admin-logo-text{display:flex;flex-direction:column;gap:2px}
.admin-logo-text strong{font-size:14px;letter-spacing:.4px}
.admin-logo-text span{font-size:11px;color:rgba(255,255,255,.72)}
.admin-nav{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.admin-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;text-decoration:none;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:#fff}
.admin-ic{width:18px;text-align:center;opacity:.95}
.admin-nav a.active{background:rgba(31,92,255,.18);border-color:rgba(31,92,255,.35)}
.admin-main{padding:18px;background:var(--bg)}
.admin-toprow{display:flex;align-items:center;justify-content:flex-end;margin-bottom:12px}
.admin-topright{display:flex;gap:10px;align-items:center}
.admin-user{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:12px;padding:8px 10px}
.admin-user-name{font-weight:800;font-size:12px;color:#22314a}
.admin-user-avatar{width:28px;height:28px;border-radius:999px;background:rgba(31,92,255,.10);color:var(--blue-dark);display:flex;align-items:center;justify-content:center}
.admin-image-preview{
  width:220px;
  height:140px;
  border-radius:12px;
  border:1px solid var(--border);
  object-fit:cover;
  background:#fff;
  display:block;
}
.admin-image-preview[src=""]{display:none}
.admin-thumb{
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  object-fit:cover;
  display:block;
}
.admin-thumb-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--blue-dark);
  background:rgba(31,92,255,.08);
  font-weight:900;
}
.admin-price-input{
  width:110px;
  padding:8px 10px;
  border-radius:10px;
}
.admin-save-state{
  margin-left:10px;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
}
.admin-move-btn{
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-weight:900;
  color:#22314a;
}
.admin-move-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
}

@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr}
  .features{grid-template-columns:repeat(2,1fr)}
  .menu-card{grid-column:span 6}
  .site-nav{display:none}
  .logo-text{display:flex}
  .has-logo .site-header-inner{padding-top:10px}
  .has-logo .logo-mark{display:flex}
  .has-logo .logo-sticker{display:none}
}
@media (max-width: 720px){
  .site-footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width: 540px){
  .menu-card{grid-column:span 12}
  .features{grid-template-columns:1fr}
  .hero-left h1{font-size:34px}
  .site-footer-inner{grid-template-columns:1fr}
  .admin-shell{grid-template-columns:1fr}
  .admin-sidebar{position:relative;height:auto}
}