/* ============================================================
   SHARD — thiết kế theo chủ đề "tinh thể" (crystal / geode)
   ============================================================ */

@font-face {
  font-family: 'Unbounded';
  src: local('Unbounded');
}

:root{
  --bg: #0a0d14;
  --bg-panel: #12161f;
  --bg-panel-2: #171c28;
  --line: #232a3a;

  --violet: #8b7cf6;
  --violet-dim: #5b4fc4;
  --cyan: #4de3d1;
  --cyan-dim: #2fa89b;

  --text: #eef0f8;
  --text-dim: #8a90a8;
  --text-faint: #565d74;

  --danger: #f2678a;
  --danger-bg: #2a1420;

  --success: #4de3a1;
  --success-bg: #0f2a20;

  --radius: 18px;
  --radius-sm: 10px;
}

*{ box-sizing: border-box; }

html{
  -webkit-tap-highlight-color: transparent;
}

body{
  margin:0;
  min-height:100svh;
  background:
    radial-gradient(60% 50% at 50% -10%, rgba(139,124,246,.16), transparent 60%),
    radial-gradient(50% 40% at 85% 110%, rgba(77,227,209,.10), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 28px 18px 48px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.wrap{
  width:100%;
  max-width: 440px;
}

/* ---------- Header / brand ---------- */

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  margin-bottom: 30px;
  color: var(--text-dim);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.brand svg{ width:16px; height:16px; }

h1{
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  text-align:center;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.sub{
  text-align:center;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height:1.55;
  margin: 0 0 30px;
}
.sub b{ color: var(--text); font-weight:600; }

/* ---------- The Gem (signature element) ---------- */

.gem-stage{
  position:relative;
  width: 168px;
  height: 168px;
  margin: 0 auto 22px;
  overflow: hidden;
}
.gem-shape{
  --clip: polygon(50% 0%, 88% 20%, 100% 58%, 74% 100%, 26% 100%, 0% 58%, 12% 20%);
  position:absolute;
  inset:0;
  clip-path: var(--clip);
}
.gem-outline{
  background: linear-gradient(160deg, rgba(139,124,246,.16), rgba(77,227,209,.10));
  border: 1px solid var(--line);
}
.gem-fill{
  background: linear-gradient(180deg, var(--cyan) 0%, var(--violet) 100%);
  transform: translateY(var(--fill-offset, 100%));
  transition: transform 900ms cubic-bezier(.16,1,.3,1);
  filter: drop-shadow(0 0 22px rgba(139,124,246,.55));
}
.gem-glint{
  position:absolute; inset:0;
  clip-path: var(--clip);
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 48%, transparent 56%);
  background-size: 260% 260%;
  background-position: 120% 0%;
  mix-blend-mode: overlay;
  animation: glint 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glint{
  0%, 60%, 100% { background-position: 130% -10%; }
  75% { background-position: -10% 100%; }
}
.gem-count{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  pointer-events:none;
}
.gem-count .n{
  font-family:'Unbounded', sans-serif;
  font-size: 30px;
  font-weight:600;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.gem-count .d{
  font-size: 11px;
  color: rgba(238,240,248,.75);
  letter-spacing:.08em;
  margin-top: 2px;
}

/* ---------- Panel / form ---------- */

.panel{
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

label{
  display:block;
  font-size: 12.5px;
  color: var(--text-dim);
  letter-spacing:.04em;
  margin-bottom: 8px;
}

input[type="text"]{
  width:100%;
  background: #0d1119;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  border-radius: var(--radius-sm);
  padding: 14px 15px;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="text"]::placeholder{ color: var(--text-faint); }
input[type="text"]:focus{
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(139,124,246,.18);
}
input[type="text"]:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.btn{
  appearance:none;
  border:none;
  width:100%;
  cursor:pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--radius-sm);
  padding: 15px 18px;
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition: transform .12s ease, filter .15s ease, opacity .15s ease;
}
.btn:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 2px; }
.btn:active{ transform: scale(.98); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

.btn-primary{
  color:#0a0d14;
  background: linear-gradient(120deg, var(--cyan), var(--violet));
}
.btn-primary:hover:not(:disabled){ filter: brightness(1.08); }

.btn-ghost{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}
.btn-ghost:hover{ border-color: var(--violet-dim); }

/* ---------- Result / status blocks ---------- */

.status{
  margin-top: 16px;
  border-radius: var(--radius-sm);
  padding: 14px 15px;
  font-size: 14px;
  line-height: 1.5;
  display:none;
}
.status.show{ display:block; }
.status.error{ background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(242,103,138,.25); }
.status.info{ background: rgba(139,124,246,.08); color: var(--text); border: 1px solid var(--line); }
.status.success{ background: var(--success-bg); color: var(--success); border: 1px solid rgba(77,227,161,.25); }

.link-row{
  display:flex; gap:8px; margin-top:10px;
}
.link-row input{
  font-size: 13px;
  color: var(--text-dim);
  padding: 10px 12px;
}
.copy-btn{
  flex-shrink:0;
  background: var(--bg-panel-2);
  border:1px solid var(--line);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  font-size: 13px;
  cursor:pointer;
}
.copy-btn:hover{ border-color: var(--violet-dim); }

.hint{
  font-size:12.5px;
  color: var(--text-faint);
  text-align:center;
  margin-top: 18px;
  line-height:1.6;
}

.spinner{
  width:16px; height:16px;
  border-radius:50%;
  border: 2px solid rgba(10,13,20,.25);
  border-top-color:#0a0d14;
  animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* claim page center card */
.claim-icon{
  width:64px; height:64px;
  margin: 0 auto 18px;
  display:flex; align-items:center; justify-content:center;
}