/* Front styles (namespaced) */
.ptbep{max-width:1000px;margin:0 auto;padding:16px}
.ptbep-card{background:#fff;border:1px solid #eee;border-radius:10px;padding:16px;margin:12px 0;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.ptbep-title{margin:0 0 12px}
.ptbep-grid{display:flex;gap:16px;flex-wrap:wrap}
.ptbep-col{flex:1 1 320px;min-width:280px}
.ptbep-inline{margin-right:12px}
.ptbep-btn{background:#000;color:#fff;padding:10px 18px;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .2s ease}
.ptbep-btn:hover{background:#222}
.ptbep-helper{color:#555;font-size:13px;margin-top:8px}
.ptbep-author{color:#888;font-size:13px;text-align:right}
.ptbep-badge{display:inline-block;background:#f5f5f5;border:1px solid #eee;border-radius:999px;padding:3px 8px;margin:2px 4px 0 0;font-size:12px}
.ptbep-acc summary{cursor:pointer}
.ptbep-acc-body{margin-top:8px}
.ptbep-note{font-size:12px;color:#666}
.ptbep-color-swatch{display:inline-block;width:22px;height:22px;margin:0 3px;border:1px solid #ccc;border-radius:4px}

/* Priority gradient chips */
.ptbep-pri-wrap{display:flex;flex-wrap:wrap;gap:8px}
.ptbep-pri{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid #eee}
.ptbep-pri em{font-size:12px;opacity:.85}
.ptbep-pri-1{background:linear-gradient(90deg, #e8fbe9, #c9f4ce)}
.ptbep-pri-2{background:linear-gradient(90deg, #eefbf0, #daf7e0)}
.ptbep-pri-3{background:linear-gradient(90deg, #f5fdf6, #e7faec)}
.ptbep-pri-4{background:linear-gradient(90deg, #f9fef9, #effbf4)}

/* Bad list */
.ptbep-bad-wrap{display:flex;flex-direction:column;gap:6px}
.ptbep-bad-item{display:block;background:#ffe2e2;border:1px solid #f1caca;padding:8px 10px;border-radius:8px}

/* Direction cards grid */
.ptbep-dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.ptbep-dir-card{background:#fff;border:1px solid #eee;border-radius:10px;padding:12px}
.ptbep-dir-head{margin-bottom:6px}
.ptbep-dir-explain{font-size:13px;color:#444}

/* Lists */
.ptbep-list{padding-left:18px}
.ptbep-list li{margin:6px 0}

@media (max-width: 768px){
  .ptbep{padding:12px}
}