/* Locations */
.loc { display: flex; align-items: center; gap: var(--s2); }
.loc .flag { font-size: 15px; line-height: 1; }
.loc .iso { font: var(--fs-xs) var(--mono); color: var(--text-mute); }
.fav {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-mute);
  padding: 2px;
  line-height: 1;
}
.fav.on { color: var(--warn); }

.advanced { display: grid; gap: var(--s3); }
.advanced .opt { display: grid; gap: var(--s1); }
.advanced .opt > span { font-size: var(--fs-sm); color: var(--text-dim); }

/* Devices */
.device { display: grid; gap: var(--s3); }
.device .head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.device .keyline { font: var(--fs-sm) var(--mono); color: var(--text-mute); }
.conflist { display: grid; gap: var(--s2); }
.confrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--bg);
  flex-wrap: wrap;
}
.confrow .name { font-weight: 550; }

/* Account */
.expiry-bar {
  height: 6px;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
}
.expiry-bar > i { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.expiry-bar.warn > i { background: var(--warn); }
.expiry-bar.bad > i { background: var(--danger); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); align-items: center; }
.kv dt { font-size: var(--fs-sm); color: var(--text-mute); }
.kv dd { margin: 0; }

/* Admin */
.menu { position: relative; display: inline-block; }
.menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  min-width: 190px;
  padding: 4px;
  z-index: 30;
}
.menu-list button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
}
.menu-list button:hover { background: var(--surface-2); }
.menu-list button.danger { color: var(--danger); }
.menu-list hr { border: 0; border-top: 1px solid var(--line-soft); margin: 4px 0; }
.menu-list .label {
  font-size: var(--fs-xs);
  color: var(--text-mute);
  padding: 6px 10px 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.qr { display: grid; justify-items: center; gap: var(--s2); }
.qr canvas, .qr svg { background: #fff; padding: 8px; border-radius: var(--r-sm); }

.secret-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.secret-row .val { font-family: var(--mono); font-size: var(--fs-sm); }