@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg: #0a0a0c;
  --bg-raised: #121215;
  --line: #232327;
  --red: #d1202f;
  --red-dim: #5c0f16;
  --blue: #3f7fd1;
  --white: #f3f2f0;
  --grey: #8b8b90;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg); color:var(--white);
  font-family:'Space Grotesk', sans-serif; line-height:1.5;
  min-height:100vh; display:flex; flex-direction:column;
}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit; text-decoration:none;}
main{flex:1; width:100%; max-width:1100px; margin:0 auto; padding:40px 6% 80px;}

/* Header / nav */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 6%; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(10,10,12,0.9); backdrop-filter:blur(6px); z-index:10;
}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.2rem;}
.logo-mark{
  width:30px; height:30px; border:2px solid var(--red);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono'; font-size:0.75rem; color:var(--red);
  transform:rotate(45deg);
}
.logo-mark span{transform:rotate(-45deg);}
nav{display:flex; align-items:center; gap:24px; font-size:0.9rem;}
nav a{color:var(--grey);}
nav a:hover, nav a.active{color:var(--white);}
.credit-pill{
  font-family:'IBM Plex Mono'; font-size:0.78rem; border:1px solid var(--line);
  padding:6px 12px; color:var(--grey);
}
.credit-pill b{color:var(--red);}

/* Buttons */
.btn{
  display:inline-block; padding:12px 22px; font-weight:600; font-size:0.9rem;
  border:1px solid var(--red); cursor:pointer; font-family:inherit;
}
.btn-primary{background:var(--red); color:var(--white);}
.btn-primary:hover{background:transparent; color:var(--red);}
.btn-ghost{background:transparent; color:var(--white); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--white);}
.btn-sm{padding:8px 14px; font-size:0.8rem;}

/* Forms */
label{display:block; font-size:0.82rem; color:var(--grey); margin-bottom:6px; font-family:'IBM Plex Mono';}
input, textarea, select{
  width:100%; background:var(--bg-raised); border:1px solid var(--line); color:var(--white);
  padding:12px 14px; font-family:inherit; font-size:0.95rem; margin-bottom:18px;
}
textarea{resize:vertical; min-height:100px;}
input:focus, textarea:focus, select:focus{outline:1px solid var(--red);}
.form-card{
  border:1px solid var(--line); background:var(--bg-raised); padding:36px;
  max-width:440px; margin:40px auto;
}
.form-card h1{font-size:1.5rem; margin-bottom:24px;}
.form-foot{margin-top:10px; font-size:0.85rem; color:var(--grey); text-align:center;}

/* Flash messages */
.flash{padding:14px 18px; margin-bottom:20px; border:1px solid var(--line); font-size:0.9rem;}
.flash-error{border-color:var(--red); color:#ff8f95;}
.flash-success{border-color:#2f8a4a; color:#7ee79a;}
.flash-info{border-color:var(--blue); color:#9cc4f0;}

/* Page headings */
.page-head{margin-bottom:36px;}
.page-head .eyebrow{font-family:'IBM Plex Mono'; font-size:0.78rem; color:var(--red); display:block; margin-bottom:10px;}
.page-head h1{font-size:1.9rem; font-weight:700;}
.page-head p{color:var(--grey); margin-top:10px; max-width:60ch;}

/* Dashboard stat strip */
.stat-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:40px;}
.stat-strip div{background:var(--bg); padding:20px 22px;}
.stat-strip b{display:block; font-size:1.4rem; color:var(--red);}
.stat-strip span{font-size:0.8rem; color:var(--grey); font-family:'IBM Plex Mono';}

/* Category grid on dashboard */
.dash-cat-grid{
  display:flex; flex-wrap:nowrap; overflow-x:auto; gap:1px;
  background:var(--line); border:1px solid var(--line); margin-bottom:50px;
  justify-content:safe center; scroll-snap-type:x proximate;
  -ms-overflow-style:none; scrollbar-width:thin;
}
.dash-cat-grid::-webkit-scrollbar{height:5px;}
.dash-cat-grid::-webkit-scrollbar-thumb{background:var(--line);}
.dash-cat-card{background:var(--bg); padding:20px; transition:background 0.2s; flex:0 0 240px; scroll-snap-align:start;}
.dash-cat-card:hover{background:var(--bg-raised);}
.dash-cat-card .team-tag{font-family:'IBM Plex Mono'; font-size:0.7rem;}
.dash-cat-card .team-tag.red{color:var(--red);}
.dash-cat-card .team-tag.blue{color:var(--blue);}
.dash-cat-card h3{font-size:1rem; margin-top:8px;}
.dash-cat-card .count{color:var(--grey); font-size:0.8rem; margin-top:4px;}

/* Tool list inside category page */
.tool-list{border:1px solid var(--line); background:var(--line); display:flex; flex-direction:column; gap:1px; margin-bottom:30px;}
.tool-row{background:var(--bg); padding:18px 22px; display:flex; justify-content:space-between; align-items:center;}
.tool-row:hover{background:var(--bg-raised);}
.tool-row h4{font-size:1rem;}
.tool-row p{color:var(--grey); font-size:0.85rem; margin-top:4px;}
.custom-badge{font-family:'IBM Plex Mono'; font-size:0.68rem; color:var(--blue); border:1px solid var(--blue); padding:3px 8px; margin-left:10px;}

pre.code-block{
  background:var(--bg-raised); border:1px solid var(--line); padding:16px 18px;
  font-family:'IBM Plex Mono'; font-size:0.82rem; color:var(--white);
  overflow-x:auto; white-space:pre-wrap; margin-bottom:20px;
}

/* AI query box */
.query-box{border:1px solid var(--line); background:var(--bg-raised); padding:26px; margin-bottom:50px;}
.query-box textarea{min-height:90px;}

/* Query result tabs */
.view-tabs{display:flex; gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:24px;}
.view-tabs button{
  flex:1; background:var(--bg); color:var(--grey); border:none; padding:12px; cursor:pointer;
  font-family:'IBM Plex Mono'; font-size:0.82rem;
}
.view-tabs button.active{background:var(--bg-raised); color:var(--white);}
.view-panel{display:none;}
.view-panel.active{display:block;}
#mindmap-frame{border:1px solid var(--line); background:var(--bg-raised); padding:20px; min-height:400px;}
#mindmap-frame.fullscreen{position:fixed; inset:0; z-index:50; min-height:100vh; padding:40px;}
.mindmap-toolbar{display:flex; justify-content:flex-end; margin-bottom:14px;}
#suggest-panel{border-top:1px solid var(--line); margin-top:20px; padding-top:16px; font-size:0.88rem;}
#suggest-panel a{color:var(--red);}
.markdown-body{border:1px solid var(--line); background:var(--bg-raised); padding:26px;}
.markdown-body h1, .markdown-body h2, .markdown-body h3{color:var(--red); margin:18px 0 8px;}
.markdown-body code{background:var(--bg); padding:2px 6px; font-family:'IBM Plex Mono';}
.markdown-body pre{background:var(--bg); padding:14px; overflow-x:auto;}
.markdown-body ul{padding-left:22px; margin:8px 0;}

/* Pricing */
.plans{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.plan{background:var(--bg); padding:30px; display:flex; flex-direction:column;}
.plan h3{font-size:1.2rem; margin-bottom:10px;}
.plan .price{font-size:1.8rem; font-weight:700; color:var(--red); margin-bottom:14px;}
.plan ul{list-style:none; margin-bottom:20px; flex:1;}
.plan li{font-size:0.85rem; color:var(--grey); padding:6px 0; border-top:1px solid var(--line);}
.plan li:first-child{border-top:none;}

.hidden{display:none;}
/* God's Gate */
.gg-agent-list{border:1px solid var(--line); background:var(--line); display:flex; flex-direction:column; gap:1px; margin-bottom:16px;}
.gg-agent-row{
  background:var(--bg); padding:16px 20px; display:grid;
  grid-template-columns:14px 1fr auto auto auto; gap:18px; align-items:center;
}
.gg-agent-row:hover{background:var(--bg-raised);}
.gg-dot{width:10px; height:10px; border-radius:50%; background:var(--grey);}
.gg-dot.ok{background:#2fa84f;}
.gg-dot.warn{background:#c98a1c;}
.gg-dot.off{background:var(--grey);}
.gg-main .name{font-weight:600;}
.gg-main .sub{color:var(--grey); font-size:0.8rem; margin-top:2px;}
.gg-metric{text-align:right; font-family:'IBM Plex Mono';}
.gg-metric b{display:block; font-size:0.95rem;}
.gg-metric span{color:var(--grey); font-size:0.7rem;}
.gg-status{font-family:'IBM Plex Mono'; font-size:0.72rem; padding:4px 10px; border:1px solid var(--line); white-space:nowrap;}
.gg-status-ok{color:#2fa84f; border-color:#2fa84f;}
.gg-status-warn{color:#c98a1c; border-color:#c98a1c;}
.gg-status-off{color:var(--grey);}
.gg-agent-actions{display:flex; gap:8px; justify-content:flex-end; padding:0 20px 14px; background:var(--bg);}
.gg-create-panel{border:1px solid var(--line); background:var(--bg-raised); padding:26px; margin-top:10px;}
.gg-create-panel h3{margin-bottom:8px;}
.gg-create-panel p{color:var(--grey); font-size:0.9rem;}
@media (max-width:700px){
  .gg-agent-row{grid-template-columns:14px 1fr; grid-template-areas:"dot main" "metrics metrics"; row-gap:8px;}
  .gg-metric{display:inline-block; margin-right:14px; text-align:left;}
}

.chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  font-family:'IBM Plex Mono'; font-size:0.75rem; color:var(--grey);
  border:1px solid var(--line); padding:6px 12px; white-space:nowrap;
}
.chip:hover{border-color:var(--red); color:var(--white);}
.warning-box{
  border:1px solid var(--red); background:rgba(209,32,47,0.08);
  padding:16px 20px; font-size:0.88rem; color:#ff9da3; margin-bottom:26px;
}
.warning-box b{color:var(--red);}
.dep-ok{color:#7ee79a;}
.dep-bad{color:var(--red);}

footer{border-top:1px solid var(--line); padding:26px 6%; font-size:0.8rem; color:var(--grey); text-align:center;}

@media (max-width:800px){
  .stat-strip, .dash-cat-grid, .plans{grid-template-columns:1fr;}
  .tool-row{flex-direction:column; align-items:flex-start; gap:8px;}
}