@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&family=Poppins:wght@500;700&display=swap');

:root{
  /* Monochrome minimal theme */
  --bg:#f6f6f6;
  --panel-bg:rgba(255,255,255,0.92);
  --panel-border:rgba(15,23,42,0.12);
  --text:#111111;
  --muted:#525252;
  --accent:#111111;
  --accent-2:#2a2a2a;
  --input-bg:#ffffff;
  --input-border:#d4d4d4;
  --menu-shell-bg:#f5f5f5;
  --menu-shell-border:rgba(15,23,42,0.12);
  --menu-card-bg:#ffffff;
  --menu-card-border:rgba(15,23,42,0.12);
  --menu-text:#111111;
  --menu-muted:#525252;
  --menu-input-bg:#ffffff;
  --menu-input-border:#d4d4d4;
  --menu-shadow:0 8px 20px rgba(0,0,0,0.08);
  --radius:12px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(0,0,0,0.15);
  --timeline-height:220px;
  --timeline-header:46px;
}

html,body{
  margin:0;height:100%;overflow:hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#appRoot{
  display: block;
}
body:not(.landing-hidden) #appRoot{
  visibility: visible;
  opacity: 1;
  pointer-events: none;
}
body.landing-hidden #appRoot,
html.skip-landing #appRoot{
  visibility: visible;
  pointer-events: auto;
}

#landing{
  position: fixed;
  inset: 0;
  z-index: 2800;
  overflow: auto;
  background:
    radial-gradient(1000px 440px at 88% -6%, rgba(124,58,237,0.08), transparent 70%),
    radial-gradient(760px 360px at 12% -8%, rgba(17,17,17,0.06), transparent 72%),
    #ffffff;
}
#landing::before{
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(780px 340px at 18% 6%, rgba(255,255,255,0.52), transparent 72%),
    radial-gradient(680px 320px at 88% 10%, rgba(10,132,255,0.14), transparent 70%);
  opacity: 0.28;
  filter: grayscale(1) contrast(1.08);
  pointer-events: none;
  mix-blend-mode: multiply;
  transform: scale(1.02);
}
#landing::after{
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.82) 42%,
    rgba(255,255,255,0.96) 100%
  );
  pointer-events: none;
}
body.landing-hidden #landing,
html.skip-landing #landing{
  display: none;
}

.landingSkip{
  position: absolute;
  left: 18px;
  top: 14px;
  z-index: 5;
  padding: 10px 14px;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  text-decoration: none;
  font: 600 12px/1 'Inter', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.01em;
  transform: translateY(-160%);
  transition: transform .18s ease;
}
.landingSkip:focus{
  transform: translateY(0);
}

.landingShell{
  width: min(1160px, calc(100% - 40px));
  margin: 18px auto 40px;
  padding-bottom: 22px;
  color: #111111;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  position: relative;
  z-index: 1;
}
.landingTopbar{
  position: sticky;
  top: 12px;
  z-index: 3;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 14px;
  border: 1px solid rgba(17,17,17,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 10px 24px rgba(17,17,17,0.05);
  backdrop-filter: blur(10px);
}
.landingWordmark{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #111111;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.landingWordmarkLogo{
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.landingNav{
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.landingNav a,
.landingFooterLinks a{
  color: #555555;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.landingNav a:hover,
.landingFooterLinks a:hover{
  color: #111111;
}
.landingHero{
  border: 1px solid rgba(17,17,17,0.1);
  border-radius: 22px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 16px 36px rgba(17,17,17,0.06);
  padding: clamp(22px, 4vw, 34px);
}
.landingHeroGrid{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}
.landingHeroMain{
  min-width: 0;
}
.landingHeroAside{
  display: grid;
  gap: 14px;
}
.landingEyebrow{
  margin: 0 0 10px;
  color: #5a5a5a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
#landingTitle{
  margin: 0;
  font-size: clamp(40px, 7.8vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #111111;
}
.landingSubtitle{
  margin: 12px 0 0;
  font-size: clamp(20px, 2.8vw, 32px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #191919;
}
.landingBody{
  margin: 16px 0 0;
  max-width: 70ch;
  color: #444444;
  line-height: 1.72;
  font-size: 15px;
}
.landingActions{
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.landingBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 11px;
  border: 1px solid rgba(17,17,17,0.14);
  background: #ffffff;
  color: #111111;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background-color .14s ease, color .14s ease;
}
.landingBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(124,58,237,0.42);
  box-shadow: 0 8px 20px rgba(124,58,237,0.16);
}
.landingBtnPrimary{
  border-color: #111111;
  background: #111111;
  color: #ffffff;
}
.landingBtnPrimary:hover{
  background: #1f1f1f;
  color: #ffffff;
}
.landingBtnGhost{
  background: #ffffff;
}
.landingBtn:focus-visible{
  outline: none;
  border-color: rgba(124,58,237,0.8);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.18);
}
.landingBtn:disabled,
#landingOpenBtn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.landingProgressWrap{
  margin-top: 22px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(17,17,17,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.74);
}
.landingProgressHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.landingProgressStatus{
  color: #161616;
  font-size: 13px;
  font-weight: 700;
}
.landingProgressBar{
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: #ebebeb;
  overflow: hidden;
}
.landingProgressFill{
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #111111 0%, #7c3aed 100%);
  border-radius: inherit;
  transition: width .2s ease;
}
.landingProgressMeta{
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #5e5e5e;
  font-size: 12px;
}
.landingProgressState{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(124,58,237,0.08);
  color: #5b21b6;
  font-weight: 700;
}
#landingProgressValue{
  color: #111111;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.landingMetricCard,
.landingMiniStats article{
  border: 1px solid rgba(17,17,17,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 10px 22px rgba(17,17,17,0.04);
}
.landingMetricCard{
  padding: 16px;
}
.landingMetricEyebrow,
.landingSectionKicker{
  margin: 0 0 10px;
  color: #6b6b6b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.landingMetricList{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.landingMetricList li{
  display: grid;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(17,17,17,0.07);
}
.landingMetricList li:last-child{
  border-bottom: none;
  padding-bottom: 0;
}
.landingMetricList strong{
  font-size: 14px;
  letter-spacing: -0.01em;
}
.landingMetricList span{
  color: #555555;
  font-size: 13px;
  line-height: 1.55;
}
.landingSection{
  margin-top: 16px;
  border: 1px solid rgba(17,17,17,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.94);
  padding: 20px 22px;
  box-shadow: 0 12px 28px rgba(17,17,17,0.04);
}
.landingSectionHead{
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}
.landingSectionTitle{
  margin: 0;
  font-size: clamp(22px, 2.7vw, 30px);
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: #111111;
}
.landingSectionLead{
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: #1e1e1e;
}
.landingSectionText{
  margin: 8px 0 0;
  color: #4d4d4d;
  line-height: 1.68;
  font-size: 14px;
}
.landingConceptGrid{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.9fr);
  gap: 18px;
}
.landingConceptMain{
  min-width: 0;
}
.landingConceptStack{
  display: grid;
  gap: 10px;
}
.landingPills{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.landingPills span{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(124,58,237,0.28);
  background: rgba(124,58,237,0.05);
  color: #4b2aa8;
  font-size: 12px;
  font-weight: 600;
}
.landingGrid{
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.landingGrid3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.landingGrid2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.landingCardMini{
  border: 1px solid rgba(17,17,17,0.08);
  border-radius: 12px;
  padding: 12px 13px;
  background: #fff;
}
.landingCardMini h3{
  margin: 0;
  font-size: 14px;
  color: #111111;
}
.landingCardMini p{
  margin: 6px 0 0;
  font-size: 13px;
  color: #4d4d4d;
  line-height: 1.56;
}
.landingSectionGithub{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.landingInlineLink{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: #111111;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.landingInlineLink:hover{
  color: #5b21b6;
}
.landingFooter{
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 4px;
}
.landingLegal{
  margin: 0;
  color: #7a7a7a;
  font-size: 11px;
}
.landingFooterLinks{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 980px){
  .landingHeroGrid,
  .landingConceptGrid{
    grid-template-columns: 1fr;
  }
  .landingGrid3{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landingTopbar{
    flex-wrap: wrap;
  }
}
@media (max-width: 720px){
  #landing::before{
    opacity: 0.3;
    background-position: center 16px;
    background-size: 160%;
  }
  .landingShell{
    width: calc(100% - 20px);
    margin: 10px auto 24px;
  }
  .landingTopbar{
    top: 10px;
    padding: 12px 14px;
    border-radius: 16px;
  }
  .landingNav{
    gap: 12px;
  }
  .landingHero{
    border-radius: 18px;
    padding: 18px;
  }
  .landingSection{
    margin-top: 12px;
    border-radius: 16px;
    padding: 16px;
  }
  .landingProgressWrap{
    padding: 14px;
  }
  .landingProgressHead,
  .landingProgressMeta,
  .landingFooter{
    align-items: flex-start;
    flex-direction: column;
  }
  .landingActions{
    flex-direction: column;
    align-items: stretch;
  }
  .landingBtn{
    width: 100%;
  }
  .landingGrid2,
  .landingGrid3{
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce){
  .landingProgressFill,
  .landingBtn{
    transition: none;
  }
}

/* Canvas with subtle grid */
#graph{
  width:100%;height:100%;
  background-color: #ffffff; /* solid white backdrop under canvas */
  background-image: none;
}

/* Control panels */
#controls,#fileControls{
  position:absolute;z-index:100;color:var(--text);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:10px 12px;
  backdrop-filter: blur(8px);
}
#controls{top:10px;left:10px;}
#fileControls{top:10px;right:10px;}

/* Inputs & buttons */
#controls button,#controls input,#controls select,
#fileControls button,
#scriptEditorControls button,
#addNodePanel button,#addNodePanel select,
#addGroupPanel button,#addGroupPanel select,
#advancedPanel button,#advancedPanel select{
  margin-right:8px;
  padding:8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  cursor:pointer;
  transition: all .18s ease;
}
#controls button,
#fileControls button,
#scriptEditorControls button,
#addNodePanel button,
#addGroupPanel button,
#advancedPanel button{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border: none;
  color: #fff;
}
#controls button:hover,
#fileControls button:hover,
#scriptEditorControls button:hover,
#addNodePanel button:hover,
#addGroupPanel button:hover,
#advancedPanel button:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}
#controls button:active,
#fileControls button:active,
#scriptEditorControls button:active,
#addNodePanel button:active,
#addGroupPanel button:active,
#advancedPanel button:active{
  transform: translateY(0);
  filter: brightness(0.98);
}

#controls input,#controls select{
  background: var(--input-bg);
  color: var(--text);
}
#controls input:focus,#controls select:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(110,168,254,0.25);
}

#simTimeHud{
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 1760;
  width: 168px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,0.28);
  background: rgba(255,255,255,0.56);
  transition: left .24s ease, transform .24s ease, opacity .24s ease;
  box-shadow: 0 4px 14px rgba(15,23,42,0.12);
  backdrop-filter: blur(8px);
  color: var(--muted);
  font-weight: 600;
  pointer-events: none;
}

body:not(.sidebar-hidden) #simTimeHud{
  left: calc(var(--sidebar-width) + 12px);
}

body.sidebar-hidden #simTimeHud{
  left: 12px;
}
#simTime{
  min-width: 86px;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: var(--text);
  font-weight: 700;
}
#fastestModeOverlay{
  position: fixed;
  inset: 0;
  z-index: 1650;
  background: rgba(2,6,23,0.52);
  backdrop-filter: blur(1px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .16s ease;
}
#fastestModeOverlay.show{
  opacity: 1;
}
#fastestModeNotice{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1750;
  width: min(720px, calc(100vw - 52px));
  box-sizing: border-box;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(251,146,60,0.72);
  background: linear-gradient(180deg, rgba(255,251,235,0.96) 0%, rgba(255,237,213,0.96) 100%);
  color: #7c2d12;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
  box-shadow: 0 22px 55px rgba(2,6,23,0.34);
  backdrop-filter: blur(10px);
  display: none;
}
#fastestModeNotice.show{
  display: block;
}

#fileInput{display:none;}

/* Script Editor Modal */
#scriptEditorModal{
  display:none; position:fixed; inset:0;
  background: rgba(0,0,0,0.25);
  z-index:2600; backdrop-filter: blur(3px);
}
#scriptEditorContainer{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width: min(900px, 92%); height: min(720px, 90%);
  background:#ffffff;border:1px solid var(--panel-border);
  padding:12px;box-sizing:border-box;display:flex;flex-direction:column;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
#scriptEditorTextarea{
  flex:1;width:100%;height:100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:14px;line-height:1.5;
  box-sizing:border-box;color:var(--text);
  background:#ffffff;border:1px solid var(--input-border);
  border-radius: var(--radius-sm); padding:12px;
}
#scriptEditorControls{text-align:right;margin-top:10px;}
#scriptEditorControls button{margin-left:10px;}

/* Scrollbar (WebKit) */
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-thumb{background:#2a3242;border-radius:10px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* === Sidebar & Toggle (left-side menu) === */
#sidebar{
  position: fixed;
  top: 0; left: 0; height: 100%; width: 340px;
  background: var(--menu-shell-bg);
  border-right: 1px solid var(--menu-shell-border);
  box-shadow: 8px 0 24px rgba(0,0,0,0.08);
  display: flex; flex-direction: column; gap: 16px;
  padding: 64px 12px 12px; box-sizing: border-box; position: fixed;
  z-index: 1700; backdrop-filter: blur(8px);
  transform: translateX(0);
  transition: transform .24s ease;
  overflow-y: auto;
  color: var(--menu-text);
}
#sidebar::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:92px;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(110% 100% at 85% 0%, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0) 62%);
  pointer-events:none;
}
/* When timeline is visible, reduce sidebar height to avoid overlap */
body:not(.timeline-hidden) #sidebar{
  bottom: var(--timeline-height);
  height: calc(100% - var(--timeline-height));
}
/* Fully hide the sidebar when collapsed */
body.sidebar-hidden #sidebar{ transform: translateX(-100%); }

/* Keep canvas interactive and visible with sidebar */
#graph{ position: absolute; inset: 0; }
body:not(.sidebar-hidden) #graph{ left: 340px; }
body:not(.timeline-hidden) #graph{ bottom: var(--timeline-height); }

/* Controls inside sidebar use normal flow (override older absolute rules) */
#sidebar #controls,
#sidebar #fileControls{
  position: static !important; left: auto; top: auto; right: auto;
  z-index: auto; background: transparent; border: 0; box-shadow: none; padding: 0;
}
/* Give inner groups a card look */
#sidebar #controls, #sidebar #fileControls{
  background: var(--menu-card-bg);
  border: 1px solid var(--menu-card-border);
  border-radius: var(--radius);
  box-shadow: var(--menu-shadow);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
#sidebar #controls > *, #sidebar #fileControls > *{ margin-bottom: 8px; }
#sidebar #controls > *:last-child, #sidebar #fileControls > *:last-child{ margin-bottom: 0; }
#sidebar .sidebar-spacer{ flex: 1 1 auto; }
#sidebarHeader,
#sidebar #controls,
#backgroundPanel,
#addNodePanel,
#addGroupPanel,
#advancedPanel,
#shortcutPanel,
#sidebar #fileControls{
  flex: 0 0 auto;
}
#sidebar .sidebar-spacer{
  min-height: 8px;
}
#sidebar label{
  color: var(--menu-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#sidebar .control-group{
  gap: 8px;
}
#sidebar .control-group label{
  color: var(--menu-muted);
}
#sidebar .realtimeFpsGroup{
  gap: 6px;
}
#sidebar .realtimeFactorGroup{
  gap: 6px;
}
#sidebar .realtimeFpsValue{
  border: 1px solid var(--menu-input-border);
  border-radius: 10px;
  background: #fafafa;
  color: #1f1f1f;
  padding: 8px 10px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.02em;
}
#sidebar .realtimeFactorValue{
  border: 1px solid var(--menu-input-border);
  border-radius: 10px;
  background: #fafafa;
  color: #1f1f1f;
  padding: 8px 10px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.02em;
}
#sidebar input,
#sidebar select,
#sidebar textarea{
  background: var(--menu-input-bg);
  border: 1px solid var(--menu-input-border);
  color: var(--menu-text);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
#sidebar input::placeholder,
#sidebar textarea::placeholder{
  color: rgba(100,116,139,0.82);
}
#sidebar input:focus,
#sidebar select:focus,
#sidebar textarea:focus{
  outline: none;
  border-color: rgba(17,17,17,0.45);
  box-shadow: 0 0 0 2px rgba(17,17,17,0.12);
}
#sidebar button{
  border: 1px solid rgba(17,17,17,0.12);
  border-radius: 10px;
  color: #f9f9f9;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, #1c1c1c 0%, #0f0f0f 100%);
  box-shadow: 0 6px 12px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}
#sidebar button:hover{
  filter: brightness(1.06);
}
#sidebar button:active{
  filter: brightness(0.96);
}
#sidebar #controls .btn-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#sidebar #controls .simulationRunGrid #btnStart{
  grid-column: 1 / -1;
  min-height: 42px;
  font-weight: 700;
}
#sidebar #controls .simulationRunGrid #btnStop,
#sidebar #controls .simulationRunGrid #btnReset{
  min-height: 38px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,246,249,0.92));
  color: #1d1d1f;
  border-color: rgba(15,23,42,0.12);
  box-shadow: 0 6px 12px rgba(15,23,42,0.06), inset 0 1px 0 rgba(255,255,255,0.75);
}
#sidebar #controls .simulationRunGrid #btnReset{
  color: #9b1c1c;
  border-color: rgba(180,35,24,0.18);
}
#sidebar #fileControls{
  margin-bottom: 10px;
}
#sidebar #fileControls button{
  width: 100%;
}
#sidebar #speedFactor{
  color: #111111;
  font-weight: 700;
}
#sidebar .accessCounter{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  background: #fafafa;
  color: #2f2f2f;
  font-size: 12px;
}
#sidebar .accessCounter .accessCounterLabel{
  color: #666666;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#accessCounterValue{
  color: #111111;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
}

/* Hamburger toggle button (outside sidebar) */
#menuToggle{
  position: fixed; top: 10px; left: 10px;
  z-index: 2000; width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,0.2);
  background: rgba(255,255,255,0.96);
  color: #1f1f1f;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,0.14);
  opacity: .88;
}
#menuToggle:hover{
  opacity: .98;
  border-color: rgba(17,17,17,0.5);
}

/* Speed slider styles */
.control-group{ display:flex; flex-direction:column; gap:6px; }
#speedRange{ width:100%; accent-color: var(--accent); }
#speedRange{ box-sizing: border-box; margin: 0; }
#sidebar input, #sidebar select, #sidebar button{ max-width: 100%; }
#sidebar .control-group label{ display:flex; align-items: center; justify-content: space-between; }
#sidebar #speedRange{
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.2);
  background: linear-gradient(90deg, rgba(30,30,30,0.65), rgba(90,90,90,0.45));
  box-shadow: inset 0 0 0 999px rgba(255,255,255,0.45);
}
#sidebar #speedRange::-webkit-slider-runnable-track{
  height: 8px;
  border-radius: 999px;
  background: transparent;
}
#sidebar #speedRange::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(17,17,17,0.7);
  margin-top: -4px;
  background: #f3f3f3;
  box-shadow: 0 0 0 3px rgba(17,17,17,0.12);
}
#sidebar #speedRange::-moz-range-track{
  height: 8px;
  border-radius: 999px;
  background: rgba(180,180,180,0.8);
}
#sidebar #speedRange::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(17,17,17,0.7);
  background: #f3f3f3;
}
/* Shortcut list */
.shortcuts{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shortcut-row{
  display: grid;
  grid-template-columns: 1fr 1.6fr auto;
  align-items: center;
  column-gap: 12px;
  font-size: 12px;
  color: var(--menu-muted);
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 6px 8px;
}
.shortcut-action{ color: var(--menu-text); font-weight: 600; }
.shortcut-key{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: #2f2f2f;
}
.shortcut-btn{
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #d4d4d4;
  background: #ffffff;
  color: #1f1f1f;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.shortcut-select{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #d4d4d4;
  background: #ffffff;
  color: #1f1f1f;
  font-size: 12px;
}
.shortcut-spacer{
  display: inline-block;
  width: 56px;
  height: 1px;
}
/* Sidebar header branding */
#sidebarHeader{
  display:flex; align-items:center; justify-content:center;
  padding: 6px 12px; margin-bottom: 6px;
  min-height: 0;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  color:#111111;
  text-transform: uppercase;
  letter-spacing: .18rem;
}
#sidebarHeader .appBrandRow{
  display: flex;
  align-items: center;
  gap: 12px;
}
#sidebarHeader .appLogo{
  display: block;
  width: 68px;
  height: 68px;
  object-fit: contain;
  border-radius: 6px;
}
#sidebarHeader .appBrandText{
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight: 700;
  font-size: 1.72rem;
  letter-spacing: .16rem;
  color: #111111;
}
#sidebarHeader .brand{
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .3rem;
  display:flex;
  gap:8px;
  align-items:center;
}
#sidebarHeader .brand .accent{
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(120deg,#1f1f1f,#4a4a4a);
  color:#fff;
  letter-spacing:.15rem;
  font-size:0.9rem;
}
/* Button row to keep actions tidy */
.btn-row{ display:flex; gap: 8px; flex-wrap: wrap; }
.btn-row > button{ flex: 1 1 auto; min-width: 80px; }

/* Toast notification */
#toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(17,24,39,0.92);
  color: #f9fafb;
  font-size: 13px;
  letter-spacing: .02em;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 3000;
}
#toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* === Timing chart dock === */
#timelineDock{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--timeline-height);
  background: #f8fafc;
  border-top: 1px solid var(--panel-border);
  box-shadow: 0 -10px 24px rgba(0,0,0,0.08);
  z-index: 1400;
  display: flex;
  flex-direction: column;
}
body.timeline-hidden #timelineDock{ display: none; }

#timelineResizeHandle{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  cursor: ns-resize;
  z-index: 2;
}

#timelineRevealHandle{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  display: none;
  cursor: ns-resize;
  z-index: 1455;
}
body.timeline-hidden #timelineRevealHandle{
  display: block;
}
#timelineRevealHandle::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 88px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(80,80,80,0.7);
  box-shadow: 0 1px 6px rgba(0,0,0,0.25);
}

#timelineHeader{
  height: var(--timeline-header);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 10px 0 12px;
  background: #111111;
  color: #f4f4f4;
  font-size: 12px;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#timelineHeader .timelineHeaderLeft{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 300px;
}
#timelineHeader .timelineTitle{
  font-weight: 700;
  font-size: 11px;
  color: #d4d4d4;
  text-transform: uppercase;
}
#timelineHeader .timelineTabs{
  display:flex;
  gap:6px;
}
#timelineHeader .timelineTab{
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.08);
  color: #d4d4d4;
  cursor: pointer;
}
#timelineHeader .timelineTab.is-active{
  background: #2a2a2a;
  color: #fff;
  border-color: rgba(255,255,255,0.28);
}
#timelineHeader .timelineSelection{
  flex: 1 1 auto;
  text-align: center;
  font-weight: 600;
  color: #ededed;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 11px;
}
#timelineHeader .timelinePropsMeta{
  display:none;
  flex: 1 1 auto;
  text-align: center;
  font-size: 11px;
  color: #d4d4d4;
  letter-spacing: 0.03em;
  text-transform: none;
}
#timelineHeader .timelineActions{
  display:flex;
  align-items:center;
  gap:6px;
}
#timelineHeader #timelinePropsActions{
  display:none;
}
#timelineHeader .timelineBtn{
  border: 1px solid rgba(255,255,255,0.2);
  background: #2a2a2a;
  color: #f9fafb;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
}
#timelineHeader .timelineBtn:hover{ filter: brightness(1.08); }

#timelineBody{
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
}
#timelineChartPanel{
  position: absolute;
  inset: 0;
}
#timelineCanvas{
  width: 100%;
  height: 100%;
  display: block;
  background: #ffffff;
  touch-action: none;
}
#timelineBody.view-props #timelineChartPanel,
#timelineBody.view-inspector #timelineChartPanel{
  display: none;
}
#timelineBody.view-chart #nodePropsPanel,
#timelineBody.view-chart #selectionInspectorPanel,
#timelineBody.view-props #selectionInspectorPanel,
#timelineBody.view-inspector #nodePropsPanel{
  display: none;
}
#timelineBody.view-chart .workspacePopoutPlaceholder[data-view="props"],
#timelineBody.view-chart .workspacePopoutPlaceholder[data-view="inspector"],
#timelineBody.view-props .workspacePopoutPlaceholder[data-view="chart"],
#timelineBody.view-props .workspacePopoutPlaceholder[data-view="inspector"],
#timelineBody.view-inspector .workspacePopoutPlaceholder[data-view="chart"],
#timelineBody.view-inspector .workspacePopoutPlaceholder[data-view="props"]{
  display: none;
}

#nodePropsPanel{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #fbfbfb 0%, #f2f2f2 100%);
  color: #1f1f1f;
}
#selectionInspectorPanel{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f7f7f8 0%, #ededf0 100%);
  color: #1f1f1f;
  overflow: auto;
}
.nodePropsToolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(15,23,42,0.09);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(6px);
}
#nodePropsFilter{
  width: min(420px, 64%);
  min-width: 220px;
  padding: 7px 10px;
  border: 1px solid #d4d4d4;
  border-radius: 9px;
  background: #fff;
  color: #1f1f1f;
  font-size: 12px;
}
#nodePropsSummary{
  color: #4f4f4f;
  font-size: 12px;
  font-weight: 600;
}
.nodePropsTableWrap{
  flex: 1;
  overflow: auto;
  padding: 0;
}
#nodePropsTable{
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
#nodePropsTable th,
#nodePropsTable td{
  border-bottom: 1px solid #e5e5e5;
  padding: 7px 8px;
  vertical-align: top;
}
#nodePropsTable thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f0f0f0;
  color: #222222;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
#nodePropsTable tbody tr:nth-child(even){
  background: rgba(248,248,248,0.9);
}
#nodePropsTable tbody tr.is-node-selected td{
  background: linear-gradient(90deg, rgba(0,0,0,0.08), rgba(0,0,0,0.04));
}
#nodePropsTable td.col-id{
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #444444;
}
#nodePropsTable td.col-id .node-id-link{
  border: 0;
  background: transparent;
  color: #222222;
  font-weight: 700;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
#nodePropsTable td.col-id .node-id-link:hover{
  color: #000000;
}
#nodePropsTable td.col-node{
  color: #1f1f1f;
  font-weight: 600;
}
#nodePropsTable td.col-node input{
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  color: #1f1f1f;
  background: #fff;
  font-weight: 600;
}
#nodePropsTable td.col-type{
  color: #4f4f4f;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
#nodePropsTable td.col-connected{
  color: #2f2f2f;
  font-size: 11px;
  line-height: 1.4;
  width: 120px;
  max-width: 120px;
  white-space: normal;
  word-break: break-word;
}
#nodePropsTable td.col-props textarea{
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  color: #1f1f1f;
  background: #fff;
  min-height: 72px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
#nodePropsTable td.col-props textarea.input-error,
#nodePropsTable td.col-node input.input-error{
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,0.12);
}

#timelineDock[data-view="props"] #timelineSelection{
  display: none;
}
#timelineDock[data-view="props"] #timelinePropsMeta,
#timelineDock[data-view="inspector"] #timelinePropsMeta{
  display: inline;
}
#timelineDock[data-view="props"] #timelineChartActions,
#timelineDock[data-view="inspector"] #timelineChartActions{
  display: none;
}
#timelineDock[data-view="props"] #timelinePropsActions{
  display: flex;
}
#timelineDock[data-view="inspector"] #timelinePropsActions{
  display: none;
}
#timelineDock[data-view="inspector"] #timelineSelection{
  display: none;
}
#timelineDock[data-view="inspector"] #timelineInspectorActions{
  display: flex;
}

#timelineHeader #timelineInspectorActions{
  display: none;
}

.selectionInspectorEmpty{
  margin: auto;
  width: min(520px, calc(100% - 48px));
  padding: 28px 30px;
  border: 1px dashed rgba(15,23,42,0.18);
  border-radius: 18px;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 16px 30px rgba(15,23,42,0.06);
}
.selectionInspectorEmpty h3{
  margin: 0 0 10px;
  font-size: 19px;
  color: #151515;
}
.selectionInspectorEmpty p{
  margin: 0 0 10px;
  line-height: 1.6;
  color: #434343;
}
.selectionInspectorLayout{
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 18px;
  padding: 16px;
}
.selectionInspectorSidebar,
.selectionInspectorMain{
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.selectionInspectorCard{
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 14px 32px rgba(15,23,42,0.08);
  overflow: hidden;
}
.selectionInspectorHeader{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(247,247,249,0.92) 100%);
}
.selectionInspectorEyebrow{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4f4f4f;
}
.selectionInspectorTitle{
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
  color: #141414;
}
.selectionInspectorSubtitle{
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #545454;
}
.selectionInspectorStatGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 18px 18px;
}
.selectionInspectorStat{
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(248,248,250,0.88);
}
.selectionInspectorStatLabel{
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #666666;
  margin-bottom: 4px;
}
.selectionInspectorStatValue{
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #111111;
  word-break: break-word;
}
.selectionInspectorSection{
  padding: 16px 18px 18px;
  border-top: 1px solid rgba(15,23,42,0.07);
}
.selectionInspectorSection:first-child{
  border-top: 0;
}
.selectionInspectorSectionTitle{
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #222222;
}
.selectionInspectorFields{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.selectionInspectorField{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.selectionInspectorField.is-span-2{
  grid-column: 1 / -1;
}
.selectionInspectorFieldLabel{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5a5a5a;
}
.selectionInspectorInput,
.selectionInspectorSelect,
.selectionInspectorTextarea{
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 12px;
  background: #ffffff;
  color: #161616;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
}
.selectionInspectorTextarea{
  min-height: 120px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.selectionInspectorInput[type="checkbox"]{
  width: 18px;
  height: 18px;
  padding: 0;
}
.selectionInspectorCheckboxRow{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 2px;
}
.selectionInspectorHint{
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: #565656;
}
.selectionInspectorActionsRow{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.selectionInspectorBtn{
  border: 1px solid rgba(15,23,42,0.12);
  background: #ffffff;
  color: #161616;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.selectionInspectorBtn:hover{
  filter: brightness(0.98);
}
.selectionInspectorBtn.is-primary{
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}
.selectionInspectorBtn.is-danger{
  color: #9f1d15;
  border-color: rgba(159,29,21,0.18);
  background: rgba(255,244,243,0.95);
}
.selectionInspectorBtn.is-muted{
  color: #555555;
}
.selectionInspectorNotice{
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(15,23,42,0.04);
  color: #3b3b3b;
  font-size: 12px;
  line-height: 1.55;
}
.selectionInspectorPills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.selectionInspectorPill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(15,23,42,0.06);
  color: #2a2a2a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 1100px){
  .selectionInspectorLayout{
    grid-template-columns: 1fr;
  }
}


/* Add Node + Shortcut panel cards */
#addNodePanel,
#addGroupPanel,
#advancedPanel,
#shortcutPanel,
#backgroundPanel{
  background: var(--menu-card-bg);
  border: 1px solid var(--menu-card-border);
  border-radius: var(--radius);
  box-shadow: var(--menu-shadow);
  padding: 10px 12px; margin-top: 8px;
  display:flex; flex-direction: column; gap: 10px;
  position: relative;
}
#sidebar #controls::before,
#sidebar #fileControls::before,
#addNodePanel::before,
#addGroupPanel::before,
#advancedPanel::before,
#shortcutPanel::before,
#backgroundPanel::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #111111, #666666);
  opacity: 0.6;
}
#addNodePanel .panelHeader,
#addGroupPanel .panelHeader,
#advancedPanel .panelHeader,
#shortcutPanel .panelHeader,
#backgroundPanel .panelHeader{
  font-weight: 700;
  color: #111111;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 11px;
}
#addNodePanel .field{ display:flex; flex-direction: column; gap:6px; }
#addGroupPanel .field{ display:flex; flex-direction: column; gap:6px; }
#backgroundPanel .field{ display:flex; flex-direction: column; gap:6px; }
#addNodePanel select{ width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid var(--menu-input-border); border-radius: var(--radius-sm); background:var(--menu-input-bg); color:var(--menu-text); }
#addGroupPanel select{ width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid var(--menu-input-border); border-radius: var(--radius-sm); background:var(--menu-input-bg); color:var(--menu-text); }
#addNodePanel .propFields{ display:flex; flex-direction: column; gap:10px; }
#addGroupPanel .propFields{ display:flex; flex-direction: column; gap:10px; }
#addNodePanel .propFields .placeholder{ color: var(--menu-muted); font-size:13px; }
#addGroupPanel .propFields .placeholder{ color: var(--menu-muted); font-size:13px; }
#addNodePanel .propFields .field label{ font-size: 12px; color: var(--menu-muted); }
#addGroupPanel .propFields .field label{ font-size: 12px; color: var(--menu-muted); }
#addNodePanel .propFields input,
#addNodePanel .propFields textarea,
#addNodePanel .propFields select{
  width:100%; box-sizing:border-box; padding:8px 10px;
  border:1px solid var(--menu-input-border); border-radius: var(--radius-sm);
  background:var(--menu-input-bg); color:var(--menu-text);
}
#addGroupPanel .propFields input,
#addGroupPanel .propFields textarea,
#addGroupPanel .propFields select{
  width:100%; box-sizing:border-box; padding:8px 10px;
  border:1px solid var(--menu-input-border); border-radius: var(--radius-sm);
  background:var(--menu-input-bg); color:var(--menu-text);
}
#addNodePanel .propFields textarea{ resize: vertical; min-height:60px; }
#addGroupPanel .propFields textarea{ resize: vertical; min-height:60px; }
#addGroupPanel .group-stop-rate{
  font-size: 12px;
  color: var(--menu-muted);
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 6px 8px;
}
#backgroundPanel input[type="checkbox"]{
  width: auto;
  justify-self: flex-start;
}
#backgroundPanel .btn-row > button{
  min-width: 96px;
}

/* === Benchmark modal === */
#benchmarkModal{
  display:none; position:fixed; inset:0; z-index:2100;
  background: rgba(0,0,0,0.28); backdrop-filter: blur(3px);
}
#engineTestModal{
  display:none; position:fixed; inset:0; z-index:2100;
  background: rgba(0,0,0,0.28); backdrop-filter: blur(3px);
}
#benchmarkContainer{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(920px, 94%); max-height: 82vh; overflow:auto;
  background:#fff; border:1px solid var(--panel-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding:14px; box-sizing:border-box;
}
#engineTestContainer{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(1040px, 95%); max-height: 84vh; overflow:auto;
  background:#fff; border:1px solid var(--panel-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding:14px; box-sizing:border-box;
}
.benchmarkHeader{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.benchmarkHeader h2{
  margin:0; font-size:18px; letter-spacing:0.02em;
}
.benchmarkProgressWrap{
  margin: 10px 0 10px;
  display: none;
}
.benchmarkProgressLabel{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.benchmarkProgressTrack{
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}
.benchmarkProgressBar{
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #111111, #4a4a4a);
  transition: width .12s linear;
}
.benchmarkSummary{
  margin:8px 0 6px; color:var(--text); font-size:13px;
}
.benchmarkLegend{
  margin:0 0 12px; color:var(--muted); font-size:12px; line-height:1.5;
}
#benchmarkTable{
  width:100%;
  border-collapse: collapse;
  font-size:13px;
}
#engineTestCasesTable,
#engineTestFailuresTable{
  width:100%;
  border-collapse: collapse;
  font-size:13px;
}
#benchmarkTable th,
#benchmarkTable td{
  border-bottom:1px solid var(--panel-border);
  padding:8px 10px;
  text-align:left;
  vertical-align:middle;
}
#engineTestCasesTable th,
#engineTestCasesTable td,
#engineTestFailuresTable th,
#engineTestFailuresTable td{
  border-bottom:1px solid var(--panel-border);
  padding:8px 10px;
  text-align:left;
  vertical-align:top;
}
#benchmarkTable thead th{
  position:sticky;
  top:0;
  background:#f4f4f4;
  z-index:1;
}
#engineTestCasesTable thead th,
#engineTestFailuresTable thead th{
  position:sticky;
  top:0;
  background:#f4f4f4;
  z-index:1;
}
#benchmarkTable tbody tr.bench-best td{
  background:#f1f1f1;
}
.benchSpeedCell{
  min-width: 250px;
}
.benchSpeedText{
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin-bottom: 4px;
}
.benchBarTrack{
  width:100%;
  height:10px;
  border-radius:999px;
  background:#e5e7eb;
  overflow:hidden;
}
.benchBarFill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #111111, #4a4a4a);
}
.benchMono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}
.performanceActionsRow{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.engineTestToolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:10px 0 6px;
}
.engineTestToolbarActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.engineTestToolbarActions label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#4b5563;
}
.engineTestToolbarActions input[type="text"],
.engineTestToolbarActions input[type="number"],
.engineTestToolbarActions select{
  min-width:88px;
  padding:6px 8px;
  border:1px solid rgba(15,23,42,0.12);
  border-radius:10px;
  background:rgba(255,255,255,0.7);
}
.engineTestSection{
  margin-top:16px;
}
.engineTestSection h3{
  margin:0 0 8px;
  font-size:14px;
  letter-spacing:0.01em;
}
.engineTestStatusPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:62px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  border:1px solid rgba(15,23,42,0.12);
  background:rgba(255,255,255,0.88);
}
.engineTestStatusPill.is-pass{
  color:#166534;
  border-color:rgba(22,101,52,0.18);
  background:rgba(22,163,74,0.10);
}
.engineTestStatusPill.is-warn{
  color:#92400e;
  border-color:rgba(146,64,14,0.18);
  background:rgba(245,158,11,0.12);
}
.engineTestStatusPill.is-fail{
  color:#991b1b;
  border-color:rgba(153,27,27,0.18);
  background:rgba(239,68,68,0.11);
}
.engineTestMessage{
  color:var(--muted);
  line-height:1.45;
}
.engineTestMono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}

/* === Share URL modal === */
#shareUrlModal{
  display:none; position:fixed; inset:0; z-index:2200;
  background: rgba(0,0,0,0.28); backdrop-filter: blur(3px);
}
#shareUrlContainer{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(900px, 94%); max-height: 82vh; overflow:auto;
  background:#fff; border:1px solid var(--panel-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding:14px; box-sizing:border-box;
}
.shareUrlHeader{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.shareUrlHeader h2{
  margin:0; font-size:18px; letter-spacing:0.02em;
}
#shareUrlContainer button{
  border: 1px solid var(--input-border);
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
#shareUrlContainer button:hover{ filter: brightness(1.06); }
.shareUrlBody{
  font-size:13px; color:var(--text); line-height:1.55;
}
.shareUrlBody p{
  margin: 10px 0;
}
.shareUrlBody label{
  display:block;
  margin-top: 10px;
  margin-bottom: 6px;
  font-weight: 600;
}
#shareUrlValue{
  width:100%;
  min-height:110px;
  max-height:260px;
  box-sizing:border-box;
  resize:vertical;
  padding:10px;
  border:1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background:#f8fafc;
  color:#0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:12px;
  line-height:1.45;
}
.shareUrlMeta{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  color:var(--muted);
}
#shareUrlWarning{
  color:#b45309;
  font-weight:600;
}
.shareUrlActions{
  margin-top:10px;
  text-align:right;
}

/* === Stop group modal === */
#stopGroupModal{
  display:none; position:fixed; inset:0; z-index:2250;
  background: rgba(0,0,0,0.28); backdrop-filter: blur(3px);
}
#stopGroupContainer{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  box-sizing:border-box;
}

/* === About / Licenses modal === */
#aboutModal{
  display:none; position:fixed; inset:0; z-index:2000;
  background: rgba(0,0,0,0.25); backdrop-filter: blur(3px);
}
#aboutContainer{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(840px, 92%); max-height: 80vh; overflow:auto;
  background:#fff; border:1px solid var(--panel-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding:12px; box-sizing:border-box;
}
.aboutHeader{ display:flex; align-items:center; justify-content: space-between; }
.aboutHeader h2{ margin:0; font-size:18px; }
.aboutHeader button{ margin-left:10px; }
.aboutBody{ font-size:14px; color: var(--text); }
.aboutBody pre.license{ white-space: pre-wrap; background:#fafafa; padding:10px; border:1px solid var(--panel-border); border-radius: var(--radius-sm); }
#speedFactor{ font-weight: 600; color: var(--muted); margin-left: 6px; }
/* ===== UI Refresh: Professional Monochrome + Red Accent ===== */
:root{
  --bg:#ffffff;
  --panel-bg:rgba(255,255,255,0.96);
  --panel-border:rgba(17,17,17,0.12);
  --text:#111111;
  --muted:#4d4d4d;
  --accent:#7c3aed;
  --accent-2:#6d28d9;
  --input-border:#d0d0d0;
  --menu-shell-bg:#fafafa;
  --menu-shell-border:rgba(17,17,17,0.12);
  --menu-card-border:rgba(17,17,17,0.1);
  --menu-shadow:0 12px 24px rgba(0,0,0,0.06);
  --shadow:0 14px 30px rgba(0,0,0,0.08);
}

html, body{
  letter-spacing: 0.01em;
}

#graph{
  background-color:#ffffff;
  background-image:
    linear-gradient(to right, rgba(17,17,17,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,17,17,0.045) 1px, transparent 1px),
    linear-gradient(to right, rgba(124,58,237,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124,58,237,0.08) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
}

#sidebar{
  width: 352px;
  background: var(--menu-shell-bg);
  border-left: 1px solid var(--menu-shell-border);
}
body:not(.sidebar-hidden) #graph{ right: 352px; }

#sidebar #controls,
#sidebar #fileControls,
#addNodePanel,
#addGroupPanel,
#advancedPanel,
#shortcutPanel,
#backgroundPanel{
  border-radius: 14px;
  border: 1px solid var(--menu-card-border);
  box-shadow: var(--menu-shadow);
}

#sidebar #controls,
#sidebar #fileControls,
#addNodePanel,
#addGroupPanel,
#advancedPanel,
#shortcutPanel,
#backgroundPanel{
  padding: 12px;
  gap: 10px;
}

#sidebar #controls::before,
#sidebar #fileControls::before,
#addNodePanel::before,
#addGroupPanel::before,
#advancedPanel::before,
#shortcutPanel::before,
#backgroundPanel::before{
  background: linear-gradient(90deg, var(--accent), #111111);
  opacity: 0.95;
}

#sidebarHeader{
  min-height: 72px;
  padding: 8px 12px;
  background:#ffffff;
  border:1px solid var(--menu-card-border);
  box-shadow: 0 8px 16px rgba(0,0,0,0.06);
  letter-spacing: .12rem;
}
#sidebarHeader .appLogo{ width: 44px; height: 44px; }
#sidebarHeader .appBrandText{ font-size: 1.22rem; letter-spacing: .12rem; color:#111; }

#controls button,
#fileControls button,
#scriptEditorControls button,
#addNodePanel button,
#addGroupPanel button,
#advancedPanel button,
#sidebar button{
  background: #111111 !important;
  color: #ffffff !important;
  border: 1px solid #111111 !important;
  border-radius: 10px;
  font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
}

#controls button:hover,
#fileControls button:hover,
#scriptEditorControls button:hover,
#addNodePanel button:hover,
#addGroupPanel button:hover,
#advancedPanel button:hover,
#sidebar button:hover{
  background: #1e1e1e !important;
  border-color: var(--accent) !important;
  box-shadow: 0 5px 14px rgba(109,40,217,0.24);
  transform: translateY(-1px);
}

#controls button:focus-visible,
#fileControls button:focus-visible,
#scriptEditorControls button:focus-visible,
#addNodePanel button:focus-visible,
#addGroupPanel button:focus-visible,
#advancedPanel button:focus-visible,
#sidebar button:focus-visible,
#sidebar input:focus,
#sidebar select:focus,
#sidebar textarea:focus{
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.18) !important;
}

/* Simple SVG icons for primary actions */
#controls button,
#fileControls button,
#advancedPanel button{
  position: relative;
}
#btnStart,
#btnStop,
#btnReset,
#btnSave,
#btnLoad,
#btnShareUrl,
#btnExportHtml,
#btnBenchmark{
  padding-left: 34px !important;
}
#btnStart::before,
#btnStop::before,
#btnReset::before,
#btnSave::before,
#btnLoad::before,
#btnShareUrl::before,
#btnExportHtml::before,
#btnBenchmark::before{
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background: #ffffff;
  opacity: 0.96;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
#btnStart::before{
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M5 3l8 5-8 5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M5 3l8 5-8 5z'/%3E%3C/svg%3E");
}
#btnStop::before{
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect fill='black' x='4' y='4' width='8' height='8' rx='1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect fill='black' x='4' y='4' width='8' height='8' rx='1.5'/%3E%3C/svg%3E");
}
#btnReset::before{
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M8 2a6 6 0 106 6h-2a4 4 0 11-1.17-2.83L9 7h5V2l-1.76 1.76A5.97 5.97 0 008 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M8 2a6 6 0 106 6h-2a4 4 0 11-1.17-2.83L9 7h5V2l-1.76 1.76A5.97 5.97 0 008 2z'/%3E%3C/svg%3E");
}
#btnSave::before{
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M3 2h8l2 2v10H3V2zm2 1v3h5V3H5zm0 6v4h6V9H5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M3 2h8l2 2v10H3V2zm2 1v3h5V3H5zm0 6v4h6V9H5z'/%3E%3C/svg%3E");
}
#btnLoad::before{
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M8 2l3 3H9v4H7V5H5l3-3zm-5 8h10v4H3v-4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M8 2l3 3H9v4H7V5H5l3-3zm-5 8h10v4H3v-4z'/%3E%3C/svg%3E");
}
#btnShareUrl::before{
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M6.5 5.5a2.5 2.5 0 013.54 0l.46.46-1.06 1.06-.46-.46a1 1 0 00-1.41 0L5.6 8.53a1 1 0 000 1.41l.46.46-1.06 1.06-.46-.46a2.5 2.5 0 010-3.54L6.5 5.5zm3 0a2.5 2.5 0 013.54 3.54l-1.97 1.97a2.5 2.5 0 01-3.54 0l-.46-.46 1.06-1.06.46.46a1 1 0 001.41 0l1.97-1.97a1 1 0 000-1.41 1 1 0 00-1.41 0l-.46.46-1.06-1.06.46-.46z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M6.5 5.5a2.5 2.5 0 013.54 0l.46.46-1.06 1.06-.46-.46a1 1 0 00-1.41 0L5.6 8.53a1 1 0 000 1.41l.46.46-1.06 1.06-.46-.46a2.5 2.5 0 010-3.54L6.5 5.5zm3 0a2.5 2.5 0 013.54 3.54l-1.97 1.97a2.5 2.5 0 01-3.54 0l-.46-.46 1.06-1.06.46.46a1 1 0 001.41 0l1.97-1.97a1 1 0 000-1.41 1 1 0 00-1.41 0l-.46.46-1.06-1.06.46-.46z'/%3E%3C/svg%3E");
}
#btnExportHtml::before{
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M4 2h5l3 3v9H4V2zm5 1v3h3M6 8h4v1H6V8zm0 2h4v1H6v-1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M4 2h5l3 3v9H4V2zm5 1v3h3M6 8h4v1H6V8zm0 2h4v1H6v-1z'/%3E%3C/svg%3E");
}
#btnBenchmark::before{
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M2 13h12v1H2v-1zm1-2h2v2H3v-2zm4-3h2v5H7V8zm4-4h2v9h-2V4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M2 13h12v1H2v-1zm1-2h2v2H3v-2zm4-3h2v5H7V8zm4-4h2v9h-2V4z'/%3E%3C/svg%3E");
}

#sidebar .control-group label,
#sidebar label{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#sidebar input,
#sidebar select,
#sidebar textarea,
#nodePropsFilter,
#nodePropsTable td.col-node input,
#nodePropsTable td.col-props textarea{
  border-radius: 10px;
  border: 1px solid var(--input-border);
  background: #fff;
}

#timelineHeader{
  background: #111111;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
#timelineHeader .timelineTab.is-active{
  background: var(--accent);
  border-color: rgba(255,255,255,0.3);
}
#timelineHeader .timelineBtn{
  background: #262626;
  border-color: rgba(255,255,255,0.26);
}
#timelineHeader .timelineBtn:hover{
  background: #2f2f2f;
  border-color: rgba(124,58,237,0.95);
}

#nodePropsPanel{
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
}
#nodePropsTable tbody tr.is-node-selected td{
  background: linear-gradient(90deg, rgba(124,58,237,0.12), rgba(124,58,237,0.05));
}

.benchmarkProgressBar,
.benchBarFill{
  background: linear-gradient(90deg, var(--accent), #111111);
}

#simTimeHud{
  border-color: rgba(124,58,237,0.35);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
#simTime{ color:#111; font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

/* Panel heading icon dots */
#addNodePanel .panelHeader::before,
#addGroupPanel .panelHeader::before,
#advancedPanel .panelHeader::before,
#shortcutPanel .panelHeader::before,
#backgroundPanel .panelHeader::before{
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 999px;
  background: #111111;
  box-shadow: 0 0 0 1px rgba(124,58,237,0.14);
  vertical-align: middle;
}

/* ===== Sidebar usability upgrade ===== */
#sidebar #controls{
  position: sticky;
  top: 12px;
  z-index: 10;
}
#sidebar #fileControls{
  position: sticky;
  bottom: 12px;
  z-index: 10;
}

#sidebar button:disabled{
  opacity: 0.42 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  border-color: rgba(17,17,17,0.16) !important;
}

.panel-help{
  border:1px solid rgba(17,17,17,0.08);
  background:linear-gradient(180deg, rgba(124,58,237,0.05), rgba(255,255,255,0.96));
  border-radius:10px;
  padding:9px 11px;
  color:#525252;
  font:500 12px/1.55 'Inter', ui-sans-serif, system-ui, sans-serif;
}
.panel-help-compact{
  padding:7px 10px;
  font-size:11px;
  line-height:1.45;
}

.fieldHint{
  margin-top: 6px;
  color: rgba(29,29,31,0.62);
  font: 500 12px/1.45 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.fieldHint strong{
  color: #1d1d1f;
  font-weight: 700;
}

.exampleSaveActions{
  margin-top: 4px;
}

#sidebar .exampleSaveActions > button{
  flex: 1 1 140px;
  min-width: 0;
}

.simStatusCard{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:11px;
  border:1px solid rgba(17,17,17,0.08);
  border-radius:12px;
  background:#ffffff;
}
.simStatusHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.simStatusBadge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(17,17,17,0.12);
  background:#f5f5f5;
  color:#111111;
  font:700 11px/1 'Inter', ui-sans-serif, system-ui, sans-serif;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.simStatusBadge.is-running{
  border-color:rgba(124,58,237,0.24);
  background:rgba(124,58,237,0.12);
  color:#5b21b6;
}
.simStatusEngine{
  color:#5a5a5a;
  font:600 12px/1.4 'JetBrains Mono', ui-monospace, monospace;
}
.simStatusGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.simStatusItem{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.simStatusLabel{
  color:#737373;
  font:700 10px/1 'Inter', ui-sans-serif, system-ui, sans-serif;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.simStatusItem strong{
  color:#111111;
  font:700 13px/1.3 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.quick-pick-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.quickPickBtn{
  border:1px solid rgba(17,17,17,0.12);
  background:#ffffff;
  color:#111111;
  border-radius:999px;
  padding:6px 10px;
  font:600 12px/1 'Inter', ui-sans-serif, system-ui, sans-serif;
  cursor:pointer;
}
.quickPickBtn:hover,
.quickPickBtn.is-active{
  border-color:rgba(124,58,237,0.38);
  background:rgba(124,58,237,0.08);
  color:#5b21b6;
}

.category-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.categoryTabBtn{
  border:1px solid rgba(17,17,17,0.12);
  background:#ffffff;
  color:#444444;
  border-radius:999px;
  padding:6px 10px;
  font:600 11px/1 'Inter', ui-sans-serif, system-ui, sans-serif;
  text-transform:uppercase;
  letter-spacing:0.05em;
  cursor:pointer;
}
.categoryTabBtn:hover,
.categoryTabBtn.is-active{
  border-color:rgba(124,58,237,0.38);
  background:rgba(124,58,237,0.1);
  color:#5b21b6;
}

.shortcut-group-label{
  margin-top:4px;
  padding-top:8px;
  border-top:1px solid rgba(17,17,17,0.08);
  color:#6b7280;
  font:700 10px/1 'Inter', ui-sans-serif, system-ui, sans-serif;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.shortcut-group-label:first-child{
  margin-top:0;
  padding-top:0;
  border-top:0;
}
.shortcut-btn{
  min-width:72px;
}

.sidebar-panel-collapsible .panelHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  user-select:none;
}
#controls .panelHeader,
#fileControls .panelHeader{
  font-weight:700;
  color:#111111;
  letter-spacing:0.07em;
  text-transform:uppercase;
  font-size:11px;
}
#controls .panelHeader::before,
#fileControls .panelHeader::before{
  content:"";
  display:inline-block;
  width:9px;
  height:9px;
  margin-right:7px;
  border-radius:999px;
  background:#111111;
  box-shadow:0 0 0 2px rgba(124,58,237,0.2);
  vertical-align:middle;
}
.sidebar-panel-collapsible .panelHeader::after{
  content:"▾";
  margin-left:auto;
  color:#6b7280;
  font-size:12px;
  transition:transform .14s ease;
}
.sidebar-panel-collapsible.is-collapsed .panelHeader::after{
  transform:rotate(-90deg);
}
.sidebar-panel-collapsible.is-collapsed > :not(.panelHeader){
  display:none !important;
}

@media (max-width: 1120px){
  .simStatusGrid{
    grid-template-columns:1fr;
  }
  .shortcut-btn{
    min-width:64px;
  }
}

/* ===== Editor refinement: minimal, OpenAI-like ===== */
:root{
  --accent:#7057ff;
  --accent-2:#5b3df5;
  --menu-shell-bg:rgba(248,248,250,0.92);
  --menu-card-bg:rgba(255,255,255,0.92);
  --menu-card-border:rgba(17,17,17,0.08);
  --menu-shell-border:rgba(17,17,17,0.08);
  --menu-shadow:0 18px 42px rgba(15,23,42,0.07);
  --shadow:0 18px 42px rgba(15,23,42,0.07);
}

#graph{
  background-color:#fcfcfd;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(17,17,17,0.07) 1px, transparent 0),
    linear-gradient(to right, rgba(112,87,255,0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(112,87,255,0.055) 1px, transparent 1px);
  background-size: 24px 24px, 120px 120px, 120px 120px;
}

#sidebar{
  width: 336px;
  background: linear-gradient(180deg, rgba(251,251,253,0.96), rgba(246,246,249,0.94));
  border-left: 1px solid rgba(17,17,17,0.08);
  box-shadow: -20px 0 44px rgba(15,23,42,0.06);
}
body:not(.sidebar-hidden) #graph{
  right: 336px;
}
#sidebar::before{
  background: linear-gradient(180deg, rgba(112,87,255,0.05), transparent 32%);
}

#sidebarHeader,
#sidebar #controls,
#sidebar #fileControls,
#addNodePanel,
#addGroupPanel,
#advancedPanel,
#shortcutPanel,
#backgroundPanel{
  border-radius: 18px;
  border: 1px solid rgba(17,17,17,0.08);
  background: rgba(255,255,255,0.88);
  box-shadow: 0 14px 34px rgba(15,23,42,0.05);
  backdrop-filter: blur(10px);
}

#sidebarHeader{
  min-height: 64px;
  padding: 8px 10px;
  letter-spacing: 0.08rem;
}
#sidebarHeader .appLogo{
  width: 38px;
  height: 38px;
}
#sidebarHeader .appBrandText{
  font-size: 1.02rem;
  letter-spacing: 0.1rem;
}

#sidebar #controls::before,
#sidebar #fileControls::before,
#addNodePanel::before,
#addGroupPanel::before,
#advancedPanel::before,
#shortcutPanel::before,
#backgroundPanel::before{
  height: 1px;
  opacity: 0.75;
  background: linear-gradient(90deg, transparent, rgba(112,87,255,0.56), transparent);
}

#controls .panelHeader,
#fileControls .panelHeader,
#addNodePanel .panelHeader,
#addGroupPanel .panelHeader,
#advancedPanel .panelHeader,
#shortcutPanel .panelHeader,
#backgroundPanel .panelHeader{
  font-size: 12px;
  letter-spacing: 0.08em;
}

#sidebar .control-group label,
#sidebar label{
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: none;
}

#sidebar input,
#sidebar select,
#sidebar textarea,
#nodePropsFilter,
#nodePropsTable td.col-node input,
#nodePropsTable td.col-props textarea{
  border-radius: 12px;
  border: 1px solid rgba(17,17,17,0.12);
  background: rgba(255,255,255,0.96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

#controls button,
#fileControls button,
#scriptEditorControls button,
#addNodePanel button,
#addGroupPanel button,
#advancedPanel button,
#sidebar button,
.timelineBtn{
  background: rgba(255,255,255,0.96) !important;
  color: #111111 !important;
  border: 1px solid rgba(17,17,17,0.12) !important;
  border-radius: 12px;
  box-shadow: none !important;
  font-weight: 650;
  transform: none !important;
}

#controls button:hover,
#fileControls button:hover,
#scriptEditorControls button:hover,
#addNodePanel button:hover,
#addGroupPanel button:hover,
#advancedPanel button:hover,
#sidebar button:hover,
.timelineBtn:hover{
  background: rgba(255,255,255,1) !important;
  border-color: rgba(112,87,255,0.45) !important;
  box-shadow: 0 0 0 3px rgba(112,87,255,0.08) !important;
}

#btnStart,
#btnAddNode,
#btnAddGroup,
#btnSave,
#btnShareUrl,
#btnExportHtml{
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}

#btnStart:hover,
#btnAddNode:hover,
#btnAddGroup:hover,
#btnSave:hover,
#btnShareUrl:hover,
#btnExportHtml:hover{
  background: #1a1a1a !important;
  border-color: rgba(112,87,255,0.65) !important;
}

#btnStart,
#btnStop,
#btnReset,
#btnSave,
#btnLoad,
#btnShareUrl,
#btnExportHtml,
#btnBenchmark{
  padding-left: 16px !important;
}
#btnStart::before,
#btnStop::before,
#btnReset::before,
#btnSave::before,
#btnLoad::before,
#btnShareUrl::before,
#btnExportHtml::before,
#btnBenchmark::before{
  display: none;
}

#sidebar #controls .btn-row{
  gap: 10px;
}

#sidebar .accessCounter{
  background: rgba(250,250,252,0.96);
  border: 1px solid rgba(17,17,17,0.08);
}

.simStatusCard{
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(249,249,251,0.92));
  border-radius: 16px;
}
.simStatusBadge{
  background: rgba(247,247,248,0.96);
  border-color: rgba(17,17,17,0.1);
}
.simStatusBadge.is-running{
  background: rgba(112,87,255,0.1);
  color: #5b3df5;
}

#menuToggle{
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(17,17,17,0.08);
  box-shadow: 0 10px 24px rgba(15,23,42,0.08);
}

#simTimeHud{
  border-color: rgba(17,17,17,0.08);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 10px 24px rgba(15,23,42,0.08);
}

#timelineDock{
  background: rgba(255,255,255,0.98);
  border-top: 1px solid rgba(17,17,17,0.08);
  box-shadow: 0 -18px 36px rgba(15,23,42,0.05);
}
#timelineHeader{
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid rgba(17,17,17,0.08);
}
#timelineHeader .timelineTitle,
#timelineHeader .timelineSelection,
#timelineHeader .timelinePropsMeta{
  color: #111111;
}
#timelineHeader .timelineTab{
  color: #555555;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(17,17,17,0.1);
}
#timelineHeader .timelineTab.is-active{
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}
#timelineHeader .timelineBtn{
  background: rgba(255,255,255,0.96);
  color: #111111;
  border: 1px solid rgba(17,17,17,0.12);
}

#timelineCanvas,
#nodePropsPanel{
  background: #ffffff;
}

.categoryTabBtn,
.quickPickBtn{
  border-radius: 12px;
}

.shortcut-row{
  border-radius: 10px;
}

/* ===== Context menus + modals refinement ===== */
.litegraph.litecontextmenu{
  border: 1px solid rgba(17,17,17,0.08) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.96) !important;
  box-shadow: 0 18px 44px rgba(15,23,42,0.12) !important;
  backdrop-filter: blur(14px);
  padding: 6px !important;
  min-width: 220px;
  max-width: 320px;
  color: #111111 !important;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  overflow-y: auto;
  overflow-x: hidden;
}
.litegraph.litecontextmenu .litemenu-entry{
  margin: 2px 0;
  padding: 10px 12px !important;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #111111 !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.litegraph.litecontextmenu .litemenu-entry:hover{
  background: rgba(112,87,255,0.08) !important;
  background-image: none !important;
  border-color: rgba(112,87,255,0.18);
  color: #4c1d95 !important;
}
.litegraph.litecontextmenu .litemenu-entry.separator{
  margin: 6px 2px !important;
  padding: 0 !important;
  border-radius: 0;
  border-bottom: 1px solid rgba(17,17,17,0.08) !important;
  min-height: 0 !important;
  background: transparent !important;
}
.litegraph.litecontextmenu .litemenu-entry.disabled{
  opacity: 0.42;
  cursor: not-allowed;
}
.litegraph.litecontextmenu .litemenu-entry.has_submenu::after{
  color: rgba(17,17,17,0.4) !important;
}
.litegraph.litecontextmenu .litemenu-entry.fact-menu-danger{
  color: #b42318 !important;
}
.litegraph.litecontextmenu .litemenu-entry.fact-menu-danger:hover{
  background: rgba(180,35,24,0.08) !important;
  border-color: rgba(180,35,24,0.16) !important;
  color: #7a1d16 !important;
}
.litegraph.litecontextmenu .litemenu-entry.fact-menu-muted{
  color: rgba(17,17,17,0.58) !important;
}

#scriptEditorModal,
#benchmarkModal,
#engineTestModal,
#shareUrlModal,
#stopGroupModal,
#aboutModal{
  background: rgba(246,247,251,0.72);
  backdrop-filter: blur(14px);
}

#scriptEditorContainer,
#benchmarkContainer,
#engineTestContainer,
#shareUrlContainer,
#stopGroupContainer,
#aboutContainer{
  border-radius: 22px;
  border: 1px solid rgba(17,17,17,0.08);
  background: rgba(255,255,255,0.97);
  box-shadow: 0 28px 80px rgba(15,23,42,0.12);
  padding: 18px;
}

.benchmarkHeader h2,
.shareUrlHeader h2,
.aboutHeader h2{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#scriptEditorTextarea,
#shareUrlValue,
.aboutBody pre.license{
  border-radius: 16px;
  border: 1px solid rgba(17,17,17,0.1);
  background: #fcfcfd;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

#scriptEditorControls button,
#benchmarkContainer button,
#engineTestContainer button,
#shareUrlContainer button,
#stopGroupContainer button,
#aboutContainer button{
  border: 1px solid rgba(17,17,17,0.12) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.98) !important;
  color: #111111 !important;
  box-shadow: none !important;
  font-weight: 650;
}

#scriptEditorSave,
#shareUrlCopyBtn,
#benchmarkClose,
#engineTestClose,
#stopGroupSave,
#shareUrlClose,
#aboutClose{
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}

#scriptEditorControls button:hover,
#benchmarkContainer button:hover,
#engineTestContainer button:hover,
#shareUrlContainer button:hover,
#stopGroupContainer button:hover,
#aboutContainer button:hover{
  border-color: rgba(112,87,255,0.35) !important;
  box-shadow: 0 0 0 3px rgba(112,87,255,0.08) !important;
}

#stopGroupContainer{
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stopGroupHeader h2{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.stopGroupBody{
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
  padding-right: 4px;
}

.stopGroupIntro{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fcfcfd;
  border: 1px solid rgba(17,17,17,0.08);
}

.stopGroupIntro p{
  margin: 0;
  color: rgba(17,17,17,0.72);
  font-size: 13px;
  line-height: 1.5;
}

.stopGroupRate{
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(112,87,255,0.08);
  color: #4c1d95;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.stopGroupGrid,
.stopGroupFields{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stopGroupField{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stopGroupFieldLabel{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(17,17,17,0.72);
  text-transform: uppercase;
}

.stopGroupField input,
.stopGroupField select,
.stopGroupField textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(17,17,17,0.1);
  background: #fcfcfd;
  color: #111111;
  padding: 11px 12px;
  font: inherit;
  box-sizing: border-box;
}

.stopGroupField textarea{
  min-height: 96px;
  resize: vertical;
}

.stopGroupField input:focus,
.stopGroupField select:focus,
.stopGroupField textarea:focus{
  outline: none;
  border-color: rgba(112,87,255,0.36);
  box-shadow: 0 0 0 3px rgba(112,87,255,0.1);
}

.stopGroupActions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}

.stopGroupActionsLeft,
.stopGroupActionsRight{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#stopGroupDelete.danger{
  color: #b42318 !important;
  border-color: rgba(180,35,24,0.2) !important;
}

#stopGroupDelete.danger:hover{
  box-shadow: 0 0 0 3px rgba(180,35,24,0.08) !important;
  border-color: rgba(180,35,24,0.32) !important;
}

@media (max-width: 760px){
  .stopGroupGrid,
  .stopGroupFields{
    grid-template-columns: 1fr;
  }

  .stopGroupIntro,
  .stopGroupActions{
    flex-direction: column;
    align-items: stretch;
  }

  .stopGroupRate{
    align-self: flex-start;
  }
}

/* Apple-inspired refinement layer */
:root{
  --ui-font: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --ui-mono: "SF Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --theme-color: #f5f5f7;
  --bg: #f5f5f7;
  --panel-bg: rgba(255,255,255,0.78);
  --panel-border: rgba(15,23,42,0.08);
  --text: #1d1d1f;
  --muted: rgba(60,60,67,0.82);
  --accent: #0a84ff;
  --accent-2: #0071e3;
  --input-bg: rgba(255,255,255,0.92);
  --input-border: rgba(60,60,67,0.16);
  --menu-shell-bg: rgba(255,255,255,0.82);
  --menu-shell-border: rgba(255,255,255,0.92);
  --menu-card-bg: rgba(255,255,255,0.92);
  --menu-card-border: rgba(15,23,42,0.08);
  --menu-text: #1d1d1f;
  --menu-muted: rgba(60,60,67,0.72);
  --menu-input-bg: rgba(255,255,255,0.92);
  --menu-input-border: rgba(60,60,67,0.16);
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 20px 50px rgba(15,23,42,0.10), 0 4px 12px rgba(15,23,42,0.05);
  --menu-shadow: 0 24px 60px rgba(15,23,42,0.16);
  --graph-canvas-clear: #f6f8fb;
  --graph-canvas-bg: rgba(248,250,253,0.9);
  --graph-grid-minor: rgba(17,17,17,0.045);
  --graph-grid-minor-dense: rgba(17,17,17,0.03);
  --graph-grid-major: rgba(10,132,255,0.08);
  --graph-grid-major-dense: rgba(10,132,255,0.055);
  --graph-node-title: #111111;
  --graph-node-title-fill: #e8f2ff;
  --graph-node-bg: #ffffff;
  --graph-node-accent: #0a84ff;
  --graph-node-outline: #d4dde9;
  --graph-link: #b9bec8;
  --graph-event-link: #0a84ff;
}

html,
body{
  font-family: var(--ui-font) !important;
  background:
    radial-gradient(960px 540px at 12% -12%, rgba(10,132,255,0.14), transparent 70%),
    radial-gradient(840px 440px at 92% -6%, rgba(255,255,255,0.74), transparent 72%),
    linear-gradient(180deg, #fafbfd 0%, #f4f6fa 42%, #eef2f7 100%);
  color: #1d1d1f;
  letter-spacing: -0.011em;
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.12) 22%, rgba(255,255,255,0.08) 78%, rgba(255,255,255,0.44) 100%),
    radial-gradient(700px 300px at 50% 0%, rgba(255,255,255,0.38), transparent 72%);
}

body,
input,
select,
textarea,
button,
.timelineTitle,
.timelineTab,
.panelHeader,
.landingShell{
  font-family: var(--ui-font) !important;
}

code,
pre,
.benchMono,
#simTime,
#timelinePropsMeta,
#nodePropsTable td.col-id,
#nodePropsTable td.col-connected{
  font-family: var(--ui-mono) !important;
}

#landing{
  background:
    radial-gradient(980px 420px at 16% -12%, rgba(10,132,255,0.12), transparent 70%),
    radial-gradient(740px 360px at 92% -6%, rgba(255,255,255,0.68), transparent 72%),
    #f7f8fb;
}

#landing::before{
  opacity: 0.2;
  filter: grayscale(1) contrast(1.03);
}

#landing::after{
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.84) 40%, rgba(247,248,251,0.96) 100%);
}

.landingTopbar,
.landingHero,
.landingMetricCard,
.landingCardMini,
.landingSection{
  border: 1px solid rgba(255,255,255,0.82);
  background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(249,250,252,0.72));
  box-shadow: 0 22px 50px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.52);
  backdrop-filter: blur(22px) saturate(1.35);
}

.landingTopbar{
  border-radius: 22px;
}

.landingHero{
  border-radius: 34px;
}

.landingCardMini,
.landingMetricCard,
.landingSection{
  border-radius: 24px;
}

.landingWordmark,
.landingSectionTitle,
#landingTitle,
.landingSubtitle{
  color: #1d1d1f;
}

#landingTitle{
  font-weight: 700;
  letter-spacing: -0.05em;
}

.landingSubtitle{
  color: rgba(29,29,31,0.86);
  font-weight: 600;
}

.landingBody,
.landingSectionText,
.landingCardMini p,
.landingMetricList li span{
  color: rgba(29,29,31,0.74);
}

.landingBtn{
  min-height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(60,60,67,0.14);
  background: rgba(255,255,255,0.76);
  box-shadow: 0 10px 24px rgba(15,23,42,0.06), inset 0 1px 0 rgba(255,255,255,0.52);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.landingBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(10,132,255,0.34);
  box-shadow: 0 14px 28px rgba(15,23,42,0.08), 0 0 0 4px rgba(10,132,255,0.08);
}

.landingBtnPrimary{
  background: linear-gradient(180deg, #1794ff, #0071e3);
  color: #ffffff;
  border-color: rgba(0,113,227,0.92);
  box-shadow: 0 16px 34px rgba(0,113,227,0.22), inset 0 1px 0 rgba(255,255,255,0.24);
}

.landingBtnPrimary:hover{
  background: linear-gradient(180deg, #1e98ff, #0477ea);
  color: #ffffff;
}

.landingInlineLink{
  color: #0071e3;
}

.landingInlineLink:hover{
  color: #0a84ff;
}

.landingProgressWrap{
  border: 1px solid rgba(255,255,255,0.76);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(248,249,252,0.74));
  box-shadow: 0 16px 34px rgba(15,23,42,0.06);
}

.landingProgressBar{
  background: rgba(120,120,128,0.14);
}

.landingProgressFill{
  background: linear-gradient(90deg, #58a7ff 0%, #0a84ff 44%, #0071e3 100%);
}

.landingProgressState,
.landingPills span{
  background: rgba(10,132,255,0.08);
  color: #0071e3;
  border-color: rgba(10,132,255,0.22);
}

#graph{
  background:
    radial-gradient(900px 540px at 18% -12%, rgba(10,132,255,0.08), transparent 72%),
    radial-gradient(760px 420px at 100% 0%, rgba(255,255,255,0.54), transparent 74%),
    linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%);
}

#sidebar{
  width: 356px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.30), rgba(240,244,249,0.20)),
    linear-gradient(180deg, rgba(10,132,255,0.05), rgba(255,255,255,0));
  border-left: 1px solid rgba(255,255,255,0.48);
  box-shadow: -20px 0 54px rgba(15,23,42,0.06);
  backdrop-filter: blur(38px) saturate(1.58);
}

body:not(.sidebar-hidden) #graph{
  right: 356px;
}

#sidebar::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.46), rgba(255,255,255,0.03)),
    linear-gradient(180deg, rgba(10,132,255,0.08), transparent 32%);
  opacity: 1;
}

#sidebarHeader,
#sidebar #controls,
#sidebar #fileControls,
#addNodePanel,
#addGroupPanel,
#advancedPanel,
#shortcutPanel,
#backgroundPanel{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.58);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.52), rgba(248,250,253,0.36)),
    linear-gradient(180deg, rgba(10,132,255,0.03), rgba(255,255,255,0));
  box-shadow: 0 16px 34px rgba(15,23,42,0.05), inset 0 1px 0 rgba(255,255,255,0.42);
  backdrop-filter: blur(28px) saturate(1.48);
}

#sidebarHeader::after,
#sidebar #controls::after,
#sidebar #fileControls::after,
#addNodePanel::after,
#addGroupPanel::after,
#advancedPanel::after,
#shortcutPanel::after,
#backgroundPanel::after{
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 44%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0));
  pointer-events: none;
}

#sidebarHeader{
  min-height: 74px;
  padding: 14px 16px;
}

#sidebarHeader .appBrandRow{
  gap: 14px;
}

#sidebarHeader .appLogo{
  width: 42px;
  height: 42px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 10px 20px rgba(15,23,42,0.08);
}

#sidebarHeader .appBrandText{
  color: #1d1d1f;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

#controls .panelHeader,
#fileControls .panelHeader,
#addNodePanel .panelHeader,
#addGroupPanel .panelHeader,
#advancedPanel .panelHeader,
#shortcutPanel .panelHeader,
#backgroundPanel .panelHeader{
  color: rgba(29,29,31,0.56);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#sidebar label,
#sidebar .control-group label,
.stopGroupFieldLabel{
  color: rgba(29,29,31,0.66);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

#sidebar input,
#sidebar select,
#sidebar textarea,
#nodePropsFilter,
#nodePropsTable td.col-node input,
#nodePropsTable td.col-props textarea,
.selectionInspectorInput,
.selectionInspectorSelect,
.selectionInspectorTextarea,
.stopGroupField input,
.stopGroupField select,
.stopGroupField textarea{
  min-height: 44px;
  border-radius: 15px;
  border: 1px solid rgba(60,60,67,0.16);
  background: rgba(255,255,255,0.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.68);
  color: #1d1d1f;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

#sidebar textarea,
.selectionInspectorTextarea,
.stopGroupField textarea{
  min-height: 112px;
}

#sidebar input:focus,
#sidebar select:focus,
#sidebar textarea:focus,
#nodePropsFilter:focus,
#nodePropsTable td.col-node input:focus,
#nodePropsTable td.col-props textarea:focus,
.selectionInspectorInput:focus,
.selectionInspectorSelect:focus,
.selectionInspectorTextarea:focus,
.stopGroupField input:focus,
.stopGroupField select:focus,
.stopGroupField textarea:focus{
  outline: none;
  border-color: rgba(10,132,255,0.34) !important;
  box-shadow: 0 0 0 4px rgba(10,132,255,0.10), inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

#controls button,
#fileControls button,
#scriptEditorControls button,
#addNodePanel button,
#addGroupPanel button,
#advancedPanel button,
#sidebar button,
.timelineBtn,
.selectionInspectorBtn,
#benchmarkContainer button,
#shareUrlContainer button,
#stopGroupContainer button,
#aboutContainer button{
  min-height: 42px;
  border-radius: 999px !important;
  border: 1px solid rgba(60,60,67,0.14) !important;
  background: rgba(255,255,255,0.78) !important;
  color: #1d1d1f !important;
  box-shadow: 0 10px 24px rgba(15,23,42,0.06), inset 0 1px 0 rgba(255,255,255,0.52) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform .2s cubic-bezier(.22,.61,.36,1), border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

#controls button:hover,
#fileControls button:hover,
#scriptEditorControls button:hover,
#addNodePanel button:hover,
#addGroupPanel button:hover,
#advancedPanel button:hover,
#sidebar button:hover,
.timelineBtn:hover,
.selectionInspectorBtn:hover,
#benchmarkContainer button:hover,
#shareUrlContainer button:hover,
#stopGroupContainer button:hover,
#aboutContainer button:hover{
  transform: translateY(-1px);
  border-color: rgba(10,132,255,0.32) !important;
  box-shadow: 0 14px 28px rgba(15,23,42,0.08), 0 0 0 4px rgba(10,132,255,0.08) !important;
}

#controls button:disabled,
#fileControls button:disabled,
#scriptEditorControls button:disabled,
#addNodePanel button:disabled,
#addGroupPanel button:disabled,
#advancedPanel button:disabled,
#sidebar button:disabled,
.timelineBtn:disabled,
.selectionInspectorBtn:disabled{
  opacity: 0.46;
  box-shadow: none !important;
}

#btnStart,
#btnAddNode,
#btnAddGroup,
#btnSave,
#btnShareUrl,
#btnExportHtml,
#landingOpenBtn,
#scriptEditorSave,
#shareUrlCopyBtn,
#benchmarkClose,
#stopGroupSave,
#shareUrlClose,
#aboutClose,
.selectionInspectorBtn.is-primary{
  background: linear-gradient(180deg, #1994ff, #0071e3) !important;
  color: #ffffff !important;
  border-color: rgba(0,113,227,0.92) !important;
  box-shadow: 0 16px 34px rgba(0,113,227,0.22), inset 0 1px 0 rgba(255,255,255,0.24) !important;
}

#btnStart:hover,
#btnAddNode:hover,
#btnAddGroup:hover,
#btnSave:hover,
#btnShareUrl:hover,
#btnExportHtml:hover,
#landingOpenBtn:hover,
#scriptEditorSave:hover,
#shareUrlCopyBtn:hover,
#benchmarkClose:hover,
#stopGroupSave:hover,
#shareUrlClose:hover,
#aboutClose:hover,
.selectionInspectorBtn.is-primary:hover{
  background: linear-gradient(180deg, #2199ff, #0678ea) !important;
  border-color: rgba(0,113,227,0.92) !important;
}

.selectionInspectorBtn.is-danger,
#stopGroupDelete.danger{
  color: #d92d20 !important;
  border-color: rgba(217,45,32,0.18) !important;
  background: rgba(255,255,255,0.82) !important;
}

.selectionInspectorBtn.is-danger:hover,
#stopGroupDelete.danger:hover{
  box-shadow: 0 14px 28px rgba(15,23,42,0.08), 0 0 0 4px rgba(217,45,32,0.08) !important;
  border-color: rgba(217,45,32,0.26) !important;
}

#sidebar .btn-row{
  gap: 10px;
}

#sidebar .accessCounter{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.74);
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(249,250,252,0.74));
  box-shadow: 0 14px 30px rgba(15,23,42,0.06);
}

.simStatusCard{
  border: 1px solid rgba(255,255,255,0.74);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(245,247,251,0.72));
  box-shadow: 0 18px 38px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.5);
}

.simStatusLabel{
  color: rgba(29,29,31,0.62);
}

.simStatusBadge{
  border-radius: 999px;
  border: 1px solid rgba(60,60,67,0.12);
  background: rgba(255,255,255,0.72);
  color: rgba(29,29,31,0.74);
}

.simStatusBadge.is-running{
  background: rgba(10,132,255,0.10);
  color: #0071e3;
  border-color: rgba(10,132,255,0.2);
}

#menuToggle,
#simTimeHud{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.72);
  box-shadow: 0 18px 36px rgba(15,23,42,0.08);
  backdrop-filter: blur(20px) saturate(1.35);
}

#menuToggle:hover{
  border-color: rgba(10,132,255,0.24);
}

#sidebar #speedRange::-webkit-slider-runnable-track{
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(10,132,255,0.34), rgba(120,120,128,0.16));
}

#sidebar #speedRange::-webkit-slider-thumb{
  width: 18px;
  height: 18px;
  margin-top: -5px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.96);
  background: radial-gradient(circle at 32% 30%, #ffffff 0%, #f5f8ff 72%, #dce7f8 100%);
  box-shadow: 0 8px 18px rgba(15,23,42,0.18);
}

#sidebar #speedRange::-moz-range-track{
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(10,132,255,0.34), rgba(120,120,128,0.16));
}

#sidebar #speedRange::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.96);
  background: radial-gradient(circle at 32% 30%, #ffffff 0%, #f5f8ff 72%, #dce7f8 100%);
  box-shadow: 0 8px 18px rgba(15,23,42,0.18);
}

#timelineDock{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.52);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.34), rgba(242,246,251,0.24)),
    linear-gradient(180deg, rgba(10,132,255,0.04), rgba(255,255,255,0));
  box-shadow: 0 -16px 44px rgba(15,23,42,0.06);
  backdrop-filter: blur(34px) saturate(1.52);
}

#timelineDock::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0));
  pointer-events: none;
}

#timelineHeader{
  background: rgba(255,255,255,0.16);
  border-bottom: 1px solid rgba(255,255,255,0.46);
}

#timelineHeader .timelineTabs{
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.26);
  border: 1px solid rgba(255,255,255,0.56);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.34);
}

#timelineHeader .timelineTab{
  border: 1px solid transparent;
  background: transparent;
  color: rgba(29,29,31,0.56);
  border-radius: 999px;
  min-height: 34px;
  padding: 0 14px;
  font-weight: 600;
}

#timelineHeader .timelineTab.is-active{
  color: #1d1d1f;
  background: rgba(255,255,255,0.58);
  border-color: rgba(255,255,255,0.62);
  box-shadow: 0 6px 16px rgba(15,23,42,0.05);
}

#timelineHeader .timelineTitle,
#timelineHeader .timelineSelection,
#timelineHeader .timelinePropsMeta{
  color: #1d1d1f;
}

#nodePropsPanel,
#selectionInspectorPanel{
  background:
    linear-gradient(180deg, rgba(250,251,253,0.84), rgba(245,247,250,0.7));
}

.nodePropsTableWrap,
.selectionInspectorEmpty,
.selectionInspectorCard{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.82);
  background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(249,250,252,0.74));
  box-shadow: 0 18px 38px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.5);
  backdrop-filter: blur(18px) saturate(1.25);
}

.selectionInspectorEmpty{
  padding: 34px;
}

.selectionInspectorEyebrow,
.selectionInspectorFieldLabel,
.selectionInspectorStatLabel{
  color: rgba(29,29,31,0.56);
}

.selectionInspectorTitle{
  color: #1d1d1f;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.selectionInspectorSubtitle,
.selectionInspectorHint,
.selectionInspectorNotice{
  color: rgba(29,29,31,0.72);
}

.selectionInspectorStat{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}

.selectionInspectorPill,
.stopGroupRate{
  border-radius: 999px;
  background: rgba(10,132,255,0.10);
  color: #0071e3;
  border: 1px solid rgba(10,132,255,0.18);
}

#nodePropsTable{
  background: transparent;
}

#nodePropsTable thead th{
  color: rgba(29,29,31,0.58);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.42);
}

#nodePropsTable tbody tr{
  transition: background-color .16s ease;
}

#nodePropsTable tbody tr:nth-child(even){
  background: rgba(255,255,255,0.18);
}

#nodePropsTable tbody tr.is-node-selected td{
  background: rgba(10,132,255,0.08);
}

#scriptEditorModal,
#benchmarkModal,
#shareUrlModal,
#stopGroupModal,
#aboutModal{
  background: rgba(244,246,249,0.64);
  backdrop-filter: blur(22px);
}

#scriptEditorContainer,
#benchmarkContainer,
#shareUrlContainer,
#stopGroupContainer,
#aboutContainer{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.84);
  background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(248,250,252,0.76));
  box-shadow: 0 28px 70px rgba(15,23,42,0.14), inset 0 1px 0 rgba(255,255,255,0.54);
}

@keyframes appleRiseIn{
  from{
    opacity: 0;
    transform: translateY(10px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

#sidebarHeader,
#sidebar #controls,
#sidebar #fileControls,
#addNodePanel,
#addGroupPanel,
#advancedPanel,
#shortcutPanel,
#backgroundPanel,
#timelineDock{
  animation: appleRiseIn .42s cubic-bezier(.22,.61,.36,1);
}

@media (max-width: 980px){
  #sidebar{
    width: 332px;
  }

  body:not(.sidebar-hidden) #graph{
    right: 332px;
  }
}

/* Iterative UX refinement layer */
.panel-help{
  border: 1px solid rgba(10,132,255,0.14);
  background: linear-gradient(180deg, rgba(10,132,255,0.07), rgba(255,255,255,0.94));
  color: rgba(29,29,31,0.72);
  font-family: var(--ui-font);
}

.panel-help-compact{
  font-size: 11px;
  line-height: 1.5;
}

.quickPickBtn,
.categoryTabBtn{
  font-family: var(--ui-font);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.quickPickBtn:hover,
.quickPickBtn.is-active,
.categoryTabBtn:hover,
.categoryTabBtn.is-active{
  border-color: rgba(10,132,255,0.24);
  background: rgba(10,132,255,0.10);
  color: #0071e3;
  box-shadow: 0 10px 18px rgba(10,132,255,0.10);
}

#addGroupPanel .group-stop-rate{
  border-radius: 999px;
  border: 1px solid rgba(10,132,255,0.16);
  background: rgba(10,132,255,0.08);
  color: #0071e3;
  font-weight: 600;
}

.sidebar-panel-collapsible .panelHeader{
  gap: 10px;
}

.sidebar-panel-collapsible .panelHeader::after{
  content: "▾";
  color: rgba(60,60,67,0.7);
}

.panelHeaderLabel{
  min-width: 0;
  color: #1d1d1f;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.panelHeaderMeta{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 68%;
  min-height: 30px;
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.72);
  color: rgba(60,60,67,0.72);
  font-family: var(--ui-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.44);
}

.panelHeaderMeta[hidden]{
  display: none;
}

#btnAddNode.is-cancel,
#btnAddGroup.is-cancel{
  background: rgba(255,244,243,0.96) !important;
  color: #b42318 !important;
  border-color: rgba(180,35,24,0.16) !important;
  box-shadow: none !important;
}

#btnAddNode.is-cancel:hover,
#btnAddGroup.is-cancel:hover{
  background: rgba(255,236,234,0.98) !important;
}

.nodePropsEmpty{
  padding: 28px 24px !important;
  text-align: center;
  background: transparent !important;
}

.nodePropsEmptyTitle{
  font-family: var(--ui-font);
  font-size: 15px;
  font-weight: 700;
  color: #1d1d1f;
}

.nodePropsEmptyHint{
  margin-top: 6px;
  color: rgba(60,60,67,0.76);
  font-family: var(--ui-font);
  font-size: 12px;
}

#nodePropsSummary{
  font-family: var(--ui-font);
  color: rgba(60,60,67,0.82);
}

.nodePropsNodeCell{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nodePropsTitle{
  color: #1d1d1f;
  font-weight: 600;
  line-height: 1.35;
}

.nodePropsInspectBtn{
  align-self: flex-start;
  border: 1px solid rgba(10,132,255,0.18);
  background: rgba(10,132,255,0.08);
  color: #0071e3;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.nodePropsInspectBtn:hover{
  background: rgba(10,132,255,0.12);
  border-color: rgba(10,132,255,0.26);
  transform: translateY(-1px);
}

.nodePropsPropSummary{
  color: rgba(29,29,31,0.76);
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  word-break: break-word;
}

/* Landing live preview layer */
body:not(.landing-hidden) #graph{
  right: 0 !important;
  bottom: 0 !important;
}

body:not(.landing-hidden) #graph canvas{
  filter: saturate(0.92) contrast(1.04) brightness(0.96);
  transition: filter .32s ease, transform .32s ease;
}

body:not(.landing-hidden) #sidebar,
body:not(.landing-hidden) #timelineDock,
body:not(.landing-hidden) #menuToggle,
body:not(.landing-hidden) #simTimeHud,
body:not(.landing-hidden) #toast{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body:not(.landing-hidden) #sidebar{
  transform: translateX(-28px);
}

body:not(.landing-hidden) #timelineDock{
  transform: translateY(18px);
}

body:not(.landing-hidden) #landing{
  background:
    radial-gradient(940px 480px at 12% -8%, rgba(10,132,255,0.12), transparent 72%),
    radial-gradient(720px 360px at 86% 2%, rgba(255,255,255,0.22), transparent 72%),
    linear-gradient(180deg, rgba(244,247,252,0.18) 0%, rgba(244,247,252,0.42) 100%);
}

body:not(.landing-hidden) #landing::before{
  background:
    radial-gradient(780px 340px at 18% 6%, rgba(255,255,255,0.52), transparent 72%),
    radial-gradient(680px 320px at 88% 10%, rgba(10,132,255,0.14), transparent 70%);
  opacity: 1;
  filter: none;
  mix-blend-mode: screen;
  transform: none;
}

body:not(.landing-hidden) #landing::after{
  background:
    linear-gradient(180deg, rgba(248,250,253,0.20) 0%, rgba(248,250,253,0.46) 46%, rgba(248,250,253,0.60) 100%);
  backdrop-filter: blur(20px) saturate(1.18);
}

body:not(.landing-hidden) .landingTopbar,
body:not(.landing-hidden) .landingHero,
body:not(.landing-hidden) .landingMetricCard,
body:not(.landing-hidden) .landingCardMini,
body:not(.landing-hidden) .landingSection{
  background: linear-gradient(180deg, rgba(255,255,255,0.58), rgba(248,250,252,0.34));
  border-color: rgba(255,255,255,0.72);
  box-shadow: 0 24px 54px rgba(15,23,42,0.12), inset 0 1px 0 rgba(255,255,255,0.52);
  backdrop-filter: blur(28px) saturate(1.36);
}

body:not(.landing-hidden) .landingTopbar{
  background: linear-gradient(180deg, rgba(255,255,255,0.52), rgba(248,250,252,0.28));
}

body:not(.landing-hidden) .landingHero{
  position: relative;
  overflow: hidden;
}

body:not(.landing-hidden) .landingHero::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px 160px at 50% 0%, rgba(255,255,255,0.20), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0));
  pointer-events: none;
}

body:not(.landing-hidden) .landingProgressWrap{
  background: linear-gradient(180deg, rgba(255,255,255,0.52), rgba(249,250,252,0.28));
  border-color: rgba(255,255,255,0.72);
  box-shadow: 0 18px 40px rgba(15,23,42,0.08);
  backdrop-filter: blur(24px) saturate(1.28);
}

body.landing-preview-live #landingOpenBtn{
  box-shadow: 0 20px 40px rgba(0,113,227,0.24), inset 0 1px 0 rgba(255,255,255,0.24) !important;
}

body.landing-preview-live .landingProgressState{
  background: rgba(52,199,89,0.12);
  border-color: rgba(52,199,89,0.22);
  color: #118045;
}

body.landing-preview-live #graph canvas{
  filter: saturate(0.98) contrast(1.06) brightness(1);
}

/* Sidebar declutter refinement */
#sidebar #controls,
#backgroundPanel,
#addNodePanel,
#addGroupPanel,
#advancedPanel,
#shortcutPanel,
#sidebar #fileControls{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#sidebar #controls > *,
#sidebar #fileControls > *{
  margin-bottom: 0 !important;
}

.sidebarMetaFooter{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quickStartCard{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.82);
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(246,249,253,0.74));
  box-shadow: 0 12px 26px rgba(15,23,42,0.06), inset 0 1px 0 rgba(255,255,255,0.52);
}

.quickStartTitle{
  color: #1d1d1f;
  font: 700 13px/1.2 'Inter', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.01em;
}

.quickStartSteps{
  margin: 0;
  padding-left: 18px;
  color: rgba(29,29,31,0.74);
  font: 500 12px/1.55 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.quickStartSteps strong{
  color: #1d1d1f;
  font-weight: 700;
}

.quickStartHint{
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid rgba(10,132,255,0.10);
  background: rgba(255,255,255,0.66);
  color: rgba(29,29,31,0.7);
  font: 600 12px/1.45 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.panelDetails{
  border: 1px solid rgba(255,255,255,0.78);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(247,249,252,0.66));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.44);
  padding: 8px 12px 12px;
}

.panelDetails[hidden]{
  display: none !important;
}

.panelDetails > summary{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  color: rgba(29,29,31,0.72);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.panelDetails > summary::-webkit-details-marker{
  display: none;
}

.panelDetails > summary::after{
  content: "▾";
  color: rgba(60,60,67,0.62);
  font-size: 12px;
  transition: transform .16s ease;
}

.panelDetails:not([open]) > summary::after{
  transform: rotate(-90deg);
}

.panelDetails > .field,
.panelDetails > .propFields,
.panelDetails > .category-tabs{
  margin-top: 10px;
}

.panelDetails .propFields{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#backgroundPanel.is-empty #bgLayoutAdjustDetails{
  display: none;
}

#bgLayoutEmptyState[hidden]{
  display: none;
}

.projectActionsGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#fileControls .button-secondary{
  background: rgba(255,255,255,0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42) !important;
}

.sidebar-panel-collapsible .panelHeader::after{
  content: "▾" !important;
  margin-left: 8px;
  color: rgba(60,60,67,0.7);
  font-size: 12px;
  transition: transform .16s ease, color .16s ease;
}

.sidebar-panel-collapsible.is-collapsed .panelHeader::after{
  transform: rotate(-90deg);
}

/* Sidebar-first workspace layout */
:root{
  --sidebar-width: 356px;
}

#sidebar{
  width: var(--sidebar-width);
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  padding-bottom: 12px;
}

body:not(.timeline-hidden) #sidebar{
  bottom: 0;
  height: 100%;
}

body:not(.sidebar-hidden) #graph{
  left: var(--sidebar-width);
  right: 0;
  width: calc(100% - var(--sidebar-width));
}

body.sidebar-hidden #graph{
  left: 0;
  right: 0;
  width: 100%;
}

body:not(.timeline-hidden) #graph{
  height: calc(100% - var(--timeline-height));
}

body.timeline-hidden #graph{
  height: 100%;
}

#timelineDock{
  left: 0;
  right: 0;
  width: auto;
}

body:not(.sidebar-hidden) #timelineDock{
  left: var(--sidebar-width);
  right: 0;
}

body.sidebar-hidden #timelineDock{
  left: 0;
  right: 0;
}

body:not(.sidebar-hidden) #timelineRevealHandle{
  left: var(--sidebar-width);
  right: 0;
}

body.sidebar-hidden #timelineRevealHandle{
  left: 0;
  right: 0;
}

#timelineHeader{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "left"
    "actions"
    "meta";
  height: auto;
  min-height: var(--timeline-header);
  padding: 10px 12px 12px;
  gap: 10px 12px;
  align-items: center;
}

#timelineHeader .timelineHeaderLeft{
  grid-area: left;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#timelineHeader .timelineTabs{
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}

#timelineHeader .timelineSelection,
#timelineHeader .timelinePropsMeta{
  grid-area: meta;
  flex: none;
  width: 100%;
  min-width: 0;
  text-align: left;
}

#timelineHeader .timelineActions{
  grid-area: actions;
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  max-width: 100%;
}

#timelineHeader .timelineBtn{
  min-height: 32px;
  padding: 0 11px;
  white-space: nowrap;
  font-size: 12px;
}

.workspacePopoutPlaceholder{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, rgba(251,251,252,0.88), rgba(238,240,244,0.92));
  color: #4b5563;
  text-align: center;
}

.workspacePopoutPlaceholderCard{
  max-width: 360px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.82);
  box-shadow: 0 16px 30px rgba(15,23,42,0.08);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.workspacePopoutPlaceholderTitle{
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.workspacePopoutPlaceholderText{
  font-size: 13px;
  line-height: 1.55;
}

.workspacePopoutRoot{
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #eef2f7;
  color: #111827;
}

.workspacePopoutHeader{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(14px) saturate(1.15);
}

.workspacePopoutHeading{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.workspacePopoutEyebrow{
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
  font-weight: 700;
}

.workspacePopoutTitle{
  font-size: 22px;
  font-weight: 700;
  color: #111827;
}

.workspacePopoutMeta{
  grid-column: 1 / -1;
  font-size: 12px;
  color: #4b5563;
}

.workspacePopoutActions{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.workspacePopoutActions .timelineBtn,
.workspacePopoutPlaceholder .timelineBtn{
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.9);
  color: #111827;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}

.workspacePopoutActions .timelineBtn:hover,
.workspacePopoutPlaceholder .timelineBtn:hover{
  filter: brightness(1.03);
}

.workspacePopoutContent{
  position: relative;
  flex: 1;
  min-height: 0;
}

.workspacePopoutContent > #timelineChartPanel,
.workspacePopoutContent > #nodePropsPanel,
.workspacePopoutContent > #selectionInspectorPanel{
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
}

.workspacePopoutContent > #timelineChartPanel #timelineCanvas{
  width: 100%;
  height: 100%;
}

.nodePropsToolbar{
  flex-wrap: wrap;
  align-items: center;
}

#nodePropsFilter{
  flex: 1 1 240px;
  width: auto;
  min-width: 180px;
}

#nodePropsSummary{
  margin-left: auto;
}

@media (max-width: 980px){
  :root{
    --sidebar-width: 332px;
  }
}

@media (max-width: 1360px){
  #timelineHeader{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "left"
      "actions"
      "meta";
  }

  #timelineHeader .timelineActions{
    justify-self: stretch;
    justify-content: flex-start;
    max-width: none;
  }

  body:not(.sidebar-hidden) #selectionInspectorPanel .selectionInspectorLayout{
    grid-template-columns: 1fr;
  }
}

#mobileNav{
  display: none;
}

#tabletActionBar{
  display: none;
}

body.mobile-ui{
  --mobile-nav-height: 72px;
}

body.tablet-ui{
  --tablet-bar-height: 70px;
}

body.mobile-ui #menuToggle{
  top: 12px;
  left: 12px;
  z-index: 2055;
}

body.mobile-ui #simTimeHud{
  top: 12px;
  left: 62px !important;
  width: auto;
  min-width: 146px;
  max-width: calc(100vw - 74px);
}

body.mobile-ui #graph{
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  width: 100% !important;
  bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
  height: calc(100dvh - var(--mobile-nav-height) - env(safe-area-inset-bottom, 0px)) !important;
  max-height: calc(100dvh - var(--mobile-nav-height) - env(safe-area-inset-bottom, 0px)) !important;
}

body.mobile-ui:not(.timeline-hidden) #graph{
  bottom: calc(var(--mobile-nav-height) + var(--timeline-height) + env(safe-area-inset-bottom, 0px)) !important;
  height: calc(100dvh - var(--mobile-nav-height) - var(--timeline-height) - env(safe-area-inset-bottom, 0px)) !important;
  max-height: calc(100dvh - var(--mobile-nav-height) - var(--timeline-height) - env(safe-area-inset-bottom, 0px)) !important;
}

body.mobile-ui #sidebar{
  top: 12px;
  left: 12px;
  bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 12px);
  height: auto;
  width: min(92vw, 420px);
  max-width: min(92vw, 420px);
  padding-bottom: 18px;
  border-radius: 28px;
  z-index: 1850;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 28px 54px rgba(15,23,42,0.18);
}

body.mobile-ui:not(.sidebar-hidden) #sidebar{
  transform: translateX(0);
}

body.mobile-ui #timelineDock{
  left: 0 !important;
  right: 0 !important;
  bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
  width: auto !important;
  max-height: min(58vh, 460px);
  height: min(58vh, 460px);
  border-radius: 26px 26px 0 0;
  z-index: 1820;
}

body.mobile-ui #timelineRevealHandle{
  display: none !important;
}

body.mobile-ui #timelineHeader{
  padding: 10px 12px 12px;
}

body.mobile-ui #timelineHeader .timelineHeaderLeft{
  gap: 8px;
}

body.mobile-ui #timelineHeader .timelineTitle{
  display: none;
}

body.mobile-ui #timelineBody{
  min-height: 0;
}

body.mobile-ui #mobileNav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2060;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(245,247,251,0.88)),
    linear-gradient(180deg, rgba(10,132,255,0.05), rgba(255,255,255,0));
  border-top: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 -12px 28px rgba(15,23,42,0.08);
  backdrop-filter: blur(22px) saturate(1.4);
}

body.mobile-ui:not(.landing-hidden) #mobileNav{
  display: none;
}

.mobileNavBtn{
  min-height: 48px;
  border: 1px solid rgba(60,60,67,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.82);
  color: rgba(29,29,31,0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 18px rgba(15,23,42,0.06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

.mobileNavBtn:hover{
  border-color: rgba(10,132,255,0.24);
  transform: translateY(-1px);
}

.mobileNavBtn.is-active{
  color: #0071e3;
  background: rgba(10,132,255,0.12);
  border-color: rgba(10,132,255,0.24);
  box-shadow: 0 10px 20px rgba(10,132,255,0.12);
}

body.mobile-ui #toast{
  bottom: calc(var(--mobile-nav-height) + 18px + env(safe-area-inset-bottom, 0px));
}

body.tablet-ui #menuToggle{
  top: 12px;
  left: 12px;
  z-index: 2055;
}

body.tablet-ui #simTimeHud{
  top: 12px;
  left: 62px !important;
  width: auto;
  min-width: 150px;
  max-width: calc(100vw - 78px);
}

body.tablet-ui #graph{
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  width: 100% !important;
  bottom: calc(var(--tablet-bar-height) + 18px) !important;
  height: calc(100dvh - var(--tablet-bar-height) - 18px) !important;
  max-height: calc(100dvh - var(--tablet-bar-height) - 18px) !important;
}

body.tablet-ui:not(.timeline-hidden) #graph{
  bottom: calc(var(--tablet-bar-height) + var(--timeline-height) + 18px) !important;
  height: calc(100dvh - var(--tablet-bar-height) - var(--timeline-height) - 18px) !important;
  max-height: calc(100dvh - var(--tablet-bar-height) - var(--timeline-height) - 18px) !important;
}

body.tablet-ui #sidebar{
  top: 12px;
  left: 12px;
  bottom: calc(var(--tablet-bar-height) + 24px);
  height: auto;
  width: min(46vw, 420px);
  max-width: min(46vw, 420px);
  padding-bottom: 18px;
  border-radius: 28px;
  z-index: 1850;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 28px 54px rgba(15,23,42,0.16);
}

body.tablet-ui:not(.sidebar-hidden) #sidebar{
  transform: translateX(0);
}

body.tablet-ui #timelineDock{
  left: 16px !important;
  right: 16px !important;
  bottom: calc(var(--tablet-bar-height) + 16px) !important;
  width: auto !important;
  max-height: min(42vh, 380px);
  height: min(42vh, 380px);
  border-radius: 28px;
  z-index: 1820;
}

body.tablet-ui #timelineRevealHandle{
  display: none !important;
}

body.tablet-ui #tabletActionBar{
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 2060;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(245,247,251,0.9)),
    linear-gradient(180deg, rgba(10,132,255,0.04), rgba(255,255,255,0));
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: 0 18px 36px rgba(15,23,42,0.1);
  backdrop-filter: blur(20px) saturate(1.35);
}

body.tablet-ui:not(.landing-hidden) #tabletActionBar{
  display: none;
}

.tabletActionBtn{
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(60,60,67,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.86);
  color: rgba(29,29,31,0.72);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 18px rgba(15,23,42,0.06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

.tabletActionBtn:hover{
  border-color: rgba(10,132,255,0.24);
  transform: translateY(-1px);
}

.tabletActionBtn.is-active{
  color: #0071e3;
  background: rgba(10,132,255,0.12);
  border-color: rgba(10,132,255,0.24);
  box-shadow: 0 10px 20px rgba(10,132,255,0.12);
}

body.tablet-ui #toast{
  bottom: calc(var(--tablet-bar-height) + 30px);
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --theme-color: #0f1115;
  --bg: #0f1115;
  --panel-bg: rgba(17,20,27,0.82);
  --panel-border: rgba(255,255,255,0.08);
  --text: #e5edf7;
  --muted: rgba(208,219,235,0.74);
  --accent: #7cb8ff;
  --accent-2: #4ea1ff;
  --input-bg: rgba(20,24,32,0.92);
  --input-border: rgba(255,255,255,0.14);
  --menu-shell-bg: rgba(18,22,30,0.92);
  --menu-shell-border: rgba(255,255,255,0.12);
  --menu-card-bg: rgba(20,24,32,0.94);
  --menu-card-border: rgba(255,255,255,0.10);
  --menu-text: #e5edf7;
  --menu-muted: rgba(208,219,235,0.68);
  --menu-input-bg: rgba(20,24,32,0.92);
  --menu-input-border: rgba(255,255,255,0.14);
  --shadow: 0 24px 60px rgba(0,0,0,0.32), 0 8px 22px rgba(0,0,0,0.18);
  --menu-shadow: 0 28px 72px rgba(0,0,0,0.42);
  --graph-canvas-clear: #0f141c;
  --graph-canvas-bg: rgba(15,20,28,0.96);
  --graph-grid-minor: rgba(255,255,255,0.05);
  --graph-grid-minor-dense: rgba(255,255,255,0.035);
  --graph-grid-major: rgba(124,184,255,0.12);
  --graph-grid-major-dense: rgba(124,184,255,0.08);
  --graph-node-title: #edf3fb;
  --graph-node-title-fill: #162338;
  --graph-node-bg: #171d26;
  --graph-node-accent: #69b1ff;
  --graph-node-outline: rgba(255,255,255,0.12);
  --graph-link: rgba(170,184,204,0.68);
  --graph-event-link: #7cb8ff;
}

:root[data-theme="dark"],
:root[data-theme="dark"] body{
  background:
    radial-gradient(960px 560px at 12% -12%, rgba(69,131,255,0.16), transparent 72%),
    radial-gradient(920px 520px at 88% -8%, rgba(20,24,32,0.76), transparent 74%),
    linear-gradient(180deg, #0f1115 0%, #12161d 46%, #161b23 100%);
  color: var(--text);
}

:root[data-theme="dark"] body::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 24%, rgba(255,255,255,0.00) 76%, rgba(255,255,255,0.04) 100%),
    radial-gradient(720px 320px at 50% 0%, rgba(255,255,255,0.05), transparent 74%);
}

:root[data-theme="dark"] #landing{
  background:
    radial-gradient(980px 460px at 18% -10%, rgba(69,131,255,0.16), transparent 70%),
    radial-gradient(820px 440px at 100% 0%, rgba(20,24,32,0.88), transparent 74%),
    #0e1218;
}

:root[data-theme="dark"] #landing::before{
  opacity: 0.14;
  filter: grayscale(0.4) contrast(1.02);
}

:root[data-theme="dark"] #landing::after{
  background: linear-gradient(180deg, rgba(9,12,16,0.14) 0%, rgba(13,16,21,0.68) 40%, rgba(14,18,24,0.92) 100%);
}

:root[data-theme="dark"] .landingTopbar,
:root[data-theme="dark"] .landingHero,
:root[data-theme="dark"] .landingMetricCard,
:root[data-theme="dark"] .landingCardMini,
:root[data-theme="dark"] .landingSection,
:root[data-theme="dark"] .landingProgressWrap{
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(20,24,32,0.92), rgba(16,20,27,0.78));
  box-shadow: 0 22px 50px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}

:root[data-theme="dark"] .landingWordmark,
:root[data-theme="dark"] .landingSectionTitle,
:root[data-theme="dark"] #landingTitle,
:root[data-theme="dark"] .landingSubtitle,
:root[data-theme="dark"] .landingMetricList strong{
  color: #eef4fb;
}

:root[data-theme="dark"] .landingBody,
:root[data-theme="dark"] .landingSectionText,
:root[data-theme="dark"] .landingCardMini p,
:root[data-theme="dark"] .landingMetricList li span,
:root[data-theme="dark"] .landingEyebrow,
:root[data-theme="dark"] .landingMetricEyebrow,
:root[data-theme="dark"] .landingSectionKicker,
:root[data-theme="dark"] .landingLegal,
:root[data-theme="dark"] .landingNav a,
:root[data-theme="dark"] .landingFooterLinks a{
  color: rgba(208,219,235,0.74);
}

:root[data-theme="dark"] .landingNav a:hover,
:root[data-theme="dark"] .landingFooterLinks a:hover,
:root[data-theme="dark"] .landingInlineLink,
:root[data-theme="dark"] .landingInlineLink:hover{
  color: #8ac2ff;
}

:root[data-theme="dark"] .landingBtn{
  border-color: rgba(255,255,255,0.10);
  background: rgba(20,24,32,0.92);
  color: #eaf1fa;
  box-shadow: 0 10px 24px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.04);
}

:root[data-theme="dark"] .landingBtn:hover{
  border-color: rgba(124,184,255,0.28);
  box-shadow: 0 14px 28px rgba(0,0,0,0.24), 0 0 0 4px rgba(124,184,255,0.10);
}

:root[data-theme="dark"] .landingBtnPrimary{
  background: linear-gradient(180deg, #4a9cff, #1f78e7);
  color: #ffffff;
  border-color: rgba(74,156,255,0.92);
}

:root[data-theme="dark"] .landingProgressBar{
  background: rgba(255,255,255,0.08);
}

:root[data-theme="dark"] .landingProgressState,
:root[data-theme="dark"] .landingPills span{
  background: rgba(124,184,255,0.12);
  color: #8ec6ff;
  border-color: rgba(124,184,255,0.22);
}

:root[data-theme="dark"] #graph{
  background:
    radial-gradient(980px 520px at 18% -12%, rgba(69,131,255,0.13), transparent 72%),
    radial-gradient(760px 420px at 100% 0%, rgba(18,22,30,0.84), transparent 74%),
    linear-gradient(180deg, #0f131a 0%, #131821 100%);
}

:root[data-theme="dark"] #sidebar{
  background:
    linear-gradient(180deg, rgba(17,20,27,0.88), rgba(13,17,24,0.82)),
    linear-gradient(180deg, rgba(69,131,255,0.08), rgba(255,255,255,0));
  border-left: 1px solid rgba(255,255,255,0.08);
  box-shadow: -20px 0 54px rgba(0,0,0,0.24);
}

:root[data-theme="dark"] #sidebar::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00)),
    linear-gradient(180deg, rgba(69,131,255,0.12), transparent 32%);
}

:root[data-theme="dark"] #sidebarHeader,
:root[data-theme="dark"] #sidebar #controls,
:root[data-theme="dark"] #sidebar #fileControls,
:root[data-theme="dark"] #addNodePanel,
:root[data-theme="dark"] #addGroupPanel,
:root[data-theme="dark"] #advancedPanel,
:root[data-theme="dark"] #shortcutPanel,
:root[data-theme="dark"] #backgroundPanel,
:root[data-theme="dark"] .quickStartCard,
:root[data-theme="dark"] .simStatusCard,
:root[data-theme="dark"] #timelineDock,
:root[data-theme="dark"] .nodePropsTableWrap,
:root[data-theme="dark"] .selectionInspectorEmpty,
:root[data-theme="dark"] .selectionInspectorCard,
:root[data-theme="dark"] .accessCounter,
:root[data-theme="dark"] #menuToggle,
:root[data-theme="dark"] #simTimeHud,
:root[data-theme="dark"] #mobileNav,
:root[data-theme="dark"] #tabletActionBar{
  border-color: rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(20,24,32,0.94), rgba(14,18,24,0.82));
  box-shadow: 0 18px 42px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.04);
}

:root[data-theme="dark"] #sidebarHeader::after,
:root[data-theme="dark"] #sidebar #controls::after,
:root[data-theme="dark"] #sidebar #fileControls::after,
:root[data-theme="dark"] #addNodePanel::after,
:root[data-theme="dark"] #addGroupPanel::after,
:root[data-theme="dark"] #advancedPanel::after,
:root[data-theme="dark"] #shortcutPanel::after,
:root[data-theme="dark"] #backgroundPanel::after{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
}

:root[data-theme="dark"] #sidebarHeader .appBrandText,
:root[data-theme="dark"] #timelineHeader .timelineTitle,
:root[data-theme="dark"] #timelineHeader .timelineSelection,
:root[data-theme="dark"] #timelineHeader .timelinePropsMeta,
:root[data-theme="dark"] .selectionInspectorTitle,
:root[data-theme="dark"] .selectionInspectorStatValue{
  color: #eef4fb;
}

:root[data-theme="dark"] #controls .panelHeader,
:root[data-theme="dark"] #fileControls .panelHeader,
:root[data-theme="dark"] #addNodePanel .panelHeader,
:root[data-theme="dark"] #addGroupPanel .panelHeader,
:root[data-theme="dark"] #advancedPanel .panelHeader,
:root[data-theme="dark"] #shortcutPanel .panelHeader,
:root[data-theme="dark"] #backgroundPanel .panelHeader,
:root[data-theme="dark"] #sidebar label,
:root[data-theme="dark"] #sidebar .control-group label,
:root[data-theme="dark"] .stopGroupFieldLabel,
:root[data-theme="dark"] .fieldHint,
:root[data-theme="dark"] .panel-help,
:root[data-theme="dark"] .selectionInspectorEyebrow,
:root[data-theme="dark"] .selectionInspectorFieldLabel,
:root[data-theme="dark"] .selectionInspectorStatLabel,
:root[data-theme="dark"] .selectionInspectorSubtitle,
:root[data-theme="dark"] .selectionInspectorHint,
:root[data-theme="dark"] .selectionInspectorNotice,
:root[data-theme="dark"] .simStatusLabel,
:root[data-theme="dark"] .quickStartHint,
:root[data-theme="dark"] .quickStartSteps,
:root[data-theme="dark"] .timelineTab{
  color: rgba(208,219,235,0.74);
}

:root[data-theme="dark"] #sidebar input,
:root[data-theme="dark"] #sidebar select,
:root[data-theme="dark"] #sidebar textarea,
:root[data-theme="dark"] #nodePropsFilter,
:root[data-theme="dark"] #nodePropsTable td.col-node input,
:root[data-theme="dark"] #nodePropsTable td.col-props textarea,
:root[data-theme="dark"] .selectionInspectorInput,
:root[data-theme="dark"] .selectionInspectorSelect,
:root[data-theme="dark"] .selectionInspectorTextarea,
:root[data-theme="dark"] .stopGroupField input,
:root[data-theme="dark"] .stopGroupField select,
:root[data-theme="dark"] .stopGroupField textarea{
  border-color: rgba(255,255,255,0.12);
  background: rgba(11,15,22,0.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  color: #eef4fb;
}

:root[data-theme="dark"] #sidebar input::placeholder,
:root[data-theme="dark"] #sidebar textarea::placeholder,
:root[data-theme="dark"] .selectionInspectorTextarea::placeholder{
  color: rgba(208,219,235,0.42);
}

:root[data-theme="dark"] #sidebar input:focus,
:root[data-theme="dark"] #sidebar select:focus,
:root[data-theme="dark"] #sidebar textarea:focus,
:root[data-theme="dark"] #nodePropsFilter:focus,
:root[data-theme="dark"] #nodePropsTable td.col-node input:focus,
:root[data-theme="dark"] #nodePropsTable td.col-props textarea:focus,
:root[data-theme="dark"] .selectionInspectorInput:focus,
:root[data-theme="dark"] .selectionInspectorSelect:focus,
:root[data-theme="dark"] .selectionInspectorTextarea:focus,
:root[data-theme="dark"] .stopGroupField input:focus,
:root[data-theme="dark"] .stopGroupField select:focus,
:root[data-theme="dark"] .stopGroupField textarea:focus{
  border-color: rgba(124,184,255,0.32) !important;
  box-shadow: 0 0 0 4px rgba(124,184,255,0.12), inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

:root[data-theme="dark"] #controls button,
:root[data-theme="dark"] #fileControls button,
:root[data-theme="dark"] #scriptEditorControls button,
:root[data-theme="dark"] #addNodePanel button,
:root[data-theme="dark"] #addGroupPanel button,
:root[data-theme="dark"] #advancedPanel button,
:root[data-theme="dark"] #sidebar button,
:root[data-theme="dark"] .timelineBtn,
:root[data-theme="dark"] .selectionInspectorBtn,
:root[data-theme="dark"] #benchmarkContainer button,
:root[data-theme="dark"] #shareUrlContainer button,
:root[data-theme="dark"] #stopGroupContainer button,
:root[data-theme="dark"] #aboutContainer button,
:root[data-theme="dark"] .mobileNavBtn,
:root[data-theme="dark"] .tabletActionBtn{
  border-color: rgba(255,255,255,0.10) !important;
  background: rgba(20,24,32,0.88) !important;
  color: #e7eef8 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

:root[data-theme="dark"] #controls button:hover,
:root[data-theme="dark"] #fileControls button:hover,
:root[data-theme="dark"] #scriptEditorControls button:hover,
:root[data-theme="dark"] #addNodePanel button:hover,
:root[data-theme="dark"] #addGroupPanel button:hover,
:root[data-theme="dark"] #advancedPanel button:hover,
:root[data-theme="dark"] #sidebar button:hover,
:root[data-theme="dark"] .timelineBtn:hover,
:root[data-theme="dark"] .selectionInspectorBtn:hover,
:root[data-theme="dark"] #benchmarkContainer button:hover,
:root[data-theme="dark"] #shareUrlContainer button:hover,
:root[data-theme="dark"] #stopGroupContainer button:hover,
:root[data-theme="dark"] #aboutContainer button:hover,
:root[data-theme="dark"] .mobileNavBtn:hover,
:root[data-theme="dark"] .tabletActionBtn:hover{
  border-color: rgba(124,184,255,0.24) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.24), 0 0 0 4px rgba(124,184,255,0.10) !important;
}

:root[data-theme="dark"] #btnStart,
:root[data-theme="dark"] #btnAddNode,
:root[data-theme="dark"] #btnAddGroup,
:root[data-theme="dark"] #btnSave,
:root[data-theme="dark"] #btnShareUrl,
:root[data-theme="dark"] #btnExportHtml,
:root[data-theme="dark"] #landingOpenBtn,
:root[data-theme="dark"] #scriptEditorSave,
:root[data-theme="dark"] #shareUrlCopyBtn,
:root[data-theme="dark"] #benchmarkClose,
:root[data-theme="dark"] #stopGroupSave,
:root[data-theme="dark"] #shareUrlClose,
:root[data-theme="dark"] #aboutClose,
:root[data-theme="dark"] .selectionInspectorBtn.is-primary{
  background: linear-gradient(180deg, #5aa9ff, #247de8) !important;
  color: #ffffff !important;
  border-color: rgba(90,169,255,0.92) !important;
  box-shadow: 0 16px 34px rgba(36,125,232,0.24), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

:root[data-theme="dark"] .selectionInspectorBtn.is-danger,
:root[data-theme="dark"] #stopGroupDelete.danger{
  color: #ff9e96 !important;
  border-color: rgba(255,111,97,0.18) !important;
  background: rgba(22,18,20,0.88) !important;
}

:root[data-theme="dark"] .simStatusBadge,
:root[data-theme="dark"] #timelineHeader .timelineTabs{
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(208,219,235,0.72);
}

:root[data-theme="dark"] .simStatusBadge.is-running,
:root[data-theme="dark"] #timelineHeader .timelineTab.is-active,
:root[data-theme="dark"] .mobileNavBtn.is-active,
:root[data-theme="dark"] .tabletActionBtn.is-active{
  background: rgba(124,184,255,0.14) !important;
  color: #8fc7ff !important;
  border-color: rgba(124,184,255,0.24) !important;
  box-shadow: 0 10px 20px rgba(36,125,232,0.16) !important;
}

:root[data-theme="dark"] #timelineHeader{
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

:root[data-theme="dark"] #nodePropsPanel,
:root[data-theme="dark"] #selectionInspectorPanel{
  background: linear-gradient(180deg, rgba(18,22,30,0.92), rgba(14,18,24,0.82));
}

:root[data-theme="dark"] #nodePropsTable,
:root[data-theme="dark"] #nodePropsTable th,
:root[data-theme="dark"] #nodePropsTable td{
  color: #e7eef8;
  border-color: rgba(255,255,255,0.08);
}

:root[data-theme="dark"] #nodePropsTable tbody tr.is-node-selected td{
  background: rgba(124,184,255,0.12);
}

:root[data-theme="dark"] #toast{
  background: rgba(18,22,30,0.94);
  color: #eef4fb;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 14px 28px rgba(0,0,0,0.28);
}

/* ===== Dark mode readability polish ===== */
:root[data-theme="dark"]{
  --theme-color: #10151d;
  --text: #f4f7fb;
  --muted: rgba(222,230,240,0.82);
  --panel-bg: rgba(22,28,38,0.95);
  --panel-border: rgba(148,163,184,0.16);
  --input-bg: rgba(10,14,20,0.96);
  --input-border: rgba(148,163,184,0.22);
  --graph-canvas-clear: #111722;
  --graph-canvas-bg: rgba(17,23,34,0.96);
  --graph-grid-minor: rgba(148,163,184,0.08);
  --graph-grid-minor-dense: rgba(148,163,184,0.055);
  --graph-grid-major: rgba(96,165,250,0.15);
  --graph-grid-major-dense: rgba(96,165,250,0.11);
  --graph-node-title: #f8fafc;
  --graph-node-title-fill: #1d2737;
  --graph-node-bg: #171e29;
  --graph-node-accent: #69adff;
  --graph-node-outline: #3a475c;
  --graph-link: #8090a5;
  --graph-event-link: #7ec4ff;
}

:root[data-theme="dark"] html,
:root[data-theme="dark"] body{
  color: var(--text);
  background:
    radial-gradient(1080px 560px at 14% -12%, rgba(76,132,255,0.16), transparent 72%),
    radial-gradient(860px 520px at 96% -2%, rgba(23,31,44,0.88), transparent 74%),
    linear-gradient(180deg, #0d1219 0%, #10151d 44%, #121925 100%);
}

:root[data-theme="dark"] body::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.01) 28%, rgba(255,255,255,0.00) 74%, rgba(255,255,255,0.04) 100%),
    radial-gradient(900px 320px at 50% 0%, rgba(90,150,255,0.10), transparent 76%);
}

:root[data-theme="dark"] #sidebarHeader,
:root[data-theme="dark"] #sidebar #controls,
:root[data-theme="dark"] #sidebar #fileControls,
:root[data-theme="dark"] #addNodePanel,
:root[data-theme="dark"] #addGroupPanel,
:root[data-theme="dark"] #advancedPanel,
:root[data-theme="dark"] #shortcutPanel,
:root[data-theme="dark"] #backgroundPanel,
:root[data-theme="dark"] .quickStartCard,
:root[data-theme="dark"] .simStatusCard,
:root[data-theme="dark"] .accessCounter,
:root[data-theme="dark"] #timelineDock,
:root[data-theme="dark"] #menuToggle,
:root[data-theme="dark"] #simTimeHud,
:root[data-theme="dark"] #mobileNav,
:root[data-theme="dark"] #tabletActionBar{
  background:
    linear-gradient(180deg, rgba(30,38,50,0.96), rgba(18,24,33,0.92)),
    linear-gradient(180deg, rgba(108,166,255,0.05), rgba(255,255,255,0));
  border-color: rgba(148,163,184,0.16);
  box-shadow: 0 20px 48px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.05);
}

:root[data-theme="dark"] #sidebarHeader .appBrandText,
:root[data-theme="dark"] #timelineHeader .timelineTitle,
:root[data-theme="dark"] #timelineHeader .timelineSelection,
:root[data-theme="dark"] #timelineHeader .timelinePropsMeta,
:root[data-theme="dark"] .selectionInspectorTitle,
:root[data-theme="dark"] .selectionInspectorStatValue,
:root[data-theme="dark"] .simStatusItem strong,
:root[data-theme="dark"] .quickStartCard,
:root[data-theme="dark"] .accessCounter{
  color: #f5f8fd;
}

:root[data-theme="dark"] #controls .panelHeader,
:root[data-theme="dark"] #fileControls .panelHeader,
:root[data-theme="dark"] #addNodePanel .panelHeader,
:root[data-theme="dark"] #addGroupPanel .panelHeader,
:root[data-theme="dark"] #advancedPanel .panelHeader,
:root[data-theme="dark"] #shortcutPanel .panelHeader,
:root[data-theme="dark"] #backgroundPanel .panelHeader,
:root[data-theme="dark"] #sidebar label,
:root[data-theme="dark"] #sidebar .control-group label,
:root[data-theme="dark"] .stopGroupFieldLabel,
:root[data-theme="dark"] .fieldHint,
:root[data-theme="dark"] .panel-help,
:root[data-theme="dark"] .selectionInspectorEyebrow,
:root[data-theme="dark"] .selectionInspectorFieldLabel,
:root[data-theme="dark"] .selectionInspectorStatLabel,
:root[data-theme="dark"] .selectionInspectorSubtitle,
:root[data-theme="dark"] .selectionInspectorHint,
:root[data-theme="dark"] .selectionInspectorNotice,
:root[data-theme="dark"] .simStatusLabel,
:root[data-theme="dark"] .quickStartHint,
:root[data-theme="dark"] .quickStartSteps,
:root[data-theme="dark"] .simStatusEngine,
:root[data-theme="dark"] .timelineTab,
:root[data-theme="dark"] .panel-help-compact{
  color: rgba(222,230,240,0.82);
}

:root[data-theme="dark"] .fieldHint strong,
:root[data-theme="dark"] .panel-help strong,
:root[data-theme="dark"] .quickStartCard strong{
  color: #f8fbff;
}

:root[data-theme="dark"] #sidebar input,
:root[data-theme="dark"] #sidebar select,
:root[data-theme="dark"] #sidebar textarea,
:root[data-theme="dark"] #nodePropsFilter,
:root[data-theme="dark"] #nodePropsTable td.col-node input,
:root[data-theme="dark"] #nodePropsTable td.col-props textarea,
:root[data-theme="dark"] .selectionInspectorInput,
:root[data-theme="dark"] .selectionInspectorSelect,
:root[data-theme="dark"] .selectionInspectorTextarea,
:root[data-theme="dark"] .stopGroupField input,
:root[data-theme="dark"] .stopGroupField select,
:root[data-theme="dark"] .stopGroupField textarea{
  background: rgba(8,11,16,0.94);
  border-color: rgba(148,163,184,0.24);
  color: #f4f7fb;
}

:root[data-theme="dark"] #sidebar input::placeholder,
:root[data-theme="dark"] #sidebar textarea::placeholder,
:root[data-theme="dark"] .selectionInspectorTextarea::placeholder{
  color: rgba(203,213,225,0.52);
}

:root[data-theme="dark"] #controls button,
:root[data-theme="dark"] #fileControls button,
:root[data-theme="dark"] #scriptEditorControls button,
:root[data-theme="dark"] #addNodePanel button,
:root[data-theme="dark"] #addGroupPanel button,
:root[data-theme="dark"] #advancedPanel button,
:root[data-theme="dark"] #sidebar button,
:root[data-theme="dark"] .timelineBtn,
:root[data-theme="dark"] .selectionInspectorBtn,
:root[data-theme="dark"] #benchmarkContainer button,
:root[data-theme="dark"] #shareUrlContainer button,
:root[data-theme="dark"] #stopGroupContainer button,
:root[data-theme="dark"] #aboutContainer button,
:root[data-theme="dark"] .mobileNavBtn,
:root[data-theme="dark"] .tabletActionBtn{
  background: linear-gradient(180deg, rgba(39,47,60,0.98), rgba(28,35,46,0.96)) !important;
  border-color: rgba(148,163,184,0.18) !important;
  color: #eef4fb !important;
}

:root[data-theme="dark"] #controls button:hover,
:root[data-theme="dark"] #fileControls button:hover,
:root[data-theme="dark"] #scriptEditorControls button:hover,
:root[data-theme="dark"] #addNodePanel button:hover,
:root[data-theme="dark"] #addGroupPanel button:hover,
:root[data-theme="dark"] #advancedPanel button:hover,
:root[data-theme="dark"] #sidebar button:hover,
:root[data-theme="dark"] .timelineBtn:hover,
:root[data-theme="dark"] .selectionInspectorBtn:hover,
:root[data-theme="dark"] #benchmarkContainer button:hover,
:root[data-theme="dark"] #shareUrlContainer button:hover,
:root[data-theme="dark"] #stopGroupContainer button:hover,
:root[data-theme="dark"] #aboutContainer button:hover,
:root[data-theme="dark"] .mobileNavBtn:hover,
:root[data-theme="dark"] .tabletActionBtn:hover{
  border-color: rgba(124,184,255,0.32) !important;
  background: linear-gradient(180deg, rgba(47,57,72,1), rgba(33,41,53,0.98)) !important;
}

:root[data-theme="dark"] #timelineDock{
  background:
    linear-gradient(180deg, rgba(27,34,45,0.98), rgba(17,22,30,0.96)),
    linear-gradient(180deg, rgba(96,165,250,0.05), rgba(255,255,255,0));
}

:root[data-theme="dark"] #timelineHeader{
  background: rgba(255,255,255,0.04);
  border-bottom-color: rgba(148,163,184,0.18);
}

:root[data-theme="dark"] #timelineHeader .timelineTabs{
  background: rgba(255,255,255,0.05);
  border-color: rgba(148,163,184,0.16);
}

:root[data-theme="dark"] #timelineHeader .timelineTab{
  color: rgba(226,232,240,0.76);
}

:root[data-theme="dark"] #timelineHeader .timelineTab.is-active,
:root[data-theme="dark"] .mobileNavBtn.is-active,
:root[data-theme="dark"] .tabletActionBtn.is-active{
  background: rgba(113,176,255,0.18) !important;
  color: #d7ebff !important;
  border-color: rgba(124,184,255,0.28) !important;
}

:root[data-theme="dark"] #timelineBody,
:root[data-theme="dark"] #timelineChartPanel,
:root[data-theme="dark"] #nodePropsPanel,
:root[data-theme="dark"] #selectionInspectorPanel,
:root[data-theme="dark"] .workspacePopoutContent > #timelineChartPanel,
:root[data-theme="dark"] .workspacePopoutContent > #nodePropsPanel,
:root[data-theme="dark"] .workspacePopoutContent > #selectionInspectorPanel{
  background: linear-gradient(180deg, rgba(18,23,31,0.98), rgba(14,19,27,0.96));
}

:root[data-theme="dark"] #nodePropsTable,
:root[data-theme="dark"] #nodePropsTable th,
:root[data-theme="dark"] #nodePropsTable td{
  color: #eaf2fb;
  border-color: rgba(148,163,184,0.14);
}

:root[data-theme="dark"] #nodePropsTable thead th{
  background: rgba(255,255,255,0.04);
}

:root[data-theme="dark"] #nodePropsTable tbody tr:nth-child(odd) td{
  background: rgba(255,255,255,0.02);
}

:root[data-theme="dark"] #nodePropsTable tbody tr:nth-child(even) td{
  background: rgba(255,255,255,0.035);
}

:root[data-theme="dark"] #simTimeHud{
  border-color: rgba(124,184,255,0.22);
  background: rgba(16,21,29,0.92);
}

:root[data-theme="dark"] #simTime{
  color: #f7fbff;
}

/* ===== Glass transparency restore ===== */
:root[data-theme="light"] #sidebar{
  background:
    linear-gradient(180deg, rgba(251,253,255,0.58), rgba(242,246,251,0.38)),
    linear-gradient(180deg, rgba(10,132,255,0.06), rgba(255,255,255,0));
  backdrop-filter: blur(34px) saturate(1.45);
}

:root[data-theme="light"] #timelineDock{
  background:
    linear-gradient(180deg, rgba(252,253,255,0.52), rgba(241,245,250,0.34)),
    linear-gradient(180deg, rgba(10,132,255,0.045), rgba(255,255,255,0));
  backdrop-filter: blur(30px) saturate(1.38);
}

:root[data-theme="light"] #timelineBody,
:root[data-theme="light"] #timelineChartPanel,
:root[data-theme="light"] #nodePropsPanel,
:root[data-theme="light"] #selectionInspectorPanel,
:root[data-theme="light"] .workspacePopoutContent > #timelineChartPanel,
:root[data-theme="light"] .workspacePopoutContent > #nodePropsPanel,
:root[data-theme="light"] .workspacePopoutContent > #selectionInspectorPanel{
  background: linear-gradient(180deg, rgba(255,255,255,0.48), rgba(246,248,252,0.30));
  backdrop-filter: blur(18px) saturate(1.2);
}

:root[data-theme="light"] #sidebarHeader,
:root[data-theme="light"] #sidebar #controls,
:root[data-theme="light"] #sidebar #fileControls,
:root[data-theme="light"] #addNodePanel,
:root[data-theme="light"] #addGroupPanel,
:root[data-theme="light"] #advancedPanel,
:root[data-theme="light"] #shortcutPanel,
:root[data-theme="light"] #backgroundPanel,
:root[data-theme="light"] .quickStartCard,
:root[data-theme="light"] .simStatusCard,
:root[data-theme="light"] .accessCounter,
:root[data-theme="light"] #menuToggle,
:root[data-theme="light"] #simTimeHud,
:root[data-theme="light"] #mobileNav,
:root[data-theme="light"] #tabletActionBar{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(246,249,253,0.52)),
    linear-gradient(180deg, rgba(10,132,255,0.03), rgba(255,255,255,0));
  backdrop-filter: blur(26px) saturate(1.32);
}

:root[data-theme="dark"] #sidebar{
  background:
    linear-gradient(180deg, rgba(18,23,31,0.54), rgba(12,17,24,0.34)),
    linear-gradient(180deg, rgba(108,166,255,0.08), rgba(255,255,255,0));
  backdrop-filter: blur(34px) saturate(1.38);
}

:root[data-theme="dark"] #timelineDock{
  background:
    linear-gradient(180deg, rgba(22,29,39,0.48), rgba(15,20,28,0.30)),
    linear-gradient(180deg, rgba(96,165,250,0.06), rgba(255,255,255,0));
  backdrop-filter: blur(30px) saturate(1.34);
}

:root[data-theme="dark"] #timelineBody,
:root[data-theme="dark"] #timelineChartPanel,
:root[data-theme="dark"] #nodePropsPanel,
:root[data-theme="dark"] #selectionInspectorPanel,
:root[data-theme="dark"] .workspacePopoutContent > #timelineChartPanel,
:root[data-theme="dark"] .workspacePopoutContent > #nodePropsPanel,
:root[data-theme="dark"] .workspacePopoutContent > #selectionInspectorPanel{
  background: linear-gradient(180deg, rgba(17,22,30,0.42), rgba(12,17,24,0.26));
  backdrop-filter: blur(20px) saturate(1.16);
}

:root[data-theme="dark"] #sidebarHeader,
:root[data-theme="dark"] #sidebar #controls,
:root[data-theme="dark"] #sidebar #fileControls,
:root[data-theme="dark"] #addNodePanel,
:root[data-theme="dark"] #addGroupPanel,
:root[data-theme="dark"] #advancedPanel,
:root[data-theme="dark"] #shortcutPanel,
:root[data-theme="dark"] #backgroundPanel,
:root[data-theme="dark"] .quickStartCard,
:root[data-theme="dark"] .simStatusCard,
:root[data-theme="dark"] .accessCounter,
:root[data-theme="dark"] #menuToggle,
:root[data-theme="dark"] #simTimeHud,
:root[data-theme="dark"] #mobileNav,
:root[data-theme="dark"] #tabletActionBar{
  background:
    linear-gradient(180deg, rgba(29,37,49,0.76), rgba(18,24,33,0.62)),
    linear-gradient(180deg, rgba(108,166,255,0.05), rgba(255,255,255,0));
  backdrop-filter: blur(26px) saturate(1.24);
}