/* RadLearn V10.1.3 - Referral UX Polish + Admin Hub Alignment */

/* ---------- Admin Hub: exact 4 x 2 desktop ---------- */
@media(min-width:1001px){
  .v885-admin-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
  .v885-admin-nav-item,.v885-admin-nav-item:nth-child(5){grid-column:auto!important}
}

/* ---------- Shared campaign badges ---------- */
.v101-campaign-badge{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:6px 10px;border-radius:999px;font-size:8px;font-weight:850;font-style:normal;letter-spacing:.055em;text-transform:uppercase;border:1px solid var(--line);background:var(--surface);color:var(--muted);white-space:nowrap}
.v101-campaign-badge .icon{width:13px;height:13px}
.v101-campaign-badge.is-active{color:#a54e25;background:#fff0e5;border-color:#efc4ab}
.v101-campaign-badge.is-upcoming{color:#4d6e9d;background:#eef4ff;border-color:#cfdcf0}
.v101-campaign-badge.is-paused{color:#8b682d;background:#fff8e8;border-color:#ead9ad}
.v101-campaign-badge.is-ended{color:var(--muted);background:var(--bg)}
.v101-ref-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.v101-ref-title-row h2{min-width:0}

/* ---------- Home referral card ---------- */
.v101-ref-home{border-color:color-mix(in srgb,#c66538 32%,var(--line));background:linear-gradient(128deg,color-mix(in srgb,#fff1e6 76%,var(--surface)) 0%,var(--surface) 55%,color-mix(in srgb,#f6dcc8 42%,var(--surface)) 100%);box-shadow:0 22px 60px rgba(145,74,40,.10)}
.v101-ref-home:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 58%,rgba(255,255,255,.42) 58% 59%,transparent 59%);pointer-events:none;opacity:.65}
.v101-ref-home:after{width:360px;height:360px;right:-145px;top:-220px;background:radial-gradient(circle,rgba(207,99,50,.15),transparent 68%)}
.v101-ref-home-icon{width:54px;height:54px;border-radius:18px;color:#bf6035;background:linear-gradient(145deg,#fff9f4,#f8dcc9);border-color:#edc1a8;box-shadow:0 9px 24px rgba(180,83,43,.11)}
.v101-ref-home-icon .icon{width:25px;height:25px}
.v101-ref-home .v10-ref-home-wallet small{display:flex;align-items:center;gap:5px}.v101-ref-home .v10-ref-home-wallet small .icon{width:13px;height:13px}
.v101-earned{display:block;font-size:9px;color:var(--muted);margin-bottom:7px}.v101-earned b{color:var(--ink)}
.v101-home-progress-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px}.v101-home-progress-head>div{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.v101-home-progress-head b{font-size:11px}.v101-home-progress-head span{font-size:9px;color:#a6613d;background:#fff0e6;padding:4px 8px;border-radius:999px}.v101-home-progress-head em{font-size:9px;font-style:normal;color:var(--muted)}
.v101-next-milestone{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:14px;background:rgba(255,255,255,.52);border:1px solid rgba(210,137,96,.24)}.v101-next-milestone>.icon{width:20px;height:20px;color:#c26338}.v101-next-milestone>div{display:grid;gap:2px;min-width:0;flex:1}.v101-next-milestone strong{font-size:10px}.v101-next-milestone span{font-size:9px;color:var(--muted)}.v101-next-milestone .btn{margin-left:auto}
.v101-share-cta{background:linear-gradient(135deg,#c86437,#b5542d)!important;box-shadow:0 8px 20px rgba(166,74,35,.18)}
.v101-code-chip{display:inline-flex;align-items:center;padding:8px 11px;border-radius:9px;border:1px dashed #e1b497;background:rgba(255,255,255,.48);font:750 9px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;color:#8f5a42}

/* ---------- Milestone timeline ---------- */
.v101-milestone-timeline{position:relative;padding:20px 8px 4px;margin:6px 0 12px;min-width:0;overflow-x:auto;scrollbar-width:thin}
.v101-milestone-line{position:absolute;left:35px;right:35px;top:33px;height:5px;border-radius:99px;background:color-mix(in srgb,var(--line) 84%,transparent);overflow:hidden}.v101-milestone-line i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#c86539,#eba56d)}
.v101-milestone-nodes{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;min-width:max(100%,440px);position:relative;z-index:1}.v101-milestone-node{flex:1;min-width:92px;display:grid;justify-items:center;text-align:center;gap:8px}.v101-milestone-dot{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--surface);background:#e7e1dc;color:#9c8e85;box-shadow:0 0 0 1px var(--line)}.v101-milestone-dot .icon{width:14px;height:14px}.v101-milestone-node>div{display:grid;gap:2px}.v101-milestone-node b{font-size:10px}.v101-milestone-node strong{font-size:10px;color:#a55330}.v101-milestone-node small{font-size:8px;color:var(--muted)}
.v101-milestone-node.is-done .v101-milestone-dot{background:#2f8a6d;color:#fff;box-shadow:0 0 0 1px #2f8a6d,0 6px 16px rgba(47,138,109,.18)}.v101-milestone-node.is-done strong{color:#2f8067}.v101-milestone-node.is-done small{color:#2f8067;font-weight:800}
.v101-milestone-node.is-next .v101-milestone-dot{background:#c86437;color:#fff;box-shadow:0 0 0 5px rgba(200,100,55,.13),0 8px 18px rgba(173,79,37,.2);animation:v101Pulse 1.9s ease-in-out infinite}.v101-milestone-node.is-next b{color:#9f4c28}.v101-milestone-node.is-next small{color:#b35831;font-weight:850}.v101-milestone-node.is-reached .v101-milestone-dot{background:#f2b77f;color:#793a20}.v101-milestone-node.is-reached small{color:#99512f;font-weight:750}
.v101-milestone-timeline.is-compact{padding-top:15px;margin:2px 0 6px}.v101-milestone-timeline.is-compact .v101-milestone-line{top:28px}.v101-milestone-timeline.is-compact .v101-milestone-dot{width:28px;height:28px}.v101-milestone-timeline.is-compact .v101-milestone-nodes{min-width:max(100%,360px)}
.v101-milestone-empty{display:flex;align-items:center;gap:8px;padding:12px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:10px}.v101-milestone-empty .icon{width:17px}
@keyframes v101Pulse{50%{box-shadow:0 0 0 9px rgba(200,100,55,.07),0 8px 18px rgba(173,79,37,.16)}}

/* ---------- Referral detail ---------- */
.v101-referral-hero{position:relative;overflow:hidden;background:linear-gradient(132deg,color-mix(in srgb,#fff0e4 74%,var(--surface)),var(--surface) 58%);border-color:color-mix(in srgb,#c56639 30%,var(--line))}.v101-referral-hero:after{content:"";position:absolute;width:330px;height:330px;right:-150px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(205,101,53,.13),transparent 70%);pointer-events:none}.v101-referral-hero>*{position:relative;z-index:1}
.v101-wallet-earned{margin:10px 0 0;padding:10px 0;border-top:1px solid rgba(255,255,255,.18);display:grid;gap:1px}.v101-wallet-earned b{font-size:15px}.v101-wallet-earned span{font-size:8px;color:#ffffffaa}.v101-milestone-section{border-radius:22px;padding:24px}.v101-countdown{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;font-size:9px;font-style:normal;color:var(--muted)}.v101-countdown .icon{width:14px}.v101-countdown.is-urgent{color:#ae4c2b;background:#fff0e9;border-color:#edc2b1;font-weight:800}
.v101-ref-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.v101-ledger-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--theme-soft);color:var(--theme-accent)}.v101-ledger-icon .icon{width:16px}.v101-ref-stats+.v10-ref-columns .v10-ledger-row{grid-template-columns:auto minmax(0,1fr) auto}

/* ---------- Referral / milestone popup ---------- */
dialog#modal.v101-referral-dialog,dialog#modal.v101-reward-dialog{width:min(620px,calc(100vw - 28px))!important;max-width:min(620px,calc(100vw - 28px))!important;padding:0!important;overflow:hidden!important;border:1px solid rgba(205,114,70,.28)!important;background:var(--surface)!important;box-shadow:0 30px 100px rgba(66,38,24,.28)!important}
.v101-referral-popup{position:relative;padding:34px 34px 28px;text-align:center;background:radial-gradient(circle at 50% -20%,rgba(235,163,112,.28),transparent 42%),linear-gradient(180deg,color-mix(in srgb,#fff5ed 62%,var(--surface)),var(--surface) 58%)}
.v101-referral-popup .modal-close{z-index:4}.v101-popup-orb{width:66px;height:66px;margin:0 auto 13px;border-radius:22px;display:grid;place-items:center;color:#b6532b;background:linear-gradient(145deg,#fff8f2,#f2d0b8);border:1px solid #ebbea2;box-shadow:0 15px 35px rgba(164,75,33,.15)}.v101-popup-orb .icon{width:30px;height:30px}.v101-popup-orb.is-trophy{color:#91611c;background:linear-gradient(145deg,#fff8dc,#edd89b);border-color:#e2c87c}.v101-referral-popup>.eyebrow{text-align:center;color:#b35a32;margin:0 0 6px}.v101-referral-popup h2{font-size:27px!important;line-height:1.22!important;max-width:520px!important;margin:0 auto 8px!important}.v101-referral-popup h2 span{color:#bd5931}.v101-popup-lead{font-size:11px!important;max-width:470px!important;margin:0 auto 16px!important}.v101-popup-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.v101-popup-stats>div{display:flex;align-items:center;text-align:left;gap:9px;padding:11px 12px;border:1px solid rgba(214,153,117,.28);border-radius:13px;background:rgba(255,255,255,.55)}.v101-popup-stats i{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;color:#b85b33;background:#f9e6d8}.v101-popup-stats i .icon{width:15px}.v101-popup-stats span{display:grid}.v101-popup-stats b{font-size:14px}.v101-popup-stats small{font-size:7.5px;color:var(--muted)}
.v101-popup-next{display:flex;align-items:center;text-align:left;gap:10px;padding:12px 14px;border-radius:14px;background:#fff7f1;border:1px solid #efd2bf}.v101-popup-next>.icon{width:20px;color:#bd6038}.v101-popup-next>div{display:grid;gap:2px}.v101-popup-next strong{font-size:10px}.v101-popup-next span{font-size:8.5px;color:var(--muted)}.v101-popup-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;color:var(--muted);font-size:9px}.v101-popup-meta span{display:flex;align-items:center;gap:5px}.v101-popup-meta .icon{width:14px}.v101-popup-meta code{padding:5px 8px;border-radius:8px;background:var(--bg);font-size:9px;color:var(--ink)}.v101-popup-actions{margin-top:18px!important}.v101-popup-actions .btn.primary{background:linear-gradient(135deg,#c76436,#b24f29)!important}.v101-reward-amount{font-size:39px;font-weight:850;letter-spacing:-1.5px;color:#a86d1d;margin:12px 0}.v101-reward-amount span{font-size:16px;letter-spacing:0}.v101-achievement-chip{display:inline-flex;align-items:center;gap:7px;margin:12px auto 4px;padding:8px 11px;border-radius:999px;background:#fff7dc;border:1px solid #ecd994;color:#83591a;font-size:9px;font-weight:800}.v101-achievement-chip .icon{width:15px}

/* ---------- Admin referral preview ---------- */
.v101-admin-referral-head h2{display:flex;align-items:center;gap:9px}.v101-admin-referral-head h2 .icon{width:22px;color:#bd5f35}.v101-admin-ref-grid{align-items:start}.v101-admin-campaign-preview{margin:5px 0 16px;padding:16px;border-radius:16px;border:1px solid color-mix(in srgb,#c56639 26%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,#fff1e7 58%,var(--surface)),var(--surface))}.v101-preview-head{display:flex;align-items:center;gap:10px}.v101-preview-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#fae5d5;color:#b85a33}.v101-preview-icon .icon{width:18px}.v101-preview-head>div{display:grid;gap:1px;min-width:0;flex:1}.v101-preview-head small{font-size:7px;letter-spacing:.12em;color:var(--muted);font-weight:800}.v101-preview-head h3{font-size:12px}.v101-preview-reward{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:12px 0 7px}.v101-preview-reward span{font-size:9px;color:var(--muted)}.v101-preview-reward strong{font-size:18px;color:#aa512c}.v101-admin-campaign-preview>p{font-size:8.5px;color:var(--muted)}.v101-admin-form-actions{display:flex;gap:8px;flex-wrap:wrap}

@media(max-width:1000px){.v101-ref-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .v101-ref-title-row{align-items:flex-start;display:grid}.v101-campaign-badge{width:max-content}
  .v101-home-progress-head{align-items:flex-start}.v101-home-progress-head>div{display:grid;gap:4px}.v101-next-milestone{align-items:flex-start;flex-wrap:wrap}.v101-next-milestone .btn{width:100%;margin-left:30px}
  dialog#modal.v101-referral-dialog,dialog#modal.v101-reward-dialog{width:calc(100vw - 18px)!important;max-width:calc(100vw - 18px)!important}
  .v101-referral-popup{padding:27px 17px 20px}.v101-referral-popup h2{font-size:23px!important;margin-inline:22px!important}.v101-popup-stats{grid-template-columns:1fr 1fr}.v101-popup-stats>div:last-child{grid-column:1/-1}.v101-popup-meta{display:grid;justify-items:center}.v101-popup-actions{grid-template-columns:1fr!important}.v101-popup-actions .btn.primary{grid-row:auto!important}
}
@media(max-width:430px){.v101-ref-stats{grid-template-columns:1fr}.v101-code-chip{justify-content:center}.v101-milestone-nodes{min-width:390px}.v101-preview-head{align-items:flex-start;flex-wrap:wrap}.v101-preview-head .v101-campaign-badge{margin-left:48px}}