:root{--p700:#064e3b;--p600:#059669;--p500:#10b981;--p50:#ecfdf5;--ink:#111827;--muted:#6b7280;--warn:#f59e0b}
    *{box-sizing:border-box; font-family:'Cairo', sans-serif;}
    body{color:var(--ink);background:#f8fafc;margin:0;scroll-behavior:smooth;}
    .ge-step{display:none !important;min-height:100vh;width:100%;}
    .ge-step.ge-active{display:flex !important;flex-direction:column;align-items:center;justify-content:center;animation:fadeIn 0.5s ease-out;}
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .ge-brand{background:linear-gradient(135deg,var(--p700),var(--p600));color:#fff;}
    .ge-card{background:#fff;border:1px solid #e5e7eb;border-radius:1.5rem;padding:1.5rem;margin:0.5rem;box-shadow:0 10px 25px -5px rgba(0,0,0,0.1);}
    @media (min-width: 768px) { .ge-card { border-radius:2.5rem; padding:2rem; margin:1rem; } }
    .ge-kpi{display:inline-flex;gap:8px;background:var(--p50);color:var(--p700);border:1px solid var(--p500);padding:8px 16px;border-radius:1rem;font-weight:800;margin:4px;}
    .ge-bipolar{height:20px;background:#e5e7eb;border-radius:999px;position:relative;overflow:hidden;margin:10px 0;}
    .ge-barA{height:100%;background:linear-gradient(90deg,#10b981,#059669);float:right;transition:width 1s ease-in-out;}
    .ge-barB{height:100%;background:linear-gradient(90deg,#f59e0b,#fbbf24);float:left;transition:width 1s ease-in-out;}
    .ge-title{font-weight:900;color:var(--p700);}
    .ge-section{border:1px solid #e5e7eb;background:#fff;border-radius:1.5rem;padding:1.5rem;margin:1rem 0;}
    @media (min-width: 768px) { .ge-section { border-radius:2.5rem; padding:2rem; margin:2rem 0; } }
    .ge-verbal-p{white-space:pre-wrap;line-height:1.8;background:#fff;border:1px solid #e5e7eb;border-radius:1.5rem;padding:1.5rem;margin:1rem 0;box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);}
    .ge-btn-primary{background:var(--p600);color:#fff;padding:1rem 2rem;border-radius:1.5rem;font-weight:900;transition:all 0.3s;box-shadow:0 10px 15px -3px rgba(5,150,105,0.3);border:none;cursor:pointer;}
    .ge-btn-primary:hover{background:var(--p700);transform:translateY(-2px);}
    .ge-btn-secondary{background:#fff;color:var(--p700);padding:1rem 2rem;border-radius:1.5rem;font-weight:900;border:2px solid var(--p600);cursor:pointer;}
    
    .ge-roadmap-card b {
        display: block;
        margin-bottom: 8px;
        line-height: 1.4;
    }
    .ge-roadmap-card p {
        margin-top: 4px;
        line-height: 1.6;
    }
    /* WordPress integration (confirmed in scope): the course's own
       featured image, shown above the program name when a Tutor LMS
       course is linked (image is simply absent otherwise -- no layout
       change to unlinked cards). */
    .ge-roadmap-card-img {
        width: 100%;
        height: 170px;
        object-fit: contain;
        background: #f3f4f6;
        border-radius: 0.75rem;
        margin-bottom: 12px;
    }

    /* User feedback (confirmed in scope): this plugin had no @page rule
       at all -- Chrome falls back to its own larger default print
       margins, leaving less usable height per page and making a
       near-empty trailing page more likely whenever content sits just
       past a page boundary. Matches the same setting already shipped in
       the career-interest plugin. */
    @page { size: A4; margin: 12mm; }

    @media print {
      /* BUG FIX (confirmed in scope, same fix already shipped in the
         career-interest plugin): the printed report was including the
         WordPress theme's own header/nav/footer -- everything outside this
         plugin's own wrapper -- since the print rule only ever hid this
         plugin's own welcome/name/instr/quiz steps. This hides literally
         everything on the page, then re-shows only this widget's own
         wrapper and its descendants -- a standard "print only this
         element" technique that works regardless of the theme/page
         builder the shortcode is dropped into. */
      body * { visibility:hidden !important; }
      #ge-personality-app, #ge-personality-app * { visibility:visible !important; }

      /* User feedback (confirmed in scope): visibility:hidden above keeps
         header/footer text off the page, but the invisible elements still
         occupy their layout space, leaving a large blank gap at the top
         of page 1. This reclaims that space -- display:none on every
         direct child of body that doesn't contain our widget -- without
         reintroducing the position:absolute content-clipping risk from
         before (it only ever removes *siblings*, never repositions the
         widget itself). :has() is well supported in the Chrome print
         engine this relies on. Kept as a second layer alongside the
         visibility rule above (not a replacement for it): if a theme
         nests the shortcode more than one level deep and a sibling at a
         deeper level isn't caught here, the visibility rule still
         guarantees it never actually shows, just possibly with a smaller
         leftover gap. */
      body > *:not(#ge-personality-app):not(:has(#ge-personality-app)) { display:none !important; }

      .ge-btn-primary, .ge-btn-secondary, #welcome, #name, #instr, #quiz { display:none !important; }
      #result { display:block !important; }

      /* BUG FIX (confirmed in scope): .ge-step (and .ge-step.ge-active)
         force min-height:100vh plus vertical flex-centering -- meant for
         the on-screen single-viewport steps (welcome/name/instr/quiz),
         never overridden for #result specifically before. In print, this
         could force at least one viewport-height's worth of space and
         vertically center content within it, which is a plausible
         contributor to the trailing near-empty page reported after
         everything else here was already tried. Print never needs a
         forced full-viewport height or centering -- content should just
         flow from the top, exactly as tall as it actually is. */
      #result { min-height:auto !important; justify-content:flex-start !important; }

      /* User feedback (confirmed in scope): nothing in this plugin had any
         break-inside rule at all, so a card could get sliced across a
         page boundary mid-paragraph or mid-bar. Keeps each atomic unit
         (a domain's bar-chart card, one verbal-description paragraph,
         one roadmap course card, one role's name+bar row) together on a
         single page -- never the larger .ge-section/.ge-tier-frame around
         them, which can be long enough that forcing it whole onto one
         page would leave large blank gaps instead. */
      .ge-card, .ge-verbal-p, .ge-roadmap-card, .ge-tier-frame > .mb-5 {
        break-inside: avoid;
        page-break-inside: avoid;
      }

      /* User feedback (confirmed in scope): a roadmap priority header
         ("أولوية ثانية" etc.) could land alone at the bottom of a page
         while every one of its course cards flowed to the next page,
         leaving a labeled section with nothing under it and a stranded
         label above a blank gap on the next page. Same fix already
         shipped for h2/h3 in the career-interest plugin -- keeps the
         header glued to what follows it. */
      .ge-tier-header-box { break-after: avoid; page-break-after: avoid; }

      /* User feedback (confirmed in scope): the button row's own padding
         (py-10) was left in the DOM even though the buttons inside it are
         hidden for print, occasionally pushing a nearly-empty trailing
         page onto the end of the PDF. */
      .ge-actions-row { display:none !important; }
      html, body { height:auto !important; min-height:0 !important; background:#fff !important; }
      #ge-personality-app, #result, .ge-step { background:#fff !important; }
      .ge-section, .ge-card, .ge-verbal-p { box-shadow:none !important; }
      #ge-personality-app, #result { padding-bottom:0 !important; margin-bottom:0 !important; }
      #result > *:last-child { margin-bottom:0 !important; padding-bottom:0 !important; }

      /* User feedback (confirmed in scope): trims each section/card's own
         margin a little for print only (screen keeps the normal, more
         spacious margin) -- reclaims a bit more usable height per page on
         top of the @page fix above, further reducing how often content
         ends up spilling just past a page boundary. */
      .ge-section, .ge-tier-frame { margin:0.5rem 0 !important; }
    }
    /* User feedback (confirmed in scope, same fix already shipped in the
       career-interest plugin): the logo should repeat on every printed
       page. Hidden on screen; position:fixed makes Chrome's print engine
       repeat it on every page of the PDF. Placed as a direct child of the
       app wrapper in the template (not inside #welcome, unlike
       .ge-logo-corner) so it survives #welcome's own display:none above. */
    /* !important here (confirmed in scope, bug fix): some WordPress
       themes/page builders ship a global "img { display:block
       !important; }" reset. Without !important on this rule too, that
       theme rule can win (same specificity tie-break: both !important,
       but this class selector still needs !important to actually compete)
       and the logo -- full-size, unconstrained, no print media active --
       shows up floating on screen above the widget. */
    .ge-print-logo { display:none !important; }
    @media print {
      .ge-print-logo { display:block !important; position:fixed; top:6mm; left:6mm; width:30px; height:30px; object-fit:contain; z-index:9999; }
    }
    .ge-logo-corner{position:absolute;top:1.25rem;right:1.25rem;width:56px;height:56px;z-index:10;}
    @media (min-width: 768px) { .ge-logo-corner{top:2rem;right:2rem;width:72px;height:72px;} }
    .ge-num-box{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:2px solid #e5e7eb;border-radius:0.6rem;font-weight:800;cursor:pointer;transition:all .15s ease;background:#fff;font-size:1rem;color:#374151;}
    .ge-num-box:hover{border-color:#9ca3af;}
    .ge-num-box.ge-active-green{background:#059669;border-color:#059669;color:#fff;}
    .ge-num-box.ge-active-orange{background:#ff7101;border-color:#ff7101;color:#fff;}
    .ge-num-boxes-row{display:flex;gap:6px;justify-content:center;margin-top:0.75rem;}
    /* Responsiveness (confirmed in scope): the 6 rating boxes (0-5) per
       side are a fixed 38px on the original design -- on a narrow phone
       (~320-375px) 6 boxes + gaps + card padding no longer fit on one
       line and wrap/overflow. Shrinks them at the same breakpoint the
       rest of the layout already uses (Tailwind's own md: prefixes kick
       in at 768px) so they always fit in a single row. */
    @media (max-width:480px) {
      .ge-num-box{width:29px;height:29px;font-size:.78rem;border-radius:.45rem;}
      .ge-num-boxes-row{gap:4px;}
    }

    /* WordPress integration additions below (confirmed in scope): guest
       gating, the disabled-print/subscribe UI, and the "previous result"
       popup. None of this existed in the original v13 file. */

    /* Scopes the modal overlay below to just this widget's own area
       (position:absolute + inset:0) instead of the whole browser
       viewport -- avoids covering unrelated page content a theme/page
       might place above the shortcode. */
    #ge-personality-app { position: relative; }

    .ge-locked-section { position:relative; margin:1rem 0; }
    .ge-locked-content { filter:blur(7px); user-select:none; pointer-events:none; }
    .ge-lock-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; text-align:center; padding:1rem; background:rgba(255,255,255,.65); border-radius:1.5rem; z-index:5; }
    .ge-lock-icon { font-size:1.8rem; line-height:1; }
    .ge-lock-overlay p { margin:0; font-weight:800; color:var(--ink); max-width:22rem; }
    .ge-subscribe-btn { display:inline-flex; align-items:center; justify-content:center; background:#ff7101; color:#fff; font-weight:900; border-radius:1.25rem; padding:.85rem 1.6rem; text-decoration:none; transition:.2s; }
    .ge-subscribe-btn:hover { background:#e0630a; transform:translateY(-1px); }
    .ge-btn-primary.ge-btn-disabled,
    .ge-btn-primary.ge-btn-disabled:hover { opacity:.45; cursor:not-allowed; background:var(--p600); transform:none; }

    .ge-modal-overlay { position:absolute; inset:0; min-height:100%; z-index:9999; background:rgba(17,24,39,.55); display:flex; align-items:center; justify-content:center; padding:1rem; }

    /* BUG FIX (confirmed in scope): unlike the previous-result popup
       (shown on page load, so position:absolute keeps it from covering
       unrelated theme content above the shortcode), this modal is shown
       right after a guest finishes the quiz -- a direct response to their
       own action, on a very long results page. position:absolute here
       centered it within the *entire* tall results container, landing
       far below the person's actual scroll position (they had to scroll
       down to find it). position:fixed centers it in the current
       viewport instead, exactly where they already are. */
    #geGuestEmailModal.ge-modal-overlay, #geStartGuestModal.ge-modal-overlay { position:fixed; }
    /* Embedded in the Tutor dashboard iframe: no full-viewport steps (they would grow the iframe forever). */
    .ge-embed .ge-step { min-height:0 !important; padding-top:1rem; }
    .ge-embed .ge-modal-overlay { position:fixed; }
    .ge-modal-box { background:#fff; border-radius:1.5rem; padding:2rem; max-width:26rem; width:100%; text-align:center; box-shadow:0 20px 50px -20px rgba(0,0,0,.35); }

    @media print {
      /* User feedback (confirmed in scope): a guest can now use the print
         button (it used to be disabled for them entirely). The locked
         sections are excluded from the printout completely here -- not
         merely unblurred, which is what the previous rule here actually
         did (filter:none), a real gap: a guest manually printing (Ctrl+P,
         bypassing the old disabled button) would have gotten the "locked"
         content fully readable on paper. Safe unconditionally: a
         logged-in user's sections never carry the .ge-locked-section
         class in the first place (see GE_Personality::lock_wrap() in
         includes/class-ge-personality.php), so this can never hide
         anything for them. */
      /* Guest printout (user request): the locked sections are printed exactly as
         they look on screen -- blurred -- and a "اشترك الآن" button is added at
         the end. The lock overlay itself (its own subscribe button) is hidden
         so the blurred text shows through; the bottom button replaces it. */
      .ge-locked-section { display:block !important; }
      .ge-locked-content { filter:blur(7px) !important; -webkit-filter:blur(7px) !important; }
      .ge-lock-overlay, .ge-subscribe-btn, .ge-modal-overlay { display:none !important; }
      .ge-print-subscribe { display:block !important; text-align:center; padding:1rem 0 0; }
      .ge-print-subscribe p { margin:0 0 .6rem; font-weight:800; color:#111827; }
      .ge-print-subscribe a { display:inline-block !important; background:#ff7101; color:#fff !important; font-weight:900; border-radius:1.25rem; padding:.85rem 2.2rem; text-decoration:none; font-size:1.15rem; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    }
  
    /* ---------------------------------------------------------------
       Mobile layout (phones, <= 767px). The test used to sit inside the
       theme's narrow page container with big empty side bands, tiny
       rating boxes, a logo overlapping the title, and full-screen-tall
       steps that left huge empty gaps. All rules here are scoped to
       small screens only; desktop is untouched.
       --------------------------------------------------------------- */
    @media screen and (max-width:767px) {
      /* Use the full phone width (break out of the theme's content padding). */
      html:not(.ge-embed) #ge-personality-app {
        width:auto; max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
        overflow-x:hidden; box-sizing:border-box;
      }
      /* Steps hug their content instead of forcing a full-height, vertically centred screen. */
      .ge-step { min-height:0; }
      .ge-step.ge-active { justify-content:flex-start; }
      #welcome.ge-step.ge-active { min-height:100vh; justify-content:flex-start; padding-bottom:2rem; }
      #quiz.ge-step, #name.ge-step, #instr.ge-step { padding:.75rem .5rem 1.5rem; }

      /* Logo: in the flow, centred, smaller -- no more overlap with the title. */
      .ge-logo-corner { position:static; display:block; margin:1.25rem auto .25rem; width:56px; height:56px; }
      #welcome > .max-w-6xl { padding:1rem 1rem 1.5rem; }
      #welcome h1 { font-size:2.1rem; line-height:1.25; }
      #welcome button[onclick*="showStep('name')"] { width:100%; font-size:1.2rem; padding:1rem 1.25rem; }

      /* Cards: full width, tighter padding. */
      .ge-card { margin:0; padding:1rem; width:100%; border-radius:1.25rem; }
      #quiz .ge-card { padding:1rem .85rem 1.25rem; }
      #quiz #progress-bar { transition:none; }
      #quiz .mb-12 { margin-bottom:1.25rem; }
      #quiz .mb-8 { margin-bottom:1rem; }
      #quiz .mt-12 { margin-top:1.25rem; }
      #quiz .gap-6 { gap:1rem; }
      #quiz #qa, #quiz #qb { min-height:0; font-size:1.15rem; margin-bottom:1rem; line-height:1.7; }
      #quiz .p-6 { padding:1rem; }

      /* Rating boxes: big, tappable, spread across the whole card width. */
      .ge-num-boxes-row { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-top:.5rem; }
      .ge-num-box { width:100%; height:46px; font-size:1.05rem; border-radius:.7rem; }

      /* Prev / Next: equal, comfortable buttons. */
      #quiz #prev, #quiz #next { flex:1; min-height:50px; padding:.75rem 1rem; font-size:1.1rem; }

      /* Results page spacing. */
      #result .max-w-5xl { padding:.5rem; }
      #result h2 { font-size:1.75rem; }
    }

    .ge-print-subscribe { display:none; }

    /* Guest: "send me a copy of my report" box next to print / subscribe. */
    .ge-guest-email { max-width:34rem; margin:0 auto 1.5rem; padding:1.1rem 1rem; border:2px dashed #10b981; border-radius:1.25rem; background:#ecfdf5; text-align:center; position:relative; }
    .ge-guest-email-title { margin:0 0 .75rem; font-weight:900; color:#064e3b; font-size:1.1rem; }
    .ge-guest-email-row { display:flex; gap:.6rem; align-items:stretch; }
    .ge-guest-email-row input[type=email] { flex:1; min-width:0; padding:.85rem 1rem; border:2px solid #a7f3d0; border-radius:1rem; font-size:16px; background:#fff; text-align:left; }
    .ge-guest-email-row input[type=email]:focus { outline:none; border-color:#059669; }
    .ge-guest-email-row .ge-btn-primary { padding:.85rem 1.4rem; white-space:nowrap; }
    .ge-guest-email small { display:block; margin-top:.7rem; color:#4b5563; line-height:1.7; }
    @media screen and (max-width:767px) {
      .ge-guest-email { margin:0 .75rem 1.25rem; }
      .ge-guest-email-row { flex-direction:column; }
      .ge-guest-email-row .ge-btn-primary { width:100%; min-height:50px; }
    }
    @media print { .ge-guest-email { display:none !important; } }