:root {
      color-scheme: dark;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
    }

    body {
      margin: 0;
      background: #0b0b0d;
      color: #eaeaf0;
      font: 14px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      display: grid;
      place-items: center;
      padding: 24px;
    }

    .wrap {
      width: min(1100px, 100%);
    }

    .header,
    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      letter-spacing: .2px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #00ffaa;
      box-shadow: 0 0 12px #00ffaa;
      display: inline-block;
    }

    .pill {
      border: 1px solid #2a2a33;
      background: #101016;
      padding: 6px 10px;
      border-radius: 999px;
      font-variant-numeric: tabular-nums;
    }

    .mono {
      font-feature-settings: "tnum";
      font-variant-numeric: tabular-nums;
    }

    .panel {
      margin-top: 16px;
    }

    .stage {
      background: #000;
      border: 1px solid #22232b;
      border-radius: 16px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
      padding: 14px;
    }

    .camera {
      position: relative;
      width: 100%;
      aspect-ratio: 16/9;
      background: #000;
      border-radius: 12px;
      overflow: hidden;
    }

    #camera,
    #overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #overlay {
      pointer-events: none;
    }

    .toolbar {
      gap: 8px;
      margin-top: 12px;
    }

    .btn {
      background: #15151a;
      border: 1px solid #2a2a33;
      color: #eaeaf0;
      padding: 10px 16px;
      border-radius: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: transform .1s ease, border-color .2s ease, opacity .2s ease;
    }

    .btn:hover {
      border-color: #3d3d48;
      transform: translateY(-1px);
    }

    .btn:disabled {
      opacity: .5;
      cursor: not-allowed;
      transform: none;
    }

    .btn.primary {
      background: linear-gradient(180deg, #17171d, #141419);
      border-color: #2b2b35;
    }

    .btn.ghost {
      background: transparent;
    }

    .footer {
      margin-top: 10px;
      color: #9aa0a6;
      font-size: 12px;
    }

    .footer strong {
      color: #eaeaf0;
    }

    /* === 2カラムレイアウト === */
.layout{
  display:grid;
  grid-template-columns: 260px 1fr; /* 左:サイドバー固定、右:可変 */
  gap:14px;
}

/* === サイドバー === */
.sidebar{
  background:linear-gradient(180deg,#0c1219,#0a0f15);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:100%;
}

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

.pill.wide{
  display:flex; justify-content:space-between;
  width:100%;
}

/* サイドバー内のボタンは横幅いっぱい */
.sidebar .btn{ width:100%; }

/* 既存の入退室トグルの見た目は流用 */
.btn.switch{ position:relative; padding-left:34px; }
.btn.switch::before{
  content:""; position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:12px; height:12px; border-radius:50%; box-shadow:0 0 10px currentColor;
}
#btnMode[data-mode="entry"]{ border-color:#153a2f; background:rgba(0,255,170,.06) }
#btnMode[data-mode="entry"]::before{ background:var(--accent); color:var(--accent) }
#btnMode[data-mode="exit"]{ border-color:#4a320f; background:rgba(255,176,31,.08) }
#btnMode[data-mode="exit"]::before{ background:var(--exit); color:var(--exit) }

/* ステージは右カラムにそのまま */
.stage{ margin:0; } /* 以前のmargin-bottomを無効化 */

/* === レスポンシブ（狭い画面では縦積み） === */
@media (max-width: 860px){
  .layout{
    grid-template-columns: 1fr;
  }
  .stage{
    order: -1; /* 先にステージを見せたい場合は -1、サイドバーを先に見せたいなら削除 */
  }
}

/* toast.css */
#toasts {
  display: flex; flex-direction: column; gap: 8px; z-index: 9999; pointer-events: none;
}
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  pointer-events: auto;
  background: rgba(16,18,24,.95);
  border: 1px solid #2a2f3a;
  border-radius: 12px;
  padding: 10px 14px;
  color: #eaf1ff;
  font: 600 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  display: inline-flex; align-items: center; gap: 8px;
  opacity: 0; transform: translateY(10px); 
  animation: toast-in .18s ease-out forwards, toast-out .20s ease-in forwards 2600ms;
}
.toast .check {
  width: 18px; height: 18px; display:inline-block; border-radius:50%;
  background: #00ffaa; /* success */
  box-shadow: 0 0 10px #00ffaaaa inset, 0 0 8px #00ffaaaa;
}
.toast.already { border-color: #4a2a2a; }
.toast.already .check {
  background: #ff4d4f;
  box-shadow: 0 0 10px #ff4d4faa inset, 0 0 8px #ff4d4faa;
}
.toast.unknown { border-color: #665a00; }
.toast.unknown .check {
  background: #ffd000;
  box-shadow: 0 0 10px #ffd000aa inset, 0 0 8px #ffd000aa;
}
@keyframes toast-in { to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ===== クラウド送信専用トースト ===== */
.toast.cloud {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: rgba(0, 255, 170, 0.95);
  color: #002a1a;
  font-size: 20px;
  font-weight: 700;
  padding: 26px 40px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 0 50px rgba(0,255,170,0.6), inset 0 0 4px #fff;
  z-index: 10000;
  min-width: 320px;
  max-width: 500px;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  animation: toast-center-in .18s ease-out forwards, toast-center-out .18s ease-in forwards 2600ms;
}

/* ===== フェードイン・アウト（中央用） ===== */
@keyframes toast-center-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes toast-center-out {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}