.ocl-root{--ocl-ink:#0d1b2a;--ocl-deep:#13263b;--ocl-gold:#c9a227;--ocl-gold-soft:#e8d18a;--ocl-text:#e9eef5;--ocl-muted:#9aa8ba;--ocl-line:rgba(201,162,39,.22);--ocl-tier:#c9a227;font-family:"Inter","Helvetica Neue",Arial,sans-serif;color:var(--ocl-text);background:radial-gradient(circle at top right,#1c3553 0,var(--ocl-ink) 60%);border-radius:18px;padding:clamp(16px,3vw,32px);display:grid;gap:20px;box-sizing:border-box;max-width:1100px;margin:0 auto}
.ocl-root *{box-sizing:border-box}
.ocl-root h2,.ocl-root h3{font-family:Georgia,"Times New Roman",serif;font-weight:500;margin:0 0 8px;color:#fff}
.ocl-root h2{font-size:clamp(1.4rem,2.5vw,1.9rem)}
.ocl-root h3{font-size:1.15rem}
.ocl-eyebrow{text-transform:uppercase;letter-spacing:.24em;font-size:.72rem;color:var(--ocl-gold);margin:0 0 6px}
.ocl-muted{color:var(--ocl-muted);margin:4px 0}
.ocl-small{font-size:.82rem}
.ocl-card{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--ocl-line);border-radius:14px;padding:22px;backdrop-filter:blur(6px)}
.ocl-hero{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:flex-end;padding:clamp(20px,4vw,36px);border-radius:16px;background:linear-gradient(135deg,#1f3a5c,#0b1520);border:1px solid var(--ocl-line);position:relative;overflow:hidden}
.ocl-hero::after{content:"";position:absolute;inset:auto -60px -90px auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,39,.28),transparent 70%)}
.ocl-tier-badge{display:inline-block;margin-top:10px;padding:6px 14px;border-radius:999px;background:var(--ocl-tier);color:#0d1b2a;font-weight:600;font-size:.85rem;letter-spacing:.04em}
.ocl-hero__balance{text-align:right;z-index:1}
.ocl-hero__balance span{display:block;color:var(--ocl-muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.14em}
.ocl-hero__balance strong{display:block;font-family:Georgia,serif;font-size:clamp(2.2rem,5vw,3.4rem);color:var(--ocl-gold-soft);line-height:1.1}
.ocl-hero__balance em{font-style:normal;color:var(--ocl-muted)}
.ocl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.ocl-progress{height:8px;background:rgba(255,255,255,.1);border-radius:999px;overflow:hidden;margin:14px 0 8px}
.ocl-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--ocl-gold),var(--ocl-gold-soft));border-radius:999px;transition:width .8s ease}
.ocl-progress--thin{height:5px;margin:8px 0 4px}
.ocl-redeem label{display:block;color:var(--ocl-muted);font-size:.85rem;margin-bottom:8px}
.ocl-row{display:flex;gap:10px;flex-wrap:wrap}
.ocl-row input{flex:1;min-width:140px;padding:11px 14px;border-radius:10px;border:1px solid var(--ocl-line);background:rgba(0,0,0,.25);color:#fff;font-size:1rem}
.ocl-btn{display:inline-block;padding:11px 22px;border-radius:10px;border:0;cursor:pointer;background:linear-gradient(135deg,var(--ocl-gold),#a8841c);color:#0d1b2a;font-weight:700;text-decoration:none;letter-spacing:.03em;transition:transform .15s,box-shadow .15s}
.ocl-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(201,162,39,.3);color:#0d1b2a}
.ocl-btn:disabled{opacity:.6;cursor:wait}
.ocl-msg{margin:12px 0 0;color:var(--ocl-gold-soft);min-height:1.2em}
.ocl-msg code{background:rgba(201,162,39,.15);padding:3px 8px;border-radius:6px;font-size:1rem;color:#fff}
.ocl-missions{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ocl-missions li{padding:16px;border:1px solid var(--ocl-line);border-radius:12px;background:rgba(0,0,0,.18)}
.ocl-missions li.is-complete{border-color:var(--ocl-gold)}
.ocl-mission__head{display:flex;justify-content:space-between;gap:10px;font-weight:600}
.ocl-mission__bonus{color:var(--ocl-gold-soft);white-space:nowrap}
.ocl-table-wrap{overflow-x:auto}
.ocl-table{width:100%;border-collapse:collapse}
.ocl-table th{text-align:left;color:var(--ocl-muted);font-weight:500;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;padding:10px 8px;border-bottom:1px solid var(--ocl-line)}
.ocl-table td{padding:12px 8px;border-bottom:1px solid rgba(255,255,255,.06)}
.ocl-table td:last-child,.ocl-table th:last-child{text-align:right}
.is-plus{color:#8fd9a8;font-weight:600}
.is-minus{color:#f4a6a6;font-weight:600}
.ocl-guest{text-align:center;max-width:460px;margin:0 auto}
@media (max-width:640px){.ocl-hero__balance{text-align:left}}

/* Product page earn message */
.ocl-earn{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:14px 0;padding:12px 16px;border-radius:12px;background:linear-gradient(135deg,#13263b,#0d1b2a);border:1px solid rgba(201,162,39,.35);color:#e9eef5;font-size:.95rem;font-family:"Inter","Helvetica Neue",Arial,sans-serif}
.ocl-earn strong{color:#e8d18a}
.ocl-earn__gem{color:var(--ocl-tier,#c9a227);font-size:1rem}
.ocl-earn__tier{margin-left:auto;padding:3px 10px;border-radius:999px;background:var(--ocl-tier,#c9a227);color:#0d1b2a;font-size:.75rem;font-weight:700;letter-spacing:.04em}
.ocl-earn--guest a{color:#e8d18a;text-decoration:underline}
.ocl-earn__hint{color:#6b7785;font-size:.9rem;font-style:italic}
.ocl-earn-slot{margin:14px 0}
/* My Account summary */
.ocl-root--compact{padding:0;background:none;border-radius:0;max-width:none;margin:20px 0}
.ocl-account-summary{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.ocl-account-summary__main h3{margin-bottom:6px}
