/* EssayCraft Pro v1.3 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ══ DIVI FULL-WIDTH BREAKOUT ══ */
#ecp-app {
    position: relative;
    left: 50%; right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    overflow-x: hidden;
    /* Kill all Divi parent constraints */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Kill Divi wrappers inside our app */
#ecp-app .et_pb_section,
#ecp-app .et_pb_row,
#ecp-app .et_pb_column,
#ecp-app .et_pb_text_inner,
#ecp-app .et_pb_module_inner { all: unset; display: contents; }

/* ══ RESET & TOKENS — LIGHT MODE DEFAULT ══ */
#ecp-app *, #ecp-app *::before, #ecp-app *::after { box-sizing: border-box; }
#ecp-app {
    --c-bg:        #f8fafc;
    --c-bg2:       #ffffff;
    --c-bg3:       #f1f5f9;
    --c-gold:      #b07d1e;
    --c-gold2:     #c9922b;
    --c-teal:      #0d7377;
    --c-teal2:     #14a9ae;
    --c-text:      #0f172a;
    --c-muted:     #334155;
    --c-dim:       #64748b;
    --c-border:    rgba(0,0,0,0.15);
    /* Light-mode specific field tokens */
    --c-field-bg:    #ffffff;
    --c-field-border: #b8c9db;
    --c-field-text:   #0f172a;
    --c-field-placeholder: #94a3b8;
    --r:         10px;
    --r-sm:      7px;
    --ff-head:   'Playfair Display', Georgia, serif;
    --ff-body:   'DM Sans', -apple-system, sans-serif;
    font-family: var(--ff-body);
    background:  var(--c-bg);
    color:       var(--c-text);
    line-height: 1.6;
    min-height:  100vh;
}

/* ══ DARK MODE ══ */
#ecp-app.ecp-dark {
    --c-bg:      #0d1526;
    --c-bg2:     #162035;
    --c-bg3:     #1e2d4a;
    --c-gold:    #c9922b;
    --c-gold2:   #f0b942;
    --c-teal:    #0d7377;
    --c-teal2:   #14a9ae;
    --c-text:    #e2e8f0;
    --c-muted:   #94a3b8;
    --c-dim:     #64748b;
    --c-border:  rgba(255,255,255,0.12);
    /* Dark-mode specific field tokens */
    --c-field-bg:    #1a2a42;
    --c-field-border: rgba(99,140,200,0.45);
    --c-field-text:   #e2ecf8;
    --c-field-placeholder: #4a6080;
}

/* ══ HEADER ══ */
.ecp-header {
    background: var(--c-bg2);
    border-bottom: 1px solid var(--c-border);
    position: sticky; top: 0; z-index: 9999;
    width: 100%;
}
.ecp-header-inner {
    max-width: 1320px; margin: 0 auto;
    padding: 13px 32px;
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
}
.ecp-logo { display: flex; align-items: center; gap: 11px; }
.ecp-logo-mark { font-size: 26px; }
.ecp-logo-title { font-family: var(--ff-head); font-size: 19px; color: var(--c-gold2); font-weight: 700; line-height: 1.1; }
.ecp-logo-sub   { font-size: 10px; color: var(--c-dim); text-transform: uppercase; letter-spacing: 0.6px; margin-top: 1px; }
.ecp-header-right { display: flex; align-items: center; gap: 12px; }
.ecp-credits-badge {
    display: flex; align-items: center; gap: 6px;
    background: rgba(201,146,43,0.14); border: 1px solid rgba(201,146,43,0.28);
    padding: 5px 13px; border-radius: 20px;
}
.ecp-credits-badge strong { font-family: var(--ff-head); font-size: 17px; color: var(--c-gold2); }
.ecp-credits-label { font-size: 11px; color: var(--c-muted); }
.ecp-plan-pill  { padding: 4px 11px; border-radius: 20px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.ecp-plan-free  { background: rgba(74,96,128,0.28); color: #8da6c0; border: 1px solid rgba(74,96,128,0.38); }
.ecp-plan-pro   { background: rgba(201,146,43,0.18); color: var(--c-gold2); border: 1px solid rgba(201,146,43,0.38); }
.ecp-plan-unlimited { background: rgba(13,115,119,0.18); color: var(--c-teal2); border: 1px solid rgba(13,115,119,0.38); }
.ecp-btn-signout { background: transparent; border: 1px solid var(--c-border); color: var(--c-muted); padding: 7px 14px; border-radius: var(--r-sm); cursor: pointer; font-family: var(--ff-body); font-size: 13px; transition: all .18s; }
.ecp-btn-signout:hover { background: var(--c-bg3); color: var(--c-text); }

/* ══ MY ACCOUNT BUTTON (header) ══ */
.ecp-btn-account {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--c-gold);
    color: #fff;
    border: none;
    padding: 9px 18px;
    border-radius: var(--r-sm);
    font-family: var(--ff-body);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .18s, transform .18s, box-shadow .18s;
    box-shadow: 0 4px 14px rgba(201,146,43,.35);
    white-space: nowrap;
}
.ecp-btn-account:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(201,146,43,.45); }
.ecp-btn-account:active { transform: translateY(0); }
.ecp-account-ico { font-size: 15px; line-height: 1; }

/* ══ MY ACCOUNT MODAL ══ */
.ecp-auth-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    /* The MODAL ITSELF scrolls. This guarantees the top of the dialog (close
       button + banner) is always reachable even when the form is taller than
       the visible viewport (e.g. mobile with the address bar showing). */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    /* THE CLIPPING FIX.
       Centring a scroll container's only child is the classic way to lose the
       top of it: once the child is taller than the container, plain `center`
       pushes the overflow off BOTH ends, and the part above the top edge is
       unreachable — no amount of scrolling brings it back. That is what was
       eating the free-essays banner and the close button on a short window.

       `safe center` centres while it fits and falls back to flex-start the
       moment it does not, so the top of the dialog is always reachable. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-content: safe center;

    padding: 20px;
    /* Room for the rounded corners to actually read as corners, plus notches
       and browser chrome on phones. */
    padding: max(26px, env(safe-area-inset-top)) 16px max(30px, env(safe-area-inset-bottom));
}
/* Browsers without the `safe` keyword drop the declaration above and would be
   left centring — pin them to the top instead. Clipped is worse than high. */
@supports not (justify-content: safe center) {
    .ecp-auth-modal { justify-content: flex-start; }
}
.ecp-auth-modal.hidden { display: none !important; }
.ecp-auth-backdrop {
    /* Fixed (not absolute) so it always covers the whole viewport, even while
       the modal content scrolls underneath it. */
    position: fixed;
    inset: 0;
    background: rgba(8, 15, 30, .60);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    animation: ecpAuthFade .22s ease;
}
.ecp-auth-dialog {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    /* The container handles alignment now (see `safe center` above). Auto
       margins here would fight it and reintroduce the clipping. */
    margin: 0;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: var(--c-bg2);
    border: 1.5px solid var(--c-field-border);
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    animation: ecpAuthPop .26s cubic-bezier(.2,.8,.25,1);
}
.ecp-auth-close {
    /* Stays reachable in the top-right while the dialog scrolls */
    position: sticky;
    top: 4px;
    flex: 0 0 auto;
    align-self: flex-end;
    width: 34px;
    height: 34px;
    margin: 10px 10px 0;
    border: none;
    border-radius: 50%;
    background: var(--c-bg3);
    color: var(--c-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,.28);
    transition: background .15s, color .15s, transform .15s;
}
.ecp-auth-close:hover { background: var(--c-gold); color: #fff; transform: rotate(90deg); }
/* Auth card sits flat inside the modal (no sticky / double border / nested
   scroll) — the modal container handles all scrolling as one unit. */
.ecp-auth-modal .ecp-auth-card {
    position: static;
    top: auto;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    padding: 2px 26px 26px;
    overflow: visible;
}
@keyframes ecpAuthFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ecpAuthPop  { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
body.ecp-modal-open { overflow: hidden; }

@media (max-width: 480px) {
    .ecp-auth-modal {
        padding: 10px 10px;
        padding-top: max(10px, env(safe-area-inset-top));
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }
    .ecp-auth-dialog { width: 100%; border-radius: 14px; }
    .ecp-auth-modal .ecp-auth-card { padding: 2px 16px 20px; }
    /* 16px inputs stop iOS Safari from auto-zooming (which shifts the layout
       and can push the top of the modal off-screen). */
    .ecp-auth-modal input { font-size: 16px; }
    .ecp-auth-urgency { margin-bottom: 14px; }
    .ecp-auth-tabs { margin-bottom: 16px; }
    .ecp-btn-account { padding: 8px 14px; font-size: 13px; }
}

/* ══ LANDING PAGE ══ */
.ecp-landing {
    display: block;
    max-width: 1160px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 44px) clamp(16px, 3vw, 32px) clamp(32px, 5vw, 60px);
    overflow-x: clip;
}
.ecp-landing-hero {
    padding-right: 0;
}
/* Center the hero intro so it reads as a composed, balanced hero rather than
   sprawling edge-to-edge now that the auth card lives in a modal. */
.ecp-landing-hero > .ecp-trust-badge {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* ── Trust badge ── */
.ecp-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-bg3);
    border: 1.5px solid var(--c-teal);
    color: var(--c-teal);
    padding: 6px 16px;
    border-radius: 24px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 22px;
    letter-spacing: .2px;
}
.ecp-trust-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74,222,128,.7);
    flex-shrink: 0;
    animation: ecp-pulse-dot 2s infinite;
}
@keyframes ecp-pulse-dot {
    0%,100% { box-shadow: 0 0 6px rgba(74,222,128,.7); }
    50%      { box-shadow: 0 0 14px rgba(74,222,128,.3); }
}

/* ── Headline ── */
.ecp-h1 {
    font-family: var(--ff-head);
    font-size: clamp(26px, 4vw, 46px);
    font-weight: 800;
    color: var(--c-text);
    line-height: 1.12;
    margin-bottom: 16px;
    letter-spacing: -.5px;
    text-align: center;
}
.ecp-h1-accent {
    background: linear-gradient(90deg, var(--c-gold2) 0%, var(--c-teal2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}
.ecp-hero-p {
    font-size: 15.5px;
    color: var(--c-muted);
    line-height: 1.75;
    margin: 0 auto 22px;
    max-width: 620px;
    text-align: center;
}
.ecp-hero-p strong { color: var(--c-text); }

/* ── Audience flags ── */
.ecp-audience-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 18px;
}
.ecp-audience-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--c-bg3);
    border: 1px solid var(--c-border);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
    color: var(--c-muted);
    font-weight: 500;
    transition: border-color .18s;
}
.ecp-audience-item:hover { border-color: rgba(201,146,43,.3); color: var(--c-text); }
.ecp-audience-flag { font-size: 16px; line-height: 1; }

/* ── Feature pills ── */
.ecp-feature-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
    max-width: 860px;
    margin: 0 auto 26px;
}
.ecp-feature-pills span,
.ecp-pill-green {
    background: rgba(13,115,119,.08);
    border: 1px solid rgba(13,115,119,.28);
    border-radius: 20px;
    padding: 4px 11px;
    font-size: 11px;
    color: #047857;
    font-weight: 600;
    white-space: nowrap;
}
#ecp-app.ecp-dark .ecp-feature-pills span,
#ecp-app.ecp-dark .ecp-pill-green {
    background: rgba(74,222,128,.07);
    border-color: rgba(74,222,128,.2);
    color: #86efac;
}

/* ══════════════════════════════════════════════════════════════
   MODERN HERO — two-column: copy + CTA / live product preview
══════════════════════════════════════════════════════════════ */
.ecp-landing-hero { position: relative; }

/* Decorative gradient backdrop */
.ecp-hero-bg {
    position: absolute;
    inset: -40px 0 auto 0;
    height: 640px;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.ecp-blob { position: absolute; border-radius: 50%; filter: blur(72px); }
.ecp-blob-gold {
    width: 440px; height: 440px; top: -120px; right: 3%;
    background: radial-gradient(circle, rgba(240,185,66,.50), transparent 70%);
}
.ecp-blob-teal {
    width: 400px; height: 400px; top: 40px; left: -70px;
    background: radial-gradient(circle, rgba(20,169,174,.38), transparent 70%);
}
#ecp-app.ecp-dark .ecp-blob-gold { background: radial-gradient(circle, rgba(240,185,66,.30), transparent 70%); }
#ecp-app.ecp-dark .ecp-blob-teal { background: radial-gradient(circle, rgba(20,169,174,.28), transparent 70%); }

/* Grid */
.ecp-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    padding: clamp(26px, 4vw, 56px) 0 clamp(22px, 3vw, 38px);
    animation: ecpHeroIn .6s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes ecpHeroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.ecp-hero-copy { text-align: left; }
.ecp-hero-copy .ecp-h1 { text-align: left; margin-bottom: 18px; }
.ecp-hero-copy .ecp-hero-p { text-align: left; margin: 0 0 26px; max-width: 520px; }

/* CTAs */
.ecp-hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ecp-cta-primary {
    display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 13px 32px; border: none; border-radius: 13px; cursor: pointer;
    background: linear-gradient(135deg, var(--c-gold2), var(--c-gold));
    color: #24170a;
    box-shadow: 0 10px 28px rgba(201,146,43,.42);
    transition: transform .18s, box-shadow .18s, filter .18s;
}
.ecp-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(201,146,43,.52); filter: brightness(1.04); }
.ecp-cta-primary:active { transform: translateY(0); }
.ecp-cta-main { font-size: 17px; font-weight: 800; letter-spacing: .2px; }
.ecp-cta-sub  { font-size: 11px; font-weight: 600; opacity: .82; }
.ecp-cta-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 700; color: var(--c-text);
    text-decoration: none; padding: 10px 4px; border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.ecp-cta-ghost:hover { color: var(--c-gold); border-bottom-color: var(--c-gold); }

.ecp-hero-social { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--c-muted); flex-wrap: wrap; }
.ecp-stars { color: #f5b301; letter-spacing: 2px; font-size: 15px; }
.ecp-hero-social strong { color: var(--c-text); }

/* ── Product preview mockup (the signature element) ── */
.ecp-hero-preview { position: relative; z-index: 1; }
.ecp-mock {
    background: var(--c-bg2);
    border: 1px solid var(--c-field-border);
    border-radius: 16px;
    box-shadow: 0 30px 64px rgba(15,23,42,.22);
    overflow: hidden;
    transform: perspective(1300px) rotateY(-7deg) rotateX(2deg);
    transition: transform .45s ease;
}
.ecp-hero-preview:hover .ecp-mock { transform: perspective(1300px) rotateY(-2deg) rotateX(1deg); }
.ecp-mock-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: var(--c-bg3); border-bottom: 1px solid var(--c-field-border); }
.ecp-mock-dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.ecp-mock-dot:nth-child(1){ background:#ff5f57; }
.ecp-mock-dot:nth-child(2){ background:#febc2e; }
.ecp-mock-dot:nth-child(3){ background:#28c840; }
.ecp-mock-file { margin-left: 8px; font-size: 11.5px; color: var(--c-muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecp-mock-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ecp-mock-sec { display: flex; gap: 11px; align-items: flex-start; }
.ecp-mock-ic {
    width: 20px; height: 20px; border-radius: 50%; background: var(--c-teal); color: #fff;
    font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ecp-mock-ic.off { background: var(--c-bg3); color: var(--c-dim); border: 1px solid var(--c-field-border); }
.ecp-mock-txt { flex: 1; min-width: 0; }
.ecp-mock-h { font-size: 12.5px; font-weight: 700; color: var(--c-text); margin-bottom: 7px; }
.ecp-mock-h.dim { color: var(--c-dim); font-weight: 600; margin-bottom: 0; }
.ecp-mock-line { display: block; height: 7px; border-radius: 4px; background: var(--c-bg3); margin-bottom: 5px; }
.ecp-mock-line.w90 { width: 90%; } .ecp-mock-line.w80 { width: 80%; } .ecp-mock-line.w60 { width: 60%; }
.ecp-mock-tag { font-size: 10px; font-weight: 700; color: var(--c-teal2); background: rgba(20,169,174,.14); padding: 1px 8px; border-radius: 10px; margin-left: 4px; }
.ecp-mock-spin {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    border: 2.5px solid rgba(20,169,174,.25); border-top-color: var(--c-teal2);
    animation: ecpSpin .9s linear infinite;
}
.ecp-mock-sec.gen .ecp-mock-line { animation: ecpShimmer 1.6s ease-in-out infinite; }
.ecp-mock-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--c-field-border); font-size: 11px; color: var(--c-muted); }
.ecp-mock-safe { color: var(--c-teal); font-weight: 700; }
@keyframes ecpSpin { to { transform: rotate(360deg); } }
@keyframes ecpShimmer { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.ecp-mock-float {
    position: absolute; bottom: -22px; left: -28px;
    background: var(--c-bg2); border: 1px solid var(--c-field-border);
    border-radius: 12px; padding: 13px 16px; box-shadow: 0 20px 44px rgba(15,23,42,.26);
    animation: ecpFloat 4.5s ease-in-out infinite;
}
.ecp-mock-float-t { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--c-dim); font-weight: 800; margin-bottom: 9px; }
.ecp-mock-crit { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--c-text); font-weight: 600; margin-bottom: 6px; }
.ecp-mock-crit:last-child { margin-bottom: 0; }
.ecp-mock-crit span { color: #fff; background: var(--c-teal); width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; }
@keyframes ecpFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Supported-everywhere strip */
.ecp-hero-strip { margin: 6px 0 32px; }

/* ── Closing CTA band ── */
.ecp-final-cta {
    text-align: center;
    max-width: 920px;
    margin: 6px auto 0;
    padding: clamp(32px, 5vw, 54px) 24px;
    border-radius: 22px;
    background: linear-gradient(135deg, #0d7377 0%, #123049 70%, #0f172a 100%);
    box-shadow: 0 24px 56px rgba(13,115,119,.30);
}
.ecp-final-title { font-family: var(--ff-head); font-size: clamp(24px, 3.6vw, 36px); font-weight: 800; color: #fff; margin-bottom: 10px; letter-spacing: -.3px; }
.ecp-final-sub { color: rgba(255,255,255,.82); font-size: 15px; margin-bottom: 24px; }
.ecp-cta-lg { padding: 16px 44px; }
.ecp-cta-lg .ecp-cta-main { font-size: 18px; }

/* ── Hero responsive ── */
@media (max-width: 900px) {
    .ecp-hero-grid { grid-template-columns: 1fr; gap: 34px; }
    .ecp-hero-copy { text-align: center; }
    .ecp-hero-copy .ecp-h1, .ecp-hero-copy .ecp-hero-p { text-align: center; }
    .ecp-hero-copy .ecp-hero-p { margin-left: auto; margin-right: auto; }
    .ecp-hero-cta, .ecp-hero-social { justify-content: center; }
    .ecp-trust-badge { margin-left: auto; margin-right: auto; }
    .ecp-mock { transform: none; max-width: 440px; margin: 0 auto; }
    .ecp-hero-preview:hover .ecp-mock { transform: none; }
    .ecp-mock-float { left: auto; right: -6px; bottom: -18px; }
}
@media (max-width: 480px) {
    .ecp-mock-float { display: none; }
    .ecp-cta-primary { width: 100%; }
    .ecp-hero-cta { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .ecp-hero-grid, .ecp-mock-spin, .ecp-mock-sec.gen .ecp-mock-line, .ecp-mock-float { animation: none !important; }
    .ecp-cta-primary, .ecp-mock { transition: none !important; }
}

/* ── Stats bar ── */
.ecp-stats-row { display: none; } /* hide old one */
.ecp-stats-bar {
    display: flex;
    align-items: stretch;
    background: var(--c-bg2);
    border: 1.5px solid var(--c-field-border);
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 24px;
}
.ecp-stat-item {
    flex: 1;
    padding: 14px 10px;
    text-align: center;
    border-right: 1px solid var(--c-border);
}
.ecp-stat-item:last-child { border-right: none; }
.ecp-stat-item strong {
    display: block;
    font-family: var(--ff-head);
    font-size: 22px;
    font-weight: 800;
    color: var(--c-gold2);
    line-height: 1;
    margin-bottom: 4px;
}
.ecp-stat-item span {
    font-size: 10px;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    display: block;
}
.ecp-stat-div2 { display: none; }

/* ── Section divider label ── */
.ecp-section-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--c-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ecp-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-border);
}

/* ── Value grid ── */
.ecp-value-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
}
.ecp-value-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: var(--c-bg2);
    border: 1.5px solid var(--c-field-border);
    border-radius: var(--r-sm);
    padding: 14px;
    transition: all .18s;
}
.ecp-value-card:hover {
    border-color: var(--c-gold);
    background: rgba(201,146,43,.07);
    transform: translateY(-1px);
}
.ecp-value-icon { font-size: 22px; flex-shrink: 0; line-height: 1; margin-top: 1px; }
.ecp-value-title { font-size: 12px; font-weight: 700; color: var(--c-text); margin-bottom: 4px; }
.ecp-value-desc  { font-size: 11px; color: var(--c-muted); line-height: 1.55; }

/* ── Trained by experts block ── */
.ecp-trained-block {
    background: var(--c-bg2);
    border: 1.5px solid var(--c-field-border);
    border-radius: var(--r);
    padding: 20px;
    margin-bottom: 20px;
}
.ecp-trained-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(201,146,43,.2), rgba(240,185,66,.08));
    border: 1px solid rgba(201,146,43,.35);
    border-radius: 20px;
    padding: 4px 13px;
    font-size: 10px;
    font-weight: 800;
    color: var(--c-gold2);
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.ecp-trained-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--c-text);
    line-height: 1.3;
    margin-bottom: 8px;
}
.ecp-trained-sub {
    font-size: 12px;
    color: var(--c-muted);
    line-height: 1.65;
    margin-bottom: 16px;
}
.ecp-trained-sub strong { color: var(--c-text); }
/* Center section intros for a composed, consistent landing */
.ecp-trained-header { text-align: center; }
.ecp-trained-sub { max-width: 640px; margin-left: auto; margin-right: auto; }
.ecp-trained-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-bottom: 14px;
}
.ecp-trained-card {
    background: var(--c-bg3);
    border: 1.5px solid var(--c-field-border);
    border-radius: var(--r-sm);
    padding: 12px;
}
.ecp-trained-highlight {
    background: linear-gradient(135deg, rgba(201,146,43,.1), rgba(240,185,66,.04));
    border-color: rgba(201,146,43,.28);
}
.ecp-trained-icon { font-size: 18px; margin-bottom: 6px; line-height: 1; }
.ecp-trained-card-title { font-size: 11px; font-weight: 700; color: var(--c-text); margin-bottom: 4px; }
.ecp-trained-card-desc  { font-size: 11px; color: var(--c-muted); line-height: 1.5; }

/* Proofread upsell */
.ecp-proofread-cta {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: var(--c-bg3);
    border: 1.5px solid var(--c-field-border);
    border-left: 3px solid var(--c-teal);
    border-radius: var(--r-sm);
    padding: 13px 15px;
}
#ecp-app.ecp-dark .ecp-proofread-cta {
    background: rgba(13,115,119,.08);
    border-color: rgba(13,115,119,.25);
}
.ecp-proofread-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.ecp-proofread-title { font-size: 12px; font-weight: 700; color: var(--c-teal); margin-bottom: 3px; }
.ecp-proofread-desc  { font-size: 11px; color: var(--c-muted); line-height: 1.5; }

/* ── How it works ── */
.ecp-how-it-works {
    background: var(--c-bg2);
    border: 1.5px solid var(--c-field-border);
    border-radius: var(--r);
    padding: 18px 20px;
    margin-bottom: 18px;
}
.ecp-how-title {
    font-size: 10px;
    color: var(--c-dim);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 14px;
    font-weight: 700;
    text-align: center;
}
.ecp-steps { display: flex; flex-direction: column; gap: 12px; }
.ecp-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    color: var(--c-muted);
    line-height: 1.5;
}
.ecp-step-num {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--c-gold);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.ecp-step strong { color: var(--c-text); }

/* ── Testimonial ── */
.ecp-testimonial {
    background: var(--c-bg2);
    border: 1.5px solid var(--c-field-border);
    border-left: 3px solid var(--c-teal);
    border-radius: var(--r-sm);
    padding: 14px 18px;
    margin-bottom: 0;
}
#ecp-app.ecp-dark .ecp-testimonial {
    background: rgba(13,115,119,.07);
    border-color: rgba(13,115,119,.2);
}
.ecp-testimonial-stars { font-size: 13px; margin-bottom: 6px; }
.ecp-testimonial-text  { font-size: 13px; color: var(--c-text); line-height: 1.6; font-style: italic; margin-bottom: 6px; }
.ecp-testimonial-author { font-size: 11px; color: var(--c-muted); font-weight: 600; }

/* ── Auth card ── */
.ecp-landing-form { display: flex; align-items: flex-start; }
.ecp-auth-card {
    background: var(--c-bg2);
    border: 1.5px solid var(--c-field-border);
    border-radius: var(--r);
    padding: 26px 24px;
    width: 100%;
    box-shadow: 0 24px 64px rgba(0,0,0,.45);
    position: sticky;
    top: 20px;
}
.ecp-auth-urgency {
    background: rgba(201,146,43,.1);
    border: 1.5px solid rgba(201,146,43,.45);
    border-radius: var(--r-sm);
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-gold);
    text-align: center;
    margin-bottom: 18px;
    letter-spacing: .2px;
}
.ecp-auth-tabs { display: flex; border-bottom: 1.5px solid var(--c-field-border); margin-bottom: 20px; }
.ecp-auth-tab {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    /* These are <a> elements — anchors bring their own colour and underline,
       and Divi restyles links site-wide, so both are reset explicitly. */
    display: block;
    text-align: center;
    text-decoration: none !important;
    color: var(--c-muted);
    font-family: var(--ff-body);
    font-size: 14px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: all .18s;
    margin-bottom: -1px;
}
.ecp-auth-tab.active { color: var(--c-gold2); border-bottom-color: var(--c-gold); }
/* Reads as a link on hover without moving anything — the underline sits on the
   text, the tab indicator stays on the border. */
.ecp-auth-tab:hover { color: var(--c-gold2); text-decoration: underline !important; text-underline-offset: 3px; }
.ecp-auth-tab:focus-visible { outline: 2px solid var(--c-gold); outline-offset: -2px; border-radius: 6px; }
.ecp-tab-panel { display: none; }
.ecp-tab-panel.active { display: block; }
.ecp-or {
    text-align: center;
    color: var(--c-dim);
    font-size: 11px;
    margin: 10px 0;
    position: relative;
}
.ecp-or::before, .ecp-or::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 43%;
    height: 1px;
    background: var(--c-border);
}
.ecp-or::before { left: 0; }
.ecp-or::after  { right: 0; }
.ecp-terms {
    font-size: 11px;
    color: var(--c-dim);
    text-align: center;
    margin-top: 10px;
    line-height: 1.6;
}
.ecp-auth-footer {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1.5px solid var(--c-field-border);
}
.ecp-auth-footer span { font-size: 11px; color: var(--c-muted); }
.ecp-auth-features {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1.5px solid var(--c-field-border);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ecp-auth-feat { font-size: 11px; color: var(--c-text); font-weight: 500; }

/* ── Disclaimer ── */
.ecp-disclaimer {
    font-size: 10px;
    color: var(--c-dim);
    text-align: center;
    line-height: 1.6;
    margin-top: 20px;
    padding: 12px 16px;
    border-top: 1px solid var(--c-border);
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
}

/* ══ LANDING RESPONSIVE ══ */

/* Stack to single column when auth card can't fit */
@media (max-width: 760px) {
    .ecp-landing {
        grid-template-columns: 1fr;
    }
    .ecp-auth-card { position: static; max-width: 100%; }
    .ecp-landing-form { justify-content: center; }
}

/* 900px — stack vertically */
@media (max-width: 900px) {
    .ecp-landing {
        grid-template-columns: 1fr;
        padding: 28px 20px 40px;
        gap: 32px;
        align-items: start;
    }
    .ecp-auth-card { position: static; max-width: 520px; }
    .ecp-landing-form { justify-content: center; }
    .ecp-h1 { font-size: 34px; }
    .ecp-hero-p { max-width: 100%; }
}

/* 600px — large phone */
@media (max-width: 600px) {
    .ecp-landing { padding: 20px 16px 32px; gap: 24px; }
    .ecp-h1 { font-size: 28px; letter-spacing: -.3px; }
    .ecp-hero-p { font-size: 14px; }
    .ecp-trust-badge { font-size: 11px; padding: 5px 12px; }
    .ecp-audience-row { gap: 6px; }
    .ecp-audience-item { font-size: 11px; padding: 4px 10px; }
    .ecp-audience-flag { font-size: 14px; }
    .ecp-feature-pills { gap: 6px; }
    .ecp-pill-green,
    .ecp-feature-pills span { font-size: 10px; padding: 3px 9px; }
    .ecp-stats-bar { flex-wrap: wrap; }
    .ecp-stat-item {
        flex: 0 0 50%;
        border-bottom: 1px solid var(--c-border);
    }
    .ecp-stat-item:nth-child(even) { border-right: none; }
    .ecp-stat-item:nth-last-child(-n+2) { border-bottom: none; }
    .ecp-stat-item strong { font-size: 20px; }
    .ecp-value-grid { grid-template-columns: 1fr; gap: 8px; }
    .ecp-trained-grid { grid-template-columns: 1fr; gap: 8px; }
    .ecp-trained-block { padding: 16px; }
    .ecp-how-it-works { padding: 14px 16px; }
    .ecp-step { font-size: 12px; }
    .ecp-testimonial { padding: 12px 14px; }
    .ecp-testimonial-text { font-size: 12px; }
    .ecp-auth-card { padding: 20px 16px; }
    .ecp-proofread-cta { flex-direction: column; gap: 8px; }
    .ecp-disclaimer { padding: 12px 16px; font-size: 9px; }
}

/* 480px — standard phone */
@media (max-width: 480px) {
    .ecp-h1 { font-size: 24px; }
    .ecp-landing { padding: 16px 12px 28px; }
    .ecp-auth-card { padding: 18px 14px; }
    .ecp-trained-title { font-size: 15px; }
    .ecp-stat-item strong { font-size: 18px; }
    .ecp-feature-pills { gap: 5px; }
}

/* 380px — small phone */
@media (max-width: 380px) {
    .ecp-h1 { font-size: 22px; }
    .ecp-pill-green,
    .ecp-feature-pills span { font-size: 10px; padding: 3px 8px; }
    .ecp-auth-tab { font-size: 13px; }
}

/* ══ FORM FIELDS ══ */
.ecp-field { margin-bottom: 15px; }
.ecp-field label { display: block; font-size: 11px; font-weight: 600; color: #8da6c0; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.ecp-field label em { font-style: normal; font-size: 10px; color: var(--c-dim); text-transform: none; letter-spacing: 0; }
.ecp-field input,
.ecp-field textarea,
.ecp-field select {
    width: 100%;
    background: var(--c-field-bg);
    border: 1.5px solid var(--c-field-border);
    border-radius: var(--r-sm); padding: 10px 13px;
    color: var(--c-field-text); font-family: var(--ff-body); font-size: 14px;
    transition: border-color .18s, box-shadow .18s;
    -webkit-appearance: none; appearance: none;
    box-sizing: border-box;
}
.ecp-field input::placeholder,
.ecp-field textarea::placeholder { color: var(--c-field-placeholder); }
.ecp-field input:focus,
.ecp-field textarea:focus,
.ecp-field select:focus {
    outline: none; border-color: var(--c-gold);
    box-shadow: 0 0 0 3px rgba(201,146,43,0.15);
    background: var(--c-field-bg);
}
.ecp-field select option {
    background: var(--c-bg2);
    color: var(--c-field-text);
}
.ecp-field textarea { resize: vertical; min-height: 80px; }
.ecp-note { font-size: 11px; color: var(--c-gold); margin-top: 5px; }
.req { color: var(--c-gold); }
.ecp-row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; }

/* ══ BUTTONS ══ */
.ecp-btn-primary, .ecp-btn-gold, .ecp-btn-ghost {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; padding: 12px; border-radius: var(--r-sm);
    border: none; cursor: pointer; font-family: var(--ff-body);
    font-size: 14px; font-weight: 600; transition: all .18s;
    margin-bottom: 8px; line-height: 1;
}
.ecp-btn-primary { background: var(--c-bg2); color: var(--c-text); border: 1.5px solid var(--c-field-border); }
.ecp-btn-primary:hover { background: var(--c-teal); }
.ecp-btn-gold { background: var(--c-gold); color: #0d1526; }
.ecp-btn-gold:hover { background: var(--c-gold2); }
.ecp-btn-ghost { background: transparent; color: var(--c-muted); border: 1px solid var(--c-border); }
.ecp-btn-ghost:hover { background: var(--c-bg3); color: var(--c-text); }
.ecp-btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px 20px; border-radius: var(--r-sm); background: #fff; color: #3c4043; border: 1px solid #dadce0; cursor: pointer; font-size: 14px; font-family: var(--ff-body); font-weight: 500; transition: background .15s, box-shadow .15s; letter-spacing: .01em; }
.ecp-btn-google:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.ecp-btn-google:active { background: #f1f3f4; }
.ecp-btn-txt { } .ecp-btn-load { display: none; }
.ecp-btn-primary.loading .ecp-btn-txt  { display: none; }
.ecp-btn-primary.loading .ecp-btn-load { display: inline; }
.ecp-btn-sm { padding: 7px 13px; border-radius: var(--r-sm); background: var(--c-bg2); border: 1.5px solid var(--c-field-border); color: var(--c-text); cursor: pointer; font-size: 12px; font-family: var(--ff-body); font-weight: 500; transition: background .15s; }
.ecp-btn-sm:hover { background: var(--c-bg3); }
.ecp-btn-sm-ghost { background: transparent; color: var(--c-muted); }

/* Messages */
.ecp-msg {
    margin-top: 12px;
    padding: 12px 15px;
    border-radius: var(--r-sm);
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 600;
    border-left: 4px solid transparent;
}
/* Light mode (default): dark ink on a solid soft tint — high contrast on the white card */
.ecp-msg.success { background: #d3f3ee; border: 1px solid #7fcfc4; border-left: 4px solid #0d7377; color: #063f3c; }
.ecp-msg.error   { background: #fbe0e0; border: 1px solid #f0a8a8; border-left: 4px solid #dc2626; color: #8a1717; }
/* Dark mode: light text on a solid deep tint */
#ecp-app.ecp-dark .ecp-msg.success { background: #0f3b38; border: 1px solid #1c625d; border-left: 4px solid #14a9ae; color: #b8f5ea; }
#ecp-app.ecp-dark .ecp-msg.error   { background: #3d1618; border: 1px solid #7a2b2e; border-left: 4px solid #ef4444; color: #fecaca; }
.hidden { display: none !important; }

/* ── Forgot-password flow ── */
.ecp-auth-links { text-align: center; margin-top: 12px; }
.ecp-link {
    color: var(--c-gold2);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease;
}
.ecp-link:hover { border-bottom-color: var(--c-gold2); }
.ecp-forgot-head { text-align: center; margin-bottom: 20px; }
.ecp-forgot-emoji { font-size: 34px; line-height: 1; }
.ecp-forgot-head h3 {
    margin: 8px 0 6px;
    font-family: var(--ff-head);
    font-size: 19px;
    color: var(--c-gold2);
    font-weight: 700;
}
.ecp-forgot-head p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--c-muted, #8da6c0);
}

/* ══ DASHBOARD ══ */
.ecp-dashboard { display: grid; grid-template-columns: 210px 1fr; gap: 22px; max-width: 1320px; margin: 0 auto; padding: 28px 28px; }
.ecp-sidebar { background: var(--c-bg2); border: 1px solid var(--c-border); border-radius: var(--r); padding: 14px; position: sticky; top: 74px; }
.ecp-nav { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 12px; background: none; border: none; border-radius: var(--r-sm); cursor: pointer; color: var(--c-muted); font-family: var(--ff-body); font-size: 14px; font-weight: 500; transition: all .18s; text-align: left; margin-bottom: 3px; }
.ecp-nav:hover  { background: var(--c-bg3); color: var(--c-text); }
.ecp-nav.active { background: rgba(201,146,43,.14); color: var(--c-gold2); }
.ecp-nav-div    { border-top: 1px solid var(--c-border); margin: 12px 0; }

/* ── Desktop profile button inside sidebar ── */
.ecp-nav-user {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px 12px;
    background: none; border: none; border-radius: var(--r-sm);
    cursor: pointer; text-align: left; transition: background .18s;
}
.ecp-nav-user:hover { background: rgba(128,128,128,.1); }
.ecp-nav-user-info { flex: 1; min-width: 0; }
.ecp-nav-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--c-teal); display: flex; align-items: center; justify-content: center; font-family: var(--ff-head); font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; }
.ecp-nav-name   { font-size: 13px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecp-nav-email  { font-size: 10px; color: var(--c-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ecp-panels     { min-width: 0; }
.ecp-panel      { display: none !important; }
.ecp-panel.active { display: block !important; }
#ecp-panel-upgrade,
#ecp-panel-history { display: none !important; }
#ecp-panel-upgrade.active,
#ecp-panel-history.active { display: block !important; }
.ecp-panel-hdr  { margin-bottom: 10px; }
.ecp-panel-hdr h2 { font-family: var(--ff-head); font-size: 18px; color: var(--c-text); margin-bottom: 2px; }
.ecp-panel-hdr p  { color: var(--c-muted); font-size: 12px; margin: 0; }
.ecp-panel-hdr-titles { display: flex; flex-direction: column; gap: 1px; }
.ecp-panel-hdr-row { align-items: center; }

/* Generate layout */
.ecp-gen-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ecp-col-in, .ecp-col-out { background: var(--c-bg2); border: 1px solid var(--c-border); border-radius: var(--r); padding: 20px; }

/* Section buttons */
.ecp-sec-label { font-size: 11px; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; }
.ecp-sec-grid  { display: flex; flex-direction: column; gap: 8px; }
.ecp-sec-btn {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 12px 14px; background: var(--c-bg3);
    border: 1px solid var(--c-border); border-radius: var(--r-sm);
    cursor: pointer; transition: all .18s; text-align: left;
    font-family: var(--ff-body); color: var(--c-text);
}
.ecp-sec-btn:hover  { background: rgba(201,146,43,.09); border-color: rgba(201,146,43,.38); }
.ecp-sec-btn.active { background: rgba(201,146,43,.14); border-color: var(--c-gold); }
.si { font-size: 18px; flex-shrink: 0; }
.st { font-weight: 600; font-size: 13px; display: block; }
.sd { font-size: 11px; color: var(--c-muted); display: block; margin-top: 1px; }
.ecp-sec-full { background: rgba(13,115,119,.12) !important; border-color: rgba(13,115,119,.3) !important; }
.ecp-sec-full:hover { background: rgba(13,115,119,.2) !important; }

/* ══════════════════════════════════════════════
   SETUP WIZARD — step-by-step progressive layout
══════════════════════════════════════════════ */

/* Progress bar */
.ecp-setup-progress {
    height: 3px;
    background: var(--c-bg3);
    border-radius: 3px;
    margin-bottom: 12px;
    overflow: hidden;
}
.ecp-setup-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--c-teal), var(--c-gold2));
    border-radius: 3px;
    transition: width .5s ease;
}

/* Wizard step card */
.ecp-wizard-step {
    background: var(--c-bg2);
    border: 1.5px solid var(--c-field-border);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color .3s, box-shadow .3s, opacity .3s;
}

/* Locked — dimmed, not interactive */
.ecp-wizard-locked {
    opacity: .45;
    pointer-events: none;
    user-select: none;
}
.ecp-wizard-locked .ecp-wizard-header { cursor: default; }

/* Unlocked but not yet active — MUST override locked */
.ecp-wizard-unlocked,
.ecp-wizard-active,
.ecp-wizard-done {
    opacity: 1 !important;
    pointer-events: auto !important;
    user-select: auto !important;
}
.ecp-wizard-unlocked {
    border-color: rgba(201,146,43,.3);
}
.ecp-wizard-active {
    border-color: var(--c-teal2) !important;
    box-shadow: 0 0 0 2px rgba(20,169,174,.12);
}
.ecp-wizard-done {
    border-color: rgba(52,211,153,.35) !important;
}
.ecp-wizard-done .ecp-wizard-body {
    display: none;
}
/* Step 3 (References) collapses when done, same as other steps */
.ecp-wizard-done .ecp-wizard-header {
    cursor: pointer;
    padding-bottom: 14px;
}
.ecp-wizard-done .ecp-wizard-status::after {
    content: ' · click to edit';
    font-size: 10px;
    color: var(--c-dim);
    font-weight: 400;
}
.ecp-wizard-done:hover {
    border-color: rgba(52,211,153,.6) !important;
}

/* Header row */
.ecp-wizard-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    user-select: none;
}

/* Step number badge */
.ecp-wizard-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(201,146,43,.18);
    border: 2px solid rgba(201,146,43,.4);
    color: var(--c-gold2);
    font-size: 13px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .3s, border-color .3s;
}
.ecp-wizard-done .ecp-wizard-num {
    background: rgba(52,211,153,.15);
    border-color: rgba(52,211,153,.5);
    color: #34d399;
}
.ecp-wizard-done .ecp-wizard-num::before {
    content: '✓';
}
.ecp-wizard-done .ecp-wizard-num { font-size: 0; }
.ecp-wizard-done .ecp-wizard-num::before { font-size: 14px; }

.ecp-wizard-title {
    font-size: 14px; font-weight: 700;
    color: var(--c-text);
    flex: 1;
}
.ecp-wizard-locked .ecp-wizard-title { color: var(--c-muted); }

.ecp-wizard-status {
    font-size: 11.5px;
    flex-shrink: 0;
}
.ecp-wstatus-done  { color: #34d399; font-weight: 600; }
.ecp-wstatus-empty { color: var(--c-muted); }

/* Body */
.ecp-wizard-body {
    padding: 0 18px 18px;
}
.ecp-wizard-fields {
    margin-bottom: 16px;
}

/* Continue button */
.ecp-wizard-next-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--c-teal), #0a9296);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    transition: opacity .2s, transform .1s;
    letter-spacing: .02em;
}
.ecp-wizard-next-btn:not(:disabled):hover {
    opacity: .9; transform: translateY(-1px);
}
.ecp-wizard-next-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    background: var(--c-bg3);
    color: var(--c-muted);
    border: 1.5px dashed var(--c-field-border);
}

/* Launch row */
.ecp-wizard-launch {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--c-border);
    margin-top: 8px;
}

/* Abstract toggle row */
.ecp-abstract-toggle-row {
    background: var(--c-bg3);
    border: 1.5px solid var(--c-border);
    border-radius: 9px;
    padding: 12px 14px;
}

/* ── Required Abstract choice card ── */
.ecp-abstract-choice {
    background: var(--c-bg3);
    border: 2px solid var(--c-gold);
    border-radius: 11px;
    padding: 14px 15px;
    transition: box-shadow .2s, border-color .2s;
}
.ecp-abstract-choice.ecp-abstract-chosen {
    border-color: var(--c-teal2);
}
.ecp-abstract-choice.ecp-abstract-choice-nudge {
    animation: ecpAbstractShake .5s ease;
    box-shadow: 0 0 0 3px rgba(230,160,32,.35);
}
@keyframes ecpAbstractShake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
/* Spotlight pulse — draws the eye to the required abstract decision after the
   user clicks "Confirm References & Set Options" or tries to skip it. */
.ecp-abstract-choice.ecp-abstract-choice-spotlight {
    animation: ecpAbstractSpotlight 1.5s ease;
}
@keyframes ecpAbstractSpotlight {
    0%   { box-shadow: 0 0 0 0 rgba(230,160,32,.55);  border-color: var(--c-gold); }
    35%  { box-shadow: 0 0 0 6px rgba(230,160,32,.30); border-color: var(--c-gold); }
    70%  { box-shadow: 0 0 0 10px rgba(230,160,32,0);  border-color: var(--c-gold); }
    100% { box-shadow: 0 0 0 0 rgba(230,160,32,0);     border-color: var(--c-gold); }
}
.ecp-abstract-choice-head {
    display: flex; align-items: center; gap: 11px; margin-bottom: 12px;
}
.ecp-abstract-choice-icon { font-size: 22px; flex-shrink: 0; }
.ecp-abstract-choice-title { font-size: 14px; font-weight: 700; color: var(--c-text); }
.ecp-abstract-choice-sub { font-size: 11.5px; color: var(--c-muted); margin-top: 1px; }
.ecp-abstract-choice-btns {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.ecp-abstract-opt {
    position: relative;
    display: flex; flex-direction: column; gap: 3px;
    text-align: left;
    background: var(--c-bg2);
    border: 1.5px solid var(--c-border);
    border-radius: 9px;
    padding: 12px 13px 11px 13px;
    cursor: pointer;
    transition: border-color .16s, background .16s, box-shadow .16s;
}
.ecp-abstract-opt:hover { border-color: var(--c-teal2); background: rgba(13,115,119,.06); }
.ecp-abstract-opt-check {
    position: absolute; top: 10px; right: 11px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--c-teal); color: #fff;
    display: none; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.ecp-abstract-opt.selected {
    border-color: var(--c-teal); background: rgba(13,115,119,.12);
    box-shadow: 0 0 0 2px rgba(13,115,119,.18);
}
.ecp-abstract-opt.selected .ecp-abstract-opt-check { display: flex; }
.ecp-abstract-opt-main { font-size: 13px; font-weight: 700; color: var(--c-text); padding-right: 24px; }
.ecp-abstract-opt-desc { font-size: 11px; color: var(--c-muted); line-height: 1.4; }
.ecp-start-btn-locked {
    opacity: .55; cursor: not-allowed;
    filter: grayscale(.3);
}
@media(max-width:520px) {
    .ecp-abstract-choice-btns { grid-template-columns: 1fr; }
}

.ecp-abstract-toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    user-select: none;
}
.ecp-abstract-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.ecp-abstract-toggle-text strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text);
}
.ecp-abstract-toggle-desc {
    font-size: 11px;
    color: var(--c-muted);
    line-height: 1.4;
}

/* Toggle switch — inside abstract row */
.ecp-toggle-switch {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 24px;
    display: inline-block;
}
.ecp-toggle-switch input {
    opacity: 0; width: 0; height: 0; position: absolute;
}
.ecp-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--c-border);
    border: 1.5px solid var(--c-border);
    border-radius: 24px;
    transition: background .25s, border-color .25s;
    cursor: pointer;
}
/* Light mode — slider track needs visible contrast */
#ecp-app .ecp-toggle-slider { background: #cbd5e1; border-color: #94a3b8; }
#ecp-app.ecp-dark .ecp-toggle-slider { background: var(--c-bg3); border-color: var(--c-border); }
.ecp-toggle-slider::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: left .25s, background .25s;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.ecp-toggle-switch input:checked + .ecp-toggle-slider {
    background: var(--c-teal);
    border-color: var(--c-teal2);
}
.ecp-toggle-switch input:checked + .ecp-toggle-slider::before {
    left: calc(100% - 19px);
    background: #fff;
}

/* Start button */
.ecp-btn-start, .ecp-start-btn {
    width: 100%;
    padding: 13px 24px;
    background: linear-gradient(135deg, var(--c-gold), #e0a020);
    color: #0f172a;
    border: none; border-radius: 9px;
    font-size: 15px; font-weight: 800;
    cursor: pointer;
    transition: opacity .2s, transform .1s;
    text-align: center;
    box-shadow: 0 3px 14px rgba(176,125,30,.35);
}
#ecp-app.ecp-dark .ecp-btn-start,
#ecp-app.ecp-dark .ecp-start-btn { color: #0d1526; }
.ecp-btn-start:hover, .ecp-start-btn:hover {
    opacity: .9; transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(176,125,30,.45);
}


/* ── Panel header row with New Essay button ── */
.ecp-panel-hdr-row {
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.ecp-new-essay-btn {
    flex-shrink: 0; padding: 7px 14px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff; border: none; border-radius: 7px;
    font-size: 12px; font-weight: 700; cursor: pointer;
    letter-spacing: .03em; transition: opacity .2s, transform .1s;
    white-space: nowrap; box-shadow: 0 2px 10px rgba(124,58,237,.3);
}
.ecp-new-essay-btn:hover {
    opacity: .88; transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(124,58,237,.5);
}
@media (max-width: 500px) {
    .ecp-new-essay-btn { padding: 6px 10px; font-size: 11px; }
    .ecp-panel-hdr-row { gap: 8px; }
}

/* ── References collapsible header ── */
.ecp-refs-header {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; margin-bottom: 6px;
    padding: 6px 0;
}
.ecp-refs-header:hover label { color: var(--c-gold2); }
.ecp-refs-badge {
    font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 10px;
    background: var(--c-bg3); color: var(--c-muted);
    border: 1px solid var(--c-border);
    transition: all .2s;
}
.ecp-refs-badge-filled {
    background: rgba(13,115,119,.18); color: var(--c-teal2);
    border-color: rgba(13,115,119,.35);
}
.ecp-refs-chevron {
    font-size: 10px; color: var(--c-dim); margin-left: auto;
}

/* ── Essay Summary Preview Card ── */
.ecp-summary-card {
    display: none;
    background: var(--c-bg2);
    border: 1.5px solid rgba(13,115,119,.3);
    border-radius: 10px;
    margin-bottom: 14px;
    overflow: hidden;
}
#ecp-app.ecp-dark .ecp-summary-card { background: rgba(13,115,119,.06); }
.ecp-summary-header {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px; cursor: pointer; user-select: none;
}
.ecp-summary-header:hover { background: rgba(13,115,119,.08); }
.ecp-summary-icon  { font-size: 16px; }
.ecp-summary-title { flex: 1; font-size: 13px; font-weight: 700; color: var(--c-teal2); }
.ecp-summary-chevron { font-size: 11px; color: var(--c-muted); }
.ecp-summary-body  { padding: 0 16px 14px; }
.ecp-summary-grid  { display: flex; flex-direction: column; gap: 8px; }
.ecp-summary-row   { display: grid; grid-template-columns: 140px 1fr; gap: 8px; align-items: start; }
.ecp-sum-label { font-size: 11px; font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em; padding-top: 4px; }
.ecp-sum-val   { font-size: 12.5px; color: var(--c-text); line-height: 1.55; background: var(--c-bg3); border-radius: 6px; padding: 6px 10px; border: 1px solid var(--c-border); word-break: break-word; }
@media(max-width:600px) { .ecp-summary-row { grid-template-columns: 1fr; gap: 2px; } }

/* ── Clickable references summary row ── */
.ecp-sum-refs-clickable {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    cursor: pointer;
    border-color: var(--c-teal2);
    transition: background .18s, border-color .18s, box-shadow .18s;
}
.ecp-sum-refs-clickable:hover,
.ecp-sum-refs-clickable:focus {
    background: rgba(13,115,119,.10);
    border-color: var(--c-teal);
    box-shadow: 0 0 0 2px rgba(13,115,119,.15);
    outline: none;
}
.ecp-sum-refs-txt { font-weight: 600; }
.ecp-sum-refs-manage {
    font-size: 11px; font-weight: 700; color: var(--c-teal2);
    white-space: nowrap; flex-shrink: 0;
}

/* ── References Manager Modal ── */
/* Self-contained LIGHT card with explicit colours so it stays clear and
   high-contrast regardless of the app's light/dark theme.
   Fully FLUID-RESPONSIVE: text, padding and controls scale smoothly with
   clamp() between small phones and desktop — no fixed pixel jumps. */
body.ecp-modal-open { overflow: hidden; }

/* Give the refs modal its own overlay padding that shrinks on phones so the
   card can use the full width instead of leaving big black margins. */
#ecp-refs-modal.ecp-modal-overlay {
    padding: clamp(8px, 3vw, 24px);
    align-items: center;
    /* Dynamic viewport height handles mobile address-bar show/hide correctly */
    height: 100dvh;
    min-height: 100vh;
}

.ecp-refs-modal-box {
    background: #ffffff;
    border: 1px solid #d7dee6;
    border-radius: clamp(10px, 2.5vw, 14px);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.45);
}
.ecp-refs-modal-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: clamp(8px, 2vw, 12px);
    padding: clamp(12px, 3.5vw, 16px) clamp(12px, 3.5vw, 18px) clamp(9px, 2.5vw, 12px);
    border-bottom: 1px solid #eaeef2;
    background: #f7f9fb;
}
.ecp-refs-modal-head .ecp-modal-title {
    color: #0d7377;
    font-size: clamp(15px, 4vw, 17px);
    margin: 0;
    line-height: 1.25;
}
.ecp-refs-modal-sub {
    margin: 3px 0 0;
    font-size: clamp(11px, 3vw, 12px);
    color: #64748b;
}
.ecp-refs-modal-close {
    background: #eef2f6; border: 1px solid #d7dee6;
    color: #334155; line-height: 1;
    font-size: clamp(14px, 3.5vw, 15px);
    width: clamp(28px, 8vw, 30px); height: clamp(28px, 8vw, 30px);
    border-radius: 8px; cursor: pointer;
    flex-shrink: 0; transition: background .15s;
    display: flex; align-items: center; justify-content: center;
}
.ecp-refs-modal-close:hover { background: #dde4ea; }
.ecp-refs-modal-note {
    font-size: clamp(10.5px, 2.9vw, 11.5px); color: #7a5a12;
    background: #fdf6e3;
    border-left: 3px solid #e0a020;
    padding: clamp(7px, 2vw, 8px) clamp(10px, 3vw, 12px);
    margin: clamp(9px, 2.5vw, 11px) clamp(11px, 3.5vw, 14px) 0;
    border-radius: 6px; line-height: 1.5;
}
.ecp-refs-modal-list {
    flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: clamp(9px, 2.5vw, 11px) clamp(11px, 3.5vw, 14px);
    margin: 0;
    display: flex; flex-direction: column; gap: clamp(7px, 2vw, 8px);
    min-height: 60px;
}
.ecp-refs-modal-empty {
    text-align: center; color: #64748b;
    font-size: clamp(12px, 3.4vw, 13px);
    padding: clamp(20px, 6vw, 26px) 10px;
}
.ecp-refs-modal-item {
    display: flex; align-items: flex-start;
    gap: clamp(7px, 2vw, 9px);
    background: #f7f9fb;
    border: 1px solid #e3e9ee;
    border-radius: 8px;
    padding: clamp(8px, 2.4vw, 9px) clamp(9px, 2.8vw, 11px);
}
.ecp-refs-modal-item-num {
    flex-shrink: 0;
    width: clamp(20px, 5.5vw, 22px); height: clamp(20px, 5.5vw, 22px);
    border-radius: 50%;
    background: #0d7377; color: #ffffff;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(10px, 2.8vw, 11px); font-weight: 700;
}
.ecp-refs-modal-item-body { flex: 1; min-width: 0; }
.ecp-refs-modal-item-text {
    font-size: clamp(11.5px, 3.2vw, 12.5px); line-height: 1.5; color: #1e293b;
    word-break: break-word; overflow-wrap: anywhere; cursor: text;
}
.ecp-refs-modal-item-edit {
    width: 100%;
    font-size: clamp(11.5px, 3.2vw, 12.5px); line-height: 1.5;
    padding: clamp(6px, 2vw, 7px) clamp(8px, 2.4vw, 9px);
    border: 1.5px solid #0d9488; border-radius: 6px;
    background: #ffffff; color: #1e293b;
    resize: vertical; font-family: inherit;
    box-sizing: border-box;
}
.ecp-refs-modal-item-actions {
    display: flex; flex-direction: column;
    gap: clamp(4px, 1.4vw, 5px); flex-shrink: 0;
}
.ecp-refs-modal-item-actions button {
    background: #ffffff; border: 1px solid #d7dee6;
    border-radius: 6px;
    width: clamp(32px, 9vw, 30px); height: clamp(32px, 9vw, 30px);
    cursor: pointer;
    font-size: clamp(13px, 3.6vw, 14px); line-height: 1;
    transition: background .15s, border-color .15s;
    display: flex; align-items: center; justify-content: center;
}
.ecp-refs-modal-edit:hover   { background: #e6f5f5; border-color: #0d9488; }
.ecp-refs-modal-save         { background: #0d7377; color: #fff; border-color: #0d7377; }
.ecp-refs-modal-save:hover   { background: #0b5f62; }
.ecp-refs-modal-delete:hover { background: #fdecec; border-color: #dc3c3c; }
.ecp-refs-modal-add {
    display: flex; gap: clamp(6px, 2vw, 8px); align-items: stretch;
    padding: clamp(9px, 2.5vw, 11px) clamp(11px, 3.5vw, 14px);
    border-top: 1px solid #eaeef2;
    background: #f7f9fb;
}
.ecp-refs-modal-add textarea {
    flex: 1; min-width: 0;
    font-size: clamp(11.5px, 3.2vw, 12.5px);
    padding: clamp(7px, 2.2vw, 8px) clamp(8px, 2.6vw, 10px);
    border: 1px solid #d7dee6; border-radius: 7px;
    background: #ffffff; color: #1e293b; resize: vertical; font-family: inherit;
    box-sizing: border-box;
}
.ecp-refs-modal-add textarea::placeholder { color: #94a3b8; }
.ecp-refs-modal-add button {
    flex-shrink: 0; white-space: nowrap; align-self: flex-start;
    font-size: clamp(11.5px, 3.2vw, 13px);
}
.ecp-refs-modal-actions {
    padding: clamp(9px, 2.5vw, 11px) clamp(11px, 3.5vw, 14px) clamp(12px, 3.5vw, 15px);
    border-top: 1px solid #eaeef2;
    background: #f7f9fb;
}
.ecp-refs-modal-actions .ecp-btn-primary {
    width: 100%;
    background: #0d7377; color: #ffffff; border: 1.5px solid #0d7377;
    font-weight: 700;
    font-size: clamp(13px, 3.6vw, 15px);
    padding: clamp(10px, 2.8vw, 12px);
}
.ecp-refs-modal-actions .ecp-btn-primary:hover { background: #0b5f62; }
.ecp-refs-modal-add .ecp-btn-sm-teal {
    background: #0d7377; color: #fff; border: 1px solid #0d7377;
}
.ecp-refs-modal-add .ecp-btn-sm-teal:hover { background: #0b5f62; }

/* Phones: stack the add box, let action buttons sit in a row, use full height */
@media(max-width:600px) {
    .ecp-refs-modal-box { max-height: 92vh; }
    .ecp-refs-modal-item-actions { flex-direction: row; }
    .ecp-refs-modal-add { flex-direction: column; }
    .ecp-refs-modal-add button { align-self: stretch; }
}
/* Very small phones: drop the head to two lines cleanly */
@media(max-width:380px) {
    .ecp-refs-modal-head { flex-wrap: wrap; }
    .ecp-refs-modal-close { order: 2; }
}



.ecp-count-input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--c-bg2);
}
.ecp-count-dec, .ecp-count-inc {
    background: var(--c-bg3);
    border: none;
    color: var(--c-text);
    font-size: 16px;
    width: 32px;
    height: 36px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s;
    line-height: 1;
}
.ecp-count-dec:hover, .ecp-count-inc:hover { background: rgba(201,146,43,.18); }
.ecp-count-input {
    border: none !important;
    background: transparent !important;
    text-align: center;
    width: 44px !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
    -moz-appearance: textfield;
    padding: 0 !important;
}
.ecp-count-input::-webkit-outer-spin-button,
.ecp-count-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Unknown author — blocked result items ── */
.ecp-irg-result-item.ecp-author-blocked {
    opacity: .65;
    border-color: rgba(239,68,68,.25) !important;
    background: rgba(239,68,68,.04) !important;
}
.ecp-author-blocked-notice {
    font-size: 11.5px;
    color: #fca5a5;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.2);
    border-radius: 6px;
    padding: 6px 10px;
    margin: 6px 0;
}
.ecp-author-missing-badge {
    color: #fbbf24;
    font-size: 11px;
    font-weight: 600;
    background: rgba(251,191,36,.12);
    border: 1px solid rgba(251,191,36,.25);
    padding: 2px 7px;
    border-radius: 10px;
}
.ecp-add-blocked {
    opacity: .45 !important;
    cursor: not-allowed !important;
    background: rgba(239,68,68,.1) !important;
    border-color: rgba(239,68,68,.3) !important;
    color: #fca5a5 !important;
}
.ecp-blocked-count {
    color: #fca5a5;
    font-size: 11px;
}
.ecp-author-err {
    font-size: 12px;
    color: #fca5a5;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.22);
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 6px;
}

/* ── Cover page — required badge and validation states ── */
.ecp-cover-required-badge {
    display: inline-block;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    padding: 2px 9px; border-radius: 10px; margin-left: 8px;
    background: rgba(239,68,68,.15); color: #fca5a5;
    border: 1px solid rgba(239,68,68,.3);
    vertical-align: middle;
}
.ecp-cover-card-desc {
    font-size: 12.5px; color: var(--c-muted);
    margin: 4px 0 12px; line-height: 1.5;
}
.ecp-cover-card-required {
    border-color: rgba(239,68,68,.4) !important;
    box-shadow: 0 0 0 2px rgba(239,68,68,.1);
}
.ecp-cover-validation {
    margin: 8px 0 4px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.5;
}
.ecp-cover-val-err {
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.25);
    color: #fca5a5;
}
.ecp-cover-val-ok {
    background: rgba(13,115,119,.1);
    border: 1px solid rgba(13,115,119,.3);
    color: var(--c-teal2);
}

/* ── Cover style sync notice ── */
.ecp-cover-style-notice {
    padding: 10px 14px;
    border-radius: 7px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
}
.ecp-cover-style-notice.ecp-notice-info {
    background: rgba(13,115,119,.08);
    border: 1px solid rgba(13,115,119,.25);
    color: var(--c-teal2);
}
.ecp-cover-style-notice.ecp-notice-warn {
    background: rgba(255,152,0,.10);
    border: 1px solid rgba(255,152,0,.35);
    color: #e65100;
}

/* ── Wallet top-up card ── */
.ecp-wallet-card { background: var(--c-bg2); border: 1px solid var(--c-border); border-radius: var(--r); padding: 28px; margin-top: 4px; }
.ecp-wallet-rate-banner { background: rgba(13,115,119,.08); border: 1px solid rgba(13,115,119,.2); border-radius: 8px; padding: 10px 16px; font-size: 13px; color: var(--c-muted); margin-bottom: 20px; line-height: 1.6; }
.ecp-wallet-quick-picks { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.ecp-wallet-label { font-size: 13px; color: var(--c-muted); white-space: nowrap; }
.ecp-wallet-pick { background: var(--c-bg3); border: 1px solid var(--c-border); border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 700; color: var(--c-text); cursor: pointer; transition: all .2s; }
.ecp-wallet-pick span { font-size: 11px; font-weight: 400; color: var(--c-muted); display: block; }
.ecp-wallet-pick:hover, .ecp-wallet-pick.active { background: var(--c-teal); color: #fff; border-color: var(--c-teal); }
.ecp-wallet-pick.active span { color: rgba(255,255,255,.8); }
.ecp-wallet-input-row { margin-bottom: 20px; }
.ecp-wallet-input-label { display: block; font-size: 13px; color: var(--c-muted); margin-bottom: 8px; }
.ecp-wallet-input-wrap { display: flex; align-items: center; gap: 10px; }
.ecp-wallet-dollar { font-size: 20px; font-weight: 700; color: var(--c-gold2); }
.ecp-wallet-input { background: var(--c-bg3); border: 1px solid var(--c-border); border-radius: 8px; padding: 10px 14px; color: var(--c-text); font-size: 18px; font-weight: 700; width: 140px; }
.ecp-wallet-preview { font-size: 14px; color: var(--c-teal2); font-weight: 700; }
.ecp-wallet-topup-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, var(--c-teal), #0a5c60); color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; transition: opacity .2s; margin-bottom: 8px; }
.ecp-wallet-topup-btn:hover:not(:disabled) { opacity: .88; }
.ecp-wallet-topup-btn:disabled { opacity: .4; cursor: not-allowed; }
.ecp-wallet-secure { text-align: center; font-size: 12px; color: var(--c-dim); margin: 0; }
.ecp-wallet-status { padding: 10px 14px; border-radius: 8px; font-size: 13px; background: rgba(13,115,119,.08); border: 1px solid rgba(13,115,119,.2); color: var(--c-muted); margin-top: 16px; line-height: 1.6; }


.ecp-export-group { position: relative; }
.ecp-export-lock {
    display: block;
    width: 100%;
    padding: 9px 14px;
    margin-bottom: 8px;
    background: rgba(239,68,68,.08);
    border: 1px dashed rgba(239,68,68,.35);
    border-radius: 8px;
    font-size: 12.5px;
    color: #fca5a5;
    text-align: center;
    font-weight: 600;
}
.ecp-btn-locked {
    opacity: .4 !important;
    cursor: not-allowed !important;
    filter: grayscale(40%);
}

/* ── Email Essay button ── */
.ecp-email-btn {
    background: linear-gradient(135deg, #1a237e, #0d7377) !important;
    border-color: #0d7377 !important;
}
.ecp-email-btn:hover { filter: brightness(1.1); }

/* ── Email send status ── */
.ecp-email-status {
    margin-top: 10px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}
.ecp-email-success {
    background: rgba(13,115,119,.15);
    border: 1px solid rgba(13,115,119,.35);
    color: var(--c-teal2);
}
.ecp-email-warn {
    background: rgba(251,191,36,.1);
    border: 1px solid rgba(251,191,36,.3);
    color: #fcd34d;
}

/* ── Nav locked during generation ── */
.ecp-nav-locked {
    opacity: .4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ── Redo counter button states ── */
.ecp-regen-btn { min-width: 130px; transition: background .2s, color .2s; }
.ecp-redo-exhausted {
    opacity: .55 !important;
    cursor: not-allowed !important;
    background: rgba(239,68,68,.1) !important;
    border-color: rgba(239,68,68,.3) !important;
    color: #fca5a5 !important;
}

/* Redo exhausted: generations stay FULLY readable and editable.
   The "Redo limit reached" button + "All generations used" notice convey the cap;
   we no longer blur, dim, or block interaction with the text. */
.ecp-redo-locked {
    filter: none;
    pointer-events: auto;
    user-select: auto;
    opacity: 1;
}

/* Locked notice card */
.ecp-redo-locked-notice {
    margin-top: 14px;
    background: rgba(239,68,68,.07);
    border: 1px solid rgba(239,68,68,.25);
    border-radius: var(--r-sm);
    padding: 24px 20px;
    text-align: center;
}
.ecp-redo-locked-icon  { font-size: 32px; margin-bottom: 8px; }
.ecp-redo-locked-title { font-size: 15px; font-weight: 700; color: #fca5a5; margin-bottom: 6px; }
.ecp-redo-locked-msg   { font-size: 13px; color: var(--c-muted); margin-bottom: 16px; line-height: 1.6; }
.ecp-redo-locked-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── Top Next Bar ── */
.ecp-top-next-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--c-bg2);
    border: 1.5px solid var(--c-field-border);
    border-radius: var(--r-sm);
    padding: 10px 16px;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}
#ecp-app.ecp-dark .ecp-top-next-bar {
    background: rgba(13,115,119,.08);
    border-color: rgba(13,115,119,.25);
}
.ecp-top-next-hint {
    font-size: 13px;
    color: var(--c-text);
    font-weight: 500;
    flex: 1;
    min-width: 0;
}
.ecp-next-top-btn {
    display: flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    min-width: 160px;
    justify-content: center;
}
.ecp-next-arrow {
    font-size: 16px;
    transition: transform .25s;
}
.ecp-next-top-btn:hover .ecp-next-arrow {
    transform: translateX(4px);
}

/* ── Next button pulse animation (fires after generation completes) ── */
@keyframes ecp-next-glow {
    0%   { box-shadow: 0 0 0 0 rgba(13,115,119,.7), 0 0 0 0 rgba(13,115,119,.4); transform: scale(1); }
    40%  { box-shadow: 0 0 0 8px rgba(13,115,119,.2), 0 0 0 16px rgba(13,115,119,.08); transform: scale(1.04); }
    70%  { box-shadow: 0 0 0 12px rgba(13,115,119,.05), 0 0 0 24px rgba(13,115,119,0); transform: scale(1.02); }
    100% { box-shadow: 0 0 0 0 rgba(13,115,119,0); transform: scale(1); }
}
@keyframes ecp-next-bounce {
    0%, 100% { transform: translateY(0); }
    30%       { transform: translateY(-4px); }
    60%       { transform: translateY(-2px); }
}
.ecp-next-pulse {
    animation: ecp-next-glow 1.4s ease-out infinite !important;
    background: var(--c-teal) !important;
    border-color: var(--c-teal2) !important;
    color: #fff !important;
}
.ecp-next-pulse .ecp-next-arrow {
    animation: ecp-next-bounce .7s ease-in-out infinite;
}

/* ── Top Next Bar ── */
@media (max-width: 600px) {
    .ecp-top-next-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ecp-next-top-btn { width: 100%; }
}


/* ═══════════════════════════════════════════════════
   LOADING PANEL — rich colour-coded redesign
   ═══════════════════════════════════════════════════ */

/* Container */
.ecp-loading {
    text-align: center;
    padding: 36px 24px 32px;
    background: var(--c-bg2);
    border: 1.5px solid var(--c-field-border);
    border-radius: 14px;
    margin: 8px 0;
    position: relative;
    overflow: hidden;
}
#ecp-app.ecp-dark .ecp-loading {
    background: linear-gradient(160deg, rgba(13,115,119,.08) 0%, rgba(201,146,43,.04) 100%);
    border-color: rgba(13,115,119,.22);
}

/* Subtle animated shimmer background */
.ecp-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(20,169,174,.04) 50%, transparent 60%);
    animation: ecp-shimmer 2.8s ease-in-out infinite;
}
@keyframes ecp-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* Orb — bigger, more dramatic */
.ecp-orb {
    width: 62px; height: 62px;
    border-radius: 50%;
    margin: 0 auto 6px;
    background: conic-gradient(#f0b942, #14a9ae, #c9922b, #14a9ae, #f0b942);
    animation: ecp-spin 1.4s linear infinite;
    box-shadow: 0 0 24px rgba(20,169,174,.35), 0 0 48px rgba(201,146,43,.15);
    position: relative;
    z-index: 1;
}
.ecp-orb::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--c-bg2);
}
@keyframes ecp-spin { to { transform: rotate(360deg); } }

/* Section label above title */
.ecp-loading-section-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--c-bg3);
    color: var(--c-teal);
    border: 1.5px solid var(--c-teal);
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}
#ecp-app.ecp-dark .ecp-loading-section-badge {
    background: rgba(20,169,174,.14);
    color: var(--c-teal2);
    border-color: rgba(20,169,174,.3);
}

/* Main loading title */
.ecp-loading-txt {
    font-family: var(--ff-head);
    font-size: 16px;
    color: var(--c-text);
    margin-bottom: 6px;
    line-height: 1.5;
    position: relative;
    z-index: 1;
}
.ecp-loading-txt strong { color: var(--c-gold2); font-weight: 700; }
.ecp-loading-txt em     { color: var(--c-teal2); font-style: italic; }

/* Progress bar */
.ecp-loading-progress {
    width: 100%;
    max-width: 420px;
    height: 3px;
    background: var(--c-bg3);
    border-radius: 3px;
    margin: 12px auto 20px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.ecp-loading-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--c-teal), var(--c-gold2));
    width: 0%;
    transition: width 4s ease-out;
}

/* Stage list */
.ecp-stages {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-width: 580px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Each stage row */
.ecp-stage {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    color: var(--c-dim);
    padding: 9px 14px;
    border-radius: 10px;
    transition: all .4s ease;
    line-height: 1.55;
    text-align: left;
    border: 1.5px solid transparent;
}

/* Emoji icon — keep fixed width */
.ecp-stage-icon {
    flex-shrink: 0;
    font-size: 15px;
    width: 22px;
    text-align: center;
    margin-top: 1px;
    opacity: .5;
    transition: opacity .4s;
}

/* Stage text */
.ecp-stage-text { flex: 1; }

/* DONE — teal tick */
.ecp-stage.done {
    color: var(--c-teal);
}
.ecp-stage.done .ecp-stage-icon { opacity: 1; }

/* ACTIVE — gold glow card */
.ecp-stage.active {
    background: rgba(201,146,43,.1);
    border-color: rgba(201,146,43,.3);
    color: var(--c-gold);
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(201,146,43,.1);
}
#ecp-app.ecp-dark .ecp-stage.active {
    background: linear-gradient(135deg, rgba(201,146,43,.15) 0%, rgba(240,185,66,.08) 100%);
    color: #f5d07a;
}
.ecp-stage.active .ecp-stage-icon {
    opacity: 1;
    animation: ecp-icon-bounce .6s ease-in-out infinite alternate;
}
@keyframes ecp-icon-bounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-3px); }
}

/* Tip keyword highlighting inside stage text */
.ecp-stage-tip  { color: #92650a; font-weight: 700; }
.ecp-stage-warn { color: #b91c1c; font-weight: 600; }
.ecp-stage-good { color: #047857; font-weight: 600; }
#ecp-app.ecp-dark .ecp-stage-tip  { color: #fbbf24; }
#ecp-app.ecp-dark .ecp-stage-warn { color: #f87171; }
#ecp-app.ecp-dark .ecp-stage-good { color: #34d399; }

@media (max-width: 600px) {
    .ecp-loading { padding: 24px 14px; }
    .ecp-stage { font-size: 12px; padding: 8px 10px; }
}



/* Output — see full rules in OUTPUT section below */
.ecp-error-wrap { padding: 11px 14px; background: rgba(239,68,68,.08); border: 1.5px solid rgba(239,68,68,.4); border-radius: var(--r-sm); color: #dc2626; font-size: 13px; margin-top: 12px; }
#ecp-app.ecp-dark .ecp-error-wrap { background: rgba(239,68,68,.12); color: #fca5a5; }
.ecp-nudge { margin-top: 16px; background: rgba(201,146,43,.07); border: 1px solid rgba(201,146,43,.2); border-radius: var(--r-sm); padding: 14px; text-align: center; }
.ecp-nudge strong { color: var(--c-gold2); font-size: 13px; display: block; margin-bottom: 5px; }
.ecp-nudge p { color: var(--c-muted); font-size: 12px; margin-bottom: 10px; }
.ecp-loading-inline { color: var(--c-muted); padding: 24px; text-align: center; font-size: 14px; }

/* History */
.ecp-history-item {
    background: var(--c-bg2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    transition: border-color .18s, background .18s;
    margin-bottom: 10px;
}
.ecp-history-item:hover { border-color: rgba(201,146,43,.4); background: var(--c-bg3); }
.ecp-history-main  { flex: 1; min-width: 0; }
.ecp-history-title { font-weight: 600; font-size: 14px; color: var(--c-text); margin-bottom: 6px; line-height: 1.4; }
.ecp-history-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.ecp-section-chip  {
    font-size: 10px; font-weight: 600; padding: 2px 8px;
    border-radius: 10px; border: 1px solid;
}
.ecp-section-chip-done {
    background: rgba(13,115,119,.15); color: var(--c-teal2);
    border-color: rgba(13,115,119,.3);
}
.ecp-history-meta  { font-size: 11px; color: var(--c-muted); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ecp-history-model { font-size: 10px; background: var(--c-bg3); padding: 2px 7px; border-radius: 8px; color: var(--c-dim); border: 1px solid var(--c-border); }
.ecp-history-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; align-items: flex-end; }
.ecp-badge { padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; background: rgba(13,115,119,.18); color: var(--c-teal2); border: 1px solid rgba(13,115,119,.28); }

/* Pricing */
.ecp-pricing { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.ecp-price-card { background: var(--c-bg2); border: 1px solid var(--c-border); border-radius: var(--r); padding: 26px; position: relative; display: flex; flex-direction: column; }
.ecp-price-featured  { border-color: var(--c-gold); box-shadow: 0 0 28px rgba(201,146,43,.12); }
.ecp-price-unlimited { border-color: var(--c-teal); }
.ecp-price-pop { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--c-gold); color: var(--c-bg); padding: 3px 14px; border-radius: 20px; font-size: 10px; font-weight: 700; letter-spacing: 1px; white-space: nowrap; }
.ecp-price-name { font-family: var(--ff-head); font-size: 22px; color: var(--c-text); margin-bottom: 8px; }
.ecp-price-amt  { font-size: 34px; font-weight: 700; color: var(--c-gold2); margin-bottom: 4px; }
.ecp-price-amt span { font-size: 13px; color: var(--c-muted); font-weight: 400; }
.ecp-price-credits-badge { display: inline-block; background: rgba(13,115,119,.15); color: var(--c-teal2); border: 1px solid rgba(13,115,119,.25); border-radius: 20px; padding: 3px 14px; font-size: 12px; font-weight: 700; margin-bottom: 16px; }
.ecp-price-card ul { list-style: none; margin-bottom: 20px; padding: 0; flex: 1; }
.ecp-price-card li { padding: 6px 0; font-size: 13px; color: var(--c-muted); border-bottom: 1px solid var(--c-border); }
.ecp-price-card li:last-child { border-bottom: none; }
.ecp-current-plan { text-align: center; color: var(--c-dim); font-size: 12px; padding: 8px; }
/* Pay buttons */
.ecp-btn-pay { width: 100%; padding: 12px; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; margin-top: auto; background: var(--c-bg3); color: var(--c-text); border: 1px solid var(--c-border); transition: background .2s; }
.ecp-btn-pay:hover:not(:disabled) { background: var(--c-teal); color: #fff; }
.ecp-btn-pay:disabled { opacity: .45; cursor: not-allowed; }
.ecp-btn-pay.ecp-btn-gold { background: var(--c-gold); color: var(--c-bg); border-color: var(--c-gold); }
.ecp-btn-pay.ecp-btn-gold:hover:not(:disabled) { background: var(--c-gold2); }
.ecp-btn-pay.ecp-btn-primary { background: var(--c-teal); color: #fff; border-color: var(--c-teal); }
/* Section titles */
.ecp-pricing-section-title { font-size: 15px; font-weight: 700; color: var(--c-text); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.ecp-pricing-subtitle { font-size: 12px; font-weight: 400; color: var(--c-muted); }
.ecp-pricing-notice { background: rgba(255,152,0,.1); border: 1px solid rgba(255,152,0,.3); color: #e65100; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 18px; }
.ecp-price-free-row { border: 1px dashed var(--c-border); color: var(--c-muted); font-size: 13px; }
.ecp-price-free-row a { color: var(--c-teal2); }
/* Modal plan price */
.ecp-modal-plan-price { font-size: 14px; font-weight: 700; color: var(--c-gold2); margin: 2px 0; }

/* ══ RESPONSIVE ══ */
@media (max-width: 1100px) {
    .ecp-landing { grid-template-columns: 1fr 380px; padding: 36px 24px; }
    .ecp-landing-hero { padding-right: 40px; }
    .ecp-h1 { font-size: 38px; }
}
@media (max-width: 900px) {
    /* Landing: stack vertically */
    .ecp-landing { grid-template-columns: 1fr; padding: 28px 20px; gap: 32px; min-height: auto; align-items: start; }
    .ecp-landing-hero { padding-right: 0; }
    .ecp-landing-form { max-width: 480px; width: 100%; }
    .ecp-h1 { font-size: 32px; }
    /* Dashboard: sidebar top */
    .ecp-dashboard { grid-template-columns: 1fr; padding: 12px; gap: 10px; }

    /* Sidebar becomes two-row layout:
       Row 1: nav buttons side by side
       Row 2: full-width profile card */
    .ecp-sidebar {
        position: static;
        display: flex; flex-wrap: wrap;
        gap: 0; padding: 0;
        align-items: stretch;
        overflow: visible;
    }
    .ecp-sidebar::-webkit-scrollbar { display: none; }

    /* Nav buttons row — flex row, equal width */
    .ecp-sidebar > .ecp-nav {
        flex: 1; min-width: 72px;
        justify-content: center;
        padding: 10px 6px; font-size: 12px;
        margin-bottom: 0;
        border-radius: 0;
        border-bottom: 2px solid transparent;
    }
    .ecp-sidebar > .ecp-nav.active {
        border-bottom-color: var(--c-gold2);
        background: rgba(201,146,43,.1);
    }
    .ecp-sidebar > .ecp-nav:first-child { border-radius: var(--r-sm) 0 0 0; }
    .ecp-sidebar > .ecp-nav:nth-child(3) { border-radius: 0 var(--r-sm) 0 0; }

    /* Divider hidden */
    .ecp-nav-div { display: none; }

    /* Profile card — full width row below nav buttons */
    .ecp-nav-user {
        width: 100%; flex: 0 0 100%;
        padding: 10px 14px;
        border-top: 1px solid var(--c-border);
        border-radius: 0 0 var(--r-sm) var(--r-sm);
        background: var(--c-bg2);
        display: flex; align-items: center; gap: 10px;
    }
    .ecp-nav-user-info { display: flex !important; flex-direction: column; flex: 1; min-width: 0; }
    .ecp-nav-name   { font-size: 13px; }
    .ecp-nav-email  { font-size: 10px; }
    .ecp-profile-chevron { display: flex; font-size: 16px; }

    /* Show plan badge on mobile if it exists */
    .ecp-nav-user-plan {
        font-size: 9px; font-weight: 700; text-transform: uppercase;
        letter-spacing: .6px; color: var(--c-gold2);
        background: rgba(201,146,43,.15); border-radius: 10px;
        padding: 1px 6px; margin-top: 2px; display: inline-block; width: fit-content;
    }
    .ecp-gen-layout { grid-template-columns: 1fr; }
    .ecp-col-out { order: -1; }
    .ecp-col-in  { order:  1; }
    .ecp-pricing { grid-template-columns: 1fr; max-width: 400px; }
}
@media (max-width: 600px) {
    .ecp-header-inner { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
    .ecp-header-right { width: 100%; justify-content: space-between; }
    .ecp-credits-label { display: none; }
    .ecp-logo-sub { display: none; }
    .ecp-landing { padding: 20px 14px; gap: 24px; }
    .ecp-h1 { font-size: 26px; }
    .ecp-hero-p { font-size: 14px; }
    .ecp-stats-row { gap: 14px; }
    .ecp-stat strong { font-size: 22px; }
    .ecp-auth-card { padding: 20px 16px; }
    .ecp-col-in, .ecp-col-out { padding: 14px; }
    .ecp-sec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .ecp-sec-full { grid-column: 1 / -1; }
    .ecp-panel-hdr h2 { font-size: 20px; }
    .ecp-out-text { max-height: 340px; font-size: 12px; }
    .ecp-pricing { max-width: 100%; }
}
@media (max-width: 380px) {
    .ecp-h1 { font-size: 22px; }
    .ecp-sec-grid { grid-template-columns: 1fr; }
    .ecp-sec-full { grid-column: auto; }
    .ecp-nav { min-width: 72px; font-size: 11px; }
}

/* ══ MOBILE — Step tabs & section cards ══ */
@media (max-width: 768px) {
    /* Step tabs — scrollable row */
    .ecp-steps-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        padding-bottom: 6px;
        scrollbar-width: none;
    }
    .ecp-steps-bar::-webkit-scrollbar { display: none; }

    /* Section panels — full width */
    .ecp-step-panel { padding: 12px !important; }
    .ecp-panel-write { padding: 12px !important; }

    /* Section card header */
    .ecp-section-hdr {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .ecp-section-title { font-size: 16px !important; }

    /* Output text area */
    .ecp-out-text {
        font-size: 13px !important;
        padding: 14px !important;
        min-height: 150px !important;
        max-height: 400px !important;
    }

    /* Output header row */
    .ecp-out-hdr { flex-direction: column !important; align-items: flex-start !important; }
    .ecp-out-btns { width: 100%; justify-content: flex-end; }

    /* Top next bar */
    .ecp-top-next-bar { flex-wrap: wrap !important; gap: 6px !important; }

    /* Gen actions */
    .ecp-gen-actions { flex-wrap: wrap !important; gap: 8px !important; }
    .ecp-btn-generate { width: 100% !important; }

    /* Nav bar */
    .ecp-nav-bar { gap: 4px !important; }
    .ecp-nav { font-size: 11px !important; padding: 8px 10px !important; }
    .ecp-nav-icon { font-size: 14px !important; }

    /* Wizard fields */
    .ecp-wizard-fields input,
    .ecp-wizard-fields select,
    .ecp-wizard-fields textarea { font-size: 14px !important; }

    /* Preview */
    .ecp-preview-actions { flex-direction: column !important; }
    .ecp-preview-actions button { width: 100% !important; }
    .ecp-full-preview { font-size: 13px !important; padding: 14px !important; max-height: 500px !important; }

    /* Export group */
    .ecp-export-group { flex-direction: column !important; }
    .ecp-export-group button { width: 100% !important; }
}

@media (max-width: 480px) {
    /* step tabs auto-size via clamp() — no overrides needed */
    .ecp-section-title { font-size: 14px !important; }
    .ecp-out-text { font-size: 12px !important; }
}


.ecp-setup-grid { display:block; } /* replaced by wizard layout */
.ecp-section-card { background:var(--c-bg2); border:1.5px solid var(--c-field-border); border-radius:var(--r); padding:18px; margin-bottom:14px; color:var(--c-text); }
.ecp-sc-title { font-size:12px; font-weight:700; color:var(--c-gold2); text-transform:uppercase; letter-spacing:.8px; margin-bottom:14px; }
.ecp-pages-row {
    display: flex; align-items: center;
    gap: 10px; flex-wrap: wrap;
}
/* +/- stepper */
.ecp-pages-stepper {
    display: inline-flex; align-items: stretch;
    border: 1.5px solid var(--c-field-border);
    border-radius: 9px; overflow: hidden;
    background: var(--c-field-bg);
    flex-shrink: 0;
}
.ecp-pages-dec,
.ecp-pages-inc {
    background: var(--c-bg3);
    border: none; outline: none;
    color: var(--c-text);
    font-size: 18px; font-weight: 700;
    width: 38px; height: 42px;
    cursor: pointer; flex-shrink: 0;
    transition: background .15s, color .15s;
    display: flex; align-items: center; justify-content: center;
    line-height: 1; user-select: none;
}
.ecp-pages-dec:hover,
.ecp-pages-inc:hover { background: rgba(13,115,119,.15); color: var(--c-teal); }
.ecp-pages-dec:active,
.ecp-pages-inc:active { background: rgba(13,115,119,.28); }
.ecp-pages-stepper input[type="number"] {
    width: 52px; border: none !important;
    border-left: 1.5px solid var(--c-field-border) !important;
    border-right: 1.5px solid var(--c-field-border) !important;
    border-radius: 0 !important;
    background: var(--c-field-bg) !important;
    color: var(--c-field-text) !important;
    text-align: center; font-size: 16px; font-weight: 700;
    padding: 0 !important; height: 42px;
    -moz-appearance: textfield;
    outline: none; box-shadow: none !important;
}
.ecp-pages-stepper input[type="number"]::-webkit-outer-spin-button,
.ecp-pages-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ecp-pages-info {
    font-size: 12px; color: var(--c-muted);
    background: var(--c-bg3); padding: 6px 12px;
    border-radius: 20px; border: 1px solid var(--c-border);
    white-space: nowrap; font-weight: 500;
}
.ecp-ref-source-note { background:rgba(201,146,43,.08); border:1px solid rgba(201,146,43,.2); border-radius:var(--r-sm); padding:10px 13px; font-size:12px; color:var(--c-gold2); margin-bottom:12px; line-height:1.6; }
.ecp-note-inline { font-size:10px; color:var(--c-dim); text-transform:none; letter-spacing:0; font-weight:400; font-style:italic; }
.ecp-field-hint { display:block; font-size:10px; color:var(--c-teal2); margin-top:4px; font-style:italic; opacity:.85; }
.ecp-ref-count { background:rgba(13,115,119,.15); border:1px solid rgba(13,115,119,.3); border-radius:var(--r-sm); padding:8px 12px; font-size:12px; color:var(--c-teal2); margin-top:6px; }
.ecp-btn-start { width:100%; padding:15px; background:var(--c-gold); color:var(--c-bg); border:none; border-radius:var(--r); cursor:pointer; font-family:var(--ff-body); font-size:16px; font-weight:700; transition:all .18s; margin-top:8px; }
.ecp-btn-start:hover { background:var(--c-gold2); transform:translateY(-1px); }

/* ══ STEP PROGRESS BAR ══ */
/* ══ STEPS BAR — Beautiful icon tabs ══ */
/* ecp-steps-bar base defined in the step-tab block below */


/* ══ STEP TABS — fully fluid, zero breakpoints ══
   Uses flex:1 + overflow-x:auto so tabs share space equally
   and only scroll if the container is genuinely too narrow.
   Font/padding scale with font-size which is set in em below. */

.ecp-steps-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    margin-bottom: 10px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 12px 2px 6px;  /* extra top for bubble overflow */
    -webkit-overflow-scrolling: touch;
    position: relative;
    scrollbar-width: none;
    align-items: stretch;
}
.ecp-steps-bar::-webkit-scrollbar { display: none; }

/* Connector line */
.ecp-steps-bar::before {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0; height: 1px;
    background: var(--c-border);
    transform: translateY(-50%);
    z-index: 0; pointer-events: none;
}

/* Base tab — font-size drives ALL sizing via em */
.ecp-step-tab,
.ecp-steps-bar button.ecp-step-tab {
    /* Scale font with container: 10px floor, never above 12px */
    font-size: clamp(9px, 1.5cqi, 12px);
    flex: 1 1 0;          /* equal share, can shrink to 0 */
    min-width: 0;         /* allow shrinking below content size */
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .3em;
    padding: .55em .3em;
    background: var(--c-bg2);
    border: 1.5px solid var(--c-border);
    border-radius: .75em;
    margin: 0 1px;
    cursor: pointer;
    font-family: var(--ff-body);
    transition: all .22s ease;
    white-space: nowrap;
    outline: none;
    overflow: visible;         /* allow bubble to overflow top */
    -webkit-tap-highlight-color: transparent;
}

/* Number bubble */
.ecp-step-num {
    position: absolute; top: -6px; right: -5px;
    width: 1.5em; height: 1.5em;
    border-radius: 50%;
    background: var(--c-bg3); border: 1.5px solid var(--c-border);
    color: var(--c-dim);
    font-size: .8em; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    transition: all .22s; line-height: 1; z-index: 2;
}

/* Icon */
.ecp-step-icon {
    font-size: 1.5em; line-height: 1;
    transition: transform .22s ease; display: block; position: relative; z-index: 1;
}

/* Label */
.ecp-step-label {
    font-size: .85em; font-weight: 600; color: var(--c-muted);
    letter-spacing: 0; transition: color .22s;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
    position: relative; z-index: 1; line-height: 1.1;
}

/* Hover */
.ecp-step-tab:hover,
.ecp-steps-bar button.ecp-step-tab:hover {
    background: var(--c-bg3); border-color: var(--c-teal); transform: translateY(-1px);
}
.ecp-step-tab:hover .ecp-step-label,
.ecp-steps-bar button.ecp-step-tab:hover .ecp-step-label { color: var(--c-text); }
.ecp-step-tab:hover .ecp-step-icon,
.ecp-steps-bar button.ecp-step-tab:hover .ecp-step-icon { transform: scale(1.1); }

/* Active — pulsing gold glow */
.ecp-step-tab.active,
.ecp-steps-bar button.ecp-step-tab.active {
    background: linear-gradient(160deg, rgba(201,146,43,.22) 0%, rgba(240,185,66,.08) 100%);
    border-color: var(--c-gold2);
    box-shadow: 0 0 0 2px rgba(201,146,43,.25), 0 3px 14px rgba(201,146,43,.2);
    transform: translateY(-2px);
    animation: ecp-tab-pulse 2.2s ease-in-out infinite;
}
@keyframes ecp-tab-pulse {
    0%,100% { box-shadow: 0 0 0 2px rgba(201,146,43,.25), 0 3px 14px rgba(201,146,43,.2); }
    50%      { box-shadow: 0 0 0 4px rgba(201,146,43,.15), 0 5px 20px rgba(201,146,43,.28); }
}
.ecp-step-tab.active .ecp-step-label,
.ecp-steps-bar button.ecp-step-tab.active .ecp-step-label { color: var(--c-gold2); font-weight: 700; }
.ecp-step-tab.active .ecp-step-icon,
.ecp-steps-bar button.ecp-step-tab.active .ecp-step-icon {
    transform: scale(1.18); filter: drop-shadow(0 0 5px rgba(201,146,43,.65));
}
.ecp-step-tab.active .ecp-step-num,
.ecp-steps-bar button.ecp-step-tab.active .ecp-step-num {
    background: var(--c-gold2); border-color: var(--c-gold); color: #fff;
}

/* Active — thin progress bar at bottom */
.ecp-step-tab.active::after,
.ecp-steps-bar button.ecp-step-tab.active::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    height: 3px; width: var(--tab-progress, 0%);
    background: linear-gradient(90deg, var(--c-gold), var(--c-gold2));
    border-radius: 0 0 3px 3px; transition: width .5s ease;
}

/* Done — teal checkmark */
.ecp-step-tab.done,
.ecp-steps-bar button.ecp-step-tab.done {
    background: linear-gradient(160deg, rgba(13,115,119,.15) 0%, rgba(20,169,174,.05) 100%);
    border-color: rgba(13,115,119,.45);
}
.ecp-step-tab.done .ecp-step-label,
.ecp-steps-bar button.ecp-step-tab.done .ecp-step-label { color: var(--c-teal2); }
.ecp-step-tab.done .ecp-step-icon,
.ecp-steps-bar button.ecp-step-tab.done .ecp-step-icon { opacity: .55; }
.ecp-step-tab.done .ecp-step-num,
.ecp-steps-bar button.ecp-step-tab.done .ecp-step-num {
    background: var(--c-teal); border-color: var(--c-teal2); color: #fff; font-size: 0;
}
.ecp-step-tab.done .ecp-step-num::before { content: '✓'; font-size: 10px; font-weight: 900; }

/* ≤320px: hide label, icon only */
@media (max-width: 320px) {
    .ecp-step-label { display: none; }
}
.ecp-step-panel { display:none; }
.ecp-step-panel.active { display:block; }

/* ══ SECTION GENERATOR ══ */
.ecp-section-gen-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.ecp-section-gen-header h3 { font-family:var(--ff-head); font-size:20px; color:var(--c-text); margin-bottom:4px; }
.ecp-section-gen-header p  { color:var(--c-muted); font-size:13px; }
.ecp-gen-actions { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; flex-shrink:0; }
.ecp-btn-generate { padding:11px 22px; background:var(--c-gold); color:#ffffff; border:none; border-radius:var(--r-sm); cursor:pointer; font-family:var(--ff-body); font-size:14px; font-weight:700; transition:all .18s; white-space:normal; word-break:break-word; min-width:0; flex:1 1 auto; text-align:center; }
.ecp-btn-generate:hover { background:var(--c-gold2); }
.ecp-btn-generate:disabled { background:var(--c-bg3); color:var(--c-muted); cursor:not-allowed; }
.ecp-btn-sm-teal { background:var(--c-bg3); color:var(--c-teal); border:1.5px solid var(--c-teal); font-weight:600; }
.ecp-btn-sm-teal:hover { background:rgba(13,115,119,.15); }
#ecp-app.ecp-dark .ecp-btn-sm-teal { background:rgba(13,115,119,.2); color:var(--c-teal2); border-color:rgba(13,115,119,.4); }
#ecp-app.ecp-dark .ecp-btn-sm-teal:hover { background:rgba(13,115,119,.35); }
.ecp-step-nav { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; padding-top:14px; border-top:1.5px solid var(--c-field-border); flex-wrap:wrap; }

/* ══ OUTPUT ══ */
.ecp-output-wrap { margin-top:14px; }
.ecp-out-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; flex-wrap:wrap; gap:8px; }
.ecp-out-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ecp-out-badge { padding:3px 10px; border-radius:20px; font-size:10px; font-weight:700; text-transform:uppercase; background:rgba(201,146,43,.18); color:var(--c-gold2); border:1px solid rgba(201,146,43,.28); }
.ecp-out-words { font-size:11px; color:var(--c-muted); }
.ecp-out-model { font-size:10px; color:var(--c-muted); background:var(--c-bg3); padding:2px 7px; border-radius:10px; border:1px solid var(--c-border); }
.ecp-out-btns  { display:flex; gap:6px; }
.ecp-out-text  { background:var(--c-bg2); border:1.5px solid var(--c-field-border); border-radius:var(--r-sm); padding:18px; font-size:14px; line-height:1.9; color:var(--c-field-text); min-height:150px; max-height:min(430px, 52vh); overflow-y:auto; white-space:pre-wrap; word-break:break-word; outline:none; }
.ecp-out-text:focus { border-color:var(--c-gold); box-shadow: 0 0 0 3px rgba(201,146,43,.13); }
.ecp-out-text::-webkit-scrollbar { width:10px; }
.ecp-out-text::-webkit-scrollbar-track { background:var(--c-bg3); border-radius:6px; }
.ecp-out-text::-webkit-scrollbar-thumb { background:var(--c-gold2, #c9922b); border-radius:6px; border:2px solid var(--c-bg3); }
.ecp-out-text::-webkit-scrollbar-thumb:hover { background:var(--c-gold, #b9831f); }
/* Firefox */
.ecp-out-text { scrollbar-width:auto; scrollbar-color:var(--c-gold2, #c9922b) var(--c-bg3); }
/* "View all" expands the box to full content height */
.ecp-out-text.ecp-expanded { max-height:none !important; }
/* Edit mode: clear editable state */
.ecp-out-text.ecp-editing { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(201,146,43,.18); background: var(--c-bg2); }
.ecp-edit-toggle.ecp-edit-active { background: var(--c-gold) !important; color: #24170a !important; border-color: var(--c-gold) !important; }

/* ── Generation history switcher ── */
.ecp-ver-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
    margin: 10px 0 12px; padding: 9px 12px;
    background: var(--c-bg3); border: 1px solid var(--c-field-border); border-radius: var(--r-sm);
}
.ecp-ver-label { font-size: 12px; font-weight: 700; color: var(--c-muted); }
.ecp-ver-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.ecp-ver-pill {
    padding: 5px 13px; border-radius: 20px; cursor: pointer;
    border: 1.5px solid var(--c-field-border); background: var(--c-bg2);
    color: var(--c-text); font-size: 12.5px; font-weight: 700; transition: all .15s;
}
.ecp-ver-pill:hover { border-color: var(--c-teal2); color: var(--c-teal2); }
.ecp-ver-pill.active { background: var(--c-teal); border-color: var(--c-teal); color: #fff; box-shadow: 0 3px 10px rgba(13,115,119,.3); }
.ecp-ver-left { font-size: 11.5px; font-weight: 700; color: var(--c-gold2); background: rgba(201,146,43,.12); padding: 3px 10px; border-radius: 12px; }
.ecp-ver-left-final { color: #dc2626; background: rgba(220,38,38,.1); }
.ecp-ver-hint { font-size: 11px; color: var(--c-dim); flex-basis: 100%; }

/* ── Send to a human editor ── */
.ecp-send-row {
    margin-top: 10px; padding: 10px 16px; border-radius: var(--r-sm);
    background: linear-gradient(135deg, rgba(13,115,119,.10), rgba(201,146,43,.08));
    border: 1px solid var(--c-field-border);
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.ecp-send-lead { font-size: 13.5px; font-weight: 700; color: var(--c-text); display: flex; align-items: center; gap: 7px; }
.ecp-send-lead-ic { font-size: 17px; }
.ecp-send-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ecp-send-btn {
    padding: 10px 18px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 700;
    border: none; transition: transform .15s, box-shadow .15s, filter .15s; white-space: nowrap;
}
.ecp-send-section { background: var(--c-teal); color: #fff; box-shadow: 0 6px 16px rgba(13,115,119,.28); }
.ecp-send-full { background: linear-gradient(135deg, var(--c-gold2), var(--c-gold)); color: #24170a; box-shadow: 0 6px 16px rgba(201,146,43,.3); }
.ecp-send-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.ecp-send-btn:active { transform: translateY(0); }
@media (max-width: 560px) {
    .ecp-send-row { flex-direction: column; align-items: stretch; }
    .ecp-send-actions { flex-direction: column; }
    .ecp-send-btn { width: 100%; }
}
.ecp-error-wrap { padding:11px 14px; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.28); border-radius:var(--r-sm); color:#fca5a5; font-size:13px; margin-top:10px; }

/* ══ PREVIEW ══ */
.ecp-preview-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.ecp-full-preview { background:rgba(0,0,0,.2); border:1px solid var(--c-border); border-radius:var(--r); padding:24px; font-size:14px; line-height:1.9; color:var(--c-text); max-height:700px; overflow-y:auto; white-space:pre-wrap; }
.ecp-preview-placeholder { text-align:center; color:var(--c-dim); padding:48px 24px; font-size:14px; }
.ecp-preview-section { margin-bottom:24px; border-bottom:1px solid var(--c-border); padding-bottom:20px; }
.ecp-preview-section:last-child { border-bottom:none; }
.ecp-preview-sec-title { font-family:var(--ff-head); font-size:16px; color:var(--c-gold2); text-transform:uppercase; letter-spacing:.8px; margin-bottom:12px; }

/* ══ IRG RESULT ITEMS — full redesign with checkbox, abstract fix ══ */

.ecp-irg-results { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }

.ecp-irg-result-item {
    background: var(--c-bg2);
    border: 1.5px solid var(--c-field-border);
    border-radius: 10px;
    padding: 13px 14px 11px;
    transition: border-color .2s, background .2s;
    position: relative;
}
.ecp-irg-result-item:hover { border-color: rgba(201,146,43,.3); background: var(--c-bg3); }

/* Selected via checkbox */
.ecp-irg-result-item.ecp-checked {
    border-color: var(--c-gold2) !important;
    background: rgba(201,146,43,.07) !important;
    box-shadow: 0 0 0 2px rgba(201,146,43,.15);
}

/* Added to refs */
.ecp-irg-result-item.added {
    border-color: var(--c-teal2);
    background: rgba(13,115,119,.10);
}
.ecp-irg-result-item.added:hover { border-color: var(--c-teal2); }

/* ── Item header row: checkbox + title ── */
.ecp-irg-item-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
}

/* Checkbox */
.ecp-irg-checkbox {
    width: 18px; height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--c-gold2);
    cursor: pointer;
}

.ecp-irg-result-title {
    font-size: 13px; font-weight: 600;
    color: var(--c-text); line-height: 1.45;
    flex: 1;
    cursor: pointer;
}
.ecp-irg-result-title:hover { color: var(--c-gold2); }

/* Meta row */
.ecp-irg-result-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; align-items: center; padding-left: 28px; }
.ecp-irg-result-meta span { font-size: 11px; color: var(--c-muted); }
.ecp-irg-result-meta span:first-child { color: var(--c-text); font-weight: 500; }

/* Year badge */
.ecp-irg-year-badge {
    font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 10px;
    background: rgba(59,130,246,.15); color: #93c5fd;
    border: 1px solid rgba(59,130,246,.25);
}

/* Journal badge */
.ecp-irg-journal-badge {
    font-size: 10px;
    padding: 2px 7px; border-radius: 10px;
    background: var(--c-bg3); color: var(--c-muted);
    border: 1.5px solid var(--c-field-border);
    max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Source tags */
.ecp-irg-source-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; }
.ecp-irg-ss { background: rgba(13,115,119,.2); color: var(--c-teal2); border: 1px solid rgba(13,115,119,.3); }
.ecp-irg-cr { background: rgba(59,130,246,.18); color: #93c5fd; border: 1px solid rgba(59,130,246,.3); }

/* Formatted citation */
.ecp-irg-result-formatted {
    font-size: 11.5px; color: #647a96; font-style: italic;
    line-height: 1.65; margin-bottom: 8px; padding-left: 28px;
    border-left: 2px solid var(--c-border);
    margin-left: 0; padding-right: 4px;
}

/* Abstract — FIXED: also expand for IRG result items */
.ecp-ref-item-abstract,
.ecp-irg-result-item .ecp-ref-item-abstract {
    font-size: 12px; color: var(--c-dim); line-height: 1.7;
    margin-top: 8px; padding: 10px 12px 10px 28px;
    border-top: 1px solid var(--c-border);
    background: rgba(0,0,0,.15); border-radius: 0 0 8px 8px;
    display: none;
}
.ecp-ref-item.expanded .ecp-ref-item-abstract,
.ecp-irg-result-item.expanded .ecp-ref-item-abstract { display: block; }

/* Action row */
.ecp-irg-result-actions {
    display: flex; align-items: center; gap: 8px;
    padding-left: 28px; flex-wrap: wrap;
}
.ecp-irg-add-btn {
    padding: 5px 13px; border-radius: 6px;
    border: 1px solid rgba(13,115,119,.4);
    background: transparent; color: var(--c-teal2);
    cursor: pointer; font-size: 12px; font-weight: 600; transition: all .15s;
}
.ecp-irg-add-btn:hover:not(:disabled) { background: rgba(13,115,119,.2); }
.ecp-irg-add-btn.added { background: rgba(13,115,119,.2); color: var(--c-teal2); cursor: default; }

/* Show Abstract toggle */
.ecp-toggle-abstract {
    font-size: 11.5px !important;
    color: var(--c-muted) !important;
    border-color: rgba(255,255,255,.12) !important;
}
.ecp-toggle-abstract:hover { color: var(--c-gold2) !important; border-color: rgba(201,146,43,.35) !important; }

.ecp-irg-doi-link { font-size: 11px; color: var(--c-teal2); text-decoration: none; margin-left: auto; }
.ecp-irg-doi-link:hover { text-decoration: underline; }

/* ── Add-all / bulk row ── */
.ecp-irg-add-all-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-border);
    flex-wrap: wrap; gap: 10px;
}
.ecp-irg-add-all-btn {
    padding: 8px 18px; background: var(--c-gold); color: var(--c-bg);
    border: none; border-radius: var(--r-sm); cursor: pointer;
    font-size: 13px; font-weight: 700; transition: background .15s;
}
.ecp-irg-add-all-btn:hover { background: var(--c-gold2); }

/* Add Selected button */
.ecp-irg-add-selected-btn {
    padding: 8px 16px;
    background: rgba(201,146,43,.15); color: var(--c-gold2);
    border: 1px solid rgba(201,146,43,.35); border-radius: var(--r-sm);
    cursor: pointer; font-size: 13px; font-weight: 700; transition: all .15s;
    display: none;
}
.ecp-irg-add-selected-btn:hover { background: rgba(201,146,43,.28); }
.ecp-irg-add-selected-btn.visible { display: inline-flex; align-items: center; gap: 6px; }

.ecp-irg-result-count { font-size: 12px; color: var(--c-muted); }
.ecp-blocked-count { color: #fca5a5; font-size: 11px; }

.ecp-irg-added-notice {
    margin-top: 10px; padding: 8px 12px;
    background: rgba(13,115,119,.15); border: 1px solid rgba(13,115,119,.35);
    border-radius: var(--r-sm); font-size: 13px; color: var(--c-teal2);
}

/* Relevance badges */
.ecp-relevance-badge {
    flex-shrink: 0;
    font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 10px;
    white-space: nowrap; margin-left: 6px; margin-top: 2px;
}
.ecp-rel-high { background: rgba(52,211,153,.15); color: #34d399; border: 1px solid rgba(52,211,153,.3); }
.ecp-rel-med  { background: rgba(20,169,174,.15); color: var(--c-teal2); border: 1px solid rgba(20,169,174,.3); }
.ecp-rel-low  { background: rgba(251,191,36,.1);  color: #fbbf24; border: 1px solid rgba(251,191,36,.25); }
.ecp-filtered-count { color: #f87171; font-size: 11px; }

/* ── Topic-change warning banner ── */
.ecp-topic-change-warn {
    display: none;
    margin-top: 8px;
    padding: 10px 14px;
    background: rgba(251,191,36,.1);
    border: 1px solid rgba(251,191,36,.35);
    border-radius: 8px;
    font-size: 12.5px;
    color: #fcd34d;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.ecp-topic-change-warn.visible { display: flex; }
.ecp-topic-change-warn strong { color: #fbbf24; }
.ecp-clear-refs-btn {
    padding: 4px 12px; border-radius: 6px;
    background: rgba(251,191,36,.2); color: #fbbf24;
    border: 1px solid rgba(251,191,36,.4);
    cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap;
    transition: background .15s; flex-shrink: 0;
}
.ecp-clear-refs-btn:hover { background: rgba(251,191,36,.35); }

@media(max-width:600px) {
    .ecp-irg-result-meta, .ecp-irg-result-formatted, .ecp-irg-result-actions { padding-left: 0; }
    .ecp-irg-add-all-row { flex-direction: column; gap: 8px; text-align: center; }
    .ecp-irg-add-all-btn, .ecp-irg-add-selected-btn { width: 100%; justify-content: center; }
    .ecp-irg-add-btn { flex: 1; text-align: center; min-height: 36px; padding: 7px 14px; }
}

.ecp-ref-search-card { background:var(--c-bg2); border:1px solid var(--c-border); border-radius:var(--r); padding:22px; }
.ecp-ref-search-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; }
.ecp-ref-actions-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--c-border); }
.ecp-ref-format-row { display:flex; align-items:center; gap:8px; }
.ecp-ref-format-row label { font-size:12px; color:var(--c-muted); white-space:nowrap; }
.ecp-ref-placeholder { text-align:center; padding:48px 24px; color:var(--c-muted); }
.ecp-ref-placeholder strong { display:block; font-size:15px; color:var(--c-text); margin-bottom:8px; }
.ecp-ref-placeholder p { font-size:13px; max-width:360px; margin:0 auto; }
.ecp-ref-results { display:flex; flex-direction:column; gap:10px; }
.ecp-ref-item { background:var(--c-bg2); border:1.5px solid var(--c-field-border); border-radius:var(--r-sm); padding:14px 16px; transition:border-color .18s; }
.ecp-ref-item:hover { border-color:rgba(201,146,43,.4); }
.ecp-ref-item.selected { border-color:var(--c-teal2); background:rgba(13,115,119,.1); }
.ecp-ref-item-title { font-size:14px; font-weight:600; color:var(--c-text); margin-bottom:4px; line-height:1.4; }
.ecp-ref-item-authors { font-size:12px; color:var(--c-muted); margin-bottom:3px; }
.ecp-ref-item-meta { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.ecp-ref-item-meta span { font-size:11px; background:var(--c-bg3); padding:2px 8px; border-radius:10px; color:var(--c-muted); border:1px solid var(--c-border); }
.ecp-ref-item-formatted { font-size:12px; color:var(--c-muted); font-style:italic; line-height:1.6; margin-bottom:8px; }
.ecp-ref-item-actions { display:flex; gap:7px; }
.ecp-ref-item-abstract { font-size:12px; color:var(--c-dim); line-height:1.6; margin-top:6px; border-top:1px solid var(--c-border); padding-top:6px; display:none; }
.ecp-ref-item.expanded .ecp-ref-item-abstract { display:block; }
.ecp-source-badge { padding:2px 7px; border-radius:10px; font-size:10px; font-weight:700; }
.ecp-source-ss { background:rgba(13,115,119,.2); color:var(--c-teal2); border:1px solid rgba(13,115,119,.3); }
.ecp-source-cr { background:rgba(59,130,246,.2); color:#93c5fd; border:1px solid rgba(59,130,246,.3); }

/* Basket */
.ecp-ref-basket { margin-top:18px; border-top:1px solid var(--c-border); padding-top:16px; }
.ecp-basket-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.ecp-basket-header strong { font-size:14px; color:var(--c-gold2); }
.ecp-basket-btns { display:flex; gap:7px; }
.ecp-basket-list { display:flex; flex-direction:column; gap:6px; }
.ecp-basket-item { background:rgba(13,115,119,.1); border:1px solid rgba(13,115,119,.25); border-radius:var(--r-sm); padding:10px 14px; font-size:12px; color:var(--c-text); display:flex; justify-content:space-between; align-items:flex-start; gap:10px; line-height:1.6; }
.ecp-basket-item-text { flex:1; }
.ecp-basket-remove { background:none; border:none; color:var(--c-dim); cursor:pointer; font-size:14px; flex-shrink:0; padding:0 2px; }
.ecp-basket-remove:hover { color:#fca5a5; }

/* ══ RESPONSIVE ADDITIONS ══ */
@media(max-width:1024px) {
    .ecp-setup-grid { grid-template-columns:1fr; }
    .ecp-ref-search-row { flex-direction:column; }
    .ecp-ref-search-row .ecp-field { width:100% !important; }
}
@media(max-width:600px) {
    .ecp-steps-bar { gap:2px; }
    .ecp-section-gen-header { flex-direction:column; }
    .ecp-gen-actions { width:100%; }
    .ecp-btn-generate { width:100%; }
    .ecp-preview-actions { flex-direction:column; }
    .ecp-btn-gold, .ecp-btn-primary { padding:11px; }
}

/* ══ INLINE REFERENCE GENERATOR ══ */
.ecp-inline-refgen {
    background: rgba(13,115,119,0.08);
    border: 1px solid rgba(13,115,119,0.25);
    border-radius: var(--r);
    padding: 16px;
    margin-bottom: 14px;
}
.ecp-irg-header { margin-bottom: 12px; }
.ecp-irg-title { font-size: 13px; font-weight: 700; color: var(--c-teal2); text-transform: uppercase; letter-spacing: .6px; }
.ecp-irg-subtitle { font-size: 12px; color: var(--c-muted); margin-top: 2px; }
.ecp-irg-controls {}
.ecp-irg-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 10px; }
.ecp-irg-field-grow { flex: 1; min-width: 180px; }
.ecp-irg-btn {
    width: 100%; padding: 11px 18px;
    background: var(--c-teal); color: #fff;
    border: none; border-radius: var(--r-sm);
    cursor: pointer; font-family: var(--ff-body); font-size: 14px; font-weight: 600;
    transition: background .18s;
}
.ecp-irg-btn:hover { background: var(--c-teal2); }
.ecp-irg-btn:disabled { background: var(--c-bg3); color: var(--c-muted); cursor: not-allowed; }
.ecp-irg-btn .ecp-btn-load { display: none; }
.ecp-irg-btn.loading .ecp-btn-txt  { display: none; }
.ecp-irg-btn.loading .ecp-btn-load { display: inline; }

/* Results list */
.ecp-irg-results { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ecp-irg-result-item {
    background: var(--c-bg2);
    border: 1.5px solid var(--c-field-border);
    border-radius: var(--r-sm);
    padding: 11px 13px;
    transition: border-color .15s;
}
.ecp-irg-result-item.added {
    border-color: var(--c-teal2);
    background: rgba(13,115,119,.12);
}
.ecp-irg-result-title { font-size: 13px; font-weight: 600; color: var(--c-text); margin-bottom: 3px; line-height: 1.4; }
.ecp-irg-result-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ecp-irg-result-meta span { font-size: 11px; color: var(--c-muted); }
.ecp-irg-result-formatted { font-size: 11px; color: var(--c-muted); font-style: italic; line-height: 1.6; margin-bottom: 7px; }
.ecp-irg-result-actions { display: flex; align-items: center; gap: 8px; }
.ecp-irg-add-btn {
    padding: 5px 12px; border-radius: 6px; border: 1px solid rgba(13,115,119,.4);
    background: transparent; color: var(--c-teal2); cursor: pointer;
    font-size: 12px; font-weight: 600; transition: all .15s;
}
.ecp-irg-add-btn:hover { background: rgba(13,115,119,.2); }
.ecp-irg-add-btn.added { background: rgba(13,115,119,.2); color: var(--c-teal2); cursor: default; }
.ecp-irg-doi-link { font-size: 11px; color: var(--c-teal2); text-decoration: none; }
.ecp-irg-doi-link:hover { text-decoration: underline; }
.ecp-irg-source-tag {
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
}
.ecp-irg-ss { background: rgba(13,115,119,.2); color: var(--c-teal2); border: 1px solid rgba(13,115,119,.3); }
.ecp-irg-cr { background: rgba(59,130,246,.18); color: #93c5fd; border: 1px solid rgba(59,130,246,.3); }
.ecp-irg-add-all-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-border); }
.ecp-irg-add-all-btn {
    padding: 8px 18px; background: var(--c-gold); color: var(--c-bg);
    border: none; border-radius: var(--r-sm); cursor: pointer;
    font-size: 13px; font-weight: 700; transition: background .15s;
}
.ecp-irg-add-all-btn:hover { background: var(--c-gold2); }
.ecp-irg-result-count { font-size: 12px; color: var(--c-muted); }
.ecp-irg-added-notice {
    margin-top: 10px; padding: 8px 12px;
    background: rgba(13,115,119,.15); border: 1px solid rgba(13,115,119,.35);
    border-radius: var(--r-sm); font-size: 13px; color: var(--c-teal2);
}
.ecp-irg-empty { text-align: center; padding: 20px; color: var(--c-muted); font-size: 13px; }
.ecp-irg-error { color: #fca5a5; font-size: 13px; padding: 10px; background: rgba(239,68,68,.1); border-radius: var(--r-sm); }

/* Responsive */
@media (max-width:600px) {
    .ecp-irg-row { flex-direction: column; }
    .ecp-irg-row .ecp-field { width: 100% !important; }
}

/* step tab styles defined above in STEPS BAR section */

/* Force step panels to show/hide correctly */
.ecp-step-panel          { display: none !important; }
.ecp-step-panel.active   { display: block !important; }

/* Ensure generate buttons are always clickable */
.ecp-btn-generate {
    position: relative;
    z-index: 2;
    pointer-events: all !important;
    cursor: pointer !important;
}
.ecp-btn-generate:not(:disabled) { opacity: 1 !important; }

/* Prevent Divi from overlaying invisible elements over buttons */
#ecp-app .et_pb_section::after,
#ecp-app .et_pb_row::after   { display: none !important; }

/* ══ COVER PAGE CARD ══ */
.ecp-cover-card {
    background: var(--c-bg3);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 20px 24px;
    margin-bottom: 18px;
}
.ecp-cover-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 14px;
}
.ecp-cover-style-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ecp-cover-tab {
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid var(--c-border);
    background: var(--c-bg3);
    color: var(--c-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
    font-family: var(--ff-body);
}
.ecp-cover-tab:hover  { border-color: var(--c-teal2); color: var(--c-teal2); }
.ecp-cover-tab.active { background: rgba(13,115,119,.2); border-color: var(--c-teal2); color: var(--c-teal2); }
.ecp-cover-fields { margin-top: 4px; }
.ecp-cover-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
@media (max-width:600px) { .ecp-cover-fields-grid { grid-template-columns: 1fr; } }
.ecp-cover-preview-wrap { margin-top: 6px; }
.ecp-cover-preview-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-dim);
    margin-bottom: 8px;
}
.ecp-cover-preview-box {
    background: var(--c-bg3);
    border: 1.5px solid var(--c-field-border);
    border-radius: var(--r-sm);
    padding: 20px 24px;
    font-size: 13px;
    color: var(--c-muted);
    min-height: 100px;
    white-space: pre-wrap;
    line-height: 2;
    font-family: "Times New Roman", serif;
    text-align: center;
}

/* ══ EXPORT BUTTONS ══ */
.ecp-preview-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 18px;
}
.ecp-export-group {
    display: flex;
    gap: 0;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(13,115,119,0.4);
}
.ecp-export-group .ecp-export-btn {
    white-space: nowrap;
    border-radius: 0 !important;
    border: none !important;
    flex: 1;
    min-width: 175px;
    font-size: 13px;
    padding: 11px 18px;
    margin: 0 !important;
    outline: none;
}
.ecp-export-group .ecp-export-btn:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,0.14) !important;
}
.ecp-export-group .ecp-export-btn:hover {
    filter: brightness(1.12);
}
.ecp-preview-actions .ecp-edit-setup-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ══ CREDITS EXHAUSTED MODAL ══ */
.ecp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    z-index: 99999;
    display: flex;
    justify-content: center;
    /* Scroll the overlay (not the page) so a tall modal is never clipped at
       the top — the box centres when it fits and pins to the top when taller. */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    backdrop-filter: blur(4px);
}
.ecp-modal-overlay.hidden { display: none !important; }
.ecp-modal-box {
    background: var(--c-surface, #1a2234);
    border: 1px solid rgba(201,146,43,.35);
    border-radius: 16px;
    padding: 36px 32px;
    max-width: 440px;
    width: 100%;
    margin: auto;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0,0,0,.6);
    animation: ecp-modal-in .25s ease;
}
@keyframes ecp-modal-in {
    from { opacity:0; transform: translateY(20px) scale(.96); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}
.ecp-modal-icon { font-size: 42px; margin-bottom: 8px; }
.ecp-modal-title { font-size: 20px; font-weight: 800; color: var(--c-gold2,#e3b84a); margin-bottom: 10px; }
.ecp-modal-body  { font-size: 14px; color: var(--c-muted); line-height: 1.7; margin-bottom: 22px; }
.ecp-modal-plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 22px;
}
.ecp-modal-plan {
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 14px 10px;
    position: relative;
    background: var(--c-bg2);
}
.ecp-modal-plan-highlight {
    border-color: var(--c-gold,#c9922b);
    background: rgba(201,146,43,.08);
}
.ecp-modal-plan-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-gold,#c9922b);
    color: #1a1200;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}
.ecp-modal-plan-name    { font-size: 15px; font-weight: 700; color: var(--c-text); margin-bottom: 4px; }
.ecp-modal-plan-credits { font-size: 22px; font-weight: 800; color: var(--c-teal2,#14a9ae); margin-bottom: 4px; }
.ecp-modal-plan-desc    { font-size: 11px; color: var(--c-dim); }
.ecp-modal-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ecp-modal-upgrade-btn { width: 100%; justify-content: center; font-size: 15px; padding: 13px 20px; }

/* Wallet top-up hero inside the out-of-credits modal */
.ecp-modal-topup-hero {
    background: linear-gradient(135deg, rgba(13,115,119,.18), rgba(20,169,174,.10));
    border: 1.5px solid var(--c-teal2, #14a9ae);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 0 18px;
    text-align: center;
}
.ecp-modal-topup-label {
    font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--c-teal2, #14a9ae); margin-bottom: 4px;
}
.ecp-modal-topup-min {
    font-size: 26px; font-weight: 800; color: var(--c-text); line-height: 1.1;
}
.ecp-modal-topup-rate {
    font-size: 12px; color: var(--c-muted); margin-top: 4px;
}

/* ── Compact the out-of-credits pricing modal on phones ──
   The stacked full-size cards were too tall on mobile (title scrolled off,
   text cut). Here the hero shrinks and each plan becomes a slim 2-line row:
   name + description on the left, credits + price on the right. */
@media (max-width: 600px) {
    #ecp-credits-modal .ecp-modal-box   { padding: 20px 14px; }
    #ecp-credits-modal .ecp-modal-icon  { font-size: 30px; margin-bottom: 4px; }
    #ecp-credits-modal .ecp-modal-title { font-size: 17px; margin-bottom: 6px; }
    #ecp-credits-modal .ecp-modal-body  { font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }

    #ecp-credits-modal .ecp-modal-topup-hero  { padding: 10px 12px; margin-bottom: 12px; }
    #ecp-credits-modal .ecp-modal-topup-label { font-size: 10px; margin-bottom: 2px; }
    #ecp-credits-modal .ecp-modal-topup-min   { font-size: 21px; }
    #ecp-credits-modal .ecp-modal-topup-rate  { font-size: 11px; margin-top: 3px; line-height: 1.45; }

    #ecp-credits-modal .ecp-modal-plans { gap: 8px; margin-bottom: 14px; }

    #ecp-credits-modal .ecp-modal-plan {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 10px;
        row-gap: 0;
        text-align: left;
        padding: 9px 12px;
    }
    #ecp-credits-modal .ecp-modal-plan-name    { grid-column: 1; grid-row: 1; font-size: 13.5px; margin: 0; }
    #ecp-credits-modal .ecp-modal-plan-desc    { grid-column: 1; grid-row: 2; font-size: 10.5px; margin: 0; }
    #ecp-credits-modal .ecp-modal-plan-credits { grid-column: 2; grid-row: 1; font-size: 15px; margin: 0; text-align: right; white-space: nowrap; }
    #ecp-credits-modal .ecp-modal-plan-price   { grid-column: 2; grid-row: 2; font-size: 12px; margin: 0; text-align: right; white-space: nowrap; }

    /* Move the BEST VALUE badge to the top-right corner so it never overlaps the row text */
    #ecp-credits-modal .ecp-modal-plan-badge {
        top: -8px; left: auto; right: 10px; transform: none;
        font-size: 8px; padding: 1px 7px;
    }
    #ecp-credits-modal .ecp-modal-upgrade-btn { font-size: 14px; padding: 12px 18px; }
}

/* Inline "Top up now →" link shown in a section's error message */
.ecp-err-topup-link {
    display: inline-block;
    margin-left: 6px;
    font-weight: 700;
    color: var(--c-teal2, #14a9ae);
    text-decoration: underline;
    white-space: nowrap;
}
.ecp-err-topup-link:hover { color: var(--c-gold, #c9922b); }

/* ══ ABSTRACT TOGGLE ══ */
.ecp-abstract-toggle-row {
    margin-bottom: 16px;
    padding: 14px 16px;
    background: rgba(13,115,119,0.08);
    border: 1px solid rgba(13,115,119,0.25);
    border-radius: 10px;
}
/* Toggle switch — defined in .ecp-wizard-launch section above */

/* ══ MANDATORY FIELD ERRORS ══ */
.ecp-field-error {
    color: #fca5a5;
    font-size: 12px;
    margin-top: 6px;
    padding: 7px 12px;
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.35);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ecp-field-error.hidden { display: none !important; }
/* Highlight the field itself when in error */
#ecp-rubric.error, #ecp-instructions.error, #ecp-references.error {
    border-color: rgba(239,68,68,0.6) !important;
    box-shadow: 0 0 0 2px rgba(239,68,68,0.15);
}
/* Required star styling */
.ecp-sc-title .req { color: #fca5a5; margin-left: 4px; }

/* ══ FILE UPLOAD BUTTONS ══ */
.ecp-upload-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;       /* wraps on narrow screens */
}
.ecp-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(13,115,119,0.12);
    border: 1.5px dashed rgba(13,115,119,0.5);
    border-radius: 8px;
    color: var(--c-teal2, #14a9ae);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: background .2s, border-color .2s;
    white-space: normal;   /* allow wrap on tiny screens */
    word-break: break-word;
    flex: 1 1 auto;        /* grow to fill available space */
    min-width: 0;          /* can shrink below content */
    text-align: center;
    line-height: 1.3;
    box-sizing: border-box;
}
.ecp-upload-btn:hover {
    background: rgba(13,115,119,0.25);
    border-color: var(--c-teal2, #14a9ae);
}
.ecp-file-input {
    display: none !important;
}
.ecp-upload-status {
    font-size: 12px;
    color: var(--c-muted, #94a3b8);
    flex: 1;
}
.ecp-upload-status.loading { color: var(--c-teal2, #14a9ae); }
.ecp-upload-status.success { color: #86efac; }
.ecp-upload-status.error   { color: #fca5a5; }

/* ── Upload OCR hint (under instructions / rubric / references) ── */
.ecp-upload-hint {
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--c-dim, #7c8aa0);
    margin-top: 6px;
    padding: 7px 10px;
    background: rgba(13,115,119,.07);
    border: 1px solid rgba(13,115,119,.18);
    border-radius: 7px;
}

/* ── References confirmation popup ──────────────────────────────────
   The modal box is ALWAYS dark navy (var(--c-surface,#1a2234)) in both
   light and dark mode, so all text here is set to explicit light colours
   for guaranteed contrast — never the mode-dependent --c-muted (which is
   dark slate in light mode and would vanish on the dark box).
   ID-scoped so these win over the generic .ecp-modal-box rules, and the
   width auto-sizes small on every device. */
#ecp-refs-confirm-modal .ecp-modal-box {
    position: relative;
    width: min(440px, 92vw);
    max-width: 440px;
    margin: auto;
    align-self: center;
    padding: 30px 26px 26px;
    background: #1a2234;
    border: 1px solid rgba(201,146,43,.45);
}
#ecp-refs-confirm-modal .ecp-modal-icon  { font-size: 38px; margin-bottom: 6px; }
#ecp-refs-confirm-modal .ecp-modal-title { color: #f2c14e; font-size: 19px; }
#ecp-refs-confirm-modal .ecp-modal-body  { color: #e2e8f0; font-size: 14px; }
#ecp-refs-confirm-modal .ecp-modal-body strong { color: #ffffff; }
#ecp-refs-confirm-modal #ecp-refs-confirm-count { color: #f2c14e; }

.ecp-refs-confirm-note {
    font-size: 12.5px;
    line-height: 1.6;
    color: #f0e2c0;                      /* readable warm tone on gold tint */
    background: rgba(201,146,43,.12);
    border: 1px solid rgba(201,146,43,.35);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 20px;
    text-align: left;
}
.ecp-refs-confirm-note em { color: #ffffff; font-style: normal; font-weight: 600; }

/* Buttons inside the confirm modal — force light, high-contrast text */
#ecp-refs-confirm-modal .ecp-btn-primary {
    background: #14a9ae; color: #ffffff; border: none; font-weight: 700; width: 100%;
}
#ecp-refs-confirm-modal .ecp-btn-primary:hover { background: #0d7377; }
#ecp-refs-confirm-modal .ecp-btn-sm-ghost {
    background: transparent; color: #cbd5e1; border: 1px solid rgba(255,255,255,.20);
}
#ecp-refs-confirm-modal .ecp-btn-sm-ghost:hover { background: rgba(255,255,255,.08); color: #ffffff; }

#ecp-refs-confirm-ok.ecp-counting {
    opacity: .85;
    cursor: default;
    pointer-events: none;
    background: #253352 !important;
    color: #cbd5e1 !important;
}
#ecp-refs-confirm-modal .ecp-refs-modal-close {
    position: absolute; top: 12px; right: 12px;
}

/* Extra-small phones: tighten padding so it never feels oversized */
@media (max-width: 420px) {
    #ecp-refs-confirm-modal .ecp-modal-box { padding: 22px 16px 18px; width: 94vw; }
    #ecp-refs-confirm-modal .ecp-modal-title { font-size: 17px; }
}

/* ══════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVE OVERHAUL
   Breakpoints: 768px (tablet), 600px (large phone),
                480px (standard phone), 380px (small phone)
══════════════════════════════════════════════════════ */

/* ── 768px: Tablet ── */
@media (max-width: 768px) {

    /* Dashboard padding tighter */
    .ecp-dashboard { padding: 12px; gap: 10px; }

    /* Panel header */
    .ecp-panel-hdr h2 { font-size: 18px; }
    .ecp-panel-hdr p  { font-size: 13px; }

    /* step tabs: auto-fit via clamp() in base CSS */

    /* Section gen header stacks */
    .ecp-section-gen-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .ecp-gen-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .ecp-gen-actions .ecp-field {
        width: 100% !important;
        min-width: 0 !important;
    }
    .ecp-btn-generate { width: 100%; padding: 13px; font-size: 15px; }

    /* Step nav — full width buttons */
    .ecp-step-nav {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .ecp-step-nav button { width: 100%; justify-content: center; }

    /* Output header — stack meta and buttons */
    .ecp-out-hdr {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .ecp-out-btns {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }
    .ecp-out-btns .ecp-btn-sm {
        justify-content: center;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Output text — reduce height */
    .ecp-out-text { max-height: 380px; font-size: 13px; }

    /* Preview actions */
    .ecp-preview-actions {
        flex-direction: column;
        gap: 8px;
    }
    .ecp-preview-actions > * { width: 100%; }
    .ecp-export-group {
        flex-direction: column;
        border-radius: 10px;
        overflow: visible;
        border: none;
        gap: 8px;
    }
    .ecp-export-group .ecp-export-btn {
        border-radius: 10px !important;
        border: none !important;
        width: 100%;
        min-width: 0;
    }
    .ecp-export-group .ecp-export-btn:first-child {
        border-right: none !important;
    }

    /* IRG controls — all stack */
    .ecp-irg-row { flex-direction: column; gap: 8px; }
    .ecp-irg-row .ecp-field,
    .ecp-irg-field-grow { width: 100% !important; min-width: 0 !important; }

    /* Ref search rows */
    .ecp-ref-search-row { flex-direction: column; gap: 8px; }
    .ecp-ref-search-row .ecp-field { width: 100% !important; }
    .ecp-ref-actions-row { flex-direction: column; gap: 8px; align-items: stretch; }
    .ecp-ref-format-row { flex-wrap: wrap; gap: 6px; }

    /* Cover page fields */
    .ecp-cover-fields-grid { grid-template-columns: 1fr; }

    /* History items */
    .ecp-history-item { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ecp-history-actions { flex-direction: row; width: 100%; justify-content: flex-end; }
    .ecp-history-actions button { flex: 1; }

    /* Basket buttons */
    .ecp-basket-btns { flex-wrap: wrap; gap: 6px; }
    .ecp-basket-btns button { flex: 1; min-width: 90px; }

    /* Pricing */
    .ecp-pricing { grid-template-columns: 1fr; max-width: 100%; }

    /* Row2 always single col on tablet */

    /* Modal */
    .ecp-modal-box { padding: 24px 18px; margin: 0 16px; }
    .ecp-modal-plans { grid-template-columns: 1fr; gap: 10px; }
}

/* ── 600px: Large phone ── */
@media (max-width: 600px) {

    /* Sidebar nav — compact horizontal scroll */
    .ecp-sidebar { padding: 8px; gap: 3px; }
    .ecp-nav {
        min-width: 80px;
        padding: 8px 6px;
        font-size: 11px;
        gap: 5px;
    }
    .ecp-nav span { font-size: 14px; }

    /* Steps bar — very compact */
    /* step tabs auto-size via clamp() */

    /* Section card */
    .ecp-section-card { padding: 14px; margin-bottom: 10px; }

    /* Reduce output text height */
    .ecp-out-text { max-height: 300px; font-size: 12px; padding: 12px; }

    /* Full preview */
    .ecp-full-preview { max-height: 500px; font-size: 13px; padding: 16px; }

    /* Upload row stacks */

    /* IRG add-all row stacks */
    .ecp-irg-add-all-row { flex-direction: column; gap: 8px; text-align: center; }
    .ecp-irg-add-all-btn { width: 100%; }

    /* Header */
    .ecp-header-inner { padding: 8px 12px; }
    .ecp-logo-title { font-size: 16px; }
    .ecp-credits-badge { font-size: 12px; padding: 4px 8px; }

    /* Abstract toggle row */
    .ecp-abstract-toggle-row { padding: 12px; }
    .ecp-toggle-label { gap: 10px; }
    .ecp-toggle-text strong { font-size: 13px; }

    /* Ref results */
    .ecp-irg-result-actions { flex-wrap: wrap; gap: 6px; }
    .ecp-irg-add-btn { flex: 1; text-align: center; }
}

/* ── 480px: Standard phone ── */
@media (max-width: 480px) {

    /* Dashboard no gap */
    .ecp-dashboard { padding: 8px; gap: 6px; }

    /* Steps bar — numbered only (hide text on tiny screens) */
    /* step tabs auto-size via clamp() */

    /* Section card tighter */
    .ecp-section-card { padding: 12px; }

    /* Reduce font sizes */
    .ecp-section-gen-header h3 { font-size: 16px; }
    .ecp-section-gen-header p  { font-size: 12px; }

    /* Output buttons — stack if 3 buttons */
    .ecp-out-btns {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }
    /* Save button full-width */
    .ecp-out-btns .ecp-btn-sm:last-child {
        grid-column: 1 / -1;
    }

    /* Out text */
    .ecp-out-text { max-height: 260px; font-size: 12px; }

    /* Pages row */
    .ecp-pages-info { font-size: 11px; }

    /* Btn start */
    .ecp-btn-start { font-size: 14px; padding: 13px 16px; }

    /* Step nav */
    .ecp-step-nav { padding-top: 10px; margin-top: 10px; }

    /* Field label smaller */
    .ecp-field label { font-size: 10px; }
    .ecp-field input,
    .ecp-field textarea,
    .ecp-field select { font-size: 14px; padding: 9px 11px; }

    /* Cover preview */
    .ecp-cover-preview-wrap { padding: 10px; }

    /* Modal smaller */
    .ecp-modal-box { padding: 20px 14px; }
    .ecp-modal-title { font-size: 17px; }
}

/* ── 380px: Small phone ── */
@media (max-width: 380px) {

    /* Header minimal */
    .ecp-logo-mark { font-size: 22px; }
    .ecp-plan-pill { display: none; }

    /* step tabs: auto-fit via clamp() in base CSS */

    /* Section card */
    .ecp-section-card { padding: 10px; }

    /* Nav label hide on tiniest */
    .ecp-nav { min-width: 60px; font-size: 10px; gap: 3px; }

    /* Reduce out text further */
    .ecp-out-text { max-height: 220px; }

    /* Smaller modal */
    .ecp-modal-box { padding: 16px 12px; }
    .ecp-modal-icon { font-size: 32px; }
}

/* ══ TOUCH IMPROVEMENTS — all screen sizes ══ */
@media (hover: none) and (pointer: coarse) {
    /* Bigger tap targets on touch devices */
    .ecp-btn-sm { min-height: 36px; padding: 8px 12px; }
    .ecp-step-tab { min-height: 38px; }
    .ecp-nav { min-height: 42px; }
    .ecp-irg-add-btn { min-height: 36px; padding: 7px 14px; }
    .ecp-upload-btn { min-height: 40px; padding: 10px 16px; }

    /* step tab hover handled by base CSS */
    .ecp-nav:hover { background: none; color: var(--c-muted); }
}

/* ══ PREVENT TEXT OVERFLOW EVERYWHERE ══ */
#ecp-app * {
    max-width: 100%;
    box-sizing: border-box;
}
#ecp-app input,
#ecp-app select,
#ecp-app textarea,
#ecp-app button {
    max-width: 100%;
}
/* Tables in output text */
.ecp-out-text,
.ecp-full-preview {
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow-x: hidden;
}

/* ══ COLLAPSIBLE SECTION CARDS ══ */
.ecp-collapsible .ecp-sc-title.ecp-card-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    margin-bottom: 0;
    padding-bottom: 0;
    transition: color .18s;
    /* Mobile touch essentials */
    -webkit-tap-highlight-color: rgba(201,146,43,0.15);
    touch-action: manipulation;
    min-height: 44px; /* iOS minimum tap target */
    padding: 4px 0;
}
.ecp-collapsible .ecp-sc-title.ecp-card-toggle:hover {
    color: var(--c-gold2);
}
.ecp-collapsible .ecp-sc-title.ecp-card-toggle:active {
    color: var(--c-gold2);
    opacity: 0.8;
}
.ecp-chevron {
    margin-left: auto;
    font-size: 14px;
    color: var(--c-dim);
    transition: transform .25s ease;
    flex-shrink: 0;
    padding: 4px 8px; /* extra tap area on mobile */
    line-height: 1;
}
.ecp-collapsible.ecp-card-open .ecp-chevron {
    transform: rotate(180deg);
    color: var(--c-gold2);
}
.ecp-collapsible .ecp-sc-title.ecp-card-toggle::after {
    display: none;
}
/* Card body — NO overflow:hidden (fights slideDown on mobile) */
.ecp-card-body {
    /* overflow: hidden removed — let jQuery animate freely */
}
.ecp-collapsible .ecp-card-body {
    padding-top: 0;
}
.ecp-collapsible.ecp-card-open .ecp-card-body {
    padding-top: 14px;
}
.ecp-collapsible.ecp-card-open .ecp-sc-title {
    margin-bottom: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--c-border);
}
/* Status badge on collapsed card */
.ecp-card-status {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ecp-card-status.empty {
    background: rgba(239,68,68,.15);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,.2);
}
.ecp-card-status.filled {
    background: rgba(13,115,119,.2);
    color: var(--c-teal2);
    border: 1px solid rgba(13,115,119,.25);
}
/* Always-open card (Essay Details) */
.ecp-card-open:not(.ecp-collapsible) .ecp-sc-title {
    margin-bottom: 14px;
}
/* Collapsed card visual hint */
.ecp-collapsible:not(.ecp-card-open) {
    background: var(--c-bg2);
}
.ecp-collapsible:not(.ecp-card-open):active {
    background: rgba(201,146,43,.06);
}


/* ══ AI CHECKER PANEL ══ */
.ecp-aic-wrap { display: flex; flex-direction: column; gap: 16px; }
.ecp-aic-input-row { display: flex; gap: 12px; }
.ecp-aic-bar {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.ecp-aic-meta { font-size: 12px; color: var(--c-muted); }

/* Result card */
.ecp-aic-result {
    background: var(--c-bg2);
    border: 1px solid var(--c-border);
    border-radius: var(--r);
    padding: 24px;
    display: flex; flex-direction: column; gap: 20px;
}

/* Score ring */
.ecp-aic-score-wrap {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.ecp-aic-score-ring {
    position: relative; width: 120px; height: 120px; flex-shrink: 0;
}
.ecp-aic-svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.ecp-aic-track { fill: none; stroke: var(--c-bg3); stroke-width: 10; }
.ecp-aic-fill  { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.2s ease, stroke .4s; }
.ecp-aic-pct {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    font-family: var(--ff-head); font-size: 24px; font-weight: 800;
    color: var(--c-text);
}
.ecp-aic-score-info { flex: 1; min-width: 200px; }
.ecp-aic-verdict { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.ecp-aic-verdict-desc { font-size: 13px; color: var(--c-muted); line-height: 1.6; margin-bottom: 10px; }
.ecp-aic-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ecp-aic-badge {
    padding: 3px 10px; border-radius: 12px; font-size: 10px; font-weight: 700;
    letter-spacing: .4px;
}
.ecp-aic-badge-green { background: rgba(74,222,128,.12); color: #86efac; border: 1px solid rgba(74,222,128,.2); }
.ecp-aic-badge-amber { background: rgba(251,191,36,.12); color: #fcd34d; border: 1px solid rgba(251,191,36,.2); }
.ecp-aic-badge-red   { background: rgba(239,68,68,.12);  color: #fca5a5; border: 1px solid rgba(239,68,68,.2); }

/* Breakdown bars */
.ecp-aic-breakdown {
    display: flex; flex-direction: column; gap: 10px;
}
.ecp-aic-factor { display: flex; flex-direction: column; gap: 4px; }
.ecp-aic-factor-label {
    display: flex; justify-content: space-between;
    font-size: 12px; color: var(--c-muted);
}
.ecp-aic-factor-label strong { color: var(--c-text); }
.ecp-aic-bar-track {
    height: 6px; background: var(--c-bg3);
    border-radius: 3px; overflow: hidden;
}
.ecp-aic-bar-fill {
    height: 100%; border-radius: 3px;
    transition: width 1s ease;
}

/* Suggestions */
.ecp-aic-suggestions {
    background: rgba(13,115,119,.07);
    border: 1px solid rgba(13,115,119,.2);
    border-left: 3px solid var(--c-teal2);
    border-radius: var(--r-sm);
    padding: 14px 16px;
}
.ecp-aic-suggestions h4 {
    font-size: 12px; font-weight: 700; color: var(--c-teal2);
    margin-bottom: 10px;
}
.ecp-aic-suggestions ul {
    list-style: none; display: flex; flex-direction: column; gap: 6px;
}
.ecp-aic-suggestions li {
    font-size: 12px; color: var(--c-muted); line-height: 1.5;
    padding-left: 16px; position: relative;
}
.ecp-aic-suggestions li::before {
    content: '→'; position: absolute; left: 0; color: var(--c-teal2);
}

@media (max-width: 600px) {
    .ecp-aic-score-wrap { flex-direction: column; align-items: flex-start; }
    .ecp-aic-bar { flex-direction: column; align-items: stretch; }
    .ecp-aic-bar .ecp-btn-primary { width: 100%; }
}
/* ══ AI CHECKER — UPGRADED STYLES ══ */
.ecp-aic-load-btn {
    flex-shrink: 0; padding: 8px 16px;
    background: rgba(13,115,119,.15); color: var(--c-teal2);
    border: 1px solid rgba(13,115,119,.3); border-radius: 8px;
    font-size: 12px; font-weight: 700; cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}
.ecp-aic-load-btn:hover { background: rgba(13,115,119,.25); }

.ecp-aic-wc {
    font-size: 11px; color: var(--c-muted); font-weight: 400;
    margin-left: 8px;
}

.ecp-aic-actions-row {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.ecp-aic-main-btn {
    padding: 13px 32px; font-size: 15px; font-weight: 800;
    min-width: 200px;
}

/* Ring wrapper */
.ecp-aic-ring-wrap {
    position: relative; width: 130px; height: 130px; flex-shrink: 0;
}
.ecp-aic-ring-inner {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.ecp-aic-pct {
    font-size: 26px; font-weight: 800; line-height: 1;
}
.ecp-aic-ring-label {
    font-size: 10px; color: var(--c-muted); text-transform: uppercase;
    letter-spacing: .08em; margin-top: 2px;
}
.ecp-aic-summary {
    font-size: 13px; color: var(--c-muted); line-height: 1.6;
    margin: 6px 0;
}
.ecp-aic-tool-estimates {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0;
}
.ecp-aic-tool-est {
    font-size: 12px; background: var(--c-bg3);
    border: 1px solid var(--c-border); border-radius: 6px;
    padding: 4px 10px; color: var(--c-muted);
}
.ecp-aic-tool-est strong { color: var(--c-text); }
.ecp-aic-top-risk {
    font-size: 12px; color: #fca5a5;
    background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2);
    border-radius: 6px; padding: 6px 10px; margin-top: 6px;
    font-style: italic;
}

/* Section headers */
.ecp-aic-section { display: flex; flex-direction: column; gap: 10px; }
.ecp-aic-section-title {
    font-size: 11px; font-weight: 800; color: var(--c-dim);
    text-transform: uppercase; letter-spacing: .08em;
    padding-bottom: 6px; border-bottom: 1px solid var(--c-border);
    margin-bottom: 4px;
}

/* Factor grid */
.ecp-aic-factors-grid { display: flex; flex-direction: column; gap: 12px; }
.ecp-aic-factor { display: flex; flex-direction: column; gap: 4px; }
.ecp-aic-factor-top {
    display: flex; justify-content: space-between; align-items: center;
}
.ecp-aic-factor-label { font-size: 13px; font-weight: 600; color: var(--c-text); }
.ecp-aic-factor-score { font-size: 12px; font-weight: 700; }
.ecp-aic-factor-note { font-size: 11.5px; color: var(--c-muted); line-height: 1.5; }

/* Flagged sentences */
.ecp-aic-flagged-list { display: flex; flex-direction: column; gap: 8px; }
.ecp-aic-flagged-sentence {
    display: flex; gap: 10px; align-items: flex-start;
    background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.15);
    border-radius: 8px; padding: 10px 12px;
}
.ecp-aic-flag-num {
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(239,68,68,.2); color: #fca5a5;
    font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ecp-aic-flag-text {
    font-size: 12.5px; color: var(--c-muted); line-height: 1.6;
    font-style: italic;
}

/* Tips grid */
.ecp-aic-tips-grid { display: flex; flex-direction: column; gap: 8px; }
.ecp-aic-tip {
    display: flex; gap: 10px; align-items: flex-start;
    background: rgba(13,115,119,.06); border: 1px solid rgba(13,115,119,.15);
    border-radius: 8px; padding: 10px 12px;
}
.ecp-aic-tip-num {
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(13,115,119,.2); color: var(--c-teal2);
    font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ecp-aic-tip span:last-child { font-size: 12.5px; color: var(--c-muted); line-height: 1.6; }

/* Humanize bar */
.ecp-aic-humanize-bar {
    display: none;
    background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(168,85,247,.08));
    border: 1px solid rgba(124,58,237,.3);
    border-radius: 10px; padding: 16px 18px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.ecp-aic-humanize-info { flex: 1; min-width: 200px; }
.ecp-aic-humanize-info strong {
    display: block; font-size: 14px; font-weight: 800;
    color: #c084fc; margin-bottom: 4px;
}
.ecp-aic-humanize-info span { font-size: 12px; color: var(--c-muted); line-height: 1.5; }
.ecp-aic-humanize-btn {
    flex-shrink: 0; padding: 11px 22px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff; border: none; border-radius: 8px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: opacity .2s; white-space: nowrap;
}
.ecp-aic-humanize-btn:hover { opacity: .88; }
.ecp-aic-humanize-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Humanized result */
#ecp-aic-humanized-result {
    background: rgba(13,115,119,.06);
    border: 1px solid rgba(13,115,119,.25);
    border-radius: 10px; padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
}
.ecp-aic-humanized-header strong { color: var(--c-teal2); font-size: 14px; }
.ecp-aic-humanized-header span { font-size: 12px; color: var(--c-muted); margin-left: 8px; }
#ecp-aic-humanized-text {
    width: 100%; min-height: 200px; resize: vertical;
    background: rgba(0,0,0,.2); border: 1px solid var(--c-border);
    border-radius: 8px; padding: 14px; color: var(--c-text);
    font-size: 13px; line-height: 1.7;
}
.ecp-aic-humanized-actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 600px) {
    .ecp-aic-score-wrap { flex-direction: column; align-items: flex-start; }
    .ecp-aic-humanize-bar { flex-direction: column; }
    .ecp-aic-main-btn { width: 100%; }
    .ecp-aic-humanized-actions { flex-direction: column; }
    .ecp-aic-humanized-actions button { width: 100%; }
}

/* ── AI Risk Alert Panel ── */
.ecp-aic-risk-alert {
    display: flex; gap: 14px; align-items: flex-start;
    border-radius: 10px; padding: 16px 18px;
    border: 1px solid; margin-bottom: 4px;
}
.ecp-aic-alert-icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
.ecp-aic-alert-body { flex: 1; }
.ecp-aic-alert-body strong {
    display: block; font-size: 15px; font-weight: 800; margin-bottom: 6px;
}
.ecp-aic-alert-body p {
    font-size: 13px; line-height: 1.6; margin: 0 0 8px;
}

/* Safe */
.ecp-aic-alert-safe {
    background: rgba(74,222,128,.08);
    border-color: rgba(74,222,128,.3);
}
.ecp-aic-alert-safe strong { color: #4ade80; }
.ecp-aic-alert-safe p { color: #86efac; }

/* Moderate */
.ecp-aic-alert-moderate {
    background: rgba(251,191,36,.08);
    border-color: rgba(251,191,36,.3);
}
.ecp-aic-alert-moderate strong { color: #fbbf24; }
.ecp-aic-alert-moderate p { color: #fcd34d; }

/* High */
.ecp-aic-alert-high {
    background: rgba(251,146,60,.1);
    border-color: rgba(251,146,60,.35);
}
.ecp-aic-alert-high strong { color: #fb923c; }
.ecp-aic-alert-high p { color: #fdba74; }

/* Critical — rewrite required but fixable */
.ecp-aic-alert-critical {
    background: rgba(251,146,60,.1);
    border-color: rgba(251,146,60,.4);
    border-width: 2px;
}
.ecp-aic-alert-critical strong { color: #fb923c; }
.ecp-aic-alert-critical p { color: #fdba74; }
.ecp-aic-goal {
    font-size: 12px !important;
    background: rgba(251,146,60,.1);
    border: 1px solid rgba(251,146,60,.2);
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 8px !important;
    color: #fb923c !important;
    font-weight: 600;
}

/* Alert action buttons */
.ecp-aic-alert-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ecp-aic-action-btn {
    padding: 8px 16px; border-radius: 7px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    border: none; transition: opacity .2s;
}
.ecp-aic-action-btn:hover { opacity: .85; }
.ecp-aic-action-humanize {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
}
.ecp-aic-action-secondary {
    background: var(--c-bg3);
    color: var(--c-muted);
    border: 1px solid var(--c-border) !important;
}

@media (max-width: 600px) {
    .ecp-aic-risk-alert { flex-direction: column; gap: 8px; }
    .ecp-aic-alert-actions { flex-direction: column; }
    .ecp-aic-action-btn { width: 100%; text-align: center; }
}

/* ── AI Checker context note ── */
.ecp-aic-context-note {
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.25);
    border-left: 3px solid #818cf8;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12.5px;
    color: #a5b4fc;
    line-height: 1.6;
}
.ecp-aic-context-note strong { color: #c7d2fe; }

/* ══ THEME TOGGLE ══ */
.ecp-theme-toggle {
    background: none; border: 1px solid var(--c-border);
    border-radius: 20px; padding: 5px 10px; cursor: pointer;
    font-size: 16px; line-height: 1; transition: all .18s;
    color: var(--c-muted);
}
.ecp-theme-toggle:hover { background: rgba(128,128,128,.12); color: var(--c-text); }

/* ══ PROFILE BUTTON (sidebar) ══ */
.ecp-profile-btn {
    display: flex; align-items: center; gap: 9px; padding: 6px 4px;
    background: none; border: none; width: 100%; cursor: pointer;
    text-align: left; border-radius: var(--r-sm); transition: background .18s;
}
.ecp-profile-btn:hover { background: rgba(128,128,128,.1); }
.ecp-profile-chevron { margin-left: auto; font-size: 18px; color: var(--c-dim); line-height: 1; }

/* ══ PROFILE OVERLAY ══ */
/* ══ PROFILE OVERLAY ══ */
.ecp-profile-overlay {
    display: none !important; position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100vh !important;
    z-index: 9999999 !important;
    background: rgba(0,0,0,.65) !important;
    align-items: flex-start; justify-content: flex-end;
}
.ecp-profile-overlay.open { display: flex !important; }
.ecp-profile-overlay[style*="display: flex"],
.ecp-profile-overlay[style*="display:flex"] { display: flex !important; }

/* ══ PROFILE PANEL SHELL ══ */
/* ══ PROFILE PANEL SHELL ══ */
.ecp-profile-panel {
    /* Fluid width: fills full viewport on mobile, capped at 420px on desktop */
    width: min(420px, 100vw) !important;
    max-width: 100vw !important;
    height: 100vh !important; height: 100dvh !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    background: #f4f7fb !important;
    display: flex !important; flex-direction: column !important;
    box-shadow: -12px 0 48px rgba(0,0,0,.4) !important;
    animation: ecp-slide-in .26s cubic-bezier(.22,.8,.3,1);
    position: relative !important; z-index: 10000000 !important;
}
#ecp-app.ecp-dark .ecp-profile-panel { background: #0d1526 !important; }
@keyframes ecp-slide-in { from { transform: translateX(110%); opacity:.4; } to { transform: translateX(0); opacity:1; } }

/* ══ STICKY TOP BAR ══ */
.ecp-profile-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; position: sticky; top: 0; z-index: 10;
    background: #1a3a5c; border-bottom: 1px solid rgba(255,255,255,.1);
    flex-shrink: 0;
}
.ecp-profile-topbar-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .4px;
}
.ecp-profile-topbar-icon { font-size: 16px; }
.ecp-profile-close {
    display: flex; align-items: center; gap: 5px;
    background: rgba(239,68,68,.18); border: 1.5px solid rgba(239,68,68,.45);
    border-radius: 8px; padding: 5px 11px;
    cursor: pointer; font-size: 12px; font-weight: 700;
    color: #ff8a8a; transition: all .15s; letter-spacing: .3px; white-space: nowrap;
}
.ecp-profile-close:hover { background: rgba(239,68,68,.38); color: #fff; border-color: rgba(239,68,68,.7); }

/* ══ HERO HEADER ══ */
.ecp-profile-panel-hdr {
    background: linear-gradient(135deg, #0b4f52 0%, #0d7377 45%, #1a5276 100%);
    padding: 14px 16px 10px; flex-shrink: 0;
}
.ecp-profile-hero-body {
    display: flex; align-items: center; gap: 12px; margin-bottom: 6px;
}
.ecp-profile-avatar-ring { position: relative; flex-shrink: 0; cursor: pointer; }
.ecp-profile-avatar-ring:hover .ecp-profile-avatar-preview::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: rgba(0,0,0,.35);
}
.ecp-profile-avatar-preview {
    position: relative;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #14a9ae, #c9922b);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ff-head); font-size: 22px; font-weight: 700; color: #fff;
    border: 3px solid rgba(255,255,255,.35); overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.ecp-profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.ecp-profile-avatar-cam {
    position: absolute; bottom: -2px; right: -2px;
    width: 24px; height: 24px; border-radius: 50%;
    background: #c9922b; border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; cursor: pointer; transition: background .15s, transform .15s;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.ecp-profile-avatar-cam:hover { background: #f0b942; transform: scale(1.12); }
.ecp-profile-hero-info { flex: 1; min-width: 0; }
.ecp-profile-hero-name {
    font-family: var(--ff-head); font-size: 15px; font-weight: 700;
    color: #fff; margin: 0 0 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ecp-profile-hero-email { font-size: 11px; color: rgba(255,255,255,.75); margin: 0 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecp-profile-hero-badge {
    display: inline-flex; align-items: center; gap: 3px;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px; padding: 2px 8px; font-size: 10px; font-weight: 600;
    color: rgba(255,255,255,.9); text-transform: uppercase; letter-spacing: .5px;
}
.ecp-profile-avatar-hint-row { text-align: center; }
.ecp-profile-avatar-hint { font-size: 10px; color: rgba(255,255,255,.55); font-style: italic; }
#ecp-avatar-msg { margin-top: 3px; font-size: 12px; }

/* ══ PROFILE BODY ══ */
.ecp-profile-body {
    padding: clamp(10px, 3vw, 16px);
    padding-bottom: 32px;
    flex: 1;
    background: #f4f7fb !important;
}
#ecp-app.ecp-dark .ecp-profile-body { background: #0d1526 !important; }

/* ══ SECTION CARDS ══ */
.ecp-profile-card {
    background: #ffffff !important;
    border: 1.5px solid #d0dae8 !important;
    border-radius: 10px;
    padding: clamp(10px, 3vw, 14px) clamp(10px, 3vw, 14px) 4px;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
#ecp-app.ecp-dark .ecp-profile-card {
    background: #162035 !important;
    border-color: rgba(99,140,200,.3) !important;
}
.ecp-profile-card-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .8px; color: var(--c-teal2);
    margin: 0 0 10px; padding-bottom: 8px;
    border-bottom: 1.5px solid #e2eaf3;
    display: flex; align-items: center; gap: 6px;
}
#ecp-app.ecp-dark .ecp-profile-card-title { border-bottom-color: rgba(255,255,255,.08); }

/* ══ FIELD STYLES ══ */
.ecp-pf-field { margin-bottom: 10px; }

.ecp-pf-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;           /* let badge wrap below on very narrow */
    gap: 4px;
    font-size: 10px; font-weight: 700; color: #6b82a0;
    text-transform: uppercase; letter-spacing: .6px; margin-bottom: 5px;
    line-height: 1.3;
}
#ecp-app.ecp-dark .ecp-pf-label { color: #7a94b5; }
.ecp-pf-ico { font-size: 11px; line-height: 1; flex-shrink: 0; }

/* Admin-only badge — now properly inline-flex in the flex label row */
.ecp-pf-admin-note {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 8px; font-weight: 800;
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.3);
    color: #ef4444;
    border-radius: 4px; padding: 1px 5px;
    text-transform: uppercase; letter-spacing: .5px;
    white-space: nowrap; flex-shrink: 0;
    vertical-align: middle;
    line-height: 1.4;
}

.ecp-pf-input-wrap { position: relative; }
.ecp-pf-input-wrap input,
.ecp-pf-input-wrap select {
    width: 100%; box-sizing: border-box;
    background: #f8fafc !important;
    border: 1.5px solid #c5d3e4 !important;
    border-radius: 7px;
    padding: clamp(7px, 1.5vw, 9px) clamp(8px, 2vw, 12px);
    color: #1e293b !important; font-family: var(--ff-body);
    font-size: clamp(12px, 1.2vw, 13px);
    transition: border-color .18s, box-shadow .18s;
    -webkit-appearance: none; appearance: none;
}
#ecp-app.ecp-dark .ecp-pf-input-wrap input,
#ecp-app.ecp-dark .ecp-pf-input-wrap select {
    background: #1a2a42 !important;
    border-color: rgba(99,140,200,.4) !important;
    color: #e2ecf8 !important;
}
.ecp-pf-input-wrap input:focus,
.ecp-pf-input-wrap select:focus {
    outline: none;
    border-color: #0d7377 !important;
    box-shadow: 0 0 0 3px rgba(13,115,119,.14) !important;
    background: #fff !important;
}
#ecp-app.ecp-dark .ecp-pf-input-wrap input:focus,
#ecp-app.ecp-dark .ecp-pf-input-wrap select:focus {
    background: #1f3256 !important;
    border-color: #14a9ae !important;
    box-shadow: 0 0 0 3px rgba(20,169,174,.15) !important;
}
.ecp-pf-input-wrap input::placeholder { color: #9fb3ca !important; }
#ecp-app.ecp-dark .ecp-pf-input-wrap input::placeholder { color: #4a6080 !important; }
.ecp-pf-input-wrap select option { background: #1a2a42; }

/* Read-only email field */
.ecp-pf-readonly-wrap input[readonly] {
    background: #edf2f7 !important;
    border-color: #c5d3e4 !important;
    color: #64748b !important;
    cursor: not-allowed; opacity: .85;
}
#ecp-app.ecp-dark .ecp-pf-readonly-wrap input[readonly] {
    background: #111d2e !important;
    color: #4a6080 !important;
}

/* Custom select arrow */
.ecp-pf-select-wrap { position: relative; }
.ecp-pf-select-wrap select { padding-right: 28px; }
.ecp-pf-select-arrow {
    position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
    font-size: 11px; color: #6b82a0; pointer-events: none;
}
#ecp-app.ecp-dark .ecp-pf-select-arrow { color: #7a94b5; }

/* ══ RESPONSIVE GRID ══
   Auto-stacks: 2-col when panel is wide, 1-col on narrow phones */
.ecp-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 0 10px;
}

/* ══ SAVE BUTTON ══ */
.ecp-profile-save-btn {
    margin-top: 6px; width: 100%; padding: 12px; font-size: 14px; font-weight: 700;
    border-radius: 9px; letter-spacing: .2px;
    background: linear-gradient(135deg, #0d7377, #14a9ae) !important;
    color: #fff !important; border: none !important;
    box-shadow: 0 4px 16px rgba(13,115,119,.3);
    transition: opacity .18s, box-shadow .18s; cursor: pointer;
}
.ecp-profile-save-btn:hover { opacity: .91; box-shadow: 0 6px 20px rgba(13,115,119,.42); }

#ecp-profile-msg { margin-top: 12px; }

/* profile panel — responsive via clamp() + auto-fit grid */


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — New elements (wallet, pricing packs, cover sync)
   Added v2.2.0 — covers all breakpoints
══════════════════════════════════════════════════════════ */

/* ── 900px: tablet ── */
@media (max-width: 900px) {
    /* Pricing packs/subs — single column */
    .ecp-pricing-packs,
    .ecp-pricing-subs { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

    /* Wallet card */
    .ecp-wallet-card { padding: 20px 16px; }
    .ecp-wallet-input-wrap { flex-wrap: wrap; gap: 8px; }
    .ecp-wallet-input { width: 120px; }
    .ecp-wallet-preview { font-size: 13px; }

    /* Pricing section title */
    .ecp-pricing-section-title { flex-wrap: wrap; gap: 4px; font-size: 14px; }

    /* Cover notice */
    .ecp-cover-style-notice { font-size: 12px; }
}

/* ── 768px: large phone ── */
@media (max-width: 768px) {
    /* Packs/subs full width */
    .ecp-pricing-packs,
    .ecp-pricing-subs { max-width: 100%; }

    /* Wallet quick picks wrap tightly */
    .ecp-wallet-quick-picks { gap: 7px; }
    .ecp-wallet-pick { padding: 7px 12px; font-size: 12px; }

    /* Wallet input row stacks */
    .ecp-wallet-input-row { margin-bottom: 16px; }
    .ecp-wallet-input-wrap { flex-direction: column; align-items: flex-start; gap: 6px; }
    .ecp-wallet-input { width: 100%; font-size: 22px; box-sizing: border-box; }
    .ecp-wallet-preview { font-size: 15px; font-weight: 700; }
    .ecp-wallet-dollar { font-size: 24px; }

    /* Wallet rate banner wraps */
    .ecp-wallet-rate-banner { font-size: 12px; padding: 8px 12px; }

    /* Top-up button */
    .ecp-wallet-topup-btn { font-size: 15px; padding: 13px; }

    /* Payment status */
    #ecp-payment-status { font-size: 13px; margin: 0 0 10px; }

    /* PayPal button container */
    #ecp-paypal-button-container { max-width: 100% !important; }
}

/* ── 600px: phone ── */
@media (max-width: 600px) {
    /* Wallet card */
    .ecp-wallet-card { padding: 16px 12px; }
    .ecp-wallet-rate-banner { font-size: 11px; }

    /* Quick picks — 2 per row */
    .ecp-wallet-quick-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .ecp-wallet-label { grid-column: 1 / -1; }
    .ecp-wallet-pick { text-align: center; }
    .ecp-wallet-pick span { display: inline; margin-left: 4px; }

    /* Price cards */
    .ecp-price-card { padding: 20px 16px; }
    .ecp-price-name { font-size: 18px; }
    .ecp-price-amt  { font-size: 28px; }

    /* Pricing section title */
    .ecp-pricing-section-title { font-size: 13px; }
    .ecp-pricing-subtitle { font-size: 11px; }

    /* Cover style notice */
    .ecp-cover-style-notice { font-size: 12px; padding: 8px 12px; }

    /* Free plan row */
    .ecp-price-free-row { font-size: 12px; padding: 12px; }
}

/* ── 480px: small phone ── */
@media (max-width: 480px) {
    /* Wallet */
    .ecp-wallet-card { padding: 14px 10px; }
    .ecp-wallet-topup-btn { font-size: 14px; padding: 12px; }
    .ecp-wallet-input { font-size: 20px; padding: 8px 10px; }

    /* Modal plans stack tighter */
    .ecp-modal-plan-price { font-size: 13px; }
    .ecp-modal-plan-credits { font-size: 18px; }
}

/* ── 380px: very small phone ── */
@media (max-width: 380px) {
    .ecp-wallet-quick-picks { grid-template-columns: 1fr 1fr; }
    .ecp-wallet-pick { padding: 6px 8px; font-size: 11px; }
    .ecp-pricing-section-title { font-size: 12px; }
    .ecp-price-amt { font-size: 24px; }
    .ecp-wallet-input { font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════
   M-PESA — Kenya-only payment section
   Default display:none set in HTML — JS reveals only after Kenya confirmed
══════════════════════════════════════════════════════════ */
#ecp-mpesa-section { transition: opacity .3s ease; }
.ecp-mpesa-card {
    background: linear-gradient(135deg, rgba(0,100,0,.06), rgba(13,115,119,.06));
    border: 2px solid rgba(0,140,0,.25);
    border-radius: var(--r);
    padding: 24px;
    margin-top: 4px;
}
.ecp-mpesa-rate-banner {
    background: rgba(0,140,0,.08);
    border: 1px solid rgba(0,140,0,.2);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--c-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}
/* Step-by-step instructions */
.ecp-mpesa-instructions {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ecp-mpesa-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;
    background: var(--c-bg3);
    border-radius: 8px;
    border-left: 3px solid #00c200;
}
.ecp-mpesa-num {
    background: #00c200;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.ecp-mpesa-step strong { display: block; font-size: 13px; color: var(--c-text); margin-bottom: 4px; }
.ecp-mpesa-step p { margin: 0; font-size: 12px; color: var(--c-muted); }
.ecp-mpesa-number {
    font-size: 22px;
    font-weight: 900;
    color: #00a000;
    font-family: monospace;
    letter-spacing: 2px;
    margin: 4px 0;
}
.ecp-mpesa-confirm-wrap {
    margin-top: 20px;
    padding: 16px;
    background: var(--c-bg2);
    border-radius: 10px;
    border: 1px solid var(--c-border);
}
.ecp-mpesa-code-input {
    background: var(--c-bg3);
    border: 1.5px solid var(--c-field-border);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--c-text);
    font-size: 16px;
    font-weight: 700;
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.ecp-mpesa-code-input:focus { outline: none; border-color: #00c200; }
.ecp-mpesa-not-configured {
    padding: 16px;
    background: rgba(255,152,0,.08);
    border: 1px solid rgba(255,152,0,.3);
    border-radius: 8px;
    font-size: 13px;
    color: var(--c-muted);
}
/* Responsive */
@media (max-width: 768px) {
    .ecp-mpesa-card { padding: 16px 12px; }
    .ecp-mpesa-number { font-size: 18px; letter-spacing: 1px; }
    .ecp-mpesa-step { padding: 10px 12px; gap: 10px; }
    .ecp-mpesa-confirm-wrap > div { flex-direction: column; }
    .ecp-mpesa-code-input { width: 100%; box-sizing: border-box; }
    #ecp-mpesa-confirm-btn { width: 100%; }
}
@media (max-width: 480px) {
    .ecp-mpesa-number { font-size: 16px; }
    .ecp-mpesa-step strong { font-size: 12px; }
}

/* ══ STK Push UI ══ */
.ecp-stk-push-wrap {
    background: var(--c-bg3);
    border: 2px solid rgba(0,160,0,.3);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}
.ecp-stk-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ecp-stk-badge {
    background: #00c200;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: .5px;
}
.ecp-stk-desc { font-size: 13px; color: var(--c-muted); margin: 0 0 16px; }
.ecp-stk-field { margin-bottom: 14px; }
.ecp-stk-phone-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--c-field-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--c-field-bg);
}
.ecp-stk-prefix {
    background: rgba(0,140,0,.1);
    color: #00a000;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 12px;
    white-space: nowrap;
    border-right: 1px solid var(--c-field-border);
}
.ecp-stk-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--c-text);
    font-size: 16px;
    font-weight: 600;
    padding: 10px 12px;
    font-family: monospace;
    letter-spacing: 1px;
}
.ecp-stk-hint { font-size: 11px; color: var(--c-dim); display: block; margin-top: 4px; }
.ecp-mpesa-divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}
.ecp-mpesa-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--c-border);
}
.ecp-mpesa-divider span {
    position: relative;
    background: var(--c-bg2);
    padding: 0 14px;
    font-size: 12px;
    color: var(--c-dim);
}
@media (max-width: 600px) {
    .ecp-stk-push-wrap { padding: 14px 12px; }
    .ecp-stk-title { font-size: 14px; }
    .ecp-stk-input { font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════
   REFERENCE NATIONALITY — priority banner, toggle & flag chips
══════════════════════════════════════════════════════════ */

/* ── Priority banner above results ── */
.ecp-nat-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin: 0 0 16px;
  border-radius: 12px;
  border: 1px solid var(--c-border);
  animation: ecpNatFade .35s ease;
}
@keyframes ecpNatFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.ecp-nat-banner-country {
  background: linear-gradient(135deg, rgba(13,115,119,0.12), rgba(20,169,174,0.06));
  border-color: rgba(13,115,119,0.35);
}
.ecp-nat-banner-global {
  background: linear-gradient(135deg, rgba(176,125,30,0.12), rgba(201,146,43,0.05));
  border-color: rgba(176,125,30,0.35);
}
.ecp-nat-banner-main {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  flex: 1 1 320px;
}
.ecp-nat-banner-flag {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}
.ecp-nat-banner-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ecp-nat-banner-txt strong { font-size: 14.5px; color: var(--c-text); font-weight: 700; }
.ecp-nat-banner-txt span { font-size: 12.5px; color: var(--c-dim); line-height: 1.45; }

/* ── Toggle button ── */
.ecp-nat-toggle {
  flex-shrink: 0;
  background: var(--c-bg2);
  color: var(--c-teal);
  border: 1.5px solid var(--c-teal);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.ecp-nat-toggle:hover {
  background: var(--c-teal);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13,115,119,0.3);
}
.ecp-nat-toggle:empty { display: none; }

/* ── Per-reference flag chip ── */
.ecp-nat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--c-bg3);
  color: var(--c-muted);
  border: 1px solid var(--c-border);
  letter-spacing: .01em;
}
/* Chip highlighted when it matches the prioritised country */
.ecp-nat-chip.ecp-nat-match {
  background: rgba(13,115,119,0.14);
  color: var(--c-teal);
  border-color: rgba(13,115,119,0.45);
  box-shadow: 0 0 0 1px rgba(13,115,119,0.15);
}
/* Neutral chip when author country is genuinely unknown */
.ecp-nat-chip.ecp-nat-unknown {
  background: transparent;
  color: var(--c-dim);
  border-style: dashed;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════
   HUMAN VERIFICATION ADD-ON CARD
══════════════════════════════════════════════════════════ */
.ecp-verify-card {
  position: relative;
  margin: 16px 0 6px;
  border-radius: 18px;
  padding: 2px; /* room for the animated gradient border */
  background: linear-gradient(125deg, var(--c-gold2), var(--c-teal2), var(--c-gold), var(--c-teal));
  background-size: 300% 300%;
  animation: ecpVerifyIn .5s cubic-bezier(.2,.8,.2,1), ecpVerifyBorder 8s ease infinite;
  box-shadow: 0 10px 34px rgba(13,115,119,0.18), 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
}
@keyframes ecpVerifyIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ecpVerifyBorder { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* Soft moving glow behind the content */
.ecp-verify-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 15% 0%, rgba(20,169,174,0.18), transparent 60%),
              radial-gradient(120% 80% at 85% 100%, rgba(201,146,43,0.16), transparent 60%);
  animation: ecpVerifyGlow 9s ease-in-out infinite alternate;
}
@keyframes ecpVerifyGlow { from { opacity:.6; transform:scale(1); } to { opacity:1; transform:scale(1.06); } }

.ecp-verify-inner {
  position: relative; z-index: 1;
  border-radius: 16px;
  padding: 20px 22px;
  background: var(--c-bg2, #fff);
}

/* Badge with pulsing dot */
.ecp-verify-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-teal); background: rgba(13,115,119,.10);
  border: 1px solid rgba(13,115,119,.28);
  border-radius: 999px; padding: 4px 12px; margin-bottom: 14px;
}
.ecp-verify-badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-teal2);
  box-shadow: 0 0 0 0 rgba(20,169,174,.6);
  animation: ecpVerifyPulse 1.8s infinite;
}
@keyframes ecpVerifyPulse {
  0%{box-shadow:0 0 0 0 rgba(20,169,174,.55)}
  70%{box-shadow:0 0 0 8px rgba(20,169,174,0)}
  100%{box-shadow:0 0 0 0 rgba(20,169,174,0)}
}

/* Rotator — the part that fades between messages */
.ecp-verify-rotator { transition: opacity .28s ease, transform .28s ease; }
.ecp-verify-rotator.ecp-verify-fading { opacity: 0; transform: translateY(-6px); }
.ecp-verify-rotator.ecp-verify-fadein { animation: ecpVerifyMsgIn .5s cubic-bezier(.2,.8,.2,1); }
@keyframes ecpVerifyMsgIn { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:none;} }

.ecp-verify-header { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 9px; }
.ecp-verify-icon {
  font-size: 24px; line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
  animation: ecpVerifyEye 4s ease-in-out infinite;
}
@keyframes ecpVerifyEye { 0%,90%,100%{transform:none} 94%{transform:scaleY(.15)} }
.ecp-verify-head {
  margin: 0; font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--c-text);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.ecp-verify-human {
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: linear-gradient(135deg, var(--c-gold), var(--c-gold2));
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(176,125,30,.35);
}
.ecp-verify-desc { margin: 0 0 14px; font-size: 13.5px; line-height: 1.65; color: var(--c-muted); }
.ecp-verify-desc em { font-style: normal; font-weight: 700; color: var(--c-teal); }
.ecp-verify-desc strong { color: var(--c-text); font-weight: 700; }

/* Subheadline — sits under the header, bold and inviting */
.ecp-verify-sub {
  margin: 0 0 10px; font-size: 14px; font-weight: 700; line-height: 1.45;
  color: var(--c-text);
  background: linear-gradient(90deg, var(--c-teal), var(--c-gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Closing persuasion line — a highlighted call-to-conviction */
.ecp-verify-close {
  margin: 14px 0 0; padding: 11px 14px;
  font-size: 13px; font-weight: 700; line-height: 1.5; font-style: italic;
  color: var(--c-text);
  background: linear-gradient(135deg, rgba(20,169,174,0.10), rgba(201,146,43,0.10));
  border-left: 3px solid var(--c-teal2);
  border-radius: 8px;
}

.ecp-verify-checklist { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 9px; }
.ecp-verify-checklist li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; color: var(--c-muted); line-height: 1.45;
  animation: ecpVerifyCheckIn .5s ease both;
}
.ecp-verify-checklist li:nth-child(1){ animation-delay:.05s }
.ecp-verify-checklist li:nth-child(2){ animation-delay:.14s }
.ecp-verify-checklist li:nth-child(3){ animation-delay:.23s }
.ecp-verify-checklist li:nth-child(4){ animation-delay:.32s }
@keyframes ecpVerifyCheckIn { from{opacity:0;transform:translateX(-6px)} to{opacity:1;transform:none} }
.ecp-verify-check-ic {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: linear-gradient(135deg, var(--c-teal), var(--c-teal2));
  color: #fff; font-size: 11px; font-weight: 900;
  box-shadow: 0 2px 5px rgba(13,115,119,.35);
}
.ecp-verify-checklist strong { color: var(--c-text); }

/* Rotation progress dots */
.ecp-verify-dots { display: flex; gap: 6px; margin: 14px 0 4px; }
.ecp-verify-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(13,115,119,.22); transition: all .4s ease;
}
.ecp-verify-dot-on { background: var(--c-teal); width: 20px; border-radius: 999px; }

.ecp-verify-action-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(13,115,119,.14);
}
.ecp-verify-price { font-size: 14px; font-weight: 800; color: var(--c-text); }
.ecp-verify-value { font-weight: 500; color: var(--c-dim); font-size: 12px; }

.ecp-verify-btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ecp-verify-btn {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--c-teal), var(--c-teal2));
  color: #fff; border: none; border-radius: 12px;
  padding: 12px 22px; font-size: 14px; font-weight: 800; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
  box-shadow: 0 6px 18px rgba(13,115,119,0.38);
}
/* Shine sweep across the button */
.ecp-verify-btn::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg); animation: ecpVerifyShine 3.5s ease-in-out infinite;
}
@keyframes ecpVerifyShine { 0%,60%{left:-120%} 85%,100%{left:130%} }
.ecp-verify-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(13,115,119,0.5); }
.ecp-verify-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.ecp-verify-btn.ecp-verify-need-credits {
  background: linear-gradient(135deg, #e65100, #ff8f00);
  box-shadow: 0 6px 18px rgba(230,81,0,0.4);
}
.ecp-verify-skip {
  background: none; border: none; color: var(--c-dim); font-size: 12.5px;
  cursor: pointer; padding: 6px 4px; transition: color .15s ease;
}
.ecp-verify-skip:hover { color: var(--c-muted); text-decoration: underline; }

.ecp-verify-status {
  margin-top: 14px; padding: 12px 15px; border-radius: 10px;
  font-size: 13px; line-height: 1.5;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .ecp-verify-card, .ecp-verify-glow, .ecp-verify-badge-dot,
  .ecp-verify-icon, .ecp-verify-btn::after, .ecp-verify-checklist li { animation: none !important; }
  .ecp-verify-rotator { transition: none !important; }
}

@media (max-width: 600px) {
  .ecp-verify-inner { padding: 16px 15px; }
  .ecp-verify-head { font-size: 15.5px; }
  .ecp-verify-btn { width: 100%; justify-content: center; }
  .ecp-verify-action-row { gap: 10px; }
}

/* ══════════════════════════════════════════════════════════
   COPY / EXPORT GATING — locked button + tooltip
══════════════════════════════════════════════════════════ */
.ecp-copy-btn.ecp-copy-locked {
  opacity: .65;
  cursor: not-allowed;
  position: relative;
  filter: grayscale(0.4);
}
.ecp-copy-btn.ecp-copy-locked:hover { opacity: .75; }

/* Tooltip on hover of locked copy button */
.ecp-copy-btn.ecp-copy-locked::after {
  content: "🔒 Premium — needs subscription or credits";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1a2233;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  padding: 7px 11px;
  border-radius: 7px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 60;
}
.ecp-copy-btn.ecp-copy-locked::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: #1a2233;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 60;
}
.ecp-copy-btn.ecp-copy-locked:hover::after,
.ecp-copy-btn.ecp-copy-locked:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ══════════════════════════════════════════════════════════
   NATIONALITY CHIP — CONFIDENCE TIERS
   verified = solid (real affiliation) · journal = outlined (publisher)
   guess = dashed amber (name inference, low confidence)
══════════════════════════════════════════════════════════ */
.ecp-nat-chip.ecp-nat-verified {
  background: var(--c-bg3);
  color: var(--c-muted);
  border: 1px solid var(--c-border);
}
.ecp-nat-chip.ecp-nat-verified.ecp-nat-match {
  background: rgba(13,115,119,0.14);
  color: var(--c-teal);
  border-color: rgba(13,115,119,0.45);
  box-shadow: 0 0 0 1px rgba(13,115,119,0.15);
}
/* Journal/publisher country — clearly secondary */
.ecp-nat-chip.ecp-nat-journal {
  background: transparent;
  color: #5b6b8c;
  border: 1px solid #c3ccdd;
  font-weight: 600;
}
.ecp-nat-chip.ecp-nat-journal.ecp-nat-match {
  color: var(--c-teal);
  border-color: rgba(13,115,119,0.4);
}
/* Name-inference guess — dashed amber, visibly uncertain */
.ecp-nat-chip.ecp-nat-guess {
  background: rgba(176,125,30,0.08);
  color: #9a6a15;
  border: 1px dashed rgba(176,125,30,0.55);
  font-weight: 600;
}

/* Legend row under the nationality banner */
.ecp-nat-legend {
  display: flex;
  align-items: center;
  gap: 6px 14px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
  font-size: 11px;
  color: var(--c-dim);
  width: 100%;
}
.ecp-nat-legend .ecp-nat-chip { margin-right: 2px; }

/* ══════════════════════════════════════════════════════════
   PRIORITY-CHANGED TOAST (university changed -> refs may re-rank)
══════════════════════════════════════════════════════════ */
.ecp-priority-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 440px;
  width: calc(100% - 32px);
  padding: 14px 16px;
  background: #10233a;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}
.ecp-priority-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ecp-priority-toast-ico { font-size: 22px; flex-shrink: 0; }
.ecp-priority-toast-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ecp-priority-toast-body strong { font-size: 13.5px; font-weight: 700; }
.ecp-priority-toast-body span { font-size: 12px; color: #b9c6d6; line-height: 1.4; }
.ecp-priority-toast-btn {
  flex-shrink: 0;
  background: var(--c-teal, #0d7377);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s ease;
}
.ecp-priority-toast-btn:hover { filter: brightness(1.15); }
.ecp-priority-toast-x {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #8fa0b3;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.ecp-priority-toast-x:hover { color: #fff; }

@media (max-width: 480px) {
  .ecp-priority-toast { flex-wrap: wrap; }
  .ecp-priority-toast-btn { order: 3; width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   UNIVERSITY AUTOCOMPLETE DROPDOWN — ensure clickable & scrollable
══════════════════════════════════════════════════════════ */
.ecp-uni-suggestions {
  -webkit-overflow-scrolling: touch;   /* smooth scroll on mobile */
}
.ecp-uni-opt {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background .12s ease;
  touch-action: manipulation;  /* removes 300ms tap delay, prevents tap cancel */
  min-height: 44px;            /* comfortable mobile tap target */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.ecp-uni-opt:hover,
.ecp-uni-opt:active {
  background: #f5f7ff !important;
}
/* Inner text must not intercept the click — let it bubble to .ecp-uni-opt */
.ecp-uni-opt-name,
.ecp-uni-opt-country {
  pointer-events: none;
}

/* University "Saved ✓" inline cue */
.ecp-uni-saved-cue {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #0a7d33;
  background: rgba(10,125,51,.10);
  border: 1px solid rgba(10,125,51,.3);
  border-radius: 999px;
  padding: 2px 10px;
  animation: ecpSavedPop .25s ease;
}
@keyframes ecpSavedPop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ══════════════════════════════════════════════════════════
   MOBILE DENSITY — compress the setup wizard so it isn't so tall.
   Structural responsiveness already exists; this tightens vertical
   spacing and keeps paired fields side-by-side where they fit.
══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Tighter wizard spacing */
  .ecp-wizard-step   { margin-bottom: 6px; border-radius: 9px; }
  .ecp-wizard-header { padding: 12px 13px; gap: 9px; }
  .ecp-wizard-body   { padding: 0 13px 13px; }
  .ecp-wizard-fields { margin-bottom: 10px; }
  .ecp-field         { margin-bottom: 11px; }
  .ecp-field label   { margin-bottom: 4px; font-size: 10.5px; }
  .ecp-field input,
  .ecp-field textarea,
  .ecp-field select  { padding: 10px 11px; font-size: 14px; }

  /* Keep the two-up rows two-up on small phones instead of stacking,
     down to a sensible minimum, so the form doesn't double in height. */
  .ecp-row2 {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Reduce big section paddings that make the page feel endless */
  .ecp-panel      { padding-left: 0; padding-right: 0; }
  .ecp-dashboard  { padding: 10px; gap: 8px; }

  /* Pages stepper + word-count chip wrap tightly */
  .ecp-pages-row  { flex-wrap: wrap; gap: 8px; }
}

/* Very small phones — allow the tightest rows to stack only when truly needed */
@media (max-width: 380px) {
  .ecp-row2 { grid-template-columns: 1fr; gap: 8px; }
  .ecp-wizard-header { padding: 11px; }
  .ecp-wizard-body   { padding: 0 11px 11px; }
}

/* Error state for the university saved cue */
.ecp-uni-saved-cue.ecp-uni-saved-err {
  color: #b32d2e;
  background: rgba(179,45,46,.10);
  border-color: rgba(179,45,46,.3);
}

/* Essay Generation ID line in history cards */
.ecp-history-eid {
  font-size: 11.5px;
  color: var(--c-teal, #0d7377);
  margin: 2px 0 6px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .02em;
}
.ecp-history-eid strong { font-weight: 700; }



/* ══════════════════════════════════════════════════════════
   VERIFICATION — COLLAPSED TEASER + EXPAND/COLLAPSE
══════════════════════════════════════════════════════════ */
.ecp-verify-wrap { margin: 16px 0 6px; }
.ecp-verify-card.ecp-verify-collapsed { display: none; }

/* Compact, colorful teaser button */
.ecp-verify-teaser {
  display: flex; align-items: center; gap: 13px; width: 100%;
  text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: 14px;
  border: 1.5px solid rgba(13,115,119,.22);
  background: linear-gradient(120deg, rgba(20,169,174,0.08), rgba(201,146,43,0.07));
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ecp-verify-teaser:hover {
  transform: translateY(-1px);
  border-color: rgba(13,115,119,.4);
  box-shadow: 0 8px 22px rgba(13,115,119,0.14);
}
.ecp-verify-teaser-eye {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: linear-gradient(135deg, var(--c-teal), var(--c-teal2));
  box-shadow: 0 4px 12px rgba(13,115,119,.3);
  animation: ecpVerifyPulse 2.2s infinite;
}
.ecp-verify-teaser-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ecp-verify-teaser-title { font-size: 14px; font-weight: 800; color: var(--c-text); }
.ecp-verify-teaser-sub { font-size: 12px; color: var(--c-muted); line-height: 1.4; }
.ecp-verify-teaser-cta {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--c-gold), var(--c-gold2));
  color: #fff; font-size: 12.5px; font-weight: 800;
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(176,125,30,.35);
}

/* Close (×) inside the expanded card */
.ecp-verify-close-x {
  position: absolute; top: 12px; right: 14px; z-index: 3;
  width: 28px; height: 28px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(0,0,0,.06); color: var(--c-muted);
  font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.ecp-verify-close-x:hover { background: rgba(0,0,0,.12); color: var(--c-text); }

@media (max-width: 600px) {
  .ecp-verify-teaser { flex-wrap: wrap; }
  .ecp-verify-teaser-cta { width: 100%; text-align: center; order: 3; margin-top: 4px; }
}

/* ══════════════════════════════════════════════════════════
   SERVICE + EDITOR PICKER (inside verification card)
══════════════════════════════════════════════════════════ */
.ecp-verify-picker { margin: 18px 0 4px; }
.ecp-svc-label {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  color: var(--c-teal); margin: 0 0 10px;
}
.ecp-svc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 9px; margin: 0 0 8px;
}
.ecp-svc-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 11px 13px; cursor: pointer; text-align: left;
  border-radius: 12px; border: 1.5px solid rgba(13,115,119,.18);
  background: #fff; transition: all .15s ease;
}
.ecp-svc-chip:hover { border-color: var(--c-teal2); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13,115,119,.12); }
.ecp-svc-chip.ecp-svc-on {
  border-color: var(--c-teal); background: linear-gradient(135deg, rgba(20,169,174,.10), rgba(13,115,119,.06));
  box-shadow: 0 4px 14px rgba(13,115,119,.18);
}
.ecp-svc-ic { font-size: 20px; }
.ecp-svc-name { font-size: 12.5px; font-weight: 700; color: var(--c-text); line-height: 1.25; }
.ecp-svc-cost {
  font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--c-gold), var(--c-gold2));
  padding: 1px 8px; border-radius: 999px;
}
.ecp-svc-chip.ecp-svc-on .ecp-svc-cost { background: linear-gradient(135deg, var(--c-teal), var(--c-teal2)); }
.ecp-svc-blurb { font-size: 12.5px; color: var(--c-muted); line-height: 1.5; margin: 0 0 18px; font-style: italic; }

/* Compact HORIZONTAL editor cards — 2 columns on desktop, 1 on mobile.
   Photo left, name/spec/blurb right — far less vertical space. */
.ecp-editor-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin: 0 0 6px;
}
.ecp-editor-card {
  position: relative; cursor: pointer; text-align: left;
  padding: 11px 12px 11px 11px; border-radius: 13px;
  border: 1.5px solid rgba(13,115,119,.15); background: #fff;
  transition: all .15s ease;
  display: flex; flex-direction: row; align-items: flex-start; gap: 11px;
}
.ecp-editor-card:hover { border-color: var(--c-teal2); transform: translateY(-1px); box-shadow: 0 5px 14px rgba(13,115,119,.14); }
.ecp-editor-card.ecp-editor-on {
  border-color: var(--c-teal);
  background: linear-gradient(135deg, rgba(23,163,74,.09), rgba(20,169,174,.06));
  box-shadow: 0 6px 18px rgba(13,115,119,.2);
}
.ecp-editor-photo {
  flex-shrink: 0;
  width: 50px; height: 50px; border-radius: 50%; overflow: hidden;
  display: block; border: 2.5px solid rgba(20,169,174,.4); margin-top: 2px;
}
.ecp-editor-card.ecp-editor-on .ecp-editor-photo { border-color: var(--c-teal); }
.ecp-editor-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ecp-editor-fallback {
  width: 100%; height: 100%; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-teal), var(--c-teal2));
  color: #fff; font-size: 20px; font-weight: 800;
}
/* Text column */
.ecp-editor-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ecp-editor-name { font-size: 13.5px; font-weight: 800; color: var(--c-text); line-height: 1.2; }
.ecp-editor-spec {
  font-size: 11px; font-weight: 800; line-height: 1.25; color: var(--c-teal);
  margin-bottom: 4px;
}
.ecp-editor-card.ecp-editor-on .ecp-editor-spec { color: #17a34a; }
/* "Expert in: …" role line (replaces the old academic-field spec) */
.ecp-editor-roles {
  font-size: 10.5px; font-weight: 700; line-height: 1.3; color: var(--c-teal);
  margin-bottom: 3px;
}
.ecp-editor-card.ecp-editor-on .ecp-editor-roles { color: #17a34a; }
/* Per-editor price badge — reflects the selected service's cost */
.ecp-editor-price {
  display: none; align-self: flex-start;
  font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--c-gold), var(--c-gold2));
  padding: 1px 9px; border-radius: 999px; margin: 1px 0 6px;
}
.ecp-editor-card.ecp-editor-available .ecp-editor-price { display: inline-block; }
.ecp-editor-card.ecp-editor-on .ecp-editor-price { background: linear-gradient(135deg, var(--c-teal), var(--c-teal2)); }
/* Coverage line — is the student covered for this pick? */
.ecp-editor-cover {
  font-size: 12px; font-weight: 600; line-height: 1.45;
  padding: 9px 13px; border-radius: 10px; margin: 6px 0 14px;
}
.ecp-editor-cover.ecp-cover-ok    { background: rgba(23,163,74,.1);  color: #17a34a; border: 1px solid rgba(23,163,74,.28); }
.ecp-editor-cover.ecp-cover-short { background: rgba(230,81,0,.1);   color: #e65100; border: 1px solid rgba(230,81,0,.3); }
.ecp-editor-blurb {
  font-size: 11px; color: #5a6472; line-height: 1.45;
  display: none; /* shown only when available */
  margin-bottom: 8px;
}
.ecp-editor-card.ecp-editor-available .ecp-editor-blurb { display: block; }

/* Small colorful "Hire Editor Now" button — only on available cards */
.ecp-editor-hire {
  display: none; align-self: flex-start;
  font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--c-gold), var(--c-gold2));
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 3px 9px rgba(176,125,30,.34);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  white-space: nowrap;
}
.ecp-editor-card.ecp-editor-available .ecp-editor-hire { display: inline-block; }
.ecp-editor-hire:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--c-teal), var(--c-teal2));
  box-shadow: 0 5px 14px rgba(13,115,119,.4);
}
.ecp-editor-card.ecp-editor-on .ecp-editor-hire {
  background: linear-gradient(135deg, #17a34a, #22c55e);
  box-shadow: 0 4px 12px rgba(23,163,74,.4);
}

/* "Available" ribbon */
.ecp-editor-avail {
  position: absolute; top: -8px; right: 10px;
  font-size: 8px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase;
  color: #fff; background: linear-gradient(135deg, #17a34a, #22c55e);
  padding: 2px 9px; border-radius: 999px; display: none;
  box-shadow: 0 2px 6px rgba(23,163,74,.4);
  animation: ecpAvailPop .3s ease;
}
@keyframes ecpAvailPop { from{transform:scale(.7);opacity:0} to{transform:scale(1);opacity:1} }
.ecp-editor-card.ecp-editor-available .ecp-editor-avail { display: inline-block; }
.ecp-editor-card.ecp-editor-available { border-color: rgba(23,163,74,.32); }
.ecp-editor-card.ecp-editor-available:hover { border-color: #17a34a; box-shadow: 0 6px 16px rgba(23,163,74,.18); }
.ecp-editor-card.ecp-editor-unavailable {
  opacity: .4; filter: grayscale(.75); cursor: not-allowed; pointer-events: none;
}
.ecp-editor-card.ecp-editor-unavailable .ecp-editor-blurb,
.ecp-editor-card.ecp-editor-unavailable .ecp-editor-hire { display: none; }

/* ── Gating: no service chosen yet → the whole expert step is locked ── */
.ecp-editor-card.ecp-editor-locked {
  opacity: .5; filter: grayscale(.55); cursor: not-allowed; pointer-events: none;
  border-color: rgba(13,115,119,.12);
}
.ecp-editor-card.ecp-editor-locked:hover { transform: none; box-shadow: none; }
.ecp-editor-card.ecp-editor-locked .ecp-editor-hire,
.ecp-editor-card.ecp-editor-locked .ecp-editor-blurb,
.ecp-editor-card.ecp-editor-locked .ecp-editor-avail,
.ecp-editor-card.ecp-editor-locked .ecp-editor-price { display: none; }

/* ── Gating: service chosen but this expert NOT selected → Hire is inert.
   Taps on the greyed Hire fall THROUGH to the card, selecting the expert,
   which flips this rule off and turns Hire green + live. ── */
.ecp-editor-card.ecp-editor-available:not(.ecp-editor-on) .ecp-editor-hire {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  cursor: default;
  pointer-events: none;
  transform: none;
}
.ecp-editor-card.ecp-editor-on .ecp-editor-hire { pointer-events: auto; cursor: pointer; }

/* ── Guided "what next" step dots on the four step labels ── */
.ecp-svc-step1::before, .ecp-svc-step2::before,
.ecp-svc-step3::before, .ecp-svc-step4::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #cbd5e1; margin-right: 8px; vertical-align: middle;
}
/* Step 1 (service): pulses amber until a service is chosen, then goes green */
.ecp-verify-picker:not(.ecp-svc-chosen) .ecp-svc-step1::before {
  background: var(--c-gold); animation: ecpStepDot 1.5s ease-in-out infinite;
}
.ecp-verify-picker.ecp-svc-chosen .ecp-svc-step1::before { background: #17a34a; }
/* Step 2 (deadline): pulses once a service is chosen, until a date is set */
.ecp-verify-picker.ecp-svc-chosen:not(.ecp-dl-chosen-state) .ecp-svc-step2::before {
  background: var(--c-gold); animation: ecpStepDot 1.5s ease-in-out infinite;
}
.ecp-verify-picker.ecp-dl-chosen-state .ecp-svc-step2::before { background: #17a34a; animation: none; }
/* Step 3 (expert): pulses once a deadline is set, until an expert is picked */
.ecp-verify-picker.ecp-dl-chosen-state:not(.ecp-editor-chosen) .ecp-svc-step3::before {
  background: var(--c-gold); animation: ecpStepDot 1.5s ease-in-out infinite;
}
.ecp-verify-picker.ecp-editor-chosen .ecp-svc-step3::before { background: #17a34a; animation: none; }
/* Step 4 (note): optional — green as soon as it is reachable */
.ecp-verify-picker.ecp-editor-chosen .ecp-svc-step4::before { background: #17a34a; }
@keyframes ecpStepDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176,125,30,.5); }
  70%      { box-shadow: 0 0 0 6px rgba(176,125,30,0); }
}
@media (prefers-reduced-motion: reduce) {
  .ecp-svc-step1::before, .ecp-svc-step2::before,
  .ecp-svc-step3::before, .ecp-svc-step4::before { animation: none !important; }
}

.ecp-editor-tick {
  position: absolute; bottom: 9px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-teal); color: #fff; font-size: 12px; font-weight: 900;
  display: none; align-items: center; justify-content: center;
}
.ecp-editor-card.ecp-editor-on .ecp-editor-tick { display: flex; }

@media (max-width: 640px) {
  .ecp-svc-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .ecp-editor-grid { grid-template-columns: 1fr; }  /* single column on mobile */
}

/* ══════════════════════════════════════════════════════════
   EDITOR AVAILABILITY + PERSUASIVE BLURB
══════════════════════════════════════════════════════════ */
.ecp-editor-hint {
  font-size: 12.5px; color: var(--c-muted); margin: 0 0 12px; line-height: 1.5;
}
.ecp-editor-hint strong { color: var(--c-teal); }

/* ══════════════════════════════════════════════════════════
   CONFIRMED ORDER SUMMARY (replaces picker after ordering)
══════════════════════════════════════════════════════════ */
.ecp-order-confirmed {
  text-align: center; padding: 22px 18px 18px;
  background: linear-gradient(135deg, rgba(23,163,74,.08), rgba(20,169,174,.06));
  border: 1.5px solid rgba(23,163,74,.28); border-radius: 16px;
  animation: ecpVerifyMsgIn .5s cubic-bezier(.2,.8,.2,1);
}
.ecp-oc-check {
  width: 52px; height: 52px; margin: 0 auto 12px;
  border-radius: 50%; background: linear-gradient(135deg, #17a34a, #22c55e);
  color: #fff; font-size: 28px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(23,163,74,.4);
  animation: ecpAvailPop .4s ease;
}
.ecp-oc-title { font-size: 19px; font-weight: 800; color: var(--c-text); }
.ecp-oc-id {
  display: block; width: fit-content; margin: 6px auto 16px;
  font-size: 13px; font-weight: 800; letter-spacing: .5px; color: #fff;
  background: linear-gradient(135deg, var(--c-teal), var(--c-teal2));
  padding: 4px 14px; border-radius: 999px;
}
.ecp-oc-editor {
  display: flex; align-items: center; gap: 12px; width: fit-content; margin: 0 auto 14px;
  background: #fff; border: 1px solid rgba(13,115,119,.15);
  border-radius: 12px; padding: 10px 16px 10px 10px;
}
.ecp-oc-photo {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  border: 2.5px solid var(--c-teal); flex-shrink: 0; display: block;
}
.ecp-oc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ecp-oc-fallback {
  width: 100%; height: 100%; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-teal), var(--c-teal2));
  color: #fff; font-size: 18px; font-weight: 800;
}
.ecp-oc-meta { text-align: left; }
.ecp-oc-name { font-size: 14px; font-weight: 800; color: var(--c-text); }
.ecp-oc-svc { font-size: 12px; font-weight: 700; color: var(--c-teal); }
.ecp-oc-msg { font-size: 12.5px; color: var(--c-muted); line-height: 1.55; margin: 0 auto 16px; max-width: 420px; }
.ecp-oc-another {
  background: none; border: 1.5px dashed rgba(13,115,119,.35);
  color: var(--c-teal); font-size: 12.5px; font-weight: 700;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  transition: all .15s ease;
}
.ecp-oc-another:hover { background: rgba(13,115,119,.07); border-color: var(--c-teal); }

@media (max-width: 600px) {
  .ecp-oc-editor { width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   SETUP LOCK — Step 1 read-only while an essay is being generated
   (v2.8.8) The functional lock is applied in JS via disabled/readonly;
   these rules add the visual "locked" treatment.
══════════════════════════════════════════════════════════ */
#ecp-step-setup.ecp-setup-locked .ecp-wizard-step,
#ecp-step-setup.ecp-setup-locked .ecp-wizard-launch,
#ecp-step-setup.ecp-setup-locked .ecp-setup-progress {
  pointer-events: none;
  opacity: .55;
  filter: grayscale(.12);
  user-select: none;
}
#ecp-step-setup.ecp-setup-locked #ecp-setup-lock-banner {
  pointer-events: auto;
  opacity: 1;
  filter: none;
}
.ecp-locked-field { cursor: not-allowed !important; }

#ecp-setup-lock-banner.ecp-lock-flash {
  animation: ecpLockFlash .5s ease 2;
}
@keyframes ecpLockFlash {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(168,50,50,.5); }
}

/* ══════════════════════════════════════════════════════════
   STRICT SEQUENTIAL GENERATION (v2.9.0)
   Inline lock notice + chips shown when earlier sections aren't done.
══════════════════════════════════════════════════════════ */
.ecp-prereq-notice {
  display: flex; gap: 12px; align-items: flex-start;
  background: linear-gradient(135deg, #fff8ec, #fdf1d8);
  border: 1px solid #f0d9a8; border-radius: 12px;
  padding: 14px 16px; margin: 14px 0 4px;
  animation: ecpPrereqIn .25s ease;
}
@keyframes ecpPrereqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ecp-prereq-ico { font-size: 20px; line-height: 1.2; flex-shrink: 0; }
.ecp-prereq-title { font-weight: 800; font-size: 14px; color: #8a5a12; margin-bottom: 3px; }
.ecp-prereq-text { font-size: 13px; color: #6b5417; margin-bottom: 8px; }
.ecp-prereq-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.ecp-prereq-chip {
  background: #fff; border: 1.5px solid #e0b866; color: #8a5a12;
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: all .15s ease;
}
.ecp-prereq-chip:hover { background: #c9922b; color: #fff; border-color: #c9922b; transform: translateY(-1px); }
.ecp-prereq-note { font-size: 12px; color: #7a6220; line-height: 1.5; }

.ecp-btn-generate.ecp-gen-locked { opacity: .5; cursor: not-allowed; filter: grayscale(.3); }
.ecp-btn-generate.ecp-gen-locked:hover { transform: none; }

/* Prereq modal — missing-section chips */
.ecp-prm-chip {
  display: flex; align-items: center; gap: 8px;
  background: #fbeef0; border: 1px solid #f0c9cf; border-radius: 10px;
  padding: 9px 12px; margin-bottom: 8px; font-size: 13.5px; font-weight: 700; color: #333;
}
.ecp-prm-chip .ecp-prm-x { margin-left: auto; color: #c0392b; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════
   SEND FULL PAPER TO AN EDITOR — order modal  (LIGHT / PROFESSIONAL)
   Layout contract, so nothing is ever hidden again:
     .ecp-eo-box   → flex column, fixed max height, overflow:HIDDEN (never scrolls)
     .ecp-eo-head  → flex-shrink:0  (close button lives here → always visible)
     .ecp-eo-main  → flex:1, min-height:0, the ONLY scrolling region
   Desktop: form (left, scrolls) + order summary (right, sticky column).
   Mobile : one clean stack — header, form, then the summary card.
   ══════════════════════════════════════════════════════════════════════ */
#ecp-editor-order-modal.ecp-modal-overlay {
    align-items: center;
    background: rgba(15, 30, 40, .55);
    padding: clamp(8px, 2.5vw, 24px);
}
#ecp-editor-order-modal .ecp-eo-box {
    position: relative;
    width: min(1120px, 100%);
    max-width: 1120px;
    margin: auto;
    padding: 0;
    text-align: left;
    background: #ffffff !important;
    color: #1f2937;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(15, 30, 40, .28), 0 2px 8px rgba(15, 30, 40, .08);
    overflow: hidden;                 /* the box itself NEVER scrolls */
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    max-height: 92dvh;
}
/* Slim brand accent across the very top */
#ecp-editor-order-modal .ecp-eo-box::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 4;
    background: linear-gradient(90deg, #0d7377, #14a9ae 55%, #e0a800);
}

/* ── Header (fixed: outside the scroll area) ── */
.ecp-eo-head {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 20px 16px;
    background: #ffffff;
    border-bottom: 1px solid #eef2f6;
}
.ecp-eo-head-ic {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px;
    background: linear-gradient(135deg, #e6f5f5, #d8eeee);
    color: #0d7377;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    box-shadow: inset 0 0 0 1px rgba(13, 115, 119, .14);
}
.ecp-eo-head-txt { flex: 1 1 auto; min-width: 0; }
.ecp-eo-title {
    font-family: var(--ff-head); font-size: 19px; font-weight: 800;
    color: #10242c !important; margin: 1px 0 3px; line-height: 1.2;
}
.ecp-eo-sub { font-size: 12.5px; color: #64748b !important; line-height: 1.5; margin: 0; }

/* Right-hand group: order number + close, side by side, always on screen */
.ecp-eo-head-right {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 8px;
    margin-left: auto;
}
.ecp-eo-paperid {
    background: #eef7f7; color: #0d7377 !important; border: 1px solid #cfe6e6;
    font-size: 11px; font-weight: 800; letter-spacing: .02em;
    padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.ecp-eo-close {
    position: static !important;      /* was absolute — that's what hid it */
    flex-shrink: 0;
    width: 36px; height: 36px; min-width: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #f1f5f9 !important; color: #64748b !important;
    border: 1px solid #e2e8f0 !important; cursor: pointer;
    font-size: 14px; line-height: 1; padding: 0;
    transition: background .15s, color .15s, transform .15s;
}
.ecp-eo-close:hover { background: #e2e8f0 !important; color: #0f172a !important; transform: rotate(90deg); }
.ecp-eo-close:focus-visible { outline: 2px solid #14a9ae; outline-offset: 2px; }

/* ── Main: form column + summary column ── */
.ecp-eo-main {
    flex: 1 1 auto;
    min-height: 0;                    /* lets the child actually scroll */
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #ffffff;
}
/* Left: the form. This is the scrolling region. */
.ecp-eo-body {
    flex: 1 1 auto; min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 22px;
    align-content: start;
    padding: 18px 20px 20px;
}
.ecp-eo-span { grid-column: 1 / -1; }

/* Right: order summary — its own quiet column, sticky at the top */
.ecp-eo-foot {
    flex: 0 0 320px;
    align-self: stretch;
    overflow-y: auto;
    padding: 18px 18px 20px;
    border-left: 1px solid #eef2f6;
    background: #f8fafc;
}

/* ── What the editor receives ── */
.ecp-eo-sections { display: flex; flex-wrap: wrap; gap: 7px; }
.ecp-eo-sec {
    display: flex; align-items: center; gap: 7px;
    background: #f0f9f9; border: 1px solid #d3e9e9;
    border-radius: 9px; padding: 7px 11px; min-width: 0;
}
.ecp-eo-sec-tick  { color: #16a34a; font-weight: 800; font-size: 12px; }
.ecp-eo-sec-name  { font-size: 12.5px; font-weight: 700; color: #1f2937 !important; text-transform: capitalize; }
.ecp-eo-sec-words { font-size: 11px; font-weight: 700; color: #0d7377 !important; white-space: nowrap; }
.ecp-eo-sec-missing { background: #f8fafc; border: 1px dashed #dbe2ea; }
.ecp-eo-sec-missing .ecp-eo-sec-tick  { color: #94a3b8; }
.ecp-eo-sec-missing .ecp-eo-sec-name  { color: #94a3b8 !important; }
.ecp-eo-sec-missing .ecp-eo-sec-words { color: #94a3b8 !important; }

/* ── Summary chips ── */
.ecp-eo-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.ecp-eo-chip {
    display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto;
    background: #f8fafc; border: 1px solid #e5eaf0;
    border-radius: 9px; padding: 7px 12px; min-width: 0;
}
.ecp-eo-chip-k { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #94a3b8 !important; }
.ecp-eo-chip-v { font-size: 13px; font-weight: 700; color: #1f2937 !important; }

/* ── Fields ── */
.ecp-eo-field { margin: 0 0 16px; }
.ecp-eo-label {
    display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: #64748b !important; margin: 0 0 8px;
}
.ecp-eo-tag {
    font-size: 10px; font-weight: 700; color: #0d7377; text-transform: none; letter-spacing: 0;
    background: #eef7f7; border: 1px solid #d6e9e9; padding: 2px 7px; border-radius: 999px; margin-left: 6px;
}
.ecp-eo-optional { font-size: 11px; font-weight: 600; color: #94a3b8 !important; text-transform: none; letter-spacing: 0; }

/* ── Required-step gating: sources · deadline · editor ───────────────
   These three fields must each be actively chosen before Confirm & Send
   comes alive. The next-needed field glows and pulses; finished steps
   turn calm teal-green; still-to-come steps wait quietly as numbers. */
.ecp-eo-req {
    position: relative; border-radius: 13px;
    padding: 12px 14px 14px; border: 1.5px solid transparent;
    transition: background .22s ease, box-shadow .28s ease, border-color .22s ease, opacity .22s ease;
}
.ecp-eo-req .ecp-eo-label {
    display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
    margin-bottom: 10px;
}
/* Step badge: number while waiting → ✓ once chosen */
.ecp-eo-reqbadge {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 20px; height: 20px; border-radius: 50%;
    font-size: 11px; font-weight: 900; line-height: 1;
    background: #e2e8f0; color: #64748b !important; transition: all .2s ease;
}
/* Inline "what next" hint pill */
.ecp-eo-reqhint {
    font-size: 11px; font-weight: 800; letter-spacing: 0; text-transform: none;
    color: #b7791f !important; opacity: 0; transform: translateX(-4px);
    transition: opacity .25s ease, transform .25s ease;
}
.ecp-eo-reqhint.is-live { opacity: 1; transform: translateX(0); }

/* PENDING — quietly waiting its turn */
.ecp-eo-req.is-pending { opacity: .5; }
.ecp-eo-req.is-pending .ecp-eo-reqbadge { background: #e2e8f0; color: #94a3b8 !important; }

/* NEXT — the step we're demanding right now: glowing amber pulse */
.ecp-eo-req.is-next {
    background: #fffdf5; border-color: #f0d488; opacity: 1;
    animation: ecpReqPulse 1.8s ease-in-out infinite;
}
.ecp-eo-req.is-next .ecp-eo-reqbadge {
    background: linear-gradient(135deg, #b7791f, #d9a441); color: #fff !important;
    box-shadow: 0 0 0 4px rgba(183, 121, 31, .16);
    animation: ecpReqBadge 1.4s ease-in-out infinite;
}
@keyframes ecpReqPulse {
    0%   { box-shadow: 0 0 0 0 rgba(183, 121, 31, .34); }
    70%  { box-shadow: 0 0 0 9px rgba(183, 121, 31, 0); }
    100% { box-shadow: 0 0 0 0 rgba(183, 121, 31, 0); }
}
@keyframes ecpReqBadge {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

/* DONE — chosen: calm teal-green confirm */
.ecp-eo-req.is-done { background: #f2fbfb; border-color: #cdeaea; opacity: 1; }
.ecp-eo-req.is-done .ecp-eo-reqbadge {
    background: linear-gradient(135deg, #0d7377, #14a9ae); color: #fff !important;
    animation: ecpReqPop .32s ease;
}
@keyframes ecpReqPop {
    0%   { transform: scale(.5); }
    60%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .ecp-eo-req.is-next,
    .ecp-eo-req.is-next .ecp-eo-reqbadge,
    .ecp-eo-req.is-done .ecp-eo-reqbadge { animation: none; }
}

/* Gated submit — locked look until all three steps are chosen */
.ecp-eo-submit.ecp-eo-submit-gated,
.ecp-eo-submit.ecp-eo-submit-gated:disabled {
    background: #eef2f6 !important; color: #7c8aa0 !important;
    border: 1.5px dashed #cbd5e1; opacity: 1 !important;
    box-shadow: none; cursor: not-allowed;
}
.ecp-eo-submit.ecp-eo-submit-gated:hover { transform: none; filter: none; }

/* ── Read-only instruction / rubric boxes ── */
.ecp-eo-readonly {
    background: #f8fafc; color: #1f2937 !important; border: 1px solid #e5eaf0;
    border-left: 3px solid #14a9ae; border-radius: 9px; padding: 11px 13px;
    font-size: 13px; line-height: 1.6;
    max-height: none; overflow: visible; word-break: break-word;
}
.ecp-eo-readonly .ecp-eo-empty { color: #94a3b8; font-style: italic; }

/* ── Source options ── */
.ecp-eo-srcopts { display: flex; flex-direction: column; gap: 8px; }
.ecp-eo-srcopt {
    display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
    background: #ffffff; border: 1.5px solid #e2e8f0;
    border-radius: 11px; padding: 11px 13px; transition: border-color .15s, background .15s, box-shadow .15s;
}
.ecp-eo-srcopt:hover { border-color: #a9d8d9; background: #fbfefe; }
.ecp-eo-srcopt input { margin-top: 2px; accent-color: #0d7377; width: 16px; height: 16px; flex-shrink: 0; }
.ecp-eo-srcopt-on {
    border-color: #14a9ae; background: #f2fbfb;
    box-shadow: 0 2px 10px rgba(13, 115, 119, .10);
}
.ecp-eo-srcopt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ecp-eo-srcopt-title { font-size: 13.5px; font-weight: 700; color: #1f2937 !important; }
.ecp-eo-srccount { font-size: 12px; font-weight: 800; color: #0d7377 !important; }
.ecp-eo-srcopt-desc { font-size: 12px; color: #64748b !important; line-height: 1.5; }

/* ── Deadline ── */
.ecp-eo-quick { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 10px; }
.ecp-eo-chipbtn {
    background: #ffffff; color: #475569 !important; border: 1.5px solid #e2e8f0;
    border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer;
    transition: all .14s;
}
.ecp-eo-chipbtn:hover { border-color: #14a9ae; color: #0d7377 !important; background: #f2fbfb; }
.ecp-eo-chipbtn-on {
    background: linear-gradient(135deg, #0d7377, #14a9ae); color: #fff !important; border-color: #0d7377;
    box-shadow: 0 3px 10px rgba(13, 115, 119, .28);
}
.ecp-eo-datetime {
    width: 100%; background: #ffffff; color: #1f2937;
    border: 1.5px solid #e2e8f0; border-radius: 9px;
    padding: 10px 12px; font-size: 14px; font-family: var(--ff-body);
}
.ecp-eo-datetime:focus { outline: none; border-color: #14a9ae; box-shadow: 0 0 0 3px rgba(20, 169, 174, .16); }
.ecp-eo-deadline-note { font-size: 12.5px; color: #8a6d1f !important; margin: 8px 0 0; font-weight: 600; }
.ecp-eo-deadline-note .ecp-eo-warn { color: #c2410c !important; }

/* ── Editor picker ── */
.ecp-eo-editors { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 9px; }
.ecp-eo-editor {
    position: relative; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
    background: #ffffff !important; border: 1.5px solid #e2e8f0; border-radius: 12px;
    padding: 9px 10px; transition: all .15s;
}
.ecp-eo-editor:hover { border-color: #14a9ae; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(13, 115, 119, .12); }
.ecp-eo-editor-on {
    border-color: #14a9ae; background: #f2fbfb !important;
    box-shadow: 0 4px 14px rgba(13, 115, 119, .16);
}
.ecp-eo-editor-photo {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
    border: 2px solid #d6e9e9; display: block;
}
.ecp-eo-editor-on .ecp-eo-editor-photo { border-color: #14a9ae; }
.ecp-eo-editor-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ecp-eo-editor-fallback {
    width: 100%; height: 100%; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #0d7377, #14a9ae); color: #fff; font-size: 17px; font-weight: 800;
}
.ecp-eo-editor-auto { background: #f8fafc !important; border: 1.5px dashed #cbd5e1; }
.ecp-eo-editor-auto:hover { background: #f2fbfb !important; border-color: #14a9ae; }
.ecp-eo-editor-auto.ecp-eo-editor-on { background: #f2fbfb !important; border-style: solid; border-color: #14a9ae; }
.ecp-eo-editor-auto-ic {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    background: #e6f5f5; color: #0d7377;
    display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.ecp-eo-editor-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ecp-eo-editor-name { font-size: 12.5px; font-weight: 800; color: #1f2937 !important; line-height: 1.25; }
.ecp-eo-editor-spec { font-size: 11px; font-weight: 700; color: #0d7377 !important; line-height: 1.3; }
.ecp-eo-editor-tick {
    position: absolute; top: 7px; right: 8px; width: 17px; height: 17px; border-radius: 50%;
    background: #14a9ae; color: #fff; font-size: 10px; line-height: 17px; text-align: center;
    opacity: 0; transform: scale(.6); transition: all .15s;
}
.ecp-eo-editor-on .ecp-eo-editor-tick { opacity: 1; transform: scale(1); }

/* ── Notes ── */
.ecp-eo-notes {
    width: 100%; background: #ffffff; color: #1f2937;
    border: 1.5px solid #e2e8f0; border-radius: 9px;
    padding: 10px 12px; font-size: 13.5px; font-family: var(--ff-body); resize: vertical; line-height: 1.5;
}
.ecp-eo-notes:focus { outline: none; border-color: #14a9ae; box-shadow: 0 0 0 3px rgba(20, 169, 174, .16); }
.ecp-eo-notes::placeholder { color: #a3aec0; }

/* ── Price card ── */
.ecp-eo-price {
    background: #ffffff;
    border: 1px solid #e2e8f0; border-radius: 13px;
    padding: 14px 15px; margin: 0 0 12px;
    box-shadow: 0 2px 10px rgba(15, 30, 40, .05);
}
.ecp-eo-price-hd {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid #eef2f6;
}
.ecp-eo-price-badge {
    font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: #fff !important; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
    background: #0d7377;
}
.ecp-eo-price-badge.ecp-eo-urg-standard { background: #0d7377; }
.ecp-eo-price-badge.ecp-eo-urg-priority { background: #b7791f; }
.ecp-eo-price-badge.ecp-eo-urg-express  { background: #d97706; }
.ecp-eo-price-badge.ecp-eo-urg-rush     { background: #e65100; }
.ecp-eo-price-badge.ecp-eo-urg-urgent   { background: #c62828; }
.ecp-eo-price-badge.ecp-eo-urg-wait     { background: #94a3b8; }
.ecp-eo-price-row.ecp-eo-price-wait { color: #94a3b8 !important; font-style: italic; justify-content: flex-start; }
.ecp-eo-price-amt { font-family: var(--ff-head); font-size: 27px; font-weight: 800; color: #10242c !important; line-height: 1; }
.ecp-eo-price-row {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    font-size: 12.5px; color: #64748b !important; padding: 4px 0;
}
.ecp-eo-price-total {
    border-top: 1px solid #eef2f6; margin-top: 5px; padding-top: 8px;
    font-weight: 800; color: #10242c !important; font-size: 14px;
}
.ecp-eo-price-credits { color: #0d7377 !important; font-weight: 700; }
.ecp-eo-price-balance {
    margin-top: 10px; font-size: 12.5px; font-weight: 600;
    padding: 9px 11px; border-radius: 9px; line-height: 1.45;
}
.ecp-eo-price-balance.ecp-eo-ok    { background: #f0fdf4; color: #15803d !important; border: 1px solid #bbf7d0; }
.ecp-eo-price-balance.ecp-eo-short { background: #fff7ed; color: #c2410c !important; border: 1px solid #fed7aa; }
.ecp-eo-price-balance strong { color: inherit; }

/* ── Actions ── */
.ecp-eo-actions { display: flex; flex-direction: column; gap: 8px; }
.ecp-eo-submit {
    width: 100%; padding: 14px 18px; border: none; border-radius: 11px; cursor: pointer;
    font-size: 15px; font-weight: 800; font-family: var(--ff-body); color: #fff !important;
    background: linear-gradient(135deg, #0d7377, #14a9ae); transition: all .16s;
    box-shadow: 0 6px 18px rgba(13, 115, 119, .28);
}
.ecp-eo-submit.ecp-eo-submit-ready { background: linear-gradient(135deg, #0d7377, #14a9ae); }
.ecp-eo-submit.ecp-eo-submit-topup { background: linear-gradient(135deg, #e65100, #c62828); box-shadow: 0 6px 18px rgba(198, 40, 40, .28); }
.ecp-eo-submit:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.ecp-eo-submit:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.ecp-eo-cancel {
    width: 100%; padding: 10px; border: 1px solid #e2e8f0; border-radius: 10px;
    background: #ffffff; color: #64748b !important; cursor: pointer; font-size: 13.5px; font-weight: 600;
    font-family: var(--ff-body); transition: all .15s;
}
.ecp-eo-cancel:hover { background: #f1f5f9; color: #0f172a !important; }

/* ── Status ── */
.ecp-eo-status { margin-top: 12px; padding: 11px 13px; border-radius: 9px; font-size: 13px; line-height: 1.5; }
.ecp-eo-status-success { background: #f0fdf4; color: #15803d !important; border: 1px solid #bbf7d0; }
.ecp-eo-status-error   { background: #fef2f2; color: #b91c1c !important; border: 1px solid #fecaca; }

/* ── Tablet: one form column, summary still beside it ── */
@media (max-width: 1024px) {
    .ecp-eo-body { grid-template-columns: 1fr; gap: 0; }
    .ecp-eo-foot { flex: 0 0 290px; }
    .ecp-eo-editors { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ── Mobile: clean single stack. Header stays put, everything else scrolls. ── */
@media (max-width: 780px) {
    #ecp-editor-order-modal.ecp-modal-overlay { padding: 0; }
    #ecp-editor-order-modal .ecp-eo-box {
        width: 100%; max-width: none;
        max-height: 100vh; max-height: 100dvh;
        height: 100dvh;
        border-radius: 0; border: none !important;
    }
    .ecp-eo-head { padding: 14px 14px 12px; gap: 11px; }
    .ecp-eo-head-ic { width: 38px; height: 38px; font-size: 19px; border-radius: 11px; }
    .ecp-eo-title { font-size: 16px; }
    .ecp-eo-sub { font-size: 11.5px; }
    .ecp-eo-head-right { flex-direction: column-reverse; align-items: flex-end; gap: 6px; }
    .ecp-eo-paperid { font-size: 10px; padding: 3px 9px; }
    .ecp-eo-close { width: 40px; height: 40px; min-width: 40px; font-size: 15px; }

    /* One scroll region for the whole stack — no side-by-side columns */
    .ecp-eo-main {
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .ecp-eo-body { overflow: visible; flex: 0 0 auto; padding: 14px 14px 4px; }
    .ecp-eo-foot {
        flex: 0 0 auto; width: 100%;
        border-left: none; border-top: 1px solid #eef2f6;
        overflow: visible;
        padding: 14px 14px calc(16px + env(safe-area-inset-bottom));
    }
    .ecp-eo-field { margin-bottom: 14px; }
    .ecp-eo-editors { grid-template-columns: 1fr 1fr; }
    .ecp-eo-summary .ecp-eo-chip { flex: 1 1 44%; }
    .ecp-eo-price-amt { font-size: 23px; }
}

@media (max-width: 420px) {
    .ecp-eo-editors { grid-template-columns: 1fr; }
    .ecp-eo-sub { display: none; }   /* keep the header tight on tiny screens */
}

/* Short landscape screens */
@media (max-height: 560px) {
    #ecp-editor-order-modal .ecp-eo-box { max-height: 100vh; max-height: 100dvh; }
    .ecp-eo-readonly { max-height: none; }
}

/* ── Nice popup (payment-security notices, min top-up, etc.) ── */
.ecp-nice-alert-overlay {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(15,30,35,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: ecpNiceFade .18s ease;
}
.ecp-nice-alert-overlay.ecp-nice-alert-closing { animation: ecpNiceFadeOut .18s ease forwards; }
@keyframes ecpNiceFade    { from{opacity:0} to{opacity:1} }
@keyframes ecpNiceFadeOut { from{opacity:1} to{opacity:0} }
.ecp-nice-alert-card {
  background: #fff; border-radius: 18px; max-width: 360px; width: 100%;
  padding: 26px 24px 22px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: ecpNicePop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes ecpNicePop { from{transform:scale(.85);opacity:0} to{transform:scale(1);opacity:1} }
.ecp-nice-alert-icon {
  width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: linear-gradient(135deg, rgba(20,169,174,.16), rgba(13,115,119,.12));
}
.ecp-nice-alert-title { font-size: 17px; font-weight: 800; color: var(--c-text,#1a2b32); margin-bottom: 8px; line-height: 1.3; }
.ecp-nice-alert-msg { font-size: 13.5px; line-height: 1.55; color: #5a6472; margin-bottom: 20px; }
.ecp-nice-alert-msg strong { color: var(--c-teal,#0d7377); font-weight: 800; }
.ecp-nice-alert-btn {
  display: inline-block; border: none; cursor: pointer;
  font-size: 14px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--c-teal,#0d7377), var(--c-teal2,#14a9ae));
  padding: 11px 32px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(13,115,119,.35); transition: transform .14s ease, box-shadow .14s ease;
}
.ecp-nice-alert-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(13,115,119,.45); }

/* ══ Secure Checkout overlay ══ */
body.ecp-no-scroll { overflow: hidden; }
.ecp-checkout-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(10,22,26,.66); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; animation: ecpNiceFade .2s ease;
}
.ecp-checkout-panel {
  position: relative; background: #fff; border-radius: 22px;
  max-width: 380px; width: 100%; padding: 30px 28px 22px;
  box-shadow: 0 30px 80px rgba(6,20,24,.42), 0 2px 8px rgba(6,20,24,.12);
  animation: ecpNicePop .24s cubic-bezier(.2,.9,.3,1.2);
  max-height: 94vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}
/* Desktop: wider panel, and a fixed header / scrolling middle / fixed footer
   so the price, the Back button and the security + student-tool notes stay
   visible at all times — only PayPal's card form scrolls. Higher-specificity
   + !important so Divi can't collapse the flex layout. */
@media (min-width: 620px) {
  .ecp-checkout-overlay .ecp-checkout-panel {
    max-width: 700px; padding: 32px 34px 24px;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important;                 /* panel never scrolls as a whole */
  }
  .ecp-checkout-overlay .ecp-checkout-panel > #ecp-checkout-pay {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0;
  }
  .ecp-checkout-head   { flex: 0 0 auto; }
  .ecp-checkout-footer { flex: 0 0 auto; }
}
/* Premium gradient accent along the top edge */
.ecp-checkout-panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, var(--c-teal,#0d7377), var(--c-teal2,#14a9ae), var(--c-gold,#e0a800));
}
.ecp-checkout-close {
  position: absolute; top: 12px; right: 14px;
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: #f1f4f5; cursor: pointer;
  font-size: 15px; line-height: 1; color: #8a969c;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.ecp-checkout-close:hover { background: #e4e9eb; color: #444; }

.ecp-checkout-head { text-align: center; margin-bottom: 18px; }
.ecp-checkout-badge {
  width: 50px; height: 50px; margin: 2px auto 9px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center; font-size: 25px;
  background: linear-gradient(135deg, rgba(20,169,174,.18), rgba(13,115,119,.13));
  box-shadow: inset 0 0 0 1px rgba(13,115,119,.12);
}
.ecp-checkout-brand {
  font-size: 14px; font-weight: 800; color: var(--c-teal,#0d7377);
  letter-spacing: .04em; text-transform: uppercase;
}

/* Amount hero — centred, no more spread-out rows */
.ecp-checkout-summary {
  background: linear-gradient(165deg, #f7fbfb, #edf6f6);
  border: 1px solid #dcecec; border-radius: 16px;
  padding: 18px 20px 16px; margin-bottom: 20px; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.ecp-checkout-sub { font-size: 12px; font-weight: 600; color: #8794a0; letter-spacing: .02em; }
.ecp-checkout-amount {
  font-size: 40px; font-weight: 800; line-height: 1.05; color: #16242b;
  margin: 4px 0 2px; letter-spacing: -.02em;
}
.ecp-checkout-credits { font-size: 16px; font-weight: 800; color: var(--c-teal,#0d7377); }
.ecp-checkout-rate {
  font-size: 11px; color: #8794a0; margin-top: 11px; padding-top: 11px;
  border-top: 1px dashed #cfe2e2;
}

.ecp-checkout-paypal { max-width: 290px; margin: 0 auto; min-height: 46px; }
.ecp-checkout-loading { text-align: center; padding: 16px; color: #90a4ae; font-size: 12.5px; }
.ecp-checkout-status { margin: 12px auto 0; max-width: 290px; padding: 10px 12px; border-radius: 9px; font-size: 12.5px; text-align: center; }
.ecp-checkout-secure { text-align: center; font-size: 11px; color: #9aa4ab; margin-top: 16px; }

/* Back / return button — clear escape hatch from the pay step */
.ecp-checkout-back {
  display: flex; align-items: center; gap: 6px;
  width: -moz-fit-content; width: fit-content;
  margin: 18px auto 0; padding: 9px 20px;
  background: #f1f5f6; color: #46555c;
  border: 1px solid #e2e9ea; border-radius: 999px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ecp-checkout-back:hover { background: #e7eef0; color: var(--c-teal,#0d7377); border-color: #cfe0e0; }
.ecp-checkout-back:active { transform: translateY(1px); }

/* Fixed footer — always visible under the scrolling payment column */
.ecp-checkout-footer { padding-top: 4px; }
.ecp-checkout-note {
  margin: 12px auto 0; max-width: 460px; padding: 10px 15px;
  background: linear-gradient(165deg, #f6fbfb, #eef7f7);
  border: 1px solid #dcecec; border-radius: 13px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center;
}
.ecp-checkout-note-badge {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  color: var(--c-teal,#0d7377); text-transform: uppercase;
  background: #e3f1f1; border: 1px solid #cfe6e6; border-radius: 999px; padding: 3px 11px;
}
.ecp-checkout-note-text { font-size: 11px; line-height: 1.5; color: #6b7780; }

/* ── Two-column checkout body (desktop) ──────────────────────────────
   Mobile default: everything stacks (summary already has its own margin).
   Desktop (≥620px): summary on the left, PayPal + card options on the
   right. The PayPal container goes full-width of its column so PayPal's
   own "Debit or Credit Card" form sizes itself naturally instead of
   being squeezed into a fixed 290px strip and spilling downward.       */
@media (min-width: 620px) {
  .ecp-checkout-body {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-rows: 1fr;          /* row fills the flexible middle area */
    gap: 28px;
    align-items: stretch;
    margin-bottom: 4px;
    flex: 1 1 auto; min-height: 0;    /* take the space between header and footer */
  }
  .ecp-checkout-col { min-width: 0; }               /* let PayPal iframe shrink cleanly */

  .ecp-checkout-col-summary { align-self: start; }  /* price pinned to the top */
  .ecp-checkout-col-summary .ecp-checkout-summary { margin: 0; }

  /* Only the payment side scrolls; it fills the middle and scrolls internally.
     The PayPal card form lives in a cross-origin iframe, so the mouse wheel can
     get eaten — a grabbable bar with click-to-page on the track is the reliable
     way to reach Pay. */
  .ecp-checkout-col-pay {
    align-self: stretch; min-height: 0;
    border-left: 1px solid #eef2f3; padding-left: 26px; padding-right: 4px;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: auto; scrollbar-color: var(--c-teal,#0d7377) #eaf1f1;
  }
  .ecp-checkout-col-pay::-webkit-scrollbar { width: 11px; }
  .ecp-checkout-col-pay::-webkit-scrollbar-track {
    background: #eaf1f1; border-radius: 8px; margin: 2px 0;
  }
  .ecp-checkout-col-pay::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--c-teal2,#14a9ae), var(--c-teal,#0d7377));
    border-radius: 8px; border: 2px solid #eaf1f1; min-height: 40px;
  }
  .ecp-checkout-col-pay::-webkit-scrollbar-thumb:hover {
    background: var(--c-teal,#0d7377);
  }
  .ecp-checkout-col-pay .ecp-checkout-paypal {
    max-width: 340px; width: 100%; margin: 0 auto;   /* auto-sizing card module */
  }
  .ecp-checkout-col-pay .ecp-checkout-status {
    max-width: 340px; margin: 12px auto 0;
  }
}

/* Success state */
.ecp-checkout-success { text-align: center; padding: 6px 2px 2px; }
.ecp-checkout-check {
  width: 68px; height: 68px; margin: 4px auto 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 35px;
  background: linear-gradient(135deg, rgba(23,163,74,.18), rgba(13,115,119,.12));
  box-shadow: inset 0 0 0 1px rgba(23,163,74,.2);
  animation: ecpNicePop .34s cubic-bezier(.2,.9,.3,1.4);
}
.ecp-checkout-success-title { font-size: 20px; font-weight: 800; color: #17a34a; margin-bottom: 7px; }
.ecp-checkout-success-msg { font-size: 13.5px; color: #5a6472; line-height: 1.5; margin-bottom: 6px; }
.ecp-checkout-success-msg strong { color: var(--c-teal,#0d7377); }
.ecp-checkout-balance {
  display: inline-block; font-size: 12.5px; font-weight: 800; color: var(--c-teal,#0d7377);
  background: #eef7f7; border: 1px solid #d9ecec; border-radius: 999px; padding: 5px 15px; margin-bottom: 20px;
}
.ecp-checkout-done { max-width: 290px; margin: 0 auto 11px; }
.ecp-checkout-receipt { font-size: 11px; color: #9aa4ab; }

/* Small screens — comfortable bottom sheet */
@media (max-width: 420px) {
  .ecp-checkout-overlay { padding: 0; align-items: flex-end; }
  .ecp-checkout-panel { max-width: 100%; border-radius: 20px 20px 0 0; padding: 26px 18px 18px; }
  .ecp-checkout-amount { font-size: 36px; }
}

/* ══════════════════════════════════════════════════════════════
   FINANCIAL PANEL — statement of payments, orders and refunds
   (v2.9.18)
   ══════════════════════════════════════════════════════════════ */
.ecp-fin-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:0 0 18px}
.ecp-fin-card{background:var(--c-card,#fff);border:1px solid var(--c-border,#e3e9ee);border-radius:14px;padding:16px 18px;position:relative;overflow:hidden}
.ecp-fin-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px}
.ecp-fin-card-in::before{background:linear-gradient(180deg,#0d7377,#14a9ae)}
.ecp-fin-card-out::before{background:linear-gradient(180deg,#c9922b,#e0a93c)}
.ecp-fin-card-refund::before{background:linear-gradient(180deg,#8894a5,#aab4c0)}
.ecp-fin-card-bal::before{background:linear-gradient(180deg,#1a237e,#3949ab)}
.ecp-fin-card-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--c-muted,#8894a5)}
.ecp-fin-card-val{font-size:26px;font-weight:800;color:var(--c-text,#1a2233);line-height:1.25;margin:4px 0 2px}
.ecp-fin-card-sub{font-size:11.5px;color:var(--c-muted,#8894a5);font-weight:600}

.ecp-fin-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.ecp-fin-filter{background:transparent;border:1px solid var(--c-border,#e3e9ee);color:var(--c-muted,#8894a5);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .15s}
.ecp-fin-filter:hover{border-color:#14a9ae;color:#14a9ae}
.ecp-fin-filter.active{background:linear-gradient(135deg,#0d7377,#14a9ae);border-color:transparent;color:#fff}
.ecp-fin-export{margin-left:auto;background:transparent;border:1px dashed var(--c-border,#e3e9ee);color:var(--c-muted,#8894a5);border-radius:9px;padding:7px 14px;font-size:12.5px;font-weight:700;cursor:pointer}
.ecp-fin-export:hover{border-color:#14a9ae;color:#14a9ae}

.ecp-fin-list{display:flex;flex-direction:column;gap:10px}
.ecp-fin-row{display:flex;gap:12px;align-items:flex-start;background:var(--c-card,#fff);border:1px solid var(--c-border,#e3e9ee);border-left:3px solid #14a9ae;border-radius:12px;padding:14px 16px}
.ecp-fin-out{border-left-color:#c9922b}
.ecp-fin-refund{border-left-color:#8894a5}
.ecp-fin-ico{font-size:20px;line-height:1.3;flex:0 0 auto}
.ecp-fin-main{flex:1 1 auto;min-width:0}
.ecp-fin-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 3px}
.ecp-fin-type{font-size:14px;font-weight:800;color:var(--c-text,#1a2233)}
.ecp-fin-status{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:2px 9px;border-radius:999px;background:#eef2f6;color:#8894a5}
.ecp-fs-completed{background:#e6f6f2;color:#0d7377}
.ecp-fs-pending{background:#fff4e0;color:#c9922b}
.ecp-fs-refunded,.ecp-fs-partially_refunded{background:#f0f0f4;color:#6b7280}
.ecp-fs-failed{background:#fdecec;color:#c62828}
.ecp-fin-order{font-size:11px;font-weight:800;background:#0d7377;color:#fff;padding:2px 10px;border-radius:999px;letter-spacing:.3px}
.ecp-fin-desc{font-size:12.5px;color:var(--c-muted,#8894a5);line-height:1.5;margin:0 0 5px}
.ecp-fin-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--c-muted,#8894a5);font-weight:600}
.ecp-fin-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ecp-fin-refunded{color:#c9922b!important}
.ecp-fin-amt{flex:0 0 auto;text-align:right}
.ecp-fin-amt-val{font-size:16px;font-weight:800;color:var(--c-text,#1a2233);white-space:nowrap}
.ecp-fin-in .ecp-fin-amt-val{color:#0d7377}
.ecp-fin-out .ecp-fin-amt-val{color:#c9922b}
.ecp-fin-refund .ecp-fin-amt-val{color:#6b7280}
.ecp-fin-amt-cr{font-size:11px;font-weight:700;color:var(--c-muted,#8894a5);margin-top:2px;white-space:nowrap}
.ecp-fin-empty{text-align:center;padding:40px 20px;color:var(--c-muted,#8894a5);font-size:14px}
.ecp-fin-foot{margin:18px 0 0;font-size:12px;color:var(--c-muted,#8894a5);text-align:center}

/* ── Order numbers on My Essays ── */
.ecp-order-no{letter-spacing:.4px}
.ecp-copy-ref{background:none;border:none;cursor:pointer;font-size:12px;padding:0 0 0 6px;opacity:.6;line-height:1}
.ecp-copy-ref:hover{opacity:1}
.ecp-history-orders{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
.ecp-order-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(13,115,119,.08);border:1px solid rgba(13,115,119,.2);border-radius:999px;padding:3px 10px;font-size:11px;color:var(--c-text,#1a2233)}
.ecp-order-tag strong{font-weight:800;letter-spacing:.3px}
.ecp-order-tag em{font-style:normal;color:var(--c-muted,#8894a5);font-weight:600}
.ecp-order-tag-status{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:1px 7px;border-radius:999px;background:#fff4e0;color:#c9922b}
.ecp-ost-done,.ecp-ost-completed,.ecp-ost-delivered{background:#e6f6f2;color:#0d7377}
.ecp-ost-cancelled,.ecp-ost-refunded{background:#f0f0f4;color:#6b7280}

@media (max-width:640px){
  .ecp-fin-row{flex-wrap:wrap}
  .ecp-fin-amt{width:100%;text-align:left;padding-left:32px}
  .ecp-fin-export{margin-left:0;width:100%;text-align:center}
  .ecp-fin-card-val{font-size:22px}
}

/* ══════════════════════════════════════════════════════════════
   PAPER ORDER BAR + PURCHASE STATE  (v2.9.19)
   One permanent order # per paper, shown in the header, on every
   section, and reflected in what has already been bought.
   ══════════════════════════════════════════════════════════════ */
.ecp-paper-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:12px 0 0;padding:10px 14px;
  background:linear-gradient(135deg,rgba(13,115,119,.09),rgba(20,169,174,.05));
  border:1px solid rgba(13,115,119,.25);border-radius:12px}
.ecp-paper-bar.hidden{display:none}
.ecp-paper-bar-main{display:flex;align-items:center;gap:8px;min-width:0}
.ecp-paper-bar-lbl{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--c-muted,#8894a5)}
.ecp-paper-bar-ref{font-size:14px;font-weight:800;letter-spacing:.5px;color:#fff;background:linear-gradient(135deg,#0d7377,#14a9ae);
  padding:4px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 6px rgba(13,115,119,.25)}
.ecp-paper-bar-title{font-size:12.5px;color:var(--c-muted,#8894a5);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.ecp-paper-bar-orders{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:auto}
.ecp-pb-orders-lbl{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--c-muted,#8894a5)}
.ecp-pb-chip{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid rgba(13,115,119,.25);
  border-radius:999px;padding:3px 10px;font-size:11px;color:var(--c-text,#1a2233)}
.ecp-pb-chip strong{font-weight:800;letter-spacing:.3px}
.ecp-pb-chip em{font-style:normal;color:var(--c-muted,#8894a5);font-weight:600;text-transform:capitalize}
.ecp-pb-chip-full{background:linear-gradient(135deg,#0d7377,#14a9ae);border-color:transparent;color:#fff}
.ecp-pb-chip-full em{color:rgba(255,255,255,.8)}

/* Per-section stamps in the output header */
.ecp-out-ref{font-size:10.5px;font-weight:800;letter-spacing:.4px;color:#0d7377;background:rgba(13,115,119,.1);
  border:1px solid rgba(13,115,119,.2);padding:2px 8px;border-radius:999px;white-space:nowrap}
.ecp-out-ordered{font-size:10.5px;font-weight:800;letter-spacing:.3px;color:#fff;
  background:linear-gradient(135deg,#0d7377,#14a9ae);padding:2px 9px;border-radius:999px;white-space:nowrap}
.ecp-out-ref.hidden,.ecp-out-ordered.hidden{display:none}

/* Already-bought lock states */
.ecp-sec-locked{display:flex;gap:8px;align-items:flex-start;padding:14px 16px;border-radius:12px;font-size:13px;line-height:1.55;
  color:var(--c-text,#1a2233);background:rgba(13,115,119,.07);border:1px dashed rgba(13,115,119,.35)}
.ecp-svc-chip-ordered{opacity:.5;position:relative;filter:grayscale(.4)}
.ecp-svc-chip-ordered::after{content:'✓ Ordered';position:absolute;top:-7px;right:-4px;background:#0d7377;color:#fff;
  font-size:8.5px;font-weight:800;padding:1px 6px;border-radius:999px;letter-spacing:.3px}
.ecp-btn-ordered{opacity:.65;cursor:not-allowed!important;filter:grayscale(.3)}
.ecp-verify-ordered-note{display:block;padding:10px 12px;border-radius:9px;font-size:12.5px;line-height:1.5;
  background:rgba(13,115,119,.08);border:1px solid rgba(13,115,119,.25);color:var(--c-text,#1a2233)}

@media (max-width:640px){
  .ecp-paper-bar{flex-direction:column;align-items:flex-start}
  .ecp-paper-bar-orders{margin-left:0}
  .ecp-paper-bar-title{max-width:100%}
}

/* ── Editor-order modal: graceful step-down between desktop and phone ── */
@media (max-width: 1000px) {
  .ecp-eo-editors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .ecp-eo-body    { grid-template-columns: 1fr; gap: 0; }
  .ecp-eo-sec     { flex: 1 1 auto; }
  /* Stack: form first, order summary underneath — still overlapping nothing */
  .ecp-eo-main    { flex-direction: column; }
  .ecp-eo-foot    {
      flex: 1 1 auto; width: 100%; position: static;
      border-left: none; border-top: 1px solid rgba(255,255,255,.10);
  }
}

/* Phones: one editor per row (must come last — later rules win) */
@media (max-width: 560px) {
  .ecp-eo-editors { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   CLIENT ORDER TRACKING in the Financial panel  (v3.0.0)
   ══════════════════════════════════════════════════════════════ */
.ecp-fin-sec-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--c-muted,#8894a5);margin:18px 0 10px}
.ecp-fin-orders{display:flex;flex-direction:column;gap:10px;margin:0 0 6px}
.ecp-fin-order-row{display:flex;gap:14px;align-items:flex-start;background:var(--c-card,#fff);border:1px solid var(--c-border,#e3e9ee);border-left:3px solid #0d7377;border-radius:12px;padding:14px 16px}
.ecp-fin-order-main{flex:1 1 auto;min-width:0}
.ecp-fin-order-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 4px}
.ecp-fin-order-kind{font-size:12px;font-weight:700;color:var(--c-muted,#8894a5)}
.ecp-fin-order-title{font-size:14px;font-weight:700;color:var(--c-text,#1a2233);margin:0 0 4px}
.ecp-fin-order-files{display:flex;flex-wrap:wrap;gap:8px;margin:9px 0 0}
.ecp-fin-dl{display:inline-flex;align-items:center;gap:6px;text-decoration:none;background:linear-gradient(135deg,#0d7377,#14a9ae);color:#fff;padding:7px 13px;border-radius:9px;font-size:12.5px;font-weight:700}
.ecp-fin-dl em{font-style:normal;opacity:.8;font-size:11px}
.ecp-fin-dl:hover{filter:brightness(1.08)}
.ecp-fin-order-acts{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.ecp-fin-act{background:transparent;border:1px solid var(--c-border,#e3e9ee);color:var(--c-muted,#8894a5);border-radius:9px;padding:7px 13px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.ecp-fin-act:hover{border-color:#14a9ae;color:#14a9ae}
.ecp-fin-act-ok{background:linear-gradient(135deg,#0d7377,#14a9ae);border-color:transparent;color:#fff}
.ecp-fs-delivered{background:#e6f6f2;color:#0d7377}
.ecp-fs-in_progress{background:#fff4e0;color:#c9922b}
.ecp-fs-submitted{background:#eef0ff;color:#4f46e5}
.ecp-fs-revision_requested{background:#fdecec;color:#c62828}
.ecp-fs-assigned{background:#e6f6f2;color:#0d7377}
@media (max-width:640px){
  .ecp-fin-order-row{flex-wrap:wrap}
  .ecp-fin-order-acts{flex-direction:row;width:100%}
}

/* ══════════════════════════════════════════════════════════════════════
   ORDER MESSAGES — client thread (light, matches the editor order modal)
   ══════════════════════════════════════════════════════════════════════ */
#ecp-msg-modal.ecp-modal-overlay { align-items: center; background: rgba(15,30,40,.55); padding: clamp(8px,2.5vw,24px); }
#ecp-msg-modal .ecp-msg-box {
    width: min(620px, 100%); max-width: 620px; margin: auto; padding: 0; text-align: left;
    background: #fff !important; color: #1f2937;
    border: 1px solid #e2e8f0 !important; border-radius: 18px;
    box-shadow: 0 30px 80px rgba(15,30,40,.28);
    display: flex; flex-direction: column;
    max-height: 88vh; max-height: 88dvh; overflow: hidden;
}
.ecp-msg-head {
    flex: 0 0 auto; display: flex; align-items: flex-start; gap: 12px;
    padding: 18px 18px 14px; border-bottom: 1px solid #eef2f6;
}
.ecp-msg-head-txt { flex: 1 1 auto; min-width: 0; }
.ecp-msg-title { font-family: var(--ff-head); font-size: 18px; font-weight: 800; color: #10242c !important; margin: 0 0 2px; }
.ecp-msg-sub   { font-size: 12px; font-weight: 800; color: #0d7377 !important; margin: 0; letter-spacing: .03em; }
.ecp-msg-close {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #f1f5f9 !important; color: #64748b !important; border: 1px solid #e2e8f0 !important;
    cursor: pointer; font-size: 14px; padding: 0; transition: background .15s, transform .15s;
}
.ecp-msg-close:hover { background: #e2e8f0 !important; color: #0f172a !important; transform: rotate(90deg); }

.ecp-msg-thread {
    flex: 1 1 auto; min-height: 120px;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 16px 18px; background: #f8fafc;
    display: flex; flex-direction: column; gap: 10px;
}
.ecp-msg-empty { text-align: center; color: #94a3b8; font-size: 13px; line-height: 1.6; padding: 26px 10px; }

.ecp-msg-bubble {
    background: #fff; border: 1px solid #e5eaf0; border-left: 3px solid #94a3b8;
    border-radius: 11px; padding: 10px 13px; max-width: 86%; align-self: flex-start;
}
.ecp-msg-mine        { align-self: flex-end; border-left-color: #14a9ae; background: #f2fbfb; }
.ecp-msg-from-support{ border-left-color: #b7791f; }
.ecp-msg-from-editor { border-left-color: #6366f1; }
.ecp-msg-bubble-hd {
    display: flex; align-items: baseline; gap: 8px; margin: 0 0 5px;
    font-size: 11px; color: #94a3b8;
}
.ecp-msg-bubble-hd strong { font-size: 12px; color: #1f2937; font-weight: 800; }
.ecp-msg-bubble-hd em { font-style: normal; margin-left: auto; }
.ecp-msg-bubble-body { font-size: 13.5px; line-height: 1.6; color: #1f2937; word-break: break-word; }
.ecp-msg-hold {
    margin-top: 7px; padding-top: 6px; border-top: 1px dashed #e5eaf0;
    font-size: 11px; font-weight: 700; color: #b7791f;
}

.ecp-msg-compose { flex: 0 0 auto; padding: 14px 18px 16px; border-top: 1px solid #eef2f6; background: #fff; }
.ecp-msg-to { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 9px; }
.ecp-msg-to label {
    display: flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: 13px; font-weight: 700; color: #1f2937;
}
.ecp-msg-to input { accent-color: #0d7377; width: 15px; height: 15px; }
.ecp-msg-input {
    width: 100%; background: #fff; color: #1f2937;
    border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 10px 12px;
    font-size: 13.5px; font-family: var(--ff-body); line-height: 1.5; resize: vertical;
}
.ecp-msg-input:focus { outline: none; border-color: #14a9ae; box-shadow: 0 0 0 3px rgba(20,169,174,.16); }
.ecp-msg-send { width: 100%; margin-top: 9px; }
.ecp-msg-status { margin-top: 9px; padding: 9px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.45; }
.ecp-msg-status.ecp-msg-ok  { background: #f0fdf4; color: #15803d !important; border: 1px solid #bbf7d0; }
.ecp-msg-status.ecp-msg-err { background: #fef2f2; color: #b91c1c !important; border: 1px solid #fecaca; }
.ecp-msg-note { margin: 9px 0 0; font-size: 11.5px; color: #94a3b8; line-height: 1.5; }

.ecp-fin-act-msg { white-space: nowrap; }

@media (max-width: 560px) {
    #ecp-msg-modal.ecp-modal-overlay { padding: 0; }
    #ecp-msg-modal .ecp-msg-box {
        width: 100%; max-width: none; border-radius: 0; border: none !important;
        max-height: 100dvh; height: 100dvh;
    }
    .ecp-msg-bubble { max-width: 100%; }
    .ecp-msg-compose { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}


/* ══════════════════════════════════════════════════════════════════════════
   CLIENT APP SHELL  —  v3.3.0
   Copyright (c) 2026 Blade Research Inc. All rights reserved.

   Same layout contract as the Editor Workroom:

     #ecp-app.ecp-shell  position:fixed; inset:0; overflow:hidden  → page never scrolls
     .ecp-rail           static rail                               → always visible
     .ecp-topbar         static                                    → always visible
     #ecp-main           flex:1; min-height:0; overflow-y:auto     → the ONLY scroller

   NOTHING may set overflow on an ancestor of #ecp-main, or the shell breaks.
   The logged-out landing page has no .ecp-shell class and scrolls normally.
══════════════════════════════════════════════════════════════════════════ */

/* The shell owns the viewport. html/body are locked by the JS-added class. */
html.ecp-locked, body.ecp-locked {
    overflow: hidden !important;
    height: 100% !important;
    margin: 0 !important;          /* a stray body margin still lets the page nudge */
    padding: 0 !important;
    overscroll-behavior: none;
}

/* The theme's own chrome has nothing to sit on once the shell is fixed —
   Divi's sticky header would otherwise float over the topbar. Same list the
   Workroom uses. */
body.ecp-locked #page-container > #main-header,
body.ecp-locked #page-container > #top-header,
body.ecp-locked .et-l--header,
body.ecp-locked .et-l--footer,
body.ecp-locked #main-footer,
body.ecp-locked #et-boc > .et-l--header,
body.ecp-locked > header[role="banner"],
body.ecp-locked > footer[role="contentinfo"] {
    display: none !important;
}

#ecp-app.ecp-shell {
    position: fixed !important;
    top: 0; right: 0; bottom: 0; left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh; height: 100dvh;   /* dvh: phone browser chrome shrinks it */
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: stretch;
    overflow: hidden !important;     /* the page itself never scrolls */
    min-height: 0;
    z-index: 2147483000;             /* above Divi's sticky header */
    background: var(--c-bg);
}
/* Sit below the WP admin bar when it's showing — offset AND shrink, or the
   bottom of the shell falls off the screen. */
body.admin-bar #ecp-app.ecp-shell {
    top: 32px;
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
}
@media screen and (max-width: 782px) {
    body.admin-bar #ecp-app.ecp-shell {
        top: 46px;
        height: calc(100vh - 46px);
        height: calc(100dvh - 46px);
    }
}

/* ── RAIL ───────────────────────────────────────────────────────────────── */
.ecp-shell .ecp-rail {
    flex: 0 0 254px;
    width: 254px;
    display: flex;
    flex-direction: column;
    min-height: 0;                 /* lets the nav strip scroll, not the rail */
    background: var(--c-bg2);
    border-right: 1px solid var(--c-border);
    z-index: 20;
}
.ecp-shell .ecp-rail-top    { padding: 16px 14px 10px; flex: 0 0 auto; }
.ecp-shell .ecp-rail-bottom { padding: 12px 14px 16px; flex: 0 0 auto; border-top: 1px solid var(--c-border); }

.ecp-shell .ecp-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ecp-shell .ecp-brand-mark {
    width: 38px; height: 38px; flex: 0 0 38px;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; border-radius: 10px;
    background: linear-gradient(135deg, var(--c-teal), var(--c-teal2));
}
.ecp-shell .ecp-brand-txt   { min-width: 0; }
.ecp-shell .ecp-brand-title { font-family: var(--ff-head); font-size: 16px; font-weight: 700; color: var(--c-text); line-height: 1.2; }
.ecp-shell .ecp-brand-sub   { font-size: 10.5px; color: var(--c-dim); letter-spacing: .3px; }

/* Profile card */
.ecp-shell .ecp-me {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px; text-align: left;
    background: var(--c-bg3);
    border: 1px solid var(--c-border);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color .18s, background .18s;
}
.ecp-shell .ecp-me:hover { border-color: var(--c-teal2); background: var(--c-bg3); }
.ecp-shell .ecp-nav-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ecp-shell .ecp-nav-user-plan { font-size: 10px; color: var(--c-gold2); font-weight: 600; }
.ecp-shell .ecp-profile-chevron { color: var(--c-dim); font-size: 17px; flex: 0 0 auto; }

/* Nav strip — the only thing in the rail that may scroll */
.ecp-shell .ecp-nav-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 10px 10px;
    scrollbar-width: thin;
}
.ecp-shell .ecp-nav-wrap::-webkit-scrollbar       { width: 6px; }
.ecp-shell .ecp-nav-wrap::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }

.ecp-shell .ecp-nav-group {
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--c-dim);
    padding: 14px 8px 6px;
}
.ecp-shell .ecp-nav-wrap .ecp-nav {
    display: flex; align-items: center; gap: 10px;
    width: 100%; margin-bottom: 2px;
    padding: 10px 11px;
    background: none; border: none;
    border-left: 3px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--c-muted);
    font-family: var(--ff-body); font-size: 13.5px; font-weight: 500;
    text-align: left;
    transition: background .16s, color .16s, border-color .16s;
    min-width: 0;
}
.ecp-shell .ecp-nav-wrap .ecp-nav:hover  { background: var(--c-bg3); color: var(--c-text); }
.ecp-shell .ecp-nav-wrap .ecp-nav.active {
    background: rgba(201,146,43,.14);
    color: var(--c-gold2);
    border-left-color: var(--c-gold2);
    font-weight: 600;
}
.ecp-shell .ecp-nav-ic { font-size: 15px; flex: 0 0 auto; line-height: 1; }
.ecp-shell .ecp-nav-t  { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Profile & Settings never takes the gold active state — it opens a drawer */
.ecp-shell .ecp-nav-ghost.active { background: none; color: var(--c-muted); border-left-color: transparent; font-weight: 500; }

/* Rail footer */
/* ── RAIL FOOTER — credits card + sign out ──────────────────────────────
   The old card was a 10%-opacity gradient on a white rail, which reads as a
   grey smudge. This is a real teal→gold fill with white ink, a slow shine
   that sweeps across it, and a pulse whenever the balance changes. */
.ecp-shell .ecp-rail-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0d7377 0%, #14a9ae 55%, #c9922b 140%);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--r);
    padding: 13px 14px 12px;
    margin-bottom: 10px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(13,115,119,.28);
    transition: transform .22s cubic-bezier(.34,1.4,.64,1), box-shadow .22s;
}
.ecp-shell .ecp-rail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(13,115,119,.40);
}
.ecp-shell .ecp-rail-card:active { transform: translateY(0) scale(.985); }
.ecp-shell .ecp-rail-card:focus-visible { outline: 2px solid var(--c-gold2); outline-offset: 2px; }

/* The shine. A single highlight band that crosses the card every 5s. */
.ecp-shell .ecp-rail-card::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent);
    transform: skewX(-18deg);
    animation: ecp-shine 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ecp-shine {
    0%, 62%  { left: -60%; }
    92%,100% { left: 130%; }
}

.ecp-shell .ecp-rail-card-lbl {
    font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.1px;
    color: rgba(255,255,255,.78);
}
.ecp-shell .ecp-rail-card-val {
    font-family: var(--ff-head);
    font-size: 30px; font-weight: 700; line-height: 1.1;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,.22);
    letter-spacing: -.5px;
}
.ecp-shell .ecp-rail-card-sub {
    display: flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 500;
    color: rgba(255,255,255,.85);
}
.ecp-shell .ecp-rail-card-arrow {
    width: 11px; height: 11px; flex: 0 0 auto;
    transform: translateX(-2px);
    opacity: .55;
    transition: transform .22s cubic-bezier(.34,1.4,.64,1), opacity .22s;
}
.ecp-shell .ecp-rail-card:hover .ecp-rail-card-arrow { transform: translateX(1px); opacity: 1; }

/* Bolt badge — a frosted disc in the top-right corner of the card. */
.ecp-shell .ecp-rail-card-ic {
    position: absolute;
    top: 11px; right: 11px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(2px);
    color: #fff5d6;
    z-index: 1;
    transition: transform .25s cubic-bezier(.34,1.5,.5,1), background .22s;
}
.ecp-shell .ecp-rail-card-ic svg { width: 15px; height: 15px; }
.ecp-shell .ecp-rail-card:hover .ecp-rail-card-ic {
    background: rgba(255,255,255,.26);
    transform: scale(1.1) rotate(-8deg);
}
/* The bolt glows on its own, slowly — a small sign of life in the corner. */
.ecp-shell .ecp-rail-card-ic svg { animation: ecp-bolt 3.2s ease-in-out infinite; }
@keyframes ecp-bolt {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(255,232,150,0)); opacity: .9; }
    50%      { filter: drop-shadow(0 0 5px rgba(255,232,150,.95)); opacity: 1; }
}
/* …and kicks when the balance changes. */
.ecp-shell .ecp-rail-card.ecp-bump .ecp-rail-card-ic { animation: ecp-bolt-kick .55s cubic-bezier(.34,1.6,.5,1); }
@keyframes ecp-bolt-kick {
    0%   { transform: scale(1) rotate(0); }
    40%  { transform: scale(1.3) rotate(-14deg); background: rgba(255,255,255,.38); }
    100% { transform: scale(1) rotate(0); }
}

/* Balance changed — flash it so a top-up is never silent. */
.ecp-shell .ecp-rail-card.ecp-bump { animation: ecp-bump .55s cubic-bezier(.34,1.5,.5,1); }
@keyframes ecp-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.06); box-shadow: 0 10px 26px rgba(201,146,43,.55); }
    100% { transform: scale(1); }
}
.ecp-shell .ecp-rail-card.ecp-bump .ecp-rail-card-val { animation: ecp-bump-ink .55s ease; }
@keyframes ecp-bump-ink {
    0%, 100% { color: #ffffff; }
    40%      { color: #ffe9b0; text-shadow: 0 0 14px rgba(255,224,138,.9); }
}

/* Sign out — was a near-invisible grey outline. Now it reads as a button,
   and commits to red only on intent. */
.ecp-shell .ecp-signout {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 10px;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    background: var(--c-bg3);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    color: var(--c-muted);
    font-family: var(--ff-body); font-size: 13px; font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    transition: color .2s, border-color .2s, transform .16s, box-shadow .2s;
}
/* Red wash slides in from the left instead of a hard colour swap. */
.ecp-shell .ecp-signout::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    transform: translateX(-101%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
    z-index: 0;
}
.ecp-shell .ecp-signout > * { position: relative; z-index: 1; }
.ecp-shell .ecp-signout-ic {
    display: flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; flex: 0 0 auto;
    transition: transform .26s cubic-bezier(.34,1.4,.64,1);
}
.ecp-shell .ecp-signout-ic svg { width: 16px; height: 16px; }
/* The arrow walks out the door on hover. */
.ecp-shell .ecp-signout:hover .ecp-signout-ic { transform: translateX(3px); }
.ecp-shell .ecp-signout:hover        { color: #fff; border-color: #dc2626; box-shadow: 0 4px 12px rgba(239,68,68,.34); }
.ecp-shell .ecp-signout:hover::before { transform: translateX(0); }
.ecp-shell .ecp-signout:active       { transform: scale(.975); }
.ecp-shell .ecp-signout:focus-visible { outline: 2px solid #ef4444; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .ecp-shell .ecp-rail-card::after,
    .ecp-shell .ecp-rail-card-ic,
    .ecp-shell .ecp-rail-card-ic svg,
    .ecp-shell .ecp-rail-card-arrow,
    .ecp-shell .ecp-signout-ic { animation: none; transition: none; }
    .ecp-shell .ecp-rail-card::after { animation: none; }
    .ecp-shell .ecp-rail-card,
    .ecp-shell .ecp-rail-card.ecp-bump,
    .ecp-shell .ecp-signout,
    .ecp-shell .ecp-signout::before { animation: none; transition: none; }
}

/* ── CONTENT COLUMN ─────────────────────────────────────────────────────── */
.ecp-shell .ecp-col {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;                 /* critical — without it the column grows */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ecp-shell .ecp-topbar {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px;
    background: var(--c-bg2);
    border-bottom: 1px solid var(--c-border);
    z-index: 10;
}
.ecp-shell .ecp-topbar-txt   { flex: 1; min-width: 0; }
.ecp-shell .ecp-topbar-txt h2 {
    font-family: var(--ff-head); font-size: 19px; font-weight: 700;
    color: var(--c-text); margin: 0 0 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ecp-shell .ecp-topbar-txt p {
    margin: 0; font-size: 12px; color: var(--c-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ecp-shell .ecp-topbar .ecp-credits-badge { cursor: pointer; flex: 0 0 auto; }
.ecp-shell .ecp-topbar .ecp-plan-pill     { flex: 0 0 auto; }

.ecp-shell .ecp-icon-btn {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-bg3);
    border: 1px solid var(--c-border); border-radius: var(--r-sm);
    color: var(--c-muted); font-size: 15px; line-height: 1; cursor: pointer;
    transition: all .16s;
}
.ecp-shell .ecp-icon-btn:hover { border-color: var(--c-teal2); color: var(--c-teal2); }
.ecp-shell .ecp-icon-btn.spin  { animation: ecp-spin .6s linear; }
@keyframes ecp-spin { to { transform: rotate(360deg); } }

.ecp-shell .ecp-burger { display: none; }

/* ── THE ONLY SCROLLER ──────────────────────────────────────────────────── */
.ecp-shell #ecp-main {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;            /* kills the stray horizontal scrollbar */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Generous tail padding: the app constantly scrolls a freshly generated
       section up to the top of the view. Without slack below the last card,
       that scroll clamps and the section never reaches the top — the old
       full-page layout got this for free from the footer beneath it. */
    padding: 20px 24px 30vh;
    scroll-behavior: auto;
}
.ecp-shell #ecp-main > .ecp-panel { max-width: 1180px; margin: 0 auto; }

/* Panel headings live in the topbar now — the scroll area is pure content.
   Action buttons inside a header row survive; only the titles are hidden. */
.ecp-shell #ecp-main > .ecp-panel > .ecp-panel-hdr > h2,
.ecp-shell #ecp-main > .ecp-panel > .ecp-panel-hdr > p,
.ecp-shell #ecp-main > .ecp-panel > .ecp-panel-hdr .ecp-panel-hdr-titles { display: none !important; }
.ecp-shell #ecp-main > .ecp-panel > .ecp-panel-hdr     { margin-bottom: 0; }
.ecp-shell #ecp-main > .ecp-panel > .ecp-panel-hdr:has(> .ecp-panel-hdr-row) { margin-bottom: 12px; }
.ecp-shell #ecp-main .ecp-panel-hdr-row {
    display: flex; justify-content: flex-end; align-items: center; gap: 10px;
}

/* Anything inside the scroller that tried to be viewport-tall must stop. */
.ecp-shell #ecp-main .ecp-panel { min-width: 0; }

/* ── MOBILE DRAWER ──────────────────────────────────────────────────────── */
.ecp-shell .ecp-rail-bg {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 19;
}
.ecp-shell .ecp-rail-bg.open { display: block; }

@media (max-width: 900px) {
    .ecp-shell .ecp-burger {
        display: flex; align-items: center; justify-content: center;
        flex: 0 0 auto;
        width: 38px; height: 38px;
        background: var(--c-bg3);
        border: 1px solid var(--c-border); border-radius: var(--r-sm);
        color: var(--c-text); font-size: 17px; line-height: 1; cursor: pointer;
    }
    .ecp-shell .ecp-rail {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: 274px; flex-basis: 274px;
        transform: translateX(-100%);
        transition: transform .24s ease;
        box-shadow: 0 0 30px rgba(0,0,0,.28);
        z-index: 21;
    }
    body.admin-bar .ecp-shell .ecp-rail { top: 46px; }
    .ecp-shell .ecp-rail.open { transform: translateX(0); }

    .ecp-shell .ecp-topbar { padding: 10px 12px; gap: 8px; }
    .ecp-shell .ecp-topbar-txt h2 { font-size: 16px; }
    .ecp-shell .ecp-topbar-txt p  { display: none; }   /* subtitle is a luxury on a phone */
    .ecp-shell .ecp-topbar .ecp-plan-pill { display: none; }
    .ecp-shell #ecp-main { padding: 14px 12px 30vh; }
}

@media (max-width: 600px) {
    .ecp-shell .ecp-topbar .ecp-credits-label { display: none; }
    .ecp-shell .ecp-icon-btn { width: 34px; height: 34px; font-size: 14px; }
    .ecp-shell #ecp-main { padding: 12px 10px 30vh; }
    .ecp-shell #ecp-main > .ecp-panel > .ecp-panel-hdr .ecp-new-essay-btn { width: 100%; }
    .ecp-shell #ecp-main .ecp-panel-hdr-row { justify-content: stretch; }
}

@media (max-width: 420px) {
    .ecp-shell .ecp-topbar-txt h2 { font-size: 15px; }
    .ecp-shell #ecp-main { padding: 10px 8px 30vh; }
}

/* ── DARK MODE tweaks ───────────────────────────────────────────────────── */
#ecp-app.ecp-shell.ecp-dark .ecp-rail   { background: var(--c-bg2); border-right-color: var(--c-border); }
#ecp-app.ecp-shell.ecp-dark .ecp-topbar { background: var(--c-bg2); }
#ecp-app.ecp-shell.ecp-dark .ecp-me     { background: rgba(255,255,255,.03); }

/* ── Cards, grids and rows inside the scroller degrade gracefully ───────── */
@media (max-width: 700px) {
    .ecp-shell #ecp-main .ecp-value-grid,
    .ecp-shell #ecp-main .ecp-pack-grid,
    .ecp-shell #ecp-main .ecp-plans-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 460px) {
    .ecp-shell #ecp-main .ecp-value-grid,
    .ecp-shell #ecp-main .ecp-pack-grid,
    .ecp-shell #ecp-main .ecp-plans-grid { grid-template-columns: 1fr; }
}

/* The old sticky sidebar rules are dead code now — the classes no longer
   exist in the shelled template. Left alone deliberately: the landing page
   and any legacy shortcode still reference .ecp-header. */

/* ── Teleported dialogs must clear the shell ───────────────────────────────
   openProfile() and the nice-alert both .appendTo('body') to escape Divi's
   transform stacking context. They become siblings of #ecp-app, which now
   carries a very high z-index — so they need to out-rank it or they render
   behind the shell and look like nothing happened when you click. */
body.ecp-locked > .ecp-profile-overlay,
body.ecp-locked > .ecp-nice-alert-overlay,
body.ecp-locked > #ecp-refs-modal,
body.ecp-locked > #ecp-credits-modal,
body.ecp-locked > #ecp-editor-order-modal,
body.ecp-locked > #ecp-msg-modal,
body.ecp-locked > #ecp-refs-confirm-modal { z-index: 2147483600 !important; }

/* Those five are moved out of #ecp-panel-write at init (see app.js §1c) so
   they can be opened from Financial or anywhere else. Once on <body> they are
   no longer inside .ecp-panel, so re-assert that .hidden still hides them —
   .ecp-panel.active used to supply the display context. */
body.ecp-locked > .ecp-modal-overlay.hidden { display: none !important; }

/* Those teleported dialogs also leave the element that DEFINES the design
   tokens (#ecp-app). Re-declare them on <body> so a drawer sitting on the
   body still resolves var(--c-*). A separate class name is used for dark so
   nothing already keyed to #ecp-app.ecp-dark can accidentally match. */
body.ecp-locked {
    --c-bg: #f8fafc;  --c-bg2: #ffffff; --c-bg3: #f1f5f9;
    --c-gold: #b07d1e; --c-gold2: #c9922b;
    --c-teal: #0d7377; --c-teal2: #14a9ae;
    --c-text: #0f172a; --c-muted: #334155; --c-dim: #64748b;
    --c-border: rgba(0,0,0,0.15);
    --c-field-bg: #ffffff; --c-field-border: #b8c9db;
    --c-field-text: #0f172a; --c-field-placeholder: #94a3b8;
    --r: 10px; --r-sm: 7px;
    --ff-head: 'Playfair Display', Georgia, serif;
    --ff-body: 'DM Sans', -apple-system, sans-serif;
}
body.ecp-locked.ecp-dark-b {
    --c-bg: #0d1526;  --c-bg2: #162035; --c-bg3: #1e2d4a;
    --c-text: #f1f5f9; --c-muted: #cbd5e1; --c-dim: #94a3b8;
    --c-border: rgba(255,255,255,0.14);
    --c-field-bg: #1e2d4a; --c-field-border: #3a4d70;
    --c-field-text: #f1f5f9; --c-field-placeholder: #64748b;
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.4.2 — THE EDITOR HUB
   One card replaces two: the old .ecp-send-row (two buttons) and the old
   .ecp-verify-teaser (the same offer again, one line down). Same pitch, one
   place, with the actual roster on it.
   ══════════════════════════════════════════════════════════════════════════ */
.ecp-hub {
  position: relative; overflow: hidden;
  margin: 16px 0 0; padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f1fbfb 0%, #ffffff 55%, #fdf7ec 100%);
  border: 1px solid #d6ecec;
  box-shadow: 0 4px 18px rgba(13,115,119,.08);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.ecp-hub:hover { box-shadow: 0 10px 30px rgba(13,115,119,.14); border-color: var(--c-teal); }
.ecp-hub::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg, var(--c-teal), var(--c-gold));
}

.ecp-hub-head { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }

.ecp-hub-eye {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 21px;
  background: linear-gradient(135deg, var(--c-teal-d, #0d7377), var(--c-teal));
  box-shadow: 0 5px 14px rgba(13,115,119,.3);
  animation: ecp-hub-blink 5s ease-in-out infinite;
}
@keyframes ecp-hub-blink {
  0%, 92%, 100% { transform: scale(1); }
  95%           { transform: scale(.9) scaleY(.6); }
}

.ecp-hub-txt { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ecp-hub-title { font-size: 14.5px; font-weight: 800; color: #16212e; line-height: 1.3; }
.ecp-hub-sub   { font-size: 12.5px; color: #64748b; line-height: 1.5; }

/* The roster. Overlapping, because that is what a team looks like. */
.ecp-hub-faces { flex: 0 0 auto; display: flex; align-items: center; }
.ecp-hub-face {
  position: relative; width: 32px; height: 32px; border-radius: 50%;
  margin-left: -9px; overflow: hidden; flex: 0 0 auto;
  border: 2px solid #fff; background: linear-gradient(135deg, #0d7377, #14a9ae);
  box-shadow: 0 2px 6px rgba(15,30,45,.18);
  transition: transform .2s cubic-bezier(.2,.9,.3,1.5), z-index 0s;
}
.ecp-hub-face:first-child { margin-left: 0; }
.ecp-hub-face:hover { transform: translateY(-4px) scale(1.12); z-index: 20 !important; }
.ecp-hub-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ecp-hub-face-txt {
  display: grid; place-items: center; width: 100%; height: 100%;
  color: #fff; font-weight: 800; font-size: 12px;
}
.ecp-hub-face-more {
  display: grid; place-items: center; background: #e2e8f0; color: #475569;
  font-size: 11px; font-weight: 800;
}
.ecp-hub-faces-lbl { margin-left: 10px; font-size: 11.5px; color: #64748b; line-height: 1.35; }
.ecp-hub-faces-lbl strong { display: block; color: #0d7377; font-size: 12px; }

/* The two ways in. Equal weight — neither is upsold over the other. */
.ecp-hub-acts { display: flex; gap: 10px; margin: 14px 0 0; }
.ecp-hub-btn {
  flex: 1 1 0; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; cursor: pointer; text-align: left;
  border-radius: 12px; border: 1.5px solid transparent;
  font-family: inherit; font-size: 13.5px; font-weight: 800;
  transition: transform .18s cubic-bezier(.2,.9,.3,1.3), box-shadow .2s, filter .18s;
}
.ecp-hub-btn:hover  { transform: translateY(-2px); filter: brightness(1.04); }
.ecp-hub-btn:active { transform: translateY(0) scale(.985); }
.ecp-hub-btn-ic { font-size: 18px; flex: 0 0 auto; }
.ecp-hub-btn-t  { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ecp-hub-btn-t em {
  font-style: normal; font-weight: 600; font-size: 11px; opacity: .82; margin-top: 1px;
}
.ecp-hub-btn-sec {
  background: linear-gradient(135deg, #0d7377, #14a9ae); color: #fff;
  box-shadow: 0 6px 16px rgba(13,115,119,.28);
}
.ecp-hub-btn-full {
  background: linear-gradient(135deg, #e2b64d, #c9922b); color: #24170a;
  box-shadow: 0 6px 16px rgba(201,146,43,.28);
}
@media (max-width: 640px) {
  .ecp-hub-acts  { flex-direction: column; }
  .ecp-hub-faces { margin-top: 4px; }
}

/* ══ Already with an editor ══
   The hub disappears and this takes its place. A student who has paid should
   not be looking at a button asking them to pay. */
.ecp-hub-live {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  margin: 16px 0 0; padding: 14px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 70%);
  border: 1px solid #bbf7d0;
  animation: ecp-hub-in .45s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes ecp-hub-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ecp-hub-live-face {
  position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  overflow: visible; border: 2px solid #fff;
  background: linear-gradient(135deg, #0d7377, #14a9ae);
  box-shadow: 0 3px 10px rgba(15,30,45,.18);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 17px;
}
.ecp-hub-live-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ecp-hub-live-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #c9922b; border: 2px solid #fff;
  animation: ecp-hub-pulse 1.8s ease-in-out infinite;   /* working on it */
}
.ecp-hub-live-dot.done { background: #15803d; animation: none; }
@keyframes ecp-hub-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,146,43,.55); }
  60%      { box-shadow: 0 0 0 6px rgba(201,146,43,0); }
}

.ecp-hub-live-txt   { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ecp-hub-live-title { font-size: 14px; font-weight: 700; color: #16212e; }
.ecp-hub-live-sub   { font-size: 12px; color: #64748b; line-height: 1.5; }
.ecp-hub-live-pill {
  flex: 0 0 auto; padding: 5px 11px; border-radius: 999px;
  background: #ecfdf3; border: 1px solid #bbf7d0; color: #15803d;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
}

/* ══ The rule, stated once, where it matters ══ */
.ecp-msg-rule, .ecp-wr-rule {
  margin: 8px 0 10px; padding: 10px 13px;
  border-radius: 10px; font-size: 12px; line-height: 1.55;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
}
.ecp-wr-rule {
  background: var(--wr-warn-bg); border-color: var(--wr-warn-line); color: var(--wr-warn-ink);
}


/* ══════════════════════════════════════════════════════════════════════
   WORKSPACE — My Essays / My Orders  (v3.5.0)

   Two halves, one panel. Essays are what the student wrote; Orders are
   what an editor is doing for them. Money appears in neither — it lives
   in Financial. Everything below is built on the theme tokens so it
   works identically in light and dark.
══════════════════════════════════════════════════════════════════════ */

/* ── Top-level split ── */
.ecp-ws-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 22px;
}
.ecp-ws-tab {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px;
    background: var(--c-bg2);
    border: 1.5px solid var(--c-border);
    border-radius: var(--r);
    cursor: pointer;
    text-align: left;
    transition: border-color .16s, background .16s, transform .16s;
}
.ecp-ws-tab:hover { border-color: rgba(20,169,174,.5); transform: translateY(-1px); }
.ecp-ws-tab.active {
    border-color: var(--c-teal2);
    background: linear-gradient(135deg, rgba(13,115,119,.10), rgba(20,169,174,.04));
    box-shadow: 0 0 0 3px rgba(20,169,174,.10);
}
.ecp-ws-tab-ic  { font-size: 24px; line-height: 1; flex-shrink: 0; }
.ecp-ws-tab-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ecp-ws-tab-txt strong { font-size: 15px; font-weight: 700; color: var(--c-text); }
.ecp-ws-tab-txt em {
    font-style: normal; font-size: 12px; color: var(--c-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ecp-ws-tab-count {
    flex-shrink: 0;
    min-width: 28px; padding: 3px 9px;
    background: var(--c-bg3);
    border-radius: 999px;
    font-size: 12px; font-weight: 800; color: var(--c-muted);
    text-align: center;
}
.ecp-ws-tab.active .ecp-ws-tab-count { background: var(--c-teal); color: #fff; }
.ecp-ws-tab-dot {
    position: absolute; top: 10px; right: 10px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: #ef4444; color: #fff;
    border-radius: 999px;
    font-size: 10px; font-weight: 800; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px var(--c-bg2);
}

/* Unread dot on the sidebar nav item */
.ecp-nav-badge {
    margin-left: auto;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: #ef4444; color: #fff;
    border-radius: 999px;
    font-size: 10px; font-weight: 800; line-height: 18px; text-align: center;
}

.ecp-ws-view { display: none; }
.ecp-ws-view.active { display: block; animation: ecpWsIn .18s ease-out; }
@keyframes ecpWsIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Search + new ── */
.ecp-ws-bar { display: flex; gap: 10px; margin-bottom: 16px; }
.ecp-ws-search {
    flex: 1;
    display: flex; align-items: center; gap: 8px;
    padding: 0 14px;
    background: var(--c-field-bg);
    border: 1.5px solid var(--c-field-border);
    border-radius: var(--r-sm);
}
.ecp-ws-search:focus-within { border-color: var(--c-teal2); }
.ecp-ws-search input {
    flex: 1;
    padding: 11px 0;
    background: transparent; border: 0; outline: none;
    color: var(--c-field-text); font-family: var(--ff-body); font-size: 14px;
}
.ecp-ws-search input::placeholder { color: var(--c-field-placeholder); }
.ecp-ws-new {
    padding: 11px 16px;
    background: var(--c-teal); color: #fff;
    border: 0; border-radius: var(--r-sm);
    font-family: var(--ff-body); font-size: 13px; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    transition: background .16s;
}
.ecp-ws-new:hover { background: var(--c-teal2); }

/* ── Empty states ── */
.ecp-ws-empty {
    padding: 56px 24px; text-align: center;
    background: var(--c-bg2);
    border: 1.5px dashed var(--c-border);
    border-radius: var(--r);
}
.ecp-ws-empty-ic { font-size: 42px; margin-bottom: 12px; opacity: .8; }
.ecp-ws-empty h3 { margin: 0 0 6px; font-family: var(--ff-head); font-size: 19px; color: var(--c-text); }
.ecp-ws-empty p  { margin: 0 auto; max-width: 420px; font-size: 13.5px; color: var(--c-dim); line-height: 1.65; }
.ecp-ws-empty-cta { margin-top: 18px; }

/* ══ ESSAY CARDS ══ */
.ecp-ecards { display: flex; flex-direction: column; gap: 12px; }
.ecp-ecard {
    display: flex; align-items: stretch; gap: 16px;
    padding: 18px 20px;
    background: var(--c-bg2);
    border: 1.5px solid var(--c-border);
    border-left: 4px solid var(--c-teal);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.ecp-ecard:hover, .ecp-ecard:focus-visible {
    border-color: rgba(20,169,174,.45);
    border-left-color: var(--c-teal2);
    box-shadow: 0 6px 20px rgba(0,0,0,.07);
    transform: translateY(-1px);
    outline: none;
}
.ecp-ecard-body { flex: 1; min-width: 0; }
.ecp-ecard-ttl {
    margin: 0 0 8px;
    font-family: var(--ff-head); font-size: 17px; font-weight: 700;
    color: var(--c-text); line-height: 1.35;
}
.ecp-ecard-id {
    display: inline-flex; align-items: center; gap: 7px;
    margin-bottom: 10px;
    padding: 4px 10px;
    background: var(--c-bg3);
    border-radius: 999px;
    font-size: 11.5px;
}
.ecp-ecard-id-lbl { color: var(--c-dim); font-weight: 600; }
.ecp-ecard-id .ecp-order-no {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 800; color: var(--c-gold); letter-spacing: .3px;
}
.ecp-ecard-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ecp-sec-chip {
    padding: 3px 9px;
    background: rgba(20,169,174,.10);
    border: 1px solid rgba(20,169,174,.28);
    border-radius: 999px;
    font-size: 11px; font-weight: 600; color: var(--c-teal2);
}
.ecp-sec-chip-none {
    background: var(--c-bg3); border-color: var(--c-border); color: var(--c-dim);
}
.ecp-ecard-meta {
    display: flex; flex-wrap: wrap; gap: 14px;
    font-size: 12px; color: var(--c-dim);
}
.ecp-ecard-orderline { margin-top: 12px; }
.ecp-ecard-orders {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 6px 12px;
    background: rgba(176,125,30,.08);
    border: 1px solid rgba(176,125,30,.28);
    border-radius: 999px;
    font-size: 12px; font-weight: 700; color: var(--c-gold);
    cursor: pointer;
    transition: background .16s;
}
.ecp-ecard-orders:hover { background: rgba(176,125,30,.16); }
.ecp-ecard-orders-hot {
    padding: 2px 8px;
    background: #16a34a; color: #fff;
    border-radius: 999px; font-size: 10.5px; font-weight: 800;
}
.ecp-ecard-orders-dot {
    padding: 2px 8px;
    background: #ef4444; color: #fff;
    border-radius: 999px; font-size: 10.5px; font-weight: 800;
}
.ecp-ecard-acts {
    display: flex; flex-direction: column; gap: 8px;
    justify-content: center; flex-shrink: 0;
}

/* ══ ORDER STATUS BUCKETS ══ */
.ecp-ord-filters {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--c-border);
}
.ecp-ord-filter {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px;
    background: var(--c-bg2);
    border: 1.5px solid var(--c-border);
    border-radius: 999px;
    font-family: var(--ff-body); font-size: 12.5px; font-weight: 600;
    color: var(--c-muted);
    cursor: pointer;
    transition: all .16s;
}
.ecp-ord-filter:hover { border-color: var(--c-teal2); color: var(--c-text); }
.ecp-ord-filter-n {
    min-width: 20px; padding: 1px 6px;
    background: var(--c-bg3);
    border-radius: 999px;
    font-size: 11px; font-weight: 800; text-align: center;
}
.ecp-ord-filter.active {
    background: var(--c-teal); border-color: var(--c-teal); color: #fff;
}
.ecp-ord-filter.active .ecp-ord-filter-n { background: rgba(255,255,255,.22); color: #fff; }
/* The bucket that needs the student's attention shouts a little */
.ecp-ord-filter.ecp-of-delivered { border-color: rgba(22,163,74,.45); color: #16a34a; }
.ecp-ord-filter.ecp-of-delivered.active { background: #16a34a; border-color: #16a34a; color: #fff; }

/* ══ ORDER CARDS ══ */
.ecp-ocards { display: flex; flex-direction: column; gap: 14px; }
.ecp-ocard {
    padding: 20px;
    background: var(--c-bg2);
    border: 1.5px solid var(--c-border);
    border-left: 4px solid var(--c-dim);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.ecp-ocard:hover, .ecp-ocard:focus-visible {
    box-shadow: 0 6px 20px rgba(0,0,0,.07);
    transform: translateY(-1px);
    outline: none;
}
.ecp-ocard-pending     { border-left-color: #94a3b8; }
.ecp-ocard-in_progress { border-left-color: #14a9ae; }
.ecp-ocard-revision    { border-left-color: #f59e0b; }
.ecp-ocard-delivered   { border-left-color: #16a34a; background: linear-gradient(135deg, rgba(22,163,74,.06), transparent 60%); }
.ecp-ocard-completed   { border-left-color: #64748b; opacity: .92; }
.ecp-ocard-cancelled   { border-left-color: #ef4444; opacity: .72; }

.ecp-ocard-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ecp-ocard-ic { font-size: 22px; line-height: 1; flex-shrink: 0; }
.ecp-ocard-idw { flex: 1; min-width: 0; }
.ecp-ocard-kind { font-size: 14px; font-weight: 700; color: var(--c-text); }
.ecp-ocard-no  { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.ecp-ocard-no .ecp-order-no {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px; font-weight: 800; color: var(--c-gold); letter-spacing: .3px;
}
.ecp-ocard-ttl {
    margin-bottom: 16px;
    font-family: var(--ff-head); font-size: 16px; font-weight: 600;
    color: var(--c-muted); line-height: 1.4;
}

/* Status pill — one vocabulary everywhere */
.ecp-ostat {
    flex-shrink: 0;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: .2px;
    white-space: nowrap;
}
.ecp-ostat-pending     { background: rgba(148,163,184,.16); color: #64748b; }
.ecp-ostat-in_progress { background: rgba(20,169,174,.16);  color: #0d9499; }
.ecp-ostat-revision    { background: rgba(245,158,11,.16);  color: #d97706; }
.ecp-ostat-delivered   { background: #16a34a;               color: #fff;    }
.ecp-ostat-completed   { background: rgba(100,116,139,.16); color: #64748b; }
.ecp-ostat-cancelled   { background: rgba(239,68,68,.14);   color: #dc2626; }
#ecp-app.ecp-dark .ecp-ostat-in_progress { color: #5eead4; }
#ecp-app.ecp-dark .ecp-ostat-revision    { color: #fbbf24; }
#ecp-app.ecp-dark .ecp-ostat-pending,
#ecp-app.ecp-dark .ecp-ostat-completed   { color: #94a3b8; }
#ecp-app.ecp-dark .ecp-ostat-cancelled   { color: #fca5a5; }

/* ── Progress tracker ── */
.ecp-track {
    display: flex; align-items: flex-start;
    margin-bottom: 16px;
    padding: 14px 6px;
    background: var(--c-bg3);
    border-radius: var(--r-sm);
}
.ecp-track-lg { padding: 20px 10px; margin: 18px 0 22px; }
.ecp-track-step {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    flex-shrink: 0; width: 60px;
}
.ecp-track-lg .ecp-track-step { width: 76px; }
.ecp-track-dot {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--c-bg2);
    border: 2px solid var(--c-border);
    font-size: 11px; font-weight: 800; color: #fff;
}
.ecp-track-lbl {
    font-size: 10px; font-weight: 600; color: var(--c-dim);
    text-align: center; line-height: 1.25;
}
.ecp-track-done .ecp-track-dot { background: var(--c-teal); border-color: var(--c-teal); }
.ecp-track-done .ecp-track-lbl { color: var(--c-muted); }
.ecp-track-now  .ecp-track-dot {
    background: var(--c-gold); border-color: var(--c-gold);
    box-shadow: 0 0 0 4px rgba(176,125,30,.18);
}
.ecp-track-now  .ecp-track-lbl { color: var(--c-gold); font-weight: 800; }
.ecp-track-bar {
    flex: 1; height: 2px; margin-top: 10px; border-radius: 2px;
    background: var(--c-border);
}
.ecp-track-bar-done { background: var(--c-teal); }

.ecp-ocard-meta {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin-bottom: 14px;
    font-size: 12px; color: var(--c-dim);
}
.ecp-ocard-due  { color: #d97706; font-weight: 700; }
.ecp-ocard-file { color: #16a34a; font-weight: 700; }
.ecp-ocard-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ecp-ocard-dl   { text-decoration: none; }
.ecp-ocard-unread {
    margin-left: 6px; padding: 1px 6px;
    background: #ef4444; color: #fff;
    border-radius: 999px; font-size: 10px; font-weight: 800;
}

/* ══ SHEETS — essay detail + order drawer ══ */
.ecp-sheet {
    display: flex; flex-direction: column;
    width: 100%; max-width: 640px;
    max-height: 88vh;
    padding: 0;
    overflow: hidden;
    text-align: left;
}
.ecp-sheet-lg { max-width: 760px; }
.ecp-sheet-head {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-bg2);
}
.ecp-sheet-head-txt { flex: 1; min-width: 0; }
.ecp-sheet-title {
    margin: 0 0 6px;
    font-family: var(--ff-head); font-size: 19px; font-weight: 700;
    color: var(--c-text); line-height: 1.3;
}
.ecp-sheet-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
.ecp-sheet-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; font-weight: 800; color: var(--c-gold); letter-spacing: .3px;
}
.ecp-sheet-close {
    flex-shrink: 0;
    width: 32px; height: 32px;
    background: var(--c-bg3); border: 0; border-radius: 50%;
    color: var(--c-muted); font-size: 14px; cursor: pointer;
    transition: background .16s, color .16s;
}
.ecp-sheet-close:hover { background: #ef4444; color: #fff; }
.ecp-sheet-body { flex: 1; overflow-y: auto; padding: 20px 22px; }
.ecp-sheet-foot {
    display: flex; flex-wrap: wrap; gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--c-border);
    background: var(--c-bg3);
}
.ecp-sheet-foot:empty { display: none; }

.ecp-sheet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
.ecp-sheet-cell {
    padding: 12px 14px;
    background: var(--c-bg3);
    border-radius: var(--r-sm);
}
.ecp-sheet-cell span {
    display: block; margin-bottom: 4px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--c-dim);
}
.ecp-sheet-cell strong { font-size: 13.5px; font-weight: 700; color: var(--c-text); }

.ecp-sheet-lbl {
    margin: 22px 0 10px;
    font-size: 12px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .6px; color: var(--c-muted);
}
.ecp-sheet-secs { display: flex; flex-direction: column; gap: 6px; }
.ecp-sheet-sec {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--c-bg3);
    border-radius: var(--r-sm);
    opacity: .55;
}
.ecp-sheet-sec.done { opacity: 1; }
.ecp-sheet-sec-n { flex: 1; font-size: 13px; font-weight: 600; color: var(--c-text); }
.ecp-sheet-sec-s { font-size: 11.5px; font-weight: 700; color: var(--c-dim); }
.ecp-sheet-sec.done .ecp-sheet-sec-s { color: #16a34a; }

.ecp-sheet-orders { display: flex; flex-direction: column; gap: 8px; }
.ecp-sheet-order {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: var(--c-bg3);
    border: 1.5px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer; text-align: left;
    transition: border-color .16s, background .16s;
}
.ecp-sheet-order:hover { border-color: var(--c-teal2); }
.ecp-sheet-order-ic { font-size: 18px; }
.ecp-sheet-order-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ecp-sheet-order-tx strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; font-weight: 800; color: var(--c-gold);
}
.ecp-sheet-order-tx em { font-style: normal; font-size: 12px; color: var(--c-dim); }
.ecp-sheet-order-dot {
    min-width: 18px; padding: 1px 6px;
    background: #ef4444; color: #fff;
    border-radius: 999px; font-size: 10px; font-weight: 800; text-align: center;
}
.ecp-sheet-order-go { font-size: 18px; color: var(--c-dim); }
.ecp-sheet-note {
    padding: 14px 16px;
    background: var(--c-bg3);
    border-left: 3px solid var(--c-teal);
    border-radius: var(--r-sm);
    font-size: 13px; color: var(--c-muted); line-height: 1.6;
}

/* ── Order drawer internals ── */
.ecp-od-pill { margin-left: 4px; }
.ecp-od-tabs {
    display: flex; gap: 4px;
    padding: 0 22px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-bg2);
}
.ecp-od-tab {
    position: relative;
    padding: 12px 16px;
    background: none; border: 0;
    border-bottom: 2.5px solid transparent;
    font-family: var(--ff-body); font-size: 13px; font-weight: 700;
    color: var(--c-dim); cursor: pointer;
    transition: color .16s, border-color .16s;
}
.ecp-od-tab:hover  { color: var(--c-text); }
.ecp-od-tab.active { color: var(--c-teal2); border-bottom-color: var(--c-teal2); }
.ecp-od-tab-badge {
    margin-left: 5px; padding: 1px 6px;
    background: #ef4444; color: #fff;
    border-radius: 999px; font-size: 10px; font-weight: 800;
}
.ecp-od-view { display: none; }
.ecp-od-view.active { display: block; }

.ecp-od-paper {
    margin-bottom: 4px;
    font-family: var(--ff-head); font-size: 17px; font-weight: 700;
    color: var(--c-text); line-height: 1.35;
}
.ecp-od-files { display: flex; flex-direction: column; gap: 8px; }
.ecp-od-file {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: rgba(22,163,74,.08);
    border: 1.5px solid rgba(22,163,74,.3);
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: background .16s;
}
.ecp-od-file:hover { background: rgba(22,163,74,.16); }
.ecp-od-file-ic { font-size: 18px; }
.ecp-od-file-tx { display: flex; flex-direction: column; gap: 2px; }
.ecp-od-file-tx strong { font-size: 13px; font-weight: 700; color: var(--c-text); }
.ecp-od-file-tx em     { font-style: normal; font-size: 11px; color: var(--c-dim); }

.ecp-od-note {
    padding: 14px 16px;
    background: var(--c-bg3);
    border-left: 3px solid var(--c-teal);
    border-radius: var(--r-sm);
    font-size: 13.5px; color: var(--c-muted); line-height: 1.65;
}
.ecp-od-note-you { border-left-color: var(--c-gold); }

.ecp-od-timeline { list-style: none; margin: 0; padding: 0 0 0 4px; }
.ecp-od-timeline li {
    position: relative;
    display: flex; gap: 14px;
    padding: 0 0 18px 16px;
    border-left: 2px solid var(--c-border);
}
.ecp-od-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.ecp-od-tl-dot {
    position: absolute; left: -6px; top: 4px;
    width: 10px; height: 10px;
    background: var(--c-teal);
    border: 2px solid var(--c-bg2);
    border-radius: 50%;
}
.ecp-od-timeline strong { display: block; font-size: 13px; font-weight: 700; color: var(--c-text); }
.ecp-od-timeline em     { font-style: normal; font-size: 11.5px; color: var(--c-dim); }
.ecp-od-timeline p      { margin: 6px 0 0; font-size: 12.5px; color: var(--c-muted); line-height: 1.55; }

/* The drawer's thread reuses the message bubbles, just taller */
#ecp-od-msgs { min-height: 220px; max-height: 340px; }

/* ── Financial → Orders signpost ── */
.ecp-fin-orders-link {
    display: flex; align-items: center; gap: 14px;
    width: 100%;
    margin: 20px 0;
    padding: 16px 18px;
    background: var(--c-bg2);
    border: 1.5px solid var(--c-border);
    border-left: 4px solid var(--c-gold);
    border-radius: var(--r);
    cursor: pointer; text-align: left;
    transition: border-color .16s, transform .16s;
}
.ecp-fin-orders-link:hover { border-color: var(--c-gold2); transform: translateY(-1px); }
.ecp-fin-orders-ic { font-size: 22px; }
.ecp-fin-orders-tx { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ecp-fin-orders-tx strong { font-size: 14px; font-weight: 700; color: var(--c-text); }
.ecp-fin-orders-tx em     { font-style: normal; font-size: 12px; color: var(--c-dim); }
.ecp-fin-orders-go        { font-size: 22px; color: var(--c-gold); }

/* ── Mobile ── */
@media (max-width: 768px) {
    .ecp-ws-tabs { grid-template-columns: 1fr; gap: 8px; }
    .ecp-ws-tab  { padding: 13px 14px; }
    .ecp-ws-tab-txt em { display: none; }
    .ecp-ws-bar  { flex-direction: column; }
    .ecp-ws-new  { width: 100%; }

    .ecp-ecard { flex-direction: column; gap: 14px; }
    .ecp-ecard-acts { flex-direction: row; }
    .ecp-ecard-acts .ecp-btn-sm { flex: 1; }

    .ecp-ord-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
    .ecp-ord-filter  { flex-shrink: 0; }

    /* The tracker scrolls rather than squashing into unreadable stubs */
    .ecp-track { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ecp-track-step { width: 62px; }
    .ecp-track-bar  { min-width: 16px; }

    .ecp-ocard-acts .ecp-btn-sm { flex: 1 1 auto; justify-content: center; }

    .ecp-sheet { max-width: 100%; max-height: 94vh; }
    .ecp-sheet-body, .ecp-sheet-head, .ecp-sheet-foot { padding-left: 16px; padding-right: 16px; }
    .ecp-od-tabs { padding: 0 16px; }
    .ecp-sheet-grid { grid-template-columns: 1fr 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ORDERS + MESSAGING — REFRESH (v3.6.0)

   What was wrong with the old one: six identical grey circles in a row, a
   hairline between them, and a row of ghost buttons. It told the student
   nothing they did not already know, and it looked like a form. A student who
   has paid for an editor wants ONE thing from this screen — "where is my
   paper?" — and the screen should answer before they finish reading it.

   So: a real progress rail, filled to a real percentage, with the live stage
   named and pulsing. A plain-English line saying what is happening and whether
   anything is wanted from them. And the two things they actually click made
   into proper buttons instead of grey outlines.

   Everything below is later in the cascade than the v3.5.0 rules it replaces,
   so it wins on equal specificity — nothing above needed deleting.
   All colour goes through the theme tokens, so dark mode comes free.
══════════════════════════════════════════════════════════════════════════ */

/* ── Status buckets ── */
.ecp-ord-filters {
    gap: 9px;
    padding-bottom: 18px;
    margin-bottom: 20px;
}
.ecp-ord-filter {
    padding: 9px 15px;
    border-width: 1.5px;
    font-size: 12.5px; font-weight: 700;
    box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.ecp-ord-filter:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13,115,119,.14); }
.ecp-ord-filter.active {
    background: linear-gradient(135deg, var(--c-teal), var(--c-teal2));
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(13,115,119,.28);
}
.ecp-ord-filter.ecp-of-delivered.active {
    background: linear-gradient(135deg, #15803d, #22c55e);
    box-shadow: 0 4px 14px rgba(22,163,74,.3);
}

/* ── The card ── */
.ecp-ocards { gap: 16px; }
.ecp-ocard {
    position: relative;
    padding: 22px 22px 20px;
    border: 1.5px solid var(--c-border);
    border-left: none;                       /* replaced by the accent strip below */
    border-radius: 14px;
    background: var(--c-bg2);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* The accent strip: a gradient, not a flat 4px line */
.ecp-ocard::before {
    content: '';
    position: absolute; inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--ecp-accent, #94a3b8), var(--ecp-accent2, #64748b));
}
.ecp-ocard:hover, .ecp-ocard:focus-visible {
    transform: translateY(-2px);
    border-color: var(--c-teal2);
    box-shadow: 0 12px 30px rgba(15,23,42,.10);
    outline: none;
}
#ecp-app.ecp-dark .ecp-ocard:hover { box-shadow: 0 12px 32px rgba(0,0,0,.42); }

.ecp-ocard-pending     { --ecp-accent:#94a3b8; --ecp-accent2:#64748b; }
.ecp-ocard-in_progress { --ecp-accent:#14a9ae; --ecp-accent2:#0d7377; }
.ecp-ocard-revision    { --ecp-accent:#fbbf24; --ecp-accent2:#d97706; }
.ecp-ocard-delivered   { --ecp-accent:#4ade80; --ecp-accent2:#15803d;
    background: linear-gradient(135deg, rgba(22,163,74,.07), transparent 55%), var(--c-bg2); }
.ecp-ocard-completed   { --ecp-accent:#94a3b8; --ecp-accent2:#475569; opacity: .95; }
.ecp-ocard-cancelled   { --ecp-accent:#f87171; --ecp-accent2:#dc2626; opacity: .78; }

.ecp-ocard-hd { gap: 13px; margin-bottom: 10px; }
.ecp-ocard-ic {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: 11px;
    background: var(--c-bg3);
    font-size: 20px;
}
.ecp-ocard-kind { font-size: 14.5px; font-weight: 800; letter-spacing: -.1px; }
.ecp-ocard-ttl {
    margin: 0 0 18px;
    font-family: var(--ff-head); font-size: 17px; font-weight: 600;
    color: var(--c-text); line-height: 1.4;
}
.ecp-ostat {
    padding: 6px 12px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
}

/* ── The tracker ── */
.ecp-track {
    display: block;
    position: relative;
    margin: 0 0 16px;
    padding: 15px 16px 13px;
    background: var(--c-bg3);
    border: 1px solid var(--c-border);
    border-radius: 12px;
}
.ecp-track-lg { padding: 20px 20px 16px; margin: 20px 0 24px; }

.ecp-track-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 12px;
}
.ecp-track-stage {
    font-size: 12.5px; font-weight: 800; color: var(--c-text);
    letter-spacing: -.1px;
}
.ecp-track-stage::before { content: '📍 '; }
.ecp-track-pct {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; font-weight: 800; color: var(--c-teal2);
}

/* One continuous rail, filled to the real percentage */
.ecp-track-rail {
    position: relative;
    height: 5px;
    /* Half a column in from each end — the rail starts at the centre of the
       first dot and stops at the centre of the last one. */
    margin: 0 calc(50% / var(--ecp-n, 6));
    border-radius: 99px;
    background: var(--c-border);
    overflow: hidden;
}
.ecp-track-fill {
    display: block; height: 100%;
    width: var(--ecp-pct, 0%);
    border-radius: 99px;
    background: linear-gradient(90deg, var(--c-teal), var(--c-teal2) 70%, var(--c-gold2));
    box-shadow: 0 0 10px rgba(20,169,174,.5);
    transition: width .7s cubic-bezier(.4, 0, .2, 1);
}
.ecp-ocard-delivered .ecp-track-fill,
.ecp-ocard-completed .ecp-track-fill { background: linear-gradient(90deg, #15803d, #4ade80); box-shadow: 0 0 10px rgba(34,197,94,.45); }

.ecp-track-steps { display: flex; margin-top: -13px; }
.ecp-track-step {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    flex: 1 1 0; min-width: 0; width: auto;
}
.ecp-track-dot {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--c-bg2);
    border: 2px solid var(--c-border);
    font-size: 10px; font-weight: 800; color: #fff;
    transition: all .25s;
}
.ecp-track-lbl {
    font-size: 10px; font-weight: 700; color: var(--c-dim);
    text-align: center; line-height: 1.25;
    letter-spacing: .1px;
}
.ecp-track-done .ecp-track-dot {
    background: var(--c-teal); border-color: var(--c-teal);
}
.ecp-track-done .ecp-track-lbl { color: var(--c-muted); }
.ecp-track-now .ecp-track-dot {
    background: var(--c-gold2); border-color: var(--c-gold2);
    transform: scale(1.18);
    animation: ecp-pulse 2s ease-out infinite;
}
.ecp-track-now .ecp-track-lbl { color: var(--c-gold2); font-weight: 800; }
@keyframes ecp-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(201,146,43,.5); }
    70%  { box-shadow: 0 0 0 8px rgba(201,146,43,0); }
    100% { box-shadow: 0 0 0 0 rgba(201,146,43,0); }
}
@media (prefers-reduced-motion: reduce) {
    .ecp-track-now .ecp-track-dot { animation: none; }
    .ecp-track-fill { transition: none; }
}
.ecp-ocard-delivered .ecp-track-now .ecp-track-dot,
.ecp-ocard-completed .ecp-track-now .ecp-track-dot {
    background: #16a34a; border-color: #16a34a; animation: none;
}
.ecp-ocard-delivered .ecp-track-now .ecp-track-lbl { color: #16a34a; }

/* ── "What happens next" — the line that stops the support ticket ── */
.ecp-ocard-next {
    display: flex; align-items: flex-start; gap: 11px;
    margin-bottom: 15px; padding: 12px 14px;
    border-radius: 11px;
    background: var(--c-bg3);
    border-left: 3px solid var(--ecp-accent, var(--c-teal2));
}
.ecp-ocard-next-ic { font-size: 17px; line-height: 1.3; flex-shrink: 0; }
.ecp-ocard-next-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ecp-ocard-next-tx strong { font-size: 13px; font-weight: 800; color: var(--c-text); }
.ecp-ocard-next-tx em {
    font-style: normal; font-size: 12px; color: var(--c-dim); line-height: 1.5;
}
.ecp-ocard-next-delivered {
    background: rgba(22,163,74,.10);
    border-left-color: #16a34a;
}
.ecp-ocard-next-delivered strong { color: #15803d; }
#ecp-app.ecp-dark .ecp-ocard-next-delivered strong { color: #4ade80; }

/* ── The review window ──
   A distinct colour from both "searching" and "working", because it is a
   distinct thing: someone is on your paper, reading it, right now. */
.ecp-ocard-next-reviewing {
    background: rgba(37,99,235,.09);
    border-left-color: #2563eb;
}
.ecp-ocard-next-reviewing strong { color: #1d4ed8; }
#ecp-app.ecp-dark .ecp-ocard-next-reviewing { background: rgba(96,165,250,.13); }
#ecp-app.ecp-dark .ecp-ocard-next-reviewing strong { color: #93c5fd; }

/* The confirmation clock. It sits directly under the line it belongs to, and
   the bar is the whole point: a number alone still leaves the student guessing
   how much of the wait is behind them. */
.ecp-ocard-conf {
    display: flex; align-items: center; gap: 10px;
    margin: -8px 0 15px; padding: 9px 14px;
    border-radius: 10px;
    background: var(--c-bg3);
    border: 1px dashed rgba(37,99,235,.32);
}
.ecp-conf-bar {
    flex: 1; height: 5px; min-width: 60px;
    border-radius: 999px; overflow: hidden;
    background: rgba(37,99,235,.16);
}
.ecp-conf-bar i {
    display: block; height: 100%; width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg,#60a5fa,#2563eb);
    transition: width 1s linear;
}
.ecp-conf-tx {
    flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--c-dim);
}
.ecp-conf-tx b { color: #1d4ed8; font-variant-numeric: tabular-nums; }
#ecp-app.ecp-dark .ecp-conf-tx b { color: #93c5fd; }
.ecp-ocard-conf.ecp-conf-done { border-style: solid; border-color: rgba(22,163,74,.45); }
.ecp-ocard-conf.ecp-conf-done .ecp-conf-bar i { background: #16a34a; }
.ecp-ocard-conf.ecp-conf-done .ecp-conf-tx b { color: #15803d; }

/* The same pair inside the drawer, where they get a little more room. */
.ecp-od-review { margin: 0 0 16px; }
.ecp-od-review .ecp-ocard-next { margin-bottom: 10px; }
.ecp-od-review .ecp-ocard-conf { margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .ecp-conf-bar i { transition: none; }
}

/* ── Meta chips ── */
.ecp-ocard-meta { gap: 8px; margin-bottom: 16px; }
.ecp-ochip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    background: var(--c-bg3);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    font-size: 11.5px; font-weight: 600; color: var(--c-dim);
}
.ecp-ochip-due  { color: #d97706; border-color: rgba(217,119,6,.35);  background: rgba(217,119,6,.08);  font-weight: 800; }
.ecp-ochip-file { color: #16a34a; border-color: rgba(22,163,74,.35);  background: rgba(22,163,74,.08);  font-weight: 800; }
#ecp-app.ecp-dark .ecp-ochip-due  { color: #fbbf24; }
#ecp-app.ecp-dark .ecp-ochip-file { color: #4ade80; }

/* ── Actions — real buttons, not grey outlines ── */
.ecp-ocard-acts { gap: 9px; align-items: center; }
.ecp-obtn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px;
    border-radius: 9px;
    border: 1.5px solid transparent;
    font-family: var(--ff-body); font-size: 13px; font-weight: 700;
    cursor: pointer; text-decoration: none;
    transition: transform .14s, box-shadow .14s, background .14s, border-color .14s;
}
.ecp-obtn:hover { transform: translateY(-1px); }
.ecp-obtn-go {
    background: linear-gradient(135deg, var(--c-teal), var(--c-teal2));
    color: #fff;
    box-shadow: 0 3px 10px rgba(13,115,119,.26);
}
.ecp-obtn-go:hover { box-shadow: 0 6px 18px rgba(13,115,119,.36); }
.ecp-ocard-delivered .ecp-obtn-go {
    background: linear-gradient(135deg, #15803d, #22c55e);
    box-shadow: 0 3px 10px rgba(22,163,74,.3);
}
.ecp-obtn-msg {
    position: relative;
    background: var(--c-bg2);
    border-color: var(--c-border);
    color: var(--c-muted);
}
.ecp-obtn-msg:hover {
    border-color: var(--c-teal2);
    color: var(--c-teal2);
    background: rgba(20,169,174,.07);
}
.ecp-obtn-dl {
    background: var(--c-bg3);
    border-color: var(--c-border);
    color: var(--c-muted);
    max-width: 240px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ecp-obtn-dl:hover { border-color: #16a34a; color: #16a34a; }
.ecp-ocard-unread {
    margin-left: 2px; padding: 2px 7px;
    background: #ef4444; color: #fff;
    border-radius: 999px; font-size: 10px; font-weight: 800;
    box-shadow: 0 0 0 3px rgba(239,68,68,.16);
}

/* ── Messaging: tokenised, so it stops being a white box in dark mode ── */
.ecp-msg-thread { gap: 12px; }
.ecp-msg-empty { color: var(--c-dim); }
.ecp-msg-bubble {
    max-width: 88%;
    padding: 11px 14px;
    background: var(--c-bg2);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-dim);
    border-radius: 13px 13px 13px 4px;
    box-shadow: 0 2px 8px rgba(15,23,42,.05);
}
.ecp-msg-mine {
    border-radius: 13px 13px 4px 13px;
    border-left-color: var(--c-teal2);
    background: linear-gradient(135deg, rgba(20,169,174,.10), rgba(20,169,174,.04));
}
.ecp-msg-from-editor  { border-left-color: #6366f1; }
.ecp-msg-from-support { border-left-color: var(--c-gold2); }
.ecp-msg-bubble-hd strong { color: var(--c-text); }
.ecp-msg-bubble-hd em     { color: var(--c-dim); }
.ecp-msg-bubble-body      { color: var(--c-text); }

.ecp-msg-compose {
    padding: 15px 18px 17px;
    border-top: 1px solid var(--c-border);
    background: var(--c-bg2);
}
/* Recipient: a segmented control, not two loose radios */
.ecp-msg-to {
    display: inline-flex; gap: 0;
    margin: 0 0 11px;
    padding: 3px;
    background: var(--c-bg3);
    border: 1px solid var(--c-border);
    border-radius: 999px;
}
.ecp-msg-to-opt { position: relative; margin: 0; cursor: pointer; }
.ecp-msg-to-opt input {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.ecp-msg-to-opt span {
    display: block;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 12.5px; font-weight: 700; color: var(--c-dim);
    white-space: nowrap;
    transition: all .16s;
}
.ecp-msg-to-opt:hover span { color: var(--c-text); }
.ecp-msg-to-opt input:checked + span {
    background: var(--c-bg2);
    color: var(--c-teal2);
    box-shadow: 0 2px 6px rgba(15,23,42,.12);
}
.ecp-msg-to-opt input:focus-visible + span { outline: 2px solid var(--c-teal2); outline-offset: 2px; }

.ecp-msg-input {
    background: var(--c-field-bg);
    color: var(--c-field-text);
    border-color: var(--c-field-border);
    border-radius: 11px;
}
.ecp-msg-input::placeholder { color: var(--c-field-placeholder); }
.ecp-msg-rule {
    margin: 11px 0 0;
    background: rgba(201,146,43,.10);
    border: 1px solid rgba(201,146,43,.32);
    color: var(--c-muted);
}
.ecp-msg-rule strong { color: var(--c-text); }

/* ── Narrow screens: the tracker is the first thing that breaks ── */
@media (max-width: 620px) {
    .ecp-ocard { padding: 18px 16px 16px; }
    .ecp-ocard-ttl { font-size: 15.5px; }
    .ecp-track { padding: 13px 12px 11px; }
    .ecp-track-lbl { font-size: 8.5px; letter-spacing: 0; }
    .ecp-track-dot { width: 18px; height: 18px; font-size: 9px; }
    .ecp-track-steps { margin-top: -11px; }
    .ecp-obtn { flex: 1 1 auto; justify-content: center; padding: 11px 12px; }
    .ecp-obtn-dl { max-width: 100%; flex-basis: 100%; }
    .ecp-msg-to { display: flex; width: 100%; }
    .ecp-msg-to-opt { flex: 1; }
    .ecp-msg-to-opt span { text-align: center; }
}


/* ══════════════════════════════════════════════════════════════════════════
   THE ORDER DRAWER — CONTRAST FIX + REBUILD (v3.6.0)

   THE BUG, first, because it explains everything that looked "off":

     .ecp-modal-box { background: var(--c-surface, #1a2234); }

   --c-surface is declared NOWHERE in this stylesheet. It never has been. So
   every modal box falls back to that hard-coded navy — in light mode too —
   while the head, the foot and the fact cells inside it are painted with
   --c-bg2 / --c-bg3 (white, in light mode) and the text with --c-text (near
   black, in light mode). A near-black paper title on a navy panel it did not
   know it was sitting on. That is why the title and the order history were
   invisible, and why the header looked like a white strip glued to a dark box.

   The sheets are therefore pinned to the real theme surface below. Everything
   else here is the enhancement: colour that carries meaning, not decoration.
══════════════════════════════════════════════════════════════════════════ */

/* ── The fix. The sheet is a themed surface, not a stray navy box. ── */
.ecp-modal-box.ecp-sheet {
    background: var(--c-bg2);
    border: 1px solid var(--c-border);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.ecp-sheet-body { background: var(--c-bg2); }

/* ── Head: a gradient bar, so the drawer opens with some life in it ── */
.ecp-sheet-head {
    position: relative;
    padding: 22px 22px 17px;
    background: linear-gradient(135deg, rgba(13,115,119,.10), transparent 55%, rgba(201,146,43,.10)), var(--c-bg2);
}
.ecp-sheet-head::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--c-teal), var(--c-teal2) 45%, var(--c-gold2));
}
.ecp-sheet-title { font-size: 20px; color: var(--c-text); }
.ecp-sheet-close {
    background: var(--c-bg3);
    border: 1px solid var(--c-border);
    color: var(--c-dim);
    border-radius: 9px;
    transition: all .16s;
}
.ecp-sheet-close:hover { background: rgba(239,68,68,.12); border-color: #ef4444; color: #ef4444; }
.ecp-sheet-foot { background: var(--c-bg3); }

/* ── Tabs: pills, with the live one filled ── */
.ecp-od-tabs {
    gap: 6px;
    padding: 12px 22px 0;
    background: var(--c-bg2);
}
.ecp-od-tab {
    padding: 9px 16px 11px;
    border-radius: 9px 9px 0 0;
    border-bottom: 2.5px solid transparent;
}
.ecp-od-tab.active {
    background: linear-gradient(180deg, rgba(20,169,174,.14), transparent);
    color: var(--c-teal2);
}

/* ── The paper, as a card and not a stray line of text ── */
.ecp-od-paper {
    display: flex; align-items: center; gap: 13px;
    margin-bottom: 18px; padding: 14px 16px;
    background: linear-gradient(135deg, rgba(13,115,119,.09), rgba(201,146,43,.06));
    border: 1px solid var(--c-border);
    border-radius: 12px;
}
.ecp-od-paper-ic {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 40px; height: 40px;
    background: var(--c-bg2);
    border-radius: 10px; font-size: 19px;
}
.ecp-od-paper-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ecp-od-paper-tx em {
    font-style: normal; font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .6px; color: var(--c-teal2);
}
.ecp-od-paper-tx strong {
    font-family: var(--ff-head); font-size: 17px; font-weight: 700;
    color: var(--c-text); line-height: 1.35;    /* was invisible: dark ink, navy box */
}

/* ── Facts: one colour each, so the eye finds the due date without reading ── */
.ecp-sheet-grid { gap: 11px; }
.ecp-sheet-cell {
    position: relative;
    padding: 12px 14px 12px 15px;
    background: var(--c-bg3);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--ecp-cell, var(--c-dim));
    border-radius: 10px;
    transition: transform .14s, box-shadow .14s;
}
.ecp-sheet-cell:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(15,23,42,.08); }
.ecp-sheet-cell span {
    display: flex; align-items: center; gap: 5px;
    margin-bottom: 5px;
    font-size: 10px; letter-spacing: .6px;
    color: var(--ecp-cell, var(--c-dim));
    opacity: .95;
}
.ecp-sheet-cell span i { font-style: normal; font-size: 12px; }
.ecp-sheet-cell strong { font-size: 13.5px; color: var(--c-text); }

.ecp-cell-teal   { --ecp-cell: #0d9499; background: linear-gradient(135deg, rgba(20,169,174,.10), var(--c-bg3) 60%); }
.ecp-cell-indigo { --ecp-cell: #6366f1; background: linear-gradient(135deg, rgba(99,102,241,.10), var(--c-bg3) 60%); }
.ecp-cell-violet { --ecp-cell: #9333ea; background: linear-gradient(135deg, rgba(147,51,234,.10), var(--c-bg3) 60%); }
.ecp-cell-amber  { --ecp-cell: #d97706; background: linear-gradient(135deg, rgba(217,119,6,.12),  var(--c-bg3) 60%); }
.ecp-cell-gold   { --ecp-cell: #b07d1e; background: linear-gradient(135deg, rgba(201,146,43,.12), var(--c-bg3) 60%); }
.ecp-cell-green  { --ecp-cell: #16a34a; background: linear-gradient(135deg, rgba(22,163,74,.10),  var(--c-bg3) 60%); }
.ecp-cell-slate  { --ecp-cell: #64748b; }
/* Dark mode wants the ink brighter, not the panel darker */
#ecp-app.ecp-dark .ecp-cell-teal,   body.ecp-dark-b .ecp-cell-teal   { --ecp-cell: #5eead4; }
#ecp-app.ecp-dark .ecp-cell-indigo, body.ecp-dark-b .ecp-cell-indigo { --ecp-cell: #a5b4fc; }
#ecp-app.ecp-dark .ecp-cell-violet, body.ecp-dark-b .ecp-cell-violet { --ecp-cell: #d8b4fe; }
#ecp-app.ecp-dark .ecp-cell-amber,  body.ecp-dark-b .ecp-cell-amber  { --ecp-cell: #fbbf24; }
#ecp-app.ecp-dark .ecp-cell-gold,   body.ecp-dark-b .ecp-cell-gold   { --ecp-cell: #f0b942; }
#ecp-app.ecp-dark .ecp-cell-green,  body.ecp-dark-b .ecp-cell-green  { --ecp-cell: #4ade80; }
#ecp-app.ecp-dark .ecp-cell-slate,  body.ecp-dark-b .ecp-cell-slate  { --ecp-cell: #94a3b8; }

/* ── Section labels ── */
.ecp-sheet-lbl {
    display: flex; align-items: center; gap: 7px;
    margin: 24px 0 11px;
    color: var(--c-muted);
}
.ecp-sheet-lbl::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--c-border), transparent);
}
.ecp-lbl-teal  { color: #0d9499; }
.ecp-lbl-green { color: #16a34a; }
.ecp-lbl-gold  { color: #b07d1e; }
.ecp-lbl-slate { color: var(--c-dim); }
#ecp-app.ecp-dark .ecp-lbl-teal,  body.ecp-dark-b .ecp-lbl-teal  { color: #5eead4; }
#ecp-app.ecp-dark .ecp-lbl-green, body.ecp-dark-b .ecp-lbl-green { color: #4ade80; }
#ecp-app.ecp-dark .ecp-lbl-gold,  body.ecp-dark-b .ecp-lbl-gold  { color: #f0b942; }

/* ── Order history: a real timeline ── */
.ecp-od-timeline { padding-left: 6px; }
.ecp-od-timeline li {
    padding: 0 0 20px 20px;
    border-left: 2px solid var(--c-border);
}
.ecp-od-tl-dot {
    left: -10px; top: 1px;
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ecp-tl, var(--c-teal));
    border: 2px solid var(--c-bg2);
    box-shadow: 0 0 0 2px var(--ecp-tl, var(--c-teal));
    font-size: 9px; color: #fff; line-height: 1;
}
.ecp-od-tl-green { --ecp-tl: #16a34a; }
.ecp-od-tl-teal  { --ecp-tl: #0d9499; }
.ecp-od-tl-gold  { --ecp-tl: #c9922b; }
.ecp-od-tl-amber { --ecp-tl: #d97706; }
.ecp-od-tl-red   { --ecp-tl: #ef4444; }
.ecp-od-tl-slate { --ecp-tl: #94a3b8; }
.ecp-od-timeline li strong { color: var(--c-text); }        /* was black-on-navy */
.ecp-od-timeline li em {
    display: inline-block; margin-top: 2px;
    color: var(--c-dim); font-size: 11.5px; font-weight: 600;
}
.ecp-od-timeline li p { color: var(--c-muted); }
.ecp-od-timeline li:first-child strong { color: var(--ecp-tl, var(--c-text)); }

/* ── Footer buttons ── */
.ecp-sheet-foot .ecp-od-tab-jump {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px;
    background: var(--c-bg2);
    border: 1.5px solid var(--c-border);
    border-radius: 9px;
    font-family: var(--ff-body); font-size: 13px; font-weight: 700;
    color: var(--c-muted); cursor: pointer;
    transition: all .16s;
}
.ecp-sheet-foot .ecp-od-tab-jump:hover {
    border-color: var(--c-teal2); color: var(--c-teal2);
    background: rgba(20,169,174,.08); transform: translateY(-1px);
}

@media (max-width: 620px) {
    .ecp-sheet-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 9px; }
    .ecp-od-paper-tx strong { font-size: 15.5px; }
}

/* ── Contrast pass, measured rather than eyeballed ───────────────────────────
   Colour is only useful if it can be READ. The mid-tone greens and teals that
   look right on a dark panel drop to ~3.3:1 on a white one, and --c-dim drops
   to ~3.4:1 on the dark panel — both below the 4.5:1 floor for small text.
   So each accent carries two inks: a darkened one for light mode, a brightened
   one for dark. The DOT keeps the vivid colour; only the TEXT is corrected. */
.ecp-lbl-green { color: #15803d; }
.ecp-lbl-teal  { color: #0d7377; }
.ecp-lbl-gold  { color: #8a5f0d; }
.ecp-cell-teal   { --ecp-cell: #0d7377; }
.ecp-cell-green  { --ecp-cell: #15803d; }
.ecp-cell-indigo { --ecp-cell: #4f46e5; }
.ecp-cell-violet { --ecp-cell: #7e22ce; }
.ecp-cell-amber  { --ecp-cell: #b45309; }
.ecp-cell-gold   { --ecp-cell: #8a5f0d; }

/* The first (most recent) event names itself in its own colour — darkened here
   for the same reason. */
.ecp-od-tl-green.ecp-od-tl-green { --ecp-tl-ink: #15803d; }
.ecp-od-tl-teal  { --ecp-tl-ink: #0d7377; }
.ecp-od-tl-gold  { --ecp-tl-ink: #8a5f0d; }
.ecp-od-tl-amber { --ecp-tl-ink: #b45309; }
.ecp-od-tl-red   { --ecp-tl-ink: #dc2626; }
.ecp-od-tl-slate { --ecp-tl-ink: var(--c-muted); }
.ecp-od-timeline li:first-child strong { color: var(--ecp-tl-ink, var(--c-text)); }

#ecp-app.ecp-dark .ecp-od-tl-green, body.ecp-dark-b .ecp-od-tl-green { --ecp-tl-ink: #4ade80; }
#ecp-app.ecp-dark .ecp-od-tl-teal,  body.ecp-dark-b .ecp-od-tl-teal  { --ecp-tl-ink: #5eead4; }
#ecp-app.ecp-dark .ecp-od-tl-gold,  body.ecp-dark-b .ecp-od-tl-gold  { --ecp-tl-ink: #f0b942; }
#ecp-app.ecp-dark .ecp-od-tl-amber, body.ecp-dark-b .ecp-od-tl-amber { --ecp-tl-ink: #fbbf24; }
#ecp-app.ecp-dark .ecp-od-tl-red,   body.ecp-dark-b .ecp-od-tl-red   { --ecp-tl-ink: #fca5a5; }

/* --c-dim is #64748b in dark mode: fine for a 22px number, far too quiet for
   11px metadata. Timestamps and captions inside the drawer use --c-muted. */
#ecp-app.ecp-dark .ecp-od-timeline li em,
body.ecp-dark-b   .ecp-od-timeline li em { color: var(--c-muted); }

/* The file size sits on a green-tinted panel, which lifts the floor under it —
   --c-dim lands at 4.36:1 there, just under. --c-muted in both modes. */
.ecp-od-file-tx em { color: var(--c-muted); }


/* ══════════════════════════════════════════════════════════════════════════
   THE MESSAGES TAB (v3.6.1)

   Three separate faults, one screenshot:

   1. TWO SCROLLERS, FIGHTING. .ecp-sheet-body is a scroller; #ecp-od-msgs was
      given its own min-height:220px / max-height:340px / overflow:auto INSIDE
      it. So the thread scrolled within a box that was itself scrolling within
      the drawer, and the compose box — the entire point of the tab — was
      pushed below the fold and clipped. One scroller. The thread grows, the
      sheet scrolls, and the compose sticks to the bottom of the viewport so it
      is always reachable no matter how long the conversation gets.

   2. .ecp-msg-thread carried background:#f8fafc, hard-coded. Combined with the
      --c-surface bug that made the box navy, that is the pale slab floating in
      a dark panel in the screenshot.

   3. MY OWN REGRESSION, v3.6.0. I tokenised .ecp-msg-compose and .ecp-msg-bubble
      — but the LEGACY messages modal (#ecp-msg-modal, still reachable from the
      Financial panel) forces itself white with !important in both themes. In
      dark mode its compose box would therefore have gone navy inside a white
      dialog. Rather than unpick the !important, that modal is pinned to the
      light token set: everything token-based inside it now resolves light, which
      is what its own box has always been.
══════════════════════════════════════════════════════════════════════════ */

/* ── 1. One scroller ── */
#ecp-order-modal .ecp-sheet-body { padding: 0; }
#ecp-od-details  { padding: 20px 22px; }

#ecp-od-thread.active {
    display: flex; flex-direction: column;
    min-height: 100%;
}
#ecp-od-msgs {
    flex: 1 1 auto;
    min-height: 190px;
    max-height: none;          /* was 340px — the cause of the inner scrollbar */
    overflow: visible;         /* the sheet body already scrolls */
    padding: 18px 22px;
    background: var(--c-bg);
}
#ecp-order-modal .ecp-msg-compose {
    position: sticky; bottom: 0;   /* always in reach, however long the thread */
    z-index: 2;
    padding: 15px 22px 18px;
    box-shadow: 0 -6px 18px rgba(15,23,42,.06);
}
#ecp-app.ecp-dark #ecp-order-modal .ecp-msg-compose,
body.ecp-dark-b   #ecp-order-modal .ecp-msg-compose { box-shadow: 0 -6px 18px rgba(0,0,0,.32); }

/* ── 2. An empty thread should invite the first message, not look broken ── */
.ecp-msg-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px;
    margin: auto;
    padding: 30px 22px;
    text-align: center;
}
.ecp-msg-empty-ic {
    display: flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; margin-bottom: 8px;
    background: linear-gradient(135deg, rgba(13,115,119,.14), rgba(201,146,43,.14));
    border-radius: 50%;
    font-size: 24px;
}
.ecp-msg-empty strong { font-size: 14.5px; font-weight: 800; color: var(--c-text); }
.ecp-msg-empty p {
    margin: 2px 0 0; max-width: 340px;
    font-size: 12.5px; color: var(--c-muted); line-height: 1.6;   /* --c-dim = 3.83:1 in dark */
}

/* ── 3. The legacy modal keeps its light box, so it keeps light tokens ── */
#ecp-msg-modal {
    --c-bg: #f8fafc;  --c-bg2: #ffffff; --c-bg3: #f1f5f9;
    --c-text: #0f172a; --c-muted: #334155; --c-dim: #64748b;
    --c-border: rgba(0,0,0,0.15);
    --c-gold: #b07d1e; --c-gold2: #c9922b;
    --c-teal: #0d7377; --c-teal2: #14a9ae;
    --c-field-bg: #ffffff; --c-field-border: #b8c9db;
    --c-field-text: #0f172a; --c-field-placeholder: #94a3b8;
}

/* ── Segmented control + bubble metadata: measured contrast ──────────────────
   --c-teal2 (#14a9ae) on white is 2.87:1 — the selected "My editor" pill was
   the least readable thing in the tab, which is absurd for the control that
   says who you are about to write to. Light mode takes the deeper teal; dark
   takes the bright one. Unselected labels and timestamps move off --c-dim,
   which is too quiet at 12px on either surface. */
.ecp-msg-to-opt input:checked + span { color: var(--c-teal); }
#ecp-app.ecp-dark .ecp-msg-to-opt input:checked + span,
body.ecp-dark-b   .ecp-msg-to-opt input:checked + span { color: #5eead4; }
.ecp-msg-to-opt span      { color: var(--c-muted); }
.ecp-msg-bubble-hd em     { color: var(--c-muted); }


/* ══════════════════════════════════════════════════════════════════════════
   THE TRACKER, TAKE TWO (v3.6.3)

   The single rail was a mistake. A continuous stroke sitting behind six circles
   READS AS A LINE THROUGH THEM — it skewers the dots rather than joining them,
   and at a glance you cannot tell which circle the fill has actually reached.

   So the connector is cut into legs: one between each pair of steps, each one
   stopping ~6px short of the circle at either end. Nothing crosses a dot. Each
   leg is simply filled or not filled — "this stage is behind us" — and the leg
   arriving at the CURRENT step is the only one that carries the gradient, which
   pulls the eye straight to where the work actually is.
══════════════════════════════════════════════════════════════════════════ */

/* The rail is gone. Kill it, in case an old cached stylesheet still has one. */
.ecp-track-rail, .ecp-track-fill { display: none !important; }

.ecp-track-steps { display: flex; margin-top: 0; }
.ecp-track-step {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    flex: 1 1 0; min-width: 0;
    padding-top: 2px;
}

/* One leg per gap. It spans from the previous dot's centre to this one's, then
   pulls 15px in at each end — 11px of dot radius plus a 4px breathing gap — so
   it begins and ends in clear air. */
.ecp-track-leg {
    position: absolute;
    top: 12px;                       /* the vertical centre of a 22px dot */
    right: 50%;
    /* 11px dot radius + 3px ring + 5px of clear air = 19px. The leg visibly
       STOPS before the circle; it does not tuck under it. */
    width: calc(100% - 38px);
    margin-right: 19px;
    height: 3px;
    border-radius: 99px;
    background: var(--c-border);
    transition: background .5s ease;
}
.ecp-track-leg-done { background: var(--c-teal); }
.ecp-track-leg-live {
    background: linear-gradient(90deg, var(--c-teal), var(--c-gold2));
    box-shadow: 0 0 8px rgba(201,146,43,.45);
}
.ecp-ocard-delivered .ecp-track-leg-done,
.ecp-ocard-completed .ecp-track-leg-done { background: #16a34a; }
.ecp-ocard-delivered .ecp-track-leg-live,
.ecp-ocard-completed .ecp-track-leg-live {
    background: linear-gradient(90deg, #15803d, #22c55e);
    box-shadow: 0 0 8px rgba(34,197,94,.4);
}

/* The dots sit ABOVE the legs and carry a ring in the panel colour, so even if
   a leg were ever mis-measured it could never appear to run through a circle. */
.ecp-track-dot {
    position: relative; z-index: 2;
    width: 22px; height: 22px;
    box-shadow: 0 0 0 3px var(--c-bg3);
}
.ecp-track-now .ecp-track-dot {
    box-shadow: 0 0 0 3px var(--c-bg3), 0 0 0 6px rgba(201,146,43,.28);
    animation: ecp-pulse-ring 2.2s ease-out infinite;
}
@keyframes ecp-pulse-ring {
    0%   { box-shadow: 0 0 0 3px var(--c-bg3), 0 0 0 4px rgba(201,146,43,.45); }
    70%  { box-shadow: 0 0 0 3px var(--c-bg3), 0 0 0 11px rgba(201,146,43,0); }
    100% { box-shadow: 0 0 0 3px var(--c-bg3), 0 0 0 4px rgba(201,146,43,0); }
}
@media (prefers-reduced-motion: reduce) {
    .ecp-track-now .ecp-track-dot { animation: none; }
    .ecp-track-leg { transition: none; }
}
.ecp-ocard-delivered .ecp-track-now .ecp-track-dot,
.ecp-ocard-completed .ecp-track-now .ecp-track-dot {
    box-shadow: 0 0 0 3px var(--c-bg3), 0 0 0 6px rgba(34,197,94,.3);
    animation: none;
}
/* The steps still to come: hollow, quiet, obviously not yet reached. */
.ecp-track-todo .ecp-track-dot { background: var(--c-bg2); border-color: var(--c-border); }

@media (max-width: 620px) {
    .ecp-track-step { gap: 6px; }
    .ecp-track-leg  { top: 10px; width: calc(100% - 32px); margin-right: 16px; height: 2.5px; }
    .ecp-track-dot  { width: 18px; height: 18px; box-shadow: 0 0 0 2.5px var(--c-bg3); }
    .ecp-track-now .ecp-track-dot { box-shadow: 0 0 0 2.5px var(--c-bg3), 0 0 0 5px rgba(201,146,43,.28); }
}


/* ══════════════════════════════════════════════════════════════════════════
   THE EDITOR'S VERSION, IN THE WRITING PANEL (v3.7.0)
   The editor's delivered text is not "Gen 4". It was written by a person, it is
   read-only, and adopting it is a decision. So it never looks like a generation:
   gold where the generations are teal, and it announces itself.
══════════════════════════════════════════════════════════════════════════ */

.ecp-ver-editor {
    background: linear-gradient(135deg, rgba(201,146,43,.16), rgba(201,146,43,.07)) !important;
    border-color: var(--c-gold2) !important;
    color: #8a5f0d !important;
    font-weight: 800 !important;
}
/* White on #c9922b is 2.4:1 — unreadable. The active pill takes a DEEPER gold so
   white text actually reads on it, in both themes. */
.ecp-ver-editor.active {
    background: linear-gradient(135deg, #8a5f0d, #a3760f) !important;
    border-color: #8a5f0d !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(138,95,13,.4) !important;
}
/* :not(.active) — otherwise this bleeds onto the active pill and overrides the
   white that the deep-gold fill was chosen for. */
#ecp-app.ecp-dark .ecp-ver-editor:not(.active) { color: #f0b942 !important; }

.ecp-ver-compare {
    margin-left: 8px; padding: 7px 13px;
    background: var(--c-bg2);
    border: 1.5px solid var(--c-teal2);
    border-radius: 8px;
    font-family: var(--ff-body); font-size: 12px; font-weight: 800;
    color: var(--c-teal); cursor: pointer;
    transition: all .16s;
}
.ecp-ver-compare:hover { background: var(--c-teal); color: #fff; transform: translateY(-1px); }
#ecp-app.ecp-dark .ecp-ver-compare { color: #5eead4; border-color: #5eead4; }

/* The section box, while it is showing someone else's words */
.ecp-out-editor {
    border-left: 4px solid var(--c-gold2) !important;
    background: linear-gradient(135deg, rgba(201,146,43,.05), transparent 40%) !important;
}

/* ── The banner: who wrote this, and what you can do about it ── */
.ecp-ed-banner {
    margin: 0 0 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(201,146,43,.10), rgba(13,115,119,.06));
    border: 1.5px solid var(--c-gold2);
    border-radius: 13px;
}
.ecp-ed-banner-paper { margin: 14px 0 18px; }
.ecp-ed-banner-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ecp-ed-banner-ic {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 40px; height: 40px;
    background: var(--c-bg2); border-radius: 10px; font-size: 19px;
}
.ecp-ed-banner-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ecp-ed-banner-tx strong { font-size: 14.5px; font-weight: 800; color: var(--c-text); }
.ecp-ed-banner-tx em { font-style: normal; font-size: 11.5px; color: var(--c-muted); font-weight: 600; }
.ecp-ed-banner-note {
    margin-bottom: 10px; padding: 10px 12px;
    background: var(--c-bg2);
    border-left: 3px solid var(--c-teal2);
    border-radius: 8px;
    font-size: 12.5px; color: var(--c-text); line-height: 1.6;
}
.ecp-ed-banner-note strong { color: var(--c-teal); }
#ecp-app.ecp-dark .ecp-ed-banner-note strong { color: #5eead4; }
.ecp-ed-banner-sub { margin: 0 0 12px; font-size: 12px; color: var(--c-muted); line-height: 1.6; }
.ecp-ed-banner-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ecp-ed-danger:hover { border-color: #ef4444 !important; color: #ef4444 !important; background: rgba(239,68,68,.08) !important; }

/* ── Compare ── */
.ecp-cmp-box { max-width: 1180px; width: 96vw; }
.ecp-cmp-sum { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 22px 12px; }
.ecp-cmp-stat {
    padding: 6px 11px;
    background: var(--c-bg3);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    font-size: 11.5px; font-weight: 600; color: var(--c-muted);
}
.ecp-cmp-stat strong { color: var(--c-text); font-weight: 800; }
.ecp-cmp-s-changed { border-color: rgba(217,119,6,.4);  background: rgba(217,119,6,.08); }
.ecp-cmp-s-added   { border-color: rgba(22,163,74,.4);  background: rgba(22,163,74,.08); }
.ecp-cmp-s-removed { border-color: rgba(239,68,68,.4);  background: rgba(239,68,68,.08); }

.ecp-cmp-only {
    display: flex; align-items: center; gap: 8px;
    padding: 0 22px 14px;
    font-size: 12.5px; font-weight: 700; color: var(--c-muted); cursor: pointer;
}

.ecp-cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.ecp-cmp-head {
    position: sticky; top: 0; z-index: 3;
    padding: 11px 18px;
    background: var(--c-bg3);
    border-top: 1px solid var(--c-border);
    border-bottom: 2px solid var(--c-border);
    font-size: 12px; font-weight: 800; letter-spacing: .3px;
    color: var(--c-muted);
}
.ecp-cmp-head-theirs { color: #8a5f0d; border-bottom-color: var(--c-gold2); }
#ecp-app.ecp-dark .ecp-cmp-head-theirs, body.ecp-dark-b .ecp-cmp-head-theirs { color: #f0b942; }

.ecp-cmp-row { display: contents; }
.ecp-cmp-cell {
    padding: 14px 18px;
    border-bottom: 1px solid var(--c-border);
    font-size: 13.5px; line-height: 1.75; color: var(--c-text);
    white-space: pre-wrap; word-break: break-word;
}
.ecp-cmp-row .ecp-cmp-cell:first-child { border-right: 1px solid var(--c-border); }
.ecp-cmp-changed .ecp-cmp-cell { background: rgba(217,119,6,.05); }
.ecp-cmp-added   .ecp-cmp-cell { background: rgba(22,163,74,.05); }
.ecp-cmp-removed .ecp-cmp-cell { background: rgba(239,68,68,.05); }
.ecp-cmp-none { color: var(--c-dim); font-style: italic; font-size: 12px; }
.ecp-cmp-hide-same .ecp-cmp-same { display: none; }

/* The actual words that moved */
.ecp-cmp-cell ins {
    background: rgba(22,163,74,.20);
    color: #14532d; text-decoration: none;
    border-radius: 3px; padding: 1px 2px; font-weight: 700;
}
.ecp-cmp-cell del {
    background: rgba(239,68,68,.16);
    color: #7f1d1d; text-decoration: line-through;
    border-radius: 3px; padding: 1px 2px;
}
#ecp-app.ecp-dark .ecp-cmp-cell ins, body.ecp-dark-b .ecp-cmp-cell ins { background: rgba(74,222,128,.22); color: #bbf7d0; }
#ecp-app.ecp-dark .ecp-cmp-cell del, body.ecp-dark-b .ecp-cmp-cell del { background: rgba(248,113,113,.20); color: #fecaca; }

#ecp-cmp-foot { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 760px) {
    .ecp-cmp-grid { grid-template-columns: 1fr; }
    .ecp-cmp-row .ecp-cmp-cell:first-child { border-right: none; }
    .ecp-cmp-head { position: static; }
    .ecp-cmp-cell { font-size: 13px; }
    .ecp-ed-banner-acts .ecp-obtn { flex: 1 1 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v3.7.1 — YOUR EDITOR
   The person, not the queue. A face, a field, a track record, and exactly
   one way to reach them.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The live strip on a section, now with doors in it ── */
.ecp-hub-live { flex-direction: column; align-items: stretch; gap: 12px; }
.ecp-hub-live-top { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.ecp-hub-live-acts {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 11px; border-top: 1px dashed rgba(13,115,119,.28);
}
.ecp-hub-live-btn {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px; border-radius: 10px; cursor: pointer;
  background: #fff; border: 1px solid rgba(13,115,119,.30); color: #0d7377;
  font-size: 12.5px; font-weight: 700; line-height: 1.2;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.ecp-hub-live-btn:hover {
  background: #0d7377; color: #fff; border-color: #0d7377;
  transform: translateY(-1px); box-shadow: 0 5px 14px rgba(13,115,119,.28);
}
.ecp-hub-live-btn-msg { position: relative; }
.ecp-hub-live-unread, .ecp-sec-ordered-unread {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; margin-left: 5px;
  border-radius: 999px; background: #dc2626; color: #fff;
  font-size: 10px; font-weight: 800;
}
#ecp-app.ecp-dark .ecp-hub-live-btn { background: rgba(20,169,174,.10); color: #5eead4; border-color: rgba(20,169,174,.35); }
#ecp-app.ecp-dark .ecp-hub-live-btn:hover { background: #14a9ae; color: #06202a; }
#ecp-app.ecp-dark .ecp-hub-live-title { color: #e6edf5; }

/* ── The "✓ Ordered · VR-000045" badge is now the shortest way in ── */
.ecp-sec-ordered-live { cursor: pointer; border: none; transition: transform .12s ease, box-shadow .12s ease; }
.ecp-sec-ordered-live:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13,115,119,.40); }
.ecp-sec-ordered-live:focus-visible { outline: 2px solid #14a9ae; outline-offset: 2px; }

/* ── The profile pane ── */
.ecp-edp { display: flex; flex-direction: column; gap: 4px; }
.ecp-edp-head {
  display: flex; align-items: center; gap: 16px;
  padding: 18px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(13,115,119,.09), rgba(201,146,43,.07));
  border: 1px solid rgba(13,115,119,.20);
}
.ecp-edp-face {
  position: relative; flex: 0 0 auto; width: 74px; height: 74px; border-radius: 50%;
  background: linear-gradient(135deg, #0d7377, #14a9ae);
  border: 3px solid #fff; box-shadow: 0 5px 16px rgba(15,30,45,.20);
  display: flex; align-items: center; justify-content: center;
}
.ecp-edp-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ecp-edp-initial { color: #fff; font-size: 28px; font-weight: 800; }
.ecp-edp-live {
  position: absolute; right: 2px; bottom: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: #22c55e; border: 3px solid #fff;
}
.ecp-edp-id { min-width: 0; }
.ecp-edp-name {
  display: flex; align-items: center; gap: 7px; margin: 0 0 2px;
  font-family: var(--ff-head); font-size: 19px; font-weight: 700; color: var(--c-text);
}
.ecp-edp-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: #0d7377; color: #fff; font-size: 10px; font-weight: 800;
}
.ecp-edp-head-line { margin: 0; font-size: 13px; font-weight: 600; color: var(--c-muted); line-height: 1.45; }
.ecp-edp-seen  { margin: 6px 0 0; font-size: 11.5px; font-weight: 700; color: #15803d; }
.ecp-edp-since { margin: 2px 0 0; font-size: 11.5px; color: var(--c-muted); }
.ecp-edp-bio {
  padding: 14px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.65;
  color: var(--c-text); background: rgba(13,115,119,.05);
  border-left: 3px solid #14a9ae;
}
.ecp-edp-svcs { display: flex; flex-wrap: wrap; gap: 7px; }
.ecp-edp-svc {
  padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: rgba(124,58,237,.09); border: 1px solid rgba(124,58,237,.24); color: #6d28d9;
}
#ecp-app.ecp-dark .ecp-edp-svc, body.ecp-dark-b .ecp-edp-svc { color: #d8b4fe; background: rgba(124,58,237,.18); }
.ecp-edp-acts { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.ecp-edp-acts .ecp-btn-primary { flex: 1 1 auto; }
.ecp-edp-thin {
  margin-top: 14px; padding: 11px 13px; border-radius: 10px;
  font-size: 12px; line-height: 1.6; color: var(--c-muted);
  background: rgba(201,146,43,.09); border: 1px dashed rgba(201,146,43,.35);
}
.ecp-edp-rule {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  font-size: 11.5px; line-height: 1.65; color: var(--c-muted);
  background: rgba(15,23,42,.04); border: 1px solid rgba(15,23,42,.10);
}
body.ecp-dark-b .ecp-edp-rule { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
.ecp-edp-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 46px 26px; color: var(--c-muted);
}
.ecp-edp-empty-ic { font-size: 34px; }
.ecp-edp-empty strong { font-size: 15px; color: var(--c-text); }
.ecp-edp-empty p { margin: 0; font-size: 13px; line-height: 1.65; max-width: 380px; }

@media (max-width: 560px) {
  .ecp-edp-head { flex-direction: column; text-align: center; }
  .ecp-edp-name { justify-content: center; }
  .ecp-hub-live-btn { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v3.7.2 — LIVE MESSAGES
   The popup that says a person, not a system, is talking to you.
   ═══════════════════════════════════════════════════════════════════════ */
.ecp-msgpop {
  position: fixed; right: 22px; bottom: 22px; z-index: 100000000;
  width: min(360px, calc(100vw - 32px));
  padding: 15px 16px 13px; border-radius: 16px;
  background: linear-gradient(150deg, #0f2b34 0%, #14323d 60%, #123039 100%);
  border: 1px solid rgba(20,169,174,.42);
  box-shadow: 0 18px 46px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.04) inset;
  color: #e9f3f6;
  transform: translateY(18px) scale(.97); opacity: 0;
  transition: transform .3s cubic-bezier(.2,.9,.3,1.2), opacity .3s ease;
}
.ecp-msgpop-in { transform: translateY(0) scale(1); opacity: 1; }
.ecp-msgpop-hd { display: flex; align-items: center; gap: 9px; }
.ecp-msgpop-ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: linear-gradient(135deg, #0d7377, #14a9ae);
  animation: ecp-msgpop-ring 1.6s ease-out 2;
}
@keyframes ecp-msgpop-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20,169,174,.55); }
  60%      { box-shadow: 0 0 0 9px rgba(20,169,174,0); }
}
.ecp-msgpop-who { flex: 1 1 auto; font-size: 13.5px; color: #b9d7dd; }
.ecp-msgpop-who strong { color: #fff; }
.ecp-msgpop-x {
  flex: 0 0 auto; width: 24px; height: 24px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.07); color: #9fc0c8; font-size: 11px; cursor: pointer;
}
.ecp-msgpop-x:hover { background: rgba(255,255,255,.15); color: #fff; }
.ecp-msgpop-ref {
  margin: 9px 0 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .5px;
  color: #f0b942; text-transform: uppercase;
}
.ecp-msgpop-body {
  font-size: 13px; line-height: 1.6; color: #dbeaee;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ecp-msgpop-more { margin-top: 6px; font-size: 11.5px; color: #8fb3bb; }
.ecp-msgpop-acts { display: flex; gap: 8px; margin-top: 13px; }
.ecp-msgpop-open {
  flex: 1 1 auto; padding: 9px 12px; border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, #0d7377, #14a9ae); color: #fff;
  font-size: 12.5px; font-weight: 700;
}
.ecp-msgpop-open:hover { filter: brightness(1.12); }
.ecp-msgpop-mute {
  flex: 0 0 auto; width: 38px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10);
  color: #cfe3e8; font-size: 14px;
}
.ecp-msgpop-mute:hover { background: rgba(255,255,255,.16); }
@media (max-width: 560px) {
  .ecp-msgpop { right: 10px; left: 10px; bottom: 12px; width: auto; }
}

/* ── A conversation you can scroll back through needs days in it ── */
.ecp-msg-day {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 10px; color: var(--c-muted);
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
}
.ecp-msg-day::before, .ecp-msg-day::after {
  content: ''; flex: 1 1 auto; height: 1px; background: currentColor; opacity: .18;
}
.ecp-msg-bubble-hd em { cursor: help; }


/* ══════════════════════════════════════════════════════════════════════════
   v3.7.3 — RECEIPTS, FILE EVENTS, AND THE FILES TAB

   Three complaints, one root cause: the drawer told the student what it knew,
   but never what had HAPPENED. A sent message looked identical to a read one.
   A delivered paper appeared in a list with no announcement. And every route
   through the drawer offered the same two buttons twice.

   What follows is the visual half of the fix: a tick that changes, a delivery
   that looks like an event, and a tab that owns the work.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The tick ──
   Small, quiet, and the last thing in the bubble — where a reader's eye already
   is when they finish reading their own sentence. */
.ecp-msg-bubble-ft {
    margin-top: 6px; padding-top: 5px; border-top: 1px dashed #e5eaf0;
    display: flex; justify-content: flex-end;
}
.ecp-tick {
    font-size: 11px; font-weight: 700; letter-spacing: .01em;
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.ecp-tick-sent { color: #94a3b8; }
.ecp-tick-read { color: #0d7377; }
.ecp-tick-wait { color: #b7791f; }
.ecp-tick-fail { color: #b91c1c; }

.ecp-msg-sending { opacity: .62; }
.ecp-msg-failed  { border-left-color: #ef4444 !important; background: #fef2f2 !important; }
.ecp-msg-failed .ecp-msg-bubble-ft { border-top-color: #fecaca; }

.ecp-msg-to-tag {
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    color: #b7791f; background: #fef9ec; border: 1px solid #fde9c0;
    border-radius: 999px; padding: 1px 7px;
}

/* ── A file, in the conversation ──
   Deliberately NOT a bubble. The moment the paper changes hands is the single
   most important event in the order, and scrolling back through six weeks of
   chat you should find it without reading a word. */
.ecp-msg-fileev {
    align-self: stretch; width: 100%;
    background: linear-gradient(180deg, #f0fdf4, #ffffff);
    border: 1px solid #bbf7d0; border-left: 4px solid #16a34a;
    border-radius: 12px; padding: 12px 14px;
}
.ecp-msg-fileev-mine { background: linear-gradient(180deg, #f8fafc, #ffffff); border-color: #e2e8f0; border-left-color: #94a3b8; }
.ecp-msg-fileev-hd {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 12.5px; color: #334155; line-height: 1.5;
}
.ecp-msg-fileev-hd strong { color: #0f172a; font-weight: 800; }
.ecp-msg-fileev-hd em     { font-style: normal; color: #94a3b8; font-size: 11px; }
.ecp-msg-fileev-ic        { font-size: 16px; }
.ecp-msg-fileev-note {
    margin: 8px 0 0; padding: 8px 10px; background: #fff; border: 1px dashed #d9e2ec;
    border-radius: 8px; font-size: 12.5px; line-height: 1.55; color: #334155;
}
.ecp-msg-fileev-dl {
    display: flex; align-items: center; gap: 10px; margin-top: 10px;
    padding: 10px 12px; border-radius: 10px; text-decoration: none !important;
    background: #16a34a !important; color: #fff !important;
    box-shadow: 0 2px 8px rgba(22,163,74,.28); transition: transform .15s, box-shadow .15s;
}
.ecp-msg-fileev-dl:hover  { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(22,163,74,.34); }
.ecp-msg-fileev-dl strong { display: block; font-size: 13px; font-weight: 800; color: #fff !important; word-break: break-all; }
.ecp-msg-fileev-dl em     { display: block; font-style: normal; font-size: 11px; opacity: .9; color: #fff !important; }
.ecp-msg-fileev-mine .ecp-msg-fileev-dl {
    background: #f1f5f9 !important; color: #334155 !important; box-shadow: none;
    border: 1px solid #e2e8f0;
}
.ecp-msg-fileev-mine .ecp-msg-fileev-dl strong,
.ecp-msg-fileev-mine .ecp-msg-fileev-dl em { color: #334155 !important; }

/* ── The Files tab ── */
.ecp-fz-hero {
    display: flex; gap: 13px; align-items: flex-start;
    padding: 15px 16px; border-radius: 13px;
    background: #f8fafc; border: 1px solid #e5eaf0;
}
.ecp-fz-hero-ready { background: linear-gradient(180deg, #f0fdf4, #ffffff); border-color: #bbf7d0; }
.ecp-fz-hero-ic    { font-size: 26px; line-height: 1; }
.ecp-fz-hero strong { display: block; font-size: 14.5px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
.ecp-fz-hero p      { margin: 0; font-size: 12.5px; line-height: 1.6; color: #64748b; }

.ecp-od-file-big { padding: 14px 15px !important; }
.ecp-od-file-big .ecp-od-file-tx strong { font-size: 14px; word-break: break-all; }

/* The pointer on Details — one destination, not a second copy of the list. */
.ecp-od-filecta {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    margin: 14px 0 0; padding: 13px 15px; cursor: pointer;
    background: linear-gradient(180deg, #f0fdf4, #ffffff) !important;
    border: 1px solid #bbf7d0 !important; border-left: 4px solid #16a34a !important;
    border-radius: 12px; transition: transform .15s, box-shadow .15s;
}
.ecp-od-filecta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(22,163,74,.16); }
.ecp-od-filecta-ic { font-size: 22px; }
.ecp-od-filecta-tx { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.ecp-od-filecta-tx strong { font-size: 13.5px; font-weight: 800; color: #0f172a; }
.ecp-od-filecta-tx em     { font-style: normal; font-size: 11.5px; color: #64748b; }
.ecp-od-filecta-go {
    font-size: 12px; font-weight: 800; color: #15803d; white-space: nowrap;
}

/* Four tabs, not three. On a phone that is one more than the strip was built
   for, so it scrolls sideways rather than wrapping into a broken second row. */
.ecp-od-tabs {
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; flex-wrap: nowrap;
}
.ecp-od-tabs::-webkit-scrollbar { display: none; }
.ecp-od-tab { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 560px) {
    .ecp-od-tabs { padding-left: 14px; padding-right: 14px; }
    .ecp-od-tab  { padding-left: 12px; padding-right: 12px; font-size: 12.5px; }
}


/* ── The brief: the student's own text, given back to them ──────────────── */
.ecp-brief {
    border: 1px solid #e5eaf0; border-radius: 12px; overflow: hidden; background: #fff;
}
.ecp-brief-hd {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; background: #f8fafc; border-bottom: 1px solid #eef2f6;
}
.ecp-brief-hd span   { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.ecp-brief-hd strong { font-size: 13px; font-weight: 800; color: #0f172a; }
.ecp-brief-hd em     { font-style: normal; font-size: 11.5px; color: #64748b; }
.ecp-brief-copy {
    flex: 0 0 auto; cursor: pointer; white-space: nowrap;
    background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 8px;
    padding: 6px 11px; font-size: 11.5px; font-weight: 700; color: #475569 !important;
}
.ecp-brief-copy:hover { background: #f1f5f9 !important; }
.ecp-brief-text {
    padding: 14px 16px; font-size: 13.5px; line-height: 1.75; color: #1f2937;
    white-space: pre-wrap; word-break: break-word; overflow-y: auto; max-height: 520px;
}
/* Clipped, not hidden: they can see it is there, and how much of it there is. */
.ecp-brief-clip {
    max-height: 190px; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.ecp-brief-more {
    display: block; width: 100%; cursor: pointer;
    padding: 10px; border: none; border-top: 1px solid #eef2f6;
    background: #f8fafc !important; color: #0d7377 !important;
    font-size: 12px; font-weight: 800;
}
.ecp-brief-more:hover { background: #f1f5f9 !important; }

/* Meta chips were clipping their own labels ("🧩 Be…") whenever a card ran
   narrow. A chip that cannot show its word is worse than no chip. */
.ecp-ochip { white-space: nowrap; flex: 0 0 auto; max-width: 100%; overflow: visible; }


/* ══════════════════════════════════════════════════════════════════════════
   v3.7.9 — THE THREAD IS A CHAT WINDOW, NOT A LETTERBOX

   The report: "when messages are many it becomes hard to see them or navigate
   back — too congested." Dead right. In thread mode the drawer was still laid
   out as a scrolling page: the message list had flex:1 but its parent was a
   plain block inside a scrolling body, so it had nothing to flex against and
   collapsed to its 120px minimum. A dozen messages, the composer, and a
   four-line lock notice then fought over one short box.

   The fix is structural, and it only touches the Messages tab. When the sheet
   carries .ecp-od-threading the body stops being a scroll-page and becomes a
   flex column: a tall message viewport that scrolls on its own, and a composer
   pinned to the floor. Every other tab is untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* The drawer, in chat mode, is exactly as tall as the screen allows and no
   taller — so the internal scroll has a real ceiling to work against. */
.ecp-sheet.ecp-od-threading {
    height: min(88vh, 860px);
    max-height: 88vh;
}
.ecp-sheet.ecp-od-threading .ecp-sheet-body {
    padding: 0;
    overflow: hidden;            /* the THREAD scrolls, not the body */
    display: flex;
    min-height: 0;               /* let the flex child actually shrink */
}
.ecp-sheet.ecp-od-threading #ecp-od-thread.ecp-od-view.active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

/* The scroll viewport: this is the part that was missing. It owns the height,
   it owns the scrollbar, and the jump button hangs off its bottom corner. */
.ecp-msg-scroll {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.ecp-od-threading .ecp-msg-thread {
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px 18px 22px;
    scroll-behavior: smooth;
}

/* Jump-to-latest — the answer to "navigate back". It floats over the thread,
   bottom-right, only while the newest message is off-screen. */
.ecp-msg-jump {
    position: absolute; right: 14px; bottom: 14px; z-index: 4;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 14px; border: none; border-radius: 999px; cursor: pointer;
    background: var(--c-teal2, #14a9ae); color: #fff;
    font-size: 12.5px; font-weight: 800; letter-spacing: .01em;
    box-shadow: 0 6px 18px rgba(20,169,174,.42);
    animation: ecp-jump-in .2s ease;
}
.ecp-msg-jump:hover { filter: brightness(1.07); transform: translateY(-1px); }
.ecp-msg-jump.hidden { display: none !important; }
@keyframes ecp-jump-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Composer, pinned to the floor of the chat window. Never scrolls away. */
.ecp-od-threading .ecp-msg-compose {
    flex: 0 0 auto;
    box-shadow: 0 -6px 18px rgba(15,23,42,.05);
}

/* The lock notice was four lines tall and permanently open, and on a phone it
   swallowed the composer whole. It is one quiet line now; the full text is one
   tap away and almost nobody needs it twice. */
.ecp-msg-rule {
    display: flex; align-items: flex-start; gap: 7px;
    margin: 11px 0 0; padding: 9px 11px;
    font-size: 11px; line-height: 1.45;
}
.ecp-msg-rule.ecp-rule-clamp {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block; cursor: pointer;
}
.ecp-msg-rule.ecp-rule-clamp strong { font-weight: 800; }
.ecp-msg-rule.ecp-rule-clamp br { display: none; }

/* ── Phone: the drawer becomes a full-height sheet in chat mode ─────────── */
@media (max-width: 560px) {
    #ecp-order-modal.ecp-modal-overlay { padding: 0; align-items: stretch; }
    .ecp-sheet.ecp-od-threading {
        height: 100dvh; max-height: none;
        border-radius: 0; max-width: none;
    }
    .ecp-sheet.ecp-od-threading .ecp-sheet-head { padding: 14px 16px 12px; }
    .ecp-od-threading .ecp-msg-thread { padding: 14px 13px 18px; }
    .ecp-od-threading .ecp-msg-compose { padding: 11px 13px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .ecp-od-threading .ecp-msg-bubble { max-width: 90%; }
    .ecp-msg-jump { right: 12px; bottom: 12px; }
    /* On a phone the send button and textarea are the whole job — trim chrome. */
    .ecp-od-threading .ecp-msg-send { margin-top: 8px; padding: 12px; font-size: 14.5px; }
    .ecp-od-threading .ecp-msg-input { font-size: 16px; }   /* 16px stops iOS auto-zoom */
}

/* In chat mode the foot (Accept / revision) would be a THIRD stacked bar under
   the composer. Fold those decisions up into the thread instead — the composer
   is the only thing that belongs at the bottom of a conversation. */
.ecp-sheet.ecp-od-threading .ecp-sheet-foot { display: none; }


/* Decision banner — the delivered "accept or send back" choice, riding at the
   top of the thread now that the footer is folded away in chat mode. */
.ecp-msg-decide {
    position: sticky; top: 0; z-index: 3;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: -18px -18px 14px; padding: 12px 16px;
    background: linear-gradient(135deg, rgba(22,163,74,.14), rgba(20,169,174,.08));
    border-bottom: 1px solid #bbf7d0;
    backdrop-filter: blur(6px);
}
.ecp-msg-decide-tx  { font-size: 12.5px; color: #14532d; flex: 1 1 auto; min-width: 180px; }
.ecp-msg-decide-tx strong { font-weight: 800; }
.ecp-msg-decide-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.ecp-msg-decide-yes, .ecp-msg-decide-no {
    cursor: pointer; border: none; border-radius: 9px; padding: 8px 14px;
    font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
.ecp-msg-decide-yes { background: #16a34a; color: #fff; box-shadow: 0 3px 10px rgba(22,163,74,.32); }
.ecp-msg-decide-yes:hover { filter: brightness(1.06); }
.ecp-msg-decide-no  { background: #fff; color: #b45309; border: 1px solid #fcd9a5; }
.ecp-msg-decide-no:hover { background: #fffbeb; }
@media (max-width: 560px) {
    .ecp-msg-decide { margin: -14px -13px 12px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ECPPay — payment success popup + paid-order card highlight
   (sits above the checkout overlay z-99999 / nice-alert z-100000, and Divi)
   ═══════════════════════════════════════════════════════════════════════════ */
.ecp-pay-overlay {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(11,31,58,.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .28s ease;
}
.ecp-pay-overlay.ecp-pay-show { opacity: 1; }
.ecp-pay-overlay.ecp-pay-hide { opacity: 0; }

.ecp-pay-card {
  position: relative; overflow: hidden;
  background: #fff; border-radius: 22px;
  width: min(360px, 92vw); padding: 34px 30px 28px; text-align: center;
  box-shadow: 0 24px 70px rgba(8,17,33,.35);
  transform: translateY(14px) scale(.92); opacity: 0;
  transition: transform .42s cubic-bezier(.2,.9,.25,1.15), opacity .32s ease;
}
.ecp-pay-show .ecp-pay-card { transform: translateY(0) scale(1); opacity: 1; }
.ecp-pay-card::before {
  content: ""; position: absolute; top: -40%; left: -40%; width: 180%; height: 80%;
  background: radial-gradient(closest-side, rgba(224,163,37,.16), transparent);
  pointer-events: none;
}

.ecp-pay-badge {
  width: 82px; height: 82px; margin: 0 auto 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; position: relative;
  background: rgba(22,163,74,.10);
}
.ecp-pay-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid #16a34a; transform: scale(.3); opacity: 0;
  animation: ecpPayRing .6s .05s ease-out forwards;
}
.ecp-pay-badge svg { width: 44px; height: 44px; position: relative; z-index: 1; }
.ecp-pay-chk {
  stroke: #16a34a; stroke-width: 5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: ecpPayDraw .5s .35s ease forwards;
}

.ecp-pay-title { font-size: 20px; font-weight: 800; color: #0f172a; margin: 0 0 6px; letter-spacing: -.01em; }
.ecp-pay-sub   { font-size: 14px; color: #64748b; margin: 0; line-height: 1.5; }
.ecp-pay-amt {
  display: inline-block; margin-top: 14px; font-size: 15px; font-weight: 700; color: #0b1f3a;
  background: rgba(224,163,37,.14); border: 1px solid rgba(224,163,37,.35);
  padding: 7px 14px; border-radius: 999px;
}
.ecp-pay-go {
  margin-top: 20px; width: 100%; border: 0; cursor: pointer; border-radius: 12px;
  padding: 13px 16px; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #12b3a6, #0b1f3a);
  box-shadow: 0 8px 20px rgba(18,179,166,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ecp-pay-go:hover  { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(18,179,166,.45); }
.ecp-pay-go:active { transform: translateY(0); }

.ecp-pay-spark {
  position: absolute; width: 7px; height: 7px; border-radius: 2px; opacity: 0;
  top: 70px; left: 50%; pointer-events: none;
}

/* The paid order card, once we land on it in My Orders */
.ecp-ocard.ecp-pay-flash {
  animation: ecpPayFlash 2.4s ease-out 1;
  border-radius: 16px;
}

@keyframes ecpPayRing  { 0%{transform:scale(.3);opacity:0} 60%{opacity:1} 100%{transform:scale(1);opacity:0} }
@keyframes ecpPayDraw  { to { stroke-dashoffset: 0; } }
@keyframes ecpPaySpark { 0%{opacity:0;transform:translate(-50%,0) scale(.6)} 15%{opacity:1} 100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)} }
@keyframes ecpPayFlash {
  0%   { box-shadow: 0 0 0 0 rgba(18,179,166,.55), 0 0 0 0 rgba(224,163,37,.5); transform: scale(1); }
  12%  { transform: scale(1.012); }
  30%  { box-shadow: 0 0 0 8px rgba(18,179,166,.14), 0 0 26px 4px rgba(224,163,37,.28); }
  100% { box-shadow: 0 0 0 0 rgba(18,179,166,0), 0 0 0 0 rgba(224,163,37,0); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ecp-pay-card, .ecp-pay-overlay, .ecp-pay-chk, .ecp-pay-ring, .ecp-ocard.ecp-pay-flash {
    animation: none !important; transition: opacity .2s ease !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MESSAGES TAB  (v3.8.1)
   A dedicated inbox for every editor / support conversation, plus a "+N"
   sidebar badge. Reuses the existing message poll — pure presentation here.
   ══════════════════════════════════════════════════════════════════════════ */

/* Sidebar badge — teal accent so it reads as "conversations", distinct from
   the red essays/orders dot. Shows "+N". */
.ecp-nav-msg-badge {
    background: linear-gradient(135deg, var(--c-teal2), var(--c-teal));
    box-shadow: 0 1px 4px rgba(13,115,119,.4);
    letter-spacing: .2px;
}

/* ── Inbox header strip ── */
.ecp-msgin-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.ecp-msgin-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ecp-msgin-lead-ic {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(20,169,174,.16), rgba(13,115,119,.10));
}
.ecp-msgin-lead strong { display: block; font-size: 15px; font-weight: 700; color: var(--c-text); }
.ecp-msgin-lead em     { display: block; font-style: normal; font-size: 12.5px; color: var(--c-dim); margin-top: 1px; }

.ecp-msgin-refresh {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border: 1px solid var(--c-border); border-radius: 999px;
    background: var(--c-bg2); color: var(--c-muted);
    font-family: var(--ff-body); font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all .16s;
}
.ecp-msgin-refresh:hover { color: var(--c-teal2); border-color: var(--c-teal2); }
.ecp-msgin-refresh-ic { display: inline-block; font-size: 15px; line-height: 1; }
.ecp-msgin-refreshing .ecp-msgin-refresh-ic { animation: ecp-msgin-spin .6s linear; }
@keyframes ecp-msgin-spin { to { transform: rotate(360deg); } }

/* ── Thread list ── */
#ecp-msgin-list { display: flex; flex-direction: column; gap: 10px; }

.ecp-msgin-item {
    display: flex; align-items: flex-start; gap: 13px; width: 100%;
    text-align: left; cursor: pointer;
    padding: 14px 15px; border: 1px solid var(--c-border); border-radius: 14px;
    background: var(--c-bg2); color: var(--c-text);
    font-family: var(--ff-body); transition: all .16s; position: relative;
}
.ecp-msgin-item:hover, .ecp-msgin-item:focus-visible {
    border-color: var(--c-teal2);
    box-shadow: 0 4px 16px rgba(13,115,119,.12);
    transform: translateY(-1px); outline: none;
}
.ecp-msgin-unread {
    border-left: 3px solid var(--c-teal2);
    background: linear-gradient(100deg, rgba(20,169,174,.07), transparent 55%);
}

.ecp-msgin-av {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--c-teal2), var(--c-teal));
    color: #fff; font-family: var(--ff-head); font-weight: 700; font-size: 17px;
}
.ecp-msgin-av img { width: 100%; height: 100%; object-fit: cover; }

.ecp-msgin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ecp-msgin-top { display: flex; align-items: baseline; gap: 8px; }
.ecp-msgin-name {
    font-size: 14.5px; font-weight: 700; color: var(--c-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}
.ecp-msgin-when { font-size: 11.5px; color: var(--c-dim); flex-shrink: 0; }

.ecp-msgin-ref { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ecp-msgin-no {
    font-size: 11px; font-weight: 700; color: var(--c-gold2);
    background: rgba(201,146,43,.12); padding: 1px 7px; border-radius: 999px; flex-shrink: 0;
}
.ecp-msgin-ttl {
    font-size: 12px; color: var(--c-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

.ecp-msgin-prev {
    font-size: 13px; color: var(--c-muted); line-height: 1.45; margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ecp-msgin-from  { font-weight: 700; color: var(--c-text); }
.ecp-msgin-none  { color: var(--c-dim); font-style: italic; }
.ecp-msgin-unread .ecp-msgin-prev { color: var(--c-text); font-weight: 500; }

.ecp-msgin-badge {
    flex-shrink: 0; align-self: center;
    min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px;
    background: linear-gradient(135deg, var(--c-teal2), var(--c-teal)); color: #fff;
    font-size: 12px; font-weight: 800; line-height: 24px; text-align: center;
    box-shadow: 0 2px 6px rgba(13,115,119,.35);
}
.ecp-msgin-go {
    flex-shrink: 0; align-self: center;
    font-size: 22px; color: var(--c-dim); line-height: 1; padding-left: 2px;
    transition: transform .16s, color .16s;
}
.ecp-msgin-item:hover .ecp-msgin-go { color: var(--c-teal2); transform: translateX(3px); }

/* ── Empty state ── */
.ecp-msgin-empty {
    text-align: center; padding: 48px 24px; color: var(--c-dim);
    border: 1px dashed var(--c-border); border-radius: 16px;
}
.ecp-msgin-empty-ic { font-size: 40px; display: block; margin-bottom: 12px; opacity: .7; }
.ecp-msgin-empty strong { display: block; font-size: 16px; color: var(--c-text); margin-bottom: 6px; }
.ecp-msgin-empty p { font-size: 13.5px; line-height: 1.55; max-width: 340px; margin: 0 auto; }

/* ── Responsive: tighten on narrow viewports ── */
@media (max-width: 560px) {
    .ecp-msgin-bar { margin-bottom: 12px; }
    .ecp-msgin-refresh { padding: 7px 12px; }
    .ecp-msgin-item { padding: 12px; gap: 11px; border-radius: 12px; }
    .ecp-msgin-av { width: 38px; height: 38px; font-size: 15px; }
    .ecp-msgin-name { font-size: 13.5px; }
    .ecp-msgin-prev { font-size: 12.5px; -webkit-line-clamp: 2; }
    .ecp-msgin-go { display: none; }
}
@media (max-width: 380px) {
    .ecp-msgin-when { display: none; }
    .ecp-msgin-lead-ic { width: 34px; height: 34px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .ecp-msgin-item, .ecp-msgin-go { transition: none !important; transform: none !important; }
    .ecp-msgin-refreshing .ecp-msgin-refresh-ic { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ORDER DRAWER — tab bar + Messages layout, consolidated & fully responsive
   (v3.8.2)

   Two earlier layout models had been left overlapping in the sheet: an old
   "the sheet-body is the scroller" model still forced #ecp-od-msgs to
   overflow:visible, while the newer "the thread is the scroller" model set the
   body to overflow:hidden. The net effect was that NEITHER scrolled — long
   threads were clipped, and the JS (which measures #ecp-od-msgs as the scroller)
   showed the "↓ Latest" pill on threads that fit, with nothing to scroll to.
   This block is the single source of truth for the drawer chrome from here on.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tab bar: one clean row. Fits when it can, scrolls sideways when it can't,
      never wraps into a broken second row, never double-borders. ── */
#ecp-order-modal .ecp-od-tabs {
    display: flex; flex-wrap: nowrap; gap: 4px;
    margin: 0; padding: 10px 20px 0;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-bg2);
}
#ecp-order-modal .ecp-od-tabs::-webkit-scrollbar { display: none; }

#ecp-order-modal .ecp-od-tab {
    flex: 0 0 auto; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 5px;
    margin: 0 0 -1px;                       /* active underline sits ON the strip border */
    padding: 9px 14px 10px;
    background: none; color: var(--c-dim);
    border: 0; border-bottom: 2.5px solid transparent; border-radius: 8px 8px 0 0;
    font-family: var(--ff-body); font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: color .16s, background .16s, border-color .16s;
}
#ecp-order-modal .ecp-od-tab:hover  { color: var(--c-text); background: rgba(128,128,128,.06); }
#ecp-order-modal .ecp-od-tab.active {
    color: var(--c-teal2);
    border-bottom-color: var(--c-teal2);
    background: linear-gradient(180deg, rgba(20,169,174,.12), transparent);
}
#ecp-order-modal .ecp-od-tab-badge {
    margin-left: 3px; padding: 1px 6px;
    background: #ef4444; color: #fff;
    border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1.5;
}

/* ── Messages tab: the THREAD is the one and only scroller. ── */
.ecp-sheet.ecp-od-threading .ecp-sheet-body {
    padding: 0; display: flex; overflow: hidden; min-height: 0;
}
.ecp-sheet.ecp-od-threading #ecp-od-thread.ecp-od-view.active {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%;
}
.ecp-sheet.ecp-od-threading .ecp-msg-scroll {
    position: relative; flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
}
/* Beat the stray `#ecp-od-msgs{overflow:visible}` from the old model. */
.ecp-sheet.ecp-od-threading #ecp-od-msgs {
    flex: 1 1 auto; min-height: 0; max-height: none;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 16px 20px 20px;
    background: var(--c-bg);
}
/* Composer: a plain flex item pinned to the floor — NOT sticky (old model). The
   #id here is needed to outrank `#ecp-order-modal .ecp-msg-compose{position:sticky}`. */
#ecp-order-modal .ecp-sheet.ecp-od-threading .ecp-msg-compose {
    position: static; flex: 0 0 auto; z-index: 2;
    padding: 14px 20px 16px;
    border-top: 1px solid var(--c-border); background: var(--c-bg2);
    box-shadow: 0 -6px 18px rgba(15,23,42,.05);
}
#ecp-app.ecp-dark #ecp-order-modal .ecp-sheet.ecp-od-threading .ecp-msg-compose {
    box-shadow: 0 -6px 18px rgba(0,0,0,.32);
}

/* ── "↓ Latest" pill: floats over the thread's bottom-right, above the composer,
      shrinks a touch on small screens. JS keeps it hidden unless the thread
      truly overflows AND the newest message is off-screen. ── */
.ecp-sheet.ecp-od-threading .ecp-msg-jump {
    position: absolute; right: 16px; bottom: 14px; z-index: 5;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--c-teal2, #14a9ae); color: #fff;
    font-size: 12.5px; font-weight: 800; letter-spacing: .01em;
    box-shadow: 0 6px 18px rgba(20,169,174,.42);
    max-width: calc(100% - 32px);
}
.ecp-sheet.ecp-od-threading .ecp-msg-jump.hidden { display: none !important; }

/* ── Recipient segmented control: allow it to wrap to a second row instead of
      shoving the composer sideways on a narrow drawer. ── */
.ecp-sheet.ecp-od-threading .ecp-msg-to { max-width: 100%; flex-wrap: wrap; }

/* ── Responsive: the drawer at every width ─────────────────────────────────── */

/* Tablet / small laptop: the -lg drawer stops being 760px and hugs the viewport. */
@media (max-width: 800px) {
    #ecp-order-modal .ecp-modal-box.ecp-sheet-lg { max-width: 96vw; }
    #ecp-order-modal .ecp-od-tabs { padding-left: 16px; padding-right: 16px; }
}

/* Narrow: tighten tab padding so more tabs show before scroll kicks in. */
@media (max-width: 560px) {
    #ecp-order-modal .ecp-od-tabs { padding: 8px 12px 0; gap: 2px; }
    #ecp-order-modal .ecp-od-tab  { padding: 8px 11px 9px; font-size: 12.5px; }
    .ecp-sheet.ecp-od-threading #ecp-od-msgs { padding: 14px 13px 18px; }
    #ecp-order-modal .ecp-sheet.ecp-od-threading .ecp-msg-compose { padding: 12px 13px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .ecp-sheet.ecp-od-threading .ecp-msg-jump { right: 12px; bottom: 12px; padding: 7px 12px; font-size: 12px; }
}

/* Very narrow: drop tab emoji breathing room and keep everything reachable. */
@media (max-width: 380px) {
    #ecp-order-modal .ecp-od-tab { gap: 3px; padding: 8px 9px 9px; }
    .ecp-sheet.ecp-od-threading .ecp-msg-bubble { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
    #ecp-order-modal .ecp-od-tab { transition: none !important; }
    .ecp-sheet.ecp-od-threading .ecp-msg-jump { animation: none !important; }
}

/* ── Financial: flash the row for a payment just made (post top-up jump) ── */
@keyframes ecp-fin-flash-kf {
    0%   { background: rgba(20,169,174,.28); box-shadow: 0 0 0 2px var(--c-teal2) inset; }
    60%  { background: rgba(20,169,174,.14); }
    100% { background: transparent; box-shadow: none; }
}
.ecp-fin-row.ecp-fin-flash {
    animation: ecp-fin-flash-kf 2.6s ease-out;
    border-radius: 12px;
}
@media (prefers-reduced-motion: reduce) {
    .ecp-fin-row.ecp-fin-flash { animation: none !important; background: rgba(20,169,174,.14); }
}

/* ── Editorial careers link in the landing header (v3.11.0) ── */
/* ══ "Become an Editor" ═══════════════════════════════════════════════════
   v3.19.1 — rebuilt for narrow headers.

   What went wrong: the link was an inline-flex box with no white-space rule
   inside a flex row that is allowed to shrink. Flex items shrink below their
   content by default, so as soon as the logo and the account button wanted the
   space, this one was squeezed and its label broke across three lines —
   "Become / an / Editor" — inside a box still shaped for one.

   The fix is three rules deep, not one:
     1. the text never wraps, at any width;
     2. the button never shrinks (flex-shrink:0), so it keeps its own shape and
        the flexible things around it give way instead;
     3. the LABEL shortens in two steps before the button ever gets tight —
        "Become an Editor" → "Editor" → ✍️ alone.
   ═══════════════════════════════════════════════════════════════════════ */
.ecp-header-careers{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    flex:0 0 auto;                 /* never squeezed by its neighbours */
    white-space:nowrap;            /* the actual bug: the label could wrap */
    font-size:13px;font-weight:700;line-height:1;
    color:#0d7377;background:#f0fdfa;border:1px solid #99f6e4;
    border-radius:10px;padding:9px 14px;min-height:38px;
    text-decoration:none;transition:background .15s,border-color .15s,color .15s,transform .15s;
    margin-right:4px;
}
.ecp-header-careers:hover{background:#0d7377;border-color:#0d7377;color:#fff;transform:translateY(-1px);}
.ecp-header-careers:active{transform:none;}
.ecp-header-careers:focus-visible{outline:2px solid #0d7377;outline-offset:2px;}
.ecp-header-careers .ecp-hc-ic{font-size:14px;line-height:1;flex:0 0 auto;}
.ecp-header-careers .ecp-hc-long,
.ecp-header-careers .ecp-hc-short{white-space:nowrap;}
.ecp-header-careers .ecp-hc-short{display:none;}   /* long label is the default */
body.ecp-dark .ecp-header-careers,.ecp-dark .ecp-header-careers{background:rgba(13,115,119,.16);border-color:rgba(20,145,155,.4);color:#5eead4;}

/* The header row must be free to give this button its space. Without min-width:0
   on the logo, a long brand name refuses to compress and the shortfall lands on
   whatever comes after it — which was this button. */
.ecp-header-inner > .ecp-logo{min-width:0;}
.ecp-header-right{flex:0 0 auto;}

/* Step 1 — the sentence becomes a word. Kicks in well before the button is
   actually tight, so the layout never reaches the point of straining. */
@media(max-width:1080px){
    .ecp-header-careers .ecp-hc-long{display:none;}
    .ecp-header-careers .ecp-hc-short{display:inline;}
}
/* Step 2 — the word becomes the icon. A 40px square: still a comfortable touch
   target, and the full name survives in title + aria-label. */
@media(max-width:720px){
    .ecp-header-careers .ecp-hc-short{display:none;}
    .ecp-header-careers{padding:0;width:40px;min-width:40px;height:40px;min-height:40px;gap:0;}
    .ecp-header-careers .ecp-hc-ic{font-size:16px;}
}
/* On a phone the header wraps to two rows and the buttons share the second one,
   so the square would look stranded — give it back its label and let it sit in
   the row as an equal. */
@media(max-width:600px){
    .ecp-header-careers{width:auto;min-width:0;padding:0 12px;gap:6px;}
    .ecp-header-careers .ecp-hc-short{display:inline;}
}
@media(max-width:380px){
    .ecp-header-careers{padding:0 10px;font-size:12px;}
}
@media(prefers-reduced-motion:reduce){
    .ecp-header-careers,.ecp-header-careers:hover{transition:none;transform:none;}
}


/* ══════════════════════════════════════════════════════════
   HIRE FLOW — 4 GUIDED STEPS (service → deadline → expert → note)
   Each block slides in only once the step before it is done.
══════════════════════════════════════════════════════════ */
.ecp-step-block { margin: 0 0 6px; }
.ecp-step-reveal { animation: ecpStepIn .42s cubic-bezier(.22,.9,.3,1.2) both; }
@keyframes ecpStepIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ecp-step-shake { animation: ecpStepShake .5s ease; }
@keyframes ecpStepShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}

/* ── STEP 2 · deadline ── */
.ecp-dl-block { padding: 2px 0 10px; }
.ecp-dl-chips {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 9px; margin: 0 0 12px;
}
.ecp-dl-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px; cursor: pointer; text-align: left;
  border-radius: 12px; border: 1.5px solid rgba(13,115,119,.18);
  background: #fff; transition: all .15s ease;
}
.ecp-dl-chip:hover {
  border-color: var(--c-teal2); transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13,115,119,.12);
}
.ecp-dl-chip-lab  { font-size: 12.5px; font-weight: 800; color: var(--c-text); line-height: 1.2; }
.ecp-dl-chip-note {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  color: #fff; background: linear-gradient(135deg, var(--c-gold), var(--c-gold2));
  padding: 1px 8px; border-radius: 999px;
}
.ecp-dl-chip.ecp-dl-chip-on {
  border-color: var(--c-teal);
  background: linear-gradient(135deg, rgba(20,169,174,.10), rgba(13,115,119,.06));
  box-shadow: 0 4px 14px rgba(13,115,119,.18);
}
.ecp-dl-chip.ecp-dl-chip-on .ecp-dl-chip-note {
  background: linear-gradient(135deg, var(--c-teal), var(--c-teal2));
}
.ecp-dl-exact { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.ecp-dl-exact-lab { font-size: 12.5px; font-weight: 700; color: var(--c-muted); }
.ecp-dl-date {
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--c-text);
  padding: 9px 13px; border-radius: 11px; cursor: pointer;
  border: 1.5px solid rgba(13,115,119,.22); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ecp-dl-date:hover, .ecp-dl-date:focus {
  border-color: var(--c-teal); outline: none;
  box-shadow: 0 0 0 3px rgba(20,169,174,.16);
}
.ecp-dl-chosen {
  font-size: 12.5px; font-weight: 600; line-height: 1.5;
  padding: 9px 13px; border-radius: 10px; margin: 0 0 6px;
  background: rgba(23,163,74,.1); color: #17a34a; border: 1px solid rgba(23,163,74,.28);
  animation: ecpStepIn .3s ease both;
}
.ecp-dl-chosen em { font-style: normal; opacity: .8; }

/* ── STEP 4 · optional note ── */
.ecp-svc-optional {
  font-size: 10px; font-weight: 800; letter-spacing: .4px;
  color: var(--c-muted); background: rgba(0,0,0,.05);
  padding: 2px 8px; border-radius: 999px; margin-left: 6px; text-transform: uppercase;
}
.ecp-note-input {
  width: 100%; box-sizing: border-box; resize: vertical;
  font-family: inherit; font-size: 13px; line-height: 1.55; color: var(--c-text);
  padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid rgba(13,115,119,.2); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ecp-note-input:focus {
  border-color: var(--c-teal); outline: none;
  box-shadow: 0 0 0 3px rgba(20,169,174,.16);
}
.ecp-note-count { font-size: 11px; color: var(--c-muted); text-align: right; margin: 4px 0 10px; }

/* ── FINAL · the big animated hire bar ── */
.ecp-hire-launch-wrap {
  margin: 14px 0 6px; padding: 15px 16px; border-radius: 16px;
  border: 1.5px solid rgba(23,163,74,.3);
  background: linear-gradient(135deg, rgba(23,163,74,.07), rgba(20,169,174,.06));
}
.ecp-hire-launch-in { animation: ecpStepIn .45s cubic-bezier(.22,.9,.3,1.2) both; }
.ecp-hire-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--c-text); margin: 0 0 12px;
}
.ecp-hs-sep  { color: #cbd5e1; }
.ecp-hs-cost {
  font-size: 11.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--c-teal), var(--c-teal2));
  padding: 2px 10px; border-radius: 999px;
}
.ecp-hire-launch {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; border: none; cursor: pointer;
  padding: 15px 22px; border-radius: 14px;
  font-family: inherit; font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #17a34a, #22c55e);
  box-shadow: 0 8px 22px rgba(23,163,74,.34);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.ecp-hire-launch::after {
  content: ''; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation: ecpHireShine 2.8s ease-in-out infinite;
}
@keyframes ecpHireShine {
  0%, 62% { left: -120%; }
  100%    { left: 130%; }
}
.ecp-hire-launch:hover {
  transform: translateY(-2px); filter: brightness(1.04);
  box-shadow: 0 12px 30px rgba(23,163,74,.44);
}
.ecp-hire-launch:active { transform: translateY(0) scale(.99); }
.ecp-hire-launch-arrow { font-size: 18px; transition: transform .2s ease; }
.ecp-hire-launch:hover .ecp-hire-launch-arrow { transform: translateX(5px); }

/* The hand-off animation: the button sweeps forward into the next step */
.ecp-hire-launch.ecp-hire-launching {
  pointer-events: none;
  animation: ecpHireGo .48s cubic-bezier(.5,0,.75,0) forwards;
}
.ecp-hire-launch.ecp-hire-launching::after { animation: none; }
.ecp-hire-launch.ecp-hire-launching .ecp-hire-launch-arrow {
  animation: ecpHireArrow .48s ease forwards;
}
@keyframes ecpHireGo {
  0%   { transform: translateX(0)   scale(1);   box-shadow: 0 8px 22px rgba(23,163,74,.34); }
  35%  { transform: translateX(-8px) scale(.985); }
  100% { transform: translateX(26px) scale(1.02); box-shadow: 0 16px 40px rgba(23,163,74,.5); filter: brightness(1.1); }
}
@keyframes ecpHireArrow {
  0%   { transform: translateX(0);   opacity: 1; }
  100% { transform: translateX(28px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ecp-step-reveal, .ecp-hire-launch-in, .ecp-dl-chosen { animation: none !important; }
  .ecp-hire-launch::after { animation: none !important; }
  .ecp-hire-launch.ecp-hire-launching { animation: none !important; opacity: .75; }
}

@media (max-width: 640px) {
  .ecp-dl-chips { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .ecp-dl-exact { flex-direction: column; align-items: stretch; }
  .ecp-dl-date  { width: 100%; }
  .ecp-hire-summary { font-size: 11.5px; }
  .ecp-hire-launch  { font-size: 14px; padding: 14px 16px; }
}

/* Due-back line on the confirmed-order card */
.ecp-oc-due {
  font-size: 12.5px; font-weight: 700; color: #17a34a;
  background: rgba(23,163,74,.1); border: 1px solid rgba(23,163,74,.26);
  border-radius: 10px; padding: 8px 13px; margin: 10px auto 4px;
  display: inline-block;
}

/* ══════════════════════════════════════════════════════════
   THE LIVE DEADLINE CLOCK
   A date printed once is stale the second it is painted. These tick.
══════════════════════════════════════════════════════════ */
.ecp-due-clock {
  display: inline-flex; align-items: center; gap: 6px;
  font-variant-numeric: tabular-nums;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.ecp-due-clock .ecp-due-val { font-weight: 800; letter-spacing: .2px; }
.ecp-due-clock .ecp-due-when { opacity: .62; font-weight: 600; }
.ecp-ochip.ecp-due-ok      { background: rgba(13,115,119,.09);  color: #0d7377; border-color: rgba(13,115,119,.24); }
.ecp-ochip.ecp-due-soon    { background: rgba(201,146,43,.13);  color: #a5761f; border-color: rgba(201,146,43,.32); }
.ecp-ochip.ecp-due-urgent  { background: rgba(230,81,0,.13);    color: #d1490a; border-color: rgba(230,81,0,.34);
                             animation: ecpDuePulse 1.6s ease-in-out infinite; }
.ecp-ochip.ecp-due-late    { background: rgba(198,40,40,.13);   color: #c62828; border-color: rgba(198,40,40,.34);
                             animation: ecpDuePulse 1.2s ease-in-out infinite; }
@keyframes ecpDuePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(198,40,40,.30); }
  70%     { box-shadow: 0 0 0 7px rgba(198,40,40,0); }
}

/* The big one in the drawer */
.ecp-od-clock {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  margin: 14px 0 6px; padding: 15px 18px; border-radius: 15px;
  border: 1.5px solid rgba(13,115,119,.22);
  background: linear-gradient(135deg, rgba(20,169,174,.07), rgba(201,146,43,.05));
}
.ecp-od-clock-lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: var(--c-muted); }
.ecp-od-clock-val { font-size: 27px; font-weight: 900; letter-spacing: .5px; font-variant-numeric: tabular-nums; color: var(--c-teal); }
.ecp-od-clock-due { font-size: 12px; color: var(--c-muted); font-weight: 600; }
.ecp-od-clock.ecp-due-soon   .ecp-od-clock-val { color: #a5761f; }
.ecp-od-clock.ecp-due-urgent .ecp-od-clock-val { color: #d1490a; }
.ecp-od-clock.ecp-due-late   .ecp-od-clock-val { color: #c62828; }
.ecp-od-clock.ecp-due-late   { border-color: rgba(198,40,40,.35); background: rgba(198,40,40,.07); }

/* ══════════════════════════════════════════════════════════
   YOUR EDITOR — the face on the order card
══════════════════════════════════════════════════════════ */
.ecp-oed {
  display: flex; align-items: center; gap: 12px;
  margin: 10px 0 4px; padding: 11px 13px; border-radius: 14px;
  border: 1.5px solid rgba(13,115,119,.16);
  background: linear-gradient(120deg, rgba(20,169,174,.07), rgba(201,146,43,.045));
}
.ecp-oed-ph {
  position: relative; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 50%; overflow: visible;
}
.ecp-oed-ph img, .ecp-oed-fb {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block;
  border: 2.5px solid var(--c-teal); box-sizing: border-box;
}
.ecp-oed-fb {
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-teal), var(--c-teal2));
  color: #fff; font-size: 19px; font-weight: 800;
}
.ecp-oed-live {
  position: absolute; right: -1px; bottom: -1px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #17a34a; border: 2.5px solid #fff;
  box-shadow: 0 0 0 0 rgba(23,163,74,.55);
  animation: ecpEdLive 2.2s ease-out infinite;
}
@keyframes ecpEdLive {
  0%   { box-shadow: 0 0 0 0 rgba(23,163,74,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(23,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(23,163,74,0); }
}
.ecp-oed-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ecp-oed-lbl {
  font-size: 9.5px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase;
  color: var(--c-teal); opacity: .8;
}
.ecp-oed-name { font-size: 14.5px; font-weight: 800; color: var(--c-text); line-height: 1.2; }
.ecp-oed-head { font-size: 11.5px; font-style: normal; color: var(--c-muted); line-height: 1.3; }
.ecp-oed-stats {
  font-size: 11px; color: #5a6472; margin-top: 3px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.ecp-oed-stats i { font-style: normal; color: #cbd5e1; }
.ecp-oed-seen {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: #17a34a;
  background: rgba(23,163,74,.1); padding: 3px 9px; border-radius: 999px;
}
.ecp-oed-sm .ecp-oed-ph, .ecp-oed-sm .ecp-oed-ph img, .ecp-oed-sm .ecp-oed-fb { width: 40px; height: 40px; }
.ecp-oed-sm .ecp-oed-name { font-size: 13.5px; }
@media (max-width: 560px) { .ecp-oed-seen { display: none; } }

/* Small explanatory notes on a card */
.ecp-ocard-note {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; line-height: 1.45; font-weight: 600;
  padding: 8px 12px; border-radius: 10px; margin: 8px 0 0;
}
.ecp-ocard-note-move   { background: rgba(201,146,43,.1);  color: #a5761f; border: 1px solid rgba(201,146,43,.26); }
.ecp-ocard-note-cancel { background: rgba(198,40,40,.08);   color: #b3352f; border: 1px solid rgba(198,40,40,.22); }

/* ══════════════════════════════════════════════════════════
   ESCALATION — change my editor / cancel
   Deliberately quiet on the card. An order going well should not have
   "Cancel" shouting at it.
══════════════════════════════════════════════════════════ */
.ecp-ocard-esc {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed rgba(0,0,0,.09);
}
.ecp-esc-btn {
  font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  background: transparent; color: var(--c-muted);
  border: 1px solid rgba(0,0,0,.12);
  transition: all .15s ease;
}
.ecp-esc-btn:hover { color: var(--c-text); border-color: rgba(0,0,0,.28); background: rgba(0,0,0,.03); }
.ecp-esc-cancel:hover { color: #c62828; border-color: rgba(198,40,40,.4); background: rgba(198,40,40,.06); }
.ecp-btn-danger-ghost { color: #c62828 !important; border-color: rgba(198,40,40,.35) !important; }

/* Held, not hidden. It reads as a state of the order rather than a button
   that failed to appear, and it is only ever on screen for minutes. */
.ecp-esc-held {
  display: inline-flex; align-items: center;
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(0,0,0,.03); color: var(--c-dim);
  border: 1px dashed rgba(0,0,0,.16);
  cursor: default;
}
#ecp-app.ecp-dark .ecp-esc-held { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }

/* The confirmation popup borrows the message popup's shell and changes its
   colour — it is good news, and it should not look like another unread note. */
.ecp-confpop { border-left: 4px solid #16a34a; }
.ecp-confpop .ecp-msgpop-ic { filter: none; }

.ecp-esc-modal {
  position: fixed; inset: 0; z-index: 99999990;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(15,23,32,.55); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .2s ease;
}
.ecp-esc-modal.ecp-esc-open { opacity: 1; }
.ecp-esc-sheet {
  position: relative; width: 100%; max-width: 520px;
  max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: 20px; padding: 24px 24px 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
  transform: translateY(16px) scale(.98);
  transition: transform .24s cubic-bezier(.22,.9,.3,1.2);
}
.ecp-esc-open .ecp-esc-sheet { transform: translateY(0) scale(1); }
.ecp-esc-x {
  position: absolute; top: 14px; right: 16px;
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,.06); color: var(--c-muted); font-size: 17px; line-height: 1;
}
.ecp-esc-x:hover { background: rgba(0,0,0,.12); }
.ecp-esc-hd { display: flex; gap: 14px; align-items: flex-start; margin: 0 24px 18px 0; }
.ecp-esc-ic {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 23px;
  background: linear-gradient(135deg, rgba(20,169,174,.14), rgba(201,146,43,.12));
}
.ecp-esc-cancel .ecp-esc-ic { background: rgba(198,40,40,.1); }
.ecp-esc-hd h3 { margin: 0 0 5px; font-size: 18px; font-weight: 800; color: var(--c-text); }
.ecp-esc-hd p  { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--c-muted); }
.ecp-esc-lab {
  display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; color: var(--c-teal); margin: 14px 0 7px;
}
.ecp-esc-select, .ecp-esc-note {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13.5px;
  color: var(--c-text); padding: 11px 13px; border-radius: 12px;
  border: 1.5px solid rgba(13,115,119,.22); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ecp-esc-select { cursor: pointer; font-weight: 600; }
.ecp-esc-note   { resize: vertical; line-height: 1.55; }
.ecp-esc-select:focus, .ecp-esc-note:focus {
  border-color: var(--c-teal); outline: none; box-shadow: 0 0 0 3px rgba(20,169,174,.16);
}
.ecp-esc-note-bad { border-color: #c62828 !important; box-shadow: 0 0 0 3px rgba(198,40,40,.14) !important; }
.ecp-esc-warn {
  margin: 14px 0 0; padding: 11px 14px; border-radius: 11px;
  font-size: 12.5px; line-height: 1.5; font-weight: 600;
  background: rgba(230,81,0,.09); color: #b3502a; border: 1px solid rgba(230,81,0,.24);
}
.ecp-esc-foot { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; flex-wrap: wrap; }
.ecp-esc-go {
  flex: 1; min-width: 190px; border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 800; color: #fff;
  padding: 13px 20px; border-radius: 13px;
  background: linear-gradient(135deg, var(--c-teal), var(--c-teal2));
  box-shadow: 0 6px 18px rgba(13,115,119,.3);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.ecp-esc-cancel-mode { }
.ecp-esc-sheet.ecp-esc-cancel .ecp-esc-go {
  background: linear-gradient(135deg, #c62828, #e14b4b);
  box-shadow: 0 6px 18px rgba(198,40,40,.32);
}
.ecp-esc-go:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.ecp-esc-go:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.ecp-esc-x2 {
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--c-muted);
  padding: 12px 14px;
}
.ecp-esc-x2:hover { color: var(--c-text); text-decoration: underline; }

/* Reassignment history in the drawer */
.ecp-od-hist { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.ecp-od-hist-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 13px; border-radius: 11px;
  background: rgba(201,146,43,.07); border: 1px solid rgba(201,146,43,.2);
}
.ecp-od-hist-when { flex-shrink: 0; font-size: 11px; font-weight: 800; color: #a5761f; padding-top: 2px; }
.ecp-od-hist-tx   { font-size: 12.5px; color: var(--c-text); line-height: 1.5; }
.ecp-od-hist-tx em { display: block; font-style: normal; font-size: 11.5px; color: var(--c-muted); margin-top: 2px; }

@media (max-width: 560px) {
  .ecp-esc-sheet { padding: 20px 18px 18px; border-radius: 18px; }
  .ecp-esc-go { min-width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   PICK YOUR OWN REPLACEMENT EDITOR
   Appears inside the reassign sheet once a reason is chosen.
══════════════════════════════════════════════════════════ */
.ecp-esc-who { margin: 4px 0 0; }
.ecp-esc-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ecp-esc-mode {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  padding: 12px 13px; border-radius: 13px; cursor: pointer;
  border: 1.5px solid rgba(13,115,119,.18); background: #fff;
  transition: all .15s ease;
}
.ecp-esc-mode:hover { border-color: var(--c-teal2); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13,115,119,.12); }
.ecp-esc-mode.ecp-esc-mode-on {
  border-color: var(--c-teal);
  background: linear-gradient(135deg, rgba(20,169,174,.11), rgba(13,115,119,.06));
  box-shadow: 0 4px 14px rgba(13,115,119,.18);
}
.ecp-esc-mode-ic { flex-shrink: 0; font-size: 19px; line-height: 1.2; }
.ecp-esc-mode-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ecp-esc-mode-tx strong { font-size: 13px; font-weight: 800; color: var(--c-text); line-height: 1.25; }
.ecp-esc-mode-tx em { font-style: normal; font-size: 11px; color: var(--c-muted); line-height: 1.4; }

.ecp-esc-pool { margin: 14px 0 0; }
.ecp-esc-pool-load, .ecp-esc-pool-none {
  padding: 16px; border-radius: 12px; text-align: center;
  font-size: 12.5px; line-height: 1.55; color: var(--c-muted);
  background: rgba(0,0,0,.03); border: 1px dashed rgba(0,0,0,.12);
}
.ecp-esc-pool-note { font-size: 12px; color: var(--c-muted); margin: 0 0 10px; line-height: 1.5; }
.ecp-esc-pool-grid {
  display: flex; flex-direction: column; gap: 9px;
  max-height: 330px; overflow-y: auto; padding: 2px;
  -webkit-overflow-scrolling: touch;
}

/* One editor, as a pickable card */
.ecp-pc {
  display: flex; flex-direction: column; gap: 8px; width: 100%;
  text-align: left; cursor: pointer;
  padding: 12px 13px; border-radius: 14px;
  border: 1.5px solid rgba(13,115,119,.15); background: #fff;
  transition: all .15s ease;
}
.ecp-pc:hover { border-color: var(--c-teal2); transform: translateY(-1px); box-shadow: 0 5px 15px rgba(13,115,119,.14); }
.ecp-pc.ecp-pc-on {
  border-color: var(--c-teal);
  background: linear-gradient(135deg, rgba(23,163,74,.08), rgba(20,169,174,.06));
  box-shadow: 0 6px 18px rgba(13,115,119,.2);
}
.ecp-pc-top { display: flex; align-items: center; gap: 11px; }
.ecp-pc-ph { flex-shrink: 0; width: 44px; height: 44px; }
.ecp-pc-ph img, .ecp-pc-fb {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block;
  border: 2.5px solid rgba(20,169,174,.4); box-sizing: border-box;
}
.ecp-pc.ecp-pc-on .ecp-pc-ph img, .ecp-pc.ecp-pc-on .ecp-pc-fb { border-color: var(--c-teal); }
.ecp-pc-fb {
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-teal), var(--c-teal2));
  color: #fff; font-size: 18px; font-weight: 800;
}
.ecp-pc-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ecp-pc-name { font-size: 14px; font-weight: 800; color: var(--c-text); line-height: 1.2; }
.ecp-pc-head { font-style: normal; font-size: 11.5px; color: var(--c-muted); line-height: 1.35; }
.ecp-pc-tick {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-teal); color: #fff; font-size: 13px; font-weight: 900;
  display: none; align-items: center; justify-content: center;
}
.ecp-pc.ecp-pc-on .ecp-pc-tick { display: flex; }

.ecp-pc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.ecp-pc-avail {
  font-size: 10.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px;
}
.ecp-pc-avail-open  { background: rgba(23,163,74,.12); color: #17a34a; }
.ecp-pc-avail-busy  { background: rgba(201,146,43,.14); color: #a5761f; }
.ecp-pc-avail-tight { background: rgba(230,81,0,.12);  color: #d1490a; }
.ecp-pc-stat { font-size: 11px; font-weight: 700; color: #5a6472; }
.ecp-pc-seen { font-size: 10.5px; font-weight: 700; color: #17a34a; margin-left: auto; }

.ecp-pc-svcs { display: flex; flex-wrap: wrap; gap: 5px; }
.ecp-pc-svc {
  font-size: 10px; font-weight: 700; color: var(--c-teal);
  background: rgba(20,169,174,.09); padding: 2px 8px; border-radius: 999px;
}
.ecp-pc-bio { font-size: 11.5px; color: #5a6472; line-height: 1.45; }

@media (max-width: 560px) {
  .ecp-esc-modes { grid-template-columns: 1fr; }
  .ecp-esc-pool-grid { max-height: 260px; }
  .ecp-pc-seen { margin-left: 0; }
}

/* A tab that is always drawn but currently has nothing in it. Visible, so the
   student knows the option exists; dimmed, so it never competes with live work. */
.ecp-ord-filter.ecp-ord-filter-empty {
  opacity: .42;
  cursor: default;
  filter: grayscale(.6);
}
.ecp-ord-filter.ecp-ord-filter-empty:hover {
  transform: none;
  box-shadow: none;
}
.ecp-ord-filter.ecp-ord-filter-empty .ecp-ord-filter-n {
  background: rgba(0,0,0,.08);
  color: var(--c-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   v3.18.8 — HIRE GATING
   The headless CTA button and the "this section already has an editor"
   chooser sheet.
   ═══════════════════════════════════════════════════════════════════════ */

/* One button per card. #ecp-verify-btn-* stays in the DOM as the state
   carrier for the order flow but is never rendered. */
.ecp-verify-btn-headless { display: none !important; }

/* The action row now holds only the price, so it no longer needs to fight
   for space with a button stack. */
.ecp-verify-action-row:has(> .ecp-verify-btn-headless:only-of-type) {
  justify-content: flex-start;
}

/* ── "Change editor" on the assigned-editor strip ── */
.ecp-hub-live-btn.ecp-hub-live-change {
  border-color: rgba(226, 178, 60, .55);
  color: #8a6410;
  background: rgba(226, 178, 60, .12);
}
.ecp-hub-live-btn.ecp-hub-live-change:hover {
  background: rgba(226, 178, 60, .22);
  border-color: rgba(226, 178, 60, .8);
}

/* ── The chooser sheet ── */
.ecp-shc-modal {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(9, 18, 28, .58);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .2s ease;
}
.ecp-shc-modal.ecp-shc-on { opacity: 1; }
.ecp-shc-sheet {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow: auto;
  background: #fff;
  color: #16212e;
  border-radius: 18px;
  padding: 22px 20px 18px;
  box-shadow: 0 28px 70px rgba(10, 24, 38, .38);
  transform: translateY(14px) scale(.985);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.ecp-shc-modal.ecp-shc-on .ecp-shc-sheet { transform: none; }
.ecp-shc-x {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: #eef2f8; color: #5b6b7d;
  font-size: 15px; cursor: pointer;
}
.ecp-shc-x:hover { background: #e2e8f2; color: #16212e; }
.ecp-shc-hd { display: flex; gap: 12px; align-items: flex-start; margin: 0 26px 16px 0; }
.ecp-shc-ic { font-size: 26px; line-height: 1; }
.ecp-shc-hd h3 { margin: 0 0 5px; font-size: 17px; font-weight: 800; line-height: 1.25; }
.ecp-shc-hd p  { margin: 0; font-size: 13px; line-height: 1.5; color: #5b6b7d; }
.ecp-shc-opts { display: flex; flex-direction: column; gap: 9px; }
.ecp-shc-opt {
  display: flex; gap: 12px; align-items: center;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #e4e9f0;
  border-radius: 13px;
  background: #f7f9fc;
  color: inherit;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.ecp-shc-opt:hover { border-color: #0f9aa0; background: #eef7f8; }
.ecp-shc-opt:active { transform: scale(.99); }
.ecp-shc-opt-ic { font-size: 20px; flex: 0 0 auto; }
.ecp-shc-opt-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ecp-shc-opt-tx strong { font-size: 14px; font-weight: 800; }
.ecp-shc-opt-tx em { font-style: normal; font-size: 12px; line-height: 1.45; color: #5b6b7d; }
.ecp-shc-opt-quiet { background: #fff; }

/* Dark theme */
.ecp-dark .ecp-shc-sheet,
body.ecp-rc-dark .ecp-shc-sheet { background: #14212e; color: #e8eef7; }
.ecp-dark .ecp-shc-hd p,
.ecp-dark .ecp-shc-opt-tx em { color: #93a4b8; }
.ecp-dark .ecp-shc-opt { background: #1b2c3b; border-color: #24384a; }
.ecp-dark .ecp-shc-opt:hover { background: #223649; border-color: #0f9aa0; }
.ecp-dark .ecp-shc-x { background: #223649; color: #93a4b8; }

@media (max-width: 560px) {
  .ecp-shc-modal { align-items: flex-end; padding: 0; }
  .ecp-shc-sheet {
    max-width: none;
    border-radius: 20px 20px 0 0;
    max-height: 90vh;
    padding-bottom: 26px;
  }
  .ecp-shc-opt { padding: 15px 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v3.18.9 — BRAND AS RELOAD CONTROL
   The logo is a real <button> on every profile now. These rules strip the
   default button chrome so it looks exactly as it always did, then add the
   affordances that tell a user it can be pressed.
   ═══════════════════════════════════════════════════════════════════════ */
.ecp-brand-reload {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  border-radius: 12px;
  transition: background .16s ease, transform .12s ease;
}
/* The rail/landing versions were flex containers before they were buttons. */
.ecp-brand.ecp-brand-reload,
.ecp-logo.ecp-brand-reload,
.ecp-wr-brand.ecp-brand-reload { display: flex; align-items: center; }

.ecp-brand-reload:hover   { background: rgba(15, 154, 160, .10); }
.ecp-brand-reload:active  { transform: scale(.985); }
.ecp-brand-reload:focus-visible {
  outline: 2px solid #0f9aa0;
  outline-offset: 2px;
}

/* The ⟳ hint. Quiet until hover/focus so it never competes with the wordmark. */
.ecp-brand-reload-ic {
  margin-left: auto;
  padding-left: 8px;
  font-size: 15px;
  line-height: 1;
  opacity: 0;
  color: #0f9aa0;
  transition: opacity .16s ease;
}
.ecp-brand-reload:hover .ecp-brand-reload-ic,
.ecp-brand-reload:focus-visible .ecp-brand-reload-ic { opacity: .85; }

/* Touch devices have no hover, so the hint stays visible and faint. */
@media (hover: none) {
  .ecp-brand-reload-ic { opacity: .45; }
}

/* Spinning while the reload is in flight. */
.ecp-brand-reloading { pointer-events: none; opacity: .75; }
.ecp-brand-reloading .ecp-brand-reload-ic {
  opacity: 1;
  animation: ecp-brand-spin .7s linear infinite;
  display: inline-block;
}
@keyframes ecp-brand-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ecp-brand-reload, .ecp-brand-reload-ic { transition: none; }
  .ecp-brand-reloading .ecp-brand-reload-ic { animation: none; }
}


/* ── Wallet deposit bonus tiers (v3.24.8) ───────────────────────────── */
.ecp-wallet-bonus-banner{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin:10px 0 4px;padding:10px 12px;
  background:linear-gradient(90deg,#fff7e6 0%,#fffdf7 100%);
  border:1px solid #f0d9a8;border-radius:10px;
  font-size:13px;color:#6b5426;
}
.ecp-wallet-bonus-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;background:#fff;border:1px solid #ecd9ad;border-radius:999px;
  cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
  white-space:nowrap;
}
.ecp-wallet-bonus-chip:hover{
  transform:translateY(-1px);border-color:#d4a943;
  box-shadow:0 2px 8px rgba(180,140,40,.18);
}
.ecp-wallet-bonus-chip em{font-style:normal;color:#8a7448;font-size:12px;}
.ecp-wallet-bonus-chip strong{color:#a8781a;}
@media (max-width:520px){
  .ecp-wallet-bonus-banner{font-size:12px;padding:8px 10px;}
  .ecp-wallet-bonus-chip{padding:4px 8px;}
}