/*
 * Copyright (c) 2026 CSP Foundation
 * SPDX-License-Identifier: MIT
 */

:root { --play-ink:#18212a; --play-muted:#667783; --play-line:#cad6de; --play-soft:#f3f6f8; --play-blue:#1793d1; --play-dark:#111820; }
.playground-page { width:min(calc(100% - 32px),1440px); margin:0 auto; padding:30px 0 70px; }
.playground-intro { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:22px; }
.playground-intro h1 { margin:3px 0 5px; font-size:clamp(30px,4vw,48px); letter-spacing:-.04em; }
.playground-intro p { max-width:720px; margin:0; color:var(--play-muted); }
.compiler-status { max-width:560px; padding:10px 13px; color:var(--play-muted); background:var(--play-soft); border:1px solid var(--play-line); border-radius:6px; font:12px/1.5 Consolas,monospace; text-align:right; }
.compiler-status[data-kind="success"] { color:#186a45; border-color:#9bcdb4; }.compiler-status[data-kind="error"] { color:#a12727; border-color:#e1a8a8; }
.playground-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px; background:#e9eef1; border:1px solid var(--play-line); border-bottom:0; border-radius:7px 7px 0 0; }
.playground-toolbar select,.playground-toolbar button { min-height:38px; padding:0 13px; border:1px solid #aebdc7; border-radius:5px; background:#fff; color:var(--play-ink); font-weight:700; }
.playground-toolbar button { cursor:pointer; }.playground-toolbar button:disabled { cursor:not-allowed; opacity:.55; }
.playground-toolbar .run { color:#fff; background:var(--play-blue); border-color:#087bb5; }.playground-toolbar .stop { color:#a32727; }.playground-toolbar .clear { margin-left:auto; }
.playground-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); min-height:620px; border:1px solid var(--play-line); background:#fff; box-shadow:0 16px 42px rgba(28,47,61,.1); }
.editor-pane,.results-pane { min-width:0; display:flex; flex-direction:column; }
.editor-pane { border-right:1px solid var(--play-line); background:#111820; }
.pane-title { display:flex; justify-content:space-between; align-items:center; min-height:40px; padding:0 13px; color:#c9d4da; background:#202a32; border-bottom:1px solid #34414a; font:12px Consolas,monospace; }
.pane-title span { color:#7fd0f5; }
#playground-source { flex:1; width:100%; min-height:580px; padding:18px; resize:none; color:#e9f0f4; background:#111820; border:0; outline:0; tab-size:4; font:14px/1.65 Consolas,"Courier New",monospace; caret-color:#fff; }
.result-tabs { display:flex; min-height:41px; background:#202a32; border-bottom:1px solid #34414a; }
.result-tabs button { padding:0 14px; color:#bfcbd2; background:transparent; border:0; border-right:1px solid #34414a; cursor:pointer; font-size:11px; font-weight:800; text-transform:uppercase; }
.result-tabs button[aria-selected="true"] { color:#fff; background:#111820; box-shadow:inset 0 -3px var(--play-blue); }
.result-panel { flex:1; min-height:0; margin:0; padding:18px; overflow:auto; color:#dbe6eb; background:#111820; white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.6 Consolas,"Courier New",monospace; }
.diagnostic-list { list-style:none; }.diagnostic-list li { display:grid; grid-template-columns:70px 1fr auto; gap:10px; padding:10px; margin-bottom:8px; color:#dbe6eb; border:1px solid #394752; border-radius:5px; }
.diagnostic-list strong { color:#ff8c8c; text-transform:uppercase; }.diagnostic-list .warning strong { color:#ffd477; }.diagnostic-list .success strong { color:#7ee0ab; }.diagnostic-list small { color:#8798a3; }
.playground-info { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:28px; }
.playground-info article { padding:20px; border:1px solid var(--play-line); border-radius:7px; }
.playground-info h2 { margin:0 0 8px; font-size:18px; }.playground-info p { color:var(--play-muted); }
.library-list { display:grid; grid-template-columns:1fr 1fr; gap:5px 14px; max-height:250px; margin:14px 0 0; padding:0; overflow:auto; list-style:none; }
.library-list li { display:flex; justify-content:space-between; gap:8px; padding:5px 0; border-bottom:1px solid #e4eaee; font-size:11px; }.library-list span { white-space:nowrap; }.browser-ready { color:#187447; }.native-only { color:#9a6815; }
@media(max-width:900px){.playground-grid{grid-template-columns:1fr}.editor-pane{border-right:0;border-bottom:1px solid var(--play-line)}#playground-source{min-height:430px}.results-pane{min-height:430px}.playground-info{grid-template-columns:1fr}.playground-intro{display:block}.compiler-status{margin-top:14px;text-align:left}}
@media(max-width:560px){.playground-toolbar .clear{margin-left:0}.library-list{grid-template-columns:1fr}.diagnostic-list li{grid-template-columns:1fr}.playground-page{width:min(calc(100% - 18px),1440px)}}