/* DAC'S Sleek UI — visual-only override */
:root{
  --gold:#d6b36a;
  --card:#0f0f0f;
  --line:#24211b;
  --muted:#a39d92;
}
body{font-size:13px;letter-spacing:-.005em}
.app{background:radial-gradient(circle at 18% 0,#18140c 0,transparent 28%),#080808}
header{height:64px;padding:0 3.2vw;border-bottom-color:#201d18}
.brand{gap:10px}
.mark{font-size:23px}
.brand b{font-size:10px;letter-spacing:.18em}
.brand small{font-size:10px;margin-top:1px}
.wrap{max-width:1240px;padding:28px 22px 48px}
.narrow{max-width:760px}
.hero{padding:22px 0 26px}
.eyebrow{font-size:9px;letter-spacing:.23em}
h1{font-size:32px;margin:6px 0 10px;line-height:1.08}
h2{font-size:19px;margin-top:18px}
.rolegrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.rolecard{height:220px;border-radius:14px}
.rolecontent{left:15px;right:15px;bottom:14px}
.rolecontent h2{font-size:18px;margin:4px 0 2px}
.rolecontent p{font-size:11px;line-height:1.3;margin:4px 0}
.rolecard img{filter:saturate(.48) contrast(1.06)}
.choicegrid{gap:10px;margin-top:16px}
.choice,.panel,.notice,.stat,.card{border-radius:12px;padding:15px}
.goldbox{background:linear-gradient(145deg,#141109,#0b0a08)}
.searchbar{margin:13px 0;gap:7px}
.searchbar input,.formgrid input,.formgrid select{padding:10px 11px;border-radius:8px}
.searchbar button,.primary,.row button,.action{padding:10px 13px;border-radius:8px;font-size:12px}
.ghost,.link{padding:8px 10px;border-radius:8px;font-size:12px}
.list{gap:6px;margin:10px 0 20px}
.row{padding:10px 12px;border-radius:9px}
.row span{font-size:11px;margin-top:2px}
.formgrid{gap:10px;margin:14px 0}
.formgrid label{font-size:10px}
.formgrid input,.formgrid select{margin-top:5px}
.titlebar{gap:10px}
.stats{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:14px 0 20px}
.stat strong{font-size:27px}
.stat span{font-size:10px}
.chip,.pill{padding:4px 8px;font-size:10px}
.dispatch-card{border-radius:11px;padding:13px;margin:8px 0}
.trip-head{gap:12px}
.trip-meta{font-size:11px;line-height:1.45}
.stop{padding:9px 11px;margin:6px 0;border-radius:0 9px 9px 0}
.stop small{margin:3px 0 7px}
.navbtn{padding:8px 11px;border-radius:7px;font-size:12px}
.quick-actions{gap:6px;margin-top:8px}
.module-state{padding:4px 7px;font-size:9px}
.tabs{gap:5px;margin:12px 0}
.tabs button{padding:7px 9px;border-radius:7px;font-size:11px}
footer{padding:18px;font-size:10px}
.opswrap{max-width:1320px}
.workflow{gap:5px;margin:8px 0 14px}
.workflow span{padding:6px 9px;font-size:10px}
.ops-tabs{top:64px;padding:7px 0}
.control-grid{grid-template-columns:1.35fr 1fr;gap:10px;margin:10px 0}
.jarvis-action{border-radius:12px;padding:15px}
.jarvis-list{margin-top:10px}
.jarvis-item{padding:8px 0}
.alertitem{padding:8px 10px;border-radius:0 8px 8px 0;margin:6px 0}
.card+.card{margin-top:8px}
.blocker-list{margin-top:9px;padding-top:7px}
.blocker-row{padding:7px 0}
.fine-match select,.site-edit input{padding:7px 8px}
button{transition:background .15s ease,border-color .15s ease,transform .15s ease}
button:hover{transform:translateY(-1px)}
.rolecard:hover{border-color:#6d5930}
@media(max-width:1100px){
  .rolegrid{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:800px){
  header{min-height:60px;padding:9px 14px}
  .wrap{padding:20px 14px 40px}
  h1{font-size:28px}
  .rolegrid{grid-template-columns:1fr 1fr}
  .rolecard{height:190px}
  .choicegrid,.formgrid,.control-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .rolegrid{grid-template-columns:1fr}
  .rolecard{height:165px}
  .stats{grid-template-columns:1fr 1fr}
}
/* Approved DAC'S South African homepage visual */
.approved-home{
  position:relative;
  width:100%;
  min-height:100vh;
  background:#050505;
  overflow:auto;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.approved-home-art{
  display:block;
  width:100%;
  max-width:1600px;
  height:auto;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}
.approved-hotspots{
  position:absolute;
  inset:0;
  max-width:1600px;
  margin:0 auto;
  left:50%;
  transform:translateX(-50%);
  width:min(100%,1600px);
  pointer-events:none;
}
.approved-hotspot{
  position:absolute;
  top:32.8%;
  height:46.5%;
  border:1px solid transparent!important;
  background:transparent!important;
  border-radius:16px;
  color:transparent!important;
  pointer-events:auto;
  cursor:pointer;
  padding:0!important;
}
.approved-hotspot span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.approved-hotspot:hover,.approved-hotspot:focus-visible{
  border-color:rgba(214,179,106,.9)!important;
  box-shadow:0 0 0 2px rgba(214,179,106,.14),0 18px 42px rgba(0,0,0,.25);
  background:linear-gradient(180deg,rgba(214,179,106,.02),rgba(214,179,106,.07))!important;
  transform:translateY(-2px);
  outline:none;
}
.approved-hotspot-1{left:1.45%;width:18.25%}
.approved-hotspot-2{left:20.85%;width:18.25%}
.approved-hotspot-3{left:40.25%;width:18.25%}
.approved-hotspot-4{left:59.65%;width:18.25%}
.approved-hotspot-5{left:79.05%;width:19.0%}
@media(max-width:700px){
  .approved-home{
    min-height:100vh;
    overflow-x:auto;
    justify-content:flex-start;
  }
  .approved-home-art{
    width:960px;
    max-width:none;
    min-height:540px;
  }
  .approved-hotspots{
    width:960px;
    max-width:none;
    left:0;
    transform:none;
  }
}