/* Reuse the established purple workspace; these tools edit source and assets. */
@import url('/style/ideas-fifty.css?v=1');
.ct-tool[data-group="Developer"] { --if-accent: #adcbff; }
.ct-tool[data-group="Text"] { --if-accent: #e5b9f5; }
.ct-tool[data-group="Media"] { --if-accent: #f4c08e; }
.ct-tool[data-group="Images"] { --if-accent: #a6e5cf; }
.ct-tool .if-layout { grid-template-columns: minmax(340px, .95fr) minmax(0, 1.3fr); }
.ct-inputs { max-height: 660px; overflow: auto; padding: 16px; scrollbar-color: #8055a8 #20182e; }
.ct-editor { margin-bottom: 14px; overflow: hidden; border: 1px solid #574065; border-radius: 12px; background: #17111f; }
.ct-editor:last-child { margin-bottom: 0; }
.ct-editor-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-bottom: 1px solid #493254; background: #2b1e37; }
.ct-editor-header label { font-size: 12px; font-weight: 650; color: #e0cdeb; }
.ct-tool .ct-editor-header button { min-height: 30px; padding: 5px 8px; font-size: 10px; }
.ct-tool textarea {
  display: block;
  width: 100%;
  min-height: 210px;
  resize: vertical;
  border: 0;
  border-radius: 0;
  padding: 16px;
  margin: 0;
  color: #e9ddf5;
  background: #15101f;
  font: 13px/1.7 ui-monospace, Consolas, monospace;
  tab-size: 2;
  overflow: auto;
  color-scheme: dark;
}
.ct-tool .ct-editor:only-child textarea { min-height: 370px; }
.ct-editor:focus-within { border-color: var(--if-accent); box-shadow: 0 0 0 2px #b38cda22; }
.ct-editor-footer { padding: 7px 12px; font-size: 10px; color: #b7a3c8; border-top: 1px solid #392647; }
.ct-drop { display: grid; place-items: center; gap: 10px; padding: 28px 18px; margin: 16px; border: 1px dashed #9c70b8; border-radius: 14px; background: radial-gradient(ellipse at top, #50315e66, #26192f); text-align: center; }
.ct-drop[data-drag="true"] { border-color: var(--if-accent); background: #493353; }
.ct-drop strong { font-size: 16px; }
.ct-drop p { margin: 0; color: #cdb9dc; font-size: 12px; max-width: 300px; }
.ct-tool .ct-drop .if-file { background: #8853ca; border-color: #bc8aea; font-size: 13px; font-weight: 650; }
.ct-tool .if-file { position: relative; overflow: hidden; }
.ct-asset-list { padding: 0 16px 16px; display: grid; gap: 8px; }
.ct-asset { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; border: 1px solid #4c345b; background: #271b32; padding: 9px; border-radius: 10px; }
.ct-asset canvas { width: 42px; height: 42px; object-fit: contain; border-radius: 6px; background: #130d1b; }
.ct-asset b { display: block; font-size: 11px; overflow-wrap: anywhere; }
.ct-asset span { color: #bca9cc; font-size: 10px; }
.ct-tool .ct-asset button { min-height: 30px; padding: 5px 7px; font-size: 11px; }
.ct-asset-actions { display: flex; gap: 5px; }
.ct-preview-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; }
.ct-preview-tools .if-field { flex: 1; min-width: 170px; }
.ct-preview-tools button { font-size: 12px; }
.ct-tool .ct-code {
  display: block;
  min-height: 320px;
  max-height: 500px;
  margin: 0;
  padding: 20px;
  border: 1px solid #51385f;
  border-radius: 12px;
  background: #110c1a;
  color: #dac9f1;
  font: 12px/1.7 ui-monospace, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: auto;
  tab-size: 2;
  scrollbar-color: #8055a8 #20182e;
}
.ct-canvas-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.ct-canvas-card { min-width: 0; margin: 0; }
.ct-canvas-card figcaption { color: #cbb4db; font-size: 11px; display: flex; justify-content: space-between; margin: 0 0 8px; }
.ct-canvas-surface {
  display: grid;
  place-items: center;
  min-height: 280px;
  height: 320px;
  overflow: auto;
  border: 1px solid #5f426d;
  border-radius: 12px;
  background: repeating-conic-gradient(#32253d 0% 25%,#21182b 0% 50%) 50% / 20px 20px;
}
.ct-canvas-surface canvas { width: 100%; height: 100%; max-width: 100%; max-height: 310px; object-fit: contain; image-rendering: pixelated; }
.ct-tool audio { width: 100%; }
.ct-tool[data-smooth="true"] .ct-canvas-surface canvas { image-rendering: auto; }
.ct-canvas-grid.ct-single { grid-template-columns: 1fr; }
.ct-toggle { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #d7c0e6; cursor: pointer; }
.ct-toggle input { accent-color: #a76de0; width: 16px; height: 16px; margin: 0; }
.ct-tool .ct-file-meta { padding: 10px 12px; margin: 12px 0; border: 1px solid #493153; border-radius: 8px; background: #281a34; font-size: 11px; color: #d2badf; }
.ct-file-cards { display: grid; gap: 10px; }
.ct-file-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #5b3c69; border-radius: 12px; padding: 15px; background: #291c35; }
.ct-file-card strong { display: block; font-size: 13px; color: #eddbf8; }
.ct-file-card small { color: #c2aacd; font-size: 11px; }
.ct-tool .ct-file-card button { flex-shrink: 0; font-size: 12px; }
.ct-help { padding: 12px 16px; font-size: 11px; color: #c0a9cf; margin: 0; }
.ct-tool:fullscreen .ct-inputs { max-height: calc(100dvh - 330px); }
.ct-tool:fullscreen .ct-code { max-height: calc(100dvh - 460px); }
@media (max-width: 1000px) {
  .ct-tool .if-layout { grid-template-columns: minmax(290px,1fr) minmax(0,1.15fr); }
  .ct-canvas-grid { grid-template-columns: 1fr; }
  .ct-canvas-surface { min-height: 200px; height: 230px; }
  .ct-canvas-surface canvas { max-height: 220px; }
}
@media (max-width: 700px) {
  .ct-tool .if-layout { grid-template-columns: 1fr; }
  .ct-inputs { max-height: 540px; padding: 12px; }
  .ct-tool textarea { font-size: 12px; min-height: 180px; }
  .ct-tool .ct-editor:only-child textarea { min-height: 260px; }
  .ct-tool .ct-code { min-height: 230px; max-height: 360px; padding: 14px; }
  .ct-canvas-grid { grid-template-columns: 1fr; }
  .ct-drop { padding: 24px 15px; }
  .ct-preview-tools { align-items: center; }
  .ct-tool .ct-asset button { min-height: 34px; }
  .ct-file-card { padding: 12px; }
}