.app{ display:flex; flex-direction:column; height:100vh; }

header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #1b110c, #150e0a);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--amber); box-shadow:0 0 8px var(--amber); animation:pulse 2s infinite; }
.brand h1{ font-family:'Oswald',sans-serif; font-weight:700; font-size:19px; letter-spacing:2px; color: var(--sand); }
.brand small{ color:var(--dim); font-size:11px; letter-spacing:1px; display:block; margin-top:2px;}
.clock{ color:var(--amber); font-size:13px; letter-spacing:1px; }

.layout{ flex:1; display:grid; grid-template-columns: 260px 1fr 300px; overflow:hidden; }
.side, .colony{ background:var(--panel-2); border-right:1px solid var(--line); overflow-y:auto; padding:16px; }
.colony{ border-right:none; border-left:1px solid var(--line); }

.section-label{ font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:2px; color:var(--dim); margin: 18px 0 8px; text-transform:uppercase; }
.section-label:first-child{ margin-top:0; }

main{ overflow-y:auto; padding:22px 26px; }
.view-title{ font-family:'Oswald',sans-serif; font-size:22px; letter-spacing:1px; margin-bottom:4px; color:var(--sand); }
.view-sub{ color:var(--dim); font-size:12px; margin-bottom:20px; }

.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:14px; align-items:start; margin-bottom:26px; }

.group-title{
  display:flex; align-items:center; gap:10px; box-sizing:border-box; width:100%;
  font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:2px; text-transform:uppercase;
  color:var(--sand); background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--amber);
  border-radius:3px; padding:9px 14px; margin:26px 0 14px;
}