:root{
  --oil:#1f2b24; --oil-soft:#20332b; --gold:#c9a227; --gold2:#e6c979;
  --bg:#f6f7f4; --card:#fff; --muted:#5c6761;
}
*{box-sizing:border-box;font-family:"Tajawal",sans-serif}
html,body{margin:0;padding:0;background:var(--bg);color:#0b2a23}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:var(--oil);color:#eef3f1}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.logo{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--gold),var(--gold2))}
.lang{background:transparent;border:1px solid var(--gold);color:var(--gold);padding:6px 10px;border-radius:8px}
.hero{padding:48px 18px;text-align:center;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.12)),var(--oil);color:#fff}
.cta{display:flex;gap:12px;justify-content:center;margin-top:18px}
.btn{padding:10px 16px;border-radius:10px;border:none;background:#fff;color:var(--oil);font-weight:700}
.btn.primary{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#0b2a23}
.container{max-width:1100px;margin:18px auto;padding:0 14px}
.page{padding:14px}
.card{background:var(--card);border-radius:12px;padding:14px;border:1px solid #e8e8e6;box-shadow:0 8px 24px rgba(0,0,0,.05)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.select,.input{padding:10px;border-radius:8px;border:1px solid #d8dfdb;width:100%}
.actions{margin-top:12px;display:flex;gap:10px;justify-content:flex-end}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.offer-list{display:flex;gap:12px;flex-wrap:wrap}
.offer-box{background:#fff;padding:12px;border-radius:10px;border:1px solid #eee}
.muted{color:var(--muted)}
.footer{padding:12px;text-align:center;color:var(--muted)}
@media(max-width:760px){.row{flex-direction:column}}