/* ═════════════════════════════════════════════════════════════════
   THEME
═════════════════════════════════════════════════════════════════ */
.pg-root{
    --pg-blue:#3680ED;--pg-blue-dark:#2060C0;--pg-blue-light:#EAF2FD;
    --pg-orange:#60A4F5;--pg-orange-dark:#2060C0;
    --pg-tg:#111111;--pg-tg-dark:#000000;
    --pg-yellow:#3680ED;--pg-yellow-dark:#2060C0;
    --pg-bg:#fafafa;--pg-white:#fff;--pg-border:#ececec;
    --pg-text:#111111;--pg-muted:#888888;--pg-secondary:#666666;
    --pg-success:#2060C0;--pg-success-light:#EAF2FD;
    --pg-danger:#2060C0;--pg-danger-light:#EAF2FD;
    --pg-radius:16px;--pg-radius-sm:10px;
    --pg-shadow:0 2px 12px rgba(15,23,42,.06);
    --pg-shadow-md:0 6px 20px rgba(15,23,42,.08);
    --pg-trans:.18s ease;
    font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
    color:var(--pg-text);
}
.pg-root *,.pg-root *::before,.pg-root *::after{box-sizing:border-box}

/* Tool header */
.pg-header{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.pg-header-icon{width:46px;height:46px;background:var(--pg-blue-light);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--pg-blue);font-size:20px;flex-shrink:0}
.pg-header h2{font-size:22px;font-weight:700;color:var(--pg-text);margin:0 0 2px}
.pg-header p{font-size:13px;color:var(--pg-secondary);margin:0}

/* Cards */
.pg-card{background:var(--pg-white);border:1px solid var(--pg-border);border-radius:var(--pg-radius);box-shadow:var(--pg-shadow);margin-bottom:14px;overflow:hidden}

/* Prompt input */
.pg-prompt-body{padding:16px 18px}
.pg-textarea{width:100%;border:none;outline:none;resize:none;font-family:inherit;font-size:14.5px;line-height:1.7;color:var(--pg-text);background:transparent;min-height:110px;display:block}
.pg-textarea::placeholder{color:var(--pg-muted)}
.pg-prompt-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--pg-border);padding-top:10px;margin-top:8px}
.pg-char-count{font-size:12px;color:var(--pg-muted);font-variant-numeric:tabular-nums}
.pg-random-btn{background:none;border:none;cursor:pointer;color:var(--pg-blue);font-size:12.5px;font-family:inherit;display:flex;align-items:center;gap:5px;padding:0;transition:opacity var(--pg-trans)}
.pg-random-btn:hover{opacity:.7}

/* Section label */
.pg-label-row{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin-bottom:8px;padding:0 2px}
.pg-label-row .icon{color:var(--pg-blue);font-size:16px}

/* Model dropdown */
.pg-model-wrap{position:relative}
.pg-model-trigger{width:100%;background:var(--pg-white);border:1px solid var(--pg-border);border-radius:var(--pg-radius-sm);padding:12px 16px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:border-color var(--pg-trans),box-shadow var(--pg-trans);box-shadow:var(--pg-shadow)}
.pg-model-trigger:hover,.pg-model-trigger.open{border-color:var(--pg-blue);box-shadow:0 0 0 3px rgba(54,128,237,.12)}
.pg-trigger-img{width:22px;height:22px;object-fit:contain;flex-shrink:0}
.pg-model-trigger .t-name{flex:1;font-weight:600;font-size:14px}
.pg-model-trigger .t-chev{color:var(--pg-muted);font-size:12px;transition:transform var(--pg-trans)}
.pg-model-trigger.open .t-chev{transform:rotate(180deg)}
.pg-model-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--pg-white);border:1px solid var(--pg-border);border-radius:var(--pg-radius-sm);box-shadow:var(--pg-shadow-md);z-index:300;max-height:440px;overflow-y:auto}
.pg-model-dropdown.open{display:block;animation:pgDropIn .15s ease}
@keyframes pgDropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.pg-model-group{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--pg-muted);padding:12px 16px 5px;border-top:1px solid var(--pg-border);background:var(--pg-bg,#fafafa)}
.pg-model-group:first-child{border-top:none}
.pg-model-item{display:flex;align-items:center;gap:11px;padding:10px 16px;cursor:pointer;transition:background var(--pg-trans)}
.pg-model-item:hover,.pg-model-item.sel{background:var(--pg-blue-light)}
.mi-ico-img{width:22px;height:22px;object-fit:contain;flex-shrink:0;border-radius:4px}
.pg-model-item .mi-info{flex:1;min-width:0}
.pg-model-item .mi-name{font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pg-model-item .mi-desc{font-size:11.5px;color:var(--pg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-badge-new{background:rgba(54,128,237,.12);color:var(--pg-blue-dark);font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:4px;letter-spacing:.3px}
.pg-badge-free{background:#CFE0FA;color:#2060C0;font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:4px;letter-spacing:.3px}
.mi-limit{flex-shrink:0;font-size:11px;font-weight:600;color:var(--pg-secondary);background:#f7f7f8;border:1px solid var(--pg-border);border-radius:20px;padding:3px 10px;white-space:nowrap}
.mi-limit.free{color:#2060C0;background:#EAF2FD;border-color:#CFE0FA}

/* Advanced options accordion */
.pg-acc-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:none;border:none;cursor:pointer;font-family:inherit}
.pg-acc-trigger .acc-left{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px;color:var(--pg-text)}
.pg-acc-trigger .acc-left .ai{color:var(--pg-blue)}
.pg-acc-trigger .acc-chev{color:var(--pg-muted);font-size:12px;transition:transform var(--pg-trans)}
.pg-acc-trigger.open .acc-chev{transform:rotate(180deg)}
.pg-acc-body{display:none;padding:0 20px 20px;border-top:1px solid var(--pg-border)}
.pg-acc-body.open{display:block;animation:pgFadeIn .2s ease}
@keyframes pgFadeIn{from{opacity:0}to{opacity:1}}
.pg-opts-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-top:16px}
@media(max-width:560px){.pg-opts-grid{grid-template-columns:1fr}}
.pg-opt-group label{display:block;font-size:12.5px;font-weight:600;color:var(--pg-secondary);margin-bottom:5px}
.pg-sel{width:100%;appearance:none;-webkit-appearance:none;background-color:var(--pg-white);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa0ab' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 12px center;background-size:13px;border:1px solid var(--pg-border);border-radius:8px;padding:9px 34px 9px 12px;font-family:inherit;font-size:13.5px;color:var(--pg-text);cursor:pointer;transition:border-color var(--pg-trans),box-shadow var(--pg-trans)}
.pg-sel:focus{outline:none;border-color:var(--pg-blue);box-shadow:0 0 0 3px rgba(54,128,237,.12)}
/* ── Universal slider fix (grabbable thumb + transparent track; JS paints the live fill) ── */
.pg-acc-body input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:#ececec;outline:none;cursor:pointer;padding:0;margin:6px 0;touch-action:none}
.pg-acc-body input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:transparent;border:none}
.pg-acc-body input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:var(--pg-blue);border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.3);cursor:pointer}
.pg-acc-body input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:transparent;border:none}
.pg-acc-body input[type=range]::-moz-range-thumb{width:16px;height:16px;border:2px solid #fff;border-radius:50%;background:var(--pg-blue);cursor:pointer}

/* Generate button — see assets/css/ai-generate-btn.css (linked once above).
   Shared with ai-tool-shell so all ~2,000 tools get the same CTA. */

/* ═════════════════════════════════════════════════════════════════
   OUTPUT CARD (lean, single-column, full-width)
═════════════════════════════════════════════════════════════════ */
.pg-out-card{display:none}
.pg-out-card.show{display:block;animation:pgSlideUp .25s ease}
@keyframes pgSlideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Sticky toolbar (action icons on the right, tool name on the left) */
.pg-out-toolbar{
    position:sticky;top:0;z-index:50;
    display:flex;align-items:center;gap:12px;
    padding:12px 20px;
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(10px);
    -webkit-backdrop-filter:saturate(180%) blur(10px);
    border-bottom:1px solid var(--pg-border);
}
/* Tool-name pill (eyebrow look) lives in the toolbar, top-left */
.pg-out-toolbar .tb-tool{
    display:inline-flex;align-items:center;gap:6px;
    background:linear-gradient(135deg,#EAF2FD 0%,#F4F8FE 100%);
    border:1px solid #CFE0FA;border-radius:50px;
    padding:5px 14px;font-size:11px;font-weight:800;
    color:var(--pg-blue-dark);letter-spacing:.6px;text-transform:uppercase;
    margin-right:auto;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pg-out-toolbar .tb-tool i{color:var(--pg-blue);flex-shrink:0;font-size:11px}
.pg-out-toolbar .tb-actions{display:flex;gap:6px;flex-shrink:0}

/* Mobile: stack the tool-name pill above the action icons so the AI tool
   name is never clipped by the toolbar buttons (shows in full, can wrap). */
@media(max-width:560px){
    .pg-out-toolbar{flex-wrap:wrap;gap:10px}
    .pg-out-toolbar .tb-tool{margin-right:auto;max-width:100%;white-space:normal;overflow:visible;text-overflow:clip}
    .pg-out-toolbar .tb-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}
}

/* Download icon dropdown menu (anchored under the ⬇ icon) */
.pg-dl-wrap{position:relative;display:inline-flex}
.pg-dl-menu{
    position:absolute;top:calc(100% + 6px);right:0;z-index:60;
    background:var(--pg-white,#fff);border:1px solid var(--pg-border);
    border-radius:10px;box-shadow:0 8px 24px rgba(15,23,42,.10);
    min-width:160px;padding:6px;display:none;
}
.pg-dl-menu.open{display:flex;flex-direction:column;gap:2px}
.pg-dl-item{
    display:flex;align-items:center;gap:9px;
    padding:8px 12px;font-size:13px;font-weight:600;
    color:var(--pg-text);background:transparent;border:none;border-radius:7px;
    cursor:pointer;text-align:left;transition:background var(--pg-trans);
    font-family:inherit;
}
.pg-dl-item:hover{background:#f7f7f8}
.pg-dl-item i{color:var(--pg-blue);font-size:13px;width:14px;text-align:center}

/* Prompt subtitle below H1 (writers shell) */
.pg-out-prompt-sub{
    font-size:14px;line-height:1.55;color:var(--pg-muted);
    margin:0 0 14px;word-break:break-word;
}

.pg-icon-btn{
    width:34px;height:34px;background:var(--pg-bg,#fafafa);border:1px solid var(--pg-border);
    border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--pg-secondary);font-size:13px;
    transition:all var(--pg-trans);flex-shrink:0;padding:0;
}
.pg-icon-btn:hover{background:var(--pg-blue-light);color:var(--pg-blue);border-color:var(--pg-blue);transform:translateY(-1px)}
.pg-icon-btn.on{background:var(--pg-blue);color:#fff;border-color:var(--pg-blue)}
.pg-icon-btn.tts.playing{background:var(--pg-blue);color:#fff;border-color:var(--pg-blue)}

/* Article header (prompt as title) */
.pg-out-header{padding:24px 28px 14px}
@media(max-width:640px){.pg-out-header{padding:18px 18px 12px}}
.pg-out-prompt{
    font-size:24px;font-weight:800;line-height:1.3;color:var(--pg-text);
    margin:0 0 12px;letter-spacing:-.3px;
    word-break:break-word;
}
@media(max-width:640px){.pg-out-prompt{font-size:20px}}

/* Metadata pills */
.pg-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pg-meta-pill{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--pg-white,#fff);border:1px solid var(--pg-border);border-radius:50px;
    padding:5px 12px;font-size:11.5px;font-weight:700;color:var(--pg-secondary);
    text-transform:uppercase;letter-spacing:.4px;
}
.pg-meta-pill i{color:var(--pg-blue);font-size:11px}
.pg-coffee-btn{
    margin-left:auto;
    display:inline-flex;align-items:center;gap:7px;
    background:var(--pg-yellow);color:#ffffff;border:1px solid var(--pg-yellow-dark);
    border-radius:50px;padding:6px 14px;font-size:12px;font-weight:800;
    text-decoration:none;letter-spacing:.2px;
    box-shadow:0 3px 10px rgba(54,128,237,.35);
    transition:all var(--pg-trans);font-family:inherit;
    cursor:pointer;
}
.pg-coffee-btn:hover{background:var(--pg-yellow-dark);color:#fff;transform:translateY(-1px);box-shadow:0 5px 16px rgba(54,128,237,.45)}
.pg-coffee-btn i{font-size:13px}
@media(max-width:560px){
    .pg-coffee-btn{margin-left:0;width:100%;justify-content:center;margin-top:6px}
}

/* Divider */
.pg-out-divider{height:1px;background:var(--pg-border);margin:18px 28px}
@media(max-width:640px){.pg-out-divider{margin:14px 18px}}

/* Writers: article title, meta description, option pills, SEO cards */
.pg-out-title{font-weight:800}
.pg-out-meta-desc{font-size:14.5px;color:var(--pg-secondary);line-height:1.6;margin:8px 0 0}
.pg-out-meta-desc:empty{display:none}
.pg-pill-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.pg-pill-row:empty{display:none}
/* Feature pills — the badges that say what was applied to this draft.
   They were four IDENTICAL flat fills with no icon plate, no depth and no
   hover at all, which made them the flattest thing in the header. Same brand
   family (they are one family of claims, so colour-coding them would invent a
   taxonomy that does not exist), but now with a real surface: a vertical wash,
   a filled gradient plate carrying the glyph, and a lift on hover.
   The four variant selectors are kept rather than collapsed — each is (0,2,0)
   and would otherwise out-rank the base and repaint the flat fill back. */
.pg-feat-pill{display:inline-flex;align-items:center;gap:8px;border-radius:50px;padding:4px 14px 4px 4px;font-size:12px;font-weight:700;line-height:1;border:1px solid rgba(54,128,237,.24);background:linear-gradient(180deg,#F8FAFE,#EBF3FD);color:#2060C0;box-shadow:0 1px 2px rgba(16,26,40,.05);transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .22s ease,border-color .2s ease,background .2s ease}
/* Solid plate, white glyph — the measured AA fill, not brand blue on a tint. */
.pg-feat-pill i{display:grid;place-items:center;inline-size:21px;block-size:21px;border-radius:50%;background:linear-gradient(135deg,#2E6FD0,#1B4E9E);color:#fff;font-size:9.5px;line-height:1;box-shadow:0 2px 6px -2px rgba(54,128,237,.85),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .26s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease}
.pg-feat-pill.seo,.pg-feat-pill.fact,.pg-feat-pill.human,.pg-feat-pill.aidetect{background:linear-gradient(180deg,#F8FAFE,#EBF3FD);color:#2060C0;border-color:rgba(54,128,237,.24)}
@media(hover:hover) and (pointer:fine){
  .pg-feat-pill:hover{transform:translateY(-1px);border-color:rgba(54,128,237,.44);box-shadow:0 10px 20px -12px rgba(54,128,237,.65)}
  .pg-feat-pill:hover i{transform:scale(1.07);box-shadow:0 4px 12px -3px rgba(54,128,237,.95),inset 0 1px 0 rgba(255,255,255,.35)}
}
@media(prefers-reduced-motion:reduce){.pg-feat-pill,.pg-feat-pill i{transition:none}.pg-feat-pill:hover{transform:none}.pg-feat-pill:hover i{transform:none}}
@media(max-width:575.98px){.pg-feat-pill{font-size:11.5px;padding:3px 12px 3px 3px;gap:7px}.pg-feat-pill i{inline-size:19px;block-size:19px;font-size:9px}}
.pg-seo-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 28px 4px}
@media(max-width:760px){.pg-seo-bar{grid-template-columns:1fr;padding:14px 18px 4px}}
.pg-seo-cell{background:var(--pg-bg,#fafafa);border:1px solid var(--pg-border);border-radius:12px;padding:10px 13px;min-width:0}
.pg-seo-cell .seo-k{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--pg-muted);display:flex;align-items:center;gap:5px;margin-bottom:4px}
.pg-seo-cell .seo-k i{color:var(--pg-blue);font-size:10px}
.pg-seo-cell .seo-v{font-size:13px;color:var(--pg-text);font-weight:600;word-break:break-word;overflow-wrap:anywhere}
.pg-seo-cell-kw{grid-column:1/-1}
/* Keywords bar + pills */
.pg-kw-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 28px 14px}
@media(max-width:640px){.pg-kw-bar{padding:0 18px 12px}}
.pg-kw-label{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--pg-muted);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pg-kw-label i{color:var(--pg-blue);font-size:11px}
.pg-kw-pills{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pg-kw-pill{display:inline-flex;align-items:center;gap:5px;background:var(--pg-blue-light);color:var(--pg-blue-dark);border:1px solid #CFE0FA;border-radius:50px;padding:4px 11px;font-size:12px;font-weight:600;line-height:1;transition:all var(--pg-trans)}
.pg-kw-pill:hover{background:var(--pg-white,#fff);border-color:var(--pg-blue)}
.pg-kw-pill i{font-size:8px;opacity:.7}
.pg-kw-empty{font-size:12px;color:var(--pg-muted);font-style:italic}
/* History "Open Output" primary action */
.pg-openout-btn{display:inline-flex;align-items:center;gap:7px;background:var(--pg-blue);color:#fff;border:none;border-radius:9px;padding:6px 13px;font-size:12.5px;font-weight:700;cursor:pointer;transition:all var(--pg-trans);white-space:nowrap;margin-right:auto}
.pg-openout-btn:hover{background:var(--pg-blue-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(54,128,237,.3)}
.pg-openout-btn i{font-size:12px}
/* Article body */
.pg-article{padding:6px 28px 26px;max-width:880px;margin:0 auto;line-height:1.78;scroll-behavior:smooth}
@media(max-width:640px){.pg-article{padding:6px 18px 22px}}
.pg-article > *:first-child{margin-top:0 !important}
.pg-article > *:last-child{margin-bottom:0 !important}

.pg-article h1{
    font-size:28px;font-weight:800;line-height:1.25;
    margin:0 0 16px;color:var(--pg-text);letter-spacing:-.3px;
}
.pg-article h2{
    font-size:22px;font-weight:800;line-height:1.3;
    margin:32px 0 12px;color:var(--pg-text);
    padding-bottom:10px;border-bottom:1px solid var(--pg-border);
}
.pg-article h3{
    font-size:17px;font-weight:700;line-height:1.4;
    margin:24px 0 10px;color:var(--pg-text);
}
.pg-article h4{
    font-size:15.5px;font-weight:700;line-height:1.4;
    margin:20px 0 8px;color:var(--pg-text);
}
.pg-article h5,.pg-article h6{
    font-size:13.5px;font-weight:700;line-height:1.4;
    margin:18px 0 6px;color:var(--pg-secondary);
    text-transform:uppercase;letter-spacing:.5px;
}
.pg-article p{font-size:15.5px;color:#333333;line-height:1.8;margin:0 0 16px}
.pg-article strong{
    color:var(--pg-text);font-weight:700;
    background:linear-gradient(180deg,transparent 62%,rgba(255,233,84,.7) 62%);
    padding:0 2px;
}
.pg-article em{font-style:italic;color:#333333}
.pg-article a{color:var(--pg-blue);text-decoration:none;border-bottom:1px solid rgba(54,128,237,.4);transition:all var(--pg-trans)}
.pg-article a:hover{color:var(--pg-blue-dark);border-bottom-color:var(--pg-blue-dark)}
.pg-article hr{border:none;height:1px;background:var(--pg-border);margin:28px 0}

/* Elegant lists */
.pg-article ul,.pg-article ol{margin:0 0 18px;padding-left:0;list-style:none}
.pg-article ul li,.pg-article ol li{
    font-size:15px;color:#333333;line-height:1.75;
    margin-bottom:8px;padding-left:28px;position:relative;
}
.pg-article ul li::before{
    content:'';position:absolute;left:8px;top:.7em;
    width:6px;height:6px;border-radius:50%;background:var(--pg-blue);
}
.pg-article ol{counter-reset:pg-ol}
.pg-article ol li{counter-increment:pg-ol}
.pg-article ol li::before{
    content:counter(pg-ol);position:absolute;left:0;top:.05em;
    width:20px;height:20px;border-radius:50%;
    background:var(--pg-blue-light);color:var(--pg-blue-dark);
    font-size:11px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
}

/* Inline code */
.pg-article code:not(pre code){
    background:#f7f7f8;color:#2060C0;
    padding:2px 6px;border-radius:4px;
    font-family:'SF Mono',Menlo,Monaco,Consolas,monospace;
    font-size:.88em;font-weight:600;
}

/* Code block (dark, copyable) */
.pg-codeblock{
    position:relative;background:#111111;color:#ececec;
    border-radius:12px;margin:18px 0;overflow:hidden;
    border:1px solid #222222;
    box-shadow:0 6px 18px rgba(15,23,42,.15);
}
.pg-codeblock-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:8px 14px;background:#222222;border-bottom:1px solid #444444;
}
.pg-codeblock-lang{
    font-size:11px;font-weight:700;color:#999999;
    text-transform:uppercase;letter-spacing:.6px;
}
.pg-codeblock-copy{
    background:#444444;color:#dadada;border:none;border-radius:6px;
    padding:4px 10px;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit;
    display:inline-flex;align-items:center;gap:5px;transition:all var(--pg-trans);
}
.pg-codeblock-copy:hover{background:#555555;color:#fff}
.pg-codeblock-copy.on{background:var(--pg-success);color:#fff}
.pg-codeblock pre{margin:0;padding:14px 16px;overflow-x:auto;font-family:'SF Mono',Menlo,Monaco,Consolas,monospace;font-size:13px;line-height:1.65}
.pg-codeblock pre code{background:transparent;color:inherit;padding:0;font-size:inherit;font-weight:normal}

/* Blockquote */
.pg-article blockquote{
    position:relative;margin:22px 0;padding:16px 20px 16px 54px;
    background:linear-gradient(135deg,#EAF2FD 0%,#F4F8FE 100%);
    border-left:4px solid var(--pg-blue);border-radius:0 12px 12px 0;
    font-size:15.5px;font-style:italic;color:#333333;line-height:1.7;
}
.pg-article blockquote::before{
    content:'\201C';position:absolute;left:14px;top:0;
    font-family:Georgia,serif;font-size:52px;line-height:1;
    color:var(--pg-blue);opacity:.35;
}
.pg-article blockquote p{margin:0;font-size:inherit;color:inherit;font-style:inherit}
.pg-article blockquote cite{display:block;margin-top:10px;font-size:13px;font-style:normal;font-weight:600;color:var(--pg-secondary)}
.pg-article blockquote cite::before{content:'— '}

/* Tables */
.pg-table-wrap{
    margin:20px 0;border:1px solid var(--pg-border);border-radius:12px;
    overflow:auto;box-shadow:0 2px 8px rgba(15,23,42,.04);background:var(--pg-white,#fff);
}
.pg-article table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px}
.pg-article thead{background:linear-gradient(180deg,#fafafa 0%,#f7f7f8 100%)}
.pg-article th{padding:12px 16px;text-align:left;font-weight:700;color:var(--pg-text);font-size:13px;border-bottom:2px solid var(--pg-border);white-space:nowrap}
.pg-article td{padding:11px 16px;border-bottom:1px solid #f7f7f8;color:#333333;vertical-align:top}
.pg-article tbody tr:nth-child(even){background:var(--pg-bg,#fafafa)}
.pg-article tbody tr:hover{background:var(--pg-blue-light)}
.pg-article tbody tr:last-child td{border-bottom:none}

/* FAQ accordion */
.pg-faq-list{display:flex;flex-direction:column;gap:10px;margin:14px 0 18px}
.pg-faq-item{background:var(--pg-white,#fff);border:1px solid var(--pg-border);border-radius:12px;overflow:hidden;transition:all var(--pg-trans)}
.pg-faq-item:hover{border-color:var(--pg-blue);box-shadow:0 4px 14px rgba(54,128,237,.08)}
.pg-faq-q{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;padding:14px 18px;cursor:pointer;background:var(--pg-white,#fff);border:none;
    font-family:inherit;font-size:14.5px;font-weight:600;color:var(--pg-text);
    line-height:1.4;text-align:left;
}
.pg-faq-q .faq-chev{
    width:24px;height:24px;border-radius:50%;
    background:var(--pg-blue-light);color:var(--pg-blue);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:10px;flex-shrink:0;transition:transform var(--pg-trans);
}
.pg-faq-item.open .pg-faq-q .faq-chev{transform:rotate(180deg);background:var(--pg-blue);color:#fff}
.pg-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .25s ease;padding:0 18px;background:var(--pg-bg,#fafafa)}
.pg-faq-item.open .pg-faq-a{max-height:700px;padding:14px 18px 16px;border-top:1px solid var(--pg-border)}
.pg-faq-a p{font-size:14px;color:var(--pg-secondary);margin:0 0 8px;line-height:1.7}
.pg-faq-a p:last-child{margin-bottom:0}

/* Hover-highlight for reading area (subtle blue tint as cursor moves) */
.pg-article p:hover,
.pg-article li:hover,
.pg-article h1:hover,
.pg-article h2:hover,
.pg-article h3:hover,
.pg-article h4:hover{
    background:rgba(54,128,237,.05);
    transition:background var(--pg-trans);
}

/* TTS word highlight (blue transparent) */
.pg-spoken{
    background:rgba(54,128,237,.20);
    box-shadow:0 0 0 2px rgba(54,128,237,.20);
    border-radius:3px;color:var(--pg-blue-dark);
}

/* Edit mode */
.pg-out-edit{
    display:none;width:calc(100% - 56px);min-height:300px;margin:0 28px 18px;
    border:1px solid var(--pg-blue);border-radius:10px;padding:14px;
    font-family:'SF Mono',Menlo,Monaco,Consolas,monospace;
    font-size:13.5px;line-height:1.7;resize:vertical;color:var(--pg-text);
    box-shadow:0 0 0 3px rgba(54,128,237,.12);background:var(--pg-bg,#fafafa);
}
@media(max-width:640px){.pg-out-edit{width:calc(100% - 36px);margin:0 18px 14px}}
.pg-save-btn{
    display:none;margin:0 28px 18px;background:var(--pg-blue);color:#fff;border:none;
    border-radius:8px;padding:9px 20px;font-family:inherit;font-size:13px;font-weight:600;
    cursor:pointer;transition:background var(--pg-trans);align-items:center;gap:6px;
}
@media(max-width:640px){.pg-save-btn{margin:0 18px 14px}}
.pg-save-btn:hover{background:var(--pg-blue-dark)}

/* Hidden raw markdown — used by copy / TTS / export */
.pg-out-text{display:none;white-space:pre-wrap}

/* Export row */
.pg-export-row{display:none;gap:8px;flex-wrap:wrap;margin:0 0 14px;padding:0 4px}
.pg-export-row.show{display:flex}
.pg-exp-btn{display:flex;align-items:center;gap:6px;background:var(--pg-white,#fff);border:1px solid var(--pg-border);border-radius:8px;padding:8px 16px;font-size:12.5px;font-weight:600;color:var(--pg-secondary);cursor:pointer;transition:all var(--pg-trans);font-family:inherit}
.pg-exp-btn:hover{border-color:var(--pg-blue);color:var(--pg-blue);background:var(--pg-blue-light);transform:translateY(-1px)}

/* ═════════════════════════════════════════════════════════════════
   ACTIVITY HISTORY
═════════════════════════════════════════════════════════════════ */
.pg-hist-header{display:flex;align-items:center;gap:10px;margin:28px 0 14px;font-weight:800;font-size:17px;color:var(--pg-text)}
.pg-hist-header i{color:var(--pg-blue)}
.pg-hist-count{font-size:12px;font-weight:700;color:var(--pg-blue-dark);background:var(--pg-blue-light);border:1px solid #CFE0FA;border-radius:20px;padding:3px 11px}

.pg-hist-list{display:flex;flex-direction:column;gap:10px}
.pg-hist-item{background:var(--pg-white);border:1px solid var(--pg-border);border-radius:var(--pg-radius);box-shadow:var(--pg-shadow);overflow:hidden;transition:all var(--pg-trans)}
.pg-hist-item:hover{box-shadow:var(--pg-shadow-md);border-color:#CFE0FA}

.pg-hist-item-hdr{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background var(--pg-trans)}
.pg-hist-item-hdr:hover{background:var(--pg-bg,#fafafa)}
.pg-hi-num{flex-shrink:0;width:28px;height:28px;border-radius:8px;background:var(--pg-blue-light);color:var(--pg-blue-dark);display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800}
.pg-hi-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.pg-hi-title{font-size:14px;font-weight:700;color:var(--pg-text);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-hi-meta-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pg-hi-pill{
    display:inline-flex;align-items:center;gap:4px;
    background:var(--pg-white,#fff);border:1px solid var(--pg-border);border-radius:6px;
    padding:2px 8px;font-size:10.5px;font-weight:700;color:var(--pg-secondary);
    text-transform:uppercase;letter-spacing:.3px;line-height:1.6;white-space:nowrap;
}
.pg-hi-pill i{font-size:9.5px;color:var(--pg-blue)}
.pg-hi-pill.model{color:var(--pg-blue-dark);background:var(--pg-blue-light);border-color:#CFE0FA}
.pg-hi-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.pg-hi-del{width:28px;height:28px;border-radius:7px;background:none;border:1px solid transparent;color:var(--pg-muted);cursor:pointer;font-size:12px;transition:all var(--pg-trans);display:inline-flex;align-items:center;justify-content:center}
.pg-hi-del:hover{background:var(--pg-danger-light);color:var(--pg-danger);border-color:#CFE0FA}
/* (the old .pg-hi-chev arrow is now a real .pg-hi-open button — see
   assets/css/ai-activity-history.css) */

.pg-hist-item-body{display:none;border-top:1px solid var(--pg-border);background:var(--pg-white,#fff)}
.pg-hist-item-body.open{display:block;animation:pgFadeIn .25s ease}
.pg-hist-body-acts{display:flex;gap:6px;justify-content:flex-end;padding:10px 16px;background:var(--pg-bg,#fafafa);border-bottom:1px solid var(--pg-border)}
.pg-hist-body-acts .pg-icon-btn{width:30px;height:30px;font-size:12px}
.pg-hist-text{display:none;white-space:pre-wrap}
.pg-hist-rendered{padding:18px 22px;max-height:520px;overflow-y:auto;line-height:1.7}
@media(max-width:640px){.pg-hist-rendered{padding:16px}}
.pg-hist-rendered::-webkit-scrollbar{width:8px}
.pg-hist-rendered::-webkit-scrollbar-thumb{background:#ececec;border-radius:4px}
.pg-hist-rendered.pg-article h1{font-size:22px;margin-bottom:12px}
.pg-hist-rendered.pg-article h2{font-size:18px;margin:22px 0 10px;padding-bottom:6px}
.pg-hist-rendered.pg-article h3{font-size:15.5px;margin:18px 0 8px}
.pg-hist-rendered.pg-article p{font-size:14.5px;margin-bottom:12px}
.pg-hist-rendered.pg-article ul li,.pg-hist-rendered.pg-article ol li{font-size:14px}

.pg-hist-empty{background:var(--pg-white,#fff);border:1px dashed var(--pg-border);border-radius:var(--pg-radius);padding:32px 24px;text-align:center;color:var(--pg-secondary)}
.pg-hist-empty .empty-ico{width:60px;height:60px;border-radius:50%;background:var(--pg-blue-light);color:var(--pg-blue);display:inline-flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:12px}
.pg-hist-empty h4{font-size:15px;font-weight:700;color:var(--pg-text);margin:0 0 6px}
.pg-hist-empty p{font-size:13.5px;margin:0;line-height:1.6}
.pg-hist-empty a{color:var(--pg-blue);font-weight:600;text-decoration:none}
.pg-hist-empty a:hover{text-decoration:underline}

/* Toast */
.pg-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:#111111;color:#fff;padding:10px 22px;border-radius:50px;font-size:13.5px;font-weight:600;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:9999;white-space:nowrap;box-shadow:0 8px 30px rgba(15,23,42,.25)}
.pg-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.pg-model-dropdown::-webkit-scrollbar{width:6px}
.pg-model-dropdown::-webkit-scrollbar-thumb{background:#ddd;border-radius:3px}

/* Completely-free note (below history) */
.pg-free-note{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0 4px;padding:14px 18px;background:linear-gradient(135deg,#F4F8FE,#F4F8FE);border:1px solid var(--pg-border);border-radius:var(--pg-radius);color:var(--pg-text);font-weight:600;font-size:14px;text-align:center}
.pg-free-note i{color:#2060C0;font-size:18px;flex-shrink:0}

/* History item is now a one-click "Open result" trigger — no inline expansion */
.pg-hist-item-hdr{position:relative}

/* ─────────── Output footer (bottom of output card) ─────────── */
.pg-out-footer{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding:14px 28px;border-top:1px solid var(--pg-border);background:var(--pg-bg,#fafafa);
}
@media(max-width:640px){.pg-out-footer{padding:12px 18px}}
.pg-out-footer .foot-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.pg-out-footer .foot-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.pg-foot-badge{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--pg-white,#fff);border:1px solid var(--pg-border);border-radius:50px;
    padding:5px 13px;font-size:11.5px;font-weight:700;color:var(--pg-secondary);
    text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;
}
.pg-foot-badge i{color:var(--pg-blue);font-size:11px}
.pg-tg-btn{
    display:inline-flex;align-items:center;gap:7px;
    background:var(--pg-tg);color:#fff;border:1px solid var(--pg-tg-dark);
    border-radius:50px;padding:6px 16px;font-size:12.5px;font-weight:800;
    text-decoration:none;letter-spacing:.2px;
    box-shadow:0 3px 10px rgba(15,23,42,.24);
    transition:all var(--pg-trans);font-family:inherit;cursor:pointer;
}
.pg-tg-btn:hover{background:var(--pg-tg-dark);color:#fff;transform:translateY(-1px);box-shadow:0 5px 16px rgba(0,0,0,.42)}
.pg-tg-btn i{font-size:14px}
@media(max-width:520px){
    .pg-out-footer{flex-direction:column;align-items:stretch}
    .pg-out-footer .foot-right{justify-content:center}
    .pg-tg-btn{width:100%;justify-content:center}
}

/* ═════════════════════════════════════════════════════════════════
   DARK MODE — follows the global body.theme-dark switch.
   The shell is token-driven, so remap the --pg-* palette, then patch
   the handful of places that hard-code light colours (article body,
   tables, history rows, toolbar, notes, feature pills). Brand blue/
   orange/telegram/yellow stay; only neutrals + light fills are darkened.
═════════════════════════════════════════════════════════════════ */
body.theme-dark .pg-root{
    --pg-bg:#0F0F11;
    --pg-white:#17171A;
    --pg-border:rgba(255,255,255,.09);
    --pg-text:#F5F5F6;
    --pg-secondary:#DCDCDF;
    --pg-muted:#A0A0A6;
    --pg-blue-light:rgba(54,128,237,.16);
    --pg-success-light:rgba(54,128,237,.16);
    --pg-danger-light:rgba(54,128,237,.16);
    --pg-shadow:0 2px 12px rgba(0,0,0,.45);
    --pg-shadow-md:0 8px 26px rgba(0,0,0,.55);
}
/* Hard-coded light surfaces → dark card */
body.theme-dark .pg-dl-menu,
body.theme-dark .pg-meta-pill,
body.theme-dark .pg-kw-pill:hover,
body.theme-dark .pg-exp-btn,
body.theme-dark .pg-faq-item,
body.theme-dark .pg-faq-q,
body.theme-dark .pg-hi-pill,
body.theme-dark .pg-hist-item-body,
body.theme-dark .pg-hist-empty,
body.theme-dark .pg-foot-badge,
body.theme-dark .pg-table-wrap{ background:var(--pg-white); }
/* Subtle elevated fills (group headers, hovers, even rows, footers, edit box, icon btns) */
body.theme-dark .pg-model-group,
body.theme-dark .pg-faq-a,
body.theme-dark .pg-hist-item-hdr:hover,
body.theme-dark .pg-hist-body-acts,
body.theme-dark .pg-out-footer,
body.theme-dark .pg-out-edit,
body.theme-dark .pg-icon-btn,
body.theme-dark .mi-limit,
body.theme-dark .pg-article tbody tr:nth-child(even){ background:#1C1C1F; }
body.theme-dark .pg-dl-item:hover{ background:#18181B; }
body.theme-dark .pg-out-toolbar{ background:rgba(15,15,17,.92); }
/* Article body text on dark */
body.theme-dark .pg-article p,
body.theme-dark .pg-article em,
body.theme-dark .pg-article ul li,
body.theme-dark .pg-article ol li,
body.theme-dark .pg-article td,
body.theme-dark .pg-article blockquote{ color:#dadada; }
/* Tables / borders */
body.theme-dark .pg-article thead{ background:linear-gradient(180deg,#202020 0%,#1a1a1a 100%); }
body.theme-dark .pg-article td{ border-bottom-color:var(--pg-border); }
/* Inline code + blockquote tints */
body.theme-dark .pg-article code:not(pre code){ background:rgba(54,128,237,.16);color:#60A4F5; }
body.theme-dark .pg-article blockquote{ background:linear-gradient(135deg,#171717 0%,#141414 100%); }
/* Soften the bold "highlighter" so it isn't a yellow bar on dark */
body.theme-dark .pg-article strong{ background:linear-gradient(180deg,transparent 62%,rgba(54,128,237,.26) 62%); }
/* Blue-tinted eyebrow pill + free note */
body.theme-dark .tb-tool{ background:linear-gradient(135deg,#171717 0%,#141414 100%);border-color:var(--pg-border); }
body.theme-dark .pg-free-note{ background:linear-gradient(135deg,#161616,rgba(54,128,237,.10));border-color:var(--pg-border); }
/* Lighten medium-blue text so it reads on the dark blue tints */
body.theme-dark .pg-badge-new,
body.theme-dark .pg-kw-pill,
body.theme-dark .pg-hi-num,
body.theme-dark .pg-hist-count,
body.theme-dark .pg-hi-pill.model,
body.theme-dark .tb-tool,
body.theme-dark .pg-spoken{ color:#60A4F5; }
/* Accent borders */
body.theme-dark .pg-hist-count,
body.theme-dark .pg-hi-pill.model,
body.theme-dark .pg-kw-pill{ border-color:rgba(96,164,245,.28); }
body.theme-dark .pg-hist-item:hover{ border-color:rgba(96,164,245,.28); }
body.theme-dark .pg-hi-del:hover{ border-color:rgba(96,164,245,.28); }
/* Free chips */
body.theme-dark .pg-badge-free,
body.theme-dark .mi-limit.free{ background:rgba(54,128,237,.16);color:#60A4F5;border-color:rgba(96,164,245,.28); }
/* Writers feature pills (SEO / fact / humanized / AI-detect) */
/* Dark: the white specular is dropped from the plate — on a near-black pill it
   reads as a seam, not a highlight — and the wash is rebuilt from the glow
   token so the pill still separates from the card behind it. */
body.theme-dark .pg-feat-pill,
body.theme-dark .pg-feat-pill.seo,
body.theme-dark .pg-feat-pill.fact,
body.theme-dark .pg-feat-pill.human,
body.theme-dark .pg-feat-pill.aidetect{ background:linear-gradient(180deg,rgba(54,128,237,.2),rgba(54,128,237,.11));color:#8FBEF8;border-color:rgba(96,164,245,.3);box-shadow:0 1px 2px rgba(0,0,0,.42); }
body.theme-dark .pg-feat-pill i{ box-shadow:0 2px 8px -3px rgba(54,128,237,.95); }
@media(hover:hover) and (pointer:fine){
  body.theme-dark .pg-feat-pill:hover{ border-color:rgba(96,164,245,.5);box-shadow:0 10px 22px -12px rgba(54,128,237,.8); }
}
/* Advanced-options controls are tool-specific (dozens of class prefixes) but
   always render inside the shell's .pg-acc-body — theme them by location so
   every tool's text inputs / textareas / toggle rows go dark uniformly. */
body.theme-dark .pg-acc-body input:not([type=checkbox]):not([type=radio]),
body.theme-dark .pg-acc-body textarea,
body.theme-dark .pg-acc-body select{ background-color:#202020;border-color:var(--pg-border);color:var(--pg-text); }
body.theme-dark .pg-acc-body input::placeholder,
body.theme-dark .pg-acc-body textarea::placeholder{ color:var(--pg-muted); }
body.theme-dark .pg-acc-body [class*="toggle-group"]{ background:#202020;border-color:var(--pg-border); }
body.theme-dark .pg-acc-body [class*="toggle-group"] label{ color:var(--pg-text); }
body.theme-dark .pg-acc-body [class*="slider"]{ background:#3a3a3a; }
body.theme-dark .pg-acc-body input:checked + [class*="slider"]{ background:#3680ED; }
/* Scrollbars */
body.theme-dark .pg-hist-rendered::-webkit-scrollbar-thumb,
body.theme-dark .pg-model-dropdown::-webkit-scrollbar-thumb{ background:#3a3a3a; }