:root {
  --bg: #12141A;
  --panel: #1A1D24;
  --panel-alt: #20232C;
  --border: #262A33;
  --text: #E6E8EB;
  --text-muted: #7D8590;
  --accent: #4FD1C5;
  --accent-dim: #2B7A73;
  --warn: #E8A33D;
  --danger: #E5534B;
  --radius: 6px;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  height: 100vh;
  height: 100dvh; /* モバイルブラウザのアドレスバー分の誤差を吸収 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mono { font-family: 'IBM Plex Mono', monospace; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* フォーム要素の共通スタイル */
input[type=text], input[type=password], select, textarea {
  width: 100%;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 9px;
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  margin-bottom: 6px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-dim);
}

button {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 12px;
  border-radius: var(--radius);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  cursor: pointer;
}
button:hover { border-color: var(--accent-dim); color: var(--accent); }
button.primary { background: var(--accent-dim); border-color: var(--accent-dim); color: #0D1117; }
button.primary:hover { color: #0D1117; }
button.full { width: 100%; }
button.icon-btn { padding: 7px 10px; font-size: 14px; }