/* =========================================================
   PAK TRADING DESIGN SYSTEM — TEAM RANKING COMPLETE STYLES
   ========================================================= */

.ur-page {
  --ink: #112039;
  --muted: #62738d;
  --orange: #ff5900;
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 4px 110px;
  color: var(--ink);
  font-family: 'Inter', Arial, sans-serif;
}

.ur-page * { box-sizing: border-box; }
.ur-page a { text-decoration: none; color: inherit; }
.ur-page h1, .ur-page h2, .ur-page h3, .ur-page h4, .ur-page p { margin: 0; }
.ur-page button, .ur-page input { font: inherit; }

.ur-hero {
  display: grid;
  grid-template-columns: 1fr 260px;
  align-items: center;
  min-height: 210px;
  border: 1px solid #ffffff;
  border-radius: 26px;
  background: radial-gradient(ellipse at 78% 10%, rgba(255,206,142,0.5), transparent 65%), linear-gradient(120deg, #ffffff, #fff2e4);
  padding: 22px 26px;
  overflow: hidden;
  box-shadow: 0 9px 25px rgba(183,107,18,0.06);
}

.ur-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #b94700;
  margin-bottom: 8px !important;
}

.ur-hero h1 {
  font-size: clamp(30px, 3.7vw, 48px);
  font-weight: 850;
  letter-spacing: -1.8px;
  line-height: 1.08;
}

.ur-hero h1 span, .ur-heading h2 span, .ur-cta h2 span { color: var(--orange); }
.ur-hero p:not(.ur-eyebrow) { margin-top: 10px; font-size: 13px; line-height: 1.6; }
.ur-hero img { width: 100%; height: 185px; object-fit: contain; }

.ur-text-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 750;
  color: #b94700 !important;
}

.ur-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.ur-stats > div {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 18px 14px;
  background: rgba(255,255,255,0.92);
  border: 1px solid #ffffff;
  border-radius: 18px;
  box-shadow: 0 7px 16px rgba(23,56,83,0.04);
}

.ur-stats > div > span:last-child { min-width: 0; }
.ur-stats small { font-size: 11px; display: block; line-height: 1.4; color: var(--muted); }
.ur-stats strong { display: block; font-size: 19px; letter-spacing: -0.65px; overflow-wrap: anywhere; margin: 5px 0; color: var(--ink); font-weight: 900; }
.ur-stats strong small { display: inline; font-size: 12px; color: var(--muted); }
.ur-stats em { display: block; color: var(--muted); font-style: normal; font-size: 10px; }

.ur-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(145deg, #ffb918, #ff4800);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55), 0 5px 12px rgba(255,117,0,0.22);
  font-size: 22px;
}

.ur-icon.blue { background: linear-gradient(140deg, #00d5ff, #0049ee); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55), 0 5px 12px rgba(0,141,255,0.22); }
.ur-icon.green { background: linear-gradient(140deg, #39ec63, #00a044); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55), 0 5px 12px rgba(18,165,82,0.22); }
.ur-icon.purple { background: linear-gradient(140deg, #d852ff, #8000eb); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55), 0 5px 12px rgba(148,0,255,0.22); }

.ur-feature {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 22px;
  background: linear-gradient(105deg, #ffe1ac, #fff9f1 36%, #ffffff);
  border: 1px solid #ffbe6a;
  border-radius: 22px;
  box-shadow: 0 8px 20px rgba(255,121,0,0.05);
  margin: 16px 0;
}

.ur-feature-rank { display: flex; align-items: center; gap: 15px; min-width: 0; }
.ur-feature-rank small { color: #a94a05; font-size: 9px; letter-spacing: 1.4px; font-weight: 800; }
.ur-feature h2 { font-size: 27px; letter-spacing: -0.7px; margin: 4px 0; font-weight: 900; }
.ur-feature p { font-size: 11.5px; color: var(--muted); }

.ur-feature-progress > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin-bottom: 10px; font-weight: bold; }
.ur-feature-progress b { color: #e85500; }
.ur-feature-progress small { font-size: 10px; color: var(--muted); }

.ur-progress { height: 10px; border-radius: 9px; background: #e6e9ee; overflow: hidden; margin: 8px 0; }
.ur-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffad08, #ff5300); }

.ur-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #fff7c2;
  border-radius: 13px;
  background: linear-gradient(170deg, #ffac00, #ff5900 48%, #ff3900);
  color: #ffffff !important;
  font-size: 12.5px;
  font-weight: 800;
  padding: 12px 20px;
  box-shadow: 0 6px 13px rgba(255,89,0,0.2);
  cursor: pointer;
  min-height: 44px;
}

.ur-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 28px 0 18px; }
.ur-heading h2 { font-size: 27px; letter-spacing: -0.9px; font-weight: 900; }
.ur-heading > span { font-size: 11px; color: var(--muted); display: flex; gap: 7px; align-items: center; font-weight: 700; }

.ur-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; gap: 18px; }

.ur-card {
  --tone: #c47732;
  --tint: #fff0d8;
  border: 1px solid #ffffff;
  border-radius: 21px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(25,43,67,0.06);
}

.tone-0 { --tone: #bc7136; --tint: #fff0dc; }
.tone-1 { --tone: #72849c; --tint: #e9eef5; }
.tone-2 { --tone: #e99900; --tint: #fff0b8; }
.tone-3 { --tone: #138be5; --tint: #d8f1ff; }
.tone-4 { --tone: #a740ee; --tint: #f1e0ff; }

.ur-card.is-next { border-color: #ff8400; box-shadow: 0 7px 22px rgba(255,139,0,0.15); }

.ur-card header {
  position: relative;
  text-align: center;
  background: radial-gradient(ellipse at top, #ffffff 0%, transparent 70%), linear-gradient(130deg, var(--tint), #ffffff 120%);
  padding: 38px 14px 18px;
  border-bottom: 1px solid var(--tint);
}

.ur-state {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.85);
  color: #586578;
  font-size: 9.5px;
  font-weight: 800;
}

.ur-state.claimed, .ur-state.current { background: #fff0d6; color: #b74c00; }

.ur-order { position: absolute; right: 13px; top: 16px; color: var(--tone); font-size: 10px; font-weight: 800; letter-spacing: 1px; }

.ur-medal {
  position: relative;
  display: inline-flex;
  width: 83px;
  height: 87px;
  align-items: center;
  justify-content: center;
  flex: 0 0 83px;
}

.ur-medal img { width: 100%; height: 100%; object-fit: contain; }

.ur-card h3 { font-size: 21px; margin: 9px 0 3px; letter-spacing: -0.4px; font-weight: 900; }
.ur-card header p { font-size: 11px; color: var(--muted); }

.ur-card-body { padding: 16px; }

.ur-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  background: linear-gradient(110deg, #fff6e5, #fff0d9);
  border: 1px solid #ffe0ae;
  border-radius: 12px;
  color: #a44800;
}

.ur-reward > span { font-size: 10.5px; font-weight: 700; }
.ur-reward strong { font-size: 22px; font-weight: 900; }

.ur-targets h4 { display: flex; justify-content: space-between; font-size: 11.5px; margin: 16px 0 6px; font-weight: 800; }
.ur-targets h4 > span { color: var(--muted); font-weight: 600; }

.ur-requirement { padding-top: 8px; }
.ur-requirement > div:first-child { display: flex; justify-content: space-between; gap: 5px; align-items: center; font-size: 11.5px; font-weight: 700; }
.ur-requirement p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin: 6px 0 4px 0; font-size: 11px; }
.ur-requirement p strong { font-size: 13px; color: var(--ink); }
.ur-requirement p span { color: var(--muted); }

.ur-action { margin-top: 16px; }
.ur-action button {
  width: 100%;
  min-height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 12px;
  border: 1px solid #e2e7ed;
  background: #f1f3f6;
  color: #657186;
  cursor: not-allowed;
}

@media(max-width: 680px) {
  .ur-hero { grid-template-columns: 1fr 105px; padding: 18px 14px; border-radius: 20px; }
  .ur-hero h1 { font-size: 28px; }
  .ur-hero img { height: 115px; width: 115px; }
  .ur-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ur-feature { padding: 16px; grid-template-columns: 1fr; }
  .ur-grid { grid-template-columns: 1fr; gap: 16px; }
}