/* Blender 4.x dark theme recreation */
:root {
  --win-bg: #191919;
  --region-bg: #303030;
  --region-bg-alt: #333333;
  --header-bg: #2a2a2a;
  --header-bg-hover: #3d3d3d;
  --inner-bg: #262626;
  --widget-bg: #424242;
  --widget-bg-hover: #545454;
  --widget-bg-active: #5d5d5d;
  --widget-sel: #4772b3;
  --widget-sel-hover: #5582c5;
  --text: #d6d6d6;
  --text-dim: #9a9a9a;
  --text-dark: #6e6e6e;
  --orange: #ffab40;
  --orange-sel: #ed7f1e;
  --accent: #ea7600;
  --blue: #4772b3;
  --border: #1c1c1c;
  --border-soft: #232323;
  --menu-bg: #2b2b2b;
  --menu-hover: #4772b3;
  --tooltip-bg: #1e1e22;
  --red: #ff3352;
  --green: #8bdc00;
  --blue-axis: #2890ff;
  --playhead: #71b171;
  --keyframe: #e8c13d;
  --topbar-bg: #1f1f1f;
  --font: "Bfont", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", Menlo, Consolas, monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; }
body {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text);
  background: var(--win-bg);
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}
#app { display:flex; flex-direction:column; width:100%; height:100%; }

/* ============ TOP BAR ============ */
#topbar {
  display:flex; align-items:stretch; height:26px; background:var(--topbar-bg);
  border-bottom:1px solid #101010; flex:0 0 auto; z-index:60; position:relative;
}
#topbar .tb-appicon {
  width:30px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
#topbar .tb-appicon:hover { background:#333; }
#topbar .tb-menus { display:flex; align-items:stretch; }
.tb-menu-btn {
  padding:0 9px; display:flex; align-items:center; cursor:pointer; color:var(--text);
  border-radius:3px; margin:3px 1px;
}
.tb-menu-btn:hover { background:var(--header-bg-hover); }
.tb-menu-btn.open { background:var(--widget-sel); color:#fff; }
#workspace-tabs { display:flex; align-items:stretch; margin-left:14px; overflow:hidden; }
.ws-tab {
  display:flex; align-items:center; padding:0 12px; cursor:pointer; color:var(--text-dim);
  border-left:1px solid #161616; position:relative; white-space:nowrap;
}
.ws-tab:hover { color:var(--text); background:#2c2c2c; }
.ws-tab.active { color:var(--text); background:#3a3a3a; box-shadow: inset 0 2px 0 var(--widget-sel); }
.ws-tab .ws-close { margin-left:7px; color:#666; display:none; font-size:12px; }
.ws-tab:hover .ws-close { display:inline; }
.ws-tab .ws-close:hover { color:#ddd; }
.ws-add {
  display:flex; align-items:center; padding:0 10px; cursor:pointer; color:var(--text-dim);
  border-left:1px solid #161616;
}
.ws-add:hover { color:var(--text); background:#2c2c2c; }
#tb-right { margin-left:auto; display:flex; align-items:center; padding-right:8px; color:var(--text-dark); gap:8px;}

/* ============ AREA / LAYOUT ============ */
#workarea { flex:1 1 auto; position:relative; overflow:hidden; background:var(--win-bg); }
.layout-node { position:absolute; }
.area {
  position:absolute; background:var(--region-bg); display:flex; flex-direction:column;
  overflow:hidden; border-radius:0;
}
.area-header {
  flex:0 0 auto; height:23px; background:var(--header-bg); display:flex; align-items:stretch;
  border-bottom:1px solid var(--border); overflow:hidden; position:relative; z-index:5;
}
.area-header.bottom { border-bottom:none; border-top:1px solid var(--border); order:2; }
.hdr-btn {
  display:flex; align-items:center; padding:0 6px; cursor:pointer; color:var(--text);
  gap:4px; white-space:nowrap; border-radius:3px; margin:2px 1px;
}
.hdr-btn:hover { background:var(--header-bg-hover); }
.hdr-btn.open { background:var(--widget-sel); color:#fff; }
.hdr-btn.active-toggle { background:var(--widget-sel); color:#fff; }
.hdr-btn.disabled { color:var(--text-dark); cursor:default; }
.hdr-btn.disabled:hover { background:none; }
.hdr-icon-btn {
  width:22px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  border-radius:3px; margin:2px 0px; color:var(--text);
}
.hdr-icon-btn:hover { background:var(--header-bg-hover); }
.hdr-icon-btn.toggled { background:var(--widget-sel); color:#fff; }
.hdr-sep { width:1px; background:#1c1c1c; margin:3px 3px; flex:0 0 auto; }
.hdr-spacer { flex:1 1 auto; }
.area-body { flex:1 1 auto; position:relative; overflow:hidden; display:flex; }

.edge-handle { position:absolute; z-index:40; background:transparent; }
.edge-handle.v { cursor:ew-resize; width:9px; margin-left:-4px; }
.edge-handle.h { cursor:ns-resize; height:9px; margin-top:-4px; }
.corner-zone { position:absolute; z-index:41; width:22px; height:22px; }
.corner-zone:hover { cursor:crosshair; }
.split-preview { position:absolute; z-index:39; background:rgba(86,128,194,0.45); pointer-events:none; }

/* ============ STATUS BAR ============ */
#statusbar {
  flex:0 0 auto; height:22px; background:var(--topbar-bg); border-top:1px solid #101010;
  display:flex; align-items:center; padding:0 8px; gap:14px; color:var(--text-dim); z-index:60;
}
#statusbar .st-hints { display:flex; gap:12px; align-items:center; overflow:hidden; white-space:nowrap; }
#statusbar .st-key {
  display:inline-block; background:#383838; border-radius:3px; padding:1px 5px; margin-right:4px;
  color:var(--text); font-size:10px;
}
#statusbar .st-msg { color:#7fc97f; transition:opacity .5s; white-space:nowrap; }
#statusbar .st-right { margin-left:auto; display:flex; gap:10px; white-space:nowrap; }

/* ============ MENUS ============ */
.menu-popup {
  position:fixed; z-index:1000; background:var(--menu-bg); border:1px solid #161616;
  border-radius:4px; padding:3px 0; min-width:170px; box-shadow:0 6px 20px rgba(0,0,0,.55);
}
.menu-item {
  display:flex; align-items:center; padding:4px 12px 4px 10px; cursor:pointer; color:var(--text);
  white-space:nowrap; position:relative; gap:8px;
}
.menu-item:hover { background:var(--menu-hover); color:#fff; }
.menu-item.disabled { color:var(--text-dark); cursor:default; }
.menu-item.disabled:hover { background:none; color:var(--text-dark); }
.menu-item .mi-icon { width:16px; flex:0 0 16px; display:flex; justify-content:center; }
.menu-item .mi-label { flex:1 1 auto; }
.menu-item .mi-shortcut { margin-left:26px; color:#8fa3bd; font-size:10px; }
.menu-item:hover .mi-shortcut { color:#cfe0f5; }
.menu-item.disabled .mi-shortcut { color:#555; }
.menu-item .mi-sub { font-size:9px; color:#999; margin-left:10px; }
.menu-sep { height:1px; background:#1d1d1d; margin:3px 8px; }
.menu-title { padding:5px 12px 4px; color:var(--text-dark); font-size:10px; }

/* ============ TOOLTIP ============ */
#tooltip {
  position:fixed; z-index:2000; background:var(--tooltip-bg); border:1px solid #0d0d0d;
  border-radius:4px; padding:6px 9px; max-width:300px; pointer-events:none; display:none;
  box-shadow:0 4px 14px rgba(0,0,0,.5);
}
#tooltip .tt-title { color:#fff; margin-bottom:2px; display:flex; justify-content:space-between; gap:14px;}
#tooltip .tt-key { color:#9ab2d6; }
#tooltip .tt-desc { color:var(--text-dim); font-size:10px; }

/* ============ BUTTONS / WIDGETS ============ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  background:var(--widget-bg); border-radius:3px; padding:4px 10px; cursor:pointer; color:var(--text);
  border:none; font-family:var(--font); font-size:11px;
}
.btn:hover { background:var(--widget-bg-hover); }
.btn:active { background:var(--widget-bg-active); }
.btn.primary { background:var(--widget-sel); color:#fff; }
.btn.primary:hover { background:var(--widget-sel-hover); }
.btn.disabled { color:var(--text-dark); cursor:default; }

.numfield {
  position:relative; display:inline-flex; align-items:center; background:var(--inner-bg);
  border-radius:3px; height:19px; color:var(--text); overflow:hidden; min-width:40px;
  border:1px solid transparent;
}
.numfield:hover { border-color:#4a4a4a; }
.numfield.editing { border-color:var(--widget-sel); background:#1c1c1c; }
.numfield .nf-val { flex:1 1 auto; text-align:center; padding:0 12px; overflow:hidden; white-space:nowrap; }
.numfield .nf-arrow {
  position:absolute; top:0; bottom:0; width:11px; display:none; align-items:center; justify-content:center;
  color:#999; font-size:8px; cursor:pointer; background:rgba(255,255,255,0.05);
}
.numfield:hover .nf-arrow { display:flex; }
.numfield .nf-arrow:hover { color:#fff; background:rgba(255,255,255,0.12); }
.numfield .nf-arrow.l { left:0; } .numfield .nf-arrow.r { right:0; }
.numfield input {
  background:transparent; border:none; outline:none; color:#fff; font:inherit; width:100%;
  text-align:center; user-select:text; -webkit-user-select:text;
}
.numfield.unit .nf-val { color:#cfcfe0; }
.numfield.driven .nf-val { color:#b79ddb; }

.slider-field { position:relative; }
.slider-field .sf-fill {
  position:absolute; left:0; top:0; bottom:0; background:rgba(71,114,179,.55); border-radius:3px;
  pointer-events:none;
}

.checkbox {
  width:14px; height:14px; border-radius:2px; background:var(--inner-bg); display:inline-flex;
  align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto;
  border:1px solid #454545; color:#fff; font-size:10px;
}
.checkbox:hover { border-color:#666; }
.checkbox.checked { background:var(--widget-sel); border-color:var(--widget-sel); }

.prop-row { display:flex; align-items:center; gap:6px; margin:3px 0; }
.prop-label { color:var(--text-dim); flex:0 0 auto; min-width:0; }
.prop-row .grow { flex:1 1 auto; min-width:0; }
.prop-col { display:flex; flex-direction:column; gap:3px; }

.select-field {
  display:inline-flex; align-items:center; background:var(--widget-bg); border-radius:3px;
  padding:3px 8px; cursor:pointer; gap:6px;
}
.select-field:hover { background:var(--widget-bg-hover); }
.select-field .caret { font-size:8px; color:#999; }

.color-swatch {
  width:16px; height:16px; border-radius:3px; border:1px solid #1a1a1a; cursor:pointer; flex:0 0 auto;
}

/* ============ PANELS (Properties) ============ */
.panel {
  background:var(--region-bg-alt); border-radius:5px; margin:6px 8px; overflow:hidden;
  flex:0 0 auto;
}
.panel-head {
  display:flex; align-items:center; padding:4px 8px; cursor:pointer; gap:6px; color:var(--text);
  background:#3b3b3b;
}
.panel-head:hover { background:#444; }
.panel-head .ph-arrow { font-size:8px; width:10px; color:#ccc; transition:transform .1s; }
.panel-head .ph-title { flex:1 1 auto; }
.panel-head .ph-check { }
.panel-body { padding:5px 9px 8px; }
.panel.sub { background:#2d2d2d; margin:4px 0; }
.panel.sub .panel-head { background:#343434; }

/* ============ PROPERTIES EDITOR ============ */
.ed-properties .area-body { flex-direction:row; }
.prop-tabs {
  flex:0 0 30px; background:#2b2b2b; display:flex; flex-direction:column; align-items:center;
  padding-top:4px; gap:2px; border-right:1px solid var(--border); overflow-y:auto;
}
.prop-tab {
  width:26px; height:26px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:#bdbdbd; position:relative;
}
.prop-tab:hover { background:#3d3d3d; color:#e8e8e8; }
.prop-tab.active { background:var(--widget-sel); color:#fff; }
.prop-content { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding-bottom:30px; }
.prop-context { padding:6px 10px 2px; color:var(--text); display:flex; align-items:center; gap:6px;}

/* ============ OUTLINER ============ */
.ed-outliner .area-body { flex-direction:column; background:#2b2b2b; }
.ol-scroll { flex:1 1 auto; overflow:auto; padding:2px 0 20px; }
.ol-row {
  display:flex; align-items:center; height:19px; padding-right:6px; cursor:pointer; gap:3px;
  white-space:nowrap;
}
.ol-row:hover { background:#383838; }
.ol-row.selected { background:#41597e; }
.ol-row.active { box-shadow: inset 2px 0 0 var(--orange); }
.ol-row .ol-arrow { width:14px; flex:0 0 14px; text-align:center; font-size:8px; color:#bbb; cursor:pointer;}
.ol-row .ol-icon { width:16px; flex:0 0 16px; display:flex; justify-content:center; }
.ol-row .ol-name { flex:1 1 auto; overflow:hidden; }
.ol-row .ol-toggle { width:18px; flex:0 0 18px; text-align:center; color:#999; visibility:hidden; }
.ol-row:hover .ol-toggle, .ol-row .ol-toggle.off { visibility:visible; }
.ol-row .ol-toggle:hover { color:#fff; }
.ol-row .ol-toggle.off { color:#555; }
.ol-row input.ol-rename {
  background:#1c1c1c; border:1px solid var(--widget-sel); color:#fff; font:inherit; outline:none;
  user-select:text; -webkit-user-select:text; flex:1 1 auto;
}

/* ============ TIMELINE ============ */
.ed-timeline .area-body { flex-direction:column; background:#2e2e2e; }
.tl-canvas-wrap { flex:1 1 auto; position:relative; }
.tl-canvas-wrap canvas { position:absolute; inset:0; width:100%; height:100%; }
.tl-transport { display:flex; align-items:center; gap:2px; }
.tl-btn {
  width:22px; height:19px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:3px; cursor:pointer; color:#ccc;
}
.tl-btn:hover { background:var(--widget-bg-hover); color:#fff; }
.tl-btn.playing { background:var(--widget-sel); color:#fff; }

/* ============ VIEWPORT ============ */
.ed-view3d .area-body { background:#262626; }
.vp-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; outline:none; }
.vp-toolbar {
  position:absolute; left:0; top:0; bottom:0; width:28px; background:rgba(38,38,38,.92);
  display:flex; flex-direction:column; align-items:center; padding-top:3px; gap:1px; z-index:4;
  border-right:1px solid rgba(0,0,0,.4);
}
.vp-toolbar.hidden { display:none; }
.tool-btn {
  width:24px; height:24px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:#cfcfcf;
}
.tool-btn:hover { background:#454545; color:#fff; }
.tool-btn.active { background:var(--widget-sel); color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);}
.tool-sep { height:1px; width:16px; background:#1d1d1d; margin:3px 0; }
.vp-sidebar {
  position:absolute; right:0; top:0; bottom:0; width:0; background:var(--region-bg); z-index:4;
  border-left:1px solid var(--border); display:none; flex-direction:column; overflow:hidden;
}
.vp-sidebar.open { display:flex; width:230px; }
.vp-sidebar-tabs { display:flex; border-bottom:1px solid var(--border); background:#2b2b2b; }
.vp-sidebar-tab { padding:5px 10px; cursor:pointer; color:var(--text-dim); }
.vp-sidebar-tab:hover { color:var(--text); }
.vp-sidebar-tab.active { color:var(--text); background:var(--region-bg); }
.vp-sidebar-body { flex:1 1 auto; overflow-y:auto; padding:2px 0; }
.vp-text-overlay {
  position:absolute; left:34px; top:4px; z-index:3; pointer-events:none; color:#d0d0d0;
  text-shadow:0 1px 2px rgba(0,0,0,.8); font-size:11px; line-height:1.45; white-space:pre;
}
.vp-text-overlay .dim { color:#909090; }
.shade-btn { width:20px; height:20px; border-radius:50%; margin:1px 2px; cursor:pointer; flex:0 0 auto;
  border:1px solid rgba(0,0,0,.5); align-self:center; }
.shade-btn.active { box-shadow:0 0 0 2px var(--widget-sel); }

/* ============ SPLASH ============ */
#splash-overlay {
  position:fixed; inset:0; z-index:3000; background:rgba(10,10,10,.55); display:flex;
  align-items:center; justify-content:center; opacity:1; transition:opacity .25s;
}
#splash-overlay.fading { opacity:0; pointer-events:none; }
#splash {
  width:600px; background:#232323; border-radius:6px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.7); border:1px solid #000;
}
#splash .sp-art { width:600px; height:270px; display:block; }
#splash .sp-body { display:flex; padding:14px 18px 10px; gap:20px; background:#232323; }
#splash .sp-col { flex:1 1 0; }
#splash .sp-head { color:#8a8a8a; font-size:10px; margin-bottom:5px; text-transform:none; }
#splash .sp-item { padding:3px 6px; border-radius:3px; cursor:pointer; color:#d0d0d0; display:flex; gap:8px; align-items:center;}
#splash .sp-item:hover { background:var(--widget-sel); color:#fff; }
#splash .sp-item .sp-sub { color:#8a8a8a; font-size:10px; }
#splash .sp-item:hover .sp-sub { color:#dce8f8; }
#splash .sp-foot { display:flex; padding:6px 18px 12px; gap:14px; color:#7a7a7a; font-size:10px; }
#splash .sp-foot span { cursor:pointer; }
#splash .sp-foot span:hover { color:#ccc; }
#splash .sp-version { margin-left:auto; }

/* ============ DIALOG ============ */
#dialog-overlay {
  position:fixed; inset:0; z-index:2500; background:rgba(8,8,8,.45); display:none;
  align-items:center; justify-content:center;
}
#dialog-overlay.show { display:flex; }
.dialog {
  min-width:340px; max-width:480px; background:#2e2e2e; border:1px solid #101010; border-radius:5px;
  box-shadow:0 14px 44px rgba(0,0,0,.65); overflow:hidden;
}
.dialog .dlg-title {
  background:#262626; padding:6px 12px; display:flex; align-items:center; gap:8px; color:var(--text);
  border-bottom:1px solid #181818;
}
.dialog .dlg-body { padding:16px 14px; color:var(--text); display:flex; gap:12px; align-items:flex-start; line-height:1.5;}
.dialog .dlg-body .dlg-icon { font-size:22px; color:#e8a13d; flex:0 0 auto; }
.dialog .dlg-buttons { display:flex; justify-content:flex-end; gap:6px; padding:10px 12px; background:#282828; }

/* ============ POPOVERS ============ */
.popover {
  position:fixed; z-index:1500; background:var(--menu-bg); border:1px solid #141414; border-radius:5px;
  box-shadow:0 8px 26px rgba(0,0,0,.55); padding:9px 11px; min-width:190px;
}
.popover .pop-row { display:flex; align-items:center; gap:7px; margin:4px 0; }
.popover .pop-title { color:var(--text-dark); font-size:10px; margin:6px 0 2px; }

/* ============ PIE MENU ============ */
#pie-menu { position:fixed; z-index:1800; pointer-events:none; }
#pie-menu .pie-item {
  position:absolute; transform:translate(-50%,-50%); background:rgba(40,40,40,.95); border:1px solid #111;
  border-radius:4px; padding:6px 12px; display:flex; gap:7px; align-items:center; pointer-events:auto;
  cursor:pointer; white-space:nowrap;
}
#pie-menu .pie-item:hover, #pie-menu .pie-item.hot { background:var(--widget-sel); color:#fff; }
#pie-menu .pie-center {
  position:absolute; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%;
  background:rgba(30,30,30,.6); border:1px solid #111; pointer-events:auto;
}

/* ============ TEXT EDITOR ============ */
.ed-text .area-body { flex-direction:row; background:#242424; }
.txt-lines {
  flex:0 0 auto; background:#202020; color:#5f5f5f; text-align:right; padding:8px 8px 8px 4px;
  font-family:var(--mono); font-size:11px; line-height:1.5; overflow:hidden; min-width:36px;
}
.txt-edit {
  flex:1 1 auto; background:#242424; color:#d8d8d8; border:none; outline:none; resize:none;
  font-family:var(--mono); font-size:11px; line-height:1.5; padding:8px; user-select:text;
  -webkit-user-select:text; white-space:pre; overflow:auto; tab-size:4;
}

/* ============ IMAGE EDITOR ============ */
.ed-image .area-body { background:#1c1c1c; align-items:center; justify-content:center; display:flex; }
.img-checker {
  width:420px; height:300px; border:1px solid #000; display:flex; align-items:center; justify-content:center;
  color:#666; flex-direction:column; gap:6px;
  background-image:repeating-conic-gradient(#2a2a2a 0% 25%, #333 0% 50%);
  background-size:24px 24px;
}

/* ============ SHADER EDITOR ============ */
.ed-shader .area-body { background:#282828; }
.shader-canvas { position:absolute; inset:0; width:100%; height:100%; }

/* scrollbars */
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#454545; border-radius:6px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:#565656; background-clip:content-box; border:3px solid transparent; }
::-webkit-scrollbar-corner { background:transparent; }

.hidden { display:none !important; }