:root {
  --radius: 10px;
  --radius-sm: 8px;
  --border: rgba(255,255,255,0.10);
  --panel-bg: linear-gradient(180deg, rgba(14,24,50,0.95), rgba(8,16,34,0.98));
  --panel-bg-solid: #0e1a36;
  --panel-alt: #122244;
  --body-bg: #07101f;
  --text: #e8eefb;
  --muted: #91a5cc;
  --accent: #2ca6ff;
  --accent-2: #18d1b1;
  --danger: #d45a6d;
  --success: #2fbf84;
  --warning: #f0ae49;
  --shadow: 0 12px 32px rgba(0,0,0,0.28);
  --scroll-track: rgba(255,255,255,0.05);
  --scroll-thumb: rgba(64,136,209,0.55);
}

body[data-theme="dark"] {
  --panel-bg: linear-gradient(180deg, rgba(24,24,28,0.96), rgba(16,16,18,0.98));
  --panel-bg-solid: #1b1b20;
  --panel-alt: #24242b;
  --body-bg: #0d0d11;
  --text: #f4f4f7;
  --muted: #aaaab6;
  --accent: #5e8cff;
  --accent-2: #00c9a7;
  --border: rgba(255,255,255,0.09);
  --scroll-thumb: rgba(110,110,130,0.65);
}

body[data-theme="light"] {
  --panel-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,247,252,0.98));
  --panel-bg-solid: #ffffff;
  --panel-alt: #f1f5fb;
  --body-bg: #e8eef7;
  --text: #152238;
  --muted: #5a6b83;
  --accent: #126cff;
  --accent-2: #00a88f;
  --border: rgba(17,33,61,0.12);
  --shadow: 0 12px 30px rgba(21,34,56,0.10);
  --scroll-track: rgba(0,0,0,0.05);
  --scroll-thumb: rgba(18,108,255,0.45);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, rgba(42,105,178,0.15), transparent 35%), var(--body-bg);
  color: var(--text);
  overflow: hidden;
}

button, select, input, textarea { font: inherit; }

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-height: 0;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px 6px 1fr;
  height: 100vh;
  gap: 0;
  padding: 12px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  padding: 14px;
  min-height: 0;
}

.brand { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.brand-logo {
  width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; font-weight: 800;
}
.brand-title { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.brand-subtitle { color: var(--muted); margin-top: 2px; }
.sidebar-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.sidebar-section.fill { flex: 1; min-height: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.control {
  width: 100%; background: rgba(0,0,0,0.18); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
}
body[data-theme="light"] .control { background: rgba(255,255,255,0.82); }

.file-tree {
  flex: 1; overflow: auto; min-height: 0; border: 1px solid var(--border); border-radius: 8px; padding: 8px;
  background: rgba(0,0,0,0.12);
}
body[data-theme="light"] .file-tree { background: rgba(255,255,255,0.6); }

.file-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer; color: var(--text); border: 1px solid transparent;
}
.file-item:hover { background: rgba(255,255,255,0.05); }
.file-item.active { border-color: rgba(44,166,255,0.40); background: rgba(44,166,255,0.12); }
.file-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-badge { font-size: 0.75rem; color: var(--muted); }

.workspace { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.topbar { padding: 14px 16px; display: flex; justify-content: space-between; gap: 12px; }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 12px; }
.page-title { font-size: 1.2rem; font-weight: 700; }
.page-subtitle { color: var(--muted); }
.status-pill { padding: 9px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.compact-width { width: 220px; }

.workspace-content {
  display: grid;
  grid-template-columns: 1fr 6px minmax(360px, 42%);
  flex: 1;
  min-height: 0;
}

.editor-zone, .right-zone { min-width: 0; min-height: 0; }
.editor-zone { display: flex; flex-direction: column; }
.right-zone {
  display: grid;
  grid-template-rows: minmax(240px, 1fr) 6px minmax(240px, 0.75fr);
  min-height: 0;
}
.bottom-right-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(260px, 1.1fr);
  gap: 12px;
  min-height: 0;
}
.preview-zone, .console-zone, .tools-zone { display: flex; flex-direction: column; min-height: 0; }

.panel-header {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.panel-title { font-size: 1.08rem; font-weight: 700; }
.panel-subtitle { color: var(--muted); margin-top: 2px; }
.inline-actions { display: flex; gap: 8px; align-items: center; }
.inline-actions.wrap { flex-wrap: wrap; }
.inline-actions.compact { gap: 6px; }
.full { width: 100%; }

.btn {
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
}
.btn:hover { background: rgba(255,255,255,0.08); }
.btn-primary { background: rgba(44,166,255,0.18); border-color: rgba(44,166,255,0.35); }
.btn-danger { background: rgba(212,90,109,0.12); border-color: rgba(212,90,109,0.25); }
.btn-small { padding: 7px 10px; font-size: 0.9rem; }
.btn-ghost { background: transparent; }

.file-tabs {
  display: flex; gap: 6px; overflow: auto; padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.file-tab {
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer;
  color: var(--muted); white-space: nowrap;
}
.file-tab.active { color: var(--text); background: rgba(44,166,255,0.12); border-color: rgba(44,166,255,0.35); }

.editor-stack {
  position: relative;
  flex: 1;
  min-height: 0;
}
.editor-pane, .fallback-editor {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.fallback-editor {
  resize: none; border: 0; outline: none; background: transparent; color: var(--text);
  padding: 16px; line-height: 1.45; font-family: "Cascadia Code", "Fira Code", monospace;
}
.hidden { display: none !important; }

.preview-frame { border: 0; flex: 1; width: 100%; background: white; }
.console-output, .result-box, .json-tree, .tool-output {
  flex: 1; min-height: 0; overflow: auto; margin: 12px; padding: 12px; border: 1px solid var(--border);
  border-radius: 8px; background: rgba(0,0,0,0.18);
}
body[data-theme="light"] .console-output,
body[data-theme="light"] .result-box,
body[data-theme="light"] .json-tree,
body[data-theme="light"] .tool-output { background: rgba(255,255,255,0.68); }

.console-line { font-family: "Cascadia Code", monospace; padding: 2px 0; white-space: pre-wrap; }
.console-line.error { color: #ff909f; }
.console-line.warn { color: #ffc96b; }
.console-line.info { color: var(--muted); }
.console-line.log { color: var(--text); }
.result-box, .tool-output { font-family: "Cascadia Code", monospace; white-space: pre-wrap; }
.tool-output { width: calc(100% - 24px); resize: none; color: var(--text); }

.tool-tabs { display: flex; gap: 6px; padding: 10px 12px 0; }
.tool-tab {
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.tool-tab.active { color: var(--text); background: rgba(44,166,255,0.12); border-color: rgba(44,166,255,0.35); }
.tool-panels { flex: 1; min-height: 0; }
.tool-panel { display: none; height: 100%; min-height: 0; }
.tool-panel.active { display: flex; flex-direction: column; }

.json-node { font-family: "Cascadia Code", monospace; line-height: 1.5; }
.json-row { padding-left: 16px; position: relative; }
.json-toggle { cursor: pointer; color: var(--accent); margin-right: 6px; }
.json-key { color: var(--accent-2); }
.json-value.string { color: #f6b26b; }
.json-value.number { color: #8ad6ff; }
.json-value.boolean { color: #d394ff; }
.json-value.null { color: #b9a4a4; }

.splitter {
  background: transparent;
  position: relative;
  z-index: 10;
}
.splitter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
}
.splitter-vertical { cursor: col-resize; width: 6px; }
.splitter-horizontal { cursor: row-resize; height: 6px; }
.splitter:hover::before { background: rgba(44,166,255,0.28); }

.monaco-editor, .monaco-editor-background, .margin { background: transparent !important; }
.monaco-editor .lines-content, .monaco-editor .view-lines { font-family: "Cascadia Code", "Fira Code", monospace !important; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }

@media (max-width: 1200px) {
  .app-shell { grid-template-columns: 240px 6px 1fr; }
  .workspace-content { grid-template-columns: 1fr; grid-template-rows: minmax(320px, 1fr) 6px minmax(320px, 0.95fr); }
  #splitMain { width: auto; height: 6px; cursor: row-resize; }
  .right-zone { grid-template-rows: minmax(240px, 1fr) 6px minmax(240px, 0.9fr); }
}


:root{
  --panel-bg:#101a28;
  --body-bg:#0b1420;
  --text:#e6eef9;
  --muted:#9cb0c7;
  --accent:#1683ff;
  --accent-2:#0f6bd2;
  --border:rgba(35,53,77,.92);
  --shadow:0 18px 40px rgba(0,0,0,.24);
  --scroll-track:rgba(255,255,255,0.03);
  --scroll-thumb:rgba(22,131,255,0.38);
}
body{font-family:var(--sys-font, Inter, system-ui, sans-serif)}
.btn,.control,.file-item,.file-tab,.tool-tab,.status-pill,.brand-logo,.panel,.sidebar,.console-output,.result-box,.json-tree,.tool-output{border-radius:8px}
.panel,.sidebar{border-radius:12px}
.btn{font-weight:600}
.btn-primary{background:linear-gradient(180deg,var(--accent),var(--accent-2));border-color:rgba(76,156,255,.45)}
.control,.file-tree,.console-output,.result-box,.json-tree,.tool-output{background:#0f1928}
.file-item.active,.file-tab.active,.tool-tab.active{background:rgba(22,131,255,0.12);border-color:rgba(22,131,255,0.35)}
.brand-logo{background:linear-gradient(180deg,var(--accent),var(--accent-2));box-shadow:none}
.sys-switcher{margin-bottom:4px}


/* layout refresh: compact buttons + right tabs */
.workspace-content { grid-template-columns: minmax(420px, 1fr) 6px minmax(420px, 48%); }
.right-zone { display:flex; flex-direction:column; min-height:0; overflow:hidden; padding:0; }
.right-zone-tabs { display:flex; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); background:rgba(255,255,255,0.02); }
.right-tab { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background:transparent; color:var(--muted); padding:7px 12px; border-radius:8px; cursor:pointer; font-weight:600; }
.right-tab.active { color:var(--text); background:rgba(22,131,255,0.14); border-color:rgba(22,131,255,0.38); }
.right-panels { position:relative; flex:1; min-height:0; }
.right-panel { display:none; flex-direction:column; min-height:0; height:100%; }
.right-panel.active { display:flex; }
.preview-zone,.console-zone,.tools-zone { min-height:0; }
.panel-header { padding:12px 14px; }
.inline-actions { gap:6px; }
.btn, .tool-tab { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:7px 10px; font-size:.88rem; line-height:1.1; }
.btn-small { padding:6px 9px; font-size:.82rem; }
.btn-icon { display:inline-flex; align-items:center; justify-content:center; min-width:14px; font-size:.9em; opacity:.92; }
.topbar { padding:12px 14px; }
.tool-tabs { padding:10px 12px 0; }
.tool-actions { padding:10px 12px 0; }
.console-output, .result-box, .json-tree, .tool-output { margin:10px 12px 12px; }
.tool-output { width: calc(100% - 24px); }
@media (max-width: 1200px) {
  .workspace-content { grid-template-columns: 1fr; grid-template-rows: minmax(320px, 1fr) 6px minmax(300px, .92fr); }
  .right-zone-tabs { overflow:auto; }
}


/* Official Sysimple alignment */
body[data-theme="sysimple"] {
  --panel-bg: #ffffff;
  --panel-bg-solid: #ffffff;
  --panel-alt: #f7faff;
  --body-bg: #edf3f9;
  --text: #162235;
  --muted: #6f819b;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --border: #d9e3ef;
  --shadow: 0 10px 28px rgba(15,23,42,.06);
  --scroll-track: rgba(15,23,42,0.04);
  --scroll-thumb: rgba(37,99,235,0.22);
}
body[data-theme="sysimple"]{
  background:linear-gradient(180deg,#f7faff 0%, #edf3f9 100%) !important;
}
body[data-theme="sysimple"] .panel,
body[data-theme="sysimple"] .sidebar,
body[data-theme="sysimple"] header.topbar.panel{
  background:#ffffff !important;
  border:1px solid #d9e3ef !important;
  box-shadow:0 10px 28px rgba(15,23,42,.06) !important;
}
body[data-theme="sysimple"] .brand-logo{
  background:linear-gradient(135deg,#2563eb,#1d4ed8) !important;
}
body[data-theme="sysimple"] .btn:not(.btn-danger):not(.primary),
body[data-theme="sysimple"] .control,
body[data-theme="sysimple"] input,
body[data-theme="sysimple"] select,
body[data-theme="sysimple"] textarea{
  background:#ffffff !important;
  color:#162235 !important;
  border-color:#d9e3ef !important;
  box-shadow:none !important;
}
body[data-theme="sysimple"] .status-pill,
body[data-theme="sysimple"] .file-tab,
body[data-theme="sysimple"] .right-tab,
body[data-theme="sysimple"] .tool-tab{
  background:#f7faff !important;
  color:#6f819b !important;
  border-color:#d9e3ef !important;
}
body[data-theme="sysimple"] .right-tab.active,
body[data-theme="sysimple"] .tool-tab.active,
body[data-theme="sysimple"] .file-tab.active{
  background:#eef4ff !important;
  color:#2563eb !important;
  border-color:#cfe0ff !important;
}


body[data-sysimple-shell="true"] .app-shell{
  min-height:calc(100vh - 58px);
  height:calc(100vh - 58px);
}
body[data-theme="dark"] {
  --panel-bg: linear-gradient(180deg, rgba(20,27,43,0.98), rgba(15,23,38,0.99));
  --panel-bg-solid: #141b2b;
  --panel-alt: #1a2438;
  --body-bg: #0b1220;
  --text: #e7eef9;
  --muted: #93a8c3;
  --accent: #4ea1ff;
  --accent-2: #2f7fe0;
  --border: rgba(112,146,196,0.22);
  --shadow: 0 18px 40px rgba(3,8,20,0.32);
  --scroll-thumb: rgba(78,161,255,0.35);
}
body[data-theme="dark"]{
  background:
    radial-gradient(circle at top right, rgba(78,161,255,0.14), transparent 24%),
    linear-gradient(180deg,#09111b 0%, #0d1727 100%) !important;
}
body[data-theme="dark"] .panel,
body[data-theme="dark"] .sidebar,
body[data-theme="dark"] header.topbar.panel,
body[data-theme="dark"] .editor-zone,
body[data-theme="dark"] .right-zone{
  border-color:rgba(112,146,196,0.22) !important;
  box-shadow:0 18px 40px rgba(3,8,20,.30) !important;
}
body[data-theme="dark"] .btn:not(.btn-danger):not(.primary),
body[data-theme="dark"] .control,
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea{
  background:#0f1728 !important;
  color:#e7eef9 !important;
  border-color:#233651 !important;
}
body[data-theme="dark"] .right-tab.active,
body[data-theme="dark"] .tool-tab.active,
body[data-theme="dark"] .file-tab.active{
  background:#162d52 !important;
  color:#7fc0ff !important;
  border-color:#27476d !important;
}


/* ===== Dashboard-aligned tool shell ===== */
body.tool-dashboard-page{
  --tool-bg:#edf3f9;
  --tool-rail:#e6eef5;
  --tool-surface:#ffffff;
  --tool-surface-2:#f7f9fb;
  --tool-line:#d9e2ea;
  --tool-line-strong:#b9cbdc;
  --tool-text:#2e3b46;
  --tool-muted:#7f8d99;
  --tool-blue:#2d5d8f;
  --tool-blue-dark:#244f7c;
  --tool-accent:#3c9aca;
  --tool-shadow:0 2px 10px rgba(33,54,76,.10);
  background:var(--tool-bg) !important;
  color:var(--tool-text) !important;
}

body.tool-dashboard-page .app-topbar{
  min-height:62px !important;
  padding:0 14px !important;
  background:linear-gradient(180deg,var(--tool-blue) 0%, var(--tool-blue-dark) 100%) !important;
  border-bottom:1px solid #1e426b !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(24,55,88,.22) !important;
}

body.tool-dashboard-page .topbar-brand-panel{
  min-height:62px;
  padding:0 14px 0 0 !important;
  border-right:1px solid rgba(255,255,255,.14) !important;
}

body.tool-dashboard-page .app-topbar .brand-title{
  color:#fff !important;
  font-size:16px !important;
  font-weight:700 !important;
}

body.tool-dashboard-page .app-topbar .brand-subtitle,
body.tool-dashboard-page .topbar-theme-picker span{
  color:rgba(255,255,255,.72) !important;
}

body.tool-dashboard-page .brand-logo-image{
  width:38px;
  height:38px;
  background:#fff;
  padding:3px;
}

body.tool-dashboard-page .topbar-theme-select{
  min-height:34px !important;
  height:34px !important;
  border-radius:0 !important;
  background:#f0f4f7 !important;
  border:1px solid rgba(15,45,80,.25) !important;
  color:#40505d !important;
  box-shadow:none !important;
}

body.tool-dashboard-page .app-shell{
  padding:0;
  gap:0;
  background:var(--tool-bg);
}

body.tool-dashboard-page .sidebar{
  background:var(--tool-rail) !important;
  border-right:1px solid var(--tool-line-strong) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

body.tool-dashboard-page .workspace{
  gap:10px;
  padding:10px;
  background:var(--tool-bg);
}

body.tool-dashboard-page .panel,
body.tool-dashboard-page .topbar.panel,
body.tool-dashboard-page .editor-zone,
body.tool-dashboard-page .right-zone{
  background:var(--tool-surface) !important;
  border:1px solid var(--tool-line) !important;
  border-radius:0 !important;
  box-shadow:var(--tool-shadow) !important;
  color:var(--tool-text) !important;
}

body.tool-dashboard-page .brand{
  border-bottom-color:var(--tool-line);
}

body.tool-dashboard-page .brand-logo{
  border-radius:0 !important;
  background:#e8f3fa !important;
  border:1px solid #cddce8 !important;
  color:var(--tool-accent) !important;
  box-shadow:none !important;
}

body.tool-dashboard-page .brand-title,
body.tool-dashboard-page .page-title,
body.tool-dashboard-page .panel-title{
  color:var(--tool-text) !important;
}

body.tool-dashboard-page .brand-subtitle,
body.tool-dashboard-page .page-subtitle,
body.tool-dashboard-page .panel-subtitle,
body.tool-dashboard-page .section-head,
body.tool-dashboard-page .status-pill{
  color:var(--tool-muted) !important;
}

body.tool-dashboard-page .btn,
body.tool-dashboard-page .control,
body.tool-dashboard-page input,
body.tool-dashboard-page select,
body.tool-dashboard-page textarea,
body.tool-dashboard-page .file-tree,
body.tool-dashboard-page .file-item,
body.tool-dashboard-page .file-tab,
body.tool-dashboard-page .right-tab,
body.tool-dashboard-page .tool-tab,
body.tool-dashboard-page .console-output,
body.tool-dashboard-page .result-box,
body.tool-dashboard-page .json-tree,
body.tool-dashboard-page .tool-output{
  background:var(--tool-surface-2) !important;
  border:1px solid var(--tool-line) !important;
  border-radius:0 !important;
  color:var(--tool-text) !important;
  box-shadow:none !important;
}

body.tool-dashboard-page .btn-primary,
body.tool-dashboard-page .active-mode,
body.tool-dashboard-page .file-tab.active,
body.tool-dashboard-page .right-tab.active,
body.tool-dashboard-page .tool-tab.active,
body.tool-dashboard-page .file-item.active{
  background:#d7ecf8 !important;
  border-color:#8cc5e3 !important;
  color:#236d98 !important;
}

body.tool-dashboard-page .btn-danger{
  background:#ffe9e6 !important;
  border-color:#e0aaa4 !important;
  color:#a23d34 !important;
}

body.tool-dashboard-page .splitter::before{
  background:var(--tool-line-strong);
}

body.tool-dashboard-page[data-theme="light"]{
  --tool-bg:#f3f5f8;
  --tool-rail:#eef3f7;
  --tool-surface:#ffffff;
  --tool-surface-2:#f8fafc;
  --tool-line:#d9e0e8;
  --tool-line-strong:#c6d3df;
  --tool-text:#162235;
  --tool-muted:#73849a;
}

body.tool-dashboard-page[data-theme="light"] .app-topbar{
  background:#fff !important;
  border-bottom-color:var(--tool-line) !important;
  color:var(--tool-text) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.06) !important;
}

body.tool-dashboard-page[data-theme="light"] .app-topbar .brand-title{ color:var(--tool-text) !important; }
body.tool-dashboard-page[data-theme="light"] .app-topbar .brand-subtitle,
body.tool-dashboard-page[data-theme="light"] .topbar-theme-picker span{ color:var(--tool-muted) !important; }

body.tool-dashboard-page[data-theme="dark"]{
  --tool-bg:#1e1e1e;
  --tool-rail:#202020;
  --tool-surface:#252526;
  --tool-surface-2:#2d2d30;
  --tool-line:#3c3c3c;
  --tool-line-strong:#4a4a4a;
  --tool-text:#d4d4d4;
  --tool-muted:#a8b0ba;
  --tool-blue:#252526;
  --tool-blue-dark:#202020;
  --tool-accent:#3794ff;
  --tool-shadow:0 0 0 1px rgba(60,60,60,.70);
}

body.tool-dashboard-page[data-theme="dark"] .app-topbar{
  background:linear-gradient(180deg,#252526,#202020) !important;
  border-bottom-color:var(--tool-line) !important;
}

body.tool-dashboard-page[data-theme="dark"] .topbar-theme-select{
  background:#2d2d30 !important;
  color:#d4d4d4 !important;
  border-color:#3c3c3c !important;
}


/* ===== DISTINCT THEMES : JAVATOOLS ===== */

body[data-theme="light"]{
  --panel-bg: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(244,247,252,0.99));
  --panel-bg-solid: #ffffff;
  --panel-alt: #f1f5fb;
  --body-bg: #eef2f6;
  --text: #162235;
  --muted: #687b93;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --border: rgba(17,33,61,0.12);
  --shadow: 0 12px 30px rgba(21,34,56,0.08);
  --scroll-track: rgba(0,0,0,0.05);
  --scroll-thumb: rgba(37,99,235,0.25);
}
body[data-theme="light"]{
  background:linear-gradient(180deg,#ffffff 0%, #f2f5f9 100%) !important;
}

body[data-theme="sysimple"]{
  --panel-bg: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(238,245,255,0.99));
  --panel-bg-solid: #ffffff;
  --panel-alt: #eef4ff;
  --body-bg: #e8f1ff;
  --text: #13233b;
  --muted: #5d7394;
  --accent: #2563eb;
  --accent-2: #0ea5e9;
  --border: rgba(37,99,235,0.16);
  --shadow: 0 12px 30px rgba(37,99,235,0.10);
  --scroll-track: rgba(37,99,235,0.06);
  --scroll-thumb: rgba(37,99,235,0.28);
}
body[data-theme="sysimple"]{
  background:
    radial-gradient(circle at top right, rgba(37,99,235,0.12), transparent 28%),
    linear-gradient(180deg,#f4f8ff 0%, #e8f1ff 100%) !important;
}
body[data-theme="sysimple"] .panel,
body[data-theme="sysimple"] .sidebar,
body[data-theme="sysimple"] header.topbar.panel,
body[data-theme="sysimple"] .editor-zone,
body[data-theme="sysimple"] .right-zone{
  border-color:rgba(37,99,235,0.16) !important;
  box-shadow:0 12px 30px rgba(37,99,235,0.10) !important;
}
body[data-theme="sysimple"] .status-pill,
body[data-theme="sysimple"] .file-tab,
body[data-theme="sysimple"] .right-tab,
body[data-theme="sysimple"] .tool-tab{
  background:#f4f8ff !important;
  color:#5d7394 !important;
  border-color:#cfe0ff !important;
}
body[data-theme="sysimple"] .right-tab.active,
body[data-theme="sysimple"] .tool-tab.active,
body[data-theme="sysimple"] .file-tab.active{
  background:#e8f1ff !important;
  color:#2563eb !important;
  border-color:#cfe0ff !important;
}
body[data-theme="sysimple"] .btn:not(.btn-danger):not(.primary),
body[data-theme="sysimple"] .control,
body[data-theme="sysimple"] input,
body[data-theme="sysimple"] select,
body[data-theme="sysimple"] textarea{
  border-color:#cfe0ff !important;
}

body[data-theme="dark"]{
  --panel-bg: linear-gradient(180deg, rgba(18,27,43,0.99), rgba(14,23,38,0.99));
  --panel-bg-solid: #121b2b;
  --panel-alt: #18253b;
  --body-bg: #0a1220;
  --text: #e8eef8;
  --muted: #96abc5;
  --accent: #58a6ff;
  --accent-2: #2f7fe0;
  --border: rgba(112,146,196,0.22);
  --shadow: 0 18px 40px rgba(3,8,20,0.34);
  --scroll-thumb: rgba(88,166,255,0.32);
}
body[data-theme="dark"]{
  background:
    radial-gradient(circle at top right, rgba(88,166,255,0.16), transparent 24%),
    linear-gradient(180deg,#08111c 0%, #0c1626 100%) !important;
}
body[data-theme="dark"] .panel,
body[data-theme="dark"] .sidebar,
body[data-theme="dark"] header.topbar.panel,
body[data-theme="dark"] .editor-zone,
body[data-theme="dark"] .right-zone{
  border-color:rgba(112,146,196,0.22) !important;
  box-shadow:0 18px 40px rgba(3,8,20,0.34) !important;
}
body[data-theme="dark"] .status-pill,
body[data-theme="dark"] .file-tab,
body[data-theme="dark"] .right-tab,
body[data-theme="dark"] .tool-tab{
  background:#15233b !important;
  color:#96abc5 !important;
  border-color:#223753 !important;
}
body[data-theme="dark"] .right-tab.active,
body[data-theme="dark"] .tool-tab.active,
body[data-theme="dark"] .file-tab.active{
  background:#162d52 !important;
  color:#7fc0ff !important;
  border-color:#27476d !important;
}