:root{
  --bg:#0f172a;
  --panel:#0b1220;
  --border:#1f2a44;
  --border-hi:#2f4363;
  --green:#3ddc84;
  --green-dim:#1f7a49;
  --green-mid:#2bbf6d;
  --amber:#fbbf24;
  --cyan:#38bdf8;
  --red:#fb7185;
  --muted:#94a3b8;
  --ghost:#e2e8f0;
  --scanline:rgba(2,6,23,.16);
}

body{
  background:var(--bg);
  color:var(--ghost);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

/* Softer focus/hover glow */
.tui-input{color:var(--ghost)!important}
.tui-input:focus{border-color:var(--green)!important;box-shadow:0 0 10px rgba(61,220,132,.18)!important}
.tui-btn:hover{box-shadow:0 0 20px rgba(61,220,132,.28)!important}
.tui-btn{
  border-color:var(--green)!important;
  color:#f8fffc!important;
  background:#1c6a41!important;
}

a.text-\[var\(--cyan\)\]{
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1.5px;
}

p a.text-\[var\(--cyan\)\]{
  color:#8dd6ff!important;
  text-decoration:underline!important;
  font-weight:500;
}

.nav-link,
footer a,
.tui-btn{
  min-height:40px;
  display:inline-flex;
  align-items:center;
}

footer .grid a.text-\[var\(--muted\)\]{
  display:block!important;
  min-height:24px!important;
  padding-top:4px;
  padding-bottom:4px;
  text-decoration:none;
}

/* Reduce "CRT" contrast a bit more */
body::before{opacity:.55!important}

.blog-content h1,.blog-content h2,.blog-content h3,.blog-content h4{
  color:var(--ghost);
  margin:1rem 0 .65rem;
  line-height:1.25;
  text-align:left;
}
.blog-content h1{font-size:1.45rem}
.blog-content h2{font-size:1.2rem}
.blog-content h3{font-size:1.05rem}
.blog-content p,.blog-content li{
  color:var(--ghost);
  line-height:1.7;
  margin:.65rem 0;
  text-align:left;
}
.blog-content ul,.blog-content ol{
  padding-left:1.25rem;
  margin:.85rem 0;
}
.blog-content blockquote{
  border-left:2px solid var(--border-hi);
  padding-left:.75rem;
  color:var(--muted);
}
.blog-content a{
  color:var(--cyan);
  text-decoration:underline;
}
.blog-content{
  width:100%;
  max-width:100%;
  margin:0;
}
.blog-content *{
  max-width:100%;
}
.blog-content img{
  display:block;
  margin:1rem auto;
  border:1px solid var(--border-hi);
  border-radius:6px;
  height:auto;
}
.blog-grid-img{
  width:100%;
  max-height:190px;
  object-fit:cover;
  border:1px solid var(--border-hi);
  border-radius:6px;
}

.tui-box{
  border-radius:10px;
}

.tui-box-title{
  line-height:1.35;
}

.tui-table{
  width:100%;
}

@media (max-width: 900px){
  .tui-box-body{
    padding:12px;
  }

  .metric-card{
    min-height:auto;
    padding:10px;
  }
}

@media (max-width: 768px){
  html,
  body{
    overflow-x:hidden;
  }

  body{
    font-size:14px;
  }

  main .max-w-6xl{
    padding-left:12px;
    padding-right:12px;
  }

  nav[aria-label="Main navigation"]{
    gap:6px;
    padding-top:2px;
    padding-bottom:2px;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }

  .nav-link{
    font-size:10px !important;
    padding:10px 8px !important;
  }

  .tui-alert{
    font-size:11px;
    line-height:1.45;
    word-break:break-word;
  }

  .tui-box-title{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    font-size:12px;
  }

  .tui-box-title > div{
    width:100%;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
  }

  .tui-box-body p,
  .tui-box-body li{
    font-size:12px !important;
    line-height:1.55;
  }

  .tui-tag{
    font-size:10px !important;
    padding:3px 6px !important;
  }

  .filter-btn,
  .tui-btn{
    min-height:36px;
    padding:8px 12px !important;
    font-size:11px !important;
    border-radius:8px;
  }

  .tui-table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }

  .tui-table th,
  .tui-table td{
    font-size:11px;
    padding:7px 8px;
  }

  .blog-grid-img{
    max-height:160px;
  }

  footer .grid{
    gap:14px;
  }
}

@media (max-width: 480px){
  body{
    font-size:13px;
  }

  main .max-w-6xl{
    padding-left:10px;
    padding-right:10px;
    padding-top:16px;
  }

  .tui-alert{
    font-size:10px;
    padding:10px;
  }

  .tui-box{
    border-radius:12px;
  }

  .tui-box-title{
    font-size:11px;
    padding:9px 10px;
  }

  .tui-box-body{
    padding:10px;
  }

  .tui-box-body p,
  .tui-box-body li{
    font-size:11px !important;
    line-height:1.5;
  }

  .tui-tag{
    font-size:9px !important;
    padding:2px 6px !important;
  }

  .filter-btn{
    min-height:34px;
    padding:7px 10px !important;
    font-size:10px !important;
  }

  .metric-card{
    padding:9px;
    border-radius:10px;
  }

  footer{
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }
}