*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#0f172a;color:#e6eef8}
.pg-app{max-width:1200px;margin:18px auto;background:linear-gradient(180deg,#071029 0%, #071a2a 100%);border-radius:10px;padding:14px;box-shadow:0 10px 30px rgba(2,6,23,0.6);min-height:calc(100vh - 36px);display:flex;flex-direction:column}
.pg-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;flex:0 0 auto}
.pg-header .title{font-weight:700;font-size:18px}
.pg-actions{display:flex;align-items:center;gap:8px}
.pg-actions select{background:#0b1220;color:#cfe8ff;border:1px solid rgba(255,255,255,0.04);padding:6px 10px;border-radius:6px;cursor:pointer;appearance:none;-webkit-appearance:none}
.pg-actions select:focus{outline:2px solid rgba(6,182,212,0.18);box-shadow:0 0 0 3px rgba(6,182,212,0.06)}
.btn{background:#0b1220;color:#cfe8ff;border:1px solid rgba(255,255,255,0.04);padding:6px 10px;border-radius:6px;cursor:pointer}
.btn-primary{background:#06b6d4;color:#042c33}
.btn-danger{background:#ef4444;color:#fff}
.pg-main{display:flex;gap:12px;padding:12px;flex:1 1 auto;min-height:360px}
.editors{width:680px;background:#071224;border-radius:8px;padding:8px;display:flex;flex-direction:column;flex:0 0 680px}
.tabs{display:flex;gap:8px;margin-bottom:8px}
.tab{background:transparent;border:none;color:#9fb6d1;padding:6px 10px;border-radius:6px;cursor:pointer}
.tab.active{background:#05263a;color:#fff}
.editor-area{flex:1;border:1px solid rgba(255,255,255,0.03);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.editor-panel{display:none;height:100%;flex:1 1 auto}
.editor-panel.active{display:block}
.editor-panel textarea{width:100%;height:100%;padding:12px;border:0;background:#071022;color:#cfe8ff;font-family:monospace}
.editor-footer{display:flex;align-items:center;padding-top:8px}
.editor-footer #status{color:#9fb6d1}
.editor-footer .spacer{flex:1}
.preview{flex:1;display:flex;flex-direction:column;min-width:320px}
.preview-top{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;gap:8px}
.preview-title{font-weight:700}
.preview-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.preview-controls input{min-width:120px;max-width:40%}
.preview-controls .btn{flex:0 0 auto}
#preview-iframe{flex:1;border-radius:8px;border:1px solid rgba(255,255,255,0.04);height:100%;background:#fff}
.debug-console{background:#071022;color:#b9f1ff;padding:8px;border-radius:6px;margin-top:10px;max-height:160px;overflow:auto}
.debug-logs div{font-family:monospace;font-size:12px;padding:4px}
.pg-footer{padding:8px;text-align:center;color:#9fb6d1}

/* Footer styling for the standalone playground page */
.pg-app footer{padding:12px 0;text-align:center;color:#9fb6d1;margin-top:18px}
.pg-app footer a{color:#9fb6d1;margin:0 8px;text-decoration:none}
.pg-app .container{max-width:1120px;margin:0 auto;padding:0 16px}

@media(max-width:980px){
	.pg-main{flex-direction:column}
 	.editors{width:100%;flex:0 0 auto}
 	#preview-iframe{height:360px}
 	/* Keep preview controls on multiple lines and ensure buttons remain clickable */
 	.preview-top{align-items:flex-start}
 	.preview-controls input{min-width:100px;max-width:60%}
 	.preview-controls .btn{padding:6px 8px}
}