/* Basic frontend styles following the requested palette and responsive columns */
.pp-container{background:#c4c4c4;padding:24px;border-radius:8px;max-width:1200px;;color:#1a1a1a;font-family:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
.pp-controls{display:flex;flex-wrap:wrap}
.pp-left{flex:1 1 500px;min-width:320px;background:transparent;padding-right:24px;gap:16px}
.pp-right{width:500px;flex:0 0 500px}
.pp-left label, .pp-right label{display:block;margin-bottom:8px;font-size:24px;color:#333; gap:16px;}
.pp-left textarea, .pp-line-text{width:100%;background:#fff;border:1px solid #ddd;padding:4px;border-radius:8px;color:#1f1f1f;resize:vertical}
.pp-left input[type=number]{width:56px;height:44px;padding:8px;border-radius:16px;border:2px solid #ddd;background:#fff;font-size:36px;align-items:center;margin-bottom:16px}
.pp-quicklist{display:flex;flex-direction:column;padding-bottom:4px}
.pp-quick-group{margin-bottom:16px}
.pp-quick-title{font-weight:600;color:#333;margin-bottom:4px;padding-top:16px}
.pp-quick-items{display:flex;flex-wrap:wrap;padding-bottom:16px}
.pp-quick{background:#cfcfcf;border:1px solid #d4d4d4;padding:6px 8px;border-radius:999px;cursor:pointer}
.pp-results{background:transparent;margin:16px}
.pp-results-header{display:flex;justify-content:flex-start;align-items:center;margin-bottom:16px}
.pp-counts{font-size:24px;color:black;margin-bottom:16px}
.pp-results-actions{display:flex;justify-content:flex-end;padding-bottom:16px;margin-bottom:16px;padding-right;24px;gap:16px}
.pp-list{background:#fff;padding:16px;border-radius:8px;border:1px solid #e6e6e6}
.pp-line{display:flex;padding-bottom:16px;align-items:flex-start;padding:16px 0;border-bottom:1px dashed #000}
.pp-line:last-child{border-bottom:none}
.pp-line-left{width:48px;display:flex;flex-direction:column;align-items:center;padding-bottom:16px;gap:8px}
.pp-line-count{background:black;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:white}
.pp-line-text{flex:1;height:56px;padding:8px;border-radius:8px}
.pp-line-meta{width:80px;display:flex;flex-direction:column;align-items:flex-end;padding-bottom:16px}
.pp-copy-small{padding:6px 8px;border-radius:8px;border:1px solid #ddd;background:#fafafa;cursor:pointer}
.pp-results-header .pp-system{font-size:16px;color:#555;margin-bottom:8px}
.pp-results-footer{margin-top:16px;font-size:16px;color:#444; }
.pp-generate.button{background: linear-gradient(45deg, #0080ff, #00e0d0);color: white;padding: 12px 24px;border-radius: 12px;border: none;cursor: pointer;font-weight: 800;transition: transform 0.2s ease, opacity 0.2s ease}
.pp-generate:hover {transform: scale(1.25); opacity: 0.9;}
.pp-generate:active {transform: scale(0.78);}


/* chips for templates when user adds them (future enhancement) */
.pp-chips{display:flex;flex-wrap:wrap;gap:8px}
.pp-chip{background:#fff;border:1px solid #dcdcdc;padding:4px 4px;border-radius:999px;display:flex;align-items:center;gap:8px}
.pp-chip .icon{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid #ddd}

/* frontend keyword chips */
.pp-keywords-section{margin-top:4px}
#pp-keyword-chips{display:flex;flex-wrap:wrap;gap:8px;}
#pp-keyword-selected{display:flex;flex-wrap:wrap;gap:8px}
.pp-chip.keyword{cursor:pointer}
.pp-chip.keyword .icon{width:24px;height:24px;background:black;color:white}
.pp-chip.selected{background:white;border-color:green;border:1px solid green;padding-left:16px}
.pp-keyword-selected-wrap label{display:block;padding-top:16px;font-size:16px;color:#ccc}


@media (max-width:800px){
.pp-right{width:100%;flex:1 1 100%}
.pp-left{flex:1 1 100%}
}