/* Blue Gem pattern checker — rebuilt from skincash.gg/tools/pattern-checker */

.pc-page { position: relative; width: 100%; overflow-x: hidden }
.pc-page *, .pc-page *::before, .pc-page *::after { box-sizing: border-box }
.pc-bg { position: absolute; left: 0; right: 0; top: 0; z-index: 0; height: 700px; overflow: hidden; pointer-events: none }
.pc-bg::before {
  content: ''; position: absolute; left: 50%; top: -128px; width: 700px; height: 700px;
  transform: translateX(-50%); border-radius: 9999px; opacity: .25; filter: blur(120px);
  background: radial-gradient(circle, hsla(220, 90%, 55%, .45) 0%, transparent 70%);
}
.pc-content { position: relative; z-index: 10; width: 100%; max-width: var(--content-width, 1792px); margin: 0 auto; padding: 48px 64px 96px }

/* ---- hero ---- */
.pc-header { margin-bottom: 40px; text-align: center }
.pc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(96, 165, 250, .3); border-radius: 9999px; padding: 4px 12px;
  background: rgba(96, 165, 250, .1); color: #93c5fd;
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.pc-badge svg { width: 12px; height: 12px }
.pc-title { margin: 16px 0 0; font-size: 60px; font-weight: 800; letter-spacing: -.025em; line-height: 1.05 }
.pc-gradient-text {
  background: linear-gradient(110deg, #fff 0%, #fff 40%, hsla(220, 90%, 65%, 1) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pc-lead { max-width: 672px; margin: 16px auto 0; color: rgba(255, 255, 255, .65); font-size: 15px; line-height: 1.625 }

/* ---- form ---- */
.pc-form { display: flex; max-width: 672px; margin: 0 auto; gap: 8px }
.pc-field { position: relative; flex: 1 }
.pc-field > svg { position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: rgba(255, 255, 255, .4); pointer-events: none }
.pc-input {
  width: 100%; height: 55px;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 16px 16px 16px 44px;
  background: #0e1014; color: #fff; font-family: inherit; font-size: 14px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.pc-input::placeholder { color: rgba(255, 255, 255, .35) }
/* The archived global stylesheet paints every focused text input green, so the blue wins explicitly. */
.pc-input:focus { border-color: rgba(96, 165, 250, .5) !important; box-shadow: 0 0 0 3px rgba(96, 165, 250, .12) !important }
.pc-submit {
  position: relative; display: inline-flex; height: 55px; flex: none;
  align-items: center; justify-content: center; gap: 8px; overflow: hidden;
  border: 0; border-radius: 12px; padding: 16px 28px; background: #60a5fa; color: #000;
  font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 8px 30px -8px rgba(96, 165, 250, .7); cursor: pointer;
  transition: box-shadow .2s, transform .1s;
}
.pc-submit svg { width: 16px; height: 16px }
.pc-submit:hover { box-shadow: 0 12px 40px -8px rgba(96, 165, 250, .9) }
.pc-submit:active { transform: scale(.98) }
.pc-submit:disabled { opacity: .6; cursor: progress }
@keyframes pc-spin { to { transform: rotate(360deg) } }
.pc-submit .pc-spinner { animation: pc-spin 1s linear infinite }

.pc-error-wrap { max-width: 672px; margin: 12px auto 0 }
.pc-error {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(251, 113, 133, .3); border-radius: 6px; padding: 8px 12px;
  background: rgba(244, 63, 94, .1); color: #fda4af; font-size: 12px;
}
.pc-error svg { width: 14px; height: 14px; flex: none }

.pc-example-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 12px auto 0 }
.pc-example {
  border: 1px solid rgba(96, 165, 250, .3); border-radius: 4px; padding: 2px 8px;
  background: rgba(96, 165, 250, .06); color: #93c5fd;
  font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px;
  cursor: pointer; transition: background .15s;
}
.pc-example:hover { background: rgba(96, 165, 250, .12) }
.pc-example:disabled { opacity: .5; cursor: progress }

/* ---- result ---- */
.pc-result { max-width: 768px; margin: 32px auto 0 }
.pc-item {
  display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 16px;
  border: 1px solid rgba(255, 255, 255, .06); border-radius: 12px; padding: 16px; background: #101216;
}
.pc-item-image {
  position: relative; display: flex; aspect-ratio: 1 / 1; overflow: hidden;
  align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px; background: #0a0d0c;
}
.pc-item-image img { width: 85%; height: 85%; object-fit: contain }
.pc-item-label { color: rgba(255, 255, 255, .4); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase }
.pc-item-name { margin: 4px 0 0; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -.025em; line-height: 1.25 }
.pc-item-seed { margin-top: 4px; color: rgba(255, 255, 255, .45); font-size: 12px }
.pc-item-seed span { color: rgba(255, 255, 255, .75); font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace }

.pc-tier { position: relative; overflow: hidden; margin-top: 12px; border: 1px solid; border-radius: 12px; padding: 24px }
.pc-tier-shine {
  position: absolute; inset: 0; opacity: .25; mix-blend-mode: overlay; pointer-events: none;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .6) 0%, transparent 55%);
}
.pc-tier-body { position: relative }
.pc-tier-label { color: rgba(255, 255, 255, .85); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55)) }
.pc-tier-name { margin: 4px 0 0; color: #fff; font-size: 36px; font-weight: 800; line-height: 1.1; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55)) }
.pc-tier-desc { margin: 8px 0 0; color: rgba(255, 255, 255, .85); font-size: 12px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55)) }
.pc-tier-note {
  margin: 6px 0 0; color: rgba(255, 255, 255, .7); font-size: 11px;
  font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55));
}

.pc-warn { margin-top: 12px; border: 1px solid rgba(251, 191, 36, .2); border-radius: 12px; padding: 20px; background: rgba(251, 191, 36, .05) }
.pc-warn-head { display: flex; align-items: center; gap: 8px }
.pc-warn-head svg { width: 16px; height: 16px; flex: none; color: #fcd34d }
.pc-warn-title { color: #fde68a; font-size: 13px; font-weight: 700 }
.pc-warn-text { margin: 6px 0 0; color: rgba(255, 255, 255, .6); font-size: 12px }

.pc-tiers { margin-top: 16px; display: flex; flex-direction: column; gap: 12px }
.pc-tier-box { border: 1px solid rgba(255, 255, 255, .06); border-radius: 12px; padding: 16px; background: #0a0c10 }
.pc-tier-head { margin-bottom: 8px; color: #93c5fd; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase }
.pc-tier-head span { color: rgba(255, 255, 255, .3); font-weight: 400 }
.pc-seeds { display: flex; flex-wrap: wrap; gap: 4px }
.pc-seed {
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 4px; padding: 2px 6px;
  background: rgba(255, 255, 255, .03); color: rgba(255, 255, 255, .65);
  font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 700;
}
.pc-seed.is-match { border-color: rgba(96, 165, 250, .6); background: rgba(96, 165, 250, .2); color: #bfdbfe }

/* ---- sell banner (shared tool CTA) ---- */
.pc-cta {
  position: relative; display: block; overflow: hidden; margin-top: 24px;
  border: 1px solid rgba(61, 255, 158, .3); border-radius: 16px; padding: 24px;
  background: linear-gradient(to bottom right, #0d1411, #0a0d0c, #0a1f15);
  text-decoration: none; transition: transform .2s;
}
.pc-cta:hover { transform: translateY(-2px) }
.pc-cta-glow {
  position: absolute; right: -128px; top: -128px; width: 360px; height: 360px; border-radius: 9999px;
  background: rgba(17, 197, 107, .5); opacity: .3; filter: blur(100px); transition: opacity .5s; pointer-events: none;
}
.pc-cta:hover .pc-cta-glow { opacity: .6 }
.pc-cta-sheen {
  position: absolute; inset: 0; transform: translateX(-100%); pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, .07), transparent);
  transition: transform 1s ease-out;
}
.pc-cta:hover .pc-cta-sheen { transform: translateX(100%) }
.pc-cta-grid {
  position: absolute; inset: 0; opacity: .03; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 24px 24px;
}
.pc-cta-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px }
.pc-cta-copy { display: block; min-width: 0 }
.pc-cta-badge {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid rgba(61, 255, 158, .3); border-radius: 9999px; padding: 2px 8px;
  background: rgba(61, 255, 158, .08); color: #3dff9e;
  font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
}
.pc-cta-badge svg { width: 10px; height: 10px }
.pc-cta-title { display: block; margin: 8px 0 0; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.025em; line-height: 1.25 }
.pc-cta-title span { display: block; margin-top: 2px; color: rgba(255, 255, 255, .45); font-size: 13px; font-weight: 700 }
.pc-cta-note { display: block; margin: 4px 0 0; color: rgba(255, 255, 255, .55); font-size: 12.5px }
.pc-cta-button {
  position: relative; overflow: hidden; display: inline-flex; flex: none;
  align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px; padding: 12px 20px; background: #3dff9e; color: #000;
  font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 8px 30px -8px rgba(34, 197, 94, .6); transition: box-shadow .2s;
}
.pc-cta:hover .pc-cta-button { box-shadow: 0 14px 42px -8px rgba(34, 197, 94, .9) }
.pc-cta-button i {
  position: absolute; inset: 0; transform: translateX(-100%); pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, .3), transparent);
  transition: transform .7s;
}
.pc-cta:hover .pc-cta-button i { transform: translateX(100%) }
.pc-cta-button svg { position: relative; width: 16px; height: 16px; transition: transform .2s }
.pc-cta:hover .pc-cta-button svg { transform: translateX(2px) }

/* ---- footer promo ---- */
.pc-more {
  margin-top: 56px; border: 1px solid rgba(96, 165, 250, .2); border-radius: 16px; padding: 40px;
  background: linear-gradient(to bottom right, #0c1424, #0a0d12, #0a0d12);
}
.pc-more h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.025em }
.pc-more p { max-width: 576px; margin: 8px 0 0; color: rgba(255, 255, 255, .6); font-size: 14px }
.pc-more-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px }
.pc-more-link {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(251, 191, 36, .3); border-radius: 8px; padding: 8px 12px;
  background: rgba(251, 191, 36, .08); color: #fcd34d; font-size: 12px; font-weight: 700;
  text-decoration: none; transition: background .15s;
}
.pc-more-link:hover { background: rgba(251, 191, 36, .15) }
.pc-more-link svg { width: 14px; height: 14px }

@media (max-width: 1100px) {
  .pc-content { padding: 40px 24px 72px }
  .pc-title { font-size: 44px }
}
@media (max-width: 767px) {
  .pc-content { padding: 28px 12px 64px }
  .pc-title { font-size: 32px }
  .pc-tier-name { font-size: 30px }
  .pc-form { flex-direction: column }
  .pc-submit { width: 100% }
  .pc-item { grid-template-columns: 1fr }
  .pc-item-name { font-size: 16px }
  .pc-more { padding: 32px }
  .pc-cta-row { flex-direction: column; align-items: stretch; text-align: center }
}
@media (prefers-reduced-motion: reduce) { .pc-cta, .pc-submit { transition: none } }