/* My Fidget account tabs and selected device card. The shared kit owns the
   browser-only loadout and first-visit layouts. */

#cf-myfidget-account-count[hidden], #cf-myfidget-usb[hidden], #cf-myfidget-add[hidden],
#cf-myfidget-connect[hidden], #cf-myfidget-account-card[hidden], #cf-myfidget-look-card[hidden],
#cf-rail-mount[hidden], #cf-myfidget-summary[hidden] { display: none !important; }

.cf-account-eyebrow, .cf-account-ready-title {
  margin: 0 0 12px;
  color: var(--cf-cyan);
  font: 700 11px/1.4 var(--cf-font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

#cf-myfidget-main > h1 { margin: 0 0 14px; }
#cf-myfidget-main[data-account="true"] { padding-top: 25px; }
#cf-myfidget-usb { margin-bottom: 10px; }
#cf-myfidget-add { margin: 0 0 16px; }
#cf-myfidget-connect { margin: 8px 0 20px; }
#cf-myfidget-connect .cf-fvj-connect-card { max-width: 620px; }
.cf-device-tabs { flex-wrap: wrap; }
.cf-device-tab-count {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cf-yellow);
  color: var(--cf-bg-deep);
  font: 700 11px var(--cf-font-mono);
}

#cf-myfidget-account-card, #cf-myfidget-look-card {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid var(--cf-bg-line);
  background: var(--cf-bg-card, #1b1729);
  color: var(--cf-ink);
  font-family: var(--cf-font-display);
}
.cf-account-heading { display: flex; align-items: center; gap: 10px; }
.cf-account-name { display: block; font-size: 18px; }
.cf-account-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cf-ink-mute); }
.cf-account-status-dot[data-waiting] { background: var(--cf-yellow); box-shadow: 0 0 8px var(--cf-yellow); }
.cf-account-sub, .cf-account-note {
  margin: 5px 0 14px;
  color: var(--cf-ink-mute);
  font: 11px/1.6 var(--cf-font-mono);
}
.cf-account-ready {
  margin: 15px 0;
  padding: 14px;
  border: 1px solid var(--cf-yellow);
}
.cf-account-ready-title { color: var(--cf-yellow); }
.cf-account-ready ul { margin: 0; padding-left: 0; list-style: none; color: var(--cf-ink); font: 11px/1.6 var(--cf-font-mono); }
.cf-account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-account-actions .cf-btn { font-size: 11px; }

@media (max-width: 880px) {
  #cf-myfidget-account-card, #cf-myfidget-look-card { width: 100%; }
  .cf-device-tab .cf-managed-chip { display: inline; }
}