:root {
    --ink:#111319; --card:#1b1e26; --text:#eef2f7; --muted:#a8b0bd; --green:#92e32d;
    --edge:rgba(255,255,255,.08);
    --font:'Montserrat', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  }
  
  body {
    margin:0;
    background:#0e1116;
    color:var(--text);
    font-family:var(--font);
    line-height:1.5;
  }

  h1 {
    font-size:28px;
    font-weight:700;
    letter-spacing:-0.5px;
  }
  
  .cta-text {
    font-size:20px;
    font-weight:600;
  }
  
  .btn, .btn-cta {
    font-family:var(--font);
    font-weight:600;
    letter-spacing:0.3px;
  }
  
  .wrap{max-width:760px;margin:0 auto;padding:24px;}
  
  /* Header */
/* ==== Hero with avatar ring (borrowed from your Linktree style) ==== */
.bg-glow{
    position:absolute; inset:0;
    pointer-events:none;
    background:
      radial-gradient(800px 240px at 50% 0%, rgba(146,227,45,.12), transparent 60%),
      radial-gradient(300px 140px at 10% 10%, rgba(146,227,45,.08), transparent 60%),
      radial-gradient(300px 140px at 90% 10%, rgba(146,227,45,.08), transparent 60%);
    filter:saturate(120%);
  }
  
  .hero{
    position:relative;
    display:flex; flex-direction:column; align-items:center; gap:14px;
    text-align:center; margin:6px 0 18px;
  }
  .avatar-wrap{
    position:relative; width:108px; height:108px; border-radius:50%;
    padding:3px; background:linear-gradient(135deg, var(--green), #cfff7b);
    box-shadow:0 6px 30px rgba(146,227,45,.25);
  }
  .avatar{
    width:100%; height:100%; border-radius:50%; display:block; object-fit:cover;
    background:#0c0f14; border:2px solid #0c0f14;
  }
  .ring{
    position:absolute; inset:-6px; border:2px solid rgba(146,227,45,.28);
    border-radius:50%; filter:blur(2px); animation:pulse 3.2s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.04);opacity:.9} }
  
  .sitename{
    margin:6px 0 2px; font-weight:900; letter-spacing:.3px; line-height:1.15;
    font-size:clamp(22px, 5.2vw, 28px);
  }
  .subline{
    margin:2px auto 0; max-width:26ch; color:var(--muted); line-height:1.35;
    font-size:clamp(14px, 3.5vw, 16px);
  }
  .subline .hl{
    color:#eaffc6;
    background:linear-gradient(180deg, rgba(146,227,45,.25), rgba(146,227,45,0));
    padding:0 .15em; border-radius:.3em;
  }
  
  
  /* Card */
  .card{background:var(--card);border:1px solid var(--edge);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:24px;}
  h1{font-size:26px;margin:0 0 12px;}
  p.lead{color:var(--muted);margin:0 0 16px;}
  
  /* Form */
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .field{display:flex;flex-direction:column;gap:6px;}
  .label{font-size:18px;font-weight: 700;color:#cfd6e6;margin-bottom: 4px;}
  .radios{display:flex;gap:10px;flex-wrap:wrap}
  .radio{padding:10px 12px;border:1px solid var(--edge);border-radius:12px;background:#141824;cursor:pointer;user-select:none}
  .radio input{display:none}
  .radio.active{outline:2px solid var(--green);background:#121722}
  input[type="number"]{width:100%;border-radius:12px;border:1px solid var(--edge);background:#121722;color:var(--text);padding:12px;font-size:16px}
  .actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
  .btn{appearance:none;border:0;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;transition:all .2s;}
  .btn-primary{background:var(--green);color:#0b0f14;}
  .btn-primary:hover{opacity:.9;}
  .btn-ghost{background:transparent;color:#cfd6e6;border:1px solid var(--edge)}
  .result{margin-top:16px;display:none}
  
  /* Output */
  .badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#121722;border:1px solid var(--edge);font-size:12px;color:#cfd6e6}
  .size-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#101521;border:1px solid var(--edge);font-weight:800}
  .size-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
  .hint{color:var(--muted);font-size:13px;margin-top:8px}

/* ----- Result card styles ----- */
.result-card{
    border:1px solid var(--edge);
    background:#0f1420;
    border-radius:16px;
    padding:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
    display:flex; flex-direction:column; gap:10px;
    animation:pop .25s ease-out;
  }
  .result-head{display:flex;align-items:center;gap:8px;color:#a7f27a;}
  .result-head .tick{width:18px;height:18px;border-radius:50%;background:var(--green);display:inline-flex;align-items:center;justify-content:center;color:#0b0f14;font-weight:900;font-size:12px}
  .result-sub{color:#cfd6e6;font-size:13px}
  
  .size-badge{
    font-size:40px; font-weight:900; letter-spacing:.5px;
    line-height:1; display:inline-flex; align-items:center; gap:10px;
  }
  .size-badge .chip{font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;background:#121722;border:1px solid var(--edge);color:#cfd6e6}
  
  .alt-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
  .alt-chip{padding:6px 10px;border-radius:999px;background:#101521;border:1px solid var(--edge);font-size:12px;color:#cfd6e6}
  .copy-btn{
    align-self:flex-start; margin-top:6px;
    border:1px solid var(--edge); background:#141a26; color:#e7eefc;
    border-radius:10px; padding:8px 12px; font-weight:700; cursor:pointer;
  }
  .copy-btn:hover{background:#172035}
  @keyframes pop{from{transform:scale(.98);opacity:0}to{transform:scale(1);opacity:1}}
  
  
  /* Table */
  .table{margin-top:18px;overflow:auto;border-radius:12px;border:1px solid var(--edge)}
  table{width:100%;border-collapse:collapse;min-width:520px}
  th,td{padding:10px 12px;border-bottom:1px solid var(--edge);text-align:left}
  th{background:#131826;color:#cfd6e6;font-size:13px}
  tr:last-child td{border-bottom:none}
  
  /* Footer text */
  .foot{margin-top:16px;color:#9aa3b5;font-size:12px}
  
  /* CTA Section */
  .cta{margin-top:32px;text-align:center;}
  .cta-text{font-size:18px;font-weight:500;margin-bottom:16px;color:var(--text);}
  .btn-cta{display:inline-block;background:var(--green);color:#0b0f14;font-weight:700;padding:14px 28px;border-radius:14px;text-decoration:none;transition:all .25s;}
  .btn-cta:hover{opacity:.9;transform:translateY(-2px);}
  
/* Compact number input for mobile */
.short-input {
    text-align:center;
  }
  
  /* On mobile, shrink width */
  @media (max-width:640px){
    .short-input {
      max-width: 90px;   /* enough for 3 digits */
      margin-right: auto;
      margin-left: auto;
    }
    .field {
        align-items: center;
      }
    
    .label {
        text-align: center;
      }

    .grid{grid-template-columns:1fr;gap:10px}
    
    h1{font-size:22px}
    .logo{height:44px;}
  }