.simulator-panel { aspect-ratio: auto; min-height: 590px; background: #0c0d0f; }
.simulator-intro { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.simulator-intro div { display: flex; flex-direction: column; line-height: 1.35; }
.simulator-intro strong { color: #f4f4f7; font-size: 13px; }
.simulator-intro span { color: #777982; font-size: 10px; }
.simulator-intro button { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(255,255,255,.05); color: #b9bac1; padding: 6px 10px; font-size: 10px; }
.simulator-stage { min-height: 532px; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.07), transparent 45%), #090a0c; overflow: hidden; }
.maclive-sim { position: relative; width: 328px; height: 500px; overflow: hidden; color: #1e1f22; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; line-height: 1.2; border: 1px solid rgba(255,255,255,.52); border-radius: 13px; background: rgba(239,239,242,.96); box-shadow: 0 28px 70px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.8); user-select: none; }
.maclive-sim button, .maclive-sim input { font: inherit; }
.maclive-sim button { color: inherit; cursor: pointer; }
.maclive-sim [hidden] { display: none !important; }
.maclive-sim svg { width: 13px; height: 13px; stroke-width: 1.9; pointer-events: none; }
.sim-icon-button { position: relative; display: inline-grid; place-items: center; }
.sim-icon-button svg { display: block; }
.sim-brand-row svg { width: 12px; height: 12px; stroke-width: 2.4; }
.sim-mode-badge svg, .sim-input-device svg, .sim-device-menu svg { width: 11px; height: 11px; margin-right: 4px; vertical-align: -2px; }
.sim-input-device svg, .sim-device-menu svg { flex: 0 0 auto; margin: 0 0 0 4px; }
.sim-input-device, .sim-device-menu { display: inline-flex; align-items: center; justify-content: center; }
.sim-section-head .sim-head-icon { display: inline-grid; place-items: center; }
.sim-section-head .sim-head-icon svg { width: 14px; height: 14px; }
.sim-mode-picker p button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.sim-mode-picker p button svg { width: 11px; height: 11px; }
.sim-destination svg { width: 10px; height: 10px; }
.sim-remove svg { width: 15px; height: 15px; }
.sim-control svg { width: 14px; height: 14px; }
.sim-device-options button { display: flex; align-items: center; gap: 5px; }
.sim-device-options button svg { width: 11px; height: 11px; }
.sim-record-status svg, .sim-record-actions svg, .sim-recording svg { width: 13px; height: 13px; }
.sim-live-controls svg { width: 12px; height: 12px; }
.sim-license-status > span, .sim-license h4, .sim-credentials > div > span { display: inline-flex; align-items: center; justify-content: center; }
.sim-license-status > span svg { width: 17px; height: 17px; }
.sim-license h4 svg { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; }
.sim-credentials > div > span svg { width: 13px; height: 13px; }
.sim-credentials button svg { width: 12px; height: 12px; }
.sim-tooltip {
  position: absolute;
  z-index: 60;
  max-width: 190px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  background: rgba(26,27,31,.94);
  box-shadow: 0 5px 16px rgba(0,0,0,.22);
  color: #f5f5f7;
  font-size: 9px;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -4px) scale(.96);
  transition: opacity .12s ease, transform .12s ease;
}
.sim-tooltip.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.sim-main { position: relative; height: 100%; display: flex; flex-direction: column; }
.sim-header { position: relative; flex: 0 0 64px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid rgba(0,0,0,.1); background: linear-gradient(105deg, rgba(45,126,255,.065), transparent 55%); }
.sim-brand { width: 116px; border: 0; padding: 0; background: transparent; text-align: left; }
.sim-brand-row { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 650; white-space: nowrap; }
.sim-brand-row i { display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; background: #2785ef; color: white; font-size: 7px; font-style: normal; }
.sim-device { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: #797a80; font-size: 9.5px; white-space: nowrap; }
.sim-device b { width: 5px; height: 5px; border-radius: 50%; background: #38b457; }
.sim-header-actions { width: 174px; display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.sim-mode-badge { height: 23px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; color: #2785ef; background: rgba(39,133,239,.11); font-size: 9px; white-space: nowrap; }
.sim-input-device { display: none; width: 98px; height: 23px; overflow: hidden; border: 1px solid rgba(0,0,0,.11); border-radius: 6px; background: rgba(0,0,0,.055); padding: 0 7px; color: #595a60; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.sim-input-device > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-switch { position: relative; flex: 0 0 27px; width: 27px; height: 16px; border: 0; border-radius: 999px; background: #a6a7ab; padding: 0; }
.sim-switch i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: white; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .16s ease; }
.sim-switch.is-on { background: #2785ef; }
.sim-switch.is-on i { transform: translateX(11px); }
.sim-quit { display: none; width: 22px; height: 22px; border: 0; background: transparent; color: #77787e; font-size: 13px; }
.sim-mode-picker { position: absolute; z-index: 20; top: 8px; right: 12px; width: 187px; padding: 4px; border: 1px solid rgba(0,0,0,.09); border-radius: 8px; background: rgba(229,230,234,.97); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.sim-mode-picker > div { height: 22px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; color: #75767c; font-size: 9px; }
.sim-mode-picker > div button { width: 17px; height: 17px; border: 0; background: transparent; color: #73747a; }
.sim-mode-picker p { display: flex; gap: 3px; margin: 0; padding: 3px; border: 1px solid rgba(0,0,0,.06); border-radius: 7px; background: rgba(0,0,0,.045); }
.sim-mode-picker p button { width: 82px; height: 28px; border: 0; border-radius: 5px; background: transparent; font-size: 9px; }
.sim-mode-picker p button.active { color: #2785ef; background: rgba(39,133,239,.13); }
.sim-content { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 10px 12px; }
.sim-card { border: .7px solid rgba(0,0,0,.09); border-radius: 10px; background: rgba(0,0,0,.04); }
.sim-app-card { min-height: 132px; }
.sim-running-card { margin-top: 10px; }
.sim-section-head { height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.sim-section-head .sim-head-icon { width: 18px; color: #2785ef; font-size: 14px; font-weight: 650; }
.sim-section-head i { height: 1px; flex: 1; border-radius: 1px; background: rgba(0,0,0,.11); }
.sim-section-head b { color: #77787d; font: 500 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.sim-managed-list { min-height: 98px; }
.sim-app-row { height: 49px; display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-top: 1px solid rgba(0,0,0,.075); }
.sim-app-row:first-child { border-top: 0; }
.sim-app-row label { flex: 1; min-width: 72px; }
.sim-app-icon { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; overflow: visible; border: 0; border-radius: 7px; color: white; background: #777; font-weight: 700; font-size: 11px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.16); }
.sim-app-icon span { position: absolute; right: -1px; bottom: -1px; width: 7px; height: 7px; border: 1.5px solid #ececef; border-radius: 50%; background: #35b457; }
.sim-app-icon.music { background: linear-gradient(145deg,#fb3d75,#9d46e9); }
.sim-app-icon.browser { background: linear-gradient(145deg,#45bfff,#1467e5); border-radius: 50%; }
.sim-app-icon.video { background: #15161a; }
.sim-app-icon.obs { background: #35363b; font-size: 8px; border-radius: 50%; }
.sim-app-icon.chat { background: #28b947; }
.sim-app-icon.qq { background: linear-gradient(145deg,#4b9cff,#2869d7); }
.sim-app-icon.studio { background: linear-gradient(145deg,#3778ee,#223c9d); font-size: 9px; }
.sim-volume { width: 100%; height: 22px; margin: 0; accent-color: #2785ef; }
.sim-destination, .sim-remove { flex: 0 0 30px; width: 30px; height: 30px; border: 0; background: transparent; color: #85868b; font-size: 15px; }
.sim-destination { font-size: 10px; }
.sim-destination::before { content: ""; position: absolute; }
.sim-destination.active { width: 19px; height: 19px; flex-basis: 30px; border-radius: 50%; background: #2785ef; color: white; }
.sim-remove { font-size: 18px; }
.sim-running-list { min-height: 51px; display: flex; justify-content: center; gap: 12px; padding: 7px; border-top: 1px solid rgba(0,0,0,.075); }
.sim-running-list .sim-app-icon { width: 34px; height: 34px; transition: transform .14s ease; }
.sim-running-list .sim-app-icon:hover { transform: translateY(-2px) scale(1.08); }
.sim-dock { flex: 0 0 167px; display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.8); background: rgba(0,0,0,.045); box-shadow: 0 -1px rgba(0,0,0,.07); }
.sim-playback { padding: 9px 11px 7px; }
.sim-playback-row { position: relative; display: flex; align-items: center; gap: 8px; }
.sim-control { width: 28px; height: 28px; border: 0; border-radius: 7px; background: rgba(39,133,239,.11); color: #2785ef; font-size: 9px; }
.sim-control.muted { color: #e48a23; background: rgba(228,138,35,.1); }
.sim-device-menu { flex: 1; height: 28px; overflow: hidden; border: 1px solid rgba(0,0,0,.14); border-radius: 999px; background: rgba(0,0,0,.035); padding: 0 11px; font-size: 10px; font-weight: 550; white-space: nowrap; text-overflow: ellipsis; }
.sim-popover { position: absolute; z-index: 25; right: 0; width: 225px; padding: 5px; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; background: rgba(245,245,247,.98); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.sim-device-options { bottom: 32px; }
.sim-input-options { top: 35px; right: 47px; width: 174px; }
.sim-input-options small { display: block; padding: 4px 8px 5px; color: #77787e; font-size: 9px; }
.sim-device-options button { display: block; width: 100%; height: 27px; border: 0; border-radius: 5px; background: transparent; padding: 0 8px; text-align: left; font-size: 10px; }
.sim-input-options button { display: flex; align-items: center; gap: 5px; width: 100%; height: 27px; border: 0; border-radius: 5px; background: transparent; padding: 0 8px; text-align: left; font-size: 10px; }
.sim-device-options button:hover { color: white; background: #2785ef; }
.sim-input-options button:hover { color: white; background: #2785ef; }
.sim-master-volume { display: block; height: 24px; margin-top: 4px; }
.sim-live-card { min-height: 71px; padding: 8px 10px; }
.sim-live-top { height: 26px; display: flex; align-items: center; justify-content: space-between; }
.sim-record-tools { width: 76px; display: flex; align-items: center; }
.sim-record-status, .sim-record-actions button, .sim-recording button { width: 21px; height: 22px; border: 0; background: transparent; }
.sim-record-status { color: #35a955; font-size: 13px; }
.sim-record-actions, .sim-recording { display: flex; align-items: center; gap: 4px; }
.sim-record-actions button:first-child, .sim-recording button { color: #e44343; }
.sim-record-actions button:last-child { color: #2785ef; }
.sim-recording span { font: 600 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.sim-live-controls { width: 144px; display: flex; gap: 6px; }
.sim-live-controls button { position: relative; width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent; color: #898a90; font-size: 12px; }
.sim-live-controls button.active { color: #2785ef; background: rgba(39,133,239,.11); }
.sim-live-controls button[data-live-control="duck"].active { color: #d38125; background: rgba(211,129,37,.1); }
.sim-meter-row { height: 22px; display: flex; align-items: center; gap: 5px; }
.sim-meter-row b { color: #77787e; font: 600 8px ui-monospace, SFMono-Regular, Menlo, monospace; }
.sim-meter-row i { flex: 1; height: 6px; overflow: hidden; border-radius: 99px; background: rgba(0,0,0,.12); }
.sim-meter-row i span { display: block; width: 42%; height: 100%; border-radius: inherit; background: #2785ef; transition: width .14s linear; }
.sim-fader { height: 22px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid rgba(39,133,239,.2); border-radius: 7px; background: rgba(39,133,239,.055); }
.sim-fader span { width: 48px; color: #77787e; font-size: 9px; }
.sim-fader input { flex: 1; accent-color: #2785ef; }
.sim-fader b { width: 30px; color: #2785ef; font: 600 8px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
.sim-disabled-cover { display: none; position: absolute; z-index: 15; left: 12px; right: 12px; top: 74px; bottom: 8px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; border-radius: 10px; background: rgba(238,238,241,.74); backdrop-filter: blur(2px); color: #6f7075; }
.sim-disabled-cover span { font-size: 12px; font-weight: 650; }
.sim-disabled-cover small { font-size: 9px; }
.maclive-sim[data-enabled="false"] .sim-mode-badge { display: none; }
.maclive-sim[data-enabled="false"] .sim-input-device { display: inline-flex; align-items: center; gap: 4px; }
.maclive-sim[data-enabled="false"] .sim-quit { display: block; }
.maclive-sim[data-enabled="false"] .sim-disabled-cover { display: flex; }
.sim-license { height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.sim-license[hidden] { display: none; }
.sim-license-head { display: flex; align-items: flex-start; justify-content: space-between; }
.sim-license-head b { color: #2785ef; font-size: 9px; letter-spacing: 1.1px; }
.sim-license-head h3 { margin: 4px 0; font-size: 18px; }
.sim-license-head p { color: #77787e; font-size: 10px; }
.sim-license-head button { width: 25px; height: 25px; border: 0; border-radius: 7px; background: rgba(0,0,0,.05); color: #6f7075; }
.sim-license-status { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(39,133,239,.2); border-radius: 10px; background: rgba(39,133,239,.055); }
.sim-license-status > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(39,133,239,.13); color: #2785ef; font-size: 17px; }
.sim-license-status strong { font-size: 12px; }
.sim-license-status p { margin-top: 3px; color: #77787e; font-size: 10px; }
.sim-license h4 { margin: 0; font-size: 11px; }
.sim-credentials { overflow: hidden; border: 1px solid rgba(0,0,0,.09); border-radius: 9px; background: rgba(0,0,0,.03); }
.sim-credentials > div { min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 9px 11px; }
.sim-credentials > div + div { border-top: 1px solid rgba(0,0,0,.08); }
.sim-credentials > div > span { width: 18px; color: #77787e; text-align: center; }
.sim-credentials p { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sim-credentials small { color: #77787e; font-size: 9px; }
.sim-credentials b { font: 500 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.sim-credentials button { width: 26px; height: 26px; border: 0; border-radius: 7px; background: rgba(0,0,0,.05); color: #6f7075; }
.sim-license-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sim-license-actions button { height: 30px; border: 1px solid rgba(0,0,0,.1); border-radius: 7px; background: rgba(0,0,0,.035); font-size: 10px; }
.sim-license-actions button:last-child { border-color: #2785ef; background: #2785ef; color: white; }
.sim-license-spacer { flex: 1; }
.sim-license-meta { display: flex; justify-content: space-between; color: #77787e; font-size: 9px; }
.sim-license-meta b { color: #2785ef; }
.sim-uninstall { height: 30px; border: 1px solid rgba(218,65,65,.2); border-radius: 7px; background: rgba(218,65,65,.055); color: #c94141 !important; font-size: 10px !important; }
.maclive-sim button:focus-visible, .maclive-sim input:focus-visible { outline: 2px solid #2785ef; outline-offset: 1px; }
@media (max-width: 640px) {
  .simulator-panel { min-height: 548px; }
  .simulator-intro { align-items: flex-start; }
  .simulator-intro span { max-width: 220px; }
  .simulator-stage { min-height: 490px; padding: 0; }
  .maclive-sim { transform: scale(.94); }
}
@media (max-width: 350px) {
  .simulator-panel { min-height: 500px; }
  .simulator-stage { min-height: 442px; }
  .maclive-sim { transform: scale(.86); }
}
@media (prefers-color-scheme: dark) {
  .maclive-sim { color: #f1f1f3; border-color: rgba(255,255,255,.18); background: rgba(37,38,42,.97); box-shadow: 0 28px 70px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.1); }
  .sim-card { border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.055); }
  .sim-header { border-color: rgba(255,255,255,.09); background: linear-gradient(105deg,rgba(39,133,239,.1),transparent 55%); }
  .sim-section-head i, .sim-app-row, .sim-running-list { border-color: rgba(255,255,255,.08); }
  .sim-section-head i { background: rgba(255,255,255,.11); }
  .sim-dock { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.035); box-shadow: 0 -1px rgba(0,0,0,.2); }
  .sim-device-menu, .sim-input-device { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #d1d1d4; }
  .sim-popover, .sim-mode-picker { border-color: rgba(255,255,255,.11); background: rgba(52,53,58,.98); }
  .sim-device-options button:hover { background: #2785ef; }
  .sim-meter-row i { background: rgba(255,255,255,.12); }
  .sim-disabled-cover { background: rgba(39,40,44,.76); }
  .sim-credentials { border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.035); }
  .sim-credentials > div + div { border-color: rgba(255,255,255,.08); }
  .sim-license-actions button { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.04); }
}
@media (prefers-color-scheme: light) {
  .simulator-panel {
    background: rgba(255,255,255,.72);
  }
  .simulator-intro {
    border-bottom-color: rgba(19,29,48,.09);
    background: rgba(255,255,255,.62);
  }
  .simulator-intro strong { color: #202631; }
  .simulator-intro span { color: #697384; }
  .simulator-intro button {
    border-color: rgba(19,29,48,.12);
    background: rgba(238,242,248,.72);
    color: #4e5868;
  }
  .simulator-stage {
    background:
      radial-gradient(circle at 50% 30%, rgba(255,255,255,.9), transparent 45%),
      #edf1f7;
  }
}