/* playground-code.html — page-specific styles (extracted from inline) */

/* ========================
       PAGE CHROME
    ======================== */
    body { overflow: hidden; }

    /* Light mode overrides for code editor */
    .cp-page.light-mode {
      --bg:         #f2f2f8;
      --bg-alt:     #e6e6f0;
      --surface:    rgba(0,0,0,0.04);
      --surface-hover: rgba(0,0,0,0.07);
      --border:     rgba(0,0,0,0.09);
      --border-strong: rgba(0,0,0,0.15);
      --text:       #0d0d1a;
      --text-muted: rgba(13,13,26,0.5);
      --code-bg:    #e8e8f4;
    }
    .cp-page.light-mode .cp-textarea {
      color: #1a1a2e;
    }
    .cp-page.light-mode .cp-line-numbers {
      color: rgba(0,0,0,0.25);
      background: #dcdcec;
      border-right-color: rgba(0,0,0,0.08);
    }
    .cp-page.light-mode .cp-line-numbers span { color: rgba(0,0,0,0.3); }
    .cp-page {
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
      background: var(--bg);
    }

    /* ========================
       TOP BAR
    ======================== */
    .cp-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .6rem 1.4rem;
      background: var(--bg-alt);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      gap: 1rem;
      z-index: 100;
    }

    .cp-bar__left {
      display: flex;
      align-items: center;
      gap: 1.2rem;
    }

    .cp-logo-link {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      text-decoration: none;
    }
    .cp-logo-img {
      height: 32px;
      width: 32px;
      object-fit: contain;
      border-radius: 6px;
      display: block;
      transition: opacity .2s;
    }
    .cp-logo-link:hover .cp-logo-img { opacity: .8; }

    .cp-theme-toggle {
      font-size: .95rem;
      padding: .38rem .75rem;
      min-width: 40px;
      justify-content: center;
      background: rgba(249,130,25,0.12) !important;
      border-color: rgba(249,130,25,0.35) !important;
      color: #f98219 !important;
    }
    .cp-theme-toggle:hover {
      background: rgba(249,130,25,0.22) !important;
      border-color: rgba(249,130,25,0.6) !important;
      color: #ffaa50 !important;
      box-shadow: 0 0 10px rgba(249,130,25,0.25);
    }

    .cp-divider {
      width: 1px;
      height: 20px;
      background: var(--border);
    }

    .cp-title-input {
      background: transparent;
      border: none;
      outline: none;
      font-family: var(--font-mono);
      font-size: .78rem;
      color: var(--text-muted);
      letter-spacing: .04em;
      width: 180px;
      transition: color .2s;
    }
    .cp-title-input:focus { color: var(--text); }
    .cp-title-input::placeholder { color: var(--text-muted); opacity: .5; }

    .cp-bar__right {
      display: flex;
      align-items: center;
      gap: .6rem;
    }

    .cp-btn {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      font-family: var(--font-mono);
      font-size: .68rem;
      letter-spacing: .05em;
      padding: .38rem .85rem;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-muted);
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap;
    }
    .cp-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-hover); }
    .cp-btn--run {
      background: linear-gradient(135deg, var(--orange), #e06c00);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 0 20px rgba(249,130,25,.3);
    }
    .cp-btn--run:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(249,130,25,.5); color: #fff; border-color: transparent; }
    .cp-btn--purple {
      background: rgba(108,78,243,.15);
      border-color: rgba(108,78,243,.3);
      color: #a78bfa;
    }
    .cp-btn--purple:hover { background: rgba(108,78,243,.25); color: #c4b5fd; }

    /* layout toggle icons */
    .layout-btns { display: flex; gap: .3rem; }
    .layout-btn {
      width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: transparent;
      cursor: pointer;
      transition: all .18s;
      font-size: .7rem;
      color: var(--text-muted);
    }
    .layout-btn:hover, .layout-btn.active { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }

    /* ========================
       SNIPPETS BAR
    ======================== */
    .cp-snippets {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .5rem 1.4rem;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      overflow-x: auto;
      flex-shrink: 0;
      scrollbar-width: none;
    }
    .cp-snippets::-webkit-scrollbar { display: none; }
    .cp-snippets__label {
      font-family: var(--font-mono);
      font-size: .6rem;
      color: var(--text-muted);
      letter-spacing: .12em;
      text-transform: uppercase;
      white-space: nowrap;
      flex-shrink: 0;
      margin-right: .3rem;
    }
    .snippet-chip {
      font-family: var(--font-mono);
      font-size: .65rem;
      padding: .25rem .75rem;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-muted);
      cursor: pointer;
      transition: all .18s;
      white-space: nowrap;
      flex-shrink: 0;
      letter-spacing: .03em;
    }
    .snippet-chip:hover { border-color: rgba(249,130,25,.4); color: var(--orange); }
    .snippet-chip.active { background: rgba(249,130,25,.1); border-color: rgba(249,130,25,.35); color: var(--orange); }

    /* ========================
       MAIN WORKSPACE
    ======================== */
    .cp-workspace {
      display: flex;
      flex: 1;
      overflow: hidden;
      min-height: 0;
    }

    /* ========================
       EDITOR PANE
    ======================== */
    .cp-editor-pane {
      display: flex;
      flex-direction: column;
      width: 50%;
      min-width: 200px;
      border-right: 1px solid var(--border);
      flex-shrink: 0;
      overflow: hidden;
    }

    /* Resizer */
    .cp-resizer {
      width: 4px;
      background: transparent;
      cursor: col-resize;
      flex-shrink: 0;
      transition: background .15s;
      position: relative;
      z-index: 10;
    }
    .cp-resizer:hover, .cp-resizer.dragging { background: var(--orange); }

    /* Language tabs */
    .cp-tabs {
      display: flex;
      background: var(--bg-alt);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .cp-tab {
      padding: .55rem 1.2rem;
      font-family: var(--font-mono);
      font-size: .7rem;
      letter-spacing: .06em;
      color: var(--text-muted);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all .18s;
      display: flex;
      align-items: center;
      gap: .4rem;
      user-select: none;
    }
    .cp-tab:hover { color: var(--text); }
    .cp-tab.active { color: var(--text); border-bottom-color: var(--orange); }
    .cp-tab__dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .cp-tab[data-lang="html"] .cp-tab__dot  { background: #e34c26; }
    .cp-tab[data-lang="css"] .cp-tab__dot   { background: #264de4; }
    .cp-tab[data-lang="js"] .cp-tab__dot    { background: #f0db4f; }

    /* Editor area */
    .cp-editor-wrap {
      flex: 1;
      overflow: hidden;
      position: relative;
      display: none;
    }
    .cp-editor-wrap.active { display: flex; }

    .cp-line-numbers {
      padding: 1rem 0;
      background: var(--bg-alt);
      border-right: 1px solid var(--border);
      text-align: right;
      font-family: var(--font-mono);
      font-size: .8rem;
      line-height: 1.6rem;
      color: rgba(255,255,255,.2);
      user-select: none;
      overflow: hidden;
      flex-shrink: 0;
      width: 42px;
      min-width: 42px;
    }
    [data-theme="light"] .cp-line-numbers { color: rgba(0,0,0,.2); }
    .cp-line-numbers span {
      display: block;
      padding-right: .7rem;
      font-size: .72rem;
    }

    .cp-textarea {
      flex: 1;
      background: var(--code-bg);
      border: none;
      outline: none;
      resize: none;
      font-family: var(--font-mono);
      font-size: .8rem;
      line-height: 1.6rem;
      color: var(--text);
      padding: 1rem .9rem;
      tab-size: 2;
      white-space: pre;
      overflow: auto;
      caret-color: var(--orange);
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
    }
    .cp-textarea::-webkit-scrollbar { width: 6px; height: 6px; }
    .cp-textarea::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    /* ========================
       PREVIEW PANE
    ======================== */
    .cp-preview-pane {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-width: 0;
    }

    .cp-preview-bar {
      display: flex;
      align-items: center;
      gap: .6rem;
      padding: .5rem 1rem;
      background: var(--bg-alt);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .preview-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .cp-preview-url {
      flex: 1;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      padding: .22rem .85rem;
      font-family: var(--font-mono);
      font-size: .62rem;
      color: var(--text-muted);
      letter-spacing: .04em;
      margin: 0 .3rem;
    }
    .cp-preview-actions { display: flex; gap: .4rem; margin-left: auto; }
    .preview-action {
      width: 26px; height: 26px;
      border-radius: var(--radius-sm);
      background: var(--surface);
      border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all .18s;
      font-size: .75rem; color: var(--text-muted);
    }
    .preview-action:hover { color: var(--text); border-color: var(--border-strong); }
    .preview-action.active {
      color: #f98219;
      border-color: rgba(249,130,25,0.4);
      background: rgba(249,130,25,0.1);
    }

    #previewFrame {
      flex: 1;
      border: none;
      background: #fff;
      width: 100%;
    }

    /* ========================
       CONSOLE
    ======================== */
    .cp-console {
      border-top: 1px solid var(--border);
      background: var(--bg-alt);
      flex-shrink: 0;
      overflow: hidden;
      transition: height .25s cubic-bezier(.22,1,.36,1);
      height: 0;
    }
    .cp-console.open { height: 160px; }

    .cp-console__bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .4rem .9rem;
      border-bottom: 1px solid var(--border);
      font-family: var(--font-mono);
      font-size: .65rem;
      letter-spacing: .08em;
      color: var(--text-muted);
    }
    .cp-console__bar-left { display: flex; align-items: center; gap: .6rem; }
    .console-badge {
      background: rgba(249,130,25,.12);
      border: 1px solid rgba(249,130,25,.25);
      color: var(--orange);
      padding: .1rem .5rem;
      border-radius: var(--radius-pill);
      font-size: .58rem;
    }
    .cp-console__clear {
      cursor: pointer; color: var(--text-muted);
      transition: color .15s; font-size: .65rem; letter-spacing: .08em;
    }
    .cp-console__clear:hover { color: var(--orange); }

    .cp-console__output {
      padding: .5rem .9rem;
      font-family: var(--font-mono);
      font-size: .75rem;
      line-height: 1.7;
      overflow-y: auto;
      height: calc(160px - 32px);
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
    }
    .console-line { display: flex; gap: .6rem; align-items: baseline; }
    .console-line__prompt { color: var(--text-muted); flex-shrink: 0; }
    .console-line__text { color: var(--text); word-break: break-all; }
    .console-line--error .console-line__text { color: #f87171; }
    .console-line--warn  .console-line__text { color: #fbbf24; }
    .console-line--info  .console-line__text { color: #60a5fa; }

    /* ========================
       STATUS BAR
    ======================== */
    .cp-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .28rem 1.4rem;
      background: var(--bg-alt);
      border-top: 1px solid var(--border);
      flex-shrink: 0;
    }
    .cp-status__left, .cp-status__right {
      display: flex;
      align-items: center;
      gap: 1.2rem;
      font-family: var(--font-mono);
      font-size: .62rem;
      color: var(--text-muted);
      letter-spacing: .06em;
    }
    .cp-status__lang { color: var(--orange); }
    .status-dot-green {
      width: 6px; height: 6px; border-radius: 50%;
      background: #4ade80;
      box-shadow: 0 0 6px rgba(74,222,128,.8);
      display: inline-block;
    }

    /* ========================
       LAYOUT VARIANTS
    ======================== */
    /* Vertical layout */
    .cp-workspace.layout-vertical {
      flex-direction: column;
    }
    .cp-workspace.layout-vertical .cp-editor-pane {
      width: 100%;
      height: 50%;
      border-right: none;
      border-bottom: 1px solid var(--border);
    }
    .cp-workspace.layout-vertical .cp-resizer {
      width: 100%;
      height: 4px;
      cursor: row-resize;
    }
    .cp-workspace.layout-vertical .cp-preview-pane {
      flex: 1;
    }

    /* Editor-only mode */
    .cp-workspace.layout-editor .cp-preview-pane { display: none; }
    .cp-workspace.layout-editor .cp-resizer { display: none; }
    .cp-workspace.layout-editor .cp-editor-pane { width: 100%; border-right: none; }

    /* Preview-only mode */
    .cp-workspace.layout-preview .cp-editor-pane { display: none; }
    .cp-workspace.layout-preview .cp-resizer { display: none; }

    /* ========================
       MOBILE
    ======================== */
    @media (max-width: 640px) {
      .cp-workspace { flex-direction: column; }
      .cp-editor-pane { width: 100%; height: 45%; border-right: none; border-bottom: 1px solid var(--border); }
      .cp-resizer { display: none; }
      .cp-bar__right .layout-btns { display: none; }
      .cp-snippets { padding: .4rem .8rem; }
    }

    /* ========================
       MODAL — SHARE / SETTINGS
    ======================== */
    .cp-modal {
      display: none;
      position: fixed; inset: 0; z-index: 500;
      background: rgba(0,0,0,.8); backdrop-filter: blur(6px);
      align-items: center; justify-content: center;
      padding: 1rem;
    }
    .cp-modal.open { display: flex; }
    .cp-modal__box {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 2rem;
      width: 100%;
      max-width: 480px;
    }
    .cp-modal__title {
      font-family: var(--font-display);
      font-size: 1.6rem;
      letter-spacing: .06em;
      margin-bottom: 1.2rem;
    }
    .cp-modal__field { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
    .cp-modal__label { font-family: var(--font-mono); font-size: .62rem; color: var(--text-muted); letter-spacing: .1em; }
    .cp-modal__input {
      background: var(--code-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: .6rem .9rem;
      font-family: var(--font-mono);
      font-size: .78rem;
      color: var(--text);
      outline: none;
      width: 100%;
    }
    .cp-modal__input:focus { border-color: rgba(108,78,243,.4); }
    .cp-modal__actions { display: flex; gap: .6rem; margin-top: 1.4rem; }
    .cp-modal__close {
      float: right; background: none; border: none;
      color: var(--text-muted); font-size: 1.3rem; cursor: pointer; margin-top: -.4rem;
    }

    /* Keyboard shortcut hints */
    kbd {
      font-family: var(--font-mono);
      font-size: .6rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 3px;
      padding: .1rem .35rem;
      color: var(--text-muted);
    }
* { box-sizing: border-box; }
  html[data-theme="dark"]  { color-scheme: dark; }
  html[data-theme="light"] { color-scheme: light; }
  ${css}
${css}