/* LINE 風格 + 美邁（MM）品牌視覺。
   只改外觀與排版，不影響任何功能、API 或安全邏輯。 */

:root {
  --mm-navy: #032F5B;      /* 主色：深藍 */
  --mm-orange: #F28A2B;    /* 強調色：橘色 */
  --mm-text: #141414;      /* 近黑文字 */
  --mm-bg: #F2F3F5;        /* 淺灰背景 */
  --mm-card: #FFFFFF;      /* 白色卡片 */
  --mm-online: #2BB673;    /* 在線綠 */
  --mm-offline: #AAB2BD;   /* 離線灰 */
  --mm-danger: #D64545;    /* 錯誤紅（柔和） */
  --mm-radius: 14px;       /* 大圓角 */
  --mm-radius-sm: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; min-height: 100%;
  background: var(--mm-bg); color: var(--mm-text);
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 16px;
}

body.center { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }

/* ---- 頂部標題列：深藍底 ---- */
header {
  height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 16px;
  background: var(--mm-navy); color: #fff; box-sizing: border-box; white-space: nowrap;
}
header .btn, header button { color: #fff; }
header img.logo-mark { height: 26px; display: block; }
.spacer { flex: 1; }

main { padding: 20px 16px 32px; display: flex; flex-direction: column; gap: 16px; align-items: center; }

/* ---- 卡片 ---- */
.card {
  background: var(--mm-card); border-radius: var(--mm-radius);
  padding: 28px 26px; width: 380px; max-width: 92vw; box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(3, 47, 91, 0.08);
}
.card.wide { width: 860px; }
.card.pair-card { padding-bottom: 16px; }
.pair-card .msg:empty { display: none; }

.brand-logo { display: block; margin: 0 auto 18px; height: 100px; }

h1 { font-size: 22px; margin: 0 0 16px; color: var(--mm-navy); font-weight: 700; text-align: center; }
h2 { font-size: 17px; margin: 0 0 12px; color: var(--mm-navy); font-weight: 700; }

label { display: block; font-size: 14px; margin-top: 14px; color: #5b6472; }
input {
  display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 12px 14px; font-size: 16px;
  border: 1.5px solid #DCE0E6; border-radius: var(--mm-radius-sm); background: #fff; color: var(--mm-text);
  transition: border-color .15s ease;
}
input:focus { outline: none; border-color: var(--mm-navy); }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row input { margin-top: 0; flex: 1; min-width: 160px; }

button, .btn {
  font-size: 15px; padding: 10px 18px; border: none; border-radius: var(--mm-radius-sm);
  background: #E8ECF1; color: var(--mm-navy); cursor: pointer; text-decoration: none;
  white-space: nowrap; font-weight: 600; transition: transform .08s ease, background .15s ease;
}
button:hover, .btn:hover { background: #DCE2EA; }
button:active, .btn:active { transform: scale(.97); }

/* 主要按鈕（深藍實心），表單提交鍵用這個樣式 */
form.card button, button.primary {
  margin-top: 22px; width: 100%; padding: 14px; font-size: 16px;
  background: var(--mm-navy); color: #fff;
}
form.card button:hover, button.primary:hover { background: #04396e; }

.note { font-size: 13px; color: #78808d; line-height: 1.7; }
.msg { min-height: 1.4em; font-size: 14px; color: var(--mm-danger); margin: 14px 0 0; text-align: center; }
.msg.ok { color: var(--mm-online); }

/* ---- 車機清單：像 LINE 聊天清單 ---- */
.device-list { display: flex; flex-direction: column; gap: 10px; }
.device-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: #fff; border-radius: var(--mm-radius); text-decoration: none; color: inherit;
  box-shadow: 0 1px 4px rgba(3, 47, 91, 0.06);
  transition: background .12s ease, transform .08s ease;
}
.device-row:hover { background: #F7F9FB; }
.device-row:active { transform: scale(.995); }

.avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: var(--mm-navy); display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.offline { background: var(--mm-offline); filter: grayscale(1); opacity: .7; }

.device-info { flex: 1; min-width: 0; }
.device-name { font-size: 17px; font-weight: 700; color: var(--mm-text); }
.device-sub { font-size: 13px; color: #8a919c; margin-top: 2px; }

.status-dot {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  background: var(--mm-offline);
}
.status-dot.on { background: var(--mm-online); }

.device-action { flex-shrink: 0; }

.empty-state {
  text-align: center; padding: 48px 20px; color: #8a919c;
}
.empty-state .avatar { margin: 0 auto 16px; width: 72px; height: 72px; opacity: .5; }
.empty-state p { font-size: 15px; margin: 6px 0; }

/* ---- 操作畫面 ---- */
body.view { overflow: hidden; height: 100vh; }
#stage {
  position: absolute; top: 56px; left: 0; right: 0; bottom: 84px;
  display: flex; align-items: center; justify-content: center;
}
#player {
  background: #000; touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: crosshair; display: none; position: relative; z-index: 1;
  border-radius: var(--mm-radius); overflow: hidden;
}
#hint { font-size: 18px; color: #8a919c; text-align: center; padding: 1em; line-height: 1.8; }
#waiting {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 15px; color: #8a919c; z-index: 2; display: none; pointer-events: none;
}
#status { font-size: 13px; color: #cfe0f5; font-variant-numeric: tabular-nums; }

/* 連線狀態小圓點（放在 #status 文字前） */
#status::before {
  content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--mm-online); margin-right: 6px; vertical-align: middle;
}

/* 底部大圖示按鈕列：按鈕要夠大，滑鼠與觸控都好按 */
footer.action-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 84px; padding: 0 12px;
  background: #fff; display: flex; align-items: center; justify-content: center; gap: 12px;
  box-shadow: 0 -2px 8px rgba(3, 47, 91, 0.08);
}
footer.action-bar button {
  flex: 1; max-width: 220px; height: 64px; font-size: 17px; font-weight: 700;
  background: var(--mm-bg); color: var(--mm-navy); border-radius: var(--mm-radius);
}
footer.action-bar button:hover { background: #E8ECF1; }

/* 卡住自救提示條：柔和、不整頁閃爍 */
#reconnect-banner {
  position: absolute; top: 66px; left: 50%; transform: translateX(-50%);
  background: rgba(3, 47, 91, 0.92); color: #fff; padding: 8px 18px;
  border-radius: 999px; font-size: 13px; z-index: 5; display: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

footer#stats {
  position: absolute; left: 0; right: 64px; bottom: 0; height: 0; /* 統計字改為隱藏置底細字，保留於 DOM 供除錯 */
  font-size: 11px; color: #b8c0cc; overflow: hidden; visibility: hidden;
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #ECEFF2; }
.on { color: var(--mm-online); font-weight: 600; }
.off { color: var(--mm-offline); }
code { font-family: Consolas, monospace; color: #5b6472; background: #F2F3F5; padding: 2px 6px; border-radius: 4px; }

/* ---- 帳號安全（二步驟驗證） ---- */
[hidden] { display: none !important; }
header a.nav-link { color: #fff; font-size: 14px; text-decoration: none; opacity: .9; margin-left: 14px; }
header a.nav-link:hover { opacity: 1; text-decoration: underline; }
h3 { font-size: 15px; margin: 18px 0 8px; color: var(--mm-navy); font-weight: 700; }
.twofa-state { font-size: 15px; font-weight: 700; color: #78808d; }
.twofa-state.on { color: var(--mm-online); }
.twofa-step { border-top: 1px solid #E8ECF1; margin-top: 14px; padding-top: 4px; }
.secret-box, .backup-codes {
  font-family: Consolas, "Courier New", monospace; font-size: 20px; letter-spacing: 1px;
  background: #F2F3F5; border-radius: var(--mm-radius-sm); padding: 14px; text-align: center;
  user-select: all; word-break: break-all; margin: 10px 0;
}
.backup-codes { font-size: 18px; line-height: 1.8; white-space: pre; columns: 2; }
select {
  font-size: 15px; padding: 10px 12px; border: 1.5px solid #DCE0E6; border-radius: var(--mm-radius-sm);
  background: #fff; color: var(--mm-text); min-width: 160px;
}
.row input[type=file] { padding: 8px; }
.device-remove {
  margin-left: 12px; padding: 6px 12px; font-size: 13px; background: transparent;
  color: var(--mm-danger); border: 1px solid #E6C9C9; border-radius: var(--mm-radius-sm);
}
.device-remove:hover { background: #FBEDED; }

/* 排在同一列的按鈕（頁面安全政策不允許寫在標籤上的 style，所以用類別） */
.inline-btn { margin-top: 0 !important; width: auto !important; }