:root {
  --uc-bg: #09090b;
  --uc-panel: #111116;
  --uc-panel-2: #17171f;
  --uc-line: #333342;
  --uc-text: #f7f7fb;
  --uc-muted: #a7a7b7;
  --uc-green: #39ff14;
  --uc-pink: #ff007f;
  --uc-cyan: #19d3e8;
  --uc-yellow: #ffe44d;
  --uc-red: #ff5c68;
}

#root {
  width: min(1500px, calc(100% - 32px));
  margin: 28px auto 80px;
}

.uc-shell {
  position: relative;
  overflow: hidden;
  color: var(--uc-text);
  background:
    radial-gradient(circle at 8% 0%, rgba(57,255,20,.10), transparent 28%),
    radial-gradient(circle at 100% 10%, rgba(255,0,127,.12), transparent 30%),
    linear-gradient(145deg, #0d0d12 0%, #09090b 64%, #10101a 100%);
  border: 1px solid #2c2c39;
  border-radius: 30px;
  box-shadow: 0 26px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.035);
  isolation: isolate;
}

.uc-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--uc-green), var(--uc-cyan), var(--uc-pink));
  height: 4px;
  z-index: 3;
}

.uc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  padding: clamp(24px, 4vw, 52px);
  border-bottom: 1px solid var(--uc-line);
}

.uc-kicker,
.uc-label,
.uc-console-label,
.uc-stat-label {
  font: 800 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #9fa0b2;
}

.uc-title {
  max-width: 1050px;
  margin: 10px 0 14px;
  font: 900 clamp(34px, 5vw, 76px)/.97 Inter, system-ui, sans-serif;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.uc-title span {
  color: var(--uc-green);
  text-shadow: 0 0 24px rgba(57,255,20,.23);
}

.uc-subtitle {
  max-width: 900px;
  margin: 0;
  color: #c6c6d4;
  font: 500 clamp(15px, 1.5vw, 19px)/1.65 Inter, system-ui, sans-serif;
}

.uc-engine-card {
  align-self: start;
  min-width: 250px;
  padding: 18px;
  background: rgba(18,18,26,.9);
  border: 1px solid #383846;
  border-radius: 18px;
  box-shadow: 8px 8px 0 rgba(255,0,127,.65);
}

.uc-engine-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font: 800 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.uc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9a9aa8;
  box-shadow: 0 0 0 4px rgba(154,154,168,.12);
}

.uc-dot[data-state="ready"] { background: var(--uc-green); box-shadow: 0 0 16px rgba(57,255,20,.65); }
.uc-dot[data-state="busy"] { background: var(--uc-yellow); animation: ucPulse 1s ease-in-out infinite; }
.uc-dot[data-state="error"] { background: var(--uc-red); box-shadow: 0 0 16px rgba(255,92,104,.6); }

@keyframes ucPulse { 50% { opacity: .35; transform: scale(.8); } }

.uc-engine-copy {
  color: var(--uc-muted);
  font: 600 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.uc-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(160px, .65fr) auto;
  gap: 12px;
  align-items: end;
  padding: 20px clamp(20px, 3vw, 36px);
  background: rgba(255,255,255,.018);
  border-bottom: 1px solid var(--uc-line);
}

.uc-field { min-width: 0; }
.uc-label { display: block; margin: 0 0 8px 3px; }

.uc-select,
.uc-input,
.uc-textarea {
  width: 100%;
  color: var(--uc-text);
  background: #09090e;
  border: 1px solid #3c3c4b;
  border-radius: 12px;
  outline: none;
  font: 650 14px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.uc-select,
.uc-input { min-height: 46px; padding: 0 13px; }
.uc-select option { color: #fff; background: #101017; }
.uc-input { padding: 11px 13px; }
.uc-textarea { min-height: 510px; padding: 20px; resize: vertical; tab-size: 2; white-space: pre; overflow: auto; }

.uc-select:focus,
.uc-input:focus,
.uc-textarea:focus {
  border-color: var(--uc-cyan);
  box-shadow: 0 0 0 3px rgba(25,211,232,.16);
  background: #0c0c12;
}

.uc-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.uc-btn {
  min-height: 46px;
  padding: 0 17px;
  border: 1px solid #444454;
  border-radius: 11px;
  color: #f9f9ff;
  background: #181820;
  font: 850 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.uc-btn:hover { transform: translateY(-2px); border-color: #69697d; background: #20202b; }
.uc-btn:active { transform: translateY(0); }
.uc-btn:focus-visible { outline: 3px solid rgba(25,211,232,.35); outline-offset: 2px; }
.uc-btn:disabled { opacity: .55; cursor: wait; transform: none; }
.uc-btn-primary { color: #071006; background: var(--uc-green); border-color: #62ff48; box-shadow: 5px 5px 0 rgba(255,0,127,.72); }
.uc-btn-primary:hover { background: #73ff5b; border-color: #9cff8c; box-shadow: 3px 3px 0 rgba(255,0,127,.72); }
.uc-btn-danger { color: #fff; border-color: rgba(255,92,104,.55); }

.uc-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  min-height: 680px;
}

.uc-editor-pane,
.uc-output-pane { min-width: 0; }
.uc-editor-pane { padding: 24px; border-right: 1px solid var(--uc-line); }
.uc-output-pane { padding: 24px; background: rgba(4,4,7,.48); }

.uc-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
}

.uc-pane-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 900 18px/1.2 Inter, system-ui, sans-serif;
}
.uc-pane-title::before { content: ""; width: 10px; height: 10px; background: var(--uc-green); box-shadow: 0 0 14px rgba(57,255,20,.62); }
.uc-output-pane .uc-pane-title::before { background: var(--uc-pink); box-shadow: 0 0 14px rgba(255,0,127,.62); }

.uc-file-note { color: #8e8e9e; font: 650 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }

.uc-code-wrap { position: relative; }
.uc-line-numbers {
  display: none;
}

.uc-advanced {
  margin-top: 14px;
  border: 1px solid #323240;
  border-radius: 14px;
  background: #101016;
  overflow: hidden;
}
.uc-advanced summary {
  cursor: pointer;
  padding: 14px 16px;
  color: #d9d9e5;
  font: 800 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.uc-advanced-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px 16px;
}
.uc-span-2 { grid-column: 1 / -1; }
.uc-file {
  display: block;
  width: 100%;
  min-height: 46px;
  color: #c9c9d5;
  background: #09090e;
  border: 1px dashed #4c4c5c;
  border-radius: 12px;
  padding: 10px;
  font: 650 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.uc-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.uc-stat {
  min-width: 0;
  padding: 12px;
  background: #101017;
  border: 1px solid #30303d;
  border-radius: 12px;
}
.uc-stat-value {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: #f9f9ff;
  font: 850 13px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uc-console {
  min-height: 510px;
  max-height: 680px;
  overflow: auto;
  padding: 18px;
  color: #f2f2f7;
  background: #020203;
  border: 1px solid #343441;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  font: 650 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.uc-console:empty::before { content: "Output akan muncul di sini setelah kode dijalankan."; color: #686878; }
.uc-console .ok { color: #7cff65; }
.uc-console .warn { color: #ffe66e; }
.uc-console .err { color: #ff7983; }
.uc-console .meta { color: #55dff0; }

.uc-preview {
  display: none;
  min-height: 510px;
  width: 100%;
  background: #fff;
  border: 1px solid #343441;
  border-radius: 14px;
}
.uc-output-pane[data-mode="preview"] .uc-console { display: none; }
.uc-output-pane[data-mode="preview"] .uc-preview { display: block; }

.uc-output-tabs { display: flex; gap: 8px; }
.uc-tab {
  padding: 8px 11px;
  color: #a9a9b9;
  background: #111118;
  border: 1px solid #353543;
  border-radius: 9px;
  font: 800 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
}
.uc-tab[aria-selected="true"] { color: #071006; background: var(--uc-green); border-color: var(--uc-green); }
.uc-tab[hidden] { display: none; }

.uc-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px clamp(20px, 3vw, 36px);
  color: #9696a8;
  border-top: 1px solid var(--uc-line);
  font: 650 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.uc-footer strong { color: #f2f2f7; }

.uc-toast {
  position: fixed;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 9999;
  transform: translate(-50%, 16px);
  max-width: min(90vw, 560px);
  padding: 12px 16px;
  color: #071006;
  background: var(--uc-green);
  border: 1px solid #92ff80;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  font: 850 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  transition: opacity .2s ease, transform .2s ease;
}
.uc-toast.show { opacity: 1; transform: translate(-50%, 0); }
.uc-toast.error { color: #fff; background: #b72d3b; border-color: #ff7a84; }

@media (max-width: 1100px) {
  .uc-hero { grid-template-columns: 1fr; }
  .uc-engine-card { min-width: 0; max-width: 460px; }
  .uc-toolbar { grid-template-columns: 1fr 1fr; }
  .uc-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .uc-workspace { grid-template-columns: 1fr; }
  .uc-editor-pane { border-right: 0; border-bottom: 1px solid var(--uc-line); }
}

@media (max-width: 700px) {
  #root { width: min(100% - 16px, 1500px); margin-top: 16px; }
  .uc-shell { border-radius: 18px; }
  .uc-hero { padding: 24px 18px; }
  .uc-title { font-size: clamp(34px, 12vw, 52px); }
  .uc-toolbar { grid-template-columns: 1fr; padding: 16px; }
  .uc-actions { grid-column: auto; display: grid; grid-template-columns: 1fr 1fr; }
  .uc-btn { width: 100%; padding-inline: 10px; }
  .uc-editor-pane, .uc-output-pane { padding: 16px; }
  .uc-textarea, .uc-console, .uc-preview { min-height: 430px; }
  .uc-stats { grid-template-columns: 1fr 1fr; }
  .uc-advanced-grid { grid-template-columns: 1fr; }
  .uc-span-2 { grid-column: auto; }
  .uc-pane-head { align-items: flex-start; flex-direction: column; }
  .uc-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}