/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #fff; color: #0f0f1a; min-height: 100vh; }

/* ── Header ──────────────────────────────────────────────────────────── */
header { border-bottom: 1px solid #e4e4ec; }
header > div {
  display: flex; align-items: center; gap: .5rem;
  max-width: 1100px; margin: 0 auto; padding: .75rem 1rem;
}
header img { height: 1.4rem; border-radius: 50%; }
header span { font-size: .9rem; font-weight: 700; letter-spacing: .02em; }
header nav { margin-left: auto; position: relative; }
header nav details { position: relative; }
header nav summary { list-style: none; cursor: pointer; font-size: .8rem; font-weight: 600; color: #6366f1; user-select: none; }
header nav summary::-webkit-details-marker { display: none; }
header nav details[open] summary { opacity: .7; }
header nav details ul { position: absolute; right: 0; top: calc(100% + .4rem); background: #fff; border: 1px solid #e4e4ec; border-radius: .375rem; box-shadow: 0 4px 16px rgba(0,0,0,.1); min-width: 9rem; padding: .3rem 0; z-index: 100; list-style: none; }
header nav details ul li a,
header nav details ul li button { display: block; width: 100%; text-align: left; padding: .45rem 1rem; font-size: .8rem; font-weight: 600; color: #0f0f1a; text-decoration: none; background: none; border: none; cursor: pointer; border-radius: 0; }
header nav details ul li a:hover,
header nav details ul li button:hover { background: #f5f5ff; color: #6366f1; opacity: 1; }

/* ── Logo ────────────────────────────────────────────────────────────── */
img.logo {
  width: min(20px, 40vw); height: auto;
  border: 1px solid black; border-radius: 100%;
  box-shadow: 0 4px 24px rgba(99, 102, 241, .15);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
button {
  cursor: pointer; border: none; border-radius: .375rem; font-size: .8rem; font-weight: 600;
  padding: .45rem 1rem; background: #6366f1; color: #fff; transition: opacity .15s;
}
button:hover { opacity: .85; }
button:disabled { opacity: .4; cursor: not-allowed; }
button.danger { background: none; color: #ef4444; padding: .45rem 0; font-size: .75rem; }
button.danger:hover { opacity: .7; }
button.sm { padding: .35rem .75rem; font-size: .75rem; }
button.outline { background: none; border: 1px solid #d1d5db; color: #374151; }
button.outline:hover { background: #f9fafb; opacity: 1; }
button.toggle { background: none; border: 1px solid currentColor; font-size: .75rem; font-weight: 600; padding: .3rem .7rem; }
button.toggle.enable  { color: #16a34a; }
button.toggle.disable { color: #dc2626; }

/* ── Page title ──────────────────────────────────────────────────────── */
.page-title { padding: 1.25rem 1rem .75rem; border-bottom: 1px solid #e4e4ec; }
.page-title h1 { font-size: 1.1rem; font-weight: 700; }
.page-title p { font-size: .78rem; color: #6b6b8a; margin-top: .2rem; }

/* ── Key rows ────────────────────────────────────────────────────────── */
.key-row { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-bottom: 1px solid #e4e4ec; }
.key-name { font-size: .82rem; font-weight: 600; color: #0f0f1a; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-name-missing { font-size: .82rem; color: #9090a8; font-style: italic; flex: 1; }
.key-row time { font-size: .72rem; color: #9090a8; white-space: nowrap; }

/* ── Status dot ──────────────────────────────────────────────────────── */
.dot { width: .55rem; height: .55rem; border-radius: 50%; flex-shrink: 0; }
.dot.on  { background: #16a34a; }
.dot.off { background: #d1d5db; }

/* ── Empty / error states ────────────────────────────────────────────── */
.empty { padding: 1.25rem 1rem; font-size: .82rem; color: #9090a8; }
.error { padding: .75rem 1rem; font-size: .82rem; color: #ef4444; }

/* ── Secret box ──────────────────────────────────────────────────────── */
.secret-box {
  border: 1px solid #c7d2fe; border-radius: .375rem; background: #f5f7ff; padding: .75rem;
}
.secret-box code { display: block; font-family: monospace; font-size: .78rem; word-break: break-all; margin-bottom: .5rem; }
.notice { font-size: .75rem; color: #92400e; margin-top: .5rem; }

/* ── Code snippet ────────────────────────────────────────────────────── */
pre.snippet {
  margin-top: .75rem; background: #f5f7ff; border: 1px solid #c7d2fe;
  border-radius: .375rem; padding: .65rem .75rem;
  font-family: monospace; font-size: .75rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-all; color: #1e1b4b;
}

/* ── Modal dialog ────────────────────────────────────────────────────── */
dialog { border: none; border-radius: .5rem; padding: 0; max-width: 340px; width: 90%; box-shadow: 0 8px 32px rgba(0,0,0,.18); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }
dialog::backdrop { background: rgba(0,0,0,.35); }
.dialog-body { padding: 1.25rem 1.25rem .75rem; }
.dialog-body .dialog-title { font-weight: 700; font-size: .95rem; margin-bottom: .4rem; }
.dialog-body p { font-size: .85rem; color: #0f0f1a; line-height: 1.5; }
.dialog-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1.25rem; border-top: 1px solid #e4e4ec; }
.dialog-foot button { min-width: 5rem; }

/* ── WhatsApp float button ───────────────────────────────────────────── */
.wa-btn {
  position: fixed; top: 50%; right: 0.5rem; transform: translateY(-50%);
  z-index: 9999; display: block; border-radius: 50%;
  padding: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25); line-height: 0;
  background-color: white;
}
.wa-btn img { width: 3.5rem; height: 3.5rem; border-radius: 50%; display: block; }