:root{
  --primary:#1F2933;
  --secondary:#52606D;
  --accent:#F97316;
  --bg:#F5F7FA;
  --surface:#FFFFFF;
  --border:#D9E2EC;
  --muted:#7B8794;
  --success:#16A34A;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  background:var(--bg);
  color:var(--primary);
}

/* PAGE */
.page{
  max-width:700px;
  margin:40px auto;
  padding:0 20px;
}

/* HEADER */
.header h1{
  font-size:34px;
}

.header p{
  color:var(--muted);
  margin-top:5px;
}

/* ORDER LIST */
.list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* CARD */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  transition:.2s;
}

.card:hover{
  transform:translateY(-3px);
  border-color:var(--accent);
}

/* TOP ROW */
.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.id{
  font-weight:bold;
}

/* STATUS CHIP */
.status{
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--secondary);
}

/* STATUS VARIANTS (ONLY PALETTE) */
.status.Delivered{
  color:var(--success);
}

.status.Processing{
  color:var(--accent);
}

.status.Pending{
  color:var(--secondary);
}

.status.Cancelled{
  color:var(--muted);
}

/* META */
.meta{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:14px;
}

/* BUTTON */
.btn{
  margin-top:12px;
  padding:10px 14px;
  border:none;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  cursor:pointer;
}

/* EMPTY */
.empty{
  text-align:center;
  margin-top:40px;
  color:var(--muted);
}

.hidden{display:none;}