:root{
  --app-bg:#f6f7fb;
  --app-surface:#ffffff;
  --app-card:#ffffff;
  --app-text:#0f172a;
  --app-muted:#334155;
  --app-accent:#16a34a;
  --app-accent-2:#2563eb;
  --app-danger:#dc2626;
  --app-border:rgba(15,23,42,.08);
  --app-shadow:0 10px 30px rgba(15,23,42,.08);
}

html,body{height:100%}

body.app-body,body.app-bg{
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(37,99,235,.10), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(22,163,74,.10), transparent 55%),
    var(--app-bg);
  color:var(--app-text)
}

.app-shell{min-height:100vh;display:flex;flex-direction:column}
.app-main{flex:1;max-width:720px;margin:0 auto;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.container-fluid{max-width:720px}

body.app-bg-admin .app-main{padding-bottom:calc(72px + env(safe-area-inset-bottom))}

.app-topbar-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px}
.app-topbar-center{font-weight:600;letter-spacing:-.01em;color:var(--app-text);font-size:14px}

body.app-bg-admin{
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(37,99,235,.16), transparent 60%),
    radial-gradient(900px 520px at 90% 15%, rgba(99,102,241,.14), transparent 60%),
    var(--app-bg);
}

body.app-bg-admin .app-topbar{background:rgba(255,255,255,.88)}

.text-muted{color:var(--app-muted)!important}

.app-logo{
  width:28px;
  height:28px;
  border-radius:8px;
  border:1px solid var(--app-border);
  background:#fff;
}

.app-topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--app-border)
}

.app-brand{font-weight:700;letter-spacing:-.02em;font-size:16px;color:var(--app-text)}
.app-subtitle{font-size:13px;color:var(--app-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw}

.app-card{
  background:var(--app-card);
  border:1px solid var(--app-border);
  border-radius:16px;
  box-shadow:var(--app-shadow)
}

.app-card .card-body{padding:14px}

.app-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--app-border);
  background:rgba(15,23,42,.04);
  font-size:12px;
  color:var(--app-text)
}

.app-chip--success{border-color:rgba(22,163,74,.18);background:rgba(22,163,74,.10);color:#14532d}
.app-chip--warn{border-color:rgba(245,158,11,.22);background:rgba(245,158,11,.10);color:#7c2d12}
.app-chip--danger{border-color:rgba(220,38,38,.22);background:rgba(220,38,38,.10);color:#7f1d1d}
.app-chip--info{border-color:rgba(37,99,235,.22);background:rgba(37,99,235,.10);color:#1e3a8a}

.app-btn-primary{background:linear-gradient(180deg,rgba(22,163,74,1),rgba(22,163,74,.9));border:none;color:#fff}
.app-btn-primary:hover{filter:brightness(1.02)}
.app-btn-danger{background:linear-gradient(180deg,rgba(220,38,38,1),rgba(220,38,38,.9));border:none;color:#fff}

.app-nav-btn{border-color:var(--app-border);background:rgba(255,255,255,.65);color:var(--app-text);border-radius:14px;padding:12px 10px}
.app-nav-btn:hover{background:#fff;border-color:rgba(15,23,42,.16);color:var(--app-text)}

.app-list-item{border:1px solid var(--app-border);background:rgba(255,255,255,.78);border-radius:14px}
.app-list-item + .app-list-item{margin-top:10px}

.app-bottom-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:25;
  padding:12px 12px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(246,247,251,0),rgba(246,247,251,.75) 25%,rgba(246,247,251,.95));
  backdrop-filter:blur(10px)
}

.app-bottom-pad{padding-bottom:92px}

.form-control,.form-select{background:#fff;border:1px solid var(--app-border);color:var(--app-text);border-radius:12px}
.form-control:focus,.form-select:focus{background:#fff;border-color:rgba(37,99,235,.35);box-shadow:0 0 0 .2rem rgba(37,99,235,.12);color:var(--app-text)}
.form-control::placeholder{color:rgba(100,116,139,.85)}

.btn-outline-light{border-color:var(--app-border);color:var(--app-text)}
.btn-outline-light:hover{background:rgba(15,23,42,.04)}

.btn-outline-secondary{border-color:var(--app-border);color:var(--app-text)}
.btn-outline-secondary:hover{background:rgba(15,23,42,.04)}

.app-price{font-variant-numeric:tabular-nums}
.app-muted{color:var(--app-muted)}

.status-chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--app-border);background:rgba(15,23,42,.03);color:var(--app-text)}
.status-chip.pending{border-color:rgba(245,158,11,.22);background:rgba(245,158,11,.10);color:#7c2d12}
.status-chip.accepted{border-color:rgba(37,99,235,.22);background:rgba(37,99,235,.10);color:#1e3a8a}
.status-chip.preparing{border-color:rgba(245,158,11,.22);background:rgba(245,158,11,.10);color:#7c2d12}
.status-chip.ready{border-color:rgba(22,163,74,.18);background:rgba(22,163,74,.10);color:#14532d}
.status-chip.completed{border-color:rgba(22,163,74,.18);background:rgba(22,163,74,.10);color:#14532d}

.table{color:var(--app-text)}
.table thead th{color:var(--app-muted);border-color:var(--app-border)}
.table td,.table th{border-color:var(--app-border)}
.table a{color:var(--app-accent-2)}