<style>
:root{

  --starter-grad: linear-gradient(90deg, #d9d9ff, #ffffff);
  --pro-grad:     linear-gradient(90deg, #9a7fe0, #ffffff);
  --elite-grad:   linear-gradient(90deg, #ffcf66, #ffffff);
}

.onyx-upgrade{max-width:1100px;margin:16px auto;padding:0 14px;display:grid;gap:14px}

/* Premium header */
.ug-hero-premium{
  position:relative; border:1px solid var(--border-color); border-radius:18px; overflow:hidden;
  box-shadow:0 18px 60px var(--shadow-color); isolation:isolate;
}
.ug-hero-premium::before{
  content:""; position:absolute; inset:-2px; z-index:0;
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--accent) 35%, transparent) 0%,
    color-mix(in srgb, var(--accent-soft) 35%, transparent) 25%,
    color-mix(in srgb, var(--link-color) 25%, transparent) 50%,
    transparent 70%);
  filter: blur(18px); opacity:.35;
}
.ugp-bg{
  position:absolute; inset:0; z-index:0;
  background-image: var(--cover), linear-gradient(135deg,#222,#2a2a2a);
  background-size:cover; background-position:center; transform:scale(1.02);
  filter: brightness(.93) saturate(1.05);
}
.ugp-veil{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(1000px 420px at -10% -10%, rgba(127,86,217,.18), transparent 60%),
    radial-gradient(900px 360px at 110% 0%, rgba(154,127,224,.16), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.6));
  backdrop-filter: blur(2px) saturate(1.05);
}
.ugp-inner{
  position:relative; z-index:2; display:grid; grid-template-columns:1.6fr .9fr; gap:12px; padding:14px;
}
@media (max-width:920px){ .ugp-inner{grid-template-columns:1fr} }
.ugp-eyebrow{display:inline-flex;gap:8px;align-items:center;color:#e5dbff;font-weight:800;font-size:12px;letter-spacing:.3px}
.ugp-left h1{margin:4px 0 6px;color:#fff;font-size:26px;display:flex;gap:10px;align-items:center}
.ugp-left h1 i{color:#e5dbff; filter:drop-shadow(0 4px 16px rgba(127,86,217,.35))}
.ugp-left p{margin:0 0 10px;color:var(--text-light)}
.ugp-pills{display:flex;flex-wrap:wrap;gap:8px}
.ugp-pills span{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);color:var(--text-main);backdrop-filter:blur(4px)}
.ugp-pills i{color:#d9d1ff}

/* Live identity */
.ugp-id{margin-left:auto;display:flex;align-items:center;gap:12px;padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(0,0,0,.28);backdrop-filter:blur(6px)}
.ugp-ava{width:52px;height:52px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.15);background:var(--highlight-bg)}
.ugp-ava img{width:100%;height:100%;object-fit:cover;display:block}
.ugp-who{display:flex;flex-direction:column;gap:6px}
.ugp-uname{display:flex;gap:8px;align-items:center;line-height:1}
.ugp-uname i{color:#ffd966}
.ugp-uname b{
  background:linear-gradient(90deg,#fff, #e3dbff); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}
.ugp-badge{display:inline-flex;align-items:center;gap:8px;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.35)}
.ugp-badge .img{width:18px;height:18px;border-radius:6px;background-image:var(--group-img), linear-gradient(135deg,var(--accent),var(--accent-soft));background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.22)}
.ugp-badge b{color:#fff;font-size:12px}
.ugp-action{margin-left:8px;display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-soft));color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.1)}

/* Billing row */
.ug-billing{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border-color);border-radius:14px;background:var(--card-bg);padding:10px 12px}
.ug-billing>span{color:var(--text-light);font-size:12px}
.ug-toggle{display:flex;align-items:center;gap:10px;color:var(--text-main)}
.ug-toggle>span{font-weight:700}
.save-tag{color:#7ee1b0;background:rgba(0,0,0,.2);border:1px solid var(--border-color);padding:6px 10px;border-radius:999px;font-size:12px}
.switch{position:relative;width:48px;height:26px;display:inline-block}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;border-radius:999px;background:var(--highlight-bg);border:1px solid var(--border-color)}
.slider::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;left:3px;top:50%;transform:translateY(-50%);background:var(--card-bg);border:1px solid var(--border-color);transition:.18s}
input:checked + .slider{background:color-mix(in srgb,var(--accent) 20%, var(--highlight-bg))}
input:checked + .slider::after{transform:translate(22px,-50%)}

/* Plans grid */
.ug-plans{display:grid;gap:12px}
.ug-plans--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1020px){.ug-plans--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.ug-plans--3{grid-template-columns:1fr}}

.ug-card{border:1px solid var(--border-color);border-radius:16px;background:var(--card-bg);display:grid;gap:10px;padding:12px;position:relative;overflow:hidden}
.is-popular{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent), 0 18px 48px var(--shadow-color)}
.is-lite{opacity:.96}
.ug-pop{position:absolute;top:10px;right:10px;font-size:11px;color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent-soft));padding:5px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.08)}

.ug-card__hd{display:grid;gap:8px}
.ug-card h3{margin:0;color:#fff;font-size:16px}
.ug-card .price b{font-size:26px;color:#fff}
.ug-card .price span{color:var(--text-light);margin-left:6px}
.ug-card .tag{font-size:12px;color:var(--text-light)}

/* Identity preview inside plan */
.ug-id{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--border-color);border-radius:12px;background:var(--highlight-bg)}
.ug-id .ava{width:38px;height:38px;border-radius:10px;overflow:hidden;border:1px solid var(--border-color);background:var(--card-bg)}
.ug-id .ava img{width:100%;height:100%;object-fit:cover;display:block}
.ug-id .who{display:flex;flex-direction:column;gap:4px}
.ug-id .uname{display:inline-flex;gap:8px;align-items:center;line-height:1}
.ug-id .uname i{font-size:14px}
.ug-id .uname b{font-weight:900}
.ug-id .badge{display:inline-flex;gap:8px;align-items:center;padding:4px 8px;border-radius:999px;border:1px solid var(--border-color);background:rgba(0,0,0,.2)}
.ug-id .badge .img{width:18px;height:18px;border-radius:6px;background-image:var(--group-img), linear-gradient(135deg,var(--accent),var(--accent-soft));background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.18)}
.ug-id .badge b{font-size:12px;color:#fff}

/* Username gradients per plan */
.ug-card[data-plan="starter"] .uname b{
  background:var(--starter-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ug-card[data-plan="pro"] .uname b{
  background:var(--pro-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ug-card[data-plan="elite"] .uname b{
  background:var(--elite-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Icons tint */
.ug-card[data-plan="starter"] .uname i{color:#d9d9ff}
.ug-card[data-plan="pro"] .uname i{color:#b8a3ff}
.ug-card[data-plan="elite"] .uname i{color:#ffd56b}

/* Plan features & CTA */
.ug-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ug-list li{display:flex;gap:10px;align-items:center;color:var(--text-main);border:1px solid var(--border-color);border-radius:12px;padding:8px;background:var(--highlight-bg)}
.ug-list i{color:var(--text-light)}
.ug-cta{display:inline-flex;gap:8px;align-items:center;justify-content:center;text-decoration:none;border:1px solid var(--border-color);border-radius:12px;padding:10px;background:var(--highlight-bg);color:var(--text-main);font-weight:900}
.ug-cta:hover{border-color:var(--accent);color:#fff}
.ug-cta.primary{background:var(--button-bg);color:var(--button-text);border-color:transparent}
.ug-cta.primary:hover{background:var(--button-hover-bg)}
.ug-cta.ghost{opacity:.85;cursor:default}

/* Coupon & pay row (same as before) */
.ug-coupon{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px dashed var(--border-color);border-radius:14px;padding:10px;background:var(--highlight-bg)}
.coupon{display:flex;align-items:center;gap:8px;border:1px solid var(--border-color);border-radius:12px;padding:6px 8px;background:var(--card-bg);flex:1}
.coupon i{color:var(--text-light)}
.coupon input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text-main)}
.coupon button{border:1px solid var(--border-color);background:var(--highlight-bg);color:var(--text-main);border-radius:10px;padding:8px 10px}
.coupon button:hover{border-color:var(--accent);color:#fff}
.coupon-msg{min-width:160px;font-size:12px;color:var(--text-light)}
.coupon-msg.ok{color:#82f3b2}
.coupon-msg.bad{color:#ffb3b3}

.ug-pay{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ug-pay>span{color:var(--text-light);font-size:12px}
.ug-pay .icons{display:flex;gap:10px;flex-wrap:wrap}
.ug-pay .icons span{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--border-color);border-radius:10px;padding:6px 10px;background:var(--highlight-bg);color:var(--text-main);font-size:13px}
.ug-pay .icons i{color:var(--text-light)}
