@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&display=swap');

:root{
  --bg:#050505;
  --card:#111111;
  --card2:#151515;
  --stroke:#222;
  --stroke2:#2c2c2c;
  --text:#f3f3f3;
  --muted:#9a9a9a;
  --soft:#cfcfcf;
  --radius:22px;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,body{
  min-height:100%;
}

body{
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.05), transparent 30%),
    radial-gradient(circle at bottom right, rgba(255,255,255,.03), transparent 30%),
    var(--bg);
  color:var(--text);
  font-family:'Orbitron',sans-serif;
  overflow-x:hidden;
}

main.app{
  width:min(1180px, calc(100% - 24px));
  margin:0 auto;
  padding:18px 0 36px;
}

.topbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  margin-bottom:22px;
}

.menu-btn{
  width:44px;
  height:44px;
  border:none;
  border-radius:12px;
  background:#101010;
  color:#fff;
  font-size:22px;
  cursor:pointer;
  border:1px solid #1d1d1d;
}

.topbar h1{
  font-size:clamp(16px, 2vw, 22px);
  letter-spacing:2px;
  text-align:center;
}

.avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--stroke2);
  background:#111;
}

.hello-box{
  background:linear-gradient(180deg, #121212, #0f0f0f);
  border:1px solid #1f1f1f;
  border-radius:24px;
  padding:clamp(18px, 2vw, 24px);
  margin-bottom:18px;
}

.mini-text{
  color:#8d8d8d;
  font-size:12px;
  letter-spacing:2px;
}

.hello-box h2{
  margin-top:8px;
  font-size:clamp(24px, 3vw, 38px);
  letter-spacing:1px;
}

.sub-text{
  margin-top:6px;
  color:#6f6f6f;
  font-size:12px;
}

.info-box{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:12px;
  margin-bottom:22px;
}

.info-card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:20px;
  padding:16px 14px;
  text-align:center;
  min-height:86px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.info-card span{
  color:#7d7d7d;
  font-size:11px;
  letter-spacing:1.6px;
}

.info-card h3{
  margin-top:10px;
  font-size:clamp(16px, 2vw, 20px);
}

.tools-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:14px;
}

.tool-card{
  min-height:clamp(128px, 18vw, 180px);
  background:linear-gradient(180deg, #121212, #0d0d0d);
  border:1px solid #1f1f1f;
  border-radius:24px;
  padding:18px 14px;
  text-align:center;
  text-decoration:none;
  color:white;
  transition:.2s ease;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:12px;
}

.tool-card:hover{
  transform:translateY(-2px);
  border-color:#343434;
}

.tool-card:active{
  transform:scale(.97);
}

.tool-card i{
  width:32px;
  height:32px;
  color:var(--soft);
}

.tool-card span{
  font-size:12px;
  letter-spacing:1.2px;
}

@media (max-width: 640px){
  main.app{
    width:min(100% - 16px, 1180px);
    padding-top:14px;
  }

  .topbar{
    grid-template-columns:auto 1fr auto;
  }

  .info-box{
    grid-template-columns:1fr;
  }

  .tools-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}