/* Saddle Demo - mirrors the real Tauri app exactly */
.sd {
  display: flex;
  height: 540px;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 12px;
  color: #1d1d1f;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #d1d1d6;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
}

/* Sidebar */
.sd-sidebar { width: 172px; background: #f5f5f7; border-right: 1px solid #e5e5e5; flex-shrink: 0; overflow: hidden; }
.sd-sidebar-hd { padding: 10px 12px; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center; gap: 8px; }
.sd-muted { font-size: 10px; color: #a3a3a3; }
.sd-label { font-size: 9px; color: #a3a3a3; font-weight: 600; padding: 8px 12px 3px; text-transform: uppercase; letter-spacing: 0.06em; }
.sd-nav { padding: 4px 12px; font-size: 12px; color: #525252; border-radius: 4px; margin: 1px 4px; display: flex; justify-content: space-between; cursor: default; }
.sd-nav.active { background: rgba(37,99,235,0.08); color: #2563eb; font-weight: 600; }
.sd-count { font-size: 10px; color: #a3a3a3; }
.sd-nav.active .sd-count { color: #2563eb; opacity: 0.6; }

/* Elements Panel */
.sd-elements { width: 200px; border-right: 1px solid #e5e5e5; background: #fff; flex-shrink: 0; overflow: hidden; display: flex; flex-direction: column; }
.sd-elements-hd { padding: 8px 12px; font-size: 11px; font-weight: 600; color: #1d1d1f; border-bottom: 1px solid #e5e5e5; flex-shrink: 0; }
.sd-elements-tree { flex: 1; overflow-y: auto; padding: 4px 0; font-family: 'SF Mono', ui-monospace, monospace; font-size: 11px; }
.sd-el-node { padding: 3px 8px 3px 12px; display: flex; align-items: center; gap: 4px; cursor: default; }
.sd-el-node.selected { background: rgba(37,99,235,0.06); border-left: 2px solid #2563eb; }
.sd-el-tag { color: #881280; }
.sd-el-badge { margin-left: auto; font-size: 9px; color: #2563eb; font-weight: 600; background: rgba(37,99,235,0.06); padding: 1px 5px; border-radius: 3px; }
.sd-el-styles { padding: 2px 8px 2px 28px; background: #fafafa; border-left: 2px solid #e5e5e5; margin-left: 0; }
.sd-el-style { display: flex; gap: 4px; padding: 1px 0; font-size: 10px; }
.sd-el-k { color: #2563eb; }
.sd-el-v { color: #1d1d1f; }

/* Stage */
.sd-stage { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sd-variant-bar { padding: 8px 14px; border-bottom: 1px solid #e5e5e5; background: #fff; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.sd-variants { display: flex; gap: 4px; }
.sd-vbtn { height: 24px; padding: 0 10px; border: 1px solid #e5e5e5; background: #fff; border-radius: 5px; font-size: 11px; color: #525252; cursor: pointer; font-weight: 500; font-family: inherit; }
.sd-vbtn.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.sd-vbtn:not(.active):hover { background: #fafafa; }
.sd-newvar { height: 24px; padding: 0 8px; border: 1px solid #e5e5e5; background: #fff; border-radius: 5px; font-size: 10px; color: #525252; cursor: pointer; font-family: inherit; }

.sd-bp-bar { padding: 5px 14px; display: flex; gap: 2px; background: #fafafa; border-bottom: 1px solid #e5e5e5; flex-shrink: 0; }
.sd-bp { width: 24px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 3px; color: #a3a3a3; cursor: pointer; border: none; background: none; }
.sd-bp.active { background: #fff; color: #525252; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.sd-bp:hover { color: #525252; }

.sd-preview {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: #fafafa; position: relative; overflow: hidden;
}
.sd-component-preview {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; transition: max-width 200ms ease;
}

.sd-terminal { height: 72px; background: #1d1d1f; border-top: 1px solid #3a3a3c; display: flex; flex-direction: column; flex-shrink: 0; }
.sd-term-hd { padding: 4px 10px; font-size: 10px; color: #636366; font-weight: 600; border-bottom: 1px solid #3a3a3c; display: flex; justify-content: space-between; }
.sd-term-count { color: #4a4a4e; }
.sd-term-log { flex: 1; overflow-y: auto; padding: 3px 10px; font-family: 'SF Mono', ui-monospace, monospace; font-size: 10px; line-height: 1.5; }
.sd-t-time { color: #636366; margin-right: 6px; }
.sd-t-ok { color: #34c759; }
.sd-t-info { color: #86868b; }

/* Inspector */
.sd-inspector { width: 220px; background: #fff; border-left: 1px solid #e5e5e5; display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; }
.sd-tabs { display: flex; padding: 0 8px; border-bottom: 1px solid #e5e5e5; flex-shrink: 0; }
.sd-tab { height: 30px; padding: 0 8px; background: none; border: none; border-bottom: 2px solid transparent; font-size: 11px; color: #a3a3a3; cursor: default; font-weight: 400; font-family: inherit; }
.sd-tab.active { color: #1d1d1f; border-bottom-color: #2563eb; font-weight: 600; }
.sd-insp-body { flex: 1; overflow-y: auto; }

/* Accordion */
.sd-acc { border-bottom: 1px solid #f0f0f0; }
.sd-acc-hd { display: flex; align-items: center; gap: 4px; padding: 6px 10px; font-size: 10px; font-weight: 600; color: #1d1d1f; cursor: pointer; user-select: none; }
.sd-acc-hd:hover { background: rgba(0,0,0,0.02); }
.sd-chev { transition: transform 150ms; color: #a3a3a3; }
.sd-acc.open .sd-chev { transform: rotate(90deg); }
.sd-acc-count { margin-left: auto; font-size: 9px; color: #2563eb; font-weight: 600; }
.sd-acc-body { padding: 0 10px 6px; display: flex; flex-direction: column; gap: 3px; }

/* Props */
.sd-prop { display: flex; align-items: center; gap: 3px; height: 22px; }
.sd-cpick { width: 16px; height: 16px; border: 1px solid #e5e5e5; border-radius: 3px; padding: 0; cursor: pointer; flex-shrink: 0; }
.sd-prop-name { width: 72px; font-size: 10px; color: #2563eb; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.sd-prop-val {
  flex: 1; min-width: 0; height: 18px; padding: 0 4px;
  font-size: 10px; font-family: 'SF Mono', ui-monospace, monospace;
  border: 1px solid transparent; border-radius: 3px;
  background: #fff; color: #1d1d1f;
}
.sd-prop-val:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.08); }
.sd-tok-btn { height: 16px; padding: 0 4px; background: #f5f5f7; color: #2563eb; border: 1px solid #e5e5e5; border-radius: 3px; font-size: 9px; cursor: pointer; white-space: nowrap; font-family: inherit; }
.sd-tok-btn:hover { border-color: #2563eb; }
.sd-add-btn { background: none; border: none; color: #2563eb; font-size: 10px; font-weight: 500; cursor: pointer; padding: 2px 0 0; text-align: left; font-family: inherit; }

/* Scrollbar */
.sd ::-webkit-scrollbar { width: 6px; height: 6px; }
.sd ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 3px; }
.sd ::-webkit-scrollbar-track { background: transparent; }

/* Token dropdown */
.sd-dropdown {
  position: fixed; z-index: 1000;
  background: #fff; border: 1px solid #e5e5e5; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 4px; min-width: 170px;
}
.sd-dd-label {
  font-size: 9px; color: #a3a3a3; text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600; padding: 4px 8px;
}
.sd-dd-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 8px; background: none; border: none; border-radius: 4px;
  cursor: pointer; font-size: 11px; text-align: left; font-family: inherit;
}
.sd-dd-item:hover { background: #f5f5f7; }
.sd-dd-swatch {
  width: 14px; height: 14px; border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.08); flex-shrink: 0;
}
.sd-dd-name { font-family: 'SF Mono', ui-monospace, monospace; flex: 1; color: #1d1d1f; }
.sd-dd-val { font-family: 'SF Mono', ui-monospace, monospace; font-size: 10px; color: #a3a3a3; }

@media (max-width: 900px) {
  .sd { height: auto; flex-direction: column; }
  .sd-sidebar, .sd-elements, .sd-inspector { width: 100%; }
  .sd-elements { display: none; }
}