/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

:root{
  --bg:#000;
  --muted: rgba(230,238,248,0.6);
  --accent: #6b5bff;
  --card-bg: rgba(255,255,255,0.02);
}

/* reset & base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* allow scrolling on small screens */
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  line-height:1.35;
  -webkit-font-variant-ligatures: none;
}

/* canvas behind everything */
canvas#starfield{
  position:fixed; inset:0; width:100%; height:100%; z-index:-2; display:block;
  pointer-events:none;
}

/* app wrapper */
.app{
  position:relative;
  width:clamp(320px, 92vw, 1140px);
  margin:28px auto;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* header */
.header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  width:100%;
}

/* left block (avatar + heading) */
.left{
  display:flex;
  gap:14px;
  align-items:center;
  min-width:0;
}

/* responsive avatar */
.avatar{
  width:clamp(80px, 22vw, 222px);
  height:clamp(80px, 22vw, 222px);
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,0.06);
  box-shadow:0 8px 30px rgba(0,0,0,0.6);
  transition: transform .35s ease;
  flex-shrink:0;
}
.avatar:hover{ transform: translateY(-6px) scale(1.02); }

.heading{
  min-width:0;
}
.heading h1{
  font-size:clamp(16px, 2vw, 24px);
  margin-bottom:6px;
  word-break:break-word;
}
.phrase{
  color:var(--muted);
  font-size:clamp(12px, 1.6vw, 14px);
  max-width:48ch;
  overflow-wrap:break-word;
}

/* socials */
.socials {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 6px;
}

/* social buttons */
.socials button {
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: linear-gradient(90deg, var(--accent), #00c2ff);
  color: white;
  font-weight: 600;
  font-size: 14px;
  transition: transform 0.18s, box-shadow 0.18s;
  white-space:nowrap;
}

.socials button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* grid - responsive using CSS grid auto-fit */
.grid{
  display: grid;
  gap:20px;
  /* fluid columns: 1 to 3 columns depending on space */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items:start;
  width:100%;
  justify-items:center;
}

/* card */
.card{
  width:100%;
  max-width:420px;
  padding:18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 12px 40px rgba(6,8,20,0.6);
  display:flex;
  flex-direction:column;
  gap:12px;
  transition: transform .25s ease, box-shadow .25s ease, background .2s linear;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
.card:hover { transform: translateY(-8px); }

/* progress circle: scale with container */
.circle-wrap{ display:flex; justify-content:center; }
.progress-circle{
  width:clamp(110px, 26vw, 150px);
  height:clamp(110px, 26vw, 150px);
  border-radius:50%;
  display:grid; place-items:center; position:relative;
  background: conic-gradient(#ff6b6b 0deg, rgba(255,255,255,0.04) 0deg);
  transition: background 220ms linear;
  box-shadow: inset 0 -6px 20px rgba(0,0,0,0.6), 0 20px 40px rgba(0,0,0,0.6);
}
.progress-circle .inner-circle{
  width:clamp(60px, 12vw, 82px);
  height:clamp(60px, 12vw, 82px);
  border-radius:50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.28));
  box-shadow: inset 0 1px 8px rgba(255,255,255,0.02);
  display:flex; align-items:center; justify-content:center; color:#dbeafe; font-weight:700; font-size:clamp(14px,2vw,22px);
}

/* meta */
.meta{ display:flex; justify-content:space-between; align-items:center; color:#dbeafe; font-weight:600; padding:4px 2px; }
.meta .title{ font-size:clamp(14px, 1.6vw, 18px); }
.meta .percent{ font-size:clamp(14px, 1.6vw, 18px); }

/* controls */
.controls{ display:flex; flex-direction:column; gap:10px; padding-top:6px; }
.controls label{
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  font-size:13px; color:var(--muted);
  width:100%;
}
.controls input[type="number"]{
  width:120px; max-width:40%;
  padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.04);
  background:transparent; color:#e6eef8; outline:none;
  text-align:right;
}
.controls input[type="color"]{
  width:44px; height:44px; border-radius:50%; padding:0; border:none; cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,0.6);
}

/* make controls more compact on larger screens (two-column rows) */
@media (min-width:980px){
  .controls{
    gap:8px;
  }
  /* on wide screens allow the labels' left text to shrink */
  .controls label{ font-size:13px; }
}

/* footer */
.footer{ color:rgba(255,255,255,0.45); font-size:16px; text-align:center; padding:56px 0; }

/* Small screens: stack and resize */
@media (max-width:980px){
  .header{ flex-direction:column; align-items:center; gap:12px; text-align:center; }
  .socials{ width:100%; justify-content:center; }
  .grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .controls input[type="number"]{ width:110px; max-width:45%; }
}

/* Extra small screens */
@media (max-width:560px){
  .app{ padding:12px; margin:16px auto; }
  .left{ flex-direction:column; gap:10px; align-items:center; text-align:center; }
  .heading h1{ font-size:18px; }
  .phrase{ max-width:80vw; font-size:12px; }
  .socials button{ padding:10px 12px; font-size:13px; width:100%; box-sizing:border-box; }
  .socials{ gap:8px; }
  .grid{ gap:14px; }
  .card{ padding:14px; max-width:100%; width:100%; }
  .controls{ gap:8px; }
  .controls label{ flex-direction:row; justify-content:space-between; align-items:center; }
  .controls input[type="number"]{ width:44%; max-width:48%; text-align:right; }
  .controls input[type="color"]{ width:40px; height:40px; }
  .meta{ gap:8px; }
}

/* Very small phones: tighten more */
@media (max-width:380px){
  .heading h1{ font-size:16px; }
  .phrase{ font-size:11px; }
  .progress-circle{ width:110px; height:110px; }
  .progress-circle .inner-circle{ width:56px; height:56px; font-size:13px; }
  .controls input[type="number"]{ width:48%; }
  .socials button{ font-size:13px; padding:8px 10px; }
}

/* utility: visually hide if needed */
.sr-only{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ensure inputs don't overflow in odd cases */
input,button,select,textarea{ font-family:inherit; }

/* END */