:root{
  --ppe-ink:#0b1220;
  --ppe-muted:#6b7280;
  --ppe-bd:#e5e7eb;
  --ppe-bg:#ffffff;
  --ppe-soft:#f8fafc;
  --ppe-brand:#0ea5e9;
  --ppe-ring: rgba(14,165,233,.28);
  --ppe-shadow: 0 12px 32px rgba(2,6,23,.08);
}

@media (prefers-color-scheme: dark){
  :root{
    --ppe-ink:#e5e7eb;
    --ppe-muted:#9ca3af;
    --ppe-bd:#374151;
    --ppe-bg:#0b1220;
    --ppe-soft:#0f172a;
    --ppe-brand:#38bdf8;
    --ppe-ring: rgba(56,189,248,.35);
    --ppe-shadow: 0 12px 32px rgba(0,0,0,.45);
  }
}

.ppe-card{
  background: linear-gradient(180deg, var(--ppe-soft), var(--ppe-bg));
  border: 1px solid var(--ppe-bd);
  border-radius: 18px;
  box-shadow: var(--ppe-shadow);
  overflow: hidden;
  margin: 1.25rem 0;
}

.ppe-head{
  display:flex; justify-content:space-between; align-items:center; gap:.75rem;
  padding: .9rem 1rem;
  background: linear-gradient(90deg, rgba(14,165,233,.08), transparent);
  border-bottom:1px solid var(--ppe-bd);
}

.ppe-title{ font-weight:700; color:var(--ppe-ink); letter-spacing:.2px; }
.ppe-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

.ppe-btn{
  appearance:none; border:0; border-radius:999px; padding:.45rem .85rem;
  background:var(--ppe-brand); color:#fff; text-decoration:none; font-weight:700;
  box-shadow: 0 2px 8px var(--ppe-ring);
}
.ppe-btn:hover{ filter:brightness(1.05); }

.ppe-outline{
  background:transparent; color:var(--ppe-ink); border:1px solid var(--ppe-bd); box-shadow:none;
}
.ppe-outline:hover{ background:rgba(14,165,233,.08); }

.ppe-ghost{
  background:transparent; color:var(--ppe-ink);
  border:1px dashed var(--ppe-bd); box-shadow:none;
}
.ppe-ghost:hover{ background:rgba(14,165,233,.08); }

.ppe-view{ position:relative; background:var(--ppe-bg); }
.ppe-frame{ width:100%; border:0; display:block; outline:none; }
.ppe-frame:focus{ box-shadow:0 0 0 4px var(--ppe-ring); }

.ppe-foot{
  display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:center;
  border-top:1px solid var(--ppe-bd);
  padding:.6rem 1rem; color:var(--ppe-muted); font-size:.9rem;
}

.ppe-warnlist{ margin:0; padding-left:1.1rem; }
.ppe-warnlist li{ margin:.1rem 0; }

.ppe-meta{ margin-left:auto; }

@media (max-width: 540px){
  .ppe-frame{ height: 72vh !important; }
  .ppe-meta{ width:100%; margin-left:0; }
}