* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: #0d1117;
  color: #e6edf3;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 顶栏 */
#topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #161b22;
  border-bottom: 1px solid #21262d;
  flex: 0 0 auto;
}
#topbar #statusText { flex: 1; font-size: 13px; color: #9da7b3; }
.top-btn {
  background: #21262d;
  color: #e6edf3;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 14px;
}
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 auto;
}
.dot.online { background: #2ea043; box-shadow: 0 0 8px #2ea043; }
.dot.offline { background: #f85149; }

/* 屏幕区 */
#stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}
#screenWrap {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#screen {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: none;
  touch-action: none;
  user-select: none;
}
#placeholder {
  color: #6e7681;
  font-size: 15px;
  padding: 40px;
  text-align: center;
}

/* 底部控制栏 */
#controls {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px 10px;
  background: #161b22;
  border-top: 1px solid #21262d;
}
#controls button {
  background: #21262d;
  color: #e6edf3;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 12px 4px;
  font-size: 14px;
}
#controls button:active { background: #30363d; }
#controls button.accent { background: #1f6feb; border-color: #1f6feb; }
#controls button.accent.active { background: #f85149; border-color: #f85149; }

/* 弹窗 */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}
.modal.hidden, .hidden { display: none !important; }
.modal-box {
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 14px;
  padding: 16px;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.modal-head h3 { margin: 0; font-size: 17px; }
.close {
  background: transparent;
  border: none;
  color: #9da7b3;
  font-size: 26px;
  line-height: 1;
  padding: 0 6px;
}
.wide {
  width: 100%;
  background: #1f6feb;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
  margin-bottom: 10px;
}
.list { list-style: none; margin: 0; padding: 0; }
.list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px;
  border-bottom: 1px solid #21262d;
  font-size: 15px;
}
.list li .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list li .sub { color: #6e7681; font-size: 12px; }
.list li button {
  background: #21262d;
  color: #e6edf3;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
}
.list li button.danger { color: #f85149; border-color: #f85149; }

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.menu-grid button {
  background: #21262d;
  color: #e6edf3;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 14px 8px;
  font-size: 14px;
}
.menu-grid button.danger { color: #f85149; border-color: #f85149; }

.path-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #9da7b3;
}
.path-row .mini {
  background: #21262d;
  color: #e6edf3;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
}
.path-row #currentPath { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.output {
  margin: 12px 0 0;
  padding: 10px;
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 8px;
  font-size: 12px;
  color: #7ee787;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 160px;
  overflow-y: auto;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  background: rgba(28,33,40,.95);
  color: #e6edf3;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 14px;
  z-index: 200;
  max-width: 80vw;
  text-align: center;
}