:root {
  --bg: #f4f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --accent: #1363df;
  --danger: #b91c1c;
  --muted: #64748b;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: linear-gradient(160deg, #e8f0ff 0%, #f8fbff 60%, #eef7f1 100%);
  color: var(--text);
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem;
}

h1 {
  margin: 0 0 1rem;
}

.card {
  background: var(--card);
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

input,
button {
  width: 100%;
  margin: 0.35rem 0;
  padding: 0.7rem;
  border-radius: 10px;
  border: 1px solid #c6d2e3;
  font-size: 1rem;
}

button {
  background: var(--accent);
  color: white;
  border: none;
}

button.danger {
  background: var(--danger);
}

.row {
  display: flex;
  gap: 0.5rem;
}

.row > * {
  flex: 1;
}

.stack {
  margin-bottom: 0.8rem;
}

.hidden {
  display: none;
}

.device {
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  padding: 0.7rem;
  margin-bottom: 0.5rem;
  background: #f9fbff;
}

.small {
  font-size: 0.88rem;
  color: var(--muted);
}

#status {
  font-size: 0.95rem;
  color: var(--muted);
}

/* ── Status badges ── */
.status-ok   { color: #15803d; }
.status-warn { color: #b45309; }
.status-off  { color: #b91c1c; }

/* ── Small buttons ── */
.btn-sm {
  display: inline-block;
  width: auto;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  background: var(--accent);
  color: white;
  border: none;
  margin: 0 0.2rem 0 0;
}

.btn-sm.btn-danger {
  background: var(--danger);
}

/* ── Button loading / disabled state ── */
button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.btn-spinning {
  position: relative;
  padding-right: 1.9rem !important;
  pointer-events: none;
}

.btn-spinning::after {
  content: "";
  position: absolute;
  right: 0.45rem;
  top: 50%;
  margin-top: -0.35rem;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.65s linear infinite;
}

/* ── Tabs ── */
.tab-nav {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #e5e7eb;
}

.tab-btn {
  background: none;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #6b7280;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  width: auto;
  border-radius: 0;
}

.tab-btn.active {
  color: #111827;
  border-bottom-color: #111827;
  font-weight: 600;
}

.tab-btn:hover:not(.active) {
  color: #374151;
}

.tab-panel.hidden { display: none; }

/* ── 管理下拉選單 ── */
.tab-dropdown {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
  z-index: 100;
  padding: 0.3rem 0;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  text-align: left;
  background: none;
  border: none;
  font-size: 0.9rem;
  color: #374151;
  cursor: pointer;
  border-radius: 0;
  margin: 0;
}

.dropdown-item:hover {
  background: #f0f4ff;
  color: var(--accent);
}

.dropdown-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 0.3rem 0;
}

/* ── Heartbeat Monitor ── */
.hb-table      { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.hb-thead-row  { border-bottom: 2px solid #e5e7eb; background: #f9fafb; }
.hb-th         { padding: 8px 10px; text-align: left; }
.hb-th-center  { text-align: center; }
.hb-th-right   { text-align: right; }
.hb-tr         { border-bottom: 1px solid #f3f4f6; }
.hb-td         { padding: 7px 10px; }
.hb-td-center  { text-align: center; padding: 7px 10px; }
.hb-td-right   { text-align: right; padding: 7px 10px; }
.hb-td-num     { text-align: right; padding: 7px 10px; font-variant-numeric: tabular-nums; }
.hb-status-lbl { font-size: 0.8rem; font-weight: 600; }

/* ── Device state badges ── */
.device-state-badge   { font-weight: 600; white-space: nowrap; padding: 0.15rem 0.5rem; border-radius: 999px; }
.device-state-lock    { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.device-state-active  { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.device-state-default { background: #f9fafb; color: #6b7280; border: 1px solid #e5e7eb; }

/* ── Device card ── */
.device-alias-label  { font-weight: 600; }
.device-status-badge { font-weight: 600; white-space: nowrap; }
.device-card-header  { display: flex; align-items: center; gap: 0.5rem; }
.device-card-info    { flex: 1; min-width: 0; }
.device-id-label     { color: #94a3b8; font-family: monospace; font-size: 0.78rem; margin-top: 0.05rem; }
.device-details      { margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid #e5e7eb; }
.device-details.hidden { display: none; }
.device-stats        { margin-bottom: 0.3rem; }
.device-lastseen     { margin-bottom: 0.6rem; }
.device-actions      { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.enroll-url-box      { margin-top: 0.4rem; padding: 0.5rem 0.7rem; background: #f0f4ff; border-radius: 6px; line-height: 1.8; }
.enroll-url-box.hidden  { display: none; }
.enroll-url-title    { margin-bottom: 0.3rem; font-weight: 600; }
.enroll-url-code     { word-break: break-all; }
.enroll-url-btns     { margin-top: 0.4rem; display: flex; gap: 0.4rem; }
.task-result-box     { margin-top: 0.3rem; }
.task-result-box.hidden { display: none; }

/* ── Rename form ── */
.rename-form         { display: flex; align-items: center; gap: 0.4rem; flex-wrap: nowrap; margin-top: 0.5rem; }
.rename-form.hidden  { display: none; }
.rename-input        { flex: 1; margin: 0; padding: 0.3rem 0.6rem; font-size: 0.875rem; border-radius: 8px; border: 1px solid #c6d2e3; min-width: 0; width: auto; }

/* ── Button overrides ── */
.btn-sm.rename-device-btn  { background: none; color: #94a3b8; padding: 0.1rem 0.35rem; font-size: 0.72rem; border: 1px solid #e2e8f0; margin-left: 0.2rem; }
.btn-sm.toggle-device-btn  { background: #f1f5f9; color: #374151; border: 1px solid #e2e8f0; min-width: 1.8rem; text-align: center; }
.btn-sm.cancel-rename-btn  { background: #e5e7eb; color: #374151; }

/* ── Status text colors ── */
.text-error   { color: #ef4444; }
.text-muted   { color: #94a3b8; }
.text-success { color: #22c55e; }
.text-pending { color: #f59e0b; }
.text-gray    { color: #6b7280; }
.fw-600       { font-weight: 600; }
.ff-mono      { font-family: monospace; }

/* ── Sessions ── */
.session-row             { }
.session-row.is-inactive { opacity: 0.6; }
.session-header          { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.session-id-label        { margin-left: auto; color: #94a3b8; font-family: monospace; }
.session-meta            { margin-top: 0.25rem; }
.session-btns            { margin-top: 0.4rem; display: flex; gap: 0.3rem; flex-wrap: wrap; }
.session-ip-panel        { margin-top: 0.5rem; padding: 0.4rem 0.6rem; background: #f0f4ff; border-radius: 6px; line-height: 1.7; }
.session-req-panel       { margin-top: 0.5rem; max-height: 220px; overflow-y: auto; padding: 0.4rem 0.6rem; background: #f8faff; border-radius: 6px; line-height: 1.65; }

/* ── Session expired toggle ── */
.expired-sessions-toggle { margin-top: 0.75rem; }
.muted-note             { color: #94a3b8; margin-top: 0.5rem; }

/* ── API Tokens ── */
.section-divider        { border: none; border-top: 1px solid #e2e8f0; margin: 1.5rem 0 1rem; }
.api-token-create-row   { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.api-token-create-row input { flex: 1; min-width: 200px; padding: 0.4rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 0.9rem; }
.api-token-reveal       { margin-bottom: 1rem; padding: 0.75rem; background: #f0fdf4; border: 1px solid #86efac; border-radius: 8px; }
.api-token-value-row    { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; flex-wrap: wrap; }
.api-token-code         { font-family: monospace; font-size: 0.8rem; word-break: break-all; background: #e0f2fe; padding: 0.3rem 0.5rem; border-radius: 4px; flex: 1; }

/* ── Passkeys ── */
.passkey-actions { margin-top: 0.3rem; }

/* ── Metrics ── */
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.5rem; margin-top: 0.5rem; }

/* ── Request log rows ── */
.request-row    { border-bottom: 1px solid #e2e8f0; padding: 0.15rem 0; }
.request-status { font-weight: 600; }
.request-method { font-family: monospace; }
.request-ip     { color: #94a3b8; }
.request-time   { color: #94a3b8; float: right; }

/* ── Login page ── */
.passkey-login-btn {
  width: 100%; margin-bottom: 12px; padding: 10px;
  font-size: 16px; background: #007aff; color: white;
  border: none; border-radius: 8px; cursor: pointer;
}
.or-divider { text-align: center; color: #888; margin-bottom: 12px; }

/* ── Dashboard layout ── */
.logout-btn      { margin-left: auto; color: #b91c1c; }
.devices-header  { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; flex-wrap: wrap; }
.devices-header h2 { margin: 0; flex: 1; }
.btn-auto        { width: auto; padding: 0.45rem 0.85rem; }
.row h3          { margin: 0; }
.panel-desc      { margin: 0.25rem 0 0.75rem; color: #6b7280; }
.passkey-add-row { margin-top: 1rem; }

/* ── Enroll section ── */
.enroll-section-card { margin: 0.75rem 0; background: #f0f9ff; border: 1px solid #bae6fd; }
.enroll-section-card p { margin: 0 0 0.5rem; }
.enroll-cmd-row  { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.enroll-cmd-code { flex: 1; background: #e0f2fe; padding: 0.4rem 0.6rem; border-radius: 4px; font-size: 0.78rem; word-break: break-all; }

/* ── Device list: connection status dot ── */
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: default;
}
.status-dot-ok   { background: #22c55e; box-shadow: 0 0 0 2.5px rgba(34,197,94,0.18); }
.status-dot-warn { background: #f59e0b; box-shadow: 0 0 0 2.5px rgba(245,158,11,0.18); }
.status-dot-off  { background: #ef4444; box-shadow: 0 0 0 2.5px rgba(239,68,68,0.18); }

/* ── Device list: live "距今" in card header ── */
.device-age-label {
  font-size: 0.78rem;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Common Commands panel ── */
.cmd-subtab-nav    { display: flex; gap: 0.35rem; margin-bottom: 1rem; border-bottom: 2px solid #e5e7eb; }
.cmd-subtab-btn    { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 0.4rem 0.85rem; font-size: 0.88rem; color: #6b7280; cursor: pointer; border-radius: 0; width: auto; }
.cmd-subtab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.cmd-subtab-btn:hover:not(.active) { color: #374151; }
.cmd-subtab-panel.hidden { display: none; }
.cmd-group         { margin-bottom: 1.4rem; }
.cmd-group-title   { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.55rem; }
.cmd-item          { margin-bottom: 0.5rem; }
.cmd-label         { font-size: 0.82rem; color: #374151; margin-bottom: 0.2rem; }
.cmd-row           { display: flex; align-items: center; gap: 0.5rem; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.45rem 0.6rem; }
.cmd-code          { flex: 1; font-family: monospace; font-size: 0.78rem; white-space: pre-wrap; word-break: break-all; color: #1e293b; }
.cmd-copy-btn      { flex-shrink: 0; width: auto; margin: 0; padding: 0.2rem 0.55rem; font-size: 0.75rem; background: var(--accent); }
.cmd-copy-btn.cmd-copied { background: #15803d; }

/* ── Device list: state icon slot & icons ── */
.device-state-icon-slot { display: inline-flex; align-items: center; }
.device-state-icon      { display: inline-flex; align-items: center; cursor: default; }
.state-locked           { color: #16a34a; }
.state-active           { color: #dc2626; }
.state-no-login         { color: #9ca3af; }

/* ── Agent Changelog panel ── */
.changelog-entry      { margin-bottom: 1.6rem; border-left: 3px solid var(--accent); padding-left: 1rem; }
.changelog-version    { font-size: 1rem; font-weight: 700; color: var(--accent); margin-bottom: 0.4rem; }
.changelog-date       { font-size: 0.78rem; font-weight: 400; color: var(--muted); margin-left: 0.5rem; }
.changelog-list       { margin: 0; padding-left: 1.2rem; }
.changelog-list li    { font-size: 0.85rem; color: #374151; margin-bottom: 0.3rem; line-height: 1.55; }

/* ── Chrome Extension 安裝面板 ── */
.ext-section          { margin-bottom: 1.6rem; border-left: 3px solid var(--accent); padding-left: 1rem; }
.ext-section-title    { font-size: 1rem; font-weight: 700; color: var(--accent); margin-bottom: 0.5rem; }
.ext-steps            { margin: 0 0 0.4rem; padding-left: 1.2rem; }
.ext-steps li         { font-size: 0.85rem; color: #374151; margin-bottom: 0.35rem; line-height: 1.55; }
.ext-note             { color: var(--muted); font-style: italic; margin-top: 0.4rem; }
.btn-download         {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.45rem 1.1rem;
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
}
.btn-download:hover   { opacity: 0.85; }

/* ── SSE heartbeat flash ── */
@keyframes sse-flash {
  0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6); }
  50%  { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.15); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.sse-flash { animation: sse-flash 0.6s ease-out; }