/* ========================================
   alnuaimi.io — shared terminal/dashboard system
   ======================================== */
:root{
  --bg:#050805;
  --bg-2:#0a100a;
  --panel:#0c130c;
  --panel-2:#0f1810;
  --line:#1a2a1a;
  --line-2:#243524;
  --line-3:#2f4a2f;
  --green:#5cff8c;
  --green-2:#3ddb6b;
  --green-dim:#3a9d5a;
  --green-deep:#1a4f2a;
  --green-glow:rgba(92,255,140,.5);
  --amber:#ffb454;
  --red:#ff5c5c;
  --cyan:#5cd9ff;
  --magenta:#ff7cd9;
  --text:#c8e6c8;
  --text-dim:#6e8b6e;
  --text-low:#3d5a3d;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);
  color:var(--text);
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  line-height:1.55;
  overflow-x:hidden;
}
body{
  background-image:
    radial-gradient(circle at 15% 10%, rgba(92,255,140,.05) 0%, transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(92,217,255,.03) 0%, transparent 50%),
    linear-gradient(rgba(92,255,140,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,255,140,.018) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px;
  min-height:100vh;
  position:relative;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:100;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0px, rgba(0,0,0,.13) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:multiply;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:101;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}
::selection{background:var(--green);color:var(--bg)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-2);border:1px solid var(--line)}
::-webkit-scrollbar-thumb:hover{background:var(--green-dim)}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--green);text-decoration:underline}

/* ============ TOP BAR ============ */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(10,16,10,.92);
  border-bottom:1px solid var(--line-2);
  padding:8px 18px;
  display:flex;align-items:center;gap:18px;
  font-size:12px;
  backdrop-filter:blur(10px);
}
.dots{display:flex;gap:6px}
.dot{width:11px;height:11px;border-radius:50%;background:var(--line-2);border:1px solid rgba(0,0,0,.3)}
.dot.r{background:#ff5c5c;box-shadow:0 0 6px rgba(255,92,92,.5)}
.dot.y{background:#ffb454;box-shadow:0 0 6px rgba(255,180,84,.5)}
.dot.g{background:#5cff8c;box-shadow:0 0 6px rgba(92,255,140,.5)}
.topbar-title{color:var(--text-dim);letter-spacing:.05em}
.topbar-title b{color:var(--green)}
.topbar-status{margin-left:auto;display:flex;gap:20px;color:var(--text-dim);align-items:center}
.topbar-status span b{color:var(--green)}
.live-dot{display:inline-block;width:8px;height:8px;background:var(--green);border-radius:50%;margin-right:6px;box-shadow:0 0 10px var(--green);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (max-width:760px){
  .topbar-status{gap:10px;font-size:11px}
  .topbar-status .hide-sm{display:none}
}

/* ============ NAV ============ */
.nav{
  border-bottom:1px solid var(--line-2);
  padding:0;
  display:flex;
  background:var(--bg-2);
  overflow-x:auto;
}
.nav a{
  padding:11px 20px;
  color:var(--text-dim);
  border-right:1px solid var(--line);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:all .15s;
  white-space:nowrap;
  text-decoration:none;
}
.nav a:first-child{border-left:1px solid var(--line)}
.nav a:hover{background:var(--line);color:var(--green);text-decoration:none}
.nav a.active{color:var(--green);background:var(--bg);border-bottom:2px solid var(--green);margin-bottom:-1px;text-shadow:0 0 8px var(--green-glow)}
.nav-spacer{flex:1;border-bottom:1px solid var(--line)}
.nav-meta{padding:11px 18px;color:var(--text-low);font-size:11px;border-left:1px solid var(--line);white-space:nowrap}
@media (max-width:760px){
  .nav-meta{display:none}
}

/* ============ LAYOUT ============ */
.container{max-width:1440px;margin:0 auto;padding:24px 18px 80px}
.page-head{
  display:flex;align-items:center;gap:14px;
  margin-bottom:20px;padding-bottom:14px;
  border-bottom:1px dashed var(--line-2);
}
.page-head .crumb{color:var(--text-low);font-size:12px;letter-spacing:.08em}
.page-head .crumb b{color:var(--green)}
.page-head h1{font-size:13px;color:var(--text-dim);font-weight:400;letter-spacing:.1em;text-transform:uppercase;margin-left:auto}
.page-head h1::before{content:"// ";color:var(--green-dim)}

/* ============ PANEL ============ */
.panel{
  border:1px solid var(--line-2);
  background:var(--panel);
  position:relative;
  overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
}
.panel:hover{border-color:var(--green-dim);box-shadow:0 0 24px rgba(92,255,140,.05)}
.panel-head{
  border-bottom:1px solid var(--line);
  padding:8px 14px;
  font-size:11px;
  color:var(--text-dim);
  letter-spacing:.12em;
  text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(90deg, rgba(92,255,140,.06), transparent);
}
.panel-head .tag{color:var(--green);text-shadow:0 0 6px var(--green-glow)}
.panel-head .id{color:var(--text-low);font-size:10px;font-family:'VT323',monospace;letter-spacing:.05em}
.panel-body{padding:18px}

/* ============ GRID ============ */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-bottom:16px}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-8{grid-column:span 8}
.col-9{grid-column:span 9}
.col-12{grid-column:span 12}
@media (max-width:1100px){
  .col-3,.col-4,.col-5{grid-column:span 6}
  .col-7,.col-8,.col-9{grid-column:span 12}
}
@media (max-width:760px){
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{grid-column:span 12}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-block;
  border:1px solid var(--green-dim);
  color:var(--green);
  background:transparent;
  padding:10px 18px;
  font-family:inherit;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .15s;
  text-decoration:none;
}
.btn:hover{background:var(--green);color:var(--bg);box-shadow:0 0 24px var(--green-glow);text-decoration:none}
.btn::before{content:"> ";color:inherit}
.btn.ghost{border-color:var(--line-2);color:var(--text-dim)}
.btn.ghost:hover{background:var(--line);color:var(--text);box-shadow:none}

/* ============ HELPERS ============ */
.glow-green{color:var(--green);text-shadow:0 0 10px var(--green-glow)}
.text-dim{color:var(--text-dim)}
.text-low{color:var(--text-low)}
.text-amber{color:var(--amber)}
.text-red{color:var(--red)}
.text-cyan{color:var(--cyan)}
.mono-vt{font-family:'VT323',monospace}
.divider{height:1px;background:var(--line);margin:14px 0;border:0}
.dashed{border-top:1px dashed var(--line-2);margin:12px 0}

.kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--text-dim)}
.kv .v{color:var(--text)}
.kv .v.ok{color:var(--green)}
.kv .v.warn{color:var(--amber)}

.chip{
  display:inline-block;padding:4px 10px;
  border:1px solid var(--line-2);color:var(--text-dim);
  font-size:11px;letter-spacing:.04em;
  transition:all .15s;
  margin:3px;
}
.chip:hover{border-color:var(--green);color:var(--green);background:rgba(92,255,140,.05)}

/* ============ FOOTER ============ */
footer{
  border-top:1px solid var(--line-2);
  padding:18px;
  color:var(--text-low);
  font-size:11px;
  text-align:center;
  letter-spacing:.05em;
  background:var(--bg-2);
}
footer .glow{color:var(--green);text-shadow:0 0 8px var(--green-glow)}

/* ============ LOGO MARK (used in nav + intro) ============ */
.logo-mark{
  position:relative;
  display:inline-block;
}
.logo-mark img{
  display:block;
  filter:drop-shadow(0 0 8px var(--green-glow)) hue-rotate(-2deg);
}
.logo-mark::before{
  content:"";position:absolute;inset:-4px;
  border:1px solid transparent;
  border-radius:50%;
  background:conic-gradient(from 0deg, var(--green), transparent 30%, var(--green) 60%, transparent 90%, var(--green));
  -webkit-mask: radial-gradient(transparent calc(50% - 1px), #000 calc(50% - 1px));
  mask: radial-gradient(transparent calc(50% - 1px), #000 calc(50% - 1px));
  animation:spin 6s linear infinite;
  opacity:.6;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* nav logo (small) */
.nav-logo{
  display:flex;align-items:center;gap:10px;
  padding:6px 14px 6px 12px;
  border-right:1px solid var(--line);
  text-decoration:none;
}
.nav-logo .logo-img{
  width:28px;height:28px;border-radius:50%;
  background:#000;
  background-image:url('assets/hamad-logo.png');
  background-size:cover;background-position:center;
  border:1px solid var(--green-dim);
  box-shadow:0 0 8px rgba(92,255,140,.4),inset 0 0 6px rgba(0,0,0,.5);
  position:relative;
}
.nav-logo .logo-img::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1px dashed var(--green-dim);opacity:.6;
  animation:spin 8s linear infinite;
}
.nav-logo .logo-text{
  font-family:'VT323',monospace;font-size:18px;color:var(--green);
  text-shadow:0 0 6px var(--green-glow);letter-spacing:.05em;
}
.nav-logo:hover{text-decoration:none}
.nav-logo:hover .logo-img{box-shadow:0 0 16px rgba(92,255,140,.7)}

/* ============ MATRIX RAIN BG (used on hero only) ============ */
.matrix-bg{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  z-index:0;opacity:.18;
}
.matrix-col{
  position:absolute;top:-100%;
  font-family:'VT323',monospace;
  font-size:18px;line-height:1;
  color:var(--green);
  white-space:pre;
  text-align:center;
  animation:rain linear infinite;
}
@keyframes rain{
  to{transform:translateY(220vh)}
}

/* ============ ASCII CHART ============ */
.chart{
  font-family:'VT323',monospace;
  font-size:14px;line-height:1;
  color:var(--green);
  white-space:pre;
  overflow-x:auto;
  text-shadow:0 0 4px var(--green-glow);
}

/* ============ BADGES ============ */
.badge{
  display:inline-block;padding:2px 8px;
  border:1px solid currentColor;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
}
.badge.ok{color:var(--green)}
.badge.warn{color:var(--amber)}
.badge.info{color:var(--cyan)}

/* ============ LOG ENTRIES ============ */
.log{font-size:12px;line-height:1.7;max-height:340px;overflow-y:auto;padding-right:6px}
.log-entry{display:grid;grid-template-columns:90px 80px 1fr;gap:10px;padding:4px 0;border-bottom:1px dotted var(--line)}
.log-entry:last-child{border-bottom:0}
.log-time{color:var(--text-low)}
.log-tag{font-size:10px;padding:1px 6px;text-align:center;align-self:center;justify-self:start;letter-spacing:.05em}
.log-tag.commit{color:var(--green);border:1px solid var(--green-dim)}
.log-tag.deploy{color:var(--cyan);border:1px solid var(--cyan)}
.log-tag.note{color:var(--magenta);border:1px solid var(--magenta)}
.log-tag.build{color:var(--amber);border:1px solid var(--amber)}
.log-tag.news{color:var(--cyan);border:1px solid var(--cyan)}
.log-msg{color:var(--text)}

/* ============ TICKER ROW ============ */
.ticker-row{
  display:flex;gap:24px;padding:8px 16px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-2);
  overflow:hidden;
  font-size:12px;
  white-space:nowrap;
  position:relative;
}
.ticker-track{display:flex;gap:36px;animation:scroll 60s linear infinite}
.ticker-track:hover{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{display:inline-flex;gap:8px;align-items:center}
.tk .sym{color:var(--text);font-weight:500}
.tk .px{color:var(--text-dim)}
.tk .ch.up{color:var(--green)}
.tk .ch.dn{color:var(--red)}