/* X4 Studio — 2000s skin system (Luna / Olive / Silver / Midnight) */
:root, body.skin-luna {
  --title1: #0a5bd8; --title2: #3c8cf6; --title3: #0842a8; --titleText: #fff;
  --face: #ece9d8; --face2: #f6f4ec; --dark: #aca899; --border: #7f9db9; --win: #0831d9;
  --sel: #316ac5; --selText: #fff; --text: #000; --muted: #555;
  --pane1: #7ba2e7; --pane2: #6375d6; --paneHead1: #ffffff; --paneHead2: #c6d3f7; --paneHeadText: #215dc6; --paneBody: #d6dff7;
  --btn1: #fefefe; --btn2: #e3e0d3; --btnBorder: #003c74; --hot: #f8b330;
  --tl: #fff; --tlRow: #f3f6fd; --tlRow2: #e7edfa; --tlGrid: #c8d4ee; --ruler1: #fdfdfd; --ruler2: #dcdcd0;
  --menuSel: #316ac5;
}
body.skin-olive {
  --title1: #8ba05b; --title2: #b2c47e; --title3: #6a7f3a; --win: #6a7f3a;
  --sel: #93a070; --pane1: #ccd9ad; --pane2: #a8b98a; --paneHead1: #fff; --paneHead2: #e0e7c8; --paneHeadText: #56662d; --paneBody: #f4f6eb;
  --btnBorder: #374b17; --menuSel: #93a070; --tlRow: #f7f9f0; --tlRow2: #ecf0dd; --tlGrid: #d6dcc2;
}
body.skin-silver {
  --title1: #a5a7bd; --title2: #dcdde8; --title3: #8c8ea6; --titleText: #0a0a2a; --win: #8c8ea6;
  --face: #e0dfe3; --face2: #f3f3f6; --sel: #b2b4bf; --selText: #000; --pane1: #c4c8d4; --pane2: #b1b3c8; --paneHead1: #fff; --paneHead2: #e4e4ec; --paneHeadText: #3f3d3d; --paneBody: #f0f0f5;
  --btnBorder: #4c4c6a; --menuSel: #b2b4bf; --tlRow: #f5f5f8; --tlRow2: #eaeaf0; --tlGrid: #d4d4dd;
}
body.skin-midnight {
  --title1: #0b0f2a; --title2: #253a8a; --title3: #050818; --titleText: #cfe4ff; --win: #071233;
  --face: #1b2340; --face2: #232d52; --dark: #0b1028; --border: #3d4f8f; --text: #dfe8ff; --muted: #9fb0dd;
  --sel: #2f6bff; --pane1: #18214a; --pane2: #0e1433; --paneHead1: #3a4f99; --paneHead2: #1d2a63; --paneHeadText: #e8f0ff; --paneBody: #121a3d;
  --btn1: #3c4d8c; --btn2: #1a2554; --btnBorder: #7896ff; --hot: #33ccff;
  --tl: #0e1430; --tlRow: #151d40; --tlRow2: #111836; --tlGrid: #263160; --ruler1: #2a3670; --ruler2: #141b3d; --menuSel: #2f6bff;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font: 11px Tahoma, 'Segoe UI', Verdana, sans-serif; color: var(--text); background: #3a6ea5 linear-gradient(#245edb, #3a6ea5); user-select: none; }
input, select, button, textarea { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 16px; height: 16px; background: var(--face2); }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #c8d6fb, #b6c8f6 50%, #a5bbf3); border: 1px solid #fff; border-radius: 3px; box-shadow: inset 0 0 0 1px #8aa5e6; }
body.skin-midnight ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #3a4f99, #233270); box-shadow: inset 0 0 0 1px #5571d6; border-color: #10183a; }
::-webkit-scrollbar-corner { background: var(--face); }

#win { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--face); border: 3px solid var(--win); border-top: none; border-radius: 8px 8px 0 0; overflow: hidden; }

/* title bar */
.titlebar { height: 30px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 6px; color: var(--titleText);
  background: linear-gradient(var(--title2) 0%, var(--title1) 12%, var(--title1) 70%, var(--title3) 100%); border-radius: 7px 7px 0 0;
  font: bold 13px 'Trebuchet MS', Tahoma, sans-serif; text-shadow: 1px 1px 1px rgba(0, 0, 0, .55); }
.titlebar .logo { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: bold 9px Verdana; color: #fff;
  background: radial-gradient(circle at 35% 30%, #fff 0, #ffd36b 18%, #ff7b00 60%, #b33a00 100%); box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.titlebar .tt { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.titlebar .wbtn { width: 21px; height: 21px; border: 1px solid #fff; border-radius: 3px; display: grid; place-items: center; font: bold 12px Tahoma; color: #fff;
  background: linear-gradient(135deg, #5d8ff6, #2a5fe0 60%, #1c47c7); box-shadow: inset 0 0 2px rgba(255,255,255,.6); cursor: default; }
.titlebar .wbtn.x { background: linear-gradient(135deg, #f19b81, #e0451c 60%, #c3300b); }
.titlebar .wbtn:hover { filter: brightness(1.15); }

/* menubar */
.menubar { height: 22px; flex: none; display: flex; align-items: stretch; background: var(--face); border-bottom: 1px solid #fff; box-shadow: 0 1px 0 var(--dark); position: relative; z-index: 50; }
.menubar .menu { position: relative; padding: 4px 7px; cursor: default; }
.menubar .menu:hover, .menubar .menu.open { background: var(--menuSel); color: #fff; }
.dropdown { display: none; position: absolute; top: 100%; left: 0; min-width: 210px; background: #fff; color: #000; border: 1px solid #aca899; box-shadow: 3px 3px 4px rgba(0,0,0,.35); padding: 2px; z-index: 100; }
body.skin-midnight .dropdown, body.skin-midnight .ctxmenu { background: #18214a; color: #dfe8ff; border-color: #3d4f8f; }
.menu.open > .dropdown { display: block; }
.dropdown .mi, .ctxmenu .mi { padding: 4px 22px 4px 24px; white-space: nowrap; display: flex; justify-content: space-between; gap: 20px; }
.dropdown .mi:hover, .ctxmenu .mi:hover { background: var(--menuSel); color: #fff; }
.dropdown .mi .k, .ctxmenu .mi .k { opacity: .7; }
.dropdown .sep, .ctxmenu .sep { height: 1px; background: #aca899; margin: 3px 1px; }
.ctxmenu { position: fixed; display: none; background: #fff; border: 1px solid #aca899; box-shadow: 3px 3px 4px rgba(0,0,0,.35); padding: 2px; z-index: 1000; min-width: 170px; }

/* toolbar */
.toolbar { flex: none; display: flex; align-items: center; gap: 2px; padding: 3px 4px; background: linear-gradient(var(--face2), var(--face)); border-bottom: 1px solid var(--dark); flex-wrap: wrap; }
.tbtn { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid transparent; border-radius: 3px; background: none; cursor: default; white-space: nowrap; }
.tbtn .ic { font-size: 16px; line-height: 16px; filter: drop-shadow(0 1px 0 rgba(255,255,255,.7)); }
.tbtn:hover { border-color: var(--border); background: linear-gradient(#fff, #e6edfb); }
body.skin-midnight .tbtn:hover { background: linear-gradient(#3c4d8c, #1d2a63); }
.tbtn:active, .tbtn.on { background: linear-gradient(#d7e0f6, #f2f5fc); border-color: var(--border); box-shadow: inset 1px 1px 2px rgba(0,0,0,.2); }
body.skin-midnight .tbtn.on { background: #0b1028; }
.tsep { width: 2px; height: 24px; margin: 0 3px; border-left: 1px solid var(--dark); border-right: 1px solid #fff; }

/* XP buttons */
.xbtn { padding: 3px 10px; min-height: 23px; border: 1px solid var(--btnBorder); border-radius: 3px; background: linear-gradient(var(--btn1), var(--btn2)); cursor: default; box-shadow: inset 0 -1px 1px rgba(0,0,0,.08); }
.xbtn:hover { box-shadow: inset 0 0 0 2px var(--hot); }
.xbtn:active { background: linear-gradient(var(--btn2), var(--btn1)); }
.xbtn.primary { font-weight: bold; }
.xbtn.small { padding: 1px 6px; min-height: 19px; }
.aqua { padding: 4px 14px; border-radius: 12px; border: 1px solid #1a4fa8; color: #fff; font-weight: bold; text-shadow: 0 1px 1px rgba(0,0,0,.4);
  background: linear-gradient(#9fd0ff 0%, #4ea3f7 45%, #1e78e6 50%, #46a6ff 100%); box-shadow: 0 1px 3px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.7); cursor: default; }
.aqua:hover { filter: brightness(1.08) saturate(1.2); }
.aqua.green { border-color: #2a7a1a; background: linear-gradient(#c9f7a4 0%, #6fd64a 45%, #3fae1c 50%, #72dc4c 100%); }
.aqua.orange { border-color: #a5520a; background: linear-gradient(#ffd8a0 0%, #ffa23a 45%, #f07d06 50%, #ffae4e 100%); }

input[type=text], input[type=number], select, textarea { border: 1px solid var(--border); background: #fff; color: #000; padding: 2px 3px; border-radius: 0; }
body.skin-midnight input[type=text], body.skin-midnight input[type=number], body.skin-midnight select, body.skin-midnight textarea { background: #0b1028; color: #dfe8ff; }
input[type=color] { width: 34px; height: 20px; padding: 0 1px; border: 1px solid var(--border); background: #fff; }
input[type=range] { accent-color: var(--sel); }

/* layout */
.main { flex: 1; display: flex; min-height: 0; }
.panel { width: 270px; flex: none; display: flex; flex-direction: column; background: linear-gradient(var(--pane1), var(--pane2)); min-height: 0; }
.panel.right { width: 300px; }
.panel .scroll { flex: 1; overflow: auto; padding: 10px; }
.center { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--face); border-left: 1px solid var(--dark); border-right: 1px solid var(--dark); }
.stage-wrap { flex: 1; position: relative; min-height: 0; overflow: hidden;
  background: #6d6d6d repeating-conic-gradient(#5a5a5a 0 25%, #666 0 50%) 0 0/20px 20px; box-shadow: inset 0 0 0 1px #000, inset 2px 2px 6px rgba(0,0,0,.6); }
#stage { position: absolute; box-shadow: 0 0 0 1px #000, 4px 4px 12px rgba(0,0,0,.6); }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#ov { cursor: default; }

/* tabs (library) */
.tabs { display: flex; gap: 1px; padding: 6px 6px 0; flex-wrap: wrap; }
.tab { flex: 1 0 auto; text-align: center; padding: 4px 4px 3px; border: 1px solid #91a7b4; border-bottom: none; border-radius: 4px 4px 0 0; background: linear-gradient(#fff, #ecebe5); color: #000; cursor: default; }
.tab .ti { display: block; font-size: 15px; }
.tab.on { background: #fff; border-top: 3px solid #ffc83c; padding-top: 2px; font-weight: bold; position: relative; top: 1px; }
body.skin-midnight .tab { background: linear-gradient(#2a3670, #18214a); color: #cfe4ff; border-color: #3d4f8f; }
body.skin-midnight .tab.on { background: #121a3d; }

/* task-pane groups */
.grp { margin-bottom: 12px; border-radius: 5px 5px 0 0; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.grp > .gh { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px 5px 10px; font-weight: bold; color: var(--paneHeadText);
  background: linear-gradient(90deg, var(--paneHead1), var(--paneHead2)); cursor: default; }
.grp > .gh:hover { color: #428eff; }
.grp > .gh .chev { width: 17px; height: 17px; border-radius: 50%; border: 1px solid #b0c0e8; background: linear-gradient(#fff, #dbe4f9); display: grid; place-items: center; font-size: 9px; color: var(--paneHeadText); }
.grp.closed > .gb { display: none; }
.grp > .gb { background: var(--paneBody); padding: 8px; border: 1px solid #fff; border-top: none; }
body.skin-midnight .grp > .gb { border-color: #2a3670; }

/* prop rows */
.prow { display: flex; align-items: center; gap: 4px; margin: 3px 0; }
.prow .kf { width: 16px; height: 16px; flex: none; display: grid; place-items: center; font-size: 11px; color: #9aa; cursor: default; border-radius: 2px; }
.prow .kf:hover { background: rgba(255,255,255,.6); }
.prow .kf.anim { color: #d58b00; }
.prow .kf.here { color: #ff9900; text-shadow: 0 0 3px #ffde7a; }
.prow label { flex: 0 0 96px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: ew-resize; }
.prow label.nocur { cursor: default; }
.prow input[type=number] { width: 64px; }
.prow input[type=range] { flex: 1; min-width: 40px; }
.prow select, .prow input[type=text] { flex: 1; min-width: 0; }
.prow .grow { flex: 1; }
.subtle { color: var(--muted); font-size: 10px; }
.hint { color: var(--muted); padding: 6px; line-height: 1.5; }

/* library tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tiles.two { grid-template-columns: repeat(2, 1fr); }
.tile { background: #fff; border: 1px solid #b0c0e8; border-radius: 4px; padding: 6px 2px 4px; text-align: center; cursor: default; color: #000; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; overflow: hidden; }
.tile:hover { border-color: var(--hot); box-shadow: 0 0 0 1px var(--hot); background: #fffbe8; }
.tile .big { font-size: 24px; line-height: 26px; }
.tile .pv { width: 100%; height: 34px; display: grid; place-items: center; font-weight: 900; font-size: 15px; overflow: hidden; }
.tile .nm { font-size: 10px; line-height: 11px; }
body.skin-midnight .tile { background: #18214a; color: #dfe8ff; border-color: #3d4f8f; }
.media-item { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #b0c0e8; padding: 3px; margin-bottom: 4px; border-radius: 3px; color: #000; }
.media-item .th { width: 48px; height: 30px; background: #222 center/cover; flex: none; display: grid; place-items: center; color: #fff; font-size: 14px; }
.media-item .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.skin-midnight .media-item { background: #18214a; color: #dfe8ff; }

/* transport */
.transport { flex: none; display: flex; align-items: center; gap: 4px; padding: 4px 6px; background: linear-gradient(#5a6b8a, #2c3650 50%, #1c2338 51%, #2b3552); border-top: 1px solid #000; color: #cfe; }
.pbtn { width: 30px; height: 24px; border-radius: 4px; border: 1px solid #0b0f1c; background: linear-gradient(#cfd8ea, #8e9ab8 50%, #6c7898 51%, #a9b5d2); color: #102040; font-size: 12px; display: grid; place-items: center; cursor: default; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.pbtn:hover { filter: brightness(1.12); }
.pbtn.play { width: 38px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #d8ffd0, #4fd23a 45%, #1d8a10 52%, #4fe03a); color: #06350a; font-size: 14px; }
.pbtn.on { background: linear-gradient(#ffe7a0, #ffb21e 50%, #f08c00 51%, #ffc24a); }
.lcd { font: bold 17px 'Lucida Console', 'Courier New', monospace; color: #6dff4a; background: #000 linear-gradient(#08140a, #000); border: 2px inset #4a5a7a; padding: 2px 8px; letter-spacing: 1px; text-shadow: 0 0 6px #3f3; min-width: 110px; text-align: center; }
.lcd small { font-size: 10px; color: #3dbb2a; }
#vu { width: 90px; height: 14px; background: #000; border: 1px inset #4a5a7a; }
.transport .lbl { color: #cfe; font-size: 10px; }

/* splitter + timeline */
.hsplit { height: 5px; flex: none; cursor: ns-resize; background: linear-gradient(var(--face2), var(--dark)); border-top: 1px solid #fff; }
.timeline { height: 270px; flex: none; display: flex; flex-direction: column; background: var(--face); min-height: 120px; }
.tl-tools { flex: none; display: flex; align-items: center; gap: 2px; padding: 2px 4px; border-bottom: 1px solid var(--dark); flex-wrap: wrap; }
#tlScroll { flex: 1; overflow: auto; position: relative; background: var(--tl); border: 1px solid var(--border); margin: 0 3px 3px; }
#tlInner { display: grid; grid-template-columns: 210px auto; grid-template-rows: 24px auto; position: relative; width: max-content; min-width: 100%; }
.tl-corner { position: sticky; top: 0; left: 0; z-index: 4; background: linear-gradient(var(--ruler1), var(--ruler2)); border-right: 1px solid var(--dark); border-bottom: 1px solid var(--dark); display: flex; align-items: center; padding-left: 6px; font-weight: bold; }
#tlRuler { position: sticky; top: 0; z-index: 3; display: block; cursor: col-resize; }
#tlNames { position: sticky; left: 0; z-index: 3; background: var(--face2); border-right: 1px solid var(--dark); }
#tlTracks { display: block; }
.trow { height: 30px; display: flex; align-items: center; gap: 3px; padding: 0 4px; border-bottom: 1px solid var(--tlGrid); white-space: nowrap; overflow: hidden; cursor: default; }
.trow.sel { background: var(--sel); color: var(--selText); }
.trow .ico { width: 18px; text-align: center; flex: none; }
.trow .tog { width: 16px; height: 16px; flex: none; display: grid; place-items: center; border: 1px solid transparent; border-radius: 2px; font-size: 10px; }
.trow .tog:hover { border-color: var(--border); background: rgba(255,255,255,.5); }
.trow .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.trow .par { font-size: 9px; opacity: .8; }
.trow.audio { background: linear-gradient(90deg, #e8fbe0, transparent); }
body.skin-midnight .trow.audio { background: linear-gradient(90deg, #12301f, transparent); }
.trow.audio.sel { background: var(--sel); }
.trow.hdr { height: 20px; font-weight: bold; background: linear-gradient(var(--ruler1), var(--ruler2)); color: var(--text); }
.trow.dragover { box-shadow: inset 0 2px 0 #ff9900; }
#tlPlayhead { position: absolute; top: 0; width: 1px; background: #ff2a2a; pointer-events: none; z-index: 5; box-shadow: 0 0 2px #f00; }
#tlPlayhead::before { content: ''; position: absolute; top: 0; left: -6px; border: 6px solid transparent; border-top: 9px solid #ff2a2a; }

/* status bar */
.statusbar { height: 22px; flex: none; display: flex; background: var(--face); border-top: 1px solid var(--dark); }
.statusbar > div { padding: 3px 8px; border: 1px solid; border-color: var(--dark) #fff #fff var(--dark); margin: 1px; overflow: hidden; white-space: nowrap; }
.statusbar .grow { flex: 1; }

/* modal windows */
#modalBg { position: fixed; inset: 0; background: rgba(0, 0, 40, .25); display: none; z-index: 900; }
.xwin { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 360px; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; background: var(--face); border: 3px solid var(--win); border-top: none; border-radius: 8px 8px 0 0; box-shadow: 6px 6px 18px rgba(0,0,0,.5); z-index: 901; }
.xwin .titlebar { height: 26px; font-size: 12px; }
.xwin .body { padding: 12px; overflow: auto; }
.xwin .foot { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 12px; }
.xwin fieldset { border: 1px solid #d0d0bf; border-radius: 4px; margin: 0 0 10px; padding: 8px; }
.xwin legend { color: #0046d5; padding: 0 3px; }
body.skin-midnight .xwin legend { color: #7fb0ff; }
.progress { height: 16px; border: 1px solid #686868; border-radius: 3px; background: #fff; padding: 1px; overflow: hidden; }
.progress > div { height: 100%; width: 0; background: repeating-linear-gradient(90deg, #2bd22b 0 8px, transparent 8px 10px); transition: width .2s; }

/* splash */
.splash { text-align: center; padding: 10px 20px; }
.splash .big { font: 900 54px 'Arial Black', Impact, sans-serif; letter-spacing: 2px; background: linear-gradient(#fff 0%, #cde 40%, #4a6fa5 50%, #e8f4ff 75%, #8aa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1px #0a3a9a; filter: drop-shadow(2px 3px 0 rgba(0,0,60,.35)); }
.splash .sub { font: italic bold 14px 'Trebuchet MS'; color: #0a3a9a; }
body.skin-midnight .splash .sub { color: #9fc4ff; }

.toast { position: fixed; right: 18px; bottom: 34px; background: #ffffe1; border: 1px solid #000; border-radius: 6px; padding: 8px 12px 8px 30px; box-shadow: 2px 2px 6px rgba(0,0,0,.35); z-index: 999; max-width: 340px; color: #000; }
.toast::before { content: 'ℹ'; position: absolute; left: 9px; top: 7px; width: 15px; height: 15px; border-radius: 50%; background: #2a6be0; color: #fff; display: grid; place-items: center; font: bold 11px Georgia; }
.kbd { display: inline-block; border: 1px solid #888; border-radius: 3px; padding: 0 4px; background: #fff; color: #000; font-size: 10px; }
.piano { display: flex; height: 46px; position: relative; margin: 6px 0; border: 1px solid #333; }
.piano .wk { flex: 1; background: linear-gradient(#fff, #e6e6e6); border-right: 1px solid #999; position: relative; font-size: 8px; display: flex; align-items: flex-end; justify-content: center; color: #555; }
.piano .wk.on { background: linear-gradient(#ffe08a, #ffb300); }
.piano .bk { position: absolute; top: 0; width: 7%; height: 60%; background: linear-gradient(#444, #000); z-index: 2; border-radius: 0 0 2px 2px; }
.piano .bk.on { background: linear-gradient(#ffcf4a, #b37400); }