.rpd-modal .rpd-title{display:flex;align-items:center;gap:10px}
.rpd-modal .rpd-title-ico{font-size:24px;margin-right:0;display:inline-block;vertical-align:middle;line-height:1}
.rpd-warning{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14.5px}
.rpd-warning .rpd-w-ico{font-size:22px;margin-right:0;vertical-align:middle;line-height:1}
/* RPD FPSM Lock Section - Mobile-first */

.rpd-lock-section{--rpd-radius:14px;--rpd-gap:12px;--rpd-accent:#e63946;--rpd-muted:#ffffffE6;--rpd-track:#e7e9ee;--rpd-gradient-start:#dc2626;--rpd-gradient-end:#991b1b;--rpd-text:#ffffff;--rpd-publish-a:#667eea;--rpd-publish-b:#764ba2;--lvl1-a:#06b6d4;--lvl1-b:#0891b2;--lvl2-a:#0284c7;--lvl2-b:#0369a1;--lvl3-a:#fb923c;--lvl3-b:#ea580c;--lvl4-a:#dc2626;--lvl4-b:#991b1b; background:#f3f4f6; color:#111; border:1px solid #e5e7eb; border-radius:var(--rpd-radius); padding:18px; margin:12px 0; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.08);} 
.rpd-lock-head{margin-bottom:10px;}
.rpd-lock-head .rpd-title{font-size:16px;font-weight:700;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25);}
.rpd-lock-head .rpd-sub{font-size:13px;color:rgba(255,255,255,.9);}
/* Locked (no selection): use dark text on light panel */
.rpd-lock-section:not(.has-selection) .rpd-lock-head .rpd-title{color:#111;text-shadow:none}
.rpd-lock-section:not(.has-selection) .rpd-lock-head .rpd-sub{color:#475569}

/* Swipe */
.rpd-swipe{position:relative;height:56px;border-radius:28px;background:var(--rpd-track);overflow:hidden; transition:opacity .24s ease, transform .24s ease;}
.rpd-swipe, .rpd-swipe__thumb{touch-action:none;-ms-touch-action:none;}
.rpd-swipe__track{position:absolute;top:0;left:0;height:100%;width:0;background:linear-gradient(90deg,var(--rpd-gradient-start),var(--rpd-gradient-end));border-radius:28px;transition:width .15s ease;}
.rpd-swipe__thumb{position:absolute;top:4px;left:4px;width:48px;height:48px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.2);cursor:grab;user-select:none;border:1px solid #dadada;font-size:22px;line-height:1;}
.rpd-swipe__hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#334155;font-size:14px;font-weight:600;pointer-events:none;}

/* Levels area */
.rpd-levels{opacity:0;transform:translateY(8px);pointer-events:none; transition:opacity .24s ease, transform .24s ease;}
.rpd-lock-section.is-locked .rpd-levels{display:none}
.rpd-levels-head{margin:8px 0 10px 0;}
.rpd-levels-head .rpd-title{font-size:16px;font-weight:700;color:#222}
.rpd-levels-head .rpd-sub{font-size:13px;color:#555}
/* In the modal, headings must be light for contrast on red glass */
.rpd-modal .rpd-levels-head .rpd-title{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.rpd-modal .rpd-levels-head .rpd-sub{color:rgba(255,255,255,.9)}
.rpd-levels-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.rpd-level-card{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:18px;border-radius:16px;border:1px solid rgba(255,255,255,.22);color:#fff; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease; box-shadow:0 8px 22px rgba(0,0,0,.25)}
.rpd-lock-section .rpd-level-card{justify-content:flex-start;text-align:left}
.rpd-lock-section .rpd-level-card .rpd-measures{justify-items:start}
.rpd-level-card:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.32)}
.rpd-level-card .rpd-l-name{font-weight:700;margin-bottom:4px}
  .rpd-level-card .rpd-l-row{display:flex; align-items:baseline; justify-content:space-between; width:100%; gap:10px; font-size:13px; margin:6px 0}
  .rpd-level-card .rpd-l-k{opacity:.95; font-weight:700}
  .rpd-level-card .rpd-l-v{font-weight:800}
  .rpd-level-card .rpd-measures{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .measure .label{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;opacity:.92;margin-bottom:4px;color:#fff}
  .measure .value{font-size:15px;font-weight:800;line-height:1.2;word-break:break-word;color:#fff}
.rpd-level-card.is-selected{outline:2px solid rgba(255,255,255,.9); box-shadow:0 8px 30px rgba(0,0,0,.35), 0 0 0 6px rgba(255,255,255,.08)}
.rpd-level-card.is-disabled{opacity:.55; filter:saturate(.7) brightness(.85); cursor:not-allowed}
/* per-level gradients */
.rpd-level-card.l1{background:linear-gradient(135deg,var(--lvl1-a),var(--lvl1-b));}
.rpd-level-card.l2{background:linear-gradient(135deg,var(--lvl2-a),var(--lvl2-b));}
.rpd-level-card.l3{background:linear-gradient(135deg,var(--lvl3-a),var(--lvl3-b));}
.rpd-level-card.l4{background:linear-gradient(135deg,var(--lvl4-a),var(--lvl4-b));}

/* Warning + actions */
.rpd-warning{margin:18px 4px 14px; padding:12px 14px; border-radius:10px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.30); color:rgba(255,255,255,.95); backdrop-filter:blur(10px)}
.rpd-actions{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:12px 4px 6px}
.rpd-actions .rpd-btn{width:100%; height:48px; border-radius:10px; border:2px solid rgba(220,38,38,.30); background:rgba(255,255,255,.95); color:#dc2626; font-weight:700; font-size:15px; cursor:pointer; backdrop-filter:blur(10px)}
.rpd-actions .rpd-btn:hover{ background:#ffffff; box-shadow:0 4px 15px rgba(0,0,0,.10)}
.rpd-actions .rpd-btnp{width:100%; height:48px; border-radius:10px; border:none; background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff; font-weight:700; font-size:15px; cursor:pointer; box-shadow:0 4px 15px rgba(239,68,68,.30)}
.rpd-actions .rpd-btnp:hover{ filter:brightness(1.03); box-shadow:0 6px 20px rgba(239,68,68,.40)}

/* Ripple */
.rpd-level-card{overflow:hidden}
.rpd-ripple{ position:absolute; border-radius:50%; transform: translate(-50%,-50%); pointer-events:none; background: rgba(255,255,255,.6); width:12px; height:12px; opacity:.5; animation:rpd-rip .5s ease-out forwards; }
@keyframes rpd-rip{ 0%{transform:translate(-50%,-50%) scale(.6); opacity:.45} 100%{transform:translate(-50%,-50%) scale(15); opacity:0} }

/* Desktop: make inline warning extremely prominent */
@media (min-width:769px){
  .rpd-lock-section .rpd-warning{
    background:#FEF2F2; /* red-50 */
    border:2px solid #DC2626; /* brand red */
    color:#7F1D1D; /* dark red text */
    font-weight:800;
    font-size:15.5px;
    margin:18px 0 14px;
    padding:14px 16px;
    border-radius:12px;
    box-shadow:0 6px 18px rgba(220,38,38,.18), 0 0 0 3px rgba(220,38,38,.10) inset;
  }
  .rpd-lock-section .rpd-warning .rpd-w-ico{font-size:22px;margin-right:8px;vertical-align:middle;line-height:1}
}

/* State transitions */
.rpd-lock-section.is-unlocked .rpd-swipe{display:none}
.rpd-lock-section.is-unlocked .rpd-lock-head{display:none}
.rpd-lock-section.is-unlocked .rpd-levels{opacity:1; transform:translateY(0); pointer-events:auto}

/* Summary state: when a level is selected */
.rpd-lock-section.has-selection .rpd-lock-head{display:block}
.rpd-lock-section.has-selection .rpd-swipe{display:none}
.rpd-lock-section.has-selection{background:linear-gradient(135deg,var(--rpd-gradient-start),var(--rpd-gradient-end)); color:var(--rpd-text); border:1px solid rgba(255,255,255,.18); box-shadow:0 8px 30px rgba(0,0,0,.28); backdrop-filter:blur(14px) saturate(110%)}
.rpd-summary{display:none; margin:12px 4px 6px}
.rpd-lock-section.has-selection .rpd-summary{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.rpd-summary .rpd-btn{width:100%; height:48px; border-radius:10px; border:2px solid rgba(220,38,38,.30); background:rgba(255,255,255,.95); color:#dc2626; font-weight:700; cursor:pointer}
.rpd-summary .rpd-selection{width:100%; height:48px; border-radius:10px; border:none; background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff; font-weight:700; cursor:default; pointer-events:none; user-select:none}
/* Glow border for summary 'level activated' state */
.rpd-lock-section.has-selection .rpd-summary .rpd-selection{ position:relative }
.rpd-lock-section.has-selection .rpd-summary .rpd-selection::after{ content:""; position:absolute; inset:-2px; border-radius:10px; pointer-events:none; box-shadow:0 0 0 0 rgba(239,68,68,.60); animation:rpdSelGlow 1.4s ease-out infinite }
@keyframes rpdSelGlow{ to{ box-shadow:0 0 0 14px rgba(239,68,68,0) } }

/* Toast (minimal) */
.rpd-fpsm-toast{position:fixed; left:50%; transform:translateX(-50%); bottom:16px; background:#111; color:#fff; padding:8px 12px; border-radius:8px; font-size:13px; z-index:99999; opacity:0; transition:opacity .18s ease}
.rpd-fpsm-toast.in{opacity:1}
/* Allow anchored placement near cards on desktop */
.rpd-fpsm-toast.is-inline{position:absolute; transform:none;}

@media (max-width:420px){
  .rpd-levels-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
  .rpd-swipe{height:52px;border-radius:26px}
  .rpd-swipe__thumb{width:44px;height:44px}

  /* Mobile modal: severity-based colors per level */
  /* Match style.md token gradients */
  .rpd-modal .rpd-level-card.l1{background:linear-gradient(135deg,#ec4899,#9333ea)}
  .rpd-modal .rpd-level-card.l2{background:linear-gradient(135deg,#0284c7,#0369a1)}
  .rpd-modal .rpd-level-card.l3{background:linear-gradient(135deg,#fb923c,#ea580c)}
  .rpd-modal .rpd-level-card.l4{background:linear-gradient(135deg,#7f1d1d,#991b1b)}
}
@media (prefers-reduced-motion: reduce){
  .rpd-swipe,.rpd-levels{transition:none}
}

/* Mobile-only centered modal for level selection */
@media (max-width:768px){
  /* On mobile, keep inline levels hidden when unlocked; use modal instead */
  
  /* When in help view, hide the warning */
  .rpd-modal.is-help .rpd-warning{display:none}

  .rpd-modal-overlay{position:fixed;inset:0;z-index:99998;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .18s ease}
  .rpd-modal-overlay.in{opacity:1;pointer-events:auto}

  .rpd-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);opacity:0;z-index:99999;width:min(92vw, 420px);border-radius:18px;overflow:hidden;
    background:linear-gradient(135deg,#dc2626,#b91c1c);border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 36px rgba(0,0,0,.45);color:#fff;isolation:isolate;transition:opacity .18s ease, transform .22s ease}
  .rpd-modal.in{opacity:1;transform:translate(-50%,-50%) scale(1)}
  /* Suppress transitions when JS sets .no-anim during resize close */
  .rpd-modal.no-anim{transition:none}
  .rpd-modal-overlay.no-anim{transition:none}

  /* Prevent hidden modal from capturing clicks (handled in combined media outside) */

  .rpd-modal .rpd-levels-head{margin:10px 16px 8px; display:flex; align-items:center; justify-content:space-between; gap:10px}
  /* Title icon already styled globally */
  .rpd-modal .rpd-levels-grid{padding:8px 16px 2px;gap:14px;grid-template-columns:1fr}
  .rpd-modal .rpd-warning{margin:8px 16px; background:rgba(153,27,27,0.5); border:1px solid rgba(248,113,113,0.3); color:#fecaca; border-radius:12px}
  /* Left-align card content and measures like the preview */
  .rpd-modal .rpd-level-card{justify-content:flex-start;text-align:left}
  .rpd-modal .rpd-level-card .rpd-measures{justify-items:start}
  .rpd-modal .rpd-level-card .measure{ text-align:left }
  /* Left-align the Extend column values so all start at same x */
  .rpd-modal .rpd-level-card .rpd-measures > .measure:nth-child(2){ text-align:left }
  /* Add more horizontal space between Timer and Extend */
  .rpd-modal .rpd-level-card .rpd-measures{column-gap:42px}
  /* Fix first column width so Extend starts at same x across cards */
  .rpd-modal .rpd-level-card .rpd-measures{grid-template-columns:20ch minmax(0,1fr)}
  /* Apply same alignment when inline levels are shown on small desktops */
  .rpd-lock-section .rpd-level-card .rpd-measures{grid-template-columns:20ch minmax(0,1fr)}
  .rpd-lock-section .rpd-level-card .rpd-measures > .measure:nth-child(2){ text-align:left }
  /* Emphasize level names; de-emphasize measures in mobile modal */
  .rpd-modal .rpd-level-card .rpd-l-name{font-size:18px;font-weight:900;line-height:1.1;margin-bottom:8px}
  .rpd-modal .rpd-level-card .measure .value{font-size:14px;font-weight:700}
  .rpd-modal .rpd-level-card .measure .label{font-size:11px;opacity:.9}
  .rpd-modal .rpd-actions{margin:8px 16px 16px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:14px}
  /* Mobile help header button (pill + icon + label) */
  .rpd-help-btn-m{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 10px;border-radius:999px;cursor:pointer;border:0;
    background:linear-gradient(180deg,#4c8ff9 0%, #1a73e8 100%);color:#fff;box-shadow:0 6px 16px rgba(26,115,232,.30), inset 0 0 0 2px #fff}
  .rpd-help-btn-m:hover{filter:brightness(1.06)}
  .rpd-help-btn-m:active{transform:scale(.98)}
  .rpd-help-btn-m:focus-visible{outline:2px solid #fff; outline-offset:2px}
  .rpd-help-btn-m .help-svg{display:block;width:18px;height:18px}
  .rpd-help-btn-m .help-svg .q{fill:#fff}
  .rpd-help-btn-m .help-label{font:700 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;white-space:nowrap}
  /* Mobile help visuals to match desktop */
  .rpd-modal .rpd-help-body{padding:8px 16px 6px}
  /* Figma-styled mobile help body (namespaced) */
  .rpd-modal.is-help{background:linear-gradient(135deg,#2563eb,#7c3aed)}
  .rpd-modal.is-help .rpd-help-body .rpd-h-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .rpd-modal.is-help .rpd-h-header-left{display:flex;align-items:center;gap:12px}
  .rpd-modal.is-help .rpd-h-ico-wrap{background-color:rgba(255,255,255,.2);border-radius:50%;padding:8px}
  .rpd-modal.is-help .rpd-h-icon{width:24px;height:24px;color:#fff}
  .rpd-modal.is-help .rpd-h-title{color:#fff;font-size:16px;font-weight:700}
  /* header close removed */
  

  .rpd-modal.is-help .rpd-h-content{display:flex;flex-direction:column;gap:12px;color:#fff}
  .rpd-modal.is-help .rpd-h-explain{background-color:rgba(255,255,255,.10);border-radius:12px;padding:12px}
  .rpd-modal.is-help .rpd-h-levels{background-color:rgba(234,179,8,.20);border:1px solid rgba(250,204,21,.30);border-radius:12px;padding:12px}
  .rpd-modal.is-help .rpd-h-levels-title{font-weight:600;color:rgb(254,240,138);margin-bottom:6px;font-size:18px}
  /* removed explain header row */
  .rpd-modal.is-help .rpd-h-explain-h{display:none}
  .rpd-modal.is-help .rpd-h-levels-desc{color:rgba(253,224,71,.90);font-size:13px}

  .rpd-modal.is-help .rpd-h-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .rpd-modal.is-help .rpd-h-card{border-radius:12px;padding:12px}
  .rpd-modal.is-help .rpd-h-card--timer{background-color:rgba(96,165,250,.30);border:1px solid rgba(147,197,253,.40)}
  .rpd-modal.is-help .rpd-h-card--extends{background-color:rgba(196,181,253,.30);border:1px solid rgba(196,181,253,.40)}
  .rpd-modal.is-help .rpd-h-card-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .rpd-modal.is-help .rpd-h-card-ico{width:20px;height:20px;color:rgb(239,246,255)}
  .rpd-modal.is-help .rpd-h-card-title{font-weight:800;color:rgb(239,246,255);font-size:14px}
  .rpd-modal.is-help .rpd-h-card-desc{font-size:12px;color:rgb(239,246,255);font-weight:600;line-height:1.25}

  .rpd-modal.is-help .rpd-h-ok{width:100%;background-color:#fff;color:#7c3aed;border:none;border-radius:12px;padding:12px 16px;font-weight:700;margin-top:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px}
  .rpd-modal.is-help .rpd-h-ok:hover{background-color:rgba(255,255,255,.9)}
  .rpd-modal.is-help .rpd-h-ok-ico{width:20px;height:20px}
  .rpd-modal .rpd-help-list{margin:8px 0 0; padding:0; list-style:none; display:grid; gap:10px}
  .rpd-modal .rpd-help-list li{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:10px 12px}
  .rpd-help-chip{width:28px;height:28px;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.25)}
  .rpd-help-chip.l1{background:linear-gradient(135deg,#db2777,#9d174d)}
  .rpd-help-chip.l2{background:linear-gradient(135deg,#fb923c,#ea580c)}
  .rpd-help-chip.l3{background:linear-gradient(135deg,#fde047,#facc15)}
  .rpd-help-chip.l4{background:linear-gradient(135deg,#dc2626,#991b1b)}
  /* Help view swap */
  #rpdHelpBodyM{display:none}
  .rpd-modal.is-help #rpdGridM{display:none}
  .rpd-modal.is-help #rpdHelpBodyM{display:block}
  .rpd-modal.is-help .rpd-levels-head{display:none}
  .rpd-modal.is-help #rpdHelpBtnM{display:none}
  .rpd-modal.is-help .rpd-actions{display:none}

  /* Mobile Activate CTA: animated border + interactions */
  .rpd-modal .rpd-apply-m{
    width:100%; height:48px; border-radius:999px; border:2px solid transparent; position:relative;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    background:linear-gradient(180deg,#4c8ff9,#1a73e8); color:#fff; font-weight:900; font-size:14px; box-shadow:0 10px 24px rgba(26,115,232,.35); cursor:pointer; overflow:visible;
  }
  /* rotating border overlay (compat no @property) */
  /* remove continuous rotating border; keep a subtle static ring */
  .rpd-modal .rpd-apply-m::before{ content:""; position:absolute; inset:-2px; border-radius:999px; padding:2px; background:
      linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.25));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; }
  .rpd-modal .rpd-apply-m:focus-visible{ outline:2px solid #fff; outline-offset:2px }
  .rpd-modal .rpd-apply-m:hover{ filter:brightness(1.06) }
  .rpd-modal .rpd-apply-m:active{ transform:translateY(1px) }
  .rpd-modal .rpd-apply-m[disabled]{
    background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.12));
    color:rgba(255,255,255,.75); box-shadow:none; cursor:not-allowed;
  }
  .rpd-modal .rpd-apply-m[disabled]::before{ display:none }
  .rpd-modal .rpd-apply-m .cta-ico{ width:16px; height:16px; display:block; order:0 }
  .rpd-modal .rpd-apply-m .cta-label{ display:inline-block; order:1 }
  .rpd-modal .rpd-apply-m .cta-ring{ position:absolute; inset:0; border-radius:999px; pointer-events:none; box-shadow:0 0 0 0 rgba(76,143,249,.65); animation:rpdRingOut .7s ease-out forwards }
  @keyframes rpdRingOut{ to{ box-shadow:0 0 0 18px rgba(76,143,249,0) } }
  .rpd-modal .rpd-apply-m .cta-rip{ position:absolute; left:0; top:0; width:14px; height:14px; border-radius:50%; background:rgba(255,255,255,.35); transform:translate(-50%,-50%) scale(0); pointer-events:none; filter:blur(.2px); animation:rpdRipple .6s ease-out forwards }
  @keyframes rpdRipple{ to{ transform:translate(-50%,-50%) scale(18); opacity:0 } }
}

@media (max-width:768px) and (pointer:coarse){
  .rpd-lock-section.is-unlocked #rpdLevels{display:none!important}
  .rpd-modal{pointer-events:none}
  .rpd-modal.in{pointer-events:auto}
}

@media (prefers-reduced-motion: reduce){
  .rpd-modal,.rpd-modal-overlay{transition:none}
}

/* Desktop help button + modal (hidden on mobile) */
@media (min-width:769px){
  .rpd-levels-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
  /* Desktop inline heading: make it larger and readable on red */
  .rpd-lock-section .rpd-levels-head .rpd-title{display:flex;align-items:center;gap:8px}
  .rpd-lock-section .rpd-title-ico{font-size:18px}
  .rpd-lock-section.is-unlocked .rpd-levels-head .rpd-title{font-size:20px;font-weight:900;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25)}
  .rpd-lock-section.is-unlocked .rpd-title-ico{font-size:20px}
  .rpd-help-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 10px;border-radius:999px;cursor:pointer;border:0;
    background:linear-gradient(180deg,#4c8ff9 0%, #1a73e8 100%);color:#fff;font-weight:800;box-shadow:0 6px 16px rgba(26,115,232,.30), inset 0 0 0 2px #fff}
  .rpd-help-btn:hover{filter:brightness(1.06)}
  .rpd-help-btn:active{transform:scale(.98)}
  .rpd-help-btn:focus-visible{outline:2px solid #fff; outline-offset:2px}
  .rpd-help-btn .help-svg{display:block;width:18px;height:18px}
  .rpd-help-btn .help-svg .q{fill:#fff}
  .rpd-help-btn .help-label{font:700 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;white-space:nowrap}
  .rpd-help-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:99996}
  .rpd-help-overlay.in{opacity:1;pointer-events:auto}
  .rpd-help-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);opacity:0;z-index:99997;width:min(92vw, 560px);border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#2563eb,#7c3aed);border:1px solid rgba(255,255,255,.18);box-shadow:0 25px 50px -12px rgba(0,0,0,.25);color:#fff;isolation:isolate;transition:opacity .18s ease, transform .22s ease}
  .rpd-help-modal.in{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .rpd-help-modal{pointer-events:none}
  .rpd-help-modal.in{pointer-events:auto}
  .rpd-help-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
  .rpd-help-title{font-weight:900;font-size:18px;display:flex;align-items:center;gap:10px}
  .rpd-help-title .ico{font-size:22px}
  .rpd-help-body{padding:8px 16px 16px}
  /* Desktop help uses the same namespaced blocks as mobile */
  .rpd-help-modal .rpd-help-body .rpd-h-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
  .rpd-help-modal .rpd-h-header-left{display:flex;align-items:center;gap:12px}
  .rpd-help-modal .rpd-h-ico-wrap{background-color:rgba(255,255,255,.2);border-radius:50%;padding:8px}
  .rpd-help-modal .rpd-h-icon{width:24px;height:24px;color:#fff}
  .rpd-help-modal .rpd-h-title{color:#fff;font-size:18px;font-weight:700;margin:0}
  .rpd-help-modal .rpd-h-content{display:flex;flex-direction:column;gap:14px;color:#fff}
  .rpd-help-modal .rpd-h-explain{background-color:rgba(255,255,255,.10);border-radius:12px;padding:14px}
  .rpd-help-modal .rpd-h-levels{background-color:rgba(234,179,8,.20);border:1px solid rgba(250,204,21,.30);border-radius:12px;padding:14px}
  .rpd-help-modal .rpd-h-levels-title{font-weight:600;color:rgb(254,240,138);margin-bottom:6px;font-size:20px}
  .rpd-help-modal .rpd-h-levels-desc{color:rgba(253,224,71,.90);font-size:14px}
  .rpd-help-modal .rpd-h-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .rpd-help-modal .rpd-h-card{border-radius:12px;padding:12px}
  .rpd-help-modal .rpd-h-card--timer{background-color:rgba(96,165,250,.30);border:1px solid rgba(147,197,253,.40)}
  .rpd-help-modal .rpd-h-card--extends{background-color:rgba(196,181,253,.30);border:1px solid rgba(196,181,253,.40)}
  .rpd-help-modal .rpd-h-card-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .rpd-help-modal .rpd-h-card-ico{width:20px;height:20px;color:rgb(239,246,255)}
  .rpd-help-modal .rpd-h-card-title{font-weight:800;color:rgb(239,246,255);font-size:14px}
  .rpd-help-modal .rpd-h-card-desc{font-size:12px;color:rgb(239,246,255);font-weight:600;line-height:1.25}
  .rpd-help-modal .rpd-h-ok{width:100%;background-color:#fff;color:#7c3aed;border:none;border-radius:12px;padding:12px 16px;font-weight:700;margin-top:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px}
  .rpd-help-modal .rpd-h-ok:hover{background-color:rgba(255,255,255,.9)}
  .rpd-help-modal .rpd-h-ok-ico{width:20px;height:20px}
  /* Hide legacy desktop list UI when rpd-h-* is present */
  .rpd-help-modal .rpd-help-list{display:none}

  /* Inline levels (desktop): mirror mobile emphasis and spacing */
  .rpd-lock-section .rpd-level-card{justify-content:flex-start;text-align:left}
  .rpd-lock-section .rpd-level-card .rpd-l-name{font-size:18px;font-weight:900;line-height:1.1;margin-bottom:8px}
  .rpd-lock-section .rpd-level-card .rpd-measures{grid-template-columns:16ch minmax(0,1fr); column-gap:18px}
  .rpd-lock-section .rpd-level-card .rpd-measures > .measure:nth-child(2){ text-align:left }
  .rpd-lock-section .rpd-level-card .measure .value{font-size:14px;font-weight:700;white-space:nowrap}
  .rpd-lock-section .rpd-level-card .measure .label{font-size:11px;opacity:.9}

  /* Inline levels (desktop): mirror mobile color set per level */
  .rpd-lock-section .rpd-level-card.l1{background:linear-gradient(135deg,#ec4899,#9333ea)}
  .rpd-lock-section .rpd-level-card.l2{background:linear-gradient(135deg,#0284c7,#0369a1)}
  .rpd-lock-section .rpd-level-card.l3{background:linear-gradient(135deg,#fb923c,#ea580c)}
  .rpd-lock-section .rpd-level-card.l4{background:linear-gradient(135deg,#7f1d1d,#991b1b)}

  /* Inline levels (desktop): make selected summary button stand out more */
  .rpd-lock-section.has-selection .rpd-summary .rpd-selection{
    height:52px; font-size:16px; font-weight:900;
    box-shadow:0 12px 28px rgba(239,68,68,.40), 0 0 0 4px rgba(255,255,255,.20) inset;
  }
  .rpd-lock-section.has-selection .rpd-summary .rpd-selection::after{
    box-shadow:0 0 0 0 rgba(239,68,68,.75); animation:rpdSelGlow 1.2s ease-out infinite;
  }

  /* Inline levels (desktop): match mobile red background when unlocked */
  .rpd-lock-section.is-unlocked{
    background:linear-gradient(135deg,#dc2626,#b91c1c); color:#fff;
    border:1px solid rgba(255,255,255,.18); box-shadow:0 8px 30px rgba(0,0,0,.28);
  }

  /* Warning (desktop): match mobile help/modal styling */
  .rpd-lock-section .rpd-warning{
    margin:18px 16px 14px; padding:12px 14px; border-radius:12px;
    background:rgba(153,27,27,0.55); border:1px solid rgba(248,113,113,0.35);
    color:#fff; font-weight:900; letter-spacing:.01em; backdrop-filter:blur(10px);
  }
  .rpd-lock-section .rpd-warning .rpd-w-ico{font-size:22px;margin-right:8px;vertical-align:middle;line-height:1}
}
@media (max-width:768px){ .rpd-help-btn{display:none!important} }