/* ---------- base ---------- */
* { box-sizing: border-box; }
*:focus, *:focus-visible { outline: none !important; box-shadow: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #f0f0f0; }
body {
  font: 12px "Segoe UI", Tahoma, "Noto Sans", "DejaVu Sans", Arial, sans-serif;
  color: #000;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
ul { list-style: none; margin: 0; padding: 0; }
button, input, select { font: inherit; }
.spacer { flex: 1; }
.dim { color: #8a8a8a; }
.mono { font-family: Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace; font-size: 12px; }

/* ---------- the three apps, stacked & cross-faded ---------- */
#stage { position: fixed; inset: 0; }
.app {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.app.active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .45s ease, visibility 0s;
}

/* ---------- editor (shared by all apps) ---------- */
.editor {
  flex: 1; display: flex; min-height: 0; background: #fff; position: relative;
  font-family: Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
  font-size: 13px; line-height: 18px;
}
.gutter {
  margin: 0; padding: 4px 8px 60px 6px; min-width: 44px; text-align: right;
  overflow: hidden; color: #8a8a8a; background: #f7f7f7; border-right: 1px solid #e3e3e3;
  font: inherit; line-height: inherit;
}
.code {
  flex: 1; border: 0; margin: 0; padding: 4px 8px; resize: none;
  font: inherit; line-height: inherit; color: #000; background: transparent;
  white-space: pre; overflow: auto; tab-size: 4;
  user-select: text; -webkit-user-select: text;
  caret-color: #000;
}
/* Selected text: only the text colour changes. No highlight box, no border. */
.code::selection      { background: transparent; color: var(--sel, #c0004e); }
.code::-moz-selection { background: transparent; color: var(--sel, #c0004e); }
::selection           { background: transparent; }

/* ---------- generic UI bits ---------- */
.titlebar { display: flex; align-items: center; height: 30px; padding-left: 8px; flex: none; }
.titlebar .title { flex: 1; margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.winbtns { display: flex; height: 100%; }
.winbtns b { width: 46px; display: grid; place-items: center; font-weight: normal; cursor: default; }
.winbtns b:hover { background: rgba(0,0,0,.08); }
.winbtns b.x:hover { background: #e81123; color: #fff; }

.menubar { display: flex; align-items: center; height: 24px; padding: 0 4px; flex: none; }
.menubar .m { padding: 3px 8px; cursor: default; }
.menubar .m:hover, .menubar .m.open { background: #cce8ff; }
.menubar u { text-decoration: underline; }

.toolbar { display: flex; align-items: center; gap: 3px; height: 30px; padding: 0 6px; flex: none; }
.toolbar s { width: 1px; height: 18px; background: #c8c8c8; margin: 0 4px; }
.toolbar .ic { margin: 0 2px; cursor: default; }

.statusbar { display: flex; align-items: center; gap: 18px; height: 22px; padding: 0 8px; flex: none; }

.tree li > ul { padding-left: 16px; }
.tree li.closed > ul { display: none; }
.tree .row { display: flex; align-items: center; gap: 5px; padding: 2px 4px; white-space: nowrap; cursor: default; }
.tree .row:hover { background: #e5f3ff; }
.tree .row.sel { background: #cce8ff; }
.tw { width: 12px; flex: none; text-align: center; color: #555; font-size: 9px; }
.tw.leaf { visibility: hidden; }

.pane { display: none; flex: 1; min-height: 0; flex-direction: column; }
.pane.active { display: flex; }
.tabwrap { display: flex; flex-direction: column; min-height: 0; }
.tab { cursor: default; }

.pbody { flex: 1; overflow: auto; background: #fff; min-height: 0; }

/* ---------- icons (pure CSS) ---------- */
.ic { display: inline-block; width: 16px; height: 16px; flex: none; position: relative; vertical-align: middle; }
.ic.g      { background: #bdbdbd; border-radius: 3px; opacity: .45; transform: scale(.8); }
.ic.doc    { background: #fff; border: 1px solid #7a7a7a; width: 12px; height: 15px; }
.ic.doc::after { content: ""; position: absolute; left: 2px; right: 2px; top: 4px; height: 6px; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; }
.ic.open, .ic.folder { background: linear-gradient(#f6d77a, #e5b33b); border-radius: 1px 3px 2px 2px; height: 12px; margin-top: 2px; }
.ic.save   { background: #4a6ea8; border-radius: 2px; box-shadow: inset 0 -6px 0 #dfe6f2; transform: scale(.85); }
.ic.play   { width: 0; height: 0; border-left: 13px solid #22a822; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.ic.chip   { background: #7b5ea7; border-radius: 3px; transform: scale(.75); box-shadow: 0 0 0 2px #cfc3e6; }
.ic.bubble { background: #2a9bdc; border-radius: 50% 50% 50% 0; transform: scale(.8); }
.ic.warn   { background: #f2c12e; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ic.info   { background: #2b7cd3; border-radius: 50%; transform: scale(.75); }
.ic.info::after { content: "i"; position: absolute; inset: 0; color: #fff; font: bold 11px/16px serif; text-align: center; }
.ic.err    { background: #d9342b; border-radius: 50%; transform: scale(.85); }
.ic.err::after { content: "\2715"; position: absolute; inset: 0; color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
.ic.tri    { width: 0; height: 0; border-left: 9px solid #7d7d7d; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin: 0 3px; }
.ic.home::after { content: "\2302"; position: absolute; inset: 0; font-size: 15px; line-height: 16px; color: #555; text-align: center; }
.ic.gear::after { content: "\2699"; position: absolute; inset: -1px; font-size: 16px; line-height: 16px; color: #2c5aa0; text-align: center; }
.ic.sigma::after { content: "\03A3"; position: absolute; inset: 0; font: bold 16px/16px serif; color: #2c5aa0; text-align: center; }
.ic.search::after { content: "\26B2"; position: absolute; inset: 0; font-size: 15px; line-height: 16px; color: #2c5aa0; text-align: center; transform: rotate(-45deg); }
.ic.dl     { background: linear-gradient(#22a822 0 0) center/4px 10px no-repeat; }
.ic.dl::after { content: ""; position: absolute; left: 3px; bottom: 0; border-top: 6px solid #22a822; border-left: 5px solid transparent; border-right: 5px solid transparent; }
.ic.ipc    { background: #4a6ea8; transform: scale(.65); box-shadow: 0 0 0 3px #b7c6e0; }
.ic.vfile, .ic.cfile, .ic.hfile { background: #fff; border: 1px solid #7a7a7a; width: 12px; height: 15px; }
.ic.vfile::after, .ic.cfile::after, .ic.hfile::after { position: absolute; inset: 0; font: bold 9px/14px sans-serif; text-align: center; }
.ic.vfile::after { content: "V"; color: #2c7a2c; }
.ic.cfile::after { content: "c"; color: #2c5aa0; }
.ic.hfile::after { content: "h"; color: #8a4ab0; }
.ic.globe2 { background: radial-gradient(circle at 35% 35%, #7fd17f, #1f8f3a); border-radius: 50%; transform: scale(.85); }
.ic.bug    { background: #5b8f2a; border-radius: 45%; transform: scale(.7); }
.ic.hammer { background: linear-gradient(90deg, transparent 40%, #8b6b3c 40% 60%, transparent 60%), linear-gradient(#777 0 0) top/100% 5px no-repeat; }
.ic.thread { background: #e0b13a; border-radius: 50%; transform: scale(.55); }

/* ---------- dropdown menu ---------- */
.dropdown {
  position: fixed; display: none; z-index: 1000; min-width: 190px; padding: 3px 0;
  background: #f2f2f2; border: 1px solid #a0a0a0; box-shadow: 2px 3px 6px rgba(0,0,0,.25);
  font: 12px "Segoe UI", Tahoma, "Noto Sans", Arial, sans-serif;
}
.dropdown div { padding: 4px 26px; cursor: default; white-space: nowrap; }
.dropdown div:hover { background: #91c9f7; }
.dropdown hr { border: 0; border-top: 1px solid #d0d0d0; margin: 3px 2px; }


/* =========================================================
   QUARTUS
   ========================================================= */
.quartus { --sel: #0b3fc7; background: #f0f0f0; border: 1px solid #1d9bc6; }
.quartus .titlebar { background: #1ea0c9; color: #fff; }
.quartus .logo-q { width: 16px; height: 16px; background: conic-gradient(#fff 0 25%, #a8e1f2 0 50%, #fff 0 75%, #a8e1f2 0); border-radius: 50%; }
.quartus .winbtns b:hover { background: rgba(255,255,255,.2); }
.quartus .menubar { background: #f0f0f0; }
.quartus .qsearch { width: 140px; height: 20px; border: 1px solid #a8a8a8; padding: 0 4px; font-size: 11px; }
.quartus .globe { width: 14px; height: 14px; border-radius: 50%; background: #2aa84a; margin: 0 6px 0 4px; }
.quartus .toolbar { background: #f0f0f0; border-bottom: 1px solid #d8d8d8; }
.quartus .tsel { width: 180px; height: 20px; margin: 0 6px; border: 1px solid #a8a8a8; background: #fff; }

.quartus .work {
  flex: 1; min-height: 0; display: grid; gap: 3px; padding: 3px;
  grid-template-columns: 272px 1fr 266px; grid-template-rows: 1fr 150px;
}
.quartus .col { display: flex; flex-direction: column; gap: 3px; min-height: 0; min-width: 0; }
.quartus .panel { flex: 1; display: flex; flex-direction: column; min-height: 0; border: 1px solid #a7a7a7; background: #fff; }
.quartus .phead { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 4px; background: #f0f0f0; border-bottom: 1px solid #c9c9c9; }
.quartus .hsel { height: 19px; font-size: 11px; border: 1px solid #a8a8a8; background: #fff; flex: 1; max-width: 130px; }
.quartus .pbtns { margin-left: auto; display: flex; gap: 6px; color: #333; font-style: normal; }
.quartus .pbtns i { font-style: normal; font-size: 11px; }
.quartus .colhead { text-align: center; padding: 3px; border-bottom: 1px solid #ddd; background: #fafafa; }
.quartus .famrow { display: flex; align-items: center; gap: 6px; padding: 4px; background: #f0f0f0; }
.quartus .famrow select { flex: 1; height: 20px; font-size: 11px; }
.quartus .ipsearch { display: flex; align-items: center; gap: 6px; padding: 0 4px 4px; background: #f0f0f0; }
.quartus .ipsearch input { flex: 1; height: 20px; border: 1px solid #a8a8a8; }
.quartus .addrow { padding: 4px 6px; background: #f0f0f0; border-top: 1px solid #ddd; }
.quartus .addrow button { border: 1px solid #c8c8c8; background: #f6f6f6; color: #888; padding: 2px 10px; }

.quartus .center { border: 1px solid #a7a7a7; background: #fff; }
.quartus .doctabs { display: flex; height: 24px; background: #f0f0f0; border-bottom: 1px solid #c9c9c9; }
.quartus .doctabs .tab { display: flex; align-items: center; gap: 6px; padding: 0 10px; min-width: 120px; justify-content: center; border-right: 1px solid #d6d6d6; color: #444; }
.quartus .doctabs .tab.active { background: #fff; color: #000; }
.quartus .qclose { font-weight: normal; font-size: 10px; color: #c44; margin-left: 8px; }

.quartus .qhome { flex: 1; background: #0071c5; color: #fff; padding: 14px 18px 0; overflow: auto; position: relative; display: flex; flex-direction: column; }
.quartus .qhome h2 { margin: 0 0 12px; font-size: 19px; font-weight: 600; }
.quartus .recent li { padding: 3px 0 3px 40px; font-size: 12.5px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.quartus .recent li:hover b { text-decoration: underline; }
.quartus .bigbtns { display: flex; justify-content: center; gap: 16px; margin: 18px 0; }
.quartus .bigbtns button { width: 186px; height: 56px; border: 0; background: #fff; color: #0063b1; font-size: 13px; cursor: pointer; }
.quartus .tiles { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.quartus .tiles span { width: 108px; height: 52px; background: #fff; color: #0063b1; display: grid; place-items: end center; padding-bottom: 6px; font-size: 11.5px; cursor: pointer; }
.quartus .qhome-foot { margin: auto -18px 0; padding: 10px 18px; background: #00508f; display: flex; flex-direction: column; gap: 6px; position: relative; }
.quartus .qhome-foot .intel { position: absolute; right: 18px; top: 12px; font: italic bold 26px Arial; border: 2px solid #fff; border-radius: 50%; padding: 0 8px; }

.quartus .qmsg { grid-column: 1 / -1; flex-direction: row; border: 1px solid #a7a7a7; background: #f0f0f0; }
.quartus .vlabel { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; width: 20px; border-right: 1px solid #ccc; font-size: 11px; color: #444; }
.quartus .qmsg-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.quartus .qmsg-tools { display: flex; align-items: center; gap: 8px; padding: 4px 8px; }
.quartus .qmsg-tools button { border: 1px solid #c8c8c8; background: #f8f8f8; padding: 2px 10px; }
.quartus .qmsg-tools button.on { background: #dcecfc; border-color: #7eb4ea; }
.quartus .qmsg-tools .filter { width: 220px; height: 20px; border: 1px solid #a8a8a8; padding: 0 4px; margin-right: 50px; }
.quartus .qmsg-head { display: flex; gap: 20px; padding: 2px 8px; background: #fff; font-family: Consolas, "DejaVu Sans Mono", monospace; border-bottom: 1px solid #eee; }
.quartus .qmsg-body { flex: 1; background: #fff; overflow: auto; font-family: Consolas, "DejaVu Sans Mono", monospace; color: #138a13; }
.quartus .mrow { display: flex; align-items: center; gap: 8px; padding: 1px 8px 1px 24px; }
.quartus .mrow span { width: 56px; }
.quartus .qmsg-tabs { display: flex; gap: 2px; padding: 2px 6px; }
.quartus .qmsg-tabs .tab { padding: 2px 14px; border: 1px solid #ccc; border-top: 0; background: #e8e8e8; }
.quartus .qmsg-tabs .tab.active { background: #fff; }
.quartus .statusbar { background: #f0f0f0; border-top: 1px solid #d0d0d0; }


/* =========================================================
   VIVADO
   ========================================================= */
.vivado { --sel: #a0007a; background: #ececec; font-size: 13px; }
.vivado .titlebar { background: linear-gradient(#cfe0f3, #aecbea); color: #111; border-bottom: 1px solid #8eaed3; }
.vivado .logo-v { width: 16px; height: 16px; background: linear-gradient(135deg, #f1b700 50%, #ce7a00 50%); clip-path: polygon(0 100%, 50% 0, 100% 100%, 50% 70%); }
.vivado .menubar { height: 30px; background: #f0f0f0; font-size: 13.5px; }
.vivado .menubar .m { padding: 4px 11px; }
.vivado .menubar .sep { width: 1px; height: 22px; background: #c8c8c8; margin: 0 10px; }
.vivado .quick { color: #888; border-bottom: 1px solid #bbb; padding: 2px 4px; width: 170px; }
.vivado .menubar .status-msg { padding-right: 12px; }
.vivado .toolbar { height: 34px; background: #f0f0f0; border-bottom: 1px solid #cfcfcf; }
.vivado .toolbar .layout { height: 24px; min-width: 170px; border: 1px solid #b8b8b8; background: #fff; }

.vivado .work { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px 1fr; }
.vivado .flownav { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #bdbdbd; background: #fff; }
.vivado .fnhead { background: #5f5f5f; color: #fff; padding: 6px 10px; display: flex; justify-content: space-between; font-size: 13px; }
.vivado .fnbody { flex: 1; overflow: auto; }
.vivado .fn .row { padding: 5px 6px; }
.vivado .fn .sec { font-size: 13px; margin-top: 8px; }
.vivado .fn li > ul { padding-left: 20px; }
.vivado .fn .row.sel, .vivado .fn .sec.sel { background: #d6e5fb; }

.vivado .vright { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.vivado .pmhead { background: #d6e5fb; padding: 6px 10px; font-weight: 600; display: flex; justify-content: space-between; font-size: 13px; }
.vivado .pmhead span { color: #666; font-weight: normal; }
.vivado .vgrid {
  flex: 1.15; min-height: 0; display: grid; gap: 8px; padding: 8px 8px 0;
  grid-template-columns: minmax(240px, .72fr) 1.28fr; grid-template-rows: 1fr 1fr;
  grid-template-areas: "src ed" "prop ed";
}
.vivado .vpanel { display: flex; flex-direction: column; min-height: 0; min-width: 0; border: 1px solid #c8c8c8; background: #fff; }
.vivado .vpanel.focus { border: 2px solid #3c78d8; }
.vivado .vphead { display: flex; align-items: center; gap: 10px; background: #e6e6e6; padding: 5px 8px; font-weight: 600; }
.vivado .vphead span { margin-left: auto; color: #666; font-weight: normal; white-space: nowrap; }
.vivado .vphead .path { font-size: 11px; color: #777; overflow: hidden; text-overflow: ellipsis; margin-left: 6px; flex: 1; min-width: 0; }
.vivado .vphead .path + span { margin-left: 0; }
.vivado .vptools { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px solid #e2e2e2; background: #fff; color: #2c5aa0; }
.vivado .vptools s { width: 1px; height: 16px; background: #d0d0d0; }
.vivado .vptools b { font-size: 17px; line-height: 1; }
.vivado .vptools .arr { color: #999; font-weight: normal; }
.vivado .vptools .dot { width: 12px; height: 12px; border-radius: 50%; background: #c8c8c8; }
.vivado .vptools .pct { color: #2c5aa0; }
.vivado .pbody.empty { display: grid; place-items: center; color: #777; }
.vivado .tree .row { padding: 3px 4px; }
.vivado .vsubtabs { display: flex; gap: 4px; padding: 4px; border-top: 1px dashed #ccc; }
.vivado .vsubtabs .tab { padding: 2px 10px; color: #555; }
.vivado .vsubtabs .tab.active { border: 1px solid #c8c8c8; background: #fff; font-weight: 600; color: #000; }
.vivado .editor { font-size: 13px; }

.vivado .vbottom { flex: .85; margin: 8px; border: 1px solid #c8c8c8; background: #fff; }
.vivado .vbtabs { display: flex; align-items: stretch; background: #ececec; border-bottom: 1px solid #d0d0d0; }
.vivado .vbtabs .tab { padding: 6px 14px; color: #555; border-right: 1px solid #d0d0d0; }
.vivado .vbtabs .tab.active { background: #fff; color: #000; }
.vivado .vbtabs .tab b { font-weight: normal; margin-left: 10px; color: #666; }
.vivado .vbbtns { color: #666; padding: 6px 10px; }
.vivado .console { flex: 1; overflow: auto; padding: 6px 8px; font-family: Consolas, "DejaVu Sans Mono", monospace; font-size: 12px; }
.vivado .tclin { border: 0; border-top: 1px solid #ddd; padding: 5px 8px; }
.vivado .tablewrap { flex: 1; overflow: auto; }
.vivado .runs { border-collapse: collapse; width: 100%; white-space: nowrap; }
.vivado .runs th { text-align: left; font-weight: normal; background: #f4f4f4; padding: 5px 10px; border-right: 1px solid #e0e0e0; border-bottom: 1px solid #ddd; }
.vivado .runs td { padding: 5px 10px; border-right: 1px solid #ececec; border-bottom: 1px solid #ececec; }
.vivado .runs tbody tr:hover { background: #e5f3ff; }
.vivado .statusbar { height: 14px; background: #ececec; }


/* =========================================================
   VITIS (Eclipse)
   ========================================================= */
.vitis { --sel: #7f0055; background: #e9e9e9; }
.vitis .titlebar { background: #fff; color: #111; border-bottom: 1px solid #e0e0e0; }
.vitis .logo-x { width: 16px; height: 16px; background: linear-gradient(45deg, #e4002b 45%, transparent 45% 55%, #e4002b 55%); clip-path: polygon(0 0, 30% 0, 50% 35%, 70% 0, 100% 0, 65% 50%, 100% 100%, 70% 100%, 50% 65%, 30% 100%, 0 100%, 35% 50%); }
.vitis .menubar { background: #fff; height: 22px; }
.vitis .menubar .m { padding: 2px 7px; }
.vitis .toolbar { background: #f5f5f5; border-bottom: 1px solid #dcdcdc; height: 30px; }
.vitis .persp { display: flex; gap: 2px; }
.vitis .persp .tab { padding: 3px 10px; border: 1px solid transparent; }
.vitis .persp .tab.active { border-color: #bcbcbc; background: #fff; border-radius: 3px; }

.vitis .work {
  flex: 1; min-height: 0; display: grid; gap: 4px; padding: 4px;
  grid-template-columns: 250px 1fr 300px; grid-template-rows: 1fr 170px;
}
.vitis .col { display: flex; flex-direction: column; gap: 4px; min-height: 0; min-width: 0; }
.vitis .xview { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: #fff; border: 1px solid #c9c9c9; border-radius: 3px; overflow: hidden; }
.vitis .xtabs { display: flex; align-items: stretch; background: #f0f0f0; border-bottom: 1px solid #d6d6d6; height: 24px; flex: none; }
.vitis .xt, .vitis .xtabs .tab { display: flex; align-items: center; gap: 4px; padding: 0 9px; color: #444; white-space: nowrap; cursor: default; }
.vitis .xt.active, .vitis .xtabs .tab.active { background: #fff; color: #000; border-top: 2px solid #4a90d9; }
.vitis .xbtns { padding: 0 8px; display: flex; align-items: center; color: #777; font-size: 11px; }
.vitis .tree .row { padding: 1px 3px; }
.vitis .regs { border-collapse: collapse; width: 100%; font-size: 11.5px; }
.vitis .regs th { text-align: left; font-weight: normal; background: #f6f6f6; padding: 2px 6px; border-right: 1px solid #e3e3e3; border-bottom: 1px solid #ddd; }
.vitis .regs td { padding: 1px 6px; border-bottom: 1px solid #f1f1f1; }
.vitis .regs tr.sel td { background: #cce8ff; }
.vitis .pcinfo { padding: 6px; border-top: 1px solid #ddd; color: #333; font-size: 11px; }
.vitis .disinput { padding: 3px; border-bottom: 1px solid #ddd; }
.vitis .disinput input { width: 100%; height: 20px; border: 1px solid #c8c8c8; font-size: 11px; }
.vitis .pbody.mono > div { padding: 0 6px; white-space: pre; }
.vitis .pbody .hl { background: #c6e1c6; }
.vitis .console > div { white-space: pre; }
.vitis .editor { font-size: 12.5px; }
.vitis .gutter { background: #fff; border-right: 0; color: #9a9a9a; }
.vitis .statusbar { background: #f0f0f0; border-top: 1px solid #d8d8d8; font-size: 11.5px; }
.vitis .statusbar .status-msg { white-space: pre; }