/* ================================================================
         PLAYGROUND PAGE - self-contained styles
         All selectors prefixed with .pg- to avoid site-wide conflicts.
         ================================================================ */

      /* -- Page shell ----------------------------------------------- */
      .pg-main {
        display: flex;
        flex-direction: column;
        background: #0f0f1a;
      }

      /* -- Toolbar --------------------------------------------------- */
      .pg-toolbar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 14px;
        height: 46px;
        background: #141428;
        border-bottom: 1px solid #1e1e3a;
        flex-shrink: 0;
      }

      /* Mobile tab-switcher (hidden on desktop) */
      .pg-tabs {
        display: none;
        gap: 2px;
        overflow-x: auto;
        scrollbar-width: none;
        flex: 1;
        min-width: 0;
      }
      .pg-tabs::-webkit-scrollbar { display: none; }

      .pg-tab-btn {
        padding: 4px 11px;
        font-size: 12px;
        font-weight: 600;
        color: rgba(255,255,255,0.38);
        background: transparent;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        white-space: nowrap;
        transition: color 0.15s, background 0.15s;
        flex-shrink: 0;
      }
      .pg-tab-btn:hover {
        color: rgba(255,255,255,0.75);
        background: rgba(255,255,255,0.05);
      }
      .pg-tab-btn.active {
        color: #f09a0f;
        background: rgba(240,154,15,0.1);
      }

      /* Auto-save badge */
      .pg-saved {
        font-size: 11px;
        color: rgba(255,255,255,0.6);
        white-space: nowrap;
        margin-right: 4px;
        flex-shrink: 0;
      }

      /* Action buttons row */
      .pg-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        margin-left: auto;
      }

      .pg-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 12px;
        font-size: 12.5px;
        font-weight: 600;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.16s, transform 0.1s;
        letter-spacing: 0.01em;
        line-height: 1;
      }
      .pg-btn:active { transform: scale(0.97); }

      .pg-btn-run {
        background: #f09a0f;
        color: #fff;
        padding: 5px 16px;
      }
      .pg-btn-run:hover { background: #d4870c; }

      .pg-btn-ghost {
        background: rgba(255,255,255,0.07);
        color: rgba(255,255,255,0.82);
        border: 1px solid rgba(255,255,255,0.13);
      }
      .pg-btn-ghost:hover {
        background: rgba(255,255,255,0.13);
        color: #fff;
      }

      /* -- Mobile tab <select> dropdown ---------------------------- */
      .pg-tab-select {
        display: none; /* hidden on desktop - shown via mobile media query */
      }

      /* -- Mobile scroll-to buttons (Preview / Console) ---------- */
      .pg-mob-scroll-btn {
        display: none; /* hidden on desktop */
        padding: 4px 12px;
        font-size: 12px;
        font-weight: 700;
        color: rgba(255,255,255,0.55);
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 6px;
        cursor: pointer;
        white-space: nowrap;
        transition: color 0.15s, background 0.15s;
        flex-shrink: 0;
      }
      .pg-mob-scroll-btn:hover,
      .pg-mob-scroll-btn:active {
        color: #f09a0f;
        background: rgba(240,154,15,0.1);
        border-color: rgba(240,154,15,0.3);
      }

      /* Hide button text on very narrow screens */
      @media (max-width: 560px) {
        .pg-btn-text { display: none; }
        .pg-btn { padding: 5px 9px; }
        .pg-btn-run { padding: 5px 11px; }
        .pg-saved { display: none; }
      }

      /* -- Workspace ------------------------------------------------- */
      .pg-workspace {
        display: flex;
        height: calc(100vh - 57px - 46px); /* JS measurement updates this */
        min-height: 460px;
        overflow: hidden;
      }

      /* -- Editors (left column) ------------------------------------- */
      .pg-editors {
        display: flex;
        flex-direction: column;
        width: 50%;
        min-width: 0;
        border-right: 1px solid #1e1e3a;
        overflow: hidden;
      }

      /* Single editor panel */
      .pg-panel {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        border-bottom: 1px solid #2d2d52;
        transition: flex 0.2s ease;
      }
      .pg-panel:last-child { border-bottom: none; }

      /* Language-coloured left-border accent */
      #panel-html { border-left: 2px solid rgba(227,76,38,0.55); }
      #panel-css  { border-left: 2px solid rgba(38,77,228,0.55); }
      #panel-js   { border-left: 2px solid rgba(240,160,21,0.55); }

      /* Collapsed panel: shrink to just header height */
      .pg-panel.pg-panel-collapsed {
        flex: 0 0 30px;
        overflow: hidden;
      }
      .pg-panel.pg-panel-collapsed .pg-editor-area { display: none !important; }

      /* Panel toggle button (same style as console toggle) */
      .pg-panel-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        padding: 0;
        background: rgba(255,255,255,0.07);
        color: rgba(255,255,255,0.75);
        border: 1px solid rgba(255,255,255,0.13);
        border-radius: 6px;
        cursor: pointer;
        margin-left: 3px;
        flex-shrink: 0;
        transition: background 0.18s, color 0.18s, border-color 0.18s;
      }
      .pg-panel-toggle:hover {
        background: rgba(255,255,255,0.14);
        color: rgba(255,255,255,0.9);
        border-color: rgba(255,255,255,0.22);
      }
      .pg-panel-toggle svg {
        display: block;
        stroke-linecap: round;
        stroke-linejoin: round;
        transform-origin: 50% 50%;
        transition: transform 0.2s;
      }

      /* Panel header strip */
      .pg-panel-hd {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 5px 11px;
        height: 30px;
        background: #141428;
        border-bottom: 1px solid #1e1e3a;
        flex-shrink: 0;
        user-select: none;
      }

      .pg-panel-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .pg-dot-html { background: #e34c26; }
      .pg-dot-css  { background: #264de4; }
      .pg-dot-js   { background: #f0a015; }

      .pg-panel-lang {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.75);
        flex: 1;
      }

      /* Per-panel copy button */
      .pg-pcopy {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 4px 10px;
        min-height: 26px;
        font-size: 11px;
        line-height: 1;
        font-weight: 600;
        background: rgba(255,255,255,0.07);
        color: rgba(255,255,255,0.75);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.18s, color 0.18s, border-color 0.18s;
      }
      .pg-pcopy:hover {
        background: rgba(255,255,255,0.14);
        color: rgba(255,255,255,0.9);
        border-color: rgba(255,255,255,0.22);
      }

      /* Per-panel clear button */
      .pg-pclear {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 4px 10px;
        min-height: 26px;
        font-size: 11px;
        line-height: 1;
        font-weight: 600;
        background: rgba(255,255,255,0.07);
        color: rgba(255,255,255,0.75);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.18s, color 0.18s, border-color 0.18s;
      }
      .pg-pclear:hover {
        background: rgba(255,77,79,0.15);
        color: #ff4d4f;
        border-color: rgba(255,77,79,0.3);
      }

      .pg-pcopy svg,
      .pg-pclear svg {
        display: block;
        flex-shrink: 0;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      /* Editor area: line-nums + textarea side by side */
      .pg-editor-area {
        display: flex;
        flex: 1;
        min-height: 0;
        overflow: hidden;
      }

      .pg-line-nums {
        width: 38px;
        padding: 14px 6px 14px 0;
        font-family: 'Menlo', 'Consolas', 'Monaco', monospace;
        font-size: 12.5px;
        line-height: 1.65;
        color: rgba(255,255,255,0.16);
        background: #191929;
        border-right: 1px solid rgba(255,255,255,0.04);
        text-align: right;
        overflow: hidden;
        flex-shrink: 0;
        user-select: none;
        white-space: pre;
      }

      .pg-code {
        flex: 1;
        display: block;
        width: 100%;
        height: 100%;
        padding: 14px 16px;
        font-family: 'Menlo', 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: 13px;
        line-height: 1.65;
        color: #cdd6f4;
        background: #1e1e2e;
        border: none;
        outline: none;
        resize: none;
        tab-size: 2;
        white-space: pre;
        overflow-x: auto;
        overflow-y: auto;
        box-sizing: border-box;
      }
      .pg-code:focus { background: #20203a; }

      /* Thin custom scrollbars */
      .pg-code::-webkit-scrollbar { width: 5px; height: 5px; }
      .pg-code::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
      .pg-code::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
      .pg-code::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
      .pg-code { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }

      /* -- Right column: Preview + Console -------------------------- */
      .pg-right {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
        overflow: hidden;
      }

      /* Preview iframe wrapper */
      .pg-preview-wrap {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow: hidden;
      }

      .pg-preview-hd {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 5px 11px;
        height: 30px;
        background: #141428;
        border-bottom: 1px solid #1e1e3a;
        flex-shrink: 0;
        user-select: none;
      }

      .pg-preview-hd-label {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.75);
        flex: 1;
      }

      .pg-sandbox-badge {
        font-size: 10px;
        color: rgba(255,255,255,0.55);
        display: flex;
        align-items: center;
        gap: 3px;
      }

      .pg-preview {
        flex: 1;
        width: 100%;
        border: none;
        background: #fff;
        display: block;
      }

      /* -- Console panel --------------------------------------------- */
      .pg-console {
        height: 150px;
        min-height: 30px;
        display: flex;
        flex-direction: column;
        background: #0a0a14;
        border-top: 1px solid #1e1e3a;
        transition: height 0.18s ease;
        flex-shrink: 0;
      }
      .pg-console.pg-collapsed { height: 30px; overflow: hidden; }

      .pg-console-hd {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 0 11px;
        height: 30px;
        background: #0f0f1e;
        border-bottom: 1px solid #1e1e3a;
        flex-shrink: 0;
        user-select: none;
      }

      .pg-console-title {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.75);
        flex: 1;
      }

      .pg-console-meta {
        font-size: 10.5px;
        color: rgba(255,255,255,0.5);
      }

      .pg-con-btn {
        display: inline-flex;
        align-items: center;
        padding: 1px 7px;
        font-size: 10.5px;
        font-weight: 600;
        background: rgba(255,255,255,0.07);
        color: rgba(255,255,255,0.78);
        border: 1px solid rgba(255,255,255,0.13);
        border-radius: 3px;
        cursor: pointer;
        transition: background 0.14s, color 0.14s;
      }
      .pg-con-btn:hover { background: rgba(255,255,255,0.13); color: #fff; }

      .pg-console-body {
        flex: 1;
        overflow-y: auto;
        padding: 6px 12px;
        font-family: 'Menlo', 'Consolas', 'Monaco', monospace;
        font-size: 12.5px;
        line-height: 1.6;
        min-height: 0;
      }
      .pg-console-body::-webkit-scrollbar { width: 4px; }
      .pg-console-body::-webkit-scrollbar-track { background: transparent; }
      .pg-console-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

      /* Console line types */
      .pg-con-line {
        display: flex;
        align-items: flex-start;
        gap: 7px;
        padding: 2px 0;
        border-bottom: 1px solid rgba(255,255,255,0.025);
        word-break: break-word;
      }
      .pg-con-line:last-child { border-bottom: none; }

      .pg-con-tag {
        font-size: 9.5px;
        font-weight: 700;
        padding: 2px 5px;
        border-radius: 3px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        flex-shrink: 0;
        margin-top: 1px;
      }
      .pg-lvl-log   .pg-con-tag { background: rgba(34,214,136,0.12); color: #22d688; }
      .pg-lvl-warn  .pg-con-tag { background: rgba(240,154,15,0.15);  color: #f0a015; }
      .pg-lvl-error .pg-con-tag { background: rgba(255,77,79,0.13);   color: #ff4d4f; }
      .pg-lvl-info  .pg-con-tag { background: rgba(86,179,216,0.13);  color: #56b3d8; }
      .pg-lvl-sys   .pg-con-tag { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.3); }

      .pg-con-msg { flex: 1; }
      .pg-lvl-log   .pg-con-msg { color: #22d688; }
      .pg-lvl-warn  .pg-con-msg { color: #f0a015; }
      .pg-lvl-error .pg-con-msg { color: #ff4d4f; }
      .pg-lvl-info  .pg-con-msg { color: #56b3d8; }
      .pg-lvl-sys   .pg-con-msg { color: rgba(255,255,255,0.3); }

      .pg-con-empty {
        font-style: italic;
        color: rgba(255,255,255,0.2);
        font-size: 12px;
        padding: 4px 0;
      }

      /* -- Toast notification ---------------------------------------- */
      .pg-toast {
        position: fixed;
        bottom: 22px;
        right: 22px;
        background: #252538;
        color: rgba(255,255,255,0.85);
        padding: 9px 18px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        z-index: 9999;
        box-shadow: 0 4px 20px rgba(0,0,0,0.4);
        opacity: 1;
        transition: opacity 0.35s ease;
        pointer-events: none;
      }
      .pg-toast.fade-out { opacity: 0; }

      /* -- Accessible h1 (screen-reader + SEO only) ------------------ */
      .pg-sr-only {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
      }

      /* -- Layout switcher buttons ----------------------------------- */
      .pg-layout-wrap {
        display: flex;
        align-items: center;
        gap: 3px;
        padding: 0 8px;
        border-right: 1px solid #1e1e3a;
        margin-right: 2px;
      }
      .pg-layout-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px; height: 24px;
        padding: 0;
        background: rgba(255,255,255,0.07);
        color: rgba(255,255,255,0.75);
        border: 1px solid rgba(255,255,255,0.13);
        border-radius: 5px;
        cursor: pointer;
        transition: background 0.14s, color 0.14s;
      }
      .pg-layout-btn:hover { background: rgba(255,255,255,0.13); color: #fff; }
      .pg-layout-btn.pg-layout-active {
        background: rgba(240,154,15,0.12);
        color: #f09a0f;
        border-color: rgba(240,154,15,0.3);
      }
      /* Hide layout switcher on mobile (tabs replace it) */
      @media (max-width: 767px) { .pg-layout-wrap { display: none; } }

      /* -- Layout 2: editors as row on top, preview+console below --- */
      .pg-workspace.pg-layout-2 { flex-direction: column; }
      .pg-workspace.pg-layout-2 .pg-editors {
        width: 100%;
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid #1e1e3a;
        flex: 1;
      }
      .pg-workspace.pg-layout-2 .pg-editors .pg-panel {
        border-bottom: none;
        border-right: 1px solid #2d2d52;
      }
      .pg-workspace.pg-layout-2 .pg-editors .pg-panel:last-child { border-right: none; }
      .pg-workspace.pg-layout-2 .pg-editors .pg-panel.pg-panel-collapsed {
        flex: 0 0 30px;
      }
      .pg-workspace.pg-layout-2 .pg-right {
        flex: 1;
        flex-direction: row;
      }
      .pg-workspace.pg-layout-2 .pg-right .pg-preview-wrap {
        flex: 1;
        border-right: 1px solid #1e1e3a;
      }
      .pg-workspace.pg-layout-2 .pg-right .pg-console {
        width: 240px;
        flex-shrink: 0;
        height: auto;
        border-top: none;
        border-left: 1px solid #1e1e3a;
      }
      .pg-workspace.pg-layout-2 .pg-right .pg-console.pg-collapsed { width: 30px; overflow: hidden; }

      /* -- Layout 3: preview left, editors right ---------------------- */
      .pg-workspace.pg-layout-3 { flex-direction: row-reverse; }

      /* -- Resizer handles ------------------------------------------- */
      .pg-resizer {
        flex-shrink: 0;
        position: relative;
        z-index: 10;
        background: transparent;
        transition: background 0.15s;
        user-select: none;
      }
      .pg-resizer:hover,
      .pg-resizer.pg-resizing {
        background: rgba(240,154,15,0.3);
      }
      .pg-resizer::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 2px;
        background: rgba(255,255,255,0.12);
        transition: background 0.15s;
      }
      .pg-resizer:hover::after,
      .pg-resizer.pg-resizing::after {
        background: rgba(240,154,15,0.6);
      }
      /* Main divider (between editors & preview) - default vertical */
      .pg-resizer-main {
        width: 5px;
        cursor: col-resize;
      }
      .pg-resizer-main::after {
        width: 3px;
        height: 30px;
      }
      /* Editor panel dividers - default horizontal */
      .pg-resizer-editor {
        height: 4px;
        cursor: row-resize;
      }
      .pg-resizer-editor::after {
        width: 30px;
        height: 2px;
      }
      /* Console divider - default horizontal */
      .pg-resizer-console {
        height: 4px;
        cursor: row-resize;
      }
      .pg-resizer-console::after {
        width: 30px;
        height: 2px;
      }
      /* Layout 2: swap orientations */
      .pg-workspace.pg-layout-2 > .pg-resizer-main {
        width: auto;
        height: 5px;
        cursor: row-resize;
      }
      .pg-workspace.pg-layout-2 > .pg-resizer-main::after {
        width: 30px;
        height: 3px;
      }
      .pg-workspace.pg-layout-2 .pg-resizer-editor {
        width: 4px;
        height: auto;
        cursor: col-resize;
      }
      .pg-workspace.pg-layout-2 .pg-resizer-editor::after {
        width: 2px;
        height: 30px;
      }
      .pg-workspace.pg-layout-2 .pg-resizer-console {
        width: 4px;
        height: auto;
        cursor: col-resize;
      }
      .pg-workspace.pg-layout-2 .pg-resizer-console::after {
        width: 2px;
        height: 30px;
      }

      /* -- Desktop: all panels always visible ------------------------ */
      @media (min-width: 768px) {
        .pg-panel        { display: flex !important; }
        .pg-preview-wrap { display: flex !important; }
        .pg-console      { display: flex !important; height: 150px; }
        .pg-console.pg-collapsed { height: 30px; }
      }

      /* -- Mobile layout (< 768px) - vertical scroll -------------- */
      @media (max-width: 767px) {
        .pg-workspace {
          flex-direction: column;
          height: auto;
          min-height: 0;
          overflow: visible;
        }

        /* Toolbar: two rows on mobile - tabs on top, actions beneath */
        .pg-toolbar {
          height: auto;
          flex-wrap: wrap;
          padding: 7px 12px;
          gap: 4px 6px;
        }

        /* Row 1: scrollable pill tabs (HTML / CSS / JS / Preview / Console) */
        .pg-tabs {
          display: flex !important;
          order: 1;
          flex: 0 0 100%;
          overflow-x: auto;
          scrollbar-width: none;
          gap: 2px;
          padding: 0;
        }
        .pg-tabs::-webkit-scrollbar { display: none; }

        /* Row 2: action buttons pushed right */
        .pg-actions {
          order: 2;
          margin-left: auto;
        }

        /* Hide auto-save badge (no room on mobile) */
        .pg-saved { display: none; }

        /* Hide the old <select> dropdown and scroll-to buttons */
        .pg-tab-select,
        .pg-mob-scroll-btn { display: none !important; }

        /* Hide resizers on mobile */
        .pg-resizer { display: none; }

        /* -- All sections flow vertically ---------------- */
        .pg-editors {
          width: 100%;
          border-right: none;
          border-bottom: 1px solid #1e1e3a;
          height: auto;
        }

        .pg-right {
          flex-direction: column;
          height: auto;
          overflow: visible;
        }

        /* Only the active editor panel is visible */
        .pg-panel { display: none; }
        .pg-panel.pg-active {
          display: flex;
          flex-direction: column;
          height: 50vh;
          min-height: 200px;
        }
        .pg-panel.pg-active .pg-editor-area {
          height: calc(50vh - 30px); /* panel height minus header */
          flex: none;
        }
        .pg-panel.pg-active .pg-code {
          height: calc(50vh - 30px) !important;
        }
        .pg-panel.pg-active .pg-line-nums {
          height: calc(50vh - 30px);
          overflow-y: hidden;
        }

        /* Collapsed active panel: no blank space on mobile (fix 3) */
        .pg-panel.pg-active.pg-panel-collapsed {
          height: 30px !important;
          min-height: 30px !important;
        }

        /* Preview is always visible below editor */
        .pg-preview-wrap {
          display: flex !important;
          height: 50vh;
          min-height: 250px;
        }

        /* Console is always visible below preview */
        .pg-console {
          display: flex !important;
          height: auto;
          min-height: 180px;
        }
        .pg-console.pg-collapsed {
          height: 30px !important;
          min-height: 30px !important;
          overflow: hidden !important;
        }
        .pg-console-body {
          min-height: 120px;
        }
      }