:root {
  --bg: #0f1115; --panel: #181b22; --line: #262b36;
  --fg: #e7eaf0; --muted: #97a0b0; --accent: #ff5a4d; --ok: #35c46a;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
header {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.brand { font-weight: 700; font-size: 18px; text-decoration: none; color: var(--fg); }
nav { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--fg); }
.who { color: var(--muted); font-size: 13px; }
.acct-id { font-size: 12px; letter-spacing: .04em; opacity: .8; user-select: all; }
main { max-width: 760px; margin: 0 auto; padding: 24px 20px 60px; }
section { margin-bottom: 32px; }
h1 { font-size: 30px; }
h2 { font-size: 19px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.muted { color: var(--muted); }
.btn {
  display: inline-block; background: var(--accent); color: #fff; border: 0;
  padding: 8px 14px; border-radius: 8px; cursor: pointer; text-decoration: none;
  font-size: 14px;
}
.btn:hover { filter: brightness(1.08); }
.btn.big { padding: 12px 22px; font-size: 16px; margin-top: 16px; }
.btn.danger { background: #3a2020; color: #ff8a7d; }
/* APK download. Android brand green with dark text -- white on this green is
   only ~1.9:1, well under AA, so the label is near-black instead. */
.btn.android { background: #3ddc84; color: #06281a; font-weight: 600; }
.btn.android:hover { filter: brightness(1.05); }
.hero-actions {
  display: flex; gap: 12px; margin-top: 16px;
  justify-content: center; align-items: center; flex-wrap: wrap;
}
.hero-actions .btn { margin-top: 0; }
.device-grid { display: grid; gap: 10px; }
.device-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel);
}
.device-state { display: block; margin-top: 3px; font-size: 13px; }
.device-state.online { color: var(--ok); }
.device-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.small-note { font-size: 13px; }
.current-phone-icon { position: relative; }
.current-phone-dot {
  position: absolute; left: 9px; top: 9px; width: 16px; height: 16px;
  border: 3px solid #fff; border-radius: 50%; background: #e32636;
  box-shadow: 0 1px 5px rgba(0,0,0,.65);
}
.current-phone-pulse {
  position: absolute; inset: 3px; border-radius: 50%; background: rgba(227,38,54,.55);
  animation: phone-pulse 1.25s ease-out infinite;
}
.owner-pin span { position:relative; display:block; width:18px; height:18px; border:3px solid #fff; border-radius:18px 18px 18px 0; transform:rotate(-45deg); box-shadow:0 1px 5px rgba(0,0,0,.65); }
.owner-pin span::after { content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:50%; background:#fff; transform:translate(-50%, -50%) rotate(45deg); }
.device-color-choice { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); }
.device-color-input { width:32px; height:30px; padding:2px; border:1px solid var(--line); border-radius:7px; background:var(--bg); }
.device-label-notice { position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:20; margin:0; box-shadow:0 4px 16px rgba(0,0,0,.35); }
@keyframes phone-pulse {
  0% { transform: scale(.45); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .current-phone-pulse { animation: none; }
}
@media (max-width: 560px) {
  .device-card { align-items: stretch; flex-direction: column; }
  .device-actions .btn { flex: 1; }
}
.hero { text-align: center; padding: 40px 0; }
.lead { font-size: 18px; }
.row { display: flex; gap: 10px; margin: 16px 0; }
.row input { flex: 1; }
input {
  background: var(--bg); border: 1px solid var(--line); color: var(--fg);
  padding: 9px 11px; border-radius: 8px; font-size: 14px;
}
ul.flares, ul.shares, ul.tokens { list-style: none; padding: 0; margin: 0; }
ul.flares li a {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  color: var(--fg); padding: 12px; border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 8px; background: var(--panel);
}
ul.flares li a:hover { border-color: var(--accent); }
.flare-location a { background: rgba(255, 90, 77, .09); }
.flare-battery a { background: rgba(53, 196, 106, .09); }
.flare-other a { background: rgba(151, 160, 176, .07); }
.batt { font-weight: 700; min-width: 46px; text-align: center; }
.batt.low { color: var(--accent); }
.meta { flex: 1; color: var(--muted); font-size: 14px; }
.meta strong { color: var(--fg); }
.flare-kind { display:inline-block; font-size:11px; line-height:1.25; padding:2px 7px; border-radius:999px; margin-bottom:2px; font-weight:600; }
.flare-kind.location { background:#3a2020; color:#ff8a7d; }
.flare-kind.battery { background:#123322; color:var(--ok); }
.flare-kind.other { background:#252b38; color:var(--muted); }
.pin { font-size: 16px; }
ul.shares li, ul.tokens li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  margin-bottom: 8px; background: var(--panel);
}
.device-heading { display:flex; align-items:center; gap:12px; }
.device-heading strong { flex:1; min-width:0; }
.device-label-edit { margin-left:auto; padding:6px 10px; }
.device-label-fields { display:flex; gap:10px; align-items:center; margin-top:8px; }
.device-label-fields[hidden] { display:none !important; }
.device-label-fields input { flex:1; min-width:0; }
.admin-device-list { position:relative; }
.device-pop { min-width:300px; }
.admin-device-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:8px 0; }
.admin-device-row + .admin-device-row { border-top:1px solid var(--border); }
.admin-device-edit { display:flex; align-items:center; gap:5px; }
.admin-device-edit input[type="text"] { width:150px; padding:6px 8px; }
.admin-device-edit input[type="color"] { width:30px; height:30px; padding:2px; }
.small-text { font-size:.82rem; }
.flare-history-collapse { margin-top:8px; }
.flare-history-collapse summary { cursor:pointer; color:var(--muted); padding:6px 2px; }
.flare-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.flare-section-heading h2 { margin-bottom:0; }
.flare-section-heading + ul.flares { margin-top: 8px; }
.flare-history-inline { position:relative; }
.flare-history-inline summary { cursor:pointer; color:var(--muted); font-size:.85rem; white-space:nowrap; list-style:none; }
.flare-history-inline summary::-webkit-details-marker { display:none; }
.flare-history-inline .flares { position:absolute; right:0; top:26px; z-index:5; width:min(360px, 88vw); max-height:min(320px, 55vh); overflow-y:auto; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px; box-shadow:0 8px 24px rgba(0,0,0,.28); }
.device-actions { margin-top:12px; }
code { background: #11141a; padding: 2px 6px; border-radius: 5px; }
code.token { color: var(--ok); word-break: break-all; }
dl.config dt, dl.config dd, .detail dt, .detail dd { margin: 0; }
.detail dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; }
.detail dt { color: var(--muted); }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }
.flash.ok { background: #123322; color: var(--ok); }
.flash.error { background: #33121a; color: var(--accent); }
.back { color: var(--muted); text-decoration: none; }
.appinfo {
  margin-top: 28px; padding: 20px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--panel);
}
/* Compact layout used inside the Android WebView on small phone screens. */
.embed-android main { max-width: none; padding: 4px 6px 10px; }
.embed-android section { margin-bottom: 5px; }
.embed-android h2 { margin-top: 2px; padding-bottom: 2px; font-size: 16px; }
.embed-android .device-grid { gap: 4px; }
.embed-android .device-card { padding: 2px 5px; gap: 3px; border-radius: 8px; }
.embed-android .device-state { margin-top: 1px; font-size: 11px; }
.embed-android .device-actions { margin-top: 3px; gap: 4px; }
.embed-android .device-actions .btn { padding: 4px 8px; min-height: 30px; font-size: 12px; }
.embed-android ul.flares li a { padding: 2px 5px; margin-bottom: 2px; gap: 3px; line-height: 1.08; }
.embed-android .meta { font-size: 12px; }
.embed-android { overflow-x: hidden; }
.embed-android #map { height: clamp(220px, 42vh, 380px) !important; max-width: 100%; }
.appinfo h2 { border: 0; margin-top: 0; }
.appinfo .steps { margin: 12px 0 16px; padding-left: 20px; }
.appinfo .steps li { margin-bottom: 8px; }
.appinfo a.btn { color: #fff; }
/* ...but the green Android button needs its dark label to stay readable. */
.appinfo a.btn.android { color: #06281a; }

/* Family invite steps. Each step owns its own button so "what do I do now"
   is answered in place, rather than by a button pile at the bottom. */
.joinsteps { padding-left: 22px; }
.joinsteps > li { margin-bottom: 22px; }
.joinsteps > li > strong { display: block; margin-bottom: 4px; }
.joinsteps p { margin: 4px 0 10px; }
.joinsteps .btn { margin-top: 2px; }
.joinfallback { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.joinfallback summary { cursor: pointer; color: var(--muted); }
.joincode {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 26px; letter-spacing: 3px; text-align: center;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px; margin: 12px 0; user-select: all;
}
.sortlink { color: var(--muted); text-decoration: none; white-space: nowrap; }
.sortlink:hover { color: var(--fg); }
.sort-idle { opacity: 0.35; }
nav a i, .brand i { margin-right: 2px; }
input[type="search"] { flex: 1; }
select {
  background: var(--bg); border: 1px solid var(--line); color: var(--fg);
  padding: 9px 11px; border-radius: 8px; font-size: 14px;
}
.auth { max-width: 360px; }
.auth form { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.auth input { width: 100%; }
.auth hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.auth a { color: var(--fg); }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; font-size: 17px; line-height: 1;
  padding: 4px;
}

/* admin */
.row.wrap { flex-wrap: wrap; align-items: center; }
.admin-actions { margin: 12px 0; }
.table-scroll { overflow-x: auto; }
table.admin { width: 100%; border-collapse: collapse; font-size: 14px; }
table.admin th, table.admin td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.admin th { color: var(--muted); font-weight: 600; }
.btn.small { padding: 4px 10px; font-size: 13px; }
summary.btn { display: inline-block; list-style: none; }
summary.btn::-webkit-details-marker { display: none; }
.edit-pop { margin-top: 8px; }
.edit-pop form { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  color: var(--fg); border-radius: 8px; padding: 10px; font-family: inherit;
  font-size: 14px;
}