.jp-card, .jp-card *{font-family:-apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Open Sans",sans-serif !important}
.jp-card{--bg:#ffffff;--fg:#0f172a;--muted:#64748b;--bd:#e5e7eb;--ring:#9ca3af;--br:18px;background:var(--bg);color:var(--fg);border:1px solid var(--bd);border-radius:var(--br);padding:22px;max-width:820px;margin:24px auto;box-shadow:0 8px 30px rgba(15,23,42,0.06)}
.jp-head{display:flex;justify-content:center;align-items:center;margin-bottom:16px}
.jp-tabs{display:inline-flex;border:1px solid var(--bd);border-radius:999px;overflow:hidden;background:#f7f7f8}
.jp-tabs button{padding:12px 18px;border:0;background:transparent;color:#334155;cursor:pointer;font-weight:700}
.jp-tabs button[aria-pressed="true"]{background:#0f172a;color:#fff}
.jp-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.jp-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px;border:1px solid var(--bd);border-radius:16px;background:#f8fafc;color:#0f172a;cursor:pointer;font-weight:800;transition:transform .08s ease, box-shadow .12s ease, background .12s ease,border-color .12s ease}
.jp-btn.generate{grid-column:1/-1;background:#0f172a;color:#fff;border-color:#0f172a}
.jp-btn:hover{border-color:#d1d5db;background:#f3f4f6}
.jp-btn.generate:hover{transform:translateY(-1px); box-shadow:0 6px 20px rgba(15,23,42,.18); background:#0b1220; border-color:#0b1220}
.jp-btn .txt-done{display:none}.jp-btn.is-done .txt-main{display:none}.jp-btn.is-done .txt-done{display:inline}
@media(max-width:640px){.jp-actions .jp-btn:not(.generate){flex-direction:column}.jp-actions .jp-btn:not(.generate) .jp-ico{margin-bottom:4px}}

/* Output field */
.jp-card .jp-output{transition:box-shadow .2s ease, transform .12s ease}
.jp-card .jp-output input{
  width:100% !important;padding:26px 22px !important;border:1.5px solid var(--bd) !important;border-radius:28px !important;
  background:linear-gradient(180deg,#ffffff 0%,#f9fafb 100%) !important;color:#0f172a !important;font-size:30px !important;line-height:1.3 !important;letter-spacing:.02em !important;box-shadow:0 2px 8px rgba(15,23,42,.06) !important
}
@media(max-width:640px){.jp-card .jp-output input{font-size:clamp(16px,3.9vw,18px) !important;padding:22px 16px !important;border-radius:24px !important}}
@keyframes jpPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}100%{box-shadow:0 0 0 14px rgba(34,197,94,0)}}.pulse{animation:jpPulse .45s ease-out}

/* Strength */
.jp-badge{font-size:12px;border:1px solid var(--bd);background:#f8fafc;padding:8px 12px;border-radius:999px;color:#475569;display:inline-block;margin:12px auto 8px;position:relative;left:50%;transform:translateX(-50%)}
.jp-meter{height:14px;border-radius:999px;overflow:hidden;border:1px solid var(--bd);background:#eef2f7;margin-bottom:14px}
.jp-meter>div{height:100%;width:0%;transition:width .25s ease;border-radius:999px;background:linear-gradient(90deg,#ef4444 0%,#f97316 25%,#f59e0b 45%,#84cc16 70%,#22c55e 100%)}

/* Sections */
.jp-acc{margin-top:18px;border-top:1px dashed var(--bd)}
details.jp-sec{padding:12px 0}
details.jp-sec summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:800}
details.jp-sec summary .chev{display:inline-flex;transition:transform .2s ease}
details.jp-sec[open] summary .chev{transform:rotate(180deg)}
details.jp-sec summary::-webkit-details-marker{display:none}

.jp-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.jp-col{flex:1;min-width: 3px}
select.jp-select{padding:12px;border:1px solid var(--bd);border-radius:12px;background:#fff;color:#0f172a;width:100%}

/* Advanced grid & tooltips */
.jp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:10px}
@media(max-width:640px){.jp-grid{grid-template-columns:1fr}}
.jp-field{display:flex;align-items:center;gap:8px}
.jp-title{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-weight:500 !important;font-size:1rem;color:#0f172a}
.jp-check{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:500 !important}
.jp-check input{margin:0 6px 0 0}
.jp-check .jp-info{margin-left:4px}
.jp-info{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;border:1px solid var(--bd);color:#334155;background:#ffffff;font-size:12px;font-weight:700;cursor:default;position:relative;flex:0 0 auto}
.jp-info:hover .jp-tip{opacity:1;transform:translateY(-2px);pointer-events:auto}
.jp-tip{position:absolute;left:50%;transform:translate(-50%,0);bottom:125%;min-width: 3px;max-width:300px;background:#0f172a;color:#fff;padding:8px 10px;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:.16s ease;font-size:12px;line-height:1.3;z-index:20}
.jp-tip:after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);border:6px solid transparent;border-top-color:#0f172a}

/* Labels + hint harmonized */
.jp-card label{font-size:16px;color:var(--fg);font-weight:600}
.jp-hint{font-size:16px !important;font-weight:600 !important;letter-spacing:.02em !important;color:var(--fg) !important;opacity:.85;margin:6px 0 2px !important;font-family:inherit !important}

/* History */
.jp-history{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.jp-chip{border:1.5px solid var(--bd);padding:12px 14px;border-radius:14px;background:#f8fafc;cursor:pointer;color:#0f172a;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jp-chip.copied{background:#e5f9ed;color:#065f46;border-color:#a7f3d0}

/* Footer */
.jp-foot{margin-top:18px;text-align:center;color:#64748b;font-size:13px}

/* Base vertical rhythm and full-width alignment */
.jp-card{--gap:10px}
.jp-head{margin-bottom:var(--gap)}
.jp-btn.generate{margin:var(--gap) 0}
.jp-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:stretch;width:100%;margin:0 0 calc(var(--gap) * 1.5) 0;padding-bottom:8px}
.jp-actions .jp-btn{width:100%}
.jp-output{margin:var(--gap) 0}
.jp-badge{margin:var(--gap) auto}
.jp-meter{margin:var(--gap) 0}
.jp-sec{margin-top:var(--gap)}

/* Controls full width to match output */
.jp-head .jp-tabs,
.jp-btn.generate,
.jp-actions{width:100%}

/* Mobile tweaks: keep 2 columns and slightly larger spacing below actions for breathing room */
@media (max-width: 768px){
  .jp-actions{grid-template-columns:1fr 1fr;margin-bottom:calc(var(--gap) * 1.25)}
}

/* Ensure pill buttons are centered */
.jp-tabs button{display:flex;align-items:center;justify-content:center;padding:12px 20px;border:0;background:transparent;color:#334155;cursor:pointer;font-weight:700;margin:0;flex:1;line-height:1}
.jp-tabs button[aria-pressed="true"]{background:#0f172a;color:#fff}


/* extracted wp_head css */
.jp-card .jp-output, .jp-card .jp-output::before, .jp-card .jp-output::after{ box-shadow:none !important; outline:none !important; }
.jp-card .jp-output{
  position:relative; box-sizing:border-box; contain:paint;
  border-radius:9999px; border:1px solid rgba(15,23,42,.16);
  background:#fff; background-clip:padding-box; text-align:center;
}
.jp-card .jp-output input{ position:relative; z-index:1; width:100%; background:transparent !important; border:0 !important; text-align:center; border-radius:9999px; }
.jp-card .jp-output .jp-text, .jp-card .jp-output .jp-value{ display:block; text-align:center; position:relative; z-index:1; }
.pulse{ animation:none !important; } @keyframes jpPulse{ 0%{box-shadow:none} 100%{box-shadow:none} }
.jp-card .jp-output.pulse{ border-color:transparent !important; box-shadow:none !important; background-clip:padding-box !important; overflow:hidden; }
.jp-card .jp-output::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; padding:2px;
  background: conic-gradient(from 0deg,
    rgba(168,85,247,.8) 0%, rgba(239,68,68,.8) 14%, rgba(245,158,11,.8) 28%,
    rgba(16,185,129,.8) 48%, rgba(59,130,246,.8) 68%, rgba(139,92,246,.8) 84%,
    rgba(236,72,153,.8) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  will-change: opacity; backface-visibility:hidden; transform:translateZ(0);
  transition: opacity 2.6s ease-out;
}
.jp-card .jp-output.pulse::before{ opacity:1; transition: opacity .20s ease-out; }
@media (max-width:640px){ .jp-card .jp-output{ padding:10px; } }

@media (max-width: 680px){
  /* --- Pill: eliminate inner double look --- */
  .jp-card .jp-output,
  .jp-card .jp-output::before,
  .jp-card .jp-output::after{ box-shadow:none !important; outline:none !important; }
  .jp-card .jp-output{
    padding:12px !important; border-radius:9999px !important;
    border:1px solid rgba(15,23,42,.16) !important;
    background:#fff !important; background-clip:padding-box !important;
    text-align:center !important; overflow:hidden !important;
  }
  /* kill any inner backgrounds/shadows that create an inner pill */
  .jp-card .jp-output > *,
  .jp-card .jp-output > *::before,
  .jp-card .jp-output > *::after{ background:transparent !important; box-shadow:none !important; }
  .jp-card .jp-output input,
  .jp-card .jp-output .jp-text,
  .jp-card .jp-output .jp-value{ width:100% !important; text-align:center !important; background:transparent !important; }
  .jp-card .jp-output.pulse{ border-color:transparent !important; box-shadow:none !important; }

  /* --- History actions: robust grid with !important --- */
  .jp-card .jp-history-actions,
  .jp-card [data-jp-history-actions]{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-areas: "copy clear" "export export" !important;
    gap:12px !important;
  }
  /* Force areas by order: 1=copy, 2=export, 3=clear */
  .jp-card .jp-history-actions > *:nth-child(1),
  .jp-card [data-jp-history-actions] > *:nth-child(1){ grid-area:copy !important; }
  .jp-card .jp-history-actions > *:nth-child(2),
  .jp-card [data-jp-history-actions] > *:nth-child(2){ grid-area:export !important; }
  .jp-card .jp-history-actions > *:nth-child(3),
  .jp-card [data-jp-history-actions] > *:nth-child(3){ grid-area:clear !important; }

  /* Make buttons fill their cells */
  .jp-card .jp-history-actions > *,
  .jp-card [data-jp-history-actions] > *{ width:100% !important; }
  .jp-card .jp-history-actions > * .jp-btn,
  .jp-card [data-jp-history-actions] > * .jp-btn,
  .jp-card .jp-history-actions > .jp-btn,
  .jp-card [data-jp-history-actions] > .jp-btn{ width:100% !important; }
}

@media (max-width: 680px){
  html body .jp-card .jp-output{
    position:relative !important; isolation:isolate !important; z-index:0 !important;
    border:1px solid rgba(15,23,42,.16) !important; background:#fff !important;
    background-image:none !important; background-clip:padding-box !important; box-shadow:none !important;
    overflow:hidden !important; text-align:center !important;
  }
  html body .jp-card .jp-output *,
  html body .jp-card .jp-output *::before,
  html body .jp-card .jp-output *::after{
    background:transparent !important; background-image:none !important; box-shadow:none !important;
    outline:0 !important; border:0 !important; filter:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  html body .jp-card .jp-output > *{ border-radius:inherit !important; position:relative !important; z-index:1 !important; }
  html body .jp-card .jp-output input,
  html body .jp-card .jp-output .jp-text,
  html body .jp-card .jp-output .jp-value{ width:100% !important; text-align:center !important; background:transparent !important; }
  html body .jp-card .jp-output::before{ z-index:0 !important; pointer-events:none !important; }
  html body .jp-card .jp-output::after{ content:none !important; display:none !important; }
  html body .jp-card .jp-output.pulse{ border-color:transparent !important; }
}