@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
.kdps-app{--bg:#0b1020;--panel:#121a2d;--line:#25324b;--muted:#98a6c2;--text:#f4f7ff;--accent:#9ee6c1;max-width:1180px;margin:24px auto;padding:24px;background:var(--bg);color:var(--text);border-radius:24px;font-family:'DM Sans',sans-serif;box-sizing:border-box;line-height:1.5}
.kdps-app *{box-sizing:border-box}.kdps-header{display:flex;align-items:center;gap:16px;margin-bottom:22px;position:relative}.kdps-brand-mark{width:56px;height:56px;border-radius:17px;background:linear-gradient(135deg,#9ee6c1,#66a9f4);color:#0b1020;display:grid;place-items:center;font:700 19px 'Space Grotesk';letter-spacing:-1px}.kdps-eyebrow{font-size:10px;letter-spacing:3px;color:var(--accent);font-weight:700}.kdps-header h1{font:700 30px 'Space Grotesk';margin:1px 0}.kdps-header p{margin:0;color:var(--muted);font-size:13px}.kdps-local-tag{margin-left:auto;border:1px solid #42604f;color:var(--accent);border-radius:30px;padding:6px 10px;font-size:10px;letter-spacing:1px}
.kdps-notice{background:#19263a;border:1px solid #334963;padding:13px 16px;border-radius:13px;color:#c9d6ea;font-size:12px;margin-bottom:18px}.kdps-notice strong{color:var(--accent)}.kdps-grid{display:grid;grid-template-columns:minmax(270px,.82fr) minmax(0,1.45fr);gap:18px}.kdps-panel{background:var(--panel);border:1px solid var(--line);border-radius:19px;padding:21px;min-width:0}.kdps-section-heading{display:flex;gap:12px;align-items:center;margin-bottom:20px}.kdps-section-heading>span{color:var(--accent);font:700 12px 'Space Grotesk';border:1px solid #456353;border-radius:9px;padding:7px}.kdps-section-heading h2{font:600 18px 'Space Grotesk';margin:0}.kdps-section-heading p{margin:2px 0 0;color:var(--muted);font-size:11px}
.kdps-app label{display:block;font-size:12px;color:#c7d2e6;font-weight:600;margin:0 0 14px}.kdps-app input,.kdps-app select{display:block;width:100%;margin-top:6px;padding:11px 12px;border-radius:10px;border:1px solid #34435e;background:#0d1526;color:#f4f7ff;font:13px 'DM Sans';min-height:42px}.kdps-app input:focus,.kdps-app select:focus{outline:2px solid #75cba6;outline-offset:1px}.kdps-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.kdps-primary,.kdps-secondary,.kdps-tabs button{cursor:pointer;font:600 12px 'DM Sans';border-radius:10px}.kdps-primary{width:100%;padding:13px 15px;background:var(--accent);color:#102019;border:0;margin-top:3px}.kdps-primary span{float:right;font-size:18px;line-height:14px}.kdps-small{font-size:10px;color:var(--muted);margin:12px 0 0}.kdps-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:17px}.kdps-stats>div{padding:12px;background:#0d1526;border:1px solid #273650;border-radius:12px}.kdps-stats strong{display:block;font:700 20px 'Space Grotesk';color:var(--accent)}.kdps-stats span{font-size:10px;color:var(--muted)}.kdps-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow:auto}.kdps-tabs button{border:0;background:transparent;color:var(--muted);padding:10px 12px;white-space:nowrap}.kdps-tabs button.active{color:var(--accent);border-bottom:2px solid var(--accent);border-radius:0}.kdps-pane{min-height:300px;max-height:520px;overflow:auto}.kdps-empty{text-align:center;padding:68px 15px;color:var(--muted)}.kdps-empty-icon{font-size:28px;color:var(--accent)}.kdps-empty h3{color:var(--text);font:600 16px 'Space Grotesk';margin:10px 0 4px}.kdps-empty p{font-size:12px}.kdps-block{padding:13px 14px;background:#0d1526;border:1px solid #263650;border-radius:11px;margin-bottom:9px}.kdps-block h3{font:600 13px 'Space Grotesk';margin:0 0 5px;color:var(--accent)}.kdps-block p,.kdps-block li{font-size:12px;color:#c5d0e3;margin:0}.kdps-block ul{padding-left:18px;margin:6px 0 0}.kdps-scene{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid #25324b}.kdps-scene b{font:700 11px 'Space Grotesk';color:var(--accent)}.kdps-scene p{font-size:11px;color:#c5d0e3;margin:0}.kdps-actions{display:flex;gap:8px;margin-top:13px}.kdps-secondary{padding:10px 13px;border:1px solid #3a4a67;background:#18243a;color:#e7efff}.kdps-secondary:disabled{opacity:.4;cursor:not-allowed}.kdps-footer{font-size:10px;letter-spacing:2px;color:var(--accent);padding:18px 3px 0}.kdps-footer span{float:right;color:var(--muted);letter-spacing:0}
@media(max-width:760px){.kdps-app{margin:8px auto;padding:14px;border-radius:16px}.kdps-grid{grid-template-columns:1fr}.kdps-header h1{font-size:24px}.kdps-panel{padding:16px}.kdps-local-tag{font-size:8px}.kdps-stats strong{font-size:17px}.kdps-pane{max-height:450px}}

.kdps-scene-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;color:var(--muted);font-size:11px}.kdps-scene-nav .kdps-secondary{padding:8px 11px}
.kdps-hint{font-size:10px;color:var(--muted);font-weight:400;margin-left:5px}.kdps-dialogue{padding:10px 12px;margin:7px 0;background:#0d1526;border-left:3px solid #75cba6;border-radius:0 9px 9px 0}.kdps-dialogue b{display:block;color:var(--accent);font:600 11px 'Space Grotesk';margin-bottom:3px}.kdps-dialogue p{margin:0;color:#d3dced;font-size:12px}.kdps-script-section{margin-bottom:15px}.kdps-script-section h3{font:600 13px 'Space Grotesk';color:var(--accent);margin:0 0 7px}.kdps-script-section>p{font-size:11px;color:var(--muted);margin:0 0 8px}

.kdps-script-tools{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:10px;background:#0d1526;border:1px solid #293a55;border-radius:11px;margin-bottom:12px}
.kdps-script-tools .kdps-secondary{font-size:10px;padding:8px 10px}
#kdps-draft-status{font-size:10px;color:#9ee6c1;flex-basis:100%}
.kdps-dialogue b[contenteditable="true"],.kdps-dialogue p[contenteditable="true"]{outline:1px dashed transparent;border-radius:4px;padding:2px}
.kdps-dialogue b[contenteditable="true"]:focus,.kdps-dialogue p[contenteditable="true"]:focus{outline-color:#9ee6c1;background:#15233a}

.kdps-library{margin-top:16px;padding:13px;background:#0d1526;border:1px solid #2b3b56;border-radius:12px}
.kdps-library-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.kdps-library-head h3{font:600 13px 'Space Grotesk';margin:0;color:#f4f7ff}
.kdps-library-head p{font-size:10px;color:var(--muted);margin:3px 0 0}
.kdps-library-count{background:#1e3a32;color:var(--accent);border-radius:20px;padding:4px 8px;font-size:11px;font-weight:700}
.kdps-library .kdps-secondary{width:100%;margin-bottom:8px}
.kdps-project-list{display:grid;gap:7px}
.kdps-library-empty{font-size:11px;color:var(--muted);margin:4px 0}
.kdps-project-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center;padding:8px;background:#152239;border:1px solid #293c59;border-radius:9px}
.kdps-project-meta{min-width:0}
.kdps-project-meta b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#eef4ff}
.kdps-project-meta span{display:block;font-size:9px;color:var(--muted);margin-top:2px}
.kdps-project-load,.kdps-project-delete{border:1px solid #3a506f;border-radius:7px;background:#1d304a;color:#dce9fa;padding:6px 8px;font-size:10px;cursor:pointer}
.kdps-project-delete{color:#ffb4b4;padding:5px 9px}

.kdps-project-backup-tools{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.kdps-project-backup-tools button{flex:1 1 180px}

.kdps-project-backup-tools{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.kdps-project-backup-tools button{flex:1 1 180px}

.kdps-project-search-label{display:block;margin:12px 0}.kdps-project-search-label input{width:100%;margin-top:6px}.kdps-project-meta small{display:block;opacity:.75;margin-top:4px}

.kdps-project-duplicate{border:1px solid var(--kdps-border,#555);border-radius:8px;padding:8px 12px;background:transparent;color:inherit;cursor:pointer}

.kdps-project-rename{border:1px solid var(--kdps-border,#555);border-radius:8px;padding:8px 12px;background:transparent;color:inherit;cursor:pointer}


/* Phase 10: isolated styling so the studio remains readable inside themes and Android local-file previews */
.kdps-app, .kdps-app * { box-sizing: border-box !important; }
.kdps-app {
  color-scheme: dark;
  background: #0b1020 !important;
  color: #f4f7ff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  line-height: 1.5 !important;
  width: min(100%, 1180px) !important;
  margin: 16px auto !important;
  padding: clamp(12px, 3vw, 24px) !important;
  overflow-wrap: anywhere;
}
.kdps-app h1,.kdps-app h2,.kdps-app h3,.kdps-app p,.kdps-app label,.kdps-app span,.kdps-app b,.kdps-app small { color: inherit; }
.kdps-app .kdps-panel,.kdps-app .kdps-library { background:#121a2d !important; color:#f4f7ff !important; }
.kdps-app input,.kdps-app select,.kdps-app textarea {
  display:block !important; width:100% !important; max-width:100% !important;
  min-height:44px !important; padding:10px 12px !important;
  background:#0d1526 !important; color:#f4f7ff !important;
  border:1px solid #52627d !important; border-radius:9px !important;
  font:16px Arial,Helvetica,sans-serif !important;
}
.kdps-app button { font-family:Arial,Helvetica,sans-serif !important; max-width:100%; }
.kdps-app .kdps-primary { background:#9ee6c1 !important; color:#102019 !important; }
.kdps-app .kdps-secondary,.kdps-app .kdps-project-load,.kdps-app .kdps-project-delete,
.kdps-app .kdps-project-duplicate,.kdps-app .kdps-project-rename {
  background:#1d304a !important; color:#f4f7ff !important; border:1px solid #52627d !important;
  min-height:38px; padding:8px 10px; border-radius:8px;
}
.kdps-app .kdps-project-item { grid-template-columns:minmax(0,1fr) repeat(4,auto) !important; }
.kdps-app .kdps-project-meta b { color:#f4f7ff !important; }
.kdps-app .kdps-project-meta span,.kdps-app .kdps-project-meta small { color:#b9c6dc !important; }
@media(max-width:600px) {
  .kdps-app { margin:0 auto !important; border-radius:12px !important; padding:12px !important; }
  .kdps-app .kdps-grid { grid-template-columns:minmax(0,1fr) !important; }
  .kdps-app .kdps-two { grid-template-columns:minmax(0,1fr) !important; }
  .kdps-app .kdps-project-item { grid-template-columns:minmax(0,1fr) auto auto !important; }
  .kdps-app .kdps-project-item .kdps-project-duplicate,
  .kdps-app .kdps-project-item .kdps-project-rename { grid-column:auto; }
  .kdps-app .kdps-header { flex-wrap:wrap; }
  .kdps-app .kdps-local-tag { margin-left:0; }
}


.kdps-status-label{display:block!important;margin:7px 0 0!important;font-size:10px!important;color:#b9c6dc!important}
.kdps-status-label select{min-height:34px!important;padding:6px 8px!important;margin-top:3px!important;font-size:12px!important}
.kdps-project-item{grid-template-columns:minmax(0,1fr) auto auto auto auto!important}
@media(max-width:600px){.kdps-project-item{grid-template-columns:minmax(0,1fr) auto auto!important}.kdps-project-item .kdps-project-meta{grid-column:1/-1}.kdps-project-item .kdps-project-status{max-width:100%}}

#kdps-project-status-filter{width:100%;max-width:100%;min-height:40px}

.kdps-project-summary{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 14px}
.kdps-project-summary span{display:inline-flex;gap:5px;align-items:center;padding:6px 9px;border:1px solid #334765;border-radius:20px;background:#152239;color:#c7d4e8;font-size:10px}
.kdps-project-summary b{color:#9ee6c1;font-size:11px}

#kdps-project-sort{width:100%;max-width:100%;min-height:40px}


/* Phase 26: prevent theme styles and narrow flex/grid children from collapsing host dialogue text on mobile */
.kdps-app .kdps-pane,
.kdps-app #kdps-pane-script,
.kdps-app .kdps-script-section,
.kdps-app .kdps-dialogue {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.kdps-app .kdps-dialogue {
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  writing-mode: horizontal-tb !important;
}
.kdps-app .kdps-dialogue b,
.kdps-app .kdps-dialogue p {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  letter-spacing: normal !important;
  text-align: left !important;
}
.kdps-app .kdps-script-section > p {
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
@media (max-width: 600px) {
  .kdps-app .kdps-output,
  .kdps-app .kdps-pane { min-width: 0 !important; width: 100% !important; }
  .kdps-app .kdps-dialogue { padding: 10px 12px !important; }
}