:root{
  --bg:#0f1220; --card:#101426; --muted:#9aa3c1; --accent:#78a7ff; --ink:#ecf0ff;
  --ok:#67d08b; --warn:#ffbd59;
}
*{box-sizing:border-box}
.fpo-wrap{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial; color:var(--ink); background:
  radial-gradient(800px 500px at 90% -10%, #142043 0, var(--bg) 40%),
  linear-gradient(180deg,#0b0e18,#0f1220); padding-bottom:30px}
.fpo-header{padding:26px 18px;text-align:center}
.fpo-header h1{margin:0;font-size:1.6rem}
.fpo-header h2{margin:6px 0 0;color:var(--muted);font-size:1.1rem}

.fpo-grid{max-width:1100px;margin:18px auto;padding:0 16px;display:grid;gap:14px}
@media(min-width:980px){.fpo-grid{grid-template-columns:1fr 1fr}}

.fpo-card{background:linear-gradient(180deg,#0b1228,#0c1126);border:1px solid rgba(255,255,255,.03);
  border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.fpo-card-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px dashed rgba(255,255,255,.03)}
.fpo-card-head h2{margin:0;font-size:1rem;color:#d7e0ff}
.fpo-textarea{width:100%;min-height:240px;padding:14px;border:0;background:#071025;color:var(--ink);resize:vertical;font-size:15px;line-height:1.6}
.fpo-output{width:100%;min-height:240px;padding:14px;background:#071025;border:0;color:var(--ink);white-space:pre-wrap}
.fpo-toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;border-top:1px dashed rgba(255,255,255,.03);align-items:center}
.fpo-btn{background:linear-gradient(180deg,#2a3573,#1b2552);border:1px solid rgba(255,255,255,.05);padding:9px 12px;border-radius:10px;color:var(--ink);cursor:pointer;font-weight:700}
.fpo-btn.secondary{background:linear-gradient(180deg,#12172b,#0f1220)}
.fpo-opt{color:var(--muted);display:inline-flex;align-items:center;gap:8px;font-size:14px}
.fpo-meta{padding:8px 14px;color:var(--muted);font-size:13px}
mark.change{background:#123a2f;color:#bffdde;padding:0 2px;border-radius:3px}
.fpo-variants{display:grid;gap:10px;padding:12px 14px}
@media(min-width:720px){.fpo-variants{grid-template-columns:1fr 1fr}}
.fpo-variant{background:#061025;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.03)}
.fpo-variant header{display:flex;justify-content:space-between;align-items:center}
.fpo-mini{color:var(--muted);font-size:13px}
.fpo-footer{padding:18px;text-align:center;color:var(--muted);font-size:13px}
.fpo-status{padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.02);color:var(--muted);font-size:13px}
.fpo-seo-footer{max-width:1100px;margin:0 auto;padding:12px 18px;color:#c8d2ff}