:root {
  --bg: #161c2c;
  --bg2: #1f2840;
  --panel: #20283d;
  --panel2: #1a2134;
  --line: #3f4c6f;
  --line-soft: #2d3856;
  --text: #d3dae9;
  --muted: #8c97b3;
  --accent: #45c0ba;
  --warn: #e0bb50;
  --danger: #d26464;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: Segoe UI, Tahoma, sans-serif;
  font-size: 13px;
  color: var(--text);
  background: radial-gradient(circle at top, #273454, #101523 70%);
}

button, input, select, textarea {
  font: inherit;
  color: var(--text);
}

.desktop-window {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #2f3a58;
  background: linear-gradient(180deg, #1d2640, #151c2f);
}

.desktop-window.minimized { height: 34px !important; overflow: hidden; }
.desktop-window.fullscreen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; width: 100%; height: 100%; }

.titlebar {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  background: linear-gradient(90deg, #1e5ca3, #23335b 60%, #171d2f);
  border-bottom: 1px solid #2f4574;
}

.app-title { font-size: 29px; font-weight: 600; letter-spacing: 0.3px; transform: scale(0.45); transform-origin: left center; width: 320px; }

.title-actions { display: flex; gap: 4px; }

.win-control {
  width: 24px;
  height: 20px;
  border: 1px solid #4d5d85;
  background: #212b44;
}

.win-control:hover { filter: brightness(1.15); transform: translateY(-1px); }

.win-control.close { background: #5f2d3a; }

.menubar, .toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #262f49, #1f2840);
}

.menubar button, .toolbar button {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #2d3754, #242d45);
  color: var(--text);
  padding: 5px 11px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s ease;
}

.menubar button {
  border: 0;
  background: transparent;
  padding: 2px 8px;
  font-weight: 400;
}

.menubar button:hover { color: #ffffff; background: rgba(93, 111, 156, 0.2); }
.toolbar button:hover { color: #ffffff; border-color: #7a8cb8; background: linear-gradient(180deg, #3a4563, #2f3851); }

.toolbar button:active { transform: scale(0.98); }
.toolbar button:disabled { opacity: 0.45; cursor: not-allowed; }

.workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 280px 1fr 330px;
  gap: 8px;
  padding: 8px;
}

.dock, .center-area {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  min-height: 0;
}

.dock {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dock-header {
  padding: 8px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #2b3551, #212b43);
  font-weight: 600;
}

.dock-body {
  padding: 8px;
  border-bottom: 1px solid var(--line-soft);
  overflow: auto;
}

.config-form label {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}

.row-check { display: flex !important; align-items: center; gap: 6px; margin-bottom: 6px; }

input, select, textarea {
  width: 100%;
  border: 1px solid #4b5a7f;
  background: #192037;
  padding: 4px 6px;
}

textarea { resize: vertical; }

.mini-actions { display: flex; gap: 6px; margin-bottom: 8px; }

.mono-box {
  margin: 0;
  border: 1px solid #445278;
  background: #141b2d;
  padding: 8px;
  color: #bdc7df;
  white-space: pre-wrap;
  overflow: auto;
  font-family: Consolas, monospace;
  font-size: 12px;
}

.mono-box.tall { min-height: 340px; max-height: 460px; }

.center-area {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tabs {
  display: flex;
  gap: 2px;
  padding: 6px 6px 0;
  border-bottom: 1px solid var(--line);
  background: #1b2338;
  overflow-x: auto;
}

.tab {
  border: 1px solid var(--line);
  border-bottom: none;
  background: #242e47;
  padding: 6px 10px;
  white-space: nowrap;
}

.tab.active {
  background: #11182b;
  color: #ffffff;
  position: relative;
  top: 1px;
}

.tab-panel {
  display: none;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px;
}

.tab-panel.active { display: block; }

.split-v {
  display: grid;
  grid-template-rows: 1fr 310px;
  gap: 8px;
  min-height: 0;
}

.panel-grid {
  display: grid;
  gap: 8px;
}

.panel-grid.two { grid-template-columns: 1fr 1fr; }

.panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #1c2438, #151c2f);
  padding: 6px;
  min-height: 0;
}

.panel-title {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.grid-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.grid-toolbar input { max-width: 220px; }

.column-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 6px;
  border: 1px solid var(--line-soft);
  padding: 6px;
  margin-bottom: 6px;
  background: #141b2e;
}

.column-panel.hidden { display: none; }

.grid-wrap {
  border: 1px solid var(--line-soft);
  background: #0f1627;
  overflow: auto;
  max-height: 330px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

th, td {
  border: 1px solid #2f3c5d;
  padding: 4px 6px;
  white-space: nowrap;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #26324e;
  cursor: pointer;
}

tbody tr:nth-child(even) td { background: #121a2d; }

tbody tr:hover td { background: #1a2843; }
.invalid-cell { background: #4b1f2c !important; color: #ffd8df; }

.cell-edit {
  width: 100%;
  border: 1px solid #63d7cf;
  background: #0f172a;
}

.pager { margin-top: 6px; display: flex; align-items: center; gap: 6px; }

canvas {
  width: 100%;
  border: 1px solid #3b4a70;
  background: #0f1627;
  cursor: crosshair;
}

.project-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.statusbar {
  display: grid;
  grid-template-columns: 1fr 160px 180px;
  gap: 8px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 6px 8px;
  background: #1b2237;
}

.statusbar span {
  border: 1px solid var(--line);
  background: #131a2b;
  padding: 4px 8px;
}

#statusMain.solving { color: var(--warn); }
#statusMain.error { color: var(--danger); }
#statusMain.ready { color: var(--accent); }

.wizard-dialog {
  width: min(1400px, 96vw);
  max-height: 86vh;
  border: 1px solid #4e6088;
  background: #18213a;
  color: var(--text);
}

.wizard-dialog form { padding: 10px; }
.wizard-wrap { max-height: 62vh; overflow: auto; border: 1px solid #344564; }
.wizard-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.wizard-table th, .wizard-table td { border: 1px solid #2f3f61; padding: 4px; }
.wizard-table th { background: #243250; position: sticky; top: 0; z-index: 2; }
.wizard-table td input, .wizard-table td select { min-width: 94px; }
.wizard-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; }

@media (max-width: 1600px) {
  .workspace { grid-template-columns: 260px 1fr; }
  .right-dock { grid-column: 1 / span 2; }
}

@media (max-width: 1100px) {
  .workspace { grid-template-columns: 1fr; }
  .panel-grid.two { grid-template-columns: 1fr; }
  .split-v { grid-template-rows: auto auto; }
}