.ucs-shell-code-studio .ucs-trust-row,
.ucs-shell-code-studio .ucs-privacy { max-width: 1500px; margin-inline: auto; }
.ucs-shell-code-studio.ucs-converter { max-width: 1540px; padding: 16px; background: #0b1020; border-color: #202b46; }
.ucs-shell-code-studio .ucs-workflow-guide { display: none; }
.ucs-shell-code-studio .ucs-app { max-width: none; }
.ucs-cp { --ucs-cp-bg: #0e1425; --ucs-cp-panel: #121a2d; --ucs-cp-panel-2: #182238; --ucs-cp-line: #28344f; --ucs-cp-text: #e5ebf6; --ucs-cp-muted: #8fa0ba; --ucs-cp-editor: #0b1120; --ucs-cp-editor-text: #dbe7fb; --ucs-cp-accent: #60a5fa; --ucs-cp-green: #34d399; --ucs-cp-red: #fb7185; --ucs-cp-font: 14px; overflow: hidden; color: var(--ucs-cp-text); background: var(--ucs-cp-bg); border: 1px solid var(--ucs-cp-line); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.25); }
.ucs-cp[data-theme="light"] { --ucs-cp-bg: #f3f6fb; --ucs-cp-panel: #fff; --ucs-cp-panel-2: #edf2f9; --ucs-cp-line: #d6deeb; --ucs-cp-text: #172033; --ucs-cp-muted: #64748b; --ucs-cp-editor: #fff; --ucs-cp-editor-text: #172033; --ucs-cp-accent: #2563eb; }
.ucs-cp * { box-sizing: border-box; }
.ucs-cp button,.ucs-cp input,.ucs-cp select,.ucs-cp textarea { font: inherit; }
.ucs-cp-topbar { min-height: 58px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 12px; background: var(--ucs-cp-panel); border-bottom: 1px solid var(--ucs-cp-line); }
.ucs-cp-project { min-width: 210px; display: flex; align-items: center; gap: 9px; margin-right: auto; }
.ucs-cp-logo { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg,#2563eb,#7c3aed); border-radius: 10px; font: 800 12px/1 ui-monospace,monospace; }
.ucs-cp-project input { min-width: 120px; width: min(230px,32vw); padding: 8px 9px; color: var(--ucs-cp-text); background: transparent; border: 1px solid transparent; border-radius: 8px; font-weight: 750; outline: 0; }
.ucs-cp-project input:hover,.ucs-cp-project input:focus { background: var(--ucs-cp-panel-2); border-color: var(--ucs-cp-line); }
.ucs-cp select,.ucs-cp-settings select { height: 36px; padding: 0 30px 0 10px; color: var(--ucs-cp-text); background: var(--ucs-cp-panel-2); border: 1px solid var(--ucs-cp-line); border-radius: 8px; font-size: 12px; }
.ucs-cp-button,.ucs-cp-mini,.ucs-cp-device,.ucs-cp-tab,.ucs-cp-console-tab { min-height: 34px; padding: 7px 11px; color: var(--ucs-cp-text); background: var(--ucs-cp-panel-2); border: 1px solid var(--ucs-cp-line); border-radius: 8px; font-size: 12px; font-weight: 720; cursor: pointer; transition: .16s ease; }
.ucs-cp-button:hover,.ucs-cp-mini:hover,.ucs-cp-device:hover,.ucs-cp-tab:hover,.ucs-cp-console-tab:hover { color: #fff; border-color: #4b6da7; transform: translateY(-1px); }
.ucs-cp-button.is-primary { color: #fff; background: #2563eb; border-color: #3b82f6; box-shadow: 0 7px 18px rgba(37,99,235,.28); }
.ucs-cp-button.is-secondary { background: transparent; }
.ucs-cp-switch { display: inline-flex; align-items: center; color: var(--ucs-cp-muted); font-size: 11px; cursor: pointer; }
.ucs-cp-switch input { position: absolute; opacity: 0; }
.ucs-cp-switch span { position: relative; width: 34px; height: 19px; margin-right: 5px; background: #36435d; border-radius: 999px; }
.ucs-cp-switch span::after { position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; content: ""; background: #fff; border-radius: 50%; transition: .16s; }
.ucs-cp-switch input:checked + span { background: #2563eb; }
.ucs-cp-switch input:checked + span::after { transform: translateX(15px); }
.ucs-cp-workspace { --ucs-cp-editor-width: 50%; display: grid; grid-template-columns: minmax(0,var(--ucs-cp-editor-width)) 5px minmax(0,1fr); min-height: 720px; }
.ucs-cp-workspace[data-layout="code"] { grid-template-columns: 1fr; }
.ucs-cp-workspace[data-layout="code"] .ucs-cp-splitter,.ucs-cp-workspace[data-layout="code"] .ucs-cp-preview-panel { display: none; }
.ucs-cp-workspace[data-layout="preview"] { grid-template-columns: 1fr; }
.ucs-cp-workspace[data-layout="preview"] .ucs-cp-editor-panel,.ucs-cp-workspace[data-layout="preview"] .ucs-cp-splitter { display: none; }
.ucs-cp-editor-panel,.ucs-cp-preview-panel { min-width: 0; min-height: 0; display: grid; background: var(--ucs-cp-panel); }
.ucs-cp-editor-panel { grid-template-rows: auto 1fr auto; }
.ucs-cp-preview-panel { grid-template-rows: auto minmax(370px,1fr) 220px; }
.ucs-cp-splitter { position: relative; z-index: 3; background: var(--ucs-cp-line); cursor: col-resize; touch-action: none; }
.ucs-cp-splitter:hover,.ucs-cp-splitter:focus { background: #3b82f6; outline: 0; }
.ucs-cp-editor-header,.ucs-cp-preview-header,.ucs-cp-console-header { min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; background: var(--ucs-cp-panel); border-bottom: 1px solid var(--ucs-cp-line); }
.ucs-cp-tabs,.ucs-cp-inline-tools,.ucs-cp-devices,.ucs-cp-console-header > div { display: flex; align-items: center; gap: 5px; }
.ucs-cp-tab { position: relative; border-color: transparent; background: transparent; color: var(--ucs-cp-muted); }
.ucs-cp-tab::before { width: 7px; height: 7px; margin-right: 6px; display: inline-block; content: ""; background: #f97316; border-radius: 50%; }
.ucs-cp-tab[data-language="css"]::before { background: #38bdf8; }
.ucs-cp-tab[data-language="js"]::before { background: #facc15; }
.ucs-cp-tab.is-active { color: var(--ucs-cp-text); background: var(--ucs-cp-panel-2); border-color: var(--ucs-cp-line); }
.ucs-cp-mini { min-height: 29px; padding: 5px 8px; background: transparent; color: var(--ucs-cp-muted); }
.ucs-cp-editor-stack { position: relative; min-height: 0; background: var(--ucs-cp-editor); }
.ucs-cp-editor-pane { position: absolute; inset: 0; }
.ucs-cp-editor-pane[hidden] { display: none; }
.ucs-cp-gutter { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 50px; overflow: hidden; margin: 0; padding: 17px 10px 60px 0; color: #52617b; background: color-mix(in srgb,var(--ucs-cp-editor) 94%,#fff 6%); border-right: 1px solid var(--ucs-cp-line); font: var(--ucs-cp-font)/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; text-align: right; user-select: none; }
.ucs-cp-editor-pane textarea { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; resize: none; margin: 0; padding: 16px 18px 70px 66px; color: var(--ucs-cp-editor-text); caret-color: var(--ucs-cp-accent); background: var(--ucs-cp-editor); border: 0; border-radius: 0; outline: 0; tab-size: 2; font: var(--ucs-cp-font)/1.65 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; white-space: pre-wrap; overflow: auto; }
.ucs-cp-statusbar { min-height: 32px; display: flex; align-items: center; gap: 12px; padding: 5px 11px; color: var(--ucs-cp-muted); background: var(--ucs-cp-panel-2); border-top: 1px solid var(--ucs-cp-line); font-size: 10px; }
.ucs-cp-statusbar strong { color: var(--ucs-cp-accent); }
.ucs-cp-main-status { overflow: hidden; margin-left: auto; text-overflow: ellipsis; white-space: nowrap; }
.ucs-cp-main-status[data-tone="success"] { color: var(--ucs-cp-green); }
.ucs-cp-main-status[data-tone="error"] { color: var(--ucs-cp-red); }
.ucs-cp-main-status[data-tone="warning"] { color: #fbbf24; }
.ucs-cp-device { min-width: 34px; padding: 5px 8px; background: transparent; color: var(--ucs-cp-muted); }
.ucs-cp-device.is-active { color: #fff; background: #2563eb; border-color: #3b82f6; }
.ucs-cp-stage { min-height: 370px; overflow: auto; display: flex; justify-content: center; padding: 14px; background-color: #dfe5ee; background-image: linear-gradient(45deg,#d4dbe5 25%,transparent 25%),linear-gradient(-45deg,#d4dbe5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d4dbe5 75%),linear-gradient(-45deg,transparent 75%,#d4dbe5 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; }
.ucs-cp-stage iframe { width: 100%; height: 100%; min-height: 100%; background: #fff; border: 0; border-radius: 4px; box-shadow: 0 12px 35px rgba(15,23,42,.18); transition: width .22s ease; }
.ucs-cp-stage[data-device="desktop"] iframe { width: 1200px; max-width: 100%; }
.ucs-cp-stage[data-device="tablet"] iframe { width: 768px; max-width: 100%; }
.ucs-cp-stage[data-device="mobile"] iframe { width: 390px; max-width: 100%; }
.ucs-cp-console { min-height: 0; display: grid; grid-template-rows: auto 1fr; background: var(--ucs-cp-editor); border-top: 1px solid var(--ucs-cp-line); }
.ucs-cp-console-header { min-height: 38px; }
.ucs-cp-console-tab { min-height: 28px; padding: 4px 8px; color: var(--ucs-cp-muted); background: transparent; border-color: transparent; }
.ucs-cp-console-tab.is-active { color: var(--ucs-cp-text); background: var(--ucs-cp-panel-2); }
.ucs-cp-console-tab b { display: inline-grid; min-width: 18px; height: 18px; place-items: center; margin-left: 4px; padding: 0 4px; color: #bfdbfe; background: #1e3a5f; border-radius: 999px; font-size: 9px; }
.ucs-cp-console-list,.ucs-cp-problem-list { min-height: 0; overflow: auto; padding: 6px 0; }
.ucs-cp-empty { margin: 0; padding: 18px; color: var(--ucs-cp-muted); font-size: 11px; }
.ucs-cp-log { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: start; gap: 9px; padding: 7px 11px; border-bottom: 1px solid color-mix(in srgb,var(--ucs-cp-line) 65%,transparent); font-size: 11px; }
.ucs-cp-log > span { color: #93c5fd; text-transform: uppercase; font-size: 9px; font-weight: 800; }
.ucs-cp-log pre { overflow-wrap: anywhere; margin: 0; color: var(--ucs-cp-text); white-space: pre-wrap; font: 11px/1.45 ui-monospace,monospace; }
.ucs-cp-log time { color: var(--ucs-cp-muted); font-size: 9px; }
.ucs-cp-log.is-warn { background: rgba(245,158,11,.07); }
.ucs-cp-log.is-warn > span { color: #fbbf24; }
.ucs-cp-log.is-error { background: rgba(244,63,94,.08); }
.ucs-cp-log.is-error > span { color: var(--ucs-cp-red); }
.ucs-cp-log.is-system > span { color: var(--ucs-cp-green); }
.ucs-cp-problem { margin: 5px 9px; padding: 9px 11px; color: #fecdd3; background: rgba(244,63,94,.1); border-left: 3px solid var(--ucs-cp-red); border-radius: 5px; font-size: 11px; }
.ucs-cp-problem.is-warning { color: #fde68a; background: rgba(245,158,11,.1); border-color: #f59e0b; }
.ucs-cp-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; min-height: 44px; padding: 7px 12px; color: var(--ucs-cp-muted); background: var(--ucs-cp-panel); border-top: 1px solid var(--ucs-cp-line); font-size: 10px; }
.ucs-cp-settings > span:first-child { color: var(--ucs-cp-text); font-weight: 750; }
.ucs-cp-settings > span:last-child { margin-left: auto; }
.ucs-cp-settings label { display: flex; align-items: center; gap: 5px; }
.ucs-cp.is-dragging { outline: 3px solid #60a5fa; outline-offset: -3px; }
@media (max-width: 1100px) {
  .ucs-cp-topbar .ucs-cp-project { flex: 1 0 100%; }
  .ucs-cp-workspace { min-height: 650px; }
}
@media (max-width: 899px) {
  .ucs-shell-code-studio.ucs-converter { padding: 8px; }
  .ucs-cp-workspace,.ucs-cp-workspace[data-layout="split"] { display: grid; grid-template-columns: 1fr; grid-template-rows: 560px 5px 650px; }
  .ucs-cp-splitter { cursor: row-resize; }
  .ucs-cp-preview-panel { grid-template-rows: auto minmax(350px,1fr) 220px; }
  .ucs-cp-settings > span:last-child { width: 100%; margin-left: 0; }
}
@media (max-width: 620px) {
  .ucs-cp-topbar { align-items: stretch; }
  .ucs-cp-project { min-width: 0; }
  .ucs-cp-project input { width: calc(100vw - 120px); }
  .ucs-cp-topbar select { flex: 1 1 150px; }
  .ucs-cp-button { flex: 1 1 auto; }
  .ucs-cp-switch { padding: 6px; }
  .ucs-cp-editor-header,.ucs-cp-preview-header { align-items: flex-start; flex-direction: column; }
  .ucs-cp-tabs,.ucs-cp-inline-tools,.ucs-cp-devices { width: 100%; overflow-x: auto; }
  .ucs-cp-editor-stack { min-height: 0; }
  .ucs-cp-workspace,.ucs-cp-workspace[data-layout="split"] { grid-template-rows: 520px 5px 620px; }
  .ucs-cp-preview-panel { grid-template-rows: auto minmax(315px,1fr) 220px; }
  .ucs-cp-statusbar { flex-wrap: wrap; }
  .ucs-cp-main-status { width: 100%; margin-left: 0; }
  .ucs-cp-log { grid-template-columns: 45px 1fr; }
  .ucs-cp-log time { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ucs-cp * { transition-duration: .01ms !important; } }