/* ========================================
   HubGit.ir — Interactive Playground
   موتور تمرین تعاملی مشترک همه صفحات آموزشی
   ======================================== */

.pg{
  --pg-primary:#88ce02;
  --pg-code:#1e2328;
  --pg-border:#e3e8ee;
  border:1px solid var(--pg-border);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
  margin:14px 0;
}

/* ── Toolbar ── */
.pg-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 14px;
  background:linear-gradient(135deg,#2c343b,#384450);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pg-bar .pg-title{color:var(--pg-primary);font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:7px}
.pg-bar .pg-spacer{flex:1}
.pg-preset{
  font-family:inherit;font-size:12.5px;font-weight:600;color:#e6edf3;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  border-radius:7px;padding:7px 12px;cursor:pointer;outline:none;
  max-width:230px;
}
.pg-preset option{color:#222}
.pg-btn{
  display:inline-flex;align-items:center;gap:5px;
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  border:none;border-radius:7px;padding:7px 14px;transition:transform .15s,background .2s,opacity .2s;
}
.pg-btn:hover{transform:translateY(-1px)}
.pg-btn.run{background:var(--pg-primary);color:#16210a}
.pg-btn.run:hover{background:#9de003}
.pg-btn.ghost{background:rgba(255,255,255,.08);color:#e6edf3;border:1px solid rgba(255,255,255,.16)}
.pg-btn.ghost:hover{background:rgba(255,255,255,.16)}

/* ── Layout ── */
.pg-grid{display:grid;grid-template-columns:1fr 1fr;min-height:340px}
@media(max-width:820px){.pg-grid{grid-template-columns:1fr}}

.pg-pane{display:flex;flex-direction:column;min-width:0}
.pg-pane.editor{border-left:1px solid var(--pg-border)}
@media(max-width:820px){.pg-pane.editor{border-left:none;border-bottom:1px solid var(--pg-border)}}

/* ── Editor tabs ── */
.pg-tabs{display:flex;gap:2px;background:#f3f6f9;border-bottom:1px solid var(--pg-border);padding:0 6px}
.pg-tab{
  font-family:inherit;font-size:12px;font-weight:700;color:#6a7682;
  background:none;border:none;cursor:pointer;padding:10px 14px;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;direction:ltr;
}
.pg-tab:hover{color:#2c343b}
.pg-tab.active{color:#2c343b;border-bottom-color:var(--pg-primary)}

/* ── Highlighted textarea editor ── */
.pg-code{position:relative;flex:1;background:var(--pg-code);overflow:hidden;min-height:300px}
.pg-code .pg-input,
.pg-code .pg-hl{
  margin:0;border:0;
  font-family:'Consolas','Monaco','Courier New',monospace;
  font-size:13px;line-height:1.7;
  padding:16px 18px;
  white-space:pre;word-wrap:normal;
  tab-size:2;-moz-tab-size:2;
  direction:ltr;text-align:left;
  letter-spacing:normal;
}
.pg-code .pg-hl{
  position:absolute;inset:0;
  overflow:auto;pointer-events:none;
  color:#abb2bf;background:transparent;
  z-index:1;
}
.pg-code .pg-hl code{font:inherit;background:none;padding:0;display:block}
.pg-code .pg-input{
  position:absolute;inset:0;
  width:100%;height:100%;resize:none;outline:none;
  overflow:auto;background:transparent;
  color:transparent;caret-color:var(--pg-primary);
  z-index:2;
}
.pg-code .pg-input::selection{background:rgba(136,206,2,.30);color:transparent}

/* ── Preview ── */
.pg-pane.preview{background:#fff}
.pg-pane .pg-phead{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;font-weight:700;color:#6a7682;
  padding:9px 14px;background:#f3f6f9;border-bottom:1px solid var(--pg-border);direction:rtl;
}
.pg-phead .dot{width:8px;height:8px;border-radius:50%;background:var(--pg-primary);box-shadow:0 0 0 3px rgba(136,206,2,.18)}
.pg-frame{flex:1;width:100%;border:0;background:#fff;min-height:220px}

/* ── Console ── */
.pg-console{
  background:#16191d;color:#cbd2d9;direction:ltr;text-align:left;
  font-family:'Consolas','Monaco',monospace;font-size:12px;line-height:1.65;
  max-height:140px;overflow:auto;border-top:1px solid #2a2f36;
}
.pg-console:empty{display:none}
.pg-console .ln{padding:3px 14px;border-bottom:1px solid rgba(255,255,255,.04);white-space:pre-wrap;word-break:break-word}
.pg-console .ln.err{color:#ff6b6b;background:rgba(255,0,0,.06)}
.pg-console .ln.warn{color:#ffd166}
.pg-console .ln.info{color:#7ec8ff}
.pg-console .ln::before{content:'›';color:#5b6573;margin-left:8px}
.pg-console .ln.err::before{content:'✕';color:#ff6b6b}