:root{
  --bg:        #0b0d0e;
  --bg-alt:    #14171a;
  --panel:     #181c1f;
  --border:    #2a2f33;
  --text:      #e8e8e8;
  --muted:     #8c9195;
  --spice:     #e8a000;
  --spice-l:   #f4c542;
  --accent:    #3ddc84;

  --harkonnen: #e63946;
  --neutral:   #f4c542;
  --atreides:  #3ddc84;
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Rajdhani',Arial,sans-serif; letter-spacing:0.02em;
}
a{color:var(--spice-l); text-decoration:none;}
a:hover{text-decoration:underline;}

.container{max-width:1100px;margin:0 auto;padding:1.5rem;}

.navbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 1.5rem; background:var(--bg-alt); border-bottom:1px solid var(--border);
}
.navbar .logo{font-size:1.2rem; font-weight:700; color:var(--spice-l); text-transform:uppercase; letter-spacing:0.15em;}
.navbar .logo span{color:var(--accent);}
.navbar nav a{margin-left:1.2rem; color:var(--muted); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.1em;}
.navbar nav a:hover, .navbar nav a.active{color:var(--spice-l);}

.card{
  background:var(--panel); border:1px solid var(--border);
  padding:1.5rem; margin-bottom:1.2rem;
}
h1,h2,h3{font-family:'Rajdhani',sans-serif; text-transform:uppercase; letter-spacing:0.08em; color:var(--spice-l); margin-top:0;}

label{display:block; font-size:0.75rem; letter-spacing:0.1em; color:var(--muted); text-transform:uppercase; margin:0.8rem 0 0.3rem;}
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea{
  width:100%; padding:0.6rem 0.7rem; background:var(--bg); border:1px solid var(--border);
  color:var(--text); font-family:inherit; font-size:0.95rem;
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--spice);}

.btn{
  display:inline-block; padding:0.55rem 1.2rem; background:var(--spice);
  color:#0b0d0e; border:none; font-weight:700; text-transform:uppercase;
  letter-spacing:0.08em; cursor:pointer; font-size:0.85rem;
}
.btn:hover{background:var(--spice-l);}
.btn.secondary{background:transparent; border:1px solid var(--border); color:var(--text);}
.btn.danger{background:var(--harkonnen); color:#fff;}
.btn.small{padding:0.3rem 0.7rem; font-size:0.75rem;}

.alert{padding:0.8rem 1rem; margin-bottom:1rem; border-left:3px solid var(--spice);}
.alert.error{border-color:var(--harkonnen); background:rgba(230,57,70,0.08); color:#ff8f96;}
.alert.success{border-color:var(--accent); background:rgba(61,220,132,0.08); color:#8ff5b6;}

table{width:100%; border-collapse:collapse;}
th,td{padding:0.6rem 0.7rem; border-bottom:1px solid var(--border); text-align:left; font-size:0.9rem;}
th{color:var(--muted); text-transform:uppercase; font-size:0.75rem; letter-spacing:0.08em;}

.badge{
  display:inline-block; padding:0.15rem 0.55rem; font-size:0.72rem;
  text-transform:uppercase; letter-spacing:0.06em; font-weight:700; border-radius:2px;
}
.badge.tier{background:var(--bg-alt); border:1px solid var(--border); color:var(--spice-l);}
.badge.faction-Harkonnen{background:rgba(230,57,70,0.15); color:var(--harkonnen); border:1px solid var(--harkonnen);}
.badge.faction-Neutral{background:rgba(244,197,66,0.15); color:var(--neutral); border:1px solid var(--neutral);}
.badge.faction-Atreides{background:rgba(61,220,132,0.15); color:var(--atreides); border:1px solid var(--atreides);}

.blueprint-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem;}
.blueprint-card{background:var(--panel); border:1px solid var(--border); padding:1rem;}
.blueprint-card img{width:100%; height:120px; object-fit:contain; background:var(--bg); margin-bottom:0.6rem;}
.blueprint-card .bp-name{font-weight:700; color:var(--text);}
.blueprint-card .offer-row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:0.4rem 0; font-size:0.85rem; border-top:1px solid var(--border); row-gap:0.2rem;}
.blueprint-card .offer-row .price{font-weight:700; font-size:1rem; width:100%; text-align:right;}

.qty-control{display:flex; align-items:center; gap:0.5rem;}
.qty-control button{width:28px; height:28px; background:var(--bg-alt); border:1px solid var(--border); color:var(--text); cursor:pointer; font-size:1rem;}
.qty-control button:hover{border-color:var(--spice);}

/* ---- Blueprint icon grid (market overview) ---- */
.category-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:0.5rem 0.8rem; margin:1.5rem 0 0.6rem; background:var(--bg-alt);
  border-left:3px solid var(--spice); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--spice-l);
}
.category-header .count{color:var(--muted); font-size:0.75rem; letter-spacing:0.05em;}

.icon-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:0.6rem;}
.icon-tile{
  position:relative; aspect-ratio:1/1; background:var(--panel); border:1px solid var(--border);
  cursor:pointer; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.icon-tile:hover{border-color:var(--spice); box-shadow:0 0 0 1px var(--spice);}
.icon-tile img{width:70%; height:70%; object-fit:contain;}
.icon-tile .no-icon-label{color:var(--muted); font-size:0.6rem; text-align:center; padding:0.4rem;}
.icon-tile .tier-corner{
  position:absolute; top:2px; left:2px; background:rgba(0,0,0,0.6); color:var(--spice-l);
  font-size:0.6rem; font-weight:700; padding:0.05rem 0.3rem; letter-spacing:0.03em;
}
.icon-tile .pos-corner{
  position:absolute; top:2px; right:2px; background:rgba(0,0,0,0.6); color:var(--muted);
  font-size:0.58rem; font-weight:700; padding:0.05rem 0.3rem; letter-spacing:0.03em;
}
.icon-tile .offer-count{
  position:absolute; bottom:2px; right:2px; background:rgba(0,0,0,0.75); color:var(--accent);
  font-size:0.65rem; font-weight:700; min-width:16px; text-align:center; padding:0.05rem 0.25rem;
}
.icon-tile .offer-count.none{color:var(--muted);}

/* ---- Modal ---- */
.bp-modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:1000;
  align-items:center; justify-content:center; padding:1rem;
}
.bp-modal-overlay.show{display:flex;}
.bp-modal-box{
  background:var(--panel); border:1px solid var(--border); max-width:420px; width:100%;
  max-height:80vh; overflow-y:auto; padding:1.2rem;
}
.bp-modal-box .flex-between{margin-bottom:0.8rem;}
.bp-modal-box h3{margin:0; font-size:0.95rem;}
.bp-modal-box .close-btn{background:none; border:none; color:var(--muted); font-size:1.3rem; cursor:pointer; line-height:1;}
.bp-modal-box .close-btn:hover{color:var(--text);}

.muted{color:var(--muted);}
.mt-1{margin-top:1rem;} .mt-2{margin-top:2rem;}
.flex-between{display:flex; justify-content:space-between; align-items:center;}