/* CODING STUDIO — scoped to [data-app="code"] (CS-1 shell). Brutalist chrome
   around the Blockly workspace (which keeps its own dark zelos theme). */

.win.w-code { width: 1100px; height: 700px; }
.w-code .win-body { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.w-code #code-root { flex: 1; min-height: 0; display: flex; flex-direction: column; }

[data-app="code"] .cs-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #0e0a12; }
[data-app="code"] .cs-shell[hidden] { display: none; }

/* HOME / projects screen (CS-3b) */
[data-app="code"] .cs-home { flex: 1; min-height: 0; overflow-y: auto; background: #0e0a12; padding: 26px 30px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
[data-app="code"] .cs-home[hidden] { display: none; }
[data-app="code"] .cs-hometitle { font: 900 30px 'Geologica', sans-serif; color: #C6F542; letter-spacing: .05em; }
[data-app="code"] .cs-homesub { font: 700 12px 'JetBrains Mono', monospace; color: #b8b8c2; margin-bottom: 6px; }
[data-app="code"] .cs-newbtn { font: 900 16px 'Geologica', sans-serif; letter-spacing: .04em; padding: 14px 34px; background: #FF2E7E; color: #fff; border: 2px solid #0a0a0a; box-shadow: 5px 5px 0 #0a0a0a; cursor: pointer; }
[data-app="code"] .cs-newbtn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #0a0a0a; }
[data-app="code"] .cs-hsec { font: 800 12px 'JetBrains Mono', monospace; color: #16E0E0; letter-spacing: .08em; margin-top: 14px; align-self: flex-start; }
[data-app="code"] .cs-starters { display: flex; gap: 12px; flex-wrap: wrap; align-self: flex-start; }
[data-app="code"] .cs-starter { width: 130px; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px solid #0a0a0a; box-shadow: 4px 4px 0 #0a0a0a; cursor: pointer; }
[data-app="code"] .cs-starter:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #0a0a0a; }
[data-app="code"] .cs-stemoji { font-size: 34px; line-height: 1; }
[data-app="code"] .cs-stname { font: 800 11px 'JetBrains Mono', monospace; color: #0a0a0a; background: #fff; border: 2px solid #0a0a0a; padding: 2px 7px; }
[data-app="code"] .cs-mygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; width: 100%; align-content: start; }
[data-app="code"] .cs-empty { font: 700 12px 'JetBrains Mono', monospace; color: #b8b8c2; grid-column: 1 / -1; padding: 10px 0; }
[data-app="code"] .cs-card { background: #fff; border: 2px solid #0a0a0a; box-shadow: 4px 4px 0 #0a0a0a; cursor: pointer; position: relative; }
[data-app="code"] .cs-card:hover { outline: 3px solid #C6F542; }
[data-app="code"] .cs-card:focus-visible { outline: 3px solid #FF2E7E; }
[data-app="code"] .cs-card img, [data-app="code"] .cs-thumbph { width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; object-fit: cover; background: #F2F2EC; border-bottom: 2px solid #0a0a0a; image-rendering: pixelated; font-size: 36px; }
[data-app="code"] .cs-cardname { font: 800 11.5px 'JetBrains Mono', monospace; color: #0a0a0a; padding: 7px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-app="code"] .cs-cardbtns { position: absolute; top: 5px; right: 5px; display: flex; gap: 4px; }
[data-app="code"] .cs-cdup, [data-app="code"] .cs-cdel { width: 24px; height: 24px; border: 2px solid #0a0a0a; font: 800 11px 'JetBrains Mono', monospace; cursor: pointer; padding: 0; }
[data-app="code"] .cs-cdup { background: #16E0E0; color: #0a0a0a; }
[data-app="code"] .cs-cdel { background: #FF2E7E; color: #fff; }

/* CODING SITES shelf (CS-4) */
[data-app="code"] .cs-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; width: 100%; align-content: start; }
[data-app="code"] .cs-stile { display: flex; flex-direction: column; background: #fff; border: 2px solid #0a0a0a; box-shadow: 3px 3px 0 #0a0a0a; cursor: pointer; padding: 0; text-align: left; }
[data-app="code"] .cs-stile:hover { outline: 3px solid #16E0E0; }
[data-app="code"] .cs-stile:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0a0a0a; }
[data-app="code"] .cs-stile-img { width: 100%; aspect-ratio: 16 / 10; background: #F2F2EC center / cover no-repeat; border-bottom: 2px solid #0a0a0a; }
[data-app="code"] .cs-stile-name { font: 800 10.5px 'JetBrains Mono', monospace; color: #0a0a0a; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* editor header additions (CS-3b) */
[data-app="code"] .cs-homeb { background: #C6F542; }
[data-app="code"] .cs-title { font: 800 13px 'JetBrains Mono', monospace; padding: 8px 14px; border: 2px dashed #4a4a52; background: transparent; color: #0a0a0a; cursor: pointer; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-app="code"] .cs-title:hover { border-color: #FF2E7E; color: #FF2E7E; }
[data-app="code"] .cs-loading[hidden] { display: none; }
[data-app="code"] .cs-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #F2F2EC; border-bottom: 2px solid #0a0a0a; }
[data-app="code"] .cs-btn { font: 800 13px 'JetBrains Mono', monospace; letter-spacing: .04em; padding: 8px 18px; border: 2px solid #0a0a0a; box-shadow: 3px 3px 0 #0a0a0a; cursor: pointer; background: #fff; color: #0a0a0a; }
[data-app="code"] .cs-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0a0a0a; }
[data-app="code"] .cs-run { background: #2ECC40; color: #0a0a0a; }
[data-app="code"] .cs-run.cs-running { background: #C6F542; animation: cs-pulse 0.8s infinite; }
[data-app="code"] .cs-stop { background: #FF2E7E; color: #fff; }
@keyframes cs-pulse { 50% { box-shadow: 3px 3px 0 #0a0a0a, 0 0 0 4px rgba(198,245,66,.5); } }
[data-app="code"] .cs-hint { font: 700 11px 'JetBrains Mono', monospace; color: #4a4a52; margin-left: auto; }

[data-app="code"] .cs-main { flex: 1; min-height: 0; display: flex; }
[data-app="code"] .cs-work { flex: 1; min-width: 0; position: relative; }
[data-app="code"] #cs-blockly { position: absolute; inset: 0; }
[data-app="code"] .cs-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #C6F542; font: 800 14px 'JetBrains Mono', monospace; letter-spacing: .1em; pointer-events: none; }
[data-app="code"] .cs-dots { animation: cs-blink 1s steps(3) infinite; }
@keyframes cs-blink { 50% { opacity: .2; } }

[data-app="code"] .cs-side { width: 500px; flex: none; background: #F2F2EC; border-left: 2px solid #0a0a0a; display: flex; flex-direction: column; align-items: center; padding: 12px; gap: 8px; overflow: hidden; position: relative; }
[data-app="code"] #cs-stage { width: 100%; max-width: 480px; aspect-ratio: 4/3; border: 2px solid #0a0a0a; box-shadow: 5px 5px 0 #0a0a0a; background: #fff; image-rendering: pixelated; touch-action: none; }
[data-app="code"] .cs-stagehint { font: 700 11.5px 'JetBrains Mono', monospace; color: #4a4a52; text-align: center; }

/* backdrop row */
[data-app="code"] .cs-bgrow { display: flex; gap: 6px; margin-top: 4px; }
[data-app="code"] .cs-bgdot { width: 22px; height: 22px; border: 2px solid #0a0a0a; cursor: pointer; padding: 0; }
[data-app="code"] .cs-bgdot.sel { outline: 3px solid #FF2E7E; }

/* sprite strip */
[data-app="code"] .cs-sprites { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; }
[data-app="code"] .cs-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 8px; background: #fff; border: 2px solid #0a0a0a; box-shadow: 2px 2px 0 #0a0a0a; cursor: pointer; font: 700 9px 'JetBrains Mono', monospace; color: #0a0a0a; position: relative; min-width: 56px; }
[data-app="code"] .cs-chip.sel { background: #C6F542; }
[data-app="code"] .cs-chip:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #0a0a0a; }
[data-app="code"] .cs-chip-x { position: absolute; top: -9px; right: -9px; width: 18px; height: 18px; background: #FF2E7E; color: #fff; border: 2px solid #0a0a0a; font: 800 10px/14px 'JetBrains Mono', monospace; text-align: center; cursor: pointer; }
[data-app="code"] .cs-add { justify-content: center; font: 800 17px 'JetBrains Mono', monospace; background: #16E0E0; }
[data-app="code"] .cs-add span { font: 700 8px 'JetBrains Mono', monospace; }

/* sprite picker overlay */
[data-app="code"] .cs-picker { position: absolute; inset: 10px; background: #F2F2EC; border: 2px solid #0a0a0a; box-shadow: 6px 6px 0 #0a0a0a; z-index: 6; display: flex; flex-direction: column; padding: 10px; gap: 8px; }
[data-app="code"] .cs-picker[hidden] { display: none; }
[data-app="code"] .cs-phead { display: flex; gap: 6px; align-items: center; }
[data-app="code"] .cs-ptab { font: 800 11px 'JetBrains Mono', monospace; padding: 6px 12px; border: 2px solid #0a0a0a; background: #fff; cursor: pointer; }
[data-app="code"] .cs-ptab.sel { background: #0a0a0a; color: #C6F542; }
[data-app="code"] .cs-pclose { margin-left: auto; width: 26px; height: 26px; border: 2px solid #0a0a0a; background: #FF2E7E; color: #fff; font: 800 12px 'JetBrains Mono', monospace; cursor: pointer; }
[data-app="code"] .cs-pcolors { display: flex; gap: 6px; }
[data-app="code"] .cs-pswatch { width: 20px; height: 20px; border: 2px solid #0a0a0a; cursor: pointer; padding: 0; }
[data-app="code"] .cs-pswatch.sel { outline: 3px solid #FF2E7E; }
[data-app="code"] .cs-pgrid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; align-content: start; }
[data-app="code"] .cs-ptile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; background: #fff; border: 2px solid #0a0a0a; cursor: pointer; font: 700 8.5px 'JetBrains Mono', monospace; color: #0a0a0a; }
[data-app="code"] .cs-ptile:hover { background: #C6F542; }

@media (max-width: 1100px) {
  [data-app="code"] .cs-side { width: 380px; }
}